mdchaparror/finanzas_api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

inicios del FrontEnd

Browse Source
This commit is contained in:
Martin Daniel Chaparro Ruiz
2021-04-21 21:47:04 -05:00
parent 4a7fb24eb2
commit cf9505f26d
196 changed files with 28978 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
APP/assets/sass/black-dashboard.scss Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View File

@@ -0,0 +1,3 @@
.map{
height: 500px;
}

16
APP/assets/sass/dashboard/custom/cards/_card-plain.scss Normal file
View 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
View 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
View 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
View 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%);
}
}

18
APP/assets/sass/dashboard/custom/mixins/_background-variant.scss Normal file
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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);
}

7
APP/assets/sass/dashboard/custom/mixins/_page-header.scss Normal file
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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; }

8
APP/assets/sass/dashboard/custom/utilities/_transform.scss Normal file
View File

@@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View File

File diff suppressed because it is too large Load Diff