inicios del FrontEnd
This commit is contained in:
7
APP/assets/README.md
Normal file
7
APP/assets/README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# ASSETS
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
|
||||
|
||||
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
|
||||
56
APP/assets/css/demo.css
Normal file
56
APP/assets/css/demo.css
Normal file
@@ -0,0 +1,56 @@
|
||||
.tim-row{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tim-white-buttons {
|
||||
background-color: #777777;
|
||||
}
|
||||
.typography-line{
|
||||
padding-left: 25%;
|
||||
margin-bottom: 35px;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.typography-line span{
|
||||
color: #c0c1c2;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 13px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 260px;
|
||||
text-transform: none;
|
||||
}
|
||||
.tim-row{
|
||||
padding-top: 60px;
|
||||
}
|
||||
.tim-row h3{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.offline-doc .page-header:before {
|
||||
content: "";
|
||||
background: rgba(0,0,0,.75);
|
||||
}
|
||||
|
||||
.offline-doc .page-header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.offline-doc .footer{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#map {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
539
APP/assets/css/nucleo-icons.css
Normal file
539
APP/assets/css/nucleo-icons.css
Normal file
@@ -0,0 +1,539 @@
|
||||
/* --------------------------------
|
||||
|
||||
Nucleo Outline Web Font - nucleoapp.com/
|
||||
License - nucleoapp.com/license/
|
||||
Created using IcoMoon - icomoon.io
|
||||
|
||||
-------------------------------- */
|
||||
|
||||
@font-face {
|
||||
font-family: 'Nucleo';
|
||||
src: url('../fonts/nucleo.eot');
|
||||
src: url('../fonts/nucleo.eot') format('embedded-opentype'),
|
||||
url('../fonts/nucleo.woff2') format('woff2'),
|
||||
url('../fonts/nucleo.woff') format('woff'),
|
||||
url('../fonts/nucleo.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
base class definition
|
||||
-------------------------*/
|
||||
|
||||
.tim-icons {
|
||||
display: inline-block;
|
||||
font: normal normal normal 1em/1 'Nucleo';
|
||||
vertical-align: middle;
|
||||
speak: none;
|
||||
text-transform: none;
|
||||
/* Better Font Rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.font-icon-detail{
|
||||
text-align: center;
|
||||
padding: 45px 0 30px;
|
||||
border: 1px solid #e44cc4;
|
||||
border-radius: .1875rem;
|
||||
margin: 15px 0;
|
||||
min-height: 168px;
|
||||
}
|
||||
.font-icon-detail i{
|
||||
color: #FFFFFF;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.font-icon-detail p{
|
||||
color: #e44cc4 !important;
|
||||
margin-top: 30px;
|
||||
padding: 0 10px;
|
||||
font-size: .7142em;
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
change icon size
|
||||
-------------------------*/
|
||||
|
||||
.tim-icons-sm {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
.tim-icons-lg {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
/* absolute units */
|
||||
.tim-icons-16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.tim-icons-32 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
/*----------------------------------
|
||||
add a square/circle background
|
||||
-----------------------------------*/
|
||||
|
||||
.tim-icons-bg-square,
|
||||
.tim-icons-bg-circle {
|
||||
padding: 0.35em;
|
||||
}
|
||||
|
||||
.tim-icons-bg-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
/*------------------------
|
||||
list icons
|
||||
-------------------------*/
|
||||
|
||||
|
||||
|
||||
/*------------------------
|
||||
spinning icons
|
||||
-------------------------*/
|
||||
|
||||
.tim-icons-is-spinning {
|
||||
-webkit-animation: tim-icons-spin 2s infinite linear;
|
||||
-moz-animation: tim-icons-spin 2s infinite linear;
|
||||
animation: tim-icons-spin 2s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes tim-icons-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes tim-icons-spin {
|
||||
0% {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes tim-icons-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
-moz-transform: rotate(0deg);
|
||||
-ms-transform: rotate(0deg);
|
||||
-o-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
-moz-transform: rotate(360deg);
|
||||
-ms-transform: rotate(360deg);
|
||||
-o-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------
|
||||
rotated/flipped icons
|
||||
-------------------------*/
|
||||
/*------------------------
|
||||
icons
|
||||
-------------------------*/
|
||||
|
||||
.icon-alert-circle-exc::before {
|
||||
content: "\ea02";
|
||||
}
|
||||
|
||||
.icon-align-center::before {
|
||||
content: "\ea03";
|
||||
}
|
||||
|
||||
.icon-align-left-2::before {
|
||||
content: "\ea04";
|
||||
}
|
||||
|
||||
.icon-app::before {
|
||||
content: "\ea05";
|
||||
}
|
||||
|
||||
.icon-atom::before {
|
||||
content: "\ea06";
|
||||
}
|
||||
|
||||
.icon-attach-87::before {
|
||||
content: "\ea07";
|
||||
}
|
||||
|
||||
.icon-badge::before {
|
||||
content: "\ea08";
|
||||
}
|
||||
|
||||
.icon-bag-16::before {
|
||||
content: "\ea09";
|
||||
}
|
||||
|
||||
.icon-bank::before {
|
||||
content: "\ea0a";
|
||||
}
|
||||
|
||||
.icon-basket-simple::before {
|
||||
content: "\ea0b";
|
||||
}
|
||||
|
||||
.icon-bell-55::before {
|
||||
content: "\ea0c";
|
||||
}
|
||||
|
||||
.icon-bold::before {
|
||||
content: "\ea0d";
|
||||
}
|
||||
|
||||
.icon-book-bookmark::before {
|
||||
content: "\ea0e";
|
||||
}
|
||||
|
||||
.icon-bulb-63::before {
|
||||
content: "\ea0f";
|
||||
}
|
||||
|
||||
.icon-bullet-list-67::before {
|
||||
content: "\ea10";
|
||||
}
|
||||
|
||||
.icon-bus-front-12::before {
|
||||
content: "\ea11";
|
||||
}
|
||||
|
||||
.icon-button-pause::before {
|
||||
content: "\ea12";
|
||||
}
|
||||
|
||||
.icon-button-power::before {
|
||||
content: "\ea13";
|
||||
}
|
||||
|
||||
.icon-calendar-60::before {
|
||||
content: "\ea14";
|
||||
}
|
||||
|
||||
.icon-camera-18::before {
|
||||
content: "\ea15";
|
||||
}
|
||||
|
||||
.icon-caps-small::before {
|
||||
content: "\ea16";
|
||||
}
|
||||
|
||||
.icon-cart::before {
|
||||
content: "\ea17";
|
||||
}
|
||||
|
||||
.icon-chart-bar-32::before {
|
||||
content: "\ea18";
|
||||
}
|
||||
|
||||
.icon-chart-pie-36::before {
|
||||
content: "\ea19";
|
||||
}
|
||||
|
||||
.icon-chat-33::before {
|
||||
content: "\ea1a";
|
||||
}
|
||||
|
||||
.icon-check-2::before {
|
||||
content: "\ea1b";
|
||||
}
|
||||
|
||||
.icon-cloud-download-93::before {
|
||||
content: "\ea1c";
|
||||
}
|
||||
|
||||
.icon-cloud-upload-94::before {
|
||||
content: "\ea1d";
|
||||
}
|
||||
|
||||
.icon-coins::before {
|
||||
content: "\ea1e";
|
||||
}
|
||||
|
||||
.icon-compass-05::before {
|
||||
content: "\ea1f";
|
||||
}
|
||||
|
||||
.icon-controller::before {
|
||||
content: "\ea20";
|
||||
}
|
||||
|
||||
.icon-credit-card::before {
|
||||
content: "\ea21";
|
||||
}
|
||||
|
||||
.icon-delivery-fast::before {
|
||||
content: "\ea22";
|
||||
}
|
||||
|
||||
.icon-double-left::before {
|
||||
content: "\ea23";
|
||||
}
|
||||
|
||||
.icon-double-right::before {
|
||||
content: "\ea24";
|
||||
}
|
||||
|
||||
.icon-email-85::before {
|
||||
content: "\ea25";
|
||||
}
|
||||
|
||||
.icon-gift-2::before {
|
||||
content: "\ea26";
|
||||
}
|
||||
|
||||
.icon-globe-2::before {
|
||||
content: "\ea27";
|
||||
}
|
||||
|
||||
.icon-headphones::before {
|
||||
content: "\ea28";
|
||||
}
|
||||
|
||||
.icon-heart-2::before {
|
||||
content: "\ea29";
|
||||
}
|
||||
|
||||
.icon-html5::before {
|
||||
content: "\ea2a";
|
||||
}
|
||||
|
||||
.icon-image-02::before {
|
||||
content: "\ea2b";
|
||||
}
|
||||
|
||||
.icon-istanbul::before {
|
||||
content: "\ea2c";
|
||||
}
|
||||
|
||||
.icon-key-25::before {
|
||||
content: "\ea2d";
|
||||
}
|
||||
|
||||
.icon-laptop::before {
|
||||
content: "\ea2e";
|
||||
}
|
||||
|
||||
.icon-light-3::before {
|
||||
content: "\ea2f";
|
||||
}
|
||||
|
||||
.icon-link-72::before {
|
||||
content: "\ea30";
|
||||
}
|
||||
|
||||
.icon-lock-circle::before {
|
||||
content: "\ea31";
|
||||
}
|
||||
|
||||
.icon-map-big::before {
|
||||
content: "\ea32";
|
||||
}
|
||||
|
||||
.icon-minimal-down::before {
|
||||
content: "\ea33";
|
||||
}
|
||||
|
||||
.icon-minimal-left::before {
|
||||
content: "\ea34";
|
||||
}
|
||||
|
||||
.icon-minimal-right::before {
|
||||
content: "\ea35";
|
||||
}
|
||||
|
||||
.icon-minimal-up::before {
|
||||
content: "\ea36";
|
||||
}
|
||||
|
||||
.icon-mobile::before {
|
||||
content: "\ea37";
|
||||
}
|
||||
|
||||
.icon-molecule-40::before {
|
||||
content: "\ea38";
|
||||
}
|
||||
|
||||
.icon-money-coins::before {
|
||||
content: "\ea39";
|
||||
}
|
||||
|
||||
.icon-notes::before {
|
||||
content: "\ea3a";
|
||||
}
|
||||
|
||||
.icon-palette::before {
|
||||
content: "\ea3b";
|
||||
}
|
||||
|
||||
.icon-paper::before {
|
||||
content: "\ea3c";
|
||||
}
|
||||
|
||||
.icon-pencil::before {
|
||||
content: "\ea3d";
|
||||
}
|
||||
|
||||
.icon-pin::before {
|
||||
content: "\ea3e";
|
||||
}
|
||||
|
||||
.icon-planet::before {
|
||||
content: "\ea3f";
|
||||
}
|
||||
|
||||
.icon-puzzle-10::before {
|
||||
content: "\ea40";
|
||||
}
|
||||
|
||||
.icon-satisfied::before {
|
||||
content: "\ea41";
|
||||
}
|
||||
|
||||
.icon-scissors::before {
|
||||
content: "\ea42";
|
||||
}
|
||||
|
||||
.icon-send::before {
|
||||
content: "\ea43";
|
||||
}
|
||||
|
||||
.icon-settings-gear-63::before {
|
||||
content: "\ea44";
|
||||
}
|
||||
|
||||
.icon-settings::before {
|
||||
content: "\ea45";
|
||||
}
|
||||
|
||||
.icon-simple-add::before {
|
||||
content: "\ea46";
|
||||
}
|
||||
|
||||
.icon-simple-delete::before {
|
||||
content: "\ea47";
|
||||
}
|
||||
|
||||
.icon-simple-remove::before {
|
||||
content: "\ea48";
|
||||
}
|
||||
|
||||
.icon-single-02::before {
|
||||
content: "\ea49";
|
||||
}
|
||||
|
||||
.icon-single-copy-04::before {
|
||||
content: "\ea4a";
|
||||
}
|
||||
|
||||
.icon-sound-wave::before {
|
||||
content: "\ea4b";
|
||||
}
|
||||
|
||||
.icon-spaceship::before {
|
||||
content: "\ea4c";
|
||||
}
|
||||
|
||||
.icon-square-pin::before {
|
||||
content: "\ea4d";
|
||||
}
|
||||
|
||||
.icon-support-17::before {
|
||||
content: "\ea4e";
|
||||
}
|
||||
|
||||
.icon-tablet-2::before {
|
||||
content: "\ea4f";
|
||||
}
|
||||
|
||||
.icon-tag::before {
|
||||
content: "\ea50";
|
||||
}
|
||||
|
||||
.icon-tap-02::before {
|
||||
content: "\ea51";
|
||||
}
|
||||
|
||||
.icon-tie-bow::before {
|
||||
content: "\ea52";
|
||||
}
|
||||
|
||||
.icon-time-alarm::before {
|
||||
content: "\ea53";
|
||||
}
|
||||
|
||||
.icon-trash-simple::before {
|
||||
content: "\ea54";
|
||||
}
|
||||
|
||||
.icon-triangle-right-17::before {
|
||||
content: "\ea55";
|
||||
}
|
||||
|
||||
.icon-trophy::before {
|
||||
content: "\ea56";
|
||||
}
|
||||
|
||||
.icon-tv-2::before {
|
||||
content: "\ea57";
|
||||
}
|
||||
|
||||
.icon-upload::before {
|
||||
content: "\ea58";
|
||||
}
|
||||
|
||||
.icon-user-run::before {
|
||||
content: "\ea59";
|
||||
}
|
||||
|
||||
.icon-vector::before {
|
||||
content: "\ea5a";
|
||||
}
|
||||
|
||||
.icon-video-66::before {
|
||||
content: "\ea5b";
|
||||
}
|
||||
|
||||
.icon-volume-98::before {
|
||||
content: "\ea5c";
|
||||
}
|
||||
|
||||
.icon-wallet-43::before {
|
||||
content: "\ea5d";
|
||||
}
|
||||
|
||||
.icon-watch-time::before {
|
||||
content: "\ea5e";
|
||||
}
|
||||
|
||||
.icon-wifi::before {
|
||||
content: "\ea5f";
|
||||
}
|
||||
|
||||
.icon-world::before {
|
||||
content: "\ea60";
|
||||
}
|
||||
|
||||
.icon-zoom-split::before {
|
||||
content: "\ea61";
|
||||
}
|
||||
|
||||
.icon-refresh-01::before {
|
||||
content: "\ea62";
|
||||
}
|
||||
|
||||
.icon-refresh-02::before {
|
||||
content: "\ea63";
|
||||
}
|
||||
|
||||
.icon-shape-star::before {
|
||||
content: "\ea64";
|
||||
}
|
||||
|
||||
.icon-components::before {
|
||||
content: "\ea65";
|
||||
}
|
||||
BIN
APP/assets/fonts/nucleo.eot
Normal file
BIN
APP/assets/fonts/nucleo.eot
Normal file
Binary file not shown.
BIN
APP/assets/fonts/nucleo.ttf
Normal file
BIN
APP/assets/fonts/nucleo.ttf
Normal file
Binary file not shown.
BIN
APP/assets/fonts/nucleo.woff
Normal file
BIN
APP/assets/fonts/nucleo.woff
Normal file
Binary file not shown.
BIN
APP/assets/fonts/nucleo.woff2
Normal file
BIN
APP/assets/fonts/nucleo.woff2
Normal file
Binary file not shown.
114
APP/assets/sass/black-dashboard.scss
Normal file
114
APP/assets/sass/black-dashboard.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
/*!
|
||||
|
||||
=========================================================
|
||||
* Nuxt Black Dashboard - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/nuxt-black-dashboard-pro
|
||||
* Copyright 2020 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
* Coded by Creative Tim
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Core
|
||||
|
||||
@import "dashboard/custom/functions";
|
||||
@import "~bootstrap/scss/functions";
|
||||
|
||||
@import "dashboard/custom/variables";
|
||||
@import "~bootstrap/scss/variables";
|
||||
|
||||
@import "dashboard/custom/mixins";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
|
||||
// Bootstrap components
|
||||
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/code";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/input-group";
|
||||
@import "~bootstrap/scss/custom-forms";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
@import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
@import "~bootstrap/scss/jumbotron";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
@import "~bootstrap/scss/media";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
@import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/utilities";
|
||||
@import "~bootstrap/scss/print";
|
||||
|
||||
// Custom components
|
||||
|
||||
@import "dashboard/custom/reboot.scss";
|
||||
@import "dashboard/custom/utilities.scss";
|
||||
@import "dashboard/custom/alerts.scss";
|
||||
@import "dashboard/custom/badge.scss";
|
||||
@import "dashboard/custom/buttons.scss";
|
||||
@import "dashboard/custom/dropdown.scss";
|
||||
@import "dashboard/custom/footer.scss";
|
||||
@import "dashboard/custom/forms.scss";
|
||||
@import "dashboard/custom/grid.scss";
|
||||
@import "dashboard/custom/icons.scss";
|
||||
@import "dashboard/custom/images.scss";
|
||||
@import "dashboard/custom/input-group.scss";
|
||||
@import "dashboard/custom/modal.scss";
|
||||
@import "dashboard/custom/nav.scss";
|
||||
@import "dashboard/custom/navbar.scss";
|
||||
@import "dashboard/custom/popover.scss";
|
||||
@import "dashboard/custom/progress.scss";
|
||||
@import "dashboard/custom/type.scss";
|
||||
@import "dashboard/custom/tables";
|
||||
@import "dashboard/custom/checkboxes-radio";
|
||||
@import "dashboard/custom/fixed-plugin";
|
||||
@import "dashboard/custom/sidebar-and-main-panel.scss";
|
||||
@import "dashboard/custom/misc.scss";
|
||||
@import "dashboard/custom/rtl.scss";
|
||||
|
||||
// Vendor / Plugins
|
||||
|
||||
@import "dashboard/custom/vendor/plugin-bootstrap-switch.scss";
|
||||
@import "dashboard/custom/vendor/plugin-perfect-scrollbar.scss";
|
||||
|
||||
// Vendor Element UI plugins
|
||||
@import "dashboard/custom/vendor/element-ui/plugin-tags";
|
||||
@import "dashboard/custom/vendor/element-ui/plugin-slider";
|
||||
@import "dashboard/custom/vendor/element-ui/plugin-select";
|
||||
@import "dashboard/custom/vendor/element-ui/plugin-inputs";
|
||||
@import "dashboard/custom/vendor/element-ui/plugin-tables";
|
||||
@import "dashboard/custom/vendor/element-ui/plugin-datepicker";
|
||||
|
||||
// light mode
|
||||
|
||||
@import "dashboard/custom/white-content.scss";
|
||||
|
||||
// Cards
|
||||
|
||||
@import 'dashboard/custom/card';
|
||||
@import "dashboard/custom/cards/card-chart";
|
||||
@import "dashboard/custom/cards/card-map";
|
||||
@import "dashboard/custom/cards/card-user";
|
||||
@import "dashboard/custom/cards/card-profile";
|
||||
@import "dashboard/custom/cards/card-plain";
|
||||
89
APP/assets/sass/dashboard/custom/_alerts.scss
Normal file
89
APP/assets/sass/dashboard/custom/_alerts.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
.alert{
|
||||
border: 0;
|
||||
color: $white;
|
||||
|
||||
.alert-link{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.alert-success{
|
||||
background-color: darken($success, 10%);
|
||||
}
|
||||
|
||||
i.fa,
|
||||
i.tim-icons{
|
||||
font-size: $font-paragraph;
|
||||
}
|
||||
|
||||
.close{
|
||||
color: $white;
|
||||
opacity: .9;
|
||||
text-shadow: none;
|
||||
line-height: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
span[data-notify="icon"]{
|
||||
font-size: 22px;
|
||||
display: block;
|
||||
left: 19px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -11px;
|
||||
}
|
||||
|
||||
button.close{
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
margin-top: -13px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.close ~ span{
|
||||
display: block;
|
||||
max-width: 89%;
|
||||
}
|
||||
|
||||
&.alert-with-icon{
|
||||
padding-left: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
.close {
|
||||
top: 50%;
|
||||
right: $alert-padding-x;
|
||||
padding: 0;
|
||||
transform: translateY(-50%);
|
||||
color: rgba($white, .6);
|
||||
opacity: 1;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba($white, .9);
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
top: 1rem;
|
||||
right: .5rem;
|
||||
}
|
||||
|
||||
&>span:not(.sr-only) {
|
||||
font-size: 1.5rem;
|
||||
background-color: transparent;
|
||||
color: rgba($white, .6);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
&>span:not(.sr-only) {
|
||||
background-color: transparent;
|
||||
color: rgba($white, .9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
25
APP/assets/sass/dashboard/custom/_badge.scss
Normal file
25
APP/assets/sass/dashboard/custom/_badge.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
/* badges */
|
||||
.badge{
|
||||
text-transform: uppercase;
|
||||
line-height: 12px;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-icon{
|
||||
padding: 0.4em 0.55em;
|
||||
|
||||
i {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
.badge-success{
|
||||
@include badge-variant(darken($success,10%));
|
||||
}
|
||||
241
APP/assets/sass/dashboard/custom/_buttons.scss
Normal file
241
APP/assets/sass/dashboard/custom/_buttons.scss
Normal file
@@ -0,0 +1,241 @@
|
||||
.btn,
|
||||
.navbar .navbar-nav > a.btn{
|
||||
border-width: $border-thick;
|
||||
border: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin:4px 1px;
|
||||
border-radius: $border-radius-lg;
|
||||
cursor: pointer;
|
||||
|
||||
@include btn-styles($default, $default-states);
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
@include opacity(1);
|
||||
outline: 0 !important;
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > &.dropdown-toggle {
|
||||
@include box-shadow(none);
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
.badge{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.btn-icon {
|
||||
// see above for color variations
|
||||
height: $icon-size-regular;
|
||||
min-width: $icon-size-regular;
|
||||
width: $icon-size-regular;
|
||||
padding: 0;
|
||||
font-size: $icon-font-size-regular;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
line-height: normal;
|
||||
|
||||
&.btn-simple{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.btn-sm{
|
||||
height: $icon-size-sm;
|
||||
min-width: $icon-size-sm;
|
||||
width: $icon-size-sm;
|
||||
|
||||
.fa,
|
||||
.far,
|
||||
.fas,
|
||||
.tim-icons{
|
||||
font-size: $icon-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-lg{
|
||||
height: $icon-size-lg;
|
||||
min-width: $icon-size-lg;
|
||||
width: $icon-size-lg;
|
||||
|
||||
.fa,
|
||||
.far,
|
||||
.fas,
|
||||
.tim-icons{
|
||||
font-size: $icon-font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.btn-footer) .tim-icons,
|
||||
&:not(.btn-footer) .fa,
|
||||
&:not(.btn-footer) .far,
|
||||
&:not(.btn-footer) .fas{
|
||||
position: absolute;
|
||||
font-size: 1em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-12px, -12px);
|
||||
line-height: 1.5626rem;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:not(.btn-icon) .tim-icons{
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
span{
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.btn-link.dropdown-toggle {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
&.dropdown-toggle:after {
|
||||
margin-left: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the mixin to the buttons
|
||||
// .btn-default { @include btn-styles($default-color, $default-states-color); }
|
||||
.btn-primary { @include btn-styles($primary, $primary-states);
|
||||
|
||||
}
|
||||
.btn-success { @include btn-styles($success, $success-states);
|
||||
|
||||
}
|
||||
.btn-info { @include btn-styles($info, $info-states);
|
||||
|
||||
}
|
||||
.btn-warning { @include btn-styles($warning, $warning-states);
|
||||
&:not(:disabled):not(.disabled):active{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.btn-danger { @include btn-styles($danger, $danger-states);
|
||||
|
||||
}
|
||||
.btn-neutral { @include btn-styles($white, $white); }
|
||||
|
||||
.btn{
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
&.disabled{
|
||||
@include opacity(.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
.btn-simple{
|
||||
border: $border;
|
||||
border-color: $default;
|
||||
box-shadow: none;
|
||||
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
|
||||
.btn-simple,
|
||||
.btn-link{
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background: $transparent-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active{
|
||||
box-shadow: 2px 2px 6px rgba(0,0,0,.4);
|
||||
}
|
||||
.btn-link{
|
||||
border: $none;
|
||||
box-shadow: none;
|
||||
padding: $padding-base-vertical $padding-base-horizontal;
|
||||
background: $transparent-bg;
|
||||
color: $gray-300;
|
||||
font-weight: $font-weight-bold;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-lg{
|
||||
@include btn-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-base, $border-radius-lg);
|
||||
}
|
||||
.btn-sm{
|
||||
@include btn-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-base, $border-radius-sm);
|
||||
}
|
||||
|
||||
.btn-wd {
|
||||
min-width: 140px;
|
||||
}
|
||||
.btn-group.select{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.btn.active {
|
||||
box-shadow: 2px 2px 6px rgba(0,0,0,.4);
|
||||
transform: translateY(-1px);
|
||||
-webkit-transform: translateY(-1px);
|
||||
}
|
||||
|
||||
label.btn.active {
|
||||
transform: translateY(0);
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-group.select .btn{
|
||||
text-align: left;
|
||||
}
|
||||
.btn-group.select .caret{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.btn-round{
|
||||
border-width: $border-thin;
|
||||
border-radius: $btn-round-radius;
|
||||
|
||||
&.btn-simple{
|
||||
padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-caret {
|
||||
&.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary:not(:disabled):not(.disabled):active,
|
||||
.btn-secondary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-secondary.dropdown-toggle {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.btn-group .btn {
|
||||
padding-left: $padding-round-horizontal;
|
||||
padding-right: $padding-round-horizontal;
|
||||
}
|
||||
}
|
||||
220
APP/assets/sass/dashboard/custom/_card.scss
Normal file
220
APP/assets/sass/dashboard/custom/_card.scss
Normal file
@@ -0,0 +1,220 @@
|
||||
.card{
|
||||
background: $card-black-background;
|
||||
border: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
|
||||
label{
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.card-body{
|
||||
padding: 15px;
|
||||
|
||||
&.table-full-width{
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
color: $white;
|
||||
text-transform: inherit;
|
||||
font-weight: $font-weight-light;
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.card-description, .card-category{
|
||||
color: rgba($white, 0.6);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-header{
|
||||
&:not([data-background-color]){
|
||||
background-color: transparent;
|
||||
}
|
||||
padding: 15px 15px 0;
|
||||
border: 0;
|
||||
color: rgba($white,0.8);
|
||||
|
||||
.card-title{
|
||||
color: $white;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.card-category{
|
||||
color: $dark-gray;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
.map{
|
||||
border-radius: $border-radius-sm;
|
||||
|
||||
&.map-big{
|
||||
height: 420px;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-white{
|
||||
background: $white;
|
||||
|
||||
.card-title{
|
||||
color: $black;
|
||||
}
|
||||
|
||||
//style for inputs
|
||||
|
||||
@include form-control-placeholder(rgba($black,0.4), 1);
|
||||
.has-danger{
|
||||
.form-control, .input-group-prepend .input-group-text{
|
||||
border-color: $danger-states;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text{
|
||||
border-color: rgba($black-states,0.2);
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
color: $black;
|
||||
border-color: rgba($black-states,0.2);
|
||||
&:focus{
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
label:not(.btn):not(.error){
|
||||
color: $default;
|
||||
}
|
||||
|
||||
.form-group.no-border,
|
||||
.input-group.no-border {
|
||||
.form-control,
|
||||
.form-control + .input-group-prepend .input-group-text,
|
||||
.form-control + .input-group-append .input-group-text,
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $opacity-gray-3;
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active{
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&:focus {
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.input-group[disabled]{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
|
||||
background: $light-gray;
|
||||
border-color: rgba($black-states,0.3);
|
||||
}
|
||||
|
||||
.input-group-focus{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text,
|
||||
.form-control{
|
||||
background-color: $white;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&.no-border{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-group-prepend .input-group-text {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.input-group-append .input-group-text {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
|
||||
border-color: $danger-states;
|
||||
}
|
||||
|
||||
.has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
|
||||
border-color: darken($success, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.card-plain {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.image{
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label{
|
||||
font-size: $font-size-sm;
|
||||
margin-bottom: 5px;
|
||||
|
||||
}
|
||||
|
||||
.card-footer{
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 15px;
|
||||
|
||||
|
||||
.stats{
|
||||
i{
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
h6{
|
||||
margin-bottom: 0;
|
||||
padding: 7px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body{
|
||||
padding: $card-spacer-y;
|
||||
}
|
||||
155
APP/assets/sass/dashboard/custom/_checkboxes-radio.scss
Normal file
155
APP/assets/sass/dashboard/custom/_checkboxes-radio.scss
Normal file
@@ -0,0 +1,155 @@
|
||||
.form-check{
|
||||
margin-top: .5rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.form-check .form-check-label{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding-left: 25px;
|
||||
line-height: 18px;
|
||||
margin-bottom: 0;
|
||||
-webkit-transition: color 0.3s linear;
|
||||
-moz-transition: color 0.3s linear;
|
||||
-o-transition: color 0.3s linear;
|
||||
-ms-transition: color 0.3s linear;
|
||||
transition: color 0.3s linear;
|
||||
user-select: none;
|
||||
}
|
||||
.radio .form-check-sign{
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.form-check-radio.form-check-inline .form-check-label {
|
||||
padding-left: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-check .form-check-sign::before,
|
||||
.form-check .form-check-sign::after{
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
top: 0;
|
||||
border: 1px solid darken($dark-gray,10%);
|
||||
-webkit-transition: opacity 0.3s linear;
|
||||
-moz-transition: opacity 0.3s linear;
|
||||
-o-transition: opacity 0.3s linear;
|
||||
-ms-transition: opacity 0.3s linear;
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"]:checked + .form-check-sign::before,
|
||||
.form-check input[type="checkbox"]:checked + .form-check-sign::before{
|
||||
border: none;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.form-check .form-check-sign::after{
|
||||
font-family: 'nucleo';
|
||||
content: "\ea1b";
|
||||
top: 0px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
color: $white;
|
||||
font-weight: $font-weight-bold;
|
||||
border: 0;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.form-check.disabled .form-check-label,
|
||||
.form-check.disabled .form-check-label {
|
||||
color: $dark-gray;
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"],
|
||||
.radio input[type="radio"]{
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
.form-check input[type="checkbox"]:checked + .form-check-sign::after{
|
||||
opacity: 1;
|
||||
font-size: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.form-check input[type="checkbox"]+ .form-check-sign::after{
|
||||
opacity: 0;
|
||||
font-size: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form-control input[type="checkbox"]:disabled + .form-check-sign::before,
|
||||
.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.form-check input[type="checkbox"]:disabled + .form-check-sign,
|
||||
.form-check input[type="radio"]:disabled + .form-check-sign{
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.form-check-radio .form-check-label{
|
||||
padding-top: 3px;
|
||||
}
|
||||
.form-check-radio .form-check-sign::before,
|
||||
.form-check-radio .form-check-sign::after{
|
||||
content: " ";
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid darken($dark-gray,10%);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 3px;
|
||||
padding: 1px;
|
||||
-webkit-transition: opacity 0.3s linear;
|
||||
-moz-transition: opacity 0.3s linear;
|
||||
-o-transition: opacity 0.3s linear;
|
||||
-ms-transition: opacity 0.3s linear;
|
||||
transition: opacity 0.3s linear;
|
||||
}
|
||||
|
||||
.form-check-radio input[type="radio"] + .form-check-sign:after,
|
||||
.form-check-radio input[type="radio"] {
|
||||
opacity: 0;
|
||||
}
|
||||
.form-check-radio input[type="radio"]:checked + .form-check-sign::after {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
top: 9px;
|
||||
left: 6px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-check-radio input[type="radio"]:checked + .form-check-sign::before {
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
|
||||
.form-check-radio input[type="radio"]:checked + .form-check-sign::after{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-check-radio input[type="radio"]:disabled + .form-check-sign {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.form-check-radio input[type="radio"]:disabled + .form-check-sign::before,
|
||||
.form-check-radio input[type="radio"]:disabled + .form-check-sign::after {
|
||||
color: $dark-gray;
|
||||
}
|
||||
361
APP/assets/sass/dashboard/custom/_dropdown.scss
Normal file
361
APP/assets/sass/dashboard/custom/_dropdown.scss
Normal file
@@ -0,0 +1,361 @@
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: $border-radius-xs;
|
||||
@include transitions($fast-transition-time, $transition-linear);
|
||||
|
||||
&.dropdown-menu-right {
|
||||
&:before, &:after {
|
||||
left:auto;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-black {
|
||||
background: linear-gradient(to bottom, $black 0%, $black-states 100%);
|
||||
border: 1px solid $default;
|
||||
.dropdown-item {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-color: $default;
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: $black;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
top: -6px;
|
||||
left: 10px;
|
||||
right: auto;
|
||||
color: $default;
|
||||
border-bottom: .4em solid;
|
||||
border-right: .4em solid transparent;
|
||||
border-left: .4em solid transparent;
|
||||
}
|
||||
|
||||
&.dropdown-menu-right {
|
||||
&:after {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropup & {
|
||||
&:after {
|
||||
color: $black-states;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
top: auto;
|
||||
bottom: -6px;
|
||||
right: auto;
|
||||
left: 10px;
|
||||
color: $dark-background;
|
||||
border-top: .4em solid;
|
||||
border-right: .4em solid transparent;
|
||||
border-left: .4em solid transparent;
|
||||
border-bottom: none;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.tim-icons {
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
font-size: 18px;
|
||||
margin-top: -5px;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
&.active,
|
||||
&:active{
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.dropup & {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
top: auto;
|
||||
bottom: -5px;
|
||||
right: auto;
|
||||
left: 10px;
|
||||
color: $white;
|
||||
border-top: .4em solid;
|
||||
border-right: .4em solid transparent;
|
||||
border-left: .4em solid transparent;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.dropdown-menu-right {
|
||||
&:after, &:before {
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
top: -5px;
|
||||
left: 10px;
|
||||
right: auto;
|
||||
color: $white;
|
||||
border-bottom: .4em solid;
|
||||
border-right: .4em solid transparent;
|
||||
border-left: .4em solid transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.dropdown-menu-right {
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.dropdown-item,
|
||||
.bootstrap-select &.inner li a {
|
||||
font-size: $font-size-sm;
|
||||
padding-top: .6rem;
|
||||
padding-bottom: .6rem;
|
||||
margin-top: 5px;
|
||||
@include transitions($fast-transition-time, $transition-linear);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $opacity-gray-3;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $default-opacity;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dropdown-divider {
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
|
||||
.dropdown-header:not([href]):not([tabindex]) {
|
||||
color: $default-opacity;
|
||||
font-size: $font-size-xs;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
&.dropdown-primary {
|
||||
@include dropdown-colors(darken($primary, 3%),$opacity-8,$white, $opacity-2);
|
||||
}
|
||||
|
||||
&.dropdown-info {
|
||||
@include dropdown-colors(darken($info, 3%),$opacity-8,$white, $opacity-2);
|
||||
}
|
||||
|
||||
&.dropdown-danger {
|
||||
@include dropdown-colors(darken($danger, 3%),$opacity-8,$white, $opacity-2);
|
||||
}
|
||||
|
||||
&.dropdown-success {
|
||||
@include dropdown-colors(darken($success, 3%),$opacity-8,$white, $opacity-2);
|
||||
}
|
||||
|
||||
&.dropdown-warning {
|
||||
@include dropdown-colors(darken($warning, 3%),$opacity-8,$white, $opacity-2);
|
||||
}
|
||||
|
||||
.dropdown &,
|
||||
.dropup:not(.bootstrap-select) &,
|
||||
.bootstrap-select &:not(.inner),
|
||||
&.bootstrap-datetimepicker-widget.bottom {
|
||||
@include transform-translate-y-dropdown(-20px);
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
@include opacity(0);
|
||||
top: 100% !important;
|
||||
}
|
||||
|
||||
&.bootstrap-datetimepicker-widget.top {
|
||||
@include transform-translate-y-dropdown(-20px);
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
@include opacity(0);
|
||||
}
|
||||
|
||||
&.bootstrap-datetimepicker-widget.top,
|
||||
&.bootstrap-datetimepicker-widget.bottom {
|
||||
@include transform-translate-y-dropdown(-20px);
|
||||
}
|
||||
|
||||
.bootstrap-select.dropup &:not(.inner){
|
||||
@include transform-translate-y-dropdown(25px);
|
||||
}
|
||||
|
||||
.dropup:not(.bootstrap-select) &{
|
||||
@include transform-translate-y-dropdown(20px);
|
||||
top: auto !important;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
.dropdown.show &,
|
||||
.bootstrap-select.show &:not(.inner),
|
||||
&.bootstrap-datetimepicker-widget.top.open,
|
||||
&.bootstrap-datetimepicker-widget.bottom.open,
|
||||
.dropup.show:not(.bootstrap-select) &,
|
||||
.navbar .dropdown.show &{
|
||||
@include opacity(1);
|
||||
visibility: visible;
|
||||
@include transform-translate-y-dropdown(1px);
|
||||
}
|
||||
|
||||
&.bootstrap-datetimepicker-widget.top.open,
|
||||
&.bootstrap-datetimepicker-widget.bottom.open{
|
||||
@include transform-translate-y-dropdown(0px);
|
||||
}
|
||||
|
||||
.dropup.show:not(.bootstrap-select) &{
|
||||
@include transform-translate-y-dropdown(-2px);
|
||||
}
|
||||
|
||||
&.dropdown-navbar{
|
||||
left: -80px;
|
||||
&:before, &:after{
|
||||
left: auto;
|
||||
right: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn{
|
||||
cursor: pointer;
|
||||
|
||||
&.dropdown-toggle[data-toggle="dropdown"]{
|
||||
padding:10px;
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:after{
|
||||
content: "";
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
span.bs-caret{
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.btn-link{
|
||||
&.dropdown-toggle{
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle:after{
|
||||
|
||||
content: unset;
|
||||
|
||||
}
|
||||
|
||||
.btn:not(:disabled):not(.disabled).active:focus,
|
||||
.btn:not(:disabled):not(.disabled):active:focus,
|
||||
.show>.btn.dropdown-toggle:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Dropown: Sizes
|
||||
|
||||
.dropdown-menu-sm {
|
||||
min-width: 100px;
|
||||
border: $border-radius-lg;
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
min-width: 260px;
|
||||
border-radius: $border-radius-lg;
|
||||
}
|
||||
|
||||
.dropdown-menu-xl {
|
||||
min-width: 450px;
|
||||
border-radius: $border-radius-lg;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md){
|
||||
.button-dropdown{
|
||||
display: none;
|
||||
}
|
||||
.dropdown-toggle:after{
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: .255em;
|
||||
vertical-align: .255em;
|
||||
content: "";
|
||||
border-top: .3em solid;
|
||||
border-right: .3em solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: .3em solid transparent;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-up(lg){
|
||||
.dropdown-menu .dropdown-item{
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
335
APP/assets/sass/dashboard/custom/_fixed-plugin.scss
Normal file
335
APP/assets/sass/dashboard/custom/_fixed-plugin.scss
Normal file
@@ -0,0 +1,335 @@
|
||||
.fixed-plugin{
|
||||
position: fixed;
|
||||
right: 0;
|
||||
width: 64px;
|
||||
background: rgba(0,0,0,.3);
|
||||
z-index: 1031;
|
||||
border-radius: 8px 0 0 8px;
|
||||
text-align: center;
|
||||
top: 130px;
|
||||
|
||||
li > a,
|
||||
.badge{
|
||||
transition: all .34s;
|
||||
-webkit-transition: all .34s;
|
||||
-moz-transition: all .34s;
|
||||
}
|
||||
|
||||
.fa-cog{
|
||||
color: $white;
|
||||
padding: 10px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
right: 80px;
|
||||
left: auto !important;
|
||||
top: -52px !important;
|
||||
width: 290px;
|
||||
border-radius: 0.1875rem;
|
||||
padding: 0 10px;
|
||||
background: linear-gradient($black, $black-states);
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu .tim-icons{
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.dropdown-menu:after,
|
||||
.dropdown-menu:before{
|
||||
right: 10px;
|
||||
margin-left: auto;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.fa-circle-thin{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.active .fa-circle-thin{
|
||||
color: $active-blue;
|
||||
}
|
||||
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus{
|
||||
color: $active-gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img{
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.dropdown-menu li > a:hover,
|
||||
.dropdown-menu li > a:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.badge{
|
||||
border: 2px solid $white;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 23px;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
width: 23px;
|
||||
}
|
||||
|
||||
.badge.active,
|
||||
.badge:hover{
|
||||
border-color: $black-states;
|
||||
}
|
||||
|
||||
.light-badge, .dark-badge{
|
||||
margin:0;
|
||||
border: 1px solid $info;
|
||||
&:hover{
|
||||
border: 1px solid $info;
|
||||
}
|
||||
}
|
||||
|
||||
.light-badge{
|
||||
background: $white;
|
||||
&:hover{
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.dark-badge{
|
||||
background: $black;
|
||||
&:hover{
|
||||
background: $black;
|
||||
}
|
||||
}
|
||||
|
||||
h5{
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.dropdown-menu li{
|
||||
display: block;
|
||||
padding: 18px 2px;
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
li.adjustments-line,
|
||||
li.header-title,
|
||||
li.button-container{
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
li.button-container{
|
||||
height: auto;
|
||||
|
||||
div{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#sharrreTitle{
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
li.header-title{
|
||||
color: $white;
|
||||
height: 30px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.adjustments-line{
|
||||
|
||||
a{
|
||||
color: transparent;
|
||||
|
||||
.badge-colors{
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus{
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.togglebutton{
|
||||
text-align: center;
|
||||
|
||||
.label-switch{
|
||||
position: relative;
|
||||
left: -10px;
|
||||
font-size: $font-size-xs;
|
||||
color: $white;
|
||||
|
||||
&.label-right{
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color-label{
|
||||
position: relative;
|
||||
top: -7px;
|
||||
font-size: $font-size-xs;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown-menu > li.adjustments-line > a{
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dropdown-menu{
|
||||
> li{
|
||||
& > a.img-holder{
|
||||
font-size: $font-paragraph;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background-color: $white;
|
||||
border: 3px solid $white;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
max-height: 100px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
|
||||
img{
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
a.switch-trigger:hover,
|
||||
& > a.switch-trigger:focus{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
> a.img-holder{
|
||||
border-color: rgba(0, 187, 255, 0.53);;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .active > a.img-holder,
|
||||
> .active > a.img-holder{
|
||||
border-color: $active-blue;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-social{
|
||||
width: 50%;
|
||||
display: block;
|
||||
width: 48%;
|
||||
float: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-social{
|
||||
i{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:first-child{
|
||||
margin-right: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
.dropdown-menu{
|
||||
-webkit-transform: translateY(-15%);
|
||||
-moz-transform: translateY(-15%);
|
||||
-o-transform: translateY(-15%);
|
||||
-ms-transform: translateY(-15%);
|
||||
transform: translateY(-15%);
|
||||
top: 27px;
|
||||
opacity: 0;
|
||||
|
||||
transform-origin: 0 0;
|
||||
|
||||
&:before{
|
||||
border-bottom: .4em solid rgba(0, 0, 0, 0);
|
||||
border-left: .4em solid rgba(0,0,0,0.2);
|
||||
border-top: .4em solid rgba(0,0,0,0);
|
||||
right: -16px;
|
||||
top: 46px;
|
||||
}
|
||||
|
||||
&:after{
|
||||
border-bottom: .4em solid rgba(0, 0, 0, 0);
|
||||
border-left: .4em solid $black;
|
||||
border-top: .4em solid rgba(0,0,0,0);
|
||||
right: -16px;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 74px;
|
||||
width: 16px;
|
||||
transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
-moz-transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.show .dropdown-menu{
|
||||
opacity: 1;
|
||||
|
||||
-webkit-transform: translateY(-13%);
|
||||
-moz-transform: translateY(-13%);
|
||||
-o-transform: translateY(-13%);
|
||||
-ms-transform: translateY(-13%);
|
||||
transform: translateY(-13%);
|
||||
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-switch{
|
||||
margin:0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs){
|
||||
.fixed-plugin {
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
.fixed-plugin .dropdown-menu {
|
||||
width: 225px;
|
||||
top: -65px !important;
|
||||
}
|
||||
}
|
||||
109
APP/assets/sass/dashboard/custom/_footer.scss
Normal file
109
APP/assets/sass/dashboard/custom/_footer.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
.footer{
|
||||
padding: 24px 30px 24px 280px;
|
||||
|
||||
[class*="container-"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav{
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-item{
|
||||
display: inline-block;
|
||||
|
||||
&:first-child a {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $white;
|
||||
padding: $padding-base-vertical;
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.copyright{
|
||||
font-size: $font-size-sm;
|
||||
line-height: 1.8;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:after{
|
||||
display: table;
|
||||
clear: both;
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md){
|
||||
|
||||
.footer {
|
||||
padding-left: 30px;
|
||||
text-align: center;
|
||||
|
||||
.copyright {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl){
|
||||
.footer {
|
||||
.copyright {
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm){
|
||||
.footer {
|
||||
text-align: center;
|
||||
nav {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm){
|
||||
.footer {
|
||||
.copyright {
|
||||
text-align: center;
|
||||
}
|
||||
.nav {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-between (md, lg){
|
||||
.footer {
|
||||
padding-left: 30px !important;
|
||||
text-align: center;
|
||||
|
||||
.copyright {
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
151
APP/assets/sass/dashboard/custom/_forms.scss
Normal file
151
APP/assets/sass/dashboard/custom/_forms.scss
Normal file
@@ -0,0 +1,151 @@
|
||||
/* Form controls */
|
||||
@include form-control-placeholder(#6c757c, 1);
|
||||
|
||||
.form-control{
|
||||
border-color: lighten($black,5%);
|
||||
border-radius: $border-radius-lg;
|
||||
font-size: $font-size-sm;
|
||||
@include transition-input-focus-color();
|
||||
|
||||
|
||||
&:focus{
|
||||
border-color: $primary;
|
||||
background-color: $input-bg;
|
||||
@include box-shadow(none);
|
||||
|
||||
& + .input-group-append .input-group-text,
|
||||
& ~ .input-group-append .input-group-text,
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& ~ .input-group-prepend .input-group-text{
|
||||
border: 1px solid $primary;
|
||||
border-left: none;
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success &,
|
||||
.has-error &,
|
||||
.has-success &:focus,
|
||||
.has-error &:focus{
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
.has-danger &,
|
||||
.has-success &{
|
||||
&.form-control-success,
|
||||
&.form-control-danger{
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
& + .form-control-feedback{
|
||||
border-radius: $border-radius-lg;
|
||||
margin-top: -7px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.open &{
|
||||
border-radius: $border-radius-lg $border-radius-lg 0 0;
|
||||
border-bottom-color: $transparent-bg;
|
||||
}
|
||||
|
||||
& + .input-group-append .input-group-text,
|
||||
& + .input-group-prepend .input-group-text{
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.has-success .input-group-append .input-group-text,
|
||||
.has-success .input-group-prepend .input-group-text,
|
||||
.has-success .form-control{
|
||||
border-color: lighten($black,5%);
|
||||
}
|
||||
|
||||
.has-success .form-control:focus,
|
||||
.has-success.input-group-focus .input-group-append .input-group-text,
|
||||
.has-success.input-group-focus .input-group-prepend .input-group-text{
|
||||
border-color: darken($success, 10%);
|
||||
}
|
||||
|
||||
.has-danger .form-control,
|
||||
.has-danger .input-group-append .input-group-text,
|
||||
.has-danger .input-group-prepend .input-group-text,
|
||||
.has-danger.input-group-focus .input-group-prepend .input-group-text,
|
||||
.has-danger.input-group-focus .input-group-append .input-group-text{
|
||||
border-color: lighten($danger-states,5%);
|
||||
color: $danger-states;
|
||||
background-color: rgba(222,222,222, .1);
|
||||
|
||||
&:focus{
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success,
|
||||
.has-danger{
|
||||
&:after{
|
||||
font-family: 'nucleo';
|
||||
content: "\ea1b";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 13px;
|
||||
color: $success;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&.form-control-lg{
|
||||
&:after{
|
||||
font-size: 13px;
|
||||
top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-label{
|
||||
&:after{
|
||||
top: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.form-check:after{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&.form-check .form-check-label{
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger{
|
||||
&:after{
|
||||
content: "\ea48";
|
||||
color: $danger-states;
|
||||
}
|
||||
|
||||
&.form-check .form-check-label{
|
||||
color: $danger-states;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success.has-icon.form-group:after,
|
||||
.has-danger.has-icon.form-group:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(xs){
|
||||
.form-horizontal .col-form-label,
|
||||
.form-horizontal .label-on-right {
|
||||
text-align: inherit;
|
||||
padding-top: 0;
|
||||
code {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
23
APP/assets/sass/dashboard/custom/_functions.scss
Normal file
23
APP/assets/sass/dashboard/custom/_functions.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
// Retrieve color Sass maps
|
||||
|
||||
@function section-color($key: "primary") {
|
||||
@return map-get($section-colors, $key);
|
||||
}
|
||||
|
||||
// Lines colors
|
||||
|
||||
@function shapes-primary-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-primary-colors, $key);
|
||||
}
|
||||
|
||||
@function shapes-default-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-default-colors, $key);
|
||||
}
|
||||
|
||||
@function lines-light-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-light-colors, $key);
|
||||
}
|
||||
|
||||
@function shapes-dark-color($key: "step-1-gradient-bg") {
|
||||
@return map-get($shapes-dark-colors, $key);
|
||||
}
|
||||
5
APP/assets/sass/dashboard/custom/_grid.scss
Normal file
5
APP/assets/sass/dashboard/custom/_grid.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@include media-breakpoint-up(xl) {
|
||||
.container-lg {
|
||||
max-width: 1160px;
|
||||
}
|
||||
}
|
||||
92
APP/assets/sass/dashboard/custom/_icons.scss
Normal file
92
APP/assets/sass/dashboard/custom/_icons.scss
Normal file
@@ -0,0 +1,92 @@
|
||||
.icon {
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
|
||||
i, svg {
|
||||
font-size: $icon-size - .75;
|
||||
}
|
||||
}
|
||||
|
||||
.icon + .icon-text {
|
||||
padding-left: 1rem;
|
||||
width: calc(100% - #{$icon-size-regular} - 1);
|
||||
}
|
||||
|
||||
.icon-xl {
|
||||
width: $icon-size-xl;
|
||||
height: $icon-size-xl;
|
||||
|
||||
i, svg {
|
||||
font-size: $icon-size-xl - .75;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-xl + .icon-text {
|
||||
width: calc(100% - #{$icon-size-xl} - 1);
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
width: $icon-size-lg;
|
||||
height: $icon-size-lg;
|
||||
|
||||
i, svg {
|
||||
font-size: $icon-size-lg - .75;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-lg + .icon-text {
|
||||
width: calc(100% - #{$icon-size-lg} - 1);
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
width: $icon-size-sm;
|
||||
height: $icon-size-sm;
|
||||
|
||||
i, svg {
|
||||
font-size: $icon-size-sm - .75;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-sm + .icon-text {
|
||||
width: calc(100% - #{$icon-size-sm} - 1);
|
||||
}
|
||||
|
||||
|
||||
// Icons included in shapes
|
||||
.icon-shape {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
|
||||
|
||||
i, svg {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
&.icon-lg {
|
||||
i, svg {
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-sm {
|
||||
i, svg {
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.icon-shape-#{$color} {
|
||||
@include icon-shape-variant(theme-color($color));
|
||||
}
|
||||
}
|
||||
7
APP/assets/sass/dashboard/custom/_images.scss
Normal file
7
APP/assets/sass/dashboard/custom/_images.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
img{
|
||||
max-width: 100%;
|
||||
border-radius: $border-radius-sm;
|
||||
}
|
||||
.img-raised{
|
||||
box-shadow: $box-shadow-raised;
|
||||
}
|
||||
351
APP/assets/sass/dashboard/custom/_input-group.scss
Normal file
351
APP/assets/sass/dashboard/custom/_input-group.scss
Normal file
@@ -0,0 +1,351 @@
|
||||
.form-group.has-danger .error,
|
||||
.input-group.has-danger .error {
|
||||
color: $danger-states;
|
||||
}
|
||||
|
||||
|
||||
.form-group.has-success .error,
|
||||
.input-group.has-success .error {
|
||||
color: $success;
|
||||
}
|
||||
|
||||
@include form-control-lg-padding($padding-lg-vertical, $padding-input-horizontal);
|
||||
@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
|
||||
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control,
|
||||
.form-control + .input-group-prepend .input-group-text,
|
||||
.form-control + .input-group-append .input-group-text{
|
||||
|
||||
background-color: lighten($black,1%);
|
||||
border: medium none;
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active{
|
||||
border: medium none;
|
||||
background-color: lighten($black,2%);
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
&:focus{
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
background-color: lighten($black,2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: lighten($black,1%);;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error{
|
||||
.form-control-feedback, .control-label{
|
||||
color: $danger-states;
|
||||
}
|
||||
}
|
||||
.has-success{
|
||||
.form-control-feedback, .control-label{
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-append .input-group-text,
|
||||
.input-group-prepend .input-group-text {
|
||||
background-color: transparent;
|
||||
border: 1px solid lighten($black,5%);
|
||||
border-radius: $border-radius-lg;
|
||||
color: $white;
|
||||
|
||||
& i{
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
@include transition-input-focus-color();
|
||||
|
||||
.has-danger.input-group-focus &{
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
|
||||
.has-success &{
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
.has-danger .form-control:focus + &{
|
||||
color: $danger-states;
|
||||
}
|
||||
.has-success .form-control:focus + &{
|
||||
color: $success;
|
||||
}
|
||||
|
||||
& + .form-control,
|
||||
& ~ .form-control{
|
||||
@include input-size($padding-base-vertical - 1, $padding-base-horizontal);
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
i{
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text {
|
||||
background-color: transparent;
|
||||
border: 1px solid lighten($black,5%);
|
||||
border-radius: $border-radius-lg;
|
||||
color: $white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.input-group-append .input-group-text{
|
||||
border-left: none;
|
||||
}
|
||||
.input-group-prepend .input-group-text{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.input-group-focus{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $white;
|
||||
border-color: $primary;
|
||||
background-color: $transparent-bg;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&.no-border{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: lighten($black,2%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group,
|
||||
.form-group{
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
|
||||
.form-control-static{
|
||||
margin-top: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group[disabled]{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $light-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group .form-control:not(:first-child), .input-group-btn:not(:first-child){
|
||||
border-radius: $border-radius-lg;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-left: 0 none;
|
||||
}
|
||||
|
||||
.input-group .form-control:not(:last-child), .input-group-btn:not(:last-child){
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.input-group .form-control:first-child,
|
||||
.input-group-btn:first-child > .dropdown-toggle,
|
||||
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
|
||||
border-right: 0 none;
|
||||
}
|
||||
.input-group .form-control:last-child,
|
||||
.input-group-btn:last-child > .dropdown-toggle,
|
||||
.input-group-btn:first-child > .btn:not(:first-child) {
|
||||
border-left: 0 none;
|
||||
}
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
|
||||
background-color: $black-states;
|
||||
color: $default;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.input-group-btn .btn{
|
||||
border-width: $border-thin;
|
||||
padding: $padding-btn-vertical $padding-base-horizontal;
|
||||
}
|
||||
.input-group-btn .btn-default:not(.btn-fill){
|
||||
border-color: $medium-gray;
|
||||
}
|
||||
|
||||
.input-group-btn:last-child > .btn{
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
textarea.form-control{
|
||||
max-width: 100%;
|
||||
max-height: 80px;
|
||||
padding: 10px 10px 0 0;
|
||||
resize: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid lighten($black,5%);
|
||||
border-radius: 0;
|
||||
line-height: 2;
|
||||
|
||||
&:focus,
|
||||
&:active{
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success,
|
||||
.has-danger{
|
||||
|
||||
&.form-group .form-control,
|
||||
&.form-group.no-border .form-control{
|
||||
padding-right: $input-padding-horizontal + 21;
|
||||
}
|
||||
}
|
||||
|
||||
.form.form-newsletter .form-group{
|
||||
float: left;
|
||||
width: 78%;
|
||||
margin-right: 2%;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.input-group .input-group-btn{
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
// Input files - hide actual input - requires specific markup in the sample.
|
||||
.form-group input[type=file] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.form-text{
|
||||
font-size: $font-size-sm;
|
||||
color: rgba($white,0.8);
|
||||
}
|
||||
|
||||
.form-control-lg{
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
line-height: 0;
|
||||
border-radius: 0;
|
||||
|
||||
.form-control {
|
||||
height: calc(2.875rem + 2px);
|
||||
}
|
||||
}
|
||||
|
||||
.form-horizontal{
|
||||
.col-form-label,
|
||||
.label-on-right{
|
||||
padding: 10px 5px 0 15px;
|
||||
text-align: right;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.checkbox-radios{
|
||||
margin-bottom: 15px;
|
||||
|
||||
.form-check:first-child{
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.label-on-right{
|
||||
text-align: left;
|
||||
padding: 10px 15px 0 5px;
|
||||
}
|
||||
|
||||
.form-check-inline{
|
||||
margin-top: 6px;
|
||||
.form-check-label{
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar{
|
||||
margin-left: $margin-lg-vertical;
|
||||
.btn{
|
||||
margin: 0;
|
||||
}
|
||||
&.input-group{
|
||||
border-radius: 25px;
|
||||
z-index: 4;
|
||||
margin-bottom: 0;
|
||||
height: 43px;
|
||||
.input-group-addon{
|
||||
padding: 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
margin-top: 0 !important;
|
||||
transition: all .3s;
|
||||
}
|
||||
i:hover {
|
||||
color: $primary;
|
||||
}
|
||||
input{
|
||||
background: transparent;
|
||||
border:none !important;
|
||||
border-radius: 0;
|
||||
padding: 12px !important;
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
&:focus{
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.form-control{
|
||||
opacity: 1;
|
||||
color: $white;
|
||||
&::placeholder{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-search .modal-dialog{
|
||||
max-width: 1000px;
|
||||
margin: 20px auto;
|
||||
.form-control{
|
||||
border: none;
|
||||
color: $black;
|
||||
&::placeholder{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend{
|
||||
margin-right: 0;
|
||||
}
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
.tim-icons {
|
||||
font-size: $font-paragraph;
|
||||
}
|
||||
}
|
||||
215
APP/assets/sass/dashboard/custom/_misc.scss
Normal file
215
APP/assets/sass/dashboard/custom/_misc.scss
Normal file
@@ -0,0 +1,215 @@
|
||||
|
||||
/* Animations */
|
||||
.nav-pills .nav-link,
|
||||
.navbar,
|
||||
.nav-tabs .nav-link,
|
||||
.sidebar .nav a,
|
||||
.sidebar .nav a i,
|
||||
.sidebar .nav p,
|
||||
.navbar-collapse .navbar-nav .nav-link,
|
||||
.animation-transition-general,
|
||||
.tag,
|
||||
.tag [data-role="remove"],
|
||||
.animation-transition-general{
|
||||
@include transitions($general-transition-time, $transition-ease);
|
||||
}
|
||||
|
||||
//transition for dropdown caret
|
||||
.bootstrap-switch-label:before,
|
||||
.caret{
|
||||
@include transitions($fast-transition-time, $transition-ease);
|
||||
}
|
||||
|
||||
.dropdown-toggle[aria-expanded="true"]:after,
|
||||
a[data-toggle="collapse"][aria-expanded="true"] .caret,
|
||||
.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i,
|
||||
.card-collapse .card a[data-toggle="collapse"].expanded i{
|
||||
@include rotate-180();
|
||||
}
|
||||
|
||||
.caret{
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
border-top: 4px dashed;
|
||||
border-right: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
margin-top: -5px;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.pull-left{
|
||||
float: left;
|
||||
}
|
||||
.pull-right{
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
||||
// card user profile page
|
||||
|
||||
.card {
|
||||
form {
|
||||
label + .form-control {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// offline documentation
|
||||
|
||||
.offline-doc {
|
||||
.page-header:before {
|
||||
background: rgba(0,0,0,.75);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
bottom: 0;
|
||||
color: $white;
|
||||
padding: 0.9375rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
.map-title {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.table {
|
||||
tr td {
|
||||
p.title {
|
||||
padding-top: 7px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.card-chart {
|
||||
.gmnoprint,
|
||||
.gm-style-cc {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// documentation
|
||||
|
||||
.bd-docs {
|
||||
|
||||
h1,h2,h3,h4,h5,h6,p,ul li,ol li{
|
||||
color:#2c2c2c;
|
||||
}
|
||||
|
||||
|
||||
.bd-content>table>thead>tr>th {
|
||||
color: $black;
|
||||
|
||||
}
|
||||
|
||||
.blockquote, .blockquote p, .card p{
|
||||
color: rgba($white,0.8);
|
||||
}
|
||||
.bd-example {
|
||||
background: linear-gradient(#1e1e2f,#1e1e24);
|
||||
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-top: none;
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
color: rgba(255,255,255,.8) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example {
|
||||
|
||||
.btn{
|
||||
margin: 4px 0;
|
||||
}
|
||||
.btn .badge {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tim-icons{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.popover .popover-header {
|
||||
color: hsla(0,0%,71%,.6);
|
||||
}
|
||||
|
||||
|
||||
.popover-body {
|
||||
p {
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
&.tooltip-demo p{
|
||||
color: rgba($white,.8);
|
||||
}
|
||||
}
|
||||
|
||||
.card.card-body,
|
||||
.card .card-body {
|
||||
color: hsla(0,0%,100%,.8);
|
||||
}
|
||||
|
||||
label,
|
||||
.form-check {
|
||||
color: hsla(0,0%,100%,.8);
|
||||
}
|
||||
|
||||
.form-check + .btn {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bd-example,
|
||||
table {
|
||||
thead th {
|
||||
color: hsla(0,0%,100%,.8);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
color: hsla(0,0%,100%,.8);
|
||||
}
|
||||
|
||||
.datepicker{
|
||||
thead th, table thead th,.tim-icons{
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.picker-switch .tim-icons{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
.container-fluid > nav {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal.show .modal-dialog {
|
||||
-webkit-transform: translate(0,30%);
|
||||
transform: translate(0,30%);
|
||||
}
|
||||
|
||||
code {
|
||||
color: $pink;
|
||||
}
|
||||
14
APP/assets/sass/dashboard/custom/_mixins.scss
Normal file
14
APP/assets/sass/dashboard/custom/_mixins.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
@import "mixins/alert.scss";
|
||||
@import "mixins/badges.scss";
|
||||
@import "mixins/background-variant.scss";
|
||||
@import "mixins/buttons.scss";
|
||||
@import "mixins/forms.scss";
|
||||
@import "mixins/icon.scss";
|
||||
@import "mixins/modals.scss";
|
||||
@import "mixins/popovers.scss";
|
||||
@import "mixins/page-header.scss";
|
||||
@import "mixins/vendor-prefixes.scss";
|
||||
@import "mixins/opacity.scss";
|
||||
@import "mixins/modals.scss";
|
||||
@import "mixins/inputs.scss";
|
||||
@import "mixins/dropdown.scss";
|
||||
246
APP/assets/sass/dashboard/custom/_modal.scss
Normal file
246
APP/assets/sass/dashboard/custom/_modal.scss
Normal file
@@ -0,0 +1,246 @@
|
||||
// Modals
|
||||
// Design element Dialogs
|
||||
// --------------------------------------------------
|
||||
.modal-content {
|
||||
border: 0;
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
|
||||
.modal-header {
|
||||
border-bottom: none;
|
||||
|
||||
& button {
|
||||
position: absolute;
|
||||
right: 27px;
|
||||
top: 24px;
|
||||
outline: 0;
|
||||
padding: 1rem;
|
||||
margin: -1rem -1rem -1rem auto;
|
||||
}
|
||||
.title{
|
||||
color: $black;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.modal-title{
|
||||
color: $black;
|
||||
}
|
||||
|
||||
i.tim-icons {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Modal body
|
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||
.modal-body {
|
||||
line-height: 1.9;
|
||||
|
||||
p{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
border-top: 0;
|
||||
-webkit-justify-content: space-between; /* Safari 6.1+ */
|
||||
justify-content: space-between;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
width: auto;
|
||||
|
||||
&.pull-left {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
position: relative;
|
||||
left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.modal-body + .modal-footer {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
.modal-backdrop {
|
||||
background: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.modal{
|
||||
|
||||
&.modal-mini{
|
||||
p{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-dialog{
|
||||
max-width: 255px;
|
||||
margin: 0 auto;
|
||||
|
||||
|
||||
}
|
||||
|
||||
&.show .modal-dialog{
|
||||
-webkit-transform: translate(0,30%);
|
||||
-o-transform: translate(0,30%);
|
||||
transform: translate(0,30%);
|
||||
}
|
||||
|
||||
|
||||
.modal-footer{
|
||||
button{
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
|
||||
&:first-child{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-profile{
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 5.7;
|
||||
box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
|
||||
|
||||
i{
|
||||
color: $primary;
|
||||
font-size: 21px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
&[class*="modal-profile-"]{
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.modal-profile-primary{
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&.modal-profile-danger{
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
&.modal-profile-warning{
|
||||
background-color: $warning;
|
||||
}
|
||||
&.modal-profile-success{
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.modal-profile-info{
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
&.modal-default{
|
||||
@include modal-colors($white, $black);
|
||||
}
|
||||
|
||||
&.modal-primary{
|
||||
@include modal-colors($primary, $white);
|
||||
}
|
||||
|
||||
&.modal-danger{
|
||||
@include modal-colors($danger, $white);
|
||||
}
|
||||
|
||||
&.modal-warning{
|
||||
@include modal-colors($warning, $white);
|
||||
}
|
||||
|
||||
&.modal-success{
|
||||
@include modal-colors($success, $white);
|
||||
}
|
||||
|
||||
&.modal-info{
|
||||
@include modal-colors($info, $white);
|
||||
}
|
||||
|
||||
.modal-header .close{
|
||||
color: $danger;
|
||||
text-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.modal-black{
|
||||
.modal-content{
|
||||
background: linear-gradient(to bottom, $black 0%, $black-states 100%);
|
||||
color: rgba($white, 0.8);
|
||||
.modal-header{
|
||||
.modal-title, .title{
|
||||
color: rgba($white, 0.9);
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
p{
|
||||
color: rgba($white, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-search{
|
||||
.modal-dialog{
|
||||
margin: 20px auto;
|
||||
max-width: 650px;
|
||||
input{
|
||||
border: none;
|
||||
font-size: 17px;
|
||||
font-weight: 100;
|
||||
}
|
||||
span{
|
||||
font-size: 35px;
|
||||
color: $search-gray;
|
||||
}
|
||||
}
|
||||
.modal-content{
|
||||
.modal-header{
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-header .close{
|
||||
color: $dark-background;
|
||||
top: 30px !important;
|
||||
}
|
||||
|
||||
.modal-footer{
|
||||
border-top: 2px solid #f9f9f9;
|
||||
margin: 0px 25px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.modal {
|
||||
&.show .modal-dialog {
|
||||
transform: translateY(10%);
|
||||
|
||||
&.modal-notice {
|
||||
transform: translateY(3%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
85
APP/assets/sass/dashboard/custom/_nav.scss
Normal file
85
APP/assets/sass/dashboard/custom/_nav.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
.nav-link {
|
||||
color: $nav-link-color;
|
||||
|
||||
&:hover {
|
||||
color: theme-color("primary");
|
||||
}
|
||||
}
|
||||
|
||||
// Pills
|
||||
|
||||
.nav-pills {
|
||||
|
||||
.nav-link {
|
||||
padding: $nav-pills-padding-y $nav-pills-padding-x;
|
||||
color: $nav-pills-link-color;
|
||||
font-weight: 500;
|
||||
background-color: $nav-pills-bg;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
color: $nav-pills-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: $nav-pills-link-active-color;
|
||||
background-color: $nav-pills-link-active-bg;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.nav-pills:not(.nav-pills-circle) {
|
||||
.nav-item {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nav pills circle
|
||||
|
||||
.nav-pills-circle {
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
padding: 0;
|
||||
line-height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
i, svg {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nav wrapper
|
||||
.nav-wrapper {
|
||||
padding: 1rem 0;
|
||||
@include border-top-radius($card-border-radius);
|
||||
|
||||
+ .card {
|
||||
@include border-top-radius(0);
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.nav-tabs {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
text-align: center;
|
||||
|
||||
.nav-item > .nav-link {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
464
APP/assets/sass/dashboard/custom/_navbar.scss
Normal file
464
APP/assets/sass/dashboard/custom/_navbar.scss
Normal file
@@ -0,0 +1,464 @@
|
||||
.navbar {
|
||||
width: 100%;
|
||||
z-index: 1050;
|
||||
background: $navbar-color;
|
||||
|
||||
.photo {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.btn{
|
||||
margin: 0 5px 0 10px;
|
||||
}
|
||||
|
||||
&.navbar-absolute{
|
||||
position: absolute;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
|
||||
&.navbar-transparent{
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
&.bg-white{
|
||||
.navbar-nav{
|
||||
.search-bar.input-group{
|
||||
i{
|
||||
color: $black;
|
||||
}
|
||||
i:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar.input-group .form-control{
|
||||
background: rgba($black,0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
a.nav-link{
|
||||
color: $black !important;
|
||||
p{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.navbar-text, .navbar-brand{
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
color: $black !important;
|
||||
}
|
||||
|
||||
.form-control::placeholder {
|
||||
color: $dark-gray !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.bg-dark {
|
||||
background: $black !important;
|
||||
}
|
||||
|
||||
&.bg-primary {
|
||||
background-color: $primary !important;
|
||||
}
|
||||
|
||||
&.bg-warning {
|
||||
background-color: $warning !important;
|
||||
}
|
||||
|
||||
&.bg-info {
|
||||
background-color: $info !important;
|
||||
}
|
||||
|
||||
&.bg-success {
|
||||
background-color: darken($success, 10%) !important;
|
||||
}
|
||||
|
||||
&.bg-danger {
|
||||
background-color: $danger !important;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
position: fixed;
|
||||
padding-top: .3125rem;
|
||||
padding-bottom: .3125rem;
|
||||
color: $white;
|
||||
margin-left: 17px;
|
||||
text-transform: uppercase;
|
||||
font-size: $font-paragraph;
|
||||
}
|
||||
|
||||
.navbar-toggle button:focus, .navbar-toggler{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.notification {
|
||||
background: $danger;
|
||||
color: $white;
|
||||
border-radius: $border-radius-xl;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border: 1px solid $danger;
|
||||
}
|
||||
|
||||
.navbar-nav li{
|
||||
padding: 0 10px;
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
i{
|
||||
vertical-align: middle;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md){
|
||||
.navbar {
|
||||
top: -70px;
|
||||
}
|
||||
|
||||
.navbar{
|
||||
.container-fluid{
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.navbar-collapse{
|
||||
.input-group{
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
|
||||
.btn{
|
||||
margin-left: -3px;
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: 300;
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus {
|
||||
color: $black !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.nav-link{
|
||||
i{
|
||||
opacity: 1;
|
||||
margin-left: 4px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
p{
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-search .modal-dialog{
|
||||
padding: 0 40px;
|
||||
}
|
||||
.dropdown{
|
||||
margin: 5px 0;
|
||||
.nav-link{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.dropdown-menu{
|
||||
.dropdown-item{
|
||||
margin-top: 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.show .dropdown-menu{
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
.dropdown .dropdown-menu{
|
||||
display: none;
|
||||
li a{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown.show .dropdown-menu,
|
||||
.dropdown .dropdown-menu{
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
transition: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
width: auto;
|
||||
margin: 0px 1rem;
|
||||
padding-top: 0;
|
||||
margin-top: 0px;
|
||||
|
||||
&:before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item:focus,
|
||||
.dropdown-menu .dropdown-item:hover{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.bg-white .dropdown-menu .dropdown-item:focus,
|
||||
&.bg-white .dropdown-menu .dropdown-item:hover{
|
||||
color: $default;
|
||||
}
|
||||
|
||||
.navbar-toggler-bar{
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
background: $white;
|
||||
|
||||
&.navbar-kebab{
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
& + .navbar-toggler-bar{
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
& + .navbar-toggler-bar.navbar-kebab{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
&.bar2{
|
||||
width: 17px;
|
||||
transition: width .2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
|
||||
background-color: $default;
|
||||
}
|
||||
|
||||
& .toggled .navbar-toggler-bar{
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
.bar1 {
|
||||
top: 0px;
|
||||
@include bar-animation($topbar-back);
|
||||
}
|
||||
.bar2 {
|
||||
opacity: 1;
|
||||
}
|
||||
.bar3 {
|
||||
bottom: 0px;
|
||||
@include bar-animation($bottombar-back);
|
||||
}
|
||||
.toggled .bar1 {
|
||||
top: 6px;
|
||||
@include bar-animation($topbar-x);
|
||||
}
|
||||
.toggled .bar2 {
|
||||
opacity: 0;
|
||||
}
|
||||
.toggled .bar3 {
|
||||
bottom: 9px;
|
||||
@include bar-animation($bottombar-x);
|
||||
}
|
||||
|
||||
@include topbar-x-rotation();
|
||||
@include topbar-back-rotation();
|
||||
@include bottombar-x-rotation();
|
||||
@include bottombar-back-rotation();
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
.nav-link{
|
||||
i.fa,
|
||||
i.tim-icons{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.navbar-collapse {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.navbar .navbar-toggle {
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
&.profile-photo {
|
||||
padding: 0;
|
||||
margin: 7px $padding-base-horizontal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
.caret {
|
||||
position: absolute;
|
||||
left: 80%;
|
||||
top: 55%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .nav-link {
|
||||
padding-right: $list-inline-padding;
|
||||
padding-left: $list-inline-padding;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.navbar[class*='navbar-toggleable-'] .container {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-between (md, lg){
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
.bar1 {
|
||||
top: 0px;
|
||||
@include bar-animation($topbar-back);
|
||||
}
|
||||
.bar2 {
|
||||
opacity: 1;
|
||||
}
|
||||
.bar3 {
|
||||
bottom: 0px;
|
||||
@include bar-animation($bottombar-back);
|
||||
}
|
||||
.toggled .bar1 {
|
||||
top: 7px;
|
||||
@include bar-animation($topbar-x);
|
||||
}
|
||||
.toggled .bar2 {
|
||||
opacity: 0;
|
||||
}
|
||||
.toggled .bar3 {
|
||||
bottom: 9px;
|
||||
@include bar-animation($bottombar-x);
|
||||
}
|
||||
|
||||
@include topbar-x-rotation();
|
||||
@include topbar-back-rotation();
|
||||
@include bottombar-x-rotation();
|
||||
@include bottombar-back-rotation();
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
|
||||
.navbar .navbar-toggler-bar.bar2 {
|
||||
width: 17px;
|
||||
transition: width .2s linear;
|
||||
}
|
||||
|
||||
.navbar .navbar-toggler-bar {
|
||||
display: block;
|
||||
position: relative !important;
|
||||
width: 22px;
|
||||
height: 1px;
|
||||
border-radius: 1px;
|
||||
background: $white;
|
||||
}
|
||||
.navbar .navbar-toggler-bar+.navbar-toggler-bar {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.navbar .navbar-toggle .navbar-toggler{
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
14
APP/assets/sass/dashboard/custom/_popover.scss
Normal file
14
APP/assets/sass/dashboard/custom/_popover.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
.popover {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.popover-header {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
// Alternative colors
|
||||
@each $color, $value in $theme-colors {
|
||||
.popover-#{$color} {
|
||||
@include popover-variant($value);
|
||||
}
|
||||
}
|
||||
104
APP/assets/sass/dashboard/custom/_progress.scss
Normal file
104
APP/assets/sass/dashboard/custom/_progress.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
|
||||
.progress-container{
|
||||
position: relative;
|
||||
|
||||
&.progress-sm {
|
||||
margin-top: 10px;
|
||||
|
||||
.progress {
|
||||
.progress-value{
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -27px;
|
||||
color: $white;
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + .progress-container,
|
||||
& ~ .progress-container{
|
||||
margin-top: $margin-base-vertical;
|
||||
}
|
||||
.progress-badge{
|
||||
color: $white;
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.float-left{
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3);
|
||||
|
||||
.progress-bar {
|
||||
border-radius:$border-radius-xl;
|
||||
box-shadow: none;
|
||||
background: $default;
|
||||
|
||||
.progress-value{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
color: $white;
|
||||
text-align: right;
|
||||
font-size: $font-size-xs;
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-bar-sm{
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-neutral{
|
||||
.progress{
|
||||
background: rgba(255, 255, 255, .3);
|
||||
}
|
||||
|
||||
.progress-bar{
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-primary{
|
||||
.progress-bar{
|
||||
@include diagonal-gradient($primary-states, $primary);
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-info{
|
||||
.progress-bar{
|
||||
@include diagonal-gradient($info-states, $info);
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-success{
|
||||
.progress-bar{
|
||||
@include diagonal-gradient($success-states, $success);
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-warning{
|
||||
.progress-bar{
|
||||
@include diagonal-gradient($warning-states, $warning);
|
||||
}
|
||||
}
|
||||
|
||||
&.progress-danger{
|
||||
.progress-bar{
|
||||
@include diagonal-gradient($danger-states, $danger);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-chart {
|
||||
.progress-container+.progress-container,
|
||||
.progress-container~.progress-container {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
18
APP/assets/sass/dashboard/custom/_reboot.scss
Normal file
18
APP/assets/sass/dashboard/custom/_reboot.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main {
|
||||
overflow: hidden;
|
||||
}
|
||||
258
APP/assets/sass/dashboard/custom/_rtl.scss
Normal file
258
APP/assets/sass/dashboard/custom/_rtl.scss
Normal file
@@ -0,0 +1,258 @@
|
||||
.rtl {
|
||||
.sidebar,
|
||||
.bootstrap-navbar {
|
||||
right: 0;
|
||||
left: auto;
|
||||
margin-right: 20px;
|
||||
margin-left: 0;
|
||||
|
||||
.nav{
|
||||
i{
|
||||
float: right;
|
||||
margin-left: 15px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-right: 45px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.caret{
|
||||
left: 11px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.logo{
|
||||
a.logo-mini{
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.simple-text{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-wrapper > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal,
|
||||
.sidebar-wrapper .user .info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:before{
|
||||
right: 30px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar{
|
||||
.navbar-brand{
|
||||
margin-right: 0px;
|
||||
}
|
||||
.dropdown-menu{
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel{
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.main-panel .content{
|
||||
padding: 80px 280px 30px 30px;
|
||||
}
|
||||
|
||||
.dropdown-toggle:after{
|
||||
margin-right: .255em;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu.dropdown-menu-right.dropdown-navbar{
|
||||
right: -220px !important;
|
||||
left: auto;
|
||||
|
||||
&:before{
|
||||
right: auto;
|
||||
left: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification{
|
||||
left: 40px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navbar-minimize-fixed{
|
||||
margin-right: 38px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.minimize-sidebar{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.alert{
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
button.close{
|
||||
left: 10px !important;
|
||||
right: auto !important;
|
||||
}
|
||||
|
||||
span[data-notify="icon"]{
|
||||
right: 15px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.alert-with-icon{
|
||||
padding-right: 65px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
&.alert-with-icon i[data-notify="icon"]{
|
||||
right: 15px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar{
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.modal-search .modal-header .close{
|
||||
margin-right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.rtl .footer{
|
||||
padding: 24px 30px !important;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
right: auto !important;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fixed-plugin .dropdown-menu{
|
||||
right: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.rtl{
|
||||
|
||||
.navbar-minimize button {
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 24px 300px 24px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
|
||||
|
||||
.rtl {
|
||||
.sidebar {
|
||||
@include transform-translate-x(260px);
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
float: right;
|
||||
right: 0;
|
||||
left: auto;
|
||||
@include transform-translate-x(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.rtl .sidebar {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.rtl .main-panel .content{
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.rtl .main-panel .content {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.rtl #bodyClick {
|
||||
right: 260px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.rtl .navbar .navbar-toggle .navbar-toggler {
|
||||
display: block;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.rtl .navbar {
|
||||
.navbar-nav {
|
||||
padding-right: 0;
|
||||
a.nav-link {
|
||||
text-align: right;
|
||||
p{
|
||||
margin-right: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
i{
|
||||
margin-left: 4px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar span{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-open {
|
||||
body {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.rtl {
|
||||
.main-panel .content {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
|
||||
.rtl .navbar .dropdown-menu {
|
||||
width: 200px !important;
|
||||
}
|
||||
}
|
||||
738
APP/assets/sass/dashboard/custom/_sidebar-and-main-panel.scss
Normal file
738
APP/assets/sass/dashboard/custom/_sidebar-and-main-panel.scss
Normal file
@@ -0,0 +1,738 @@
|
||||
.wrapper{
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
|
||||
&.wrapper-full-page{
|
||||
min-height: 100vh;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-wrapper ul li div.collapse ul li div.collapse ul li a,
|
||||
.sidebar-wrapper ul li div.collapse ul li div.collapsing ul li a,
|
||||
.sidebar-wrapper ul li div.collapsing ul li div.collapse ul li a{
|
||||
|
||||
margin-left: 25px;
|
||||
|
||||
}
|
||||
.sidebar,
|
||||
.off-canvas-sidebar{
|
||||
@include linear-gradient($primary-states, $primary);
|
||||
height: calc(100vh - 90px);
|
||||
width: 230px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
display: block;
|
||||
box-shadow: 0px 0px 45px 0px rgba(0,0,0,0.6);
|
||||
margin-top: 82px;
|
||||
margin-left: 20px;
|
||||
border-radius: 5px;
|
||||
|
||||
.sidebar-wrapper{
|
||||
width: $full-width;
|
||||
min-height: 100%;
|
||||
max-height: calc(100vh - 705px);
|
||||
z-index: 4;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
.dropdown .dropdown-backdrop{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.navbar-form{
|
||||
border: none;
|
||||
}
|
||||
|
||||
> .nav,
|
||||
.user .info{
|
||||
[data-toggle="collapse"] ~ div > ul > li > a{
|
||||
span{
|
||||
display: inline-block;
|
||||
@extend .animation-transition-general;
|
||||
|
||||
}
|
||||
|
||||
.sidebar-normal{
|
||||
margin: 0;
|
||||
position: relative;
|
||||
transform: translateX(0px);
|
||||
opacity: 1;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
line-height: 23px;
|
||||
z-index: 1;
|
||||
color: $opacity-8;
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 17px;
|
||||
line-height: 20px;
|
||||
width: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.logo-tim{
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333;
|
||||
display: block;
|
||||
height: 61px;
|
||||
width: 61px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
||||
img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav{
|
||||
margin-top: 20px;
|
||||
display: block;
|
||||
|
||||
.caret{
|
||||
top: 14px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
li{
|
||||
> a + div .nav{
|
||||
margin-top: 5px;
|
||||
li > a{
|
||||
margin-top: 0px;
|
||||
padding: 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
> a{
|
||||
margin: 10px 15px 0;
|
||||
border-radius: $btn-round-radius;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $white;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
font-size: $font-size-xs;
|
||||
padding: 10px 8px;
|
||||
line-height: $line-height-lg;
|
||||
}
|
||||
|
||||
&:first-child > a{
|
||||
margin: 0 15px;
|
||||
|
||||
}
|
||||
|
||||
&:hover:not(.active) > a,
|
||||
&:focus:not(.active) > a{
|
||||
p,i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.active) > a i,
|
||||
&:focus:not(.active) > a i{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.active > a:not([data-toggle="collapse"]){
|
||||
background: transparent;
|
||||
|
||||
i,p{
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:before{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
top: 22px;
|
||||
left: -4px;
|
||||
background: $white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a[data-toggle="collapse"]{
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: $white;
|
||||
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
& + div .nav .active a{
|
||||
|
||||
box-shadow: none;
|
||||
|
||||
&:before{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
top: 17px;
|
||||
left: -4px;
|
||||
background: $white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&:before{
|
||||
content: " ";
|
||||
position: absolute;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
top: 22px;
|
||||
left: -4px;
|
||||
background: rgba($white,0.6);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: auto;
|
||||
white-space: nowrap;
|
||||
@extend .animation-transition-general;
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 20px;
|
||||
float: left;
|
||||
margin-right: 12px;
|
||||
line-height: 30px;
|
||||
width: 34px;
|
||||
text-align: center;
|
||||
color: $opacity-8;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-background{
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
width: $full-width;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
&:after{
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: $full-width;
|
||||
height: 100%;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #FFFFFF;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.logo{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $padding-base-vertical $padding-base-horizontal 1rem;
|
||||
z-index: 4;
|
||||
|
||||
a.logo-mini,
|
||||
a.logo-normal{
|
||||
@extend .animation-transition-general;
|
||||
}
|
||||
|
||||
a.logo-mini{
|
||||
opacity: 1;
|
||||
float: left;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
min-width: 38px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba($white,0.9);
|
||||
img {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
a.logo-normal{
|
||||
display: block;
|
||||
opacity: 1;
|
||||
@include transform-translate-x(0px);
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 15px;
|
||||
height: 1px;
|
||||
width: calc(100% - 30px);
|
||||
background: $opacity-5;
|
||||
|
||||
}
|
||||
|
||||
p{
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
margin: 10px 10px;
|
||||
color: $white;
|
||||
line-height: 20px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.simple-text{
|
||||
text-transform: uppercase;
|
||||
padding: $padding-base-vertical 0;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
font-size: $font-size-base;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-tim{
|
||||
border-radius: 50%;
|
||||
border: 1px solid #333;
|
||||
display: block;
|
||||
height: 61px;
|
||||
width: 61px;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
||||
img{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
&[data="blue"]{
|
||||
@include linear-gradient($info-states, $info);
|
||||
&:before{
|
||||
border-bottom-color: $info;
|
||||
}
|
||||
}
|
||||
&[data="green"]{
|
||||
@include linear-gradient($success-states, $success);
|
||||
&:before{
|
||||
border-bottom-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&[data="vue"] {
|
||||
@include linear-gradient($vue-states, $vue);
|
||||
&:before{
|
||||
border-bottom-color: $vue;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user{
|
||||
padding-bottom: 20px;
|
||||
margin:20px auto 0;
|
||||
position: relative;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 15px;
|
||||
height: 1px;
|
||||
width: calc(100% - 30px);
|
||||
background: $opacity-5;
|
||||
}
|
||||
|
||||
.photo{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
z-index: 5;
|
||||
margin-right: 10px;
|
||||
border-radius: 50%;
|
||||
margin-left: 23px;
|
||||
box-shadow: $box-shadow-raised;
|
||||
@extend .animation-transition-general;
|
||||
|
||||
img{
|
||||
width: $full-width;
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
padding: $padding-base-vertical 15px;
|
||||
white-space: nowrap;
|
||||
@extend .animation-transition-general;
|
||||
}
|
||||
|
||||
.info{
|
||||
> a{
|
||||
display: block;
|
||||
line-height: 18px;
|
||||
|
||||
> span{
|
||||
@extend .animation-transition-general;
|
||||
display: block;
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.caret{
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.visible-on-sidebar-regular{
|
||||
display: inline-block !important;
|
||||
}
|
||||
.off-canvas-sidebar{
|
||||
.nav {
|
||||
> li > a,
|
||||
> li > a:hover{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
> li > a:focus{
|
||||
background: rgba(200, 200, 200, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.main-panel {
|
||||
position: relative;
|
||||
float: right;
|
||||
width: $full-width;
|
||||
min-height: 100vh;
|
||||
border-top: 2px solid $primary;
|
||||
background: linear-gradient($background-black, $background-states-black);
|
||||
|
||||
@include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
|
||||
&[data="blue"]{
|
||||
border-top: 2px solid $info;
|
||||
}
|
||||
|
||||
&[data="green"]{
|
||||
border-top: 2px solid $success;
|
||||
}
|
||||
&[data="primary"]{
|
||||
border-top: 2px solid $primary;
|
||||
}
|
||||
&[data="vue"]{
|
||||
border-top: 2px solid $vue;
|
||||
}
|
||||
|
||||
> .content {
|
||||
padding: 80px 30px 30px 280px;
|
||||
min-height: calc(100vh - 70px);
|
||||
}
|
||||
|
||||
> .navbar {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.header {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.perfect-scrollbar-on{
|
||||
.sidebar,
|
||||
.main-panel{
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.panel-header {
|
||||
height: $sidebar-width;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 45px;
|
||||
background: #141E30; /* fallback for old browsers */
|
||||
background: -webkit-gradient(linear, left top, right top, from(#0c2646), color-stop(60%, #204065), to(#2a5788));
|
||||
background: linear-gradient(to right, #0c2646 0%, #204065 60%, #2a5788 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.header{
|
||||
.title{
|
||||
color: $white;
|
||||
}
|
||||
.category{
|
||||
max-width: 600px;
|
||||
color: $opacity-5;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
|
||||
a{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-header-sm{
|
||||
height: 135px;
|
||||
}
|
||||
|
||||
.panel-header-lg{
|
||||
height: 380px
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md){
|
||||
.sidebar{
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: $sidebar-width;
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
z-index: 1032;
|
||||
visibility: visible;
|
||||
overflow-y: visible;
|
||||
padding: 0;
|
||||
@include transition($sidebar-transition);
|
||||
@include transform-translate-x(-$sidebar-width);
|
||||
|
||||
.sidebar-wrapper{
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-open{
|
||||
.main-panel{
|
||||
right: 0;
|
||||
@include transform-translate-x($sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
|
||||
@include transition($sidebar-transition);
|
||||
@include transform-translate-x(0px);
|
||||
&:before{
|
||||
content: unset;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-on-right .nav-open{
|
||||
|
||||
.main-panel{
|
||||
@include transform-translate-x(-$sidebar-width);
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.sidebar{
|
||||
@include transform-translate-x(0px);
|
||||
}
|
||||
|
||||
.bodyClick{
|
||||
right: $sidebar-width;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-on-right{
|
||||
.sidebar{
|
||||
left: auto;
|
||||
right: 0;
|
||||
@include transform-translate-x($sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
.bodyClick{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: $sidebar-width;
|
||||
content: "";
|
||||
z-index: 9999;
|
||||
overflow-x: hidden;
|
||||
background-color: transparent;
|
||||
@include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
@include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
}
|
||||
|
||||
.main-panel{
|
||||
width: 100%;
|
||||
.content{
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg){
|
||||
.sidebar,
|
||||
.main-panel,
|
||||
.sidebar-wrapper{
|
||||
-webkit-transition-property: top,bottom,width;
|
||||
transition-property: top,bottom, width;
|
||||
-webkit-transition-duration: .2s,.2s, .35s;
|
||||
transition-duration: .2s,.2s, .35s;
|
||||
-webkit-transition-timing-function: linear,linear,ease;
|
||||
transition-timing-function: linear,linear,ease;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.sidebar .nav>li.active-pro {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm){
|
||||
.main-panel .content {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-between (md, lg){
|
||||
.wrapper{
|
||||
@include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: $sidebar-width !important;
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
z-index: 1032;
|
||||
visibility: visible;
|
||||
overflow-y: visible;
|
||||
padding: 0;
|
||||
@include transition($sidebar-transition);
|
||||
@include transform-translate-x(-$sidebar-width);
|
||||
|
||||
.sidebar-wrapper{
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel{
|
||||
@include transition($sidebar-transition);
|
||||
}
|
||||
|
||||
.nav-open{
|
||||
.main-panel{
|
||||
right: 0;
|
||||
@include transform-translate-x($sidebar-width);
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
|
||||
@include transition($sidebar-transition);
|
||||
@include transform-translate-x(0px);
|
||||
&:before{
|
||||
content: unset;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.menu-on-right{
|
||||
|
||||
.main-panel{
|
||||
@include transform-translate-x(-$sidebar-width);
|
||||
}
|
||||
|
||||
.navbar-collapse,
|
||||
.sidebar{
|
||||
@include transform-translate-x(0px);
|
||||
}
|
||||
|
||||
.bodyClick{
|
||||
right: $sidebar-width;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-on-right{
|
||||
.sidebar{
|
||||
left: auto;
|
||||
right: 0;
|
||||
@include transform-translate-x($sidebar-width);
|
||||
}
|
||||
}
|
||||
|
||||
.bodyClick {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: $sidebar-width;
|
||||
content: "";
|
||||
z-index: 9999;
|
||||
overflow-x: hidden;
|
||||
background-color: transparent;
|
||||
@include transitions(0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
|
||||
}
|
||||
|
||||
.main-panel .content {
|
||||
padding-left: 30px !important;
|
||||
}
|
||||
}
|
||||
193
APP/assets/sass/dashboard/custom/_tables.scss
Normal file
193
APP/assets/sass/dashboard/custom/_tables.scss
Normal file
@@ -0,0 +1,193 @@
|
||||
.table{
|
||||
|
||||
> tbody > tr > td {
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
|
||||
.photo {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr.table-success{
|
||||
&,
|
||||
> td {
|
||||
background-color: darken($success, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr.table-info{
|
||||
&,
|
||||
> td {
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr.table-primary{
|
||||
&,
|
||||
> td {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
> tbody > tr.table-warning{
|
||||
&,
|
||||
> td {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
> tbody > tr.table-danger{
|
||||
&,
|
||||
> td {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.img-wrapper{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.img-row{
|
||||
max-width: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.form-check{
|
||||
margin: 0;
|
||||
margin-top: 5px;
|
||||
|
||||
& label .form-check-sign::before,
|
||||
& label .form-check-sign::after{
|
||||
top: -17px;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
small,.small{
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
> thead > tr > th{
|
||||
border-bottom-width: 1px;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-extra-bold;
|
||||
border: 0;
|
||||
color: rgba($white, 0.7);
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox{
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
width: 15px;
|
||||
|
||||
.icons{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label{
|
||||
&:after,
|
||||
&:before{
|
||||
top: -17px;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
> thead > tr > th,
|
||||
> tbody > tr > th,
|
||||
> tfoot > tr > th,
|
||||
> thead > tr > td,
|
||||
> tbody > tr > td,
|
||||
> tfoot > tr > td{
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 12px 7px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.th-description{
|
||||
max-width: 150px;
|
||||
}
|
||||
.td-price{
|
||||
font-size: 26px;
|
||||
font-weight: $font-weight-light;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
.td-total{
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $h5-font-size;
|
||||
padding-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.td-actions .btn{
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
> tbody > tr{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> tfoot > tr {
|
||||
color: hsla(0,0%,100%,.7);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-responsive{
|
||||
overflow: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#tables .table-responsive{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
table.tablesorter thead tr .header{
|
||||
background-image: url("/img/bg.gif");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table.tablesorter thead tr .headerSortUp {
|
||||
background-image: url("/img/asc.gif");
|
||||
}
|
||||
table.tablesorter thead tr .headerSortDown {
|
||||
background-image: url("/img/desc.gif");
|
||||
}
|
||||
|
||||
|
||||
// datatables
|
||||
|
||||
|
||||
.dataTables_wrapper {
|
||||
.table-striped tbody tr:nth-of-type(odd) {
|
||||
background-color: rgba(0,0,0,.05);
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
166
APP/assets/sass/dashboard/custom/_type.scss
Normal file
166
APP/assets/sass/dashboard/custom/_type.scss
Normal file
@@ -0,0 +1,166 @@
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
line-height: $headings-line-height;
|
||||
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea{
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
.card{
|
||||
h1,h2,h3,h4,h5,h6,p{
|
||||
color: $opacity-8;
|
||||
}
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
font-weight: $font-weight-normal;
|
||||
color: $opacity-8;
|
||||
}
|
||||
|
||||
a{
|
||||
color: $primary-states;
|
||||
font-weight: $font-weight-light;
|
||||
&:hover,
|
||||
&:focus{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
h1, .h1 {
|
||||
line-height: 1.05;
|
||||
margin-bottom: $margin-base-vertical * 2;
|
||||
|
||||
small{
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
}
|
||||
h2, .h2{
|
||||
margin-bottom: $margin-base-vertical * 2;
|
||||
line-height: 1.2;
|
||||
|
||||
}
|
||||
h3, .h3{
|
||||
margin-bottom: $margin-base-vertical * 2;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
h4, .h4{
|
||||
line-height: 1.45em;
|
||||
margin-bottom: $margin-base-vertical;
|
||||
|
||||
& + .category,
|
||||
&.title + .category{
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
h5, .h5 {
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
h6, .h6{
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
p{
|
||||
color: $opacity-8;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&.description{
|
||||
font-size: 1.14em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.title{
|
||||
font-weight: $font-weight-bold;
|
||||
&.title-up{
|
||||
text-transform: uppercase;
|
||||
|
||||
a{
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
& + .category{
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.description,
|
||||
.card-description,
|
||||
.footer-big p,
|
||||
.card .footer .stats{
|
||||
color: $dark-gray;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
.category,
|
||||
.card-category{
|
||||
text-transform: capitalize;
|
||||
font-weight: $font-weight-normal;
|
||||
color: rgba($white, 0.6);
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.card-category{
|
||||
font-size: $font-size-sm;
|
||||
}
|
||||
|
||||
.blockquote{
|
||||
border-left: none;
|
||||
border: 1px solid $default;
|
||||
padding: 20px;
|
||||
font-size: $blockquote-font-size;
|
||||
line-height: 1.8;
|
||||
|
||||
small{
|
||||
color: $default;
|
||||
font-size: $font-size-sm;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&.blockquote-primary{
|
||||
border-color: $primary;
|
||||
color: $primary;
|
||||
|
||||
small{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-danger{
|
||||
border-color: $danger;
|
||||
color: $danger;
|
||||
|
||||
small{
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.blockquote-white{
|
||||
border-color: $opacity-8;
|
||||
color: $white;
|
||||
|
||||
small{
|
||||
color: $opacity-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li, ol li{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
pre{
|
||||
color: $opacity-8;
|
||||
}
|
||||
|
||||
hr{
|
||||
border-top: 1px solid rgba(0,0,0,0.1);
|
||||
margin-top: $spacer;
|
||||
margin-bottom: $spacer;
|
||||
}
|
||||
9
APP/assets/sass/dashboard/custom/_utilities.scss
Normal file
9
APP/assets/sass/dashboard/custom/_utilities.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
@import "utilities/backgrounds.scss";
|
||||
@import "utilities/floating.scss";
|
||||
@import "utilities/helper.scss";
|
||||
@import "utilities/position.scss";
|
||||
@import "utilities/sizing.scss";
|
||||
@import "utilities/spacing.scss";
|
||||
@import "utilities/shadows.scss";
|
||||
@import "utilities/text.scss";
|
||||
@import "utilities/transform.scss";
|
||||
999
APP/assets/sass/dashboard/custom/_variables.scss
Normal file
999
APP/assets/sass/dashboard/custom/_variables.scss
Normal file
@@ -0,0 +1,999 @@
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "functions";
|
||||
@import "mixins";
|
||||
// Global settings
|
||||
|
||||
$enable-caret: true !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: true !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
|
||||
|
||||
// Color system
|
||||
|
||||
$white: #ffffff !default;
|
||||
$gray-100: #f6f9fc !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #e3e3e3 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #6c757d !default; // Line footer color
|
||||
$gray-700: #525f7f !default; // Line p color
|
||||
$gray-800: #32325d !default; // Line heading color
|
||||
$gray-900: #212529 !default;
|
||||
$link-disabled: #666666 !default;
|
||||
$transparent-bg: transparent !default;
|
||||
$light-bg: #f5f6fa !default;
|
||||
$dark-background: #555555 !default;
|
||||
|
||||
|
||||
$grays: () !default;
|
||||
$grays: map-merge((
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900
|
||||
), $grays);
|
||||
|
||||
$blue: #5e72e4 !default;
|
||||
$indigo: #5603ad !default;
|
||||
$purple: #8965e0 !default;
|
||||
$pink: #f3a4b5 !default;
|
||||
$red: #f5365c !default;
|
||||
$orange: #fb6340 !default;
|
||||
$yellow: #ffd600 !default;
|
||||
$green: #2dce89 !default;
|
||||
$teal: #11cdef !default;
|
||||
$cyan: #2bffc6 !default;
|
||||
|
||||
$line-height-lg: 1.625rem !default;
|
||||
$line-height-sm: 1.5 !default;
|
||||
$line-height: 1.35em !default;
|
||||
|
||||
|
||||
$opacity-gray-3: rgba(222,222,222, .3) !default;
|
||||
$opacity-gray-5: rgba(222,222,222, .5) !default;
|
||||
$opacity-gray-8: rgba(222,222,222, .8) !default;
|
||||
|
||||
|
||||
$opacity-5: rgba(255,255,255, .5) !default;
|
||||
$opacity-6: rgba(255,255,255, .6) !default;
|
||||
$opacity-8: rgba(255,255,255, .8) !default;
|
||||
|
||||
|
||||
|
||||
$opacity-1: rgba(255,255,255, .1) !default;
|
||||
$opacity-2: rgba(255,255,255, .2) !default;
|
||||
|
||||
|
||||
// end beniamin
|
||||
|
||||
$colors: () !default;
|
||||
$colors: map-merge((
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"light": $gray-400,
|
||||
"lighter": $gray-200,
|
||||
"gray-dark": $gray-800
|
||||
), $colors);
|
||||
|
||||
$default-color-opacity: rgba(182, 182, 182, .6) !default;
|
||||
$orange-color: #f96332 !default;
|
||||
|
||||
$default: #344675 !default;
|
||||
$primary: #e14eca !default;
|
||||
$secondary: #f4f5f7 !default;
|
||||
$success: #00f2c3 !default;
|
||||
$info: #1d8cf8 !default;
|
||||
$warning: #ff8d72 !default;
|
||||
$danger: #fd5d93 !default;
|
||||
$black: #222a42 !default;
|
||||
$vue: #42b883 !default;
|
||||
|
||||
// gradient
|
||||
$default-states: #263148 !default;
|
||||
$primary-states: #ba54f5 !default;
|
||||
$success-states: #0098f0 !default;
|
||||
$info-states: #3358f4 !default;
|
||||
$warning-states: #ff6491 !default;
|
||||
$danger-states: #ec250d !default;
|
||||
$black-states: #1d253b !default;
|
||||
$vue-states: #389466 !default;
|
||||
|
||||
$background-black: #1e1e2f !default;
|
||||
$background-states-black: #1e1e24 !default;
|
||||
|
||||
// opacity
|
||||
$default-opacity: rgba(182, 182, 182, .6) !default;
|
||||
$primary-opacity: rgba(249, 99, 50, .3) !default;
|
||||
$success-opacity: rgba(24, 206, 15, .3) !default;
|
||||
$info-opacity: rgba(44, 168, 255, .3) !default;
|
||||
$warning-opacity: rgba(255, 178, 54, .3) !default;
|
||||
$danger-opacity: rgba(255, 54, 54, .3) !default;
|
||||
|
||||
$light-gray: #E3E3E3 !default;
|
||||
$medium-gray: #DDDDDD !default;
|
||||
$dark-gray: #9A9A9A !default;
|
||||
$active-gray: #777777 !default;
|
||||
$nav-gray: #444444 !default;
|
||||
$search-gray: #b7b7b7 !default;
|
||||
$calendar-gray: #9499a7 !default;
|
||||
$active-blue: #00bbff !default;
|
||||
|
||||
|
||||
|
||||
$light: $gray-500 !default;
|
||||
$dark: $gray-900 !default;
|
||||
$darker: darken($gray-900, 15%) !default;
|
||||
|
||||
$facebook: #3b5998 !default;
|
||||
$facebook-states: darken($facebook, 5%) !default;
|
||||
$twitter: #55acee !default;
|
||||
$twitter-states: darken($twitter, 5%) !default;
|
||||
$google-plus: #dd4b39 !default;
|
||||
$google-plus-states: darken($google-plus, 5%) !default;
|
||||
$instagram: #125688 !default;
|
||||
$instagram-states: lighten($instagram, 6%) !default;
|
||||
$linkedin: #0077B5 !default;
|
||||
$linkedin-states: darken($linkedin, 5%) !default;
|
||||
$pinterest: #cc2127 !default;
|
||||
$pinterest-states: lighten($pinterest, 6%) !default;
|
||||
$youtube: #e52d27 !default;
|
||||
$youtube-states: lighten($youtube, 6%) !default;
|
||||
$dribbble: #ea4c89 !default;
|
||||
$dribbble-states: lighten($dribbble, 6%) !default;
|
||||
$github: #333333 !default;
|
||||
$github-states: #ccc !default;
|
||||
$reddit: #ff4500 !default;
|
||||
$reddit-states: lighten($reddit, 6%) !default;
|
||||
$tumblr: #35465c !default;
|
||||
$tumblr-states: lighten($tumblr, 6%) !default;
|
||||
$behance: #1769ff !default;
|
||||
$behance-states: lighten($behance, 6%) !default;
|
||||
|
||||
$theme-colors: () !default;
|
||||
$theme-colors: map-merge((
|
||||
"default": $default,
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"white": $white,
|
||||
"neutral": $white,
|
||||
"dark": $dark,
|
||||
"darker": $darker
|
||||
), $theme-colors);
|
||||
|
||||
$brand-colors: () !default;
|
||||
$brand-colors: map-merge((
|
||||
"facebook": $facebook,
|
||||
"twitter": $twitter,
|
||||
"google-plus": $google-plus,
|
||||
"instagram": $instagram,
|
||||
"pinterest": $pinterest,
|
||||
"youtube": $youtube,
|
||||
"dribbble": $dribbble,
|
||||
"github": $github,
|
||||
"reddit": $reddit,
|
||||
"behance": $behance,
|
||||
"tumblr": $tumblr,
|
||||
"linkedin": $linkedin,
|
||||
), $brand-colors);
|
||||
|
||||
|
||||
/* brand Colors */
|
||||
$brand-primary: $primary !default;
|
||||
$brand-info: $info !default;
|
||||
$brand-success: $success !default;
|
||||
$brand-warning: $warning !default;
|
||||
$brand-danger: $danger !default;
|
||||
$brand-inverse: $black !default;
|
||||
|
||||
$topbar-x: topbar-x !default;
|
||||
$topbar-back: topbar-back !default;
|
||||
$bottombar-x: bottombar-x !default;
|
||||
$bottombar-back: bottombar-back !default;
|
||||
|
||||
// Set a specific jump point for requesting color jumps
|
||||
$theme-color-interval: 8% !default;
|
||||
|
||||
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
|
||||
$yiq-contrasted-threshold: 200 !default;
|
||||
|
||||
// Customize the light and dark text colors for use in our YIQ color contrast function.
|
||||
$yiq-text-dark: $gray-900 !default;
|
||||
$yiq-text-light: $white !default;
|
||||
|
||||
// Action colors
|
||||
|
||||
$star-rating-color: $gray-400 !default;
|
||||
$star-rating-color-active: $yellow !default;
|
||||
|
||||
$favorite-color: $yellow !default;
|
||||
$like-color: $blue !default;
|
||||
$love-color: $red !default;
|
||||
|
||||
|
||||
// Body
|
||||
|
||||
$body-bg: $background-black !default;
|
||||
$body-color: $gray-700 !default;
|
||||
|
||||
|
||||
// Sections
|
||||
|
||||
$section-colors: () !default;
|
||||
$section-colors: map-merge((
|
||||
"primary": $body-bg,
|
||||
"secondary": $secondary,
|
||||
"light": $gray-400,
|
||||
"dark": $dark,
|
||||
"darker": $darker
|
||||
), $section-colors);
|
||||
|
||||
// Links
|
||||
|
||||
$link-color: $primary !default;
|
||||
$link-decoration: none !default;
|
||||
$link-hover-color: darken($link-color, 15%);
|
||||
$link-hover-decoration: none !default;
|
||||
|
||||
// Grid breakpoints
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
);
|
||||
|
||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
@include _assert-starts-at-zero($grid-breakpoints);
|
||||
|
||||
|
||||
// Grid containers
|
||||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
|
||||
// Spacing
|
||||
|
||||
$spacer: 1rem !default;
|
||||
$spacers: () !default;
|
||||
$spacers: map-merge((
|
||||
0: 0,
|
||||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
3: $spacer,
|
||||
4: ($spacer * 1.5),
|
||||
5: ($spacer * 3),
|
||||
'sm': ($spacer * 2),
|
||||
'md': ($spacer * 4),
|
||||
'lg': ($spacer * 6),
|
||||
'xl': ($spacer * 8)
|
||||
), $spacers);
|
||||
|
||||
$padding-base-vertical: .5rem !default;
|
||||
$padding-base-horizontal: .7rem !default;
|
||||
|
||||
$padding-btn-vertical: 11px !default;
|
||||
$padding-btn-horizontal: 40px !default;
|
||||
|
||||
$padding-round-horizontal: 23px !default;
|
||||
|
||||
$padding-lg-vertical: 15px !default;
|
||||
|
||||
$padding-input-vertical: 11px !default;
|
||||
$padding-input-horizontal: 19px !default;
|
||||
|
||||
|
||||
$margin-lg-vertical: 30px !default;
|
||||
$margin-base-vertical: 15px !default;
|
||||
|
||||
// This variable affects the `.h-*` and `.w-*` classes.
|
||||
|
||||
$sizes: () !default;
|
||||
$sizes: map-merge((
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%
|
||||
), $sizes);
|
||||
|
||||
// Components
|
||||
|
||||
$shape-height-xl: 1.5 !default;
|
||||
$shape-height-lg: 1.5 !default;
|
||||
$shape-height-sm: 1.5 !default;
|
||||
|
||||
// border
|
||||
$none: 0 !default;
|
||||
$border-thin: 1px !default;
|
||||
$border-thick: 2px !default;
|
||||
$border-width: .0625rem !default;
|
||||
$border-color: $gray-200 !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-xl: 0.875rem !default;
|
||||
$border-radius-lg: 0.4285rem !default;
|
||||
$border-radius-sm: 0.2857rem !default;
|
||||
$border-radius-xs: 0.1428rem !default;
|
||||
|
||||
$margin-bottom: 10px !default;
|
||||
$border: 1px solid !default;
|
||||
|
||||
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
|
||||
$box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
|
||||
$box-shadow-lg: 0 1rem 3rem rgba($black, .175);
|
||||
|
||||
$dropdown-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.125);
|
||||
$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
|
||||
$box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1);
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: theme-color("primary") !default;
|
||||
$component-active-border-color: theme-color("primary") !default;
|
||||
|
||||
$component-hover-color: $gray-300 !default;
|
||||
$component-hover-bg: $gray-300 !default;
|
||||
$component-hover-border-color: $gray-300 !default;
|
||||
|
||||
$caret-width: .3em !default;
|
||||
|
||||
$transition-base: all .15s ease !default;
|
||||
$transition-fade: opacity .15s linear !default;
|
||||
$transition-collapse: height .35s ease !default;
|
||||
|
||||
$fast-transition-time: 150ms !default;
|
||||
|
||||
$transition-linear: linear !default;
|
||||
$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default;
|
||||
$transition-ease: ease 0s;
|
||||
|
||||
$select-coordinates: 50% -40px !default;
|
||||
$general-transition-time: 300ms !default;
|
||||
|
||||
|
||||
// Fonts
|
||||
|
||||
$font-family-base: 'Poppins', sans-serif !default;
|
||||
$font-family-alt: 'Poppins', sans-serif !default;
|
||||
|
||||
$font-size-dash: .875rem !default;
|
||||
|
||||
$font-size-base: $font-size-dash !default; // Assumes the browser default, typically `16px`
|
||||
$font-size-xl: ($font-size-base * 1.428);
|
||||
$font-size-lg: ($font-size-base * 1.142);
|
||||
$font-size-sm: ($font-size-base * .85714286);
|
||||
$font-size-xs: ($font-size-base * .714);
|
||||
|
||||
$h1-font-size: $font-size-base * 2.35714285 !default; //2.1875rem
|
||||
$h2-font-size: $font-size-base * 1.9285714 !default;
|
||||
$h3-font-size: $font-size-base * 1.642857 !default;
|
||||
$h4-font-size: $font-size-base * 1.2142857 !default;
|
||||
$h5-font-size: $font-size-base * 0.9285714 !default;
|
||||
$h6-font-size: $font-size-base * 0.8571428 !default;
|
||||
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-bold: 600 !default;
|
||||
$font-weight-extra-bold: 700 !default;
|
||||
|
||||
$font-paragraph: 1rem !default;
|
||||
|
||||
$font-weight-base: $font-weight-normal !default;
|
||||
$shape-height-base: 1.428571 !default;
|
||||
|
||||
$headings-margin-bottom: ($spacer / 2);
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: $font-weight-normal !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
$headings-color: $gray-800 !default;
|
||||
|
||||
$heading-letter-spacing: .025em !default;
|
||||
$heading-font-size: .95rem !default;
|
||||
$heading-text-transform: uppercase !default;
|
||||
$heading-font-weight: $headings-font-weight !default;
|
||||
|
||||
$heading-title-letter-spacing: .025em !default;
|
||||
$heading-title-font-size: 1.375rem !default;
|
||||
$heading-title-font-weight: $font-weight-bold !default;
|
||||
$heading-title-text-transform: uppercase !default;
|
||||
|
||||
$heading-section-letter-spacing: .025em !default;
|
||||
$heading-section-font-size: 1.375rem !default;
|
||||
$heading-section-font-weight: $font-weight-bold !default;
|
||||
$heading-section-text-transform: uppercase !default;
|
||||
|
||||
$display1-size: 3.3rem !default;
|
||||
$display2-size: 2.75rem !default;
|
||||
$display3-size: 2.1875rem !default;
|
||||
$display4-size: 1.6275rem !default;
|
||||
|
||||
$display1-weight: $font-weight-bold !default;
|
||||
$display2-weight: $font-weight-bold !default;
|
||||
$display3-weight: $font-weight-bold !default;
|
||||
$display4-weight: $font-weight-bold !default;
|
||||
$display-line-height: $headings-line-height !default;
|
||||
|
||||
$paragraph-font-size: 0.625rem !default;
|
||||
$paragraph-font-weight: 300 !default;
|
||||
$paragraph-line-height: 1.7 !default;
|
||||
|
||||
$lead-font-size: ($paragraph-font-size * 1.25);
|
||||
$lead-font-weight: 300 !default;
|
||||
|
||||
$small-font-size: 80% !default;
|
||||
|
||||
$text-muted: $gray-600 !default;
|
||||
|
||||
$blockquote-small-color: $gray-600 !default;
|
||||
$blockquote-font-size: ($font-size-base * 1.1);
|
||||
|
||||
$hr-border-color: rgba($black, .1);
|
||||
$hr-border-width: $border-width !default;
|
||||
|
||||
$mark-padding: .2em !default;
|
||||
|
||||
$dt-font-weight: $font-weight-bold !default;
|
||||
|
||||
$list-inline-padding: .5rem !default;
|
||||
|
||||
$mark-bg: #fcf8e3 !default;
|
||||
|
||||
$hr-margin-y: $spacer * 2 !default;
|
||||
|
||||
|
||||
// Icons
|
||||
|
||||
$icon-size: auto !default;
|
||||
$icon-size-regular: 2.375rem !default;
|
||||
$icon-font-size-regular: 0.9375rem !default;
|
||||
$icon-font-size-sm: 0.6875rem !default;
|
||||
$icon-size-sm: 1.875rem !default;
|
||||
$icon-font-size-lg: 1.325rem !default;
|
||||
$icon-size-lg: 3.6rem !default;
|
||||
$icon-size-xl: 5rem !default;
|
||||
|
||||
|
||||
// Tables
|
||||
|
||||
$table-cell-padding: 1rem !default;
|
||||
$table-cell-padding-sm: .3rem !default;
|
||||
|
||||
$table-bg: transparent !default;
|
||||
$table-accent-bg: rgba($black, .05);
|
||||
$table-hover-bg: rgba($black, .075);
|
||||
$table-active-bg: $table-hover-bg !default;
|
||||
|
||||
$table-border-width: $border-width !default;
|
||||
$table-border-color: $gray-300 !default;
|
||||
|
||||
$table-head-bg: $gray-200 !default;
|
||||
$table-head-color: $gray-700 !default;
|
||||
|
||||
$table-dark-bg: $gray-900 !default;
|
||||
$table-dark-accent-bg: rgba($white, .05);
|
||||
$table-dark-hover-bg: rgba($white, .075);
|
||||
$table-dark-border-color: lighten($gray-900, 7.5%);
|
||||
$table-dark-color: $body-bg !default;
|
||||
|
||||
|
||||
// Buttons + Forms
|
||||
|
||||
$input-btn-padding-y: .5rem !default;
|
||||
$input-btn-padding-x: .7rem !default;
|
||||
$input-btn-line-height: $shape-height-base !default;
|
||||
|
||||
$input-btn-focus-width: 0 !default;
|
||||
$input-btn-focus-color: rgba($component-active-bg, 1);
|
||||
//$input-btn-focus-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.04);
|
||||
$input-btn-focus-box-shadow: none !default;
|
||||
|
||||
$input-btn-padding-y-sm: .25rem !default;
|
||||
$input-btn-padding-x-sm: .5rem !default;
|
||||
$input-btn-line-height-sm: 1.35 !default;
|
||||
|
||||
$input-btn-padding-y-lg: .875rem !default;
|
||||
$input-btn-padding-x-lg: 1rem !default;
|
||||
$input-btn-line-height-lg: 1.35 !default;
|
||||
|
||||
$input-btn-border-width: 1px !default;
|
||||
|
||||
$input-btn-font-size-sm: .75rem !default;
|
||||
$input-btn-font-size: .875rem !default;
|
||||
$input-btn-font-size-lg: .875rem !default;
|
||||
|
||||
$input-padding-vertical: 11px !default;
|
||||
$input-padding-horizontal: 19px !default;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-padding-y: 11px !default;
|
||||
$btn-padding-x: 40px !default;
|
||||
$btn-line-height: $line-height !default;
|
||||
|
||||
$btn-padding-y-sm: 5px !default;
|
||||
$btn-padding-x-sm: 15px !default;
|
||||
$btn-line-height-sm: $input-btn-line-height-sm !default;
|
||||
|
||||
$btn-padding-y-lg: 15px !default;
|
||||
$btn-padding-x-lg: 48px !default;
|
||||
$btn-line-height-lg: $input-btn-line-height-lg !default;
|
||||
|
||||
$btn-border-width: $input-btn-border-width !default;
|
||||
|
||||
$btn-font-size-lg: 1em !default;
|
||||
$btn-font-weight: 600 !default;
|
||||
$btn-text-transform: uppercase !default;
|
||||
$btn-letter-spacing: .025em !default;
|
||||
$btn-box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
||||
$btn-hover-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
|
||||
$btn-focus-box-shadow: $btn-hover-box-shadow !default;
|
||||
$btn-focus-width: $input-btn-focus-width !default;
|
||||
|
||||
|
||||
$btn-active-box-shadow: none !default;
|
||||
$btn-round-radius: 30px !default;
|
||||
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
$input-padding-y: $input-btn-padding-y !default;
|
||||
$input-padding-x: $input-btn-padding-x !default;
|
||||
$input-line-height: $input-btn-line-height !default;
|
||||
|
||||
$input-padding-y-sm: $input-btn-padding-y-sm !default;
|
||||
$input-padding-x-sm: $input-btn-padding-x-sm !default;
|
||||
$input-line-height-sm: $input-btn-line-height-sm !default;
|
||||
|
||||
$input-padding-y-lg: $input-btn-padding-y-lg !default;
|
||||
$input-padding-x-lg: $input-btn-padding-x-lg !default;
|
||||
$input-line-height-lg: $input-btn-line-height-lg !default;
|
||||
|
||||
$input-border-radius: $border-radius !default;
|
||||
$input-border-radius-xl: $border-radius-xl !default;
|
||||
$input-border-radius-lg: $border-radius-lg !default;
|
||||
$input-border-radius-sm: $border-radius-sm !default;
|
||||
|
||||
$input-bg: $transparent-bg !default;
|
||||
$input-disabled-bg: $gray-200 !default;
|
||||
|
||||
$input-muted-bg: #EDF0F5 !default;
|
||||
|
||||
$input-alternative-box-shadow: 0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
|
||||
$input-focus-alternative-box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
|
||||
|
||||
$input-color: $opacity-8 !default;
|
||||
$input-border-color: #cad1d7 !default;
|
||||
$input-border-width: $input-btn-border-width !default;
|
||||
$input-box-shadow: none !default; // 0 1px 3px 0 $gray-400 !default;
|
||||
|
||||
$input-focus-bg: $white !default;
|
||||
$input-focus-border-color: rgba(50,151,211,.25);
|
||||
$input-focus-color: $input-color !default;
|
||||
$input-focus-width: 0 !default;
|
||||
$input-focus-box-shadow: none !default; //0 1px 3px 0 $gray-500 !default;
|
||||
|
||||
$input-placeholder-color: $gray-500 !default;
|
||||
$input-focus-placeholder-color: $gray-500 !default;
|
||||
|
||||
$input-height-border: $input-border-width * 2 !default;
|
||||
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
|
||||
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
|
||||
|
||||
$input-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
|
||||
// Input groups
|
||||
|
||||
$input-group-addon-color: $input-placeholder-color !default;
|
||||
$input-group-addon-bg: $input-bg !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
||||
$input-group-addon-focus-color: $input-focus-color !default;
|
||||
$input-group-addon-focus-bg: $input-focus-bg !default;
|
||||
$input-group-addon-focus-border-color: $input-focus-border-color !default;
|
||||
|
||||
|
||||
// Custom forms
|
||||
|
||||
$custom-control-gutter: 1.75rem !default;
|
||||
$custom-control-spacer-x: 1rem !default;
|
||||
$custom-control-indicator-size: 1.25rem !default;
|
||||
|
||||
$custom-control-indicator-bg: $input-bg !default;
|
||||
$custom-control-indicator-border-width: 1px !default;
|
||||
$custom-control-indicator-border-color: $input-border-color !default;
|
||||
$custom-control-indicator-box-shadow: none !default;
|
||||
|
||||
$custom-control-indicator-focus-box-shadow: $custom-control-indicator-box-shadow !default;
|
||||
|
||||
$custom-control-indicator-hover-color: $component-hover-color !default;
|
||||
$custom-control-indicator-hover-bg: $component-hover-bg !default;
|
||||
$custom-control-indicator-hover-border-color: $component-hover-border-color !default;
|
||||
|
||||
$custom-control-indicator-active-color: $component-active-color !default;
|
||||
$custom-control-indicator-active-bg: $component-active-bg !default;
|
||||
$custom-control-indicator-active-border-color: $component-active-border-color !default;
|
||||
$custom-control-indicator-active-box-shadow: $custom-control-indicator-box-shadow !default;
|
||||
|
||||
$custom-control-indicator-checked-color: $component-active-color !default;
|
||||
$custom-control-indicator-checked-bg: $component-active-bg !default;
|
||||
$custom-control-indicator-checked-border-color: $component-active-border-color !default;
|
||||
$custom-control-indicator-checked-box-shadow: $custom-control-indicator-box-shadow !default;
|
||||
$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5);
|
||||
|
||||
$custom-control-indicator-disabled-bg: $gray-200 !default;
|
||||
$custom-control-label-disabled-color: $gray-600 !default;
|
||||
|
||||
$custom-checkbox-indicator-border-radius: $border-radius-sm !default;
|
||||
//$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$custom-toggle-slider-bg: #ddd !default;
|
||||
$custom-toggle-checked-bg: theme-color("primary") !default;
|
||||
|
||||
// Form validation
|
||||
|
||||
$form-feedback-valid-bg: lighten($success, 15%);
|
||||
$form-feedback-valid-color: theme-color("success") !default;
|
||||
$form-feedback-invalid-bg: lighten($warning, 15%);
|
||||
$form-feedback-invalid-color: theme-color("warning") !default;
|
||||
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
|
||||
$btn-border-radius: $input-border-radius !default;
|
||||
$btn-border-radius-xl: $input-border-radius-xl !default;
|
||||
$btn-border-radius-lg: $input-border-radius-lg !default;
|
||||
$btn-border-radius-sm: $input-border-radius !default;
|
||||
|
||||
|
||||
// No UI Slider
|
||||
|
||||
$noui-target-bg: #eceeef !default;
|
||||
$noui-target-thickness: 5px !default;
|
||||
$noui-target-border-radius: 5px !default;
|
||||
$noui-target-border-color: 0 !default;
|
||||
$noui-target-box-shadow: inset 0 1px 2px rgba(90,97,105,.1);
|
||||
|
||||
$noui-slider-connect-bg: $primary !default;
|
||||
$noui-slider-connect-disabled-bg: #b2b2b2 !default;
|
||||
|
||||
$noui-handle-width: 15px !default;
|
||||
$noui-handle-bg: theme-color("primary") !default;
|
||||
$noui-handle-border: 0 !default;
|
||||
$noui-handle-border-radius: 100% !default;
|
||||
|
||||
$noui-origin-border-radius: 2px !default;
|
||||
|
||||
|
||||
// Dropdown
|
||||
|
||||
$dropdown-bg: $white !default;
|
||||
$dropdown-border-width: 0 !default;
|
||||
$dropdown-border-color: rgba($black, .15);
|
||||
$dropdown-border-radius: $border-radius-xs !default;
|
||||
$dropdown-box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
|
||||
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-y: .5rem !default;
|
||||
$nav-link-padding-x: 1rem !default;
|
||||
$nav-link-color: $gray-700 !default;
|
||||
$nav-link-disabled-color: $gray-600 !default;
|
||||
|
||||
$nav-pills-padding-y: .75rem !default;
|
||||
$nav-pills-padding-x: 1rem !default;
|
||||
|
||||
$nav-pills-space-x: 1rem !default;
|
||||
|
||||
$nav-pills-bg: $white;
|
||||
$nav-pills-border-width: 1px !default;
|
||||
$nav-pills-border-color: theme-color("primary") !default;
|
||||
$nav-pills-border-radius: $border-radius !default;
|
||||
|
||||
$nav-pills-link-color: theme-color("primary") !default;
|
||||
$nav-pills-link-hover-color: darken(theme-color("primary"), 5%);
|
||||
$nav-pills-link-active-color: color-yiq(theme-color("primary"));
|
||||
$nav-pills-link-active-bg: theme-color("primary") !default;
|
||||
$nav-pills-box-shadow: $btn-box-shadow !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-transition: all .15s linear !default;
|
||||
$navbar-padding-y: .625rem !default;
|
||||
$navbar-padding-x: .9375rem !default;
|
||||
|
||||
$navbar-nav-link-padding-x: 1rem !default;
|
||||
$navbar-nav-link-padding-y: 1rem !default;
|
||||
|
||||
$navbar-nav-link-font-family: $font-family-alt !default;
|
||||
$navbar-nav-link-font-size: .9rem !default;
|
||||
$navbar-nav-link-font-weight: 400 !default;
|
||||
$navbar-nav-link-text-transform: normal !default;
|
||||
$navbar-nav-link-letter-spacing: 0 !default;
|
||||
$navbar-nav-link-border-radius: $border-radius !default;
|
||||
|
||||
/* navbar color */
|
||||
$navbar-color: #1a1e34 !default;
|
||||
$navbar-dark-bg: transparent !default;
|
||||
$navbar-dark-hover-bg: rgba(255, 255, 255, .1);
|
||||
$navbar-dark-active-bg: rgba(255, 255, 255, .1);
|
||||
$navbar-dark-color: rgba($white, .95);
|
||||
$navbar-dark-hover-color: rgba($white, .65);
|
||||
$navbar-dark-active-color: rgba($white, .65);
|
||||
$navbar-dark-disabled-color: rgba($white, .25);
|
||||
$navbar-dark-toggler-border-color: transparent !default;
|
||||
|
||||
$navbar-light-bg: transparent !default;
|
||||
$navbar-light-hover-bg: rgba(0, 0, 0, .1);
|
||||
$navbar-light-active-bg: rgba(0, 0, 0, .1);
|
||||
$navbar-light-color: rgba($black, .5);
|
||||
$navbar-light-hover-color: rgba($black, .7);
|
||||
$navbar-light-active-color: rgba($black, .9);
|
||||
$navbar-light-disabled-color: rgba($black, .3);
|
||||
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-light-toggler-border-color: transparent !default;
|
||||
$full-width: 100% !default;
|
||||
$navbar-padding: 10px 15px !default;
|
||||
|
||||
|
||||
// Alerts
|
||||
|
||||
$alert-padding-y: .9rem !default;
|
||||
$alert-padding-x: 1.25rem !default;
|
||||
$alert-border-radius: $border-radius-sm !default;
|
||||
|
||||
$alert-bg-level: -2 !default;
|
||||
$alert-border-level: -2 !default;
|
||||
$alert-color-level: 0 !default;
|
||||
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-bg: $white !default;
|
||||
$list-group-border-color: $border-color !default; //rgba($black, .125);
|
||||
$list-group-border-width: $border-width !default;
|
||||
$list-group-border-radius: $border-radius !default;
|
||||
|
||||
$list-group-item-padding-y: 1rem !default;
|
||||
$list-group-item-padding-x: 1rem !default;
|
||||
|
||||
$list-group-hover-bg: $gray-100 !default;
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
$list-group-active-border-color: $list-group-active-bg !default;
|
||||
|
||||
$list-group-disabled-color: $gray-600 !default;
|
||||
$list-group-disabled-bg: $list-group-bg !default;
|
||||
|
||||
$list-group-action-color: $gray-700 !default;
|
||||
$list-group-action-hover-color: $list-group-action-color !default;
|
||||
|
||||
$list-group-action-active-color: $list-group-action-color !default;
|
||||
$list-group-action-active-bg: $gray-200 !default;
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
$close-font-size: $font-size-base * 1.5 !default;
|
||||
$close-font-weight: $font-weight-bold !default;
|
||||
$close-bg: transparent !default;
|
||||
$close-hover-bg: transparent !default;
|
||||
$close-color: rgba(0, 0, 0, .6);
|
||||
$close-hover-color: rgba(0, 0, 0, .9);
|
||||
$close-text-shadow: none !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-font-size: $font-size-sm !default;
|
||||
$popover-bg: $white !default;
|
||||
$popover-max-width: 276px !default;
|
||||
$popover-border-width: 1px !default;
|
||||
$popover-border-color: rgba($black, .05);
|
||||
$popover-border-radius: $border-radius-lg !default;
|
||||
$popover-box-shadow: 0px .5rem 2rem 0px rgba($black, .2);
|
||||
|
||||
$popover-header-bg: $popover-bg !default;
|
||||
$popover-header-color: $headings-color !default;
|
||||
$popover-header-padding-y: .75rem !default;
|
||||
$popover-header-padding-x: .75rem !default;
|
||||
|
||||
$popover-body-color: $body-color !default;
|
||||
$popover-body-padding-y: $popover-header-padding-y !default;
|
||||
$popover-body-padding-x: $popover-header-padding-x !default;
|
||||
|
||||
$popover-arrow-width: 1.5rem !default;
|
||||
$popover-arrow-height: .75rem !default;
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
$popover-arrow-outer-color: transparent !default;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-bg: $black-states !default;
|
||||
$breadcrumb-divider-color: $white !default;
|
||||
$breadcrumb-active-color: $white !default;
|
||||
|
||||
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-font-size: $font-size-xs !default;
|
||||
$badge-font-weight: $font-weight-extra-bold !default;
|
||||
$badge-padding-y: .25rem !default;
|
||||
$badge-padding-x: .5rem !default;
|
||||
$badge-border-radius: $border-radius !default;
|
||||
$badge-text-transfom: uppercase;
|
||||
|
||||
$badge-pill-padding-x: .875em !default;
|
||||
$badge-pill-border-radius: $border-radius-xl !default;
|
||||
|
||||
$badge-circle-size: 2rem;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-padding-y: 0 !default;
|
||||
$pagination-padding-x: .6875rem !default;
|
||||
|
||||
|
||||
$pagination-color: $white !default;
|
||||
$pagination-bg: transparent !default;
|
||||
$pagination-border-width: $border-width !default;
|
||||
$pagination-border-color: $gray-300 !default;
|
||||
|
||||
//$pagination-focus-box-shadow: $btn-hover-box-shadow !default;
|
||||
|
||||
$pagination-hover-color: $gray-600 !default;
|
||||
$pagination-hover-bg: $gray-300 !default;
|
||||
$pagination-hover-border-color: $gray-300 !default;
|
||||
|
||||
$pagination-active-color: $component-active-color !default;
|
||||
$pagination-active-bg: $component-active-bg !default;
|
||||
$pagination-active-border-color: $pagination-active-bg !default;
|
||||
$pagination-active-box-shadow: $btn-hover-box-shadow !default;
|
||||
|
||||
$pagination-disabled-color: $gray-600 !default;
|
||||
$pagination-disabled-bg: transparent !default;
|
||||
$pagination-disabled-border-color: $gray-300 !default;
|
||||
|
||||
|
||||
// Cards
|
||||
|
||||
$card-spacer-y: 1.25rem !default;
|
||||
$card-spacer-x: 1.5rem !default;
|
||||
$card-border-width: $border-width !default;
|
||||
$card-border-radius: $border-radius-sm !default;
|
||||
$card-border-color: rgba($black, .05);
|
||||
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width});
|
||||
$card-cap-bg: $gray-100 !default;
|
||||
$card-bg: $white !default;
|
||||
$card-black-background: #27293d !default;
|
||||
$card-img-overlay-padding: 1.25rem !default;
|
||||
|
||||
//$card-group-margin: ($grid-gutter-width / 2);
|
||||
//$card-deck-margin: $card-group-margin !default;
|
||||
|
||||
$card-columns-count: 3 !default;
|
||||
$card-columns-gap: 1.25rem !default;
|
||||
$card-columns-margin: $card-spacer-y !default;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-font-size: $font-size-sm !default;
|
||||
$tooltip-max-width: 200px !default;
|
||||
$tooltip-color: $black !default;
|
||||
$tooltip-bg: $white !default;
|
||||
$tooltip-border-radius: $border-radius !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
$tooltip-padding-y: .25rem !default;
|
||||
$tooltip-padding-x: .5rem !default;
|
||||
$tooltip-margin: 0 !default;
|
||||
|
||||
$tooltip-arrow-width: .8rem !default;
|
||||
$tooltip-arrow-height: .4rem !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-inner-padding: 24px 24px 16px 24px !default;
|
||||
|
||||
$modal-lg: 800px !default;
|
||||
$modal-md: 500px !default;
|
||||
$modal-sm: 380px !default;
|
||||
$modal-title-line-height: 1.1;
|
||||
$modal-content-bg: $white !default;
|
||||
$modal-content-border-color: rgba($black, .2);
|
||||
$modal-content-border-width: 1px !default;
|
||||
$modal-content-border-radius: $border-radius-sm !default;
|
||||
$modal-content-box-shadow-xs: 0px 10px 50px 0px rgba(0, 0, 0, 0.5);
|
||||
$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);
|
||||
|
||||
$modal-backdrop-bg: $black !default;
|
||||
$modal-backdrop-opacity: .16 !default;
|
||||
$modal-header-border-color: $gray-200 !default;
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
$modal-header-border-width: $modal-content-border-width !default;
|
||||
$modal-footer-border-width: $modal-header-border-width !default;
|
||||
$modal-header-padding: 24px 24px 0 24px !default;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: .5rem !default;
|
||||
$progress-bg: rgba(0, 0, 0, 0.3) !default;
|
||||
$progress-border-radius: $border-radius-xl !default;
|
||||
$progress-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.3) !default;
|
||||
$progress-bar-color: $white !default;
|
||||
|
||||
// Datepicker
|
||||
|
||||
$datepicker-border-radius: $card-border-radius !default;
|
||||
$datepicker-dropdown-padding: 20px 22px !default;
|
||||
|
||||
$datepicker-cell-transition: $transition-base !default;
|
||||
$datepicker-cell-hover-background: lighten($gray-400, 55%);
|
||||
$datepicker-cell-border-radius: 50% !default;
|
||||
$datepicker-cell-width: 36px !default;
|
||||
$datepicker-cell-height: 36px !default;
|
||||
|
||||
$datepicker-disabled-cell-color: $gray-300 !default;
|
||||
$datepicker-disabled-old-new-color: $gray-500 !default;
|
||||
|
||||
$datepicker-header-cell-border-radius: $border-radius !default;
|
||||
|
||||
$datepicker-active-color: $white !default;
|
||||
$datepicker-active-background: theme-color("primary") !default;
|
||||
$datepicker-active-box-shadow: none !default;
|
||||
|
||||
$datepicker-range-background: theme-color("primary") !default;
|
||||
$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%);
|
||||
$datepicker-range-color: $white !default;
|
||||
$datepicker-range-highlighted-bg: $gray-200 !default;
|
||||
|
||||
$datepicker-dropdown-border: lighten($gray-400, 40%);
|
||||
$datepicker-dropdown-bg: $white !default;
|
||||
$datepicker-highlighted-bg: $datepicker-active-background !default;
|
||||
|
||||
// Sidebar
|
||||
|
||||
$sidebar-width: 260px;
|
||||
$sidebar-transition: .5s cubic-bezier(0.685, 0.0473, 0.346, 1);
|
||||
$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35);
|
||||
|
||||
// Footer
|
||||
|
||||
$footer-link-font-size: .85rem !default;
|
||||
$footer-bg: theme-color("secondary") !default;
|
||||
$footer-color: $gray-600 !default;
|
||||
$footer-link-color: $gray-600 !default;
|
||||
$footer-link-hover-color: $gray-700 !default;
|
||||
$footer-heading-color: $gray-600 !default;
|
||||
$footer-heading-font-size: $font-size-sm !default;
|
||||
359
APP/assets/sass/dashboard/custom/_white-content.scss
Normal file
359
APP/assets/sass/dashboard/custom/_white-content.scss
Normal file
@@ -0,0 +1,359 @@
|
||||
.white-content{
|
||||
|
||||
background: $light-bg;
|
||||
|
||||
.navbar.navbar-transparent .navbar-brand{
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.navbar.navbar-transparent .navbar-toggler-bar{
|
||||
background: $black-states;
|
||||
}
|
||||
.navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item){
|
||||
color: $black-states;
|
||||
& i{
|
||||
color: $black-states;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.navbar-transparent .navbar-minimize button i{
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.navbar.navbar-transparent .search-bar.input-group i{
|
||||
color: $black-states;
|
||||
}
|
||||
.navbar.navbar-transparent .search-bar.input-group .form-control{
|
||||
color: $default;
|
||||
&::placeholder{
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar{
|
||||
box-shadow: 0 2px 22px 0 rgba(0,0,0,.1), 0 4px 20px 0 rgba(0,0,0,.15);
|
||||
p{
|
||||
color: $opacity-8;
|
||||
}
|
||||
}
|
||||
|
||||
.main-panel{
|
||||
background: $light-bg;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre {
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.font-icon-detail i{
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.btn:not([data-action]):hover{
|
||||
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
.btn-neutral.btn-link{
|
||||
color: rgba($black, 0.7);
|
||||
}
|
||||
|
||||
//style for inputs
|
||||
|
||||
@include form-control-placeholder(rgba($black,0.4), 1);
|
||||
.has-danger{
|
||||
.form-control, .input-group-prepend .input-group-text{
|
||||
border-color: $danger-states;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text{
|
||||
border-color: rgba($black-states,0.5);
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
color: $black;
|
||||
border-color: rgba($black-states,0.5);
|
||||
&:focus{
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control,
|
||||
.form-control + .input-group-prepend .input-group-text,
|
||||
.form-control + .input-group-append .input-group-text,
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $opacity-gray-3;
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active{
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
&:focus{
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
|
||||
background-color: $transparent-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.input-group[disabled]{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
|
||||
background: $light-gray;
|
||||
border-color: rgba($black-states,0.3);
|
||||
}
|
||||
|
||||
.input-group-focus{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text,
|
||||
.form-control{
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&.no-border{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
|
||||
background-color: $opacity-gray-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-group-prepend .input-group-text {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.input-group-append .input-group-text {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
|
||||
border-color: $danger-states;
|
||||
}
|
||||
|
||||
.has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
|
||||
border-color: darken($success, 10%);
|
||||
}
|
||||
|
||||
.btn.btn-link{
|
||||
&:hover,&:active, &:focus{
|
||||
color: $dark-gray !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group .btn.active{
|
||||
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{
|
||||
background: darken($light-bg,10%);
|
||||
}
|
||||
|
||||
.bootstrap-switch-off:before{
|
||||
background: rgba(darken($light-bg,10%),0.5);
|
||||
|
||||
}
|
||||
|
||||
.card:not(.card-white){
|
||||
background: $white;
|
||||
box-shadow: 0 1px 15px 0 rgba(123, 123, 123, 0.05);
|
||||
.card-header{
|
||||
color: $black;
|
||||
a[data-toggle="collapse"]{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
.card-header .card-title, .card-body .card-title{
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.card-body{
|
||||
.card-category, .card-description{
|
||||
color: $black-states;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
label:not(.btn){
|
||||
color: $default;
|
||||
}
|
||||
|
||||
.pagination .page-item:not(.active) .page-link{
|
||||
color: $black-states;
|
||||
&:hover{
|
||||
background: rgba($dark-gray,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-pills .nav-item .nav-link {
|
||||
color: $nav-gray;
|
||||
background-color: hsla(0,0%,87%,.3);
|
||||
&:not(.active):hover{
|
||||
background: hsla(0,0%,87%,.5);
|
||||
}
|
||||
&.active{
|
||||
color: $white;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content .tab-pane {
|
||||
color: $nav-gray;
|
||||
}
|
||||
|
||||
|
||||
.card{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card-collapse{
|
||||
.card{
|
||||
.card-body{
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-contributions{
|
||||
span{
|
||||
color: $dark-gray;
|
||||
}
|
||||
.bootstrap-switch-container{
|
||||
span{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.card-plain{
|
||||
background: $transparent-bg;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table{
|
||||
|
||||
> tbody > tr > td {
|
||||
color: rgba($black, 0.7) !important;
|
||||
|
||||
}
|
||||
|
||||
> thead > tr > th,
|
||||
> tbody > tr > th,
|
||||
> tfoot > tr > th,
|
||||
> thead > tr > td,
|
||||
> tbody > tr > td,
|
||||
> tfoot > tr > td{
|
||||
border-color: rgba($black, 0.2);
|
||||
padding: 12px 7px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> thead > tr > th, button.btn-neutral.btn-link{
|
||||
color: rgba($black, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.footer ul li a{
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.footer .copyright{
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.progress-container, .progress-container.progress.sm{
|
||||
.progress{
|
||||
background: rgba($black,0.1);
|
||||
box-shadow: 0 0 0 3px rgba($black,0.1);
|
||||
.progress-value{
|
||||
color: $default;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-badge{
|
||||
color: $black-states;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-select button.dropdown-toggle{
|
||||
border-color: rgba($black-states,0.5);
|
||||
.filter-option{
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
&:after{
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//style for calendar
|
||||
|
||||
.fc-basic-view .fc-day-number, .fc-basic-view .fc-week-number {
|
||||
padding: 2px;
|
||||
color: $default;
|
||||
}
|
||||
|
||||
.fc-unthemed .fc-today{
|
||||
background: darken($light-bg,10%);
|
||||
}
|
||||
|
||||
.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
|
||||
border-color: $calendar-gray;
|
||||
}
|
||||
|
||||
.fc-prev-button, .fc-next-button{
|
||||
color: $default;
|
||||
&:hover{
|
||||
color: $default;
|
||||
}
|
||||
}
|
||||
|
||||
.fc button.btn-primary:not([data-action]):hover, .fc button:not([data-action]):hover {
|
||||
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
.full-page{
|
||||
background: $light-bg;
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre {
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.description{
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.footer ul li a{
|
||||
color: $black-states;
|
||||
}
|
||||
|
||||
.footer .copyright{
|
||||
color: $black-states;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills .nav-item .nav-link:not(.active){
|
||||
background: darken($light-bg,10%);
|
||||
color: $black-states;
|
||||
&:hover{
|
||||
background: darken($white,20%);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
84
APP/assets/sass/dashboard/custom/cards/_card-chart.scss
Normal file
84
APP/assets/sass/dashboard/custom/cards/_card-chart.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
.card-chart {
|
||||
overflow: hidden;
|
||||
.card-header{
|
||||
.card-title{
|
||||
i{
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
.card-category{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.card-body{
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
.tab-space{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.table{
|
||||
margin-bottom: 0;
|
||||
|
||||
td{
|
||||
border-top: none;
|
||||
border-bottom: 1px solid rgba($white,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.card-progress {
|
||||
margin-top: 30px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.chart-area {
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
}
|
||||
.card-footer {
|
||||
margin-top: 15px;
|
||||
|
||||
.stats{
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
|
||||
.btn{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-chart-pie{
|
||||
.chart-area{
|
||||
padding: 10px 0 25px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
margin-bottom: 10px;
|
||||
i{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.card.card-chart {
|
||||
.card-header .btn-group-toggle {
|
||||
.tim-icons {
|
||||
font-size: $font-size-base;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
3
APP/assets/sass/dashboard/custom/cards/_card-map.scss
Normal file
3
APP/assets/sass/dashboard/custom/cards/_card-map.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.map{
|
||||
height: 500px;
|
||||
}
|
||||
16
APP/assets/sass/dashboard/custom/cards/_card-plain.scss
Normal file
16
APP/assets/sass/dashboard/custom/cards/_card-plain.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
.card-plain {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not(.card-subcategories).card-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
49
APP/assets/sass/dashboard/custom/cards/_card-profile.scss
Normal file
49
APP/assets/sass/dashboard/custom/cards/_card-profile.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
%card-profile{
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
|
||||
.card-body .card-title{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
[class*=col-]{
|
||||
.card-description{
|
||||
margin-bottom: 0;
|
||||
|
||||
& + .card-footer{
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.card-header-avatar{
|
||||
max-width: 130px;
|
||||
max-height: 130px;
|
||||
margin: -60px auto 0;
|
||||
|
||||
img{
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
& + .card-body{
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.card-plain{
|
||||
.card-header-avatar{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.card-body{
|
||||
.card-avatar{
|
||||
margin: 0 auto 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-profile{
|
||||
@extend %card-profile;
|
||||
}
|
||||
77
APP/assets/sass/dashboard/custom/cards/_card-user.scss
Normal file
77
APP/assets/sass/dashboard/custom/cards/_card-user.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
.card-user{
|
||||
overflow: hidden;
|
||||
.image{
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.author{
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
margin-top: 25px;
|
||||
|
||||
a + p.description{
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.block{
|
||||
position: absolute;
|
||||
height: 100px;
|
||||
width: 250px;
|
||||
&.block-one{
|
||||
@include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
|
||||
@include nc-rotate(150deg,10);
|
||||
margin-top: -90px;
|
||||
margin-left: -50px;
|
||||
}
|
||||
|
||||
&.block-two{
|
||||
@include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
|
||||
@include nc-rotate(30deg,10);
|
||||
margin-top: -40px;
|
||||
margin-left: -100px;
|
||||
}
|
||||
|
||||
&.block-three{
|
||||
@include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
|
||||
@include nc-rotate(170deg,10);
|
||||
margin-top: -70px;
|
||||
right: -45px;
|
||||
|
||||
}
|
||||
|
||||
&.block-four{
|
||||
@include linear-gradient-right(rgba($primary,0.6), rgba($primary,0));
|
||||
@include nc-rotate(150deg,10);
|
||||
margin-top: -25px;
|
||||
right: -45px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar{
|
||||
width: 124px;
|
||||
height: 124px;
|
||||
border: 5px solid lighten($black,5%);
|
||||
border-bottom-color: $transparent-bg;
|
||||
background-color: $transparent-bg;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-body{
|
||||
min-height: 240px;
|
||||
}
|
||||
|
||||
hr{
|
||||
margin: 5px 15px;
|
||||
}
|
||||
|
||||
.button-container{
|
||||
margin-bottom: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
14
APP/assets/sass/dashboard/custom/mixins/_alert.scss
Normal file
14
APP/assets/sass/dashboard/custom/mixins/_alert.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
@mixin alert-variant($background, $border, $color) {
|
||||
color: color-yiq($background);
|
||||
// @include gradient-bg($background);
|
||||
background-color: lighten($background, 5%);
|
||||
border-color: $border;
|
||||
|
||||
hr {
|
||||
border-top-color: darken($border, 5%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
// Contextual backgrounds
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent},
|
||||
button#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-gradient-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
|
||||
}
|
||||
}
|
||||
15
APP/assets/sass/dashboard/custom/mixins/_badges.scss
Normal file
15
APP/assets/sass/dashboard/custom/mixins/_badges.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@mixin badge-variant($bg) {
|
||||
color: color-yiq($bg);
|
||||
background-color: $bg;
|
||||
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
color: color-yiq($bg);
|
||||
text-decoration: none;
|
||||
background-color: darken($bg, 3%);
|
||||
}
|
||||
}
|
||||
.tagsinput-remove-link{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
343
APP/assets/sass/dashboard/custom/mixins/_buttons.scss
Normal file
343
APP/assets/sass/dashboard/custom/mixins/_buttons.scss
Normal file
@@ -0,0 +1,343 @@
|
||||
@mixin btn-styles($btn-color, $btn-states-color) {
|
||||
@include diagonal-gradient($btn-color, $btn-states-color);
|
||||
background-color: $btn-color;
|
||||
transition: all 0.15s ease;
|
||||
box-shadow: none;
|
||||
&.animation-on-hover:hover{
|
||||
background-position: bottom left;
|
||||
transition:0.3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover
|
||||
{
|
||||
background-color: $btn-states-color !important;
|
||||
background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
color: $white;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active{
|
||||
box-shadow: none !important;
|
||||
transform: translateY(1px) !important;
|
||||
transition: all .15s ease;
|
||||
}
|
||||
|
||||
&:not([data-action]):hover{
|
||||
|
||||
box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
|
||||
transform: translateY(-1px);
|
||||
-webkit-transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
}
|
||||
}
|
||||
|
||||
// btn-neutral style
|
||||
@if $btn-color == $white{
|
||||
color: $primary;
|
||||
|
||||
&.btn-danger{
|
||||
color: $danger;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $danger-states;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-info{
|
||||
color: $info;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $info-states;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-warning{
|
||||
color: $warning;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $warning-states;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-success{
|
||||
color: $success;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $success-states;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-default{
|
||||
color: $default;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active:focus{
|
||||
color: $default-states;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:active:focus,
|
||||
&:active:hover,
|
||||
&.active:focus,
|
||||
&.active:hover,
|
||||
.show > &.dropdown-toggle,
|
||||
.show > &.dropdown-toggle:focus,
|
||||
.show > &.dropdown-toggle:hover {
|
||||
background-color: $white;
|
||||
color: $primary-states;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
color: $primary-states;
|
||||
|
||||
&:not(.nav-link){
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} @else {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.btn-simple{
|
||||
color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
background: $transparent-bg;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:not(:disabled):not(.disabled):active{
|
||||
color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
background-color: $transparent-bg !important;
|
||||
background-image: none !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.active{
|
||||
border-color: $btn-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&:not(:disabled):not(.disabled):active{
|
||||
color: $white;
|
||||
border-color: $btn-color;
|
||||
background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important;
|
||||
background-color: $btn-states-color !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-link{
|
||||
color: $btn-color;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
background-color: $transparent-bg !important;
|
||||
background-image: none !important;
|
||||
color: $white !important;
|
||||
text-decoration: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
|
||||
color: color-yiq($background);
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
@include hover {
|
||||
color: color-yiq($hover-background);
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
|
||||
}
|
||||
@else {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
|
||||
}
|
||||
} // Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: color-yiq($background);
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show>&.dropdown-toggle {
|
||||
color: color-yiq($active-background);
|
||||
background-color: $active-background;
|
||||
@if $enable-gradients {
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
}
|
||||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
|
||||
}
|
||||
@else {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $color;
|
||||
|
||||
&:hover {
|
||||
color: $color-hover;
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show>&.dropdown-toggle {
|
||||
color: color-yiq($active-background);
|
||||
background-color: $active-background;
|
||||
border-color: $active-border;
|
||||
|
||||
&:focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows and $btn-active-box-shadow !=none {
|
||||
box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
}
|
||||
@else {
|
||||
box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){
|
||||
font-size: $font-size;
|
||||
border-radius: $border;
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
&.btn-simple{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// for social buttons
|
||||
@mixin social-buttons-color ($color, $state-color){
|
||||
@include diagonal-gradient($color, darken($color,20%));
|
||||
//background-color: $color;
|
||||
color: $white;
|
||||
background-size: 210% 210%;
|
||||
background-position: top right;
|
||||
background-repeat: space;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover{
|
||||
background-color: $state-color;
|
||||
background-image: linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
|
||||
background-image: -webkit-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
|
||||
background-image: -o-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
|
||||
background-image: -moz-linear-gradient(to bottom left, $color, darken($color,20%), $color) !important;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.btn-simple{
|
||||
color: $state-color;
|
||||
background-color: $transparent-bg;
|
||||
background-image: none !important;
|
||||
box-shadow: none;
|
||||
border-color: $state-color;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
color: $state-color;
|
||||
border-color: $state-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-neutral{
|
||||
color: $color;
|
||||
background-color: $white;
|
||||
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active{
|
||||
color: $state-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
APP/assets/sass/dashboard/custom/mixins/_dropdown.scss
Normal file
26
APP/assets/sass/dashboard/custom/mixins/_dropdown.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) {
|
||||
background-color: $brand-color;
|
||||
|
||||
&:before{
|
||||
color: $brand-color;
|
||||
}
|
||||
|
||||
.dropdown-header:not([href]):not([tabindex]){
|
||||
color: $dropdown-header-color;
|
||||
}
|
||||
|
||||
.dropdown-item{
|
||||
color: $dropdown-color;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: $background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider{
|
||||
background-color: $background-color;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
127
APP/assets/sass/dashboard/custom/mixins/_forms.scss
Normal file
127
APP/assets/sass/dashboard/custom/mixins/_forms.scss
Normal file
@@ -0,0 +1,127 @@
|
||||
@mixin form-control-focus() {
|
||||
&:focus {
|
||||
color: $input-focus-color;
|
||||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
outline: 0;
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $input-box-shadow, $input-focus-box-shadow;
|
||||
} @else {
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin form-validation-state($state, $color) {
|
||||
.#{$state}-feedback {
|
||||
display: none;
|
||||
width: 100%;
|
||||
margin-top: $form-feedback-margin-top;
|
||||
font-size: $form-feedback-font-size;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.#{$state}-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 5;
|
||||
display: none;
|
||||
max-width: 100%; // Contain to parent when possible
|
||||
padding: .5rem;
|
||||
margin-top: .1rem;
|
||||
font-size: .875rem;
|
||||
line-height: 1;
|
||||
color: $white;
|
||||
background-color: rgba($color, .8);
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.form-control,
|
||||
.custom-select {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
border-color: $color;
|
||||
|
||||
&:focus {
|
||||
border-color: $color;
|
||||
//box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .form-check-label {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .custom-control-label {
|
||||
color: $color;
|
||||
|
||||
&::before {
|
||||
background-color: lighten($color, 25%);
|
||||
border-color: lighten($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .custom-control-label::before {
|
||||
@include gradient-bg(lighten($color, 10%));
|
||||
border-color: lighten($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// custom file
|
||||
.custom-file-input {
|
||||
.was-validated &:#{$state},
|
||||
&.is-#{$state} {
|
||||
~ .custom-file-label {
|
||||
border-color: $color;
|
||||
|
||||
&::before { border-color: inherit; }
|
||||
}
|
||||
|
||||
~ .#{$state}-feedback,
|
||||
~ .#{$state}-tooltip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
~ .custom-file-label {
|
||||
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
APP/assets/sass/dashboard/custom/mixins/_icon.scss
Normal file
4
APP/assets/sass/dashboard/custom/mixins/_icon.scss
Normal file
@@ -0,0 +1,4 @@
|
||||
@mixin icon-shape-variant($color) {
|
||||
color: saturate(darken($color, 10%), 10);
|
||||
background-color: transparentize(lighten($color, 10%), .5);
|
||||
}
|
||||
234
APP/assets/sass/dashboard/custom/mixins/_inputs.scss
Normal file
234
APP/assets/sass/dashboard/custom/mixins/_inputs.scss
Normal file
@@ -0,0 +1,234 @@
|
||||
@mixin input-size($padding-vertical, $padding-horizontal){
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
@mixin form-control-placeholder($color, $opacity){
|
||||
.form-control::-moz-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control:-moz-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control::-webkit-input-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
.form-control:-ms-input-placeholder{
|
||||
color: $color;
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin placeholder() {
|
||||
&::-moz-placeholder {@content; } // Firefox
|
||||
&:-ms-input-placeholder {@content; } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder {@content; } // Safari and Chrome
|
||||
}
|
||||
|
||||
@mixin light-form(){
|
||||
border-radius: 0;
|
||||
border:0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin form-control-lg-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.no-border.form-control-lg,
|
||||
.input-group.no-border.form-control-lg{
|
||||
.input-group-append .input-group-text{
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.form-control-lg,
|
||||
.input-group.form-control-lg{
|
||||
.form-control{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1;
|
||||
height: 100%;
|
||||
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1;
|
||||
|
||||
& + .form-control{
|
||||
padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@mixin input-base-padding($padding-vertical, $padding-horizontal) {
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control{
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
padding: $padding-vertical $padding-horizontal $padding-vertical 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
padding: $padding-vertical 0 $padding-vertical $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group,
|
||||
.input-group{
|
||||
.form-control{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1;
|
||||
|
||||
& + .form-control,
|
||||
& ~ .form-control{
|
||||
padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//color1 = $opacity-5
|
||||
//color2 = $opacity-8
|
||||
//color3 = $white-color
|
||||
//color4 = $transparent-bg
|
||||
//color5 = $opacity-1
|
||||
//color6 = $opacity-2
|
||||
|
||||
|
||||
@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) {
|
||||
@include form-control-placeholder(rgba($white, 0.4), 1);
|
||||
|
||||
.form-control{
|
||||
border-color: $color1;
|
||||
color: $color2;
|
||||
|
||||
&:focus{
|
||||
border-color: $color3;
|
||||
background-color: $color4;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.has-success,
|
||||
.has-danger{
|
||||
&:after{
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.has-danger{
|
||||
.form-control{
|
||||
background-color: $color4;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.2);
|
||||
border-color: $color1;
|
||||
color: $color2;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.input-group-focus{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.3);
|
||||
border-color: $color3;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group.no-border,
|
||||
.input-group.no-border{
|
||||
.form-control{
|
||||
background-color: rgba($background-black,0.2);
|
||||
color: $color2;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active{
|
||||
background-color: rgba($background-black,0.3);
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control + .input-group-prepend .input-group-text,
|
||||
.form-control + .input-group-append .input-group-text{
|
||||
background-color: rgba($background-black,0.2);;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:active{
|
||||
background-color: rgba($background-black,0.3);
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
&:focus{
|
||||
& + .input-group-prepend .input-group-text,
|
||||
& + .input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.3);
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.2);
|
||||
border: none;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
&.input-group-focus{
|
||||
.input-group-prepend .input-group-text,
|
||||
.input-group-append .input-group-text{
|
||||
background-color: rgba($background-black, 0.3);
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
15
APP/assets/sass/dashboard/custom/mixins/_modals.scss
Normal file
15
APP/assets/sass/dashboard/custom/mixins/_modals.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@mixin modal-colors($bg-color, $color) {
|
||||
.modal-content{
|
||||
background-color: $bg-color;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.modal-body p{
|
||||
color: rgba($white, 0.8);
|
||||
}
|
||||
|
||||
//inputs
|
||||
@include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2);
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
@mixin linear-gradient($color1, $color2){
|
||||
background: $color1; /* For browsers that do not support gradients */
|
||||
background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */
|
||||
background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */
|
||||
background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */
|
||||
background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */
|
||||
}
|
||||
41
APP/assets/sass/dashboard/custom/mixins/_popovers.scss
Normal file
41
APP/assets/sass/dashboard/custom/mixins/_popovers.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
@mixin popover-variant($background) {
|
||||
background-color: $background;
|
||||
|
||||
.popover-header {
|
||||
background-color: $background;
|
||||
color: color-yiq($background);
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
color: color-yiq($background);
|
||||
}
|
||||
|
||||
.popover-header{
|
||||
border-color: rgba(color-yiq($background), .2);
|
||||
}
|
||||
|
||||
&.bs-popover-top {
|
||||
.arrow::after {
|
||||
border-top-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-popover-right {
|
||||
.arrow::after {
|
||||
border-right-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-popover-bottom {
|
||||
.arrow::after {
|
||||
border-bottom-color: $background;
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-popover-left {
|
||||
.arrow::after {
|
||||
border-left-color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
202
APP/assets/sass/dashboard/custom/mixins/_vendor-prefixes.scss
Normal file
202
APP/assets/sass/dashboard/custom/mixins/_vendor-prefixes.scss
Normal file
@@ -0,0 +1,202 @@
|
||||
|
||||
@mixin transform-translate-x($value){
|
||||
-webkit-transform: translate3d($value, 0, 0);
|
||||
-moz-transform: translate3d($value, 0, 0);
|
||||
-o-transform: translate3d($value, 0, 0);
|
||||
-ms-transform: translate3d($value, 0, 0);
|
||||
transform: translate3d($value, 0, 0);
|
||||
}
|
||||
|
||||
@mixin transform-translate-y($value){
|
||||
-webkit-transform: translate3d(0,$value,0);
|
||||
-moz-transform: translate3d(0,$value,0);
|
||||
-o-transform: translate3d(0,$value,0);
|
||||
-ms-transform: translate3d(0,$value,0);
|
||||
transform: translate3d(0,$value,0);
|
||||
}
|
||||
|
||||
@mixin transitions($time, $type){
|
||||
-webkit-transition: all $time $type;
|
||||
-moz-transition: all $time $type;
|
||||
-o-transition: all $time $type;
|
||||
-ms-transition: all $time $type;
|
||||
transition: all $time $type;
|
||||
}
|
||||
|
||||
@mixin diagonal-gradient($start-color, $end-color){
|
||||
background: $start-color;
|
||||
background-image: -webkit-linear-gradient(to bottom left, $start-color, $end-color, $start-color);
|
||||
background-image: -o-linear-gradient(to bottom left, $start-color, $end-color, $start-color);
|
||||
background-image: -moz-linear-gradient(to bottom left, $start-color, $end-color, $start-color);
|
||||
background-image: linear-gradient(to bottom left, $start-color, $end-color, $start-color);
|
||||
background-size: 210% 210%;
|
||||
background-position: top right;
|
||||
}
|
||||
|
||||
@mixin bar-animation($type){
|
||||
-webkit-animation: $type 500ms linear 0s;
|
||||
-moz-animation: $type 500ms linear 0s;
|
||||
animation: $type 500ms 0s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
@mixin rotate-180(){
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@mixin transform-translate-y-dropdown($value) {
|
||||
-webkit-transform: translate3d(0,$value,0) !important;
|
||||
-moz-transform: translate3d(0,$value,0) !important;
|
||||
-o-transform: translate3d(0,$value,0) !important;
|
||||
-ms-transform: translate3d(0,$value,0) !important;
|
||||
transform: translate3d(0,$value,0) !important;
|
||||
}
|
||||
|
||||
@mixin linear-gradient($color, $states-color){
|
||||
background: $color;
|
||||
background: -webkit-linear-gradient(0deg, $color 0%, $states-color 100%);
|
||||
background: -o-linear-gradient(0deg, $color 0%, $states-color 100%);
|
||||
background: -moz-linear-gradient(0deg, $color 0%, $states-color 100%);
|
||||
background: linear-gradient(0deg, $color 0%, $states-color 100%);
|
||||
}
|
||||
|
||||
@mixin linear-gradient-right($color, $states-color){
|
||||
background: $color;
|
||||
background: -webkit-linear-gradient(to right, $color 0%, $states-color 100%);
|
||||
background: -o-linear-gradient(to right, $color 0%, $states-color 100%);
|
||||
background: -moz-linear-gradient(to right, $color 0%, $states-color 100%);
|
||||
background: linear-gradient(to right, $color 0%, $states-color 100%);
|
||||
}
|
||||
|
||||
@mixin sidebar-color($color){
|
||||
&:after{
|
||||
background: $color;
|
||||
}
|
||||
|
||||
.nav li.active > a{
|
||||
color: $color;
|
||||
|
||||
i{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition-input-focus-color() {
|
||||
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@mixin topbar-x-rotation(){
|
||||
@keyframes topbar-x {
|
||||
0% {top: 0px; transform: rotate(0deg); }
|
||||
45% {top: 6px; transform: rotate(145deg); }
|
||||
75% {transform: rotate(130deg); }
|
||||
100% {transform: rotate(135deg); }
|
||||
}
|
||||
@-webkit-keyframes topbar-x {
|
||||
0% {top: 0px; -webkit-transform: rotate(0deg); }
|
||||
45% {top: 6px; -webkit-transform: rotate(145deg); }
|
||||
75% {-webkit-transform: rotate(130deg); }
|
||||
100% { -webkit-transform: rotate(135deg); }
|
||||
}
|
||||
@-moz-keyframes topbar-x {
|
||||
0% {top: 0px; -moz-transform: rotate(0deg); }
|
||||
45% {top: 6px; -moz-transform: rotate(145deg); }
|
||||
75% {-moz-transform: rotate(130deg); }
|
||||
100% { -moz-transform: rotate(135deg); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin topbar-back-rotation(){
|
||||
@keyframes topbar-back {
|
||||
0% { top: 6px; transform: rotate(135deg); }
|
||||
45% { transform: rotate(-10deg); }
|
||||
75% { transform: rotate(5deg); }
|
||||
100% { top: 0px; transform: rotate(0); }
|
||||
}
|
||||
|
||||
@-webkit-keyframes topbar-back {
|
||||
0% { top: 6px; -webkit-transform: rotate(135deg); }
|
||||
45% { -webkit-transform: rotate(-10deg); }
|
||||
75% { -webkit-transform: rotate(5deg); }
|
||||
100% { top: 0px; -webkit-transform: rotate(0); }
|
||||
}
|
||||
|
||||
@-moz-keyframes topbar-back {
|
||||
0% { top: 6px; -moz-transform: rotate(135deg); }
|
||||
45% { -moz-transform: rotate(-10deg); }
|
||||
75% { -moz-transform: rotate(5deg); }
|
||||
100% { top: 0px; -moz-transform: rotate(0); }
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-x-rotation(){
|
||||
@keyframes bottombar-x {
|
||||
0% {bottom: 0px; transform: rotate(0deg);}
|
||||
45% {bottom: 6px; transform: rotate(-145deg);}
|
||||
75% {transform: rotate(-130deg);}
|
||||
100% {transform: rotate(-135deg);}
|
||||
}
|
||||
@-webkit-keyframes bottombar-x {
|
||||
0% {bottom: 0px; -webkit-transform: rotate(0deg);}
|
||||
45% {bottom: 6px; -webkit-transform: rotate(-145deg);}
|
||||
75% {-webkit-transform: rotate(-130deg);}
|
||||
100% {-webkit-transform: rotate(-135deg);}
|
||||
}
|
||||
@-moz-keyframes bottombar-x {
|
||||
0% {bottom: 0px; -moz-transform: rotate(0deg);}
|
||||
45% {bottom: 6px; -moz-transform: rotate(-145deg);}
|
||||
75% {-moz-transform: rotate(-130deg);}
|
||||
100% {-moz-transform: rotate(-135deg);}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bottombar-back-rotation{
|
||||
@keyframes bottombar-back {
|
||||
0% { bottom: 6px;transform: rotate(-135deg);}
|
||||
45% { transform: rotate(10deg);}
|
||||
75% { transform: rotate(-5deg);}
|
||||
100% { bottom: 0px;transform: rotate(0);}
|
||||
}
|
||||
@-webkit-keyframes bottombar-back {
|
||||
0% {bottom: 6px;-webkit-transform: rotate(-135deg);}
|
||||
45% {-webkit-transform: rotate(10deg);}
|
||||
75% {-webkit-transform: rotate(-5deg);}
|
||||
100% {bottom: 0px;-webkit-transform: rotate(0);}
|
||||
}
|
||||
@-moz-keyframes bottombar-back {
|
||||
0% {bottom: 6px;-moz-transform: rotate(-135deg);}
|
||||
45% {-moz-transform: rotate(10deg);}
|
||||
75% {-moz-transform: rotate(-5deg);}
|
||||
100% {bottom: 0px;-moz-transform: rotate(0);}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@mixin nc-rotate($degrees, $rotation) {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
|
||||
-webkit-transform: rotate($degrees);
|
||||
-moz-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees);
|
||||
-o-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
|
||||
@mixin nc-flip($horiz, $vert, $rotation) {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
|
||||
-webkit-transform: scale($horiz, $vert);
|
||||
-moz-transform: scale($horiz, $vert);
|
||||
-ms-transform: scale($horiz, $vert);
|
||||
-o-transform: scale($horiz, $vert);
|
||||
transform: scale($horiz, $vert);
|
||||
}
|
||||
8
APP/assets/sass/dashboard/custom/mixins/opacity.scss
Normal file
8
APP/assets/sass/dashboard/custom/mixins/opacity.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
// Opacity
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
opacity: $opacity;
|
||||
// IE8 filter
|
||||
$opacity-ie: ($opacity * 100);
|
||||
filter: #{alpha(opacity=$opacity-ie)};
|
||||
}
|
||||
42
APP/assets/sass/dashboard/custom/utilities/_backgrounds.scss
Normal file
42
APP/assets/sass/dashboard/custom/utilities/_backgrounds.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
@each $color, $value in $colors {
|
||||
@include bg-variant(".bg-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
}
|
||||
|
||||
|
||||
// Sections
|
||||
|
||||
section {
|
||||
//background-color: section-color("primary");
|
||||
}
|
||||
|
||||
@each $color, $value in $section-colors {
|
||||
@include bg-variant(".section-#{$color}", $value);
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
|
||||
}
|
||||
|
||||
|
||||
// Shape (svg) fill colors
|
||||
@each $color, $value in $theme-colors {
|
||||
.fill-#{$color} {
|
||||
fill: $value;
|
||||
}
|
||||
|
||||
.stroke-#{$color} {
|
||||
stroke: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-opacity-8 {
|
||||
fill-opacity: .8;
|
||||
}
|
||||
54
APP/assets/sass/dashboard/custom/utilities/_floating.scss
Normal file
54
APP/assets/sass/dashboard/custom/utilities/_floating.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.floating {
|
||||
animation: floating 3s ease infinite;
|
||||
will-change: transform;
|
||||
|
||||
&:hover {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.floating-lg {
|
||||
animation: floating-lg 3s ease infinite;
|
||||
}
|
||||
|
||||
.floating-sm {
|
||||
animation: floating-sm 3s ease infinite;
|
||||
}
|
||||
|
||||
// Keyframes
|
||||
|
||||
@keyframes floating-lg {
|
||||
0% {
|
||||
transform: translateY(0px)
|
||||
}
|
||||
50% {
|
||||
transform: translateY(15px)
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floating {
|
||||
0% {
|
||||
transform: translateY(0px)
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10px)
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes floating-sm {
|
||||
0% {
|
||||
transform: translateY(0px)
|
||||
}
|
||||
50% {
|
||||
transform: translateY(5px)
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px)
|
||||
}
|
||||
}
|
||||
62
APP/assets/sass/dashboard/custom/utilities/_helper.scss
Normal file
62
APP/assets/sass/dashboard/custom/utilities/_helper.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
// Image
|
||||
|
||||
.img-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Clearfix
|
||||
|
||||
.floatfix {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Overflows
|
||||
|
||||
.overflow-visible {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
// Opacity classes
|
||||
|
||||
.opacity-1 {
|
||||
opacity: .1 !important;
|
||||
}
|
||||
.opacity-2 {
|
||||
opacity: .2 !important;
|
||||
}
|
||||
.opacity-3 {
|
||||
opacity: .3 !important;
|
||||
}
|
||||
.opacity-4 {
|
||||
opacity: .4 !important;
|
||||
}
|
||||
.opacity-5 {
|
||||
opacity: .5 !important;
|
||||
}
|
||||
.opacity-6 {
|
||||
opacity: .6 !important;
|
||||
}
|
||||
.opacity-7 {
|
||||
opacity: .7 !important;
|
||||
}
|
||||
.opacity-8 {
|
||||
opacity: .8 !important;
|
||||
}
|
||||
.opacity-8 {
|
||||
opacity: .9 !important;
|
||||
}
|
||||
.opacity-10 {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
19
APP/assets/sass/dashboard/custom/utilities/_position.scss
Normal file
19
APP/assets/sass/dashboard/custom/utilities/_position.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
@each $size, $value in $spacers {
|
||||
.top-#{$size} {
|
||||
top: $value;
|
||||
}
|
||||
.right-#{$size} {
|
||||
right: $value;
|
||||
}
|
||||
.bottom-#{$size} {
|
||||
bottom: $value;
|
||||
}
|
||||
.left-#{$size} {
|
||||
left: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
10
APP/assets/sass/dashboard/custom/utilities/_shadows.scss
Normal file
10
APP/assets/sass/dashboard/custom/utilities/_shadows.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
[class*="shadow"] {
|
||||
@if $enable-transitions {
|
||||
transition: $transition-base;
|
||||
}
|
||||
}
|
||||
|
||||
.shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; }
|
||||
.shadow--hover:hover { box-shadow: $box-shadow !important; }
|
||||
.shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; }
|
||||
.shadow-none--hover:hover { box-shadow: none !important; }
|
||||
5
APP/assets/sass/dashboard/custom/utilities/_sizing.scss
Normal file
5
APP/assets/sass/dashboard/custom/utilities/_sizing.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
// Height values in vh
|
||||
|
||||
.h-100vh {
|
||||
height: 100vh !important;
|
||||
}
|
||||
105
APP/assets/sass/dashboard/custom/utilities/_spacing.scss
Normal file
105
APP/assets/sass/dashboard/custom/utilities/_spacing.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
// Spacing columns vertically
|
||||
|
||||
.row.row-grid > [class*="col-"] + [class*="col-"] {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
.row.row-grid > [class*="col-md-"] + [class*="col-md-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
.row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row-grid + .row-grid {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
// Negative margins and paddings
|
||||
|
||||
@include media-breakpoint-up(lg){
|
||||
[class*="mt--"],
|
||||
[class*="mr--"],
|
||||
[class*="mb--"],
|
||||
[class*="ml--"] {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
|
||||
// Large negative margins in pixels
|
||||
|
||||
.mt--100 {
|
||||
margin-top: -100px !important;
|
||||
}
|
||||
.mr--100 {
|
||||
margin-right: -100px !important;
|
||||
}
|
||||
.mb--100 {
|
||||
margin-bottom: -100px !important;
|
||||
}
|
||||
.ml--100 {
|
||||
margin-left: -100px !important;
|
||||
}
|
||||
.mt--150 {
|
||||
margin-top: -150px !important;
|
||||
}
|
||||
.mb--150 {
|
||||
margin-bottom: -150px !important;
|
||||
}
|
||||
.mt--200 {
|
||||
margin-top: -200px !important;
|
||||
}
|
||||
.mb--200 {
|
||||
margin-bottom: -200px !important;
|
||||
}
|
||||
.mt--300 {
|
||||
margin-top: -300px !important;
|
||||
}
|
||||
.mb--300 {
|
||||
margin-bottom: -300px !important;
|
||||
}
|
||||
|
||||
|
||||
// Large margins in pixels
|
||||
|
||||
.pt-100 {
|
||||
padding-top: 100px !important;
|
||||
}
|
||||
.pb-100 {
|
||||
padding-bottom: 100px !important;
|
||||
}
|
||||
.pt-150 {
|
||||
padding-top: 150px !important;
|
||||
}
|
||||
.pb-150 {
|
||||
padding-bottom: 150px !important;
|
||||
}
|
||||
.pt-200 {
|
||||
padding-top: 200px !important;
|
||||
}
|
||||
.pb-200 {
|
||||
padding-bottom: 200px !important;
|
||||
}
|
||||
.pt-250 {
|
||||
padding-top: 250px !important;
|
||||
}
|
||||
.pb-250 {
|
||||
padding-bottom: 250px !important;
|
||||
}
|
||||
.pt-300 {
|
||||
padding-top: 300px!important;
|
||||
}
|
||||
.pb-300 {
|
||||
padding-bottom: 300px!important;
|
||||
}
|
||||
}
|
||||
40
APP/assets/sass/dashboard/custom/utilities/_text.scss
Normal file
40
APP/assets/sass/dashboard/custom/utilities/_text.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
// Weight and italics
|
||||
|
||||
.font-weight-300 { font-weight: 300 !important; }
|
||||
.font-weight-400 { font-weight: 400 !important; }
|
||||
.font-weight-500 { font-weight: 500 !important; }
|
||||
.font-weight-600 { font-weight: 600 !important; }
|
||||
.font-weight-700 { font-weight: 700 !important; }
|
||||
.font-weight-800 { font-weight: 800 !important; }
|
||||
.font-weight-900 { font-weight: 900 !important; }
|
||||
|
||||
|
||||
// Text decorations
|
||||
|
||||
.text-underline { text-decoration: underline; }
|
||||
.text-through { text-decoration: line-through; }
|
||||
|
||||
|
||||
// Line heights
|
||||
|
||||
.lh-100 { line-height: 1; }
|
||||
.lh-110 { line-height: 1.1; }
|
||||
.lh-120 { line-height: 1.2; }
|
||||
.lh-130 { line-height: 1.3; }
|
||||
.lh-140 { line-height: 1.4; }
|
||||
.lh-150 { line-height: 1.5; }
|
||||
.lh-160 { line-height: 1.6; }
|
||||
.lh-170 { line-height: 1.7; }
|
||||
.lh-180 { line-height: 1.8; }
|
||||
|
||||
//Contextual colors
|
||||
|
||||
.text-muted { color: $text-muted !important; }
|
||||
|
||||
|
||||
|
||||
// Letter spacings
|
||||
|
||||
.ls-1 { letter-spacing: .0625rem; }
|
||||
.ls-15 { letter-spacing: .09375rem; }
|
||||
.ls-2 { letter-spacing: 0.125rem; }
|
||||
@@ -0,0 +1,8 @@
|
||||
@include media-breakpoint-up(xl) {
|
||||
.transform-perspective-right {
|
||||
transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);
|
||||
}
|
||||
.transform-perspective-left{
|
||||
transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg)
|
||||
}
|
||||
}
|
||||
316
APP/assets/sass/dashboard/custom/vendor/_plugin-bootstrap-switch.scss
vendored
Normal file
316
APP/assets/sass/dashboard/custom/vendor/_plugin-bootstrap-switch.scss
vendored
Normal file
@@ -0,0 +1,316 @@
|
||||
/* ========================================================================
|
||||
* bootstrap-switch - v3.3.4
|
||||
* http://www.bootstrap-switch.org
|
||||
* ========================================================================
|
||||
* Copyright 2012-2013 Mattia Larentis
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//* IMPORTANT! Creative Tim Notice: this file has major changes to fit the Black Dashboard 's design. If you want to use the plugin as it was before our changes, please get the old files from http://www.bootstrap-switch.org
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.bootstrap-switch {
|
||||
display: inline-block;
|
||||
direction: ltr;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
border: 0;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.13);
|
||||
margin-bottom: 10px;
|
||||
line-height: 8px;
|
||||
width: 59px !important;
|
||||
height: 22px;
|
||||
outline: none;
|
||||
z-index: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
||||
background: url("https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/J9H9WF0/night-sky-full-of-stars-fantasy-animation-made-of-magical-sparkly-light-particles-flickering-on-a-purple-blue-gradient-background_bajacpz7x_thumbnail-full01.png");
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bootstrap-switch .bootstrap-switch-container {
|
||||
display: inline-flex;
|
||||
top: 0;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
width: 100px !important;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch .bootstrap-switch-label {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: inline-block !important;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
padding: 6px 10px;
|
||||
font-size: 11px;
|
||||
text-indent: -5px;
|
||||
line-height: 15px;
|
||||
-webkit-transition: 0.25s ease-out;
|
||||
transition: 0.25s ease-out;
|
||||
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off {
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
line-height: 11px;
|
||||
width: 50% !important;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-brown,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-brown {
|
||||
color: #fff;
|
||||
background: $brand-primary;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-blue,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-blue {
|
||||
color: #fff;
|
||||
background: $brand-info;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-green,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-green {
|
||||
color: #fff;
|
||||
background: $brand-success;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-orange,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-orange {
|
||||
background: $brand-warning;
|
||||
color: #fff;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-red,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-red {
|
||||
color: #fff;
|
||||
background: $brand-danger;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default,
|
||||
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
|
||||
color: #fff;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-label {
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
color: #333333;
|
||||
background: #ffffff;
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
margin: 0px -11px;
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
float: left;
|
||||
top: 2px;
|
||||
left: 51%;
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{
|
||||
background-color: rgba(156, 156 ,156 , .9);
|
||||
left: 52%;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label{
|
||||
width: 27px !important;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label{
|
||||
width: 27px !important;
|
||||
margin-left: -11px;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-on {
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
.bootstrap-switch .bootstrap-switch-handle-off {
|
||||
text-indent: 6px;
|
||||
}
|
||||
.bootstrap-switch input[type='radio'],
|
||||
.bootstrap-switch input[type='checkbox'] {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
z-index: -1;
|
||||
}
|
||||
.bootstrap-switch input[type='radio'].form-control,
|
||||
.bootstrap-switch input[type='checkbox'].form-control {
|
||||
height: auto;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-label {
|
||||
padding: 1px 5px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-small .bootstrap-switch-label {
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-large .bootstrap-switch-label {
|
||||
padding: 6px 16px;
|
||||
font-size: 18px;
|
||||
line-height: 1.33;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-disabled,
|
||||
.bootstrap-switch.bootstrap-switch-readonly,
|
||||
.bootstrap-switch.bootstrap-switch-indeterminate {
|
||||
cursor: default !important;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
|
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch.bootstrap-switch-disabled .bootstrap-switch-label,
|
||||
.bootstrap-switch.bootstrap-switch-readonly .bootstrap-switch-label,
|
||||
.bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label {
|
||||
opacity: 0.5;
|
||||
filter: alpha(opacity=50);
|
||||
cursor: default !important;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-animate .bootstrap-switch-container {
|
||||
-webkit-transition: margin-left 0.5s;
|
||||
transition: margin-left 0.5s;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-on {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-inverse .bootstrap-switch-handle-off {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-top-left-radius: 3px;
|
||||
}
|
||||
.bootstrap-switch.bootstrap-switch-focused {
|
||||
// border-color: #66afe9;
|
||||
// outline: 0;
|
||||
// -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
// box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
||||
}
|
||||
// .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label,
|
||||
// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-off .bootstrap-switch-label {
|
||||
// border-bottom-right-radius: 3px;
|
||||
// border-top-right-radius: 3px;
|
||||
// }
|
||||
// .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label,
|
||||
// .bootstrap-switch.bootstrap-switch-inverse.bootstrap-switch-on .bootstrap-switch-label {
|
||||
// border-bottom-left-radius: 3px;
|
||||
// border-top-left-radius: 3px;
|
||||
// }
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container{
|
||||
margin-left: -2px !important;
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container{
|
||||
margin-left: -39px !important;
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{
|
||||
&:before{
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-red ~ .bootstrap-switch-default{
|
||||
background-color: $brand-danger;
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-orange ~ .bootstrap-switch-default{
|
||||
background-color: $brand-warning;
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-green ~ .bootstrap-switch-default{
|
||||
background-color: $brand-success;
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-brown ~ .bootstrap-switch-default{
|
||||
background-color: $brand-primary;
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-blue ~ .bootstrap-switch-default{
|
||||
background-color: $brand-info;
|
||||
}
|
||||
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-red,
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-brown,
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-blue,
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-orange,
|
||||
.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-green{
|
||||
background-color: $light-gray;
|
||||
}
|
||||
|
||||
.bootstrap-switch-on .bootstrap-switch-handle-off,
|
||||
.bootstrap-switch-off .bootstrap-switch-handle-on{
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.bootstrap-switch-off:before{
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: rgba(16,16,16,0.7);
|
||||
}
|
||||
116
APP/assets/sass/dashboard/custom/vendor/_plugin-perfect-scrollbar.scss
vendored
Normal file
116
APP/assets/sass/dashboard/custom/vendor/_plugin-perfect-scrollbar.scss
vendored
Normal file
@@ -0,0 +1,116 @@
|
||||
/*
|
||||
* Container style
|
||||
*/
|
||||
.ps {
|
||||
overflow: hidden !important;
|
||||
overflow-anchor: none;
|
||||
-ms-overflow-style: none;
|
||||
touch-action: auto;
|
||||
-ms-touch-action: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Scrollbar rail styles
|
||||
*/
|
||||
.ps__rail-x {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
height: 15px;
|
||||
/* there must be 'bottom' or 'top' for ps__rail-x */
|
||||
bottom: 0px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
width: 15px;
|
||||
/* there must be 'right' or 'left' for ps__rail-y */
|
||||
right: 0;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps--active-x > .ps__rail-x,
|
||||
.ps--active-y > .ps__rail-y {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ps:hover > .ps__rail-x,
|
||||
.ps:hover > .ps__rail-y,
|
||||
.ps--focus > .ps__rail-x,
|
||||
.ps--focus > .ps__rail-y,
|
||||
.ps--scrolling-x > .ps__rail-x,
|
||||
.ps--scrolling-y > .ps__rail-y {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.ps .ps__rail-x:hover,
|
||||
.ps .ps__rail-y:hover,
|
||||
.ps .ps__rail-x:focus,
|
||||
.ps .ps__rail-y:focus,
|
||||
.ps .ps__rail-x.ps--clicking,
|
||||
.ps .ps__rail-y.ps--clicking {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/*
|
||||
* Scrollbar thumb styles
|
||||
*/
|
||||
.ps__thumb-x {
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color .2s linear, height .2s ease-in-out;
|
||||
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
|
||||
height: 6px;
|
||||
/* there must be 'bottom' for ps__thumb-x */
|
||||
bottom: 2px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color .2s linear, width .2s ease-in-out;
|
||||
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
|
||||
width: 6px;
|
||||
/* there must be 'right' for ps__thumb-y */
|
||||
right: 2px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__rail-x:hover > .ps__thumb-x,
|
||||
.ps__rail-x:focus > .ps__thumb-x,
|
||||
.ps__rail-x.ps--clicking .ps__thumb-x {
|
||||
background-color: #999;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y {
|
||||
background-color: #999;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
/* MS supports */
|
||||
@supports (-ms-overflow-style: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
166
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-datepicker.scss
vendored
Normal file
166
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-datepicker.scss
vendored
Normal file
@@ -0,0 +1,166 @@
|
||||
$box-shadow-lg: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.picker-card-styles {
|
||||
box-shadow: $box-shadow-lg;
|
||||
border: none;
|
||||
border-radius: $border-radius-sm;
|
||||
}
|
||||
|
||||
.el-picker-panel.time-select.el-popper {
|
||||
@extend .picker-card-styles;
|
||||
}
|
||||
|
||||
.el-picker-panel.el-date-picker {
|
||||
width: 300px;
|
||||
border: 0;
|
||||
@extend .picker-card-styles;
|
||||
.el-date-picker__header,
|
||||
.el-picker-panel__content {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-date-picker__header,
|
||||
.el-date-range-picker__header {
|
||||
&.el-date-picker__header--bordered {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-picker-panel__icon-btn {
|
||||
margin-top: 0;
|
||||
height: 27px;
|
||||
width: 27px;
|
||||
color: $primary;
|
||||
|
||||
&:hover {
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
.el-date-picker__header-label, div {
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-light;
|
||||
color: $primary;
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
color: $primary;
|
||||
border-radius: $border-radius-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-date-picker,
|
||||
.time-select{
|
||||
|
||||
.time-select-item.selected:not(.disabled) {
|
||||
color: $primary;
|
||||
}
|
||||
.el-picker-panel__content {
|
||||
.el-date-table th {
|
||||
color: $primary;
|
||||
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-light;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-picker-panel__content .el-date-table td,
|
||||
.el-picker-panel__content .el-month-table td,
|
||||
.el-picker-panel__content .el-year-table td {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
padding: 0;
|
||||
|
||||
div {
|
||||
&:hover {
|
||||
color: $default;
|
||||
}
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
.cell,
|
||||
span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: $font-size-base;
|
||||
color: $default;
|
||||
|
||||
&:hover {
|
||||
border-radius: 50%;
|
||||
background: #eee;
|
||||
cursor: pointer;
|
||||
color: $default;
|
||||
}
|
||||
}
|
||||
|
||||
&.current span,
|
||||
&.current a.cell {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
span {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.cell {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-date-picker .el-date-picker__time-header {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.el-date-picker .el-time-panel.el-popper {
|
||||
@extend .picker-card-styles;
|
||||
button {
|
||||
@extend .btn-primary, .btn-round, .btn-sm;
|
||||
border: 0;
|
||||
padding: 7px !important;
|
||||
margin: 0 5px 0 0;
|
||||
line-height: 14px;
|
||||
font-weight: $font-weight-normal;
|
||||
&:first-child {
|
||||
@extend .btn-danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-date-editor.el-input, .el-date-editor.el-input__inner {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.el-date-editor.el-input .el-input__inner {
|
||||
padding-left: 30px !important
|
||||
}
|
||||
|
||||
.el-date-picker .el-input {
|
||||
.el-input__inner {
|
||||
@extend .form-control;
|
||||
color: $default;
|
||||
&:hover {
|
||||
color: $default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-date-picker .el-picker-panel__footer {
|
||||
border: none;
|
||||
.el-button {
|
||||
@extend .btn-primary, .btn-round, .btn-sm;
|
||||
border: 0;
|
||||
&:first-child {
|
||||
@extend .btn-info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-picker-panel .el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2) {
|
||||
margin-left: 0;
|
||||
}
|
||||
34
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-inputs.scss
vendored
Normal file
34
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-inputs.scss
vendored
Normal file
@@ -0,0 +1,34 @@
|
||||
@import "../../variables";
|
||||
|
||||
.form-group {
|
||||
.el-date-editor {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-input__inner {
|
||||
@extend .form-control;
|
||||
width: 100%;
|
||||
}
|
||||
.el-select{
|
||||
width: 100%;
|
||||
.el-input__inner{
|
||||
cursor: pointer !important;
|
||||
}
|
||||
}
|
||||
.el-input-number{
|
||||
width: 100%;
|
||||
.plus-button{
|
||||
@extend .btn-round, .btn-primary;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
.el-input-number__decrease{
|
||||
@extend .plus-button;
|
||||
border-radius: $btn-round-radius 0 0 $btn-round-radius !important;
|
||||
}
|
||||
.el-input-number__increase{
|
||||
@extend .plus-button;
|
||||
border-radius: 0 $btn-round-radius $btn-round-radius 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
86
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-select.scss
vendored
Normal file
86
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-select.scss
vendored
Normal file
@@ -0,0 +1,86 @@
|
||||
@import "../../variables";
|
||||
@mixin select($type, $color) {
|
||||
.select-#{$type}.el-select {
|
||||
}
|
||||
.select-#{$type}.el-select .el-input {
|
||||
.el-input__suffix{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.el-input__icon{
|
||||
border-radius:20px;
|
||||
height: 40px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
input{
|
||||
background-color: transparent;
|
||||
border-width: 1px;
|
||||
border-color: lighten($black,5%);
|
||||
color: $color;
|
||||
}
|
||||
&:hover{
|
||||
input{
|
||||
border-color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__icon{
|
||||
color:$color;
|
||||
}
|
||||
}
|
||||
.select-#{$type}{
|
||||
|
||||
.el-tag, .el-tag.el-tag--info {
|
||||
line-height: 24px;
|
||||
background-color: $color;
|
||||
border: none;
|
||||
.el-tag__close{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&.el-select-dropdown__item.selected,
|
||||
&.el-select-dropdown__item.selected.hover {
|
||||
background-color: $color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.el-select-dropdown.is-multiple
|
||||
.el-select-dropdown__item.selected{
|
||||
&.select-#{$type}{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-select .el-input {
|
||||
&:hover {
|
||||
.el-input__icon,
|
||||
input {
|
||||
&::placeholder {
|
||||
color: white;
|
||||
}
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include select('default', $default)
|
||||
@include select('info', $info)
|
||||
@include select('primary', $primary)
|
||||
@include select('success', $success)
|
||||
@include select('warning', $warning)
|
||||
@include select('danger', $danger)
|
||||
29
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-slider.scss
vendored
Normal file
29
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-slider.scss
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
@import "../../variables";
|
||||
|
||||
@mixin slider($name, $color, $height: 6px){
|
||||
.slider-#{$name}{
|
||||
.el-slider__bar {
|
||||
height: $height;
|
||||
background-color: $color;
|
||||
}
|
||||
.el-tooltip{
|
||||
border: none;
|
||||
}
|
||||
.el-slider__button{
|
||||
&.hover,
|
||||
&:hover,
|
||||
&.dragging {
|
||||
background-color: darken($color, 10%)
|
||||
}
|
||||
background-color: $color;
|
||||
height: $height * 3;
|
||||
width: $height * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include slider('info', $info)
|
||||
@include slider('primary', $primary)
|
||||
@include slider('success', $success)
|
||||
@include slider('warning', $warning)
|
||||
@include slider('danger', $danger)
|
||||
60
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-tables.scss
vendored
Normal file
60
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-tables.scss
vendored
Normal file
@@ -0,0 +1,60 @@
|
||||
@import "../../variables";
|
||||
|
||||
// Element UI override
|
||||
|
||||
.el-table table {
|
||||
@extend .table;
|
||||
}
|
||||
|
||||
// A bit hacky but overrides some element ui defaults so it looks better
|
||||
.el-table::before {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.el-table table td, .el-table table th.is-leaf {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.el-table.el-table--enable-row-hover table.el-table__body tr:hover > td {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.el-table table .ascending .sort-caret.ascending {
|
||||
border-bottom-color: $primary;
|
||||
}
|
||||
|
||||
.el-table table .descending .sort-caret.descending {
|
||||
border-top-color: $primary;
|
||||
}
|
||||
|
||||
.el-table {
|
||||
.td-total {
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: $font-size-lg;
|
||||
padding-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
.td-price {
|
||||
font-size: 26px;
|
||||
font-weight: $font-weight-light;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
.btn {
|
||||
margin-right: 5px;
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.el-table,
|
||||
.el-table table tr,
|
||||
.el-table table thead th {
|
||||
background-color: transparent;
|
||||
}
|
||||
38
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-tags.scss
vendored
Normal file
38
APP/assets/sass/dashboard/custom/vendor/element-ui/_plugin-tags.scss
vendored
Normal file
@@ -0,0 +1,38 @@
|
||||
@import "../../variables";
|
||||
|
||||
@mixin tag($type, $color){
|
||||
.input-new-tag.input-#{$type} .el-input__inner{
|
||||
border-color: $color !important;
|
||||
}
|
||||
.el-tag,
|
||||
span.el-tag.el-tag--#{$type} {
|
||||
.el-tag__close {
|
||||
color: white;
|
||||
}
|
||||
.el-tag__close:hover{
|
||||
background-color: white;
|
||||
color: $color;
|
||||
}
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
span.el-tag{
|
||||
border-radius: 12px;
|
||||
margin-left:10px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
input.input-new-tag{
|
||||
margin-left:10px;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
display: inline;
|
||||
|
||||
}
|
||||
|
||||
@include tag('info', $info)
|
||||
@include tag('primary', $primary)
|
||||
@include tag('success', $success)
|
||||
@include tag('warning', $warning)
|
||||
@include tag('danger', $danger)
|
||||
1642
APP/assets/sass/vendor/bootstrap-rtl.scss
vendored
Normal file
1642
APP/assets/sass/vendor/bootstrap-rtl.scss
vendored
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user