mirror of https://github.com/ColorlibHQ/AdminLTE
enhanced scss structure & compiled size
- reduced filesize by ~100kb - splited _mixins into seperate files - replaced `@extend`'s - added split css files (core, components, extra-components, ...) - changed cursor style for .btn.disabled - enhanced package.json css* scriptspull/2269/head
REJack
parent
f60e0626fc
commit
925254199e
|
|
@ -0,0 +1,20 @@
|
|||
/*!
|
||||
* AdminLTE v3.0.0-rc.5
|
||||
* Only Components
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <http://adminlte.io>
|
||||
* License: Open source - MIT <http://opensource.org/licenses/MIT>
|
||||
*/
|
||||
// Bootstrap
|
||||
// ---------------------------------------------------
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import 'bootstrap-variables';
|
||||
@import '~bootstrap/scss/mixins';
|
||||
// @import '~bootstrap/scss/bootstrap';
|
||||
|
||||
// Variables and Mixins
|
||||
// ---------------------------------------------------
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'parts/components';
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/*!
|
||||
* AdminLTE v3.0.0-rc.5
|
||||
* Only Core
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <http://adminlte.io>
|
||||
* License: Open source - MIT <http://opensource.org/licenses/MIT>
|
||||
*/
|
||||
// Bootstrap
|
||||
// ---------------------------------------------------
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import 'bootstrap-variables';
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
||||
// Variables and Mixins
|
||||
// ---------------------------------------------------
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'parts/core';
|
||||
@import 'parts/miscellaneous';
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/*!
|
||||
* AdminLTE v3.0.0-rc.5
|
||||
* Only Extra Components
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <http://adminlte.io>
|
||||
* License: Open source - MIT <http://opensource.org/licenses/MIT>
|
||||
*/
|
||||
// Bootstrap
|
||||
// ---------------------------------------------------
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import 'bootstrap-variables';
|
||||
@import '~bootstrap/scss/mixins';
|
||||
// @import '~bootstrap/scss/bootstrap';
|
||||
|
||||
// Variables and Mixins
|
||||
// ---------------------------------------------------
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'parts/extra-components';
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/*!
|
||||
* AdminLTE: Pages v3.0.0-rc.5
|
||||
* Only Pages
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <http://adminlte.io>
|
||||
* License: Open source - MIT <http://opensource.org/licenses/MIT>
|
||||
*/
|
||||
// Bootstrap
|
||||
// ---------------------------------------------------
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import 'bootstrap-variables';
|
||||
@import '~bootstrap/scss/mixins';
|
||||
@import '~bootstrap/scss/close';
|
||||
|
||||
// Variables and Mixins
|
||||
// ---------------------------------------------------
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'parts/pages';
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/*!
|
||||
* AdminLTE: Plugins v3.0.0-rc.5
|
||||
* Only Plugins
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <http://adminlte.io>
|
||||
* License: Open source - MIT <http://opensource.org/licenses/MIT>
|
||||
*/
|
||||
// Bootstrap
|
||||
// ---------------------------------------------------
|
||||
@import '~bootstrap/scss/functions';
|
||||
@import 'bootstrap-variables';
|
||||
@import '~bootstrap/scss/mixins';
|
||||
// @import '~bootstrap/scss/bootstrap';
|
||||
|
||||
// Variables and Mixins
|
||||
// ---------------------------------------------------
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
@import 'parts/plugins';
|
||||
|
|
@ -19,67 +19,9 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
// Core
|
||||
// ---------------------------------------------------
|
||||
@import 'layout';
|
||||
|
||||
// Components
|
||||
// ---------------------------------------------------
|
||||
@import 'main-header';
|
||||
@import 'brand';
|
||||
@import 'main-sidebar';
|
||||
@import 'sidebar-mini';
|
||||
@import 'control-sidebar';
|
||||
@import 'dropdown';
|
||||
@import 'forms';
|
||||
@import 'progress-bars';
|
||||
@import 'small-box';
|
||||
@import 'cards';
|
||||
@import 'info-box';
|
||||
@import 'timeline';
|
||||
@import 'buttons';
|
||||
@import 'callout';
|
||||
@import 'alerts';
|
||||
@import 'navs';
|
||||
@import 'products';
|
||||
@import 'table';
|
||||
@import 'direct-chat';
|
||||
@import 'users-list';
|
||||
@import 'carousel';
|
||||
@import 'social-widgets';
|
||||
@import 'modals';
|
||||
@import 'toasts';
|
||||
|
||||
// Pages
|
||||
// ---------------------------------------------------
|
||||
@import 'pages/mailbox';
|
||||
@import 'pages/lockscreen';
|
||||
@import 'pages/login_and_register';
|
||||
@import 'pages/404_500_errors';
|
||||
@import 'pages/invoice';
|
||||
@import 'pages/profile';
|
||||
@import 'pages/e_commerce';
|
||||
@import 'pages/projects';
|
||||
|
||||
// Plugins
|
||||
// ---------------------------------------------------
|
||||
@import 'plugins/mixins';
|
||||
@import 'plugins/fullcalendar';
|
||||
@import 'plugins/select2';
|
||||
@import 'plugins/bootstrap-slider';
|
||||
@import 'plugins/icheck-bootstrap';
|
||||
@import 'plugins/mapael';
|
||||
@import 'plugins/jqvmap';
|
||||
@import 'plugins/sweetalert2';
|
||||
@import 'plugins/toastr';
|
||||
@import 'plugins/pace';
|
||||
@import 'plugins/bootstrap-switch';
|
||||
@import 'plugins/miscellaneous';
|
||||
|
||||
// Miscellaneous
|
||||
// ---------------------------------------------------
|
||||
@import 'miscellaneous';
|
||||
@import 'print';
|
||||
@import 'text';
|
||||
@import 'elevation';
|
||||
@import 'colors';
|
||||
@import 'parts/core';
|
||||
@import 'parts/components';
|
||||
@import 'parts/extra-components';
|
||||
@import 'parts/pages';
|
||||
@import 'parts/plugins';
|
||||
@import 'parts/miscellaneous';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* AdminLTE v3.0.0-rc.5
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <http://adminlte.io>
|
||||
* Website: AdminLTE.io <http://adminlte.io>
|
||||
* License: Open source - MIT <http://opensource.org/licenses/MIT>
|
||||
*/
|
||||
// Bootstrap
|
||||
|
|
@ -15,67 +15,10 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
// Core
|
||||
// ---------------------------------------------------
|
||||
@import 'layout';
|
||||
@import 'parts/core';
|
||||
@import 'parts/components';
|
||||
@import 'parts/extra-components';
|
||||
@import 'parts/pages';
|
||||
@import 'parts/plugins';
|
||||
@import 'parts/miscellaneous';
|
||||
|
||||
// Components
|
||||
// ---------------------------------------------------
|
||||
@import 'main-header';
|
||||
@import 'brand';
|
||||
@import 'main-sidebar';
|
||||
@import 'sidebar-mini';
|
||||
@import 'control-sidebar';
|
||||
@import 'dropdown';
|
||||
@import 'forms';
|
||||
@import 'progress-bars';
|
||||
@import 'small-box';
|
||||
@import 'cards';
|
||||
@import 'info-box';
|
||||
@import 'timeline';
|
||||
@import 'buttons';
|
||||
@import 'callout';
|
||||
@import 'alerts';
|
||||
@import 'navs';
|
||||
@import 'products';
|
||||
@import 'table';
|
||||
@import 'direct-chat';
|
||||
@import 'users-list';
|
||||
@import 'carousel';
|
||||
@import 'social-widgets';
|
||||
@import 'modals';
|
||||
@import 'toasts';
|
||||
|
||||
// Pages
|
||||
// ---------------------------------------------------
|
||||
@import 'pages/mailbox';
|
||||
@import 'pages/lockscreen';
|
||||
@import 'pages/login_and_register';
|
||||
@import 'pages/404_500_errors';
|
||||
@import 'pages/invoice';
|
||||
@import 'pages/profile';
|
||||
@import 'pages/e_commerce';
|
||||
@import 'pages/projects';
|
||||
|
||||
// Plugins
|
||||
// ---------------------------------------------------
|
||||
@import 'plugins/mixins';
|
||||
@import 'plugins/fullcalendar';
|
||||
@import 'plugins/select2';
|
||||
@import 'plugins/bootstrap-slider';
|
||||
@import 'plugins/icheck-bootstrap';
|
||||
@import 'plugins/mapael';
|
||||
@import 'plugins/jqvmap';
|
||||
@import 'plugins/sweetalert2';
|
||||
@import 'plugins/toastr';
|
||||
@import 'plugins/pace';
|
||||
@import 'plugins/bootstrap-switch';
|
||||
@import 'plugins/miscellaneous';
|
||||
|
||||
// Miscellaneous
|
||||
// ---------------------------------------------------
|
||||
@import 'miscellaneous';
|
||||
@import 'print';
|
||||
@import 'text';
|
||||
@import 'elevation';
|
||||
@import 'colors';
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
//Alert Variants
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
|
|
|
|||
|
|
@ -98,15 +98,19 @@ $yiq-text-light: $white !default;
|
|||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-caret: true !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: true !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
|
||||
$enable-caret: true !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: true !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-prefers-reduced-motion-media-query: true !default;
|
||||
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-pointer-cursor-for-buttons: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
$enable-responsive-font-sizes: false !default;
|
||||
$enable-validation-icons: true !default;
|
||||
$enable-deprecation-messages: true !default;
|
||||
|
||||
// Spacing
|
||||
//
|
||||
|
|
@ -415,6 +419,9 @@ $input-placeholder-color: lighten($gray-600, 15%) !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-inner-half: calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
|
||||
$input-height-inner-quarter: calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
|
||||
|
||||
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
|
||||
|
||||
$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
|
||||
|
|
@ -692,6 +699,13 @@ $tooltip-arrow-width: .8rem !default;
|
|||
$tooltip-arrow-height: .4rem !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
// Form tooltips must come after regular tooltips
|
||||
$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
|
||||
$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
|
||||
$form-feedback-tooltip-font-size: $tooltip-font-size !default;
|
||||
$form-feedback-tooltip-line-height: $line-height-base !default;
|
||||
$form-feedback-tooltip-opacity: $tooltip-opacity !default;
|
||||
$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
|
||||
|
||||
// Popovers
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,11 @@
|
|||
//
|
||||
|
||||
.btn {
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// Flat buttons
|
||||
&.btn-flat {
|
||||
@include border-radius(0);
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
}
|
||||
|
||||
@if $enable-shadows {
|
||||
@extend .elevation-1;
|
||||
box-shadow: map-get($elevations, 1);
|
||||
} @else {
|
||||
border: 1px solid $gray-300;
|
||||
}
|
||||
|
||||
@extend .mb-3;
|
||||
background-color: $white;
|
||||
border-left: 5px solid $gray-200;
|
||||
margin-bottom: map-get($spacers, 3);
|
||||
padding: 1rem;
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
//
|
||||
|
||||
.card {
|
||||
@extend .mb-3;
|
||||
@include box-shadow($card-shadow);
|
||||
margin-bottom: map-get($spacers, 3);
|
||||
|
||||
&.bg-dark {
|
||||
.card-header {
|
||||
|
|
@ -75,6 +75,56 @@
|
|||
.border-left {
|
||||
border-left: 1px solid $card-border-color;
|
||||
}
|
||||
|
||||
&:not(.card-outline) {
|
||||
> .card-header {
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
&:first-child .nav-link {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline {
|
||||
.nav-item {
|
||||
border-bottom: 0;
|
||||
|
||||
&:first-child .nav-link {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline-tabs {
|
||||
border-top: 0;
|
||||
|
||||
> .card-header {
|
||||
.nav-item {
|
||||
&:first-child .nav-link {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
border-top: 3px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-top: 3px solid $nav-tabs-border-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:hover {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Maximized Card Body Scroll fix
|
||||
|
|
@ -194,7 +244,7 @@ html.maximized-card {
|
|||
}
|
||||
|
||||
.chart-legend {
|
||||
@extend .list-unstyled;
|
||||
@include list-unstyled;
|
||||
margin: 10px 0;
|
||||
|
||||
> li {
|
||||
|
|
@ -223,7 +273,8 @@ html.maximized-card {
|
|||
}
|
||||
|
||||
img {
|
||||
@extend .img-sm;
|
||||
height: $card-img-size;
|
||||
width: $card-img-size;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,19 @@
|
|||
@include translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.timestamp-light {
|
||||
.direct-chat-timestamp {
|
||||
color: lighten(color-yiq($yiq-text-light), 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&.timestamp-dark {
|
||||
.direct-chat-timestamp {
|
||||
color: darken(color-yiq($yiq-text-dark), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.direct-chat-messages {
|
||||
|
|
@ -150,7 +163,7 @@
|
|||
|
||||
//Contacts list -- for displaying contacts in direct chat contacts pane
|
||||
.contacts-list {
|
||||
@extend .list-unstyled;
|
||||
@include list-unstyled;
|
||||
|
||||
> li {
|
||||
@include clearfix;
|
||||
|
|
|
|||
|
|
@ -6,22 +6,9 @@
|
|||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.elevation-1 {
|
||||
box-shadow: 0 1px 3px rgba($black, 0.12), 0 1px 2px rgba($black, 0.24) !important;
|
||||
}
|
||||
|
||||
.elevation-2 {
|
||||
box-shadow: 0 3px 6px rgba($black, 0.16), 0 3px 6px rgba($black, 0.23) !important;
|
||||
}
|
||||
|
||||
.elevation-3 {
|
||||
box-shadow: 0 10px 20px rgba($black, 0.19), 0 6px 6px rgba($black, 0.23) !important;
|
||||
}
|
||||
|
||||
.elevation-4 {
|
||||
box-shadow: 0 14px 28px rgba($black, 0.25), 0 10px 10px rgba($black, 0.22) !important;
|
||||
}
|
||||
|
||||
.elevation-5 {
|
||||
box-shadow: 0 19px 38px rgba($black, 0.30), 0 15px 12px rgba($black, 0.22) !important;
|
||||
// Background colors (colors)
|
||||
@each $name, $value in $elevations {
|
||||
.elevation-#{$name} {
|
||||
box-shadow: $value !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@
|
|||
//
|
||||
|
||||
.info-box {
|
||||
@extend .d-flex;
|
||||
@extend .mb-3;
|
||||
@include box-shadow($card-shadow);
|
||||
@include border-radius($border-radius);
|
||||
|
||||
background: $white;
|
||||
display: flex;
|
||||
margin-bottom: map-get($spacers, 3);
|
||||
min-height: 80px;
|
||||
padding: .5rem;
|
||||
position: relative;
|
||||
|
|
@ -24,16 +24,14 @@
|
|||
}
|
||||
|
||||
.info-box-icon {
|
||||
@extend .d-flex;
|
||||
@extend .align-items-center;
|
||||
@extend .justify-content-center;
|
||||
|
||||
@if $enable-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
align-items: center;
|
||||
display: block;
|
||||
font-size: 1.875rem;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 70px;
|
||||
|
||||
|
|
|
|||
|
|
@ -230,7 +230,7 @@
|
|||
color: $sidebar-light-active-color;
|
||||
|
||||
@if $enable-shadows {
|
||||
@extend .elevation-1;
|
||||
box-shadow: map-get($elevations, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -353,7 +353,7 @@
|
|||
color: $sidebar-dark-hover-color;
|
||||
|
||||
@if $enable-shadows {
|
||||
@extend .elevation-1;
|
||||
box-shadow: map-get($elevations, 1);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,8 @@
|
|||
|
||||
&.user-block-sm {
|
||||
img {
|
||||
@extend .img-sm;
|
||||
width: $img-size-sm;
|
||||
height: $img-size-sm;
|
||||
}
|
||||
|
||||
.username,
|
||||
|
|
@ -122,29 +123,29 @@
|
|||
}
|
||||
|
||||
.img-sm {
|
||||
height: 30px !important;
|
||||
width: 30px !important;
|
||||
height: $img-size-sm;
|
||||
width: $img-size-sm;
|
||||
|
||||
+ .img-push {
|
||||
margin-left: 40px;
|
||||
margin-left: $img-size-sm + $img-size-push;
|
||||
}
|
||||
}
|
||||
|
||||
.img-md {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: $img-size-md;
|
||||
height: $img-size-md;
|
||||
|
||||
+ .img-push {
|
||||
margin-left: 70px;
|
||||
margin-left: $img-size-md + $img-size-push;
|
||||
}
|
||||
}
|
||||
|
||||
.img-lg {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: $img-size-lg;
|
||||
height: $img-size-lg;
|
||||
|
||||
+ .img-push {
|
||||
margin-left: 110px;
|
||||
margin-left: $img-size-lg + $img-size-push;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,578 +2,12 @@
|
|||
// General: Mixins
|
||||
//
|
||||
|
||||
|
||||
// Cards Variant
|
||||
@mixin cards-variant($name, $color) {
|
||||
.card-#{$name} {
|
||||
&:not(.card-outline) {
|
||||
> .card-header {
|
||||
background-color: $color;
|
||||
border-bottom: 0;
|
||||
|
||||
&,
|
||||
a {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: color-yiq($white);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
&:first-child .nav-link {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline {
|
||||
border-top: 3px solid $color;
|
||||
|
||||
.nav-item {
|
||||
border-bottom: 0;
|
||||
|
||||
&:first-child .nav-link {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline-tabs {
|
||||
border-top: 0;
|
||||
|
||||
> .card-header {
|
||||
.nav-item {
|
||||
&:first-child .nav-link {
|
||||
border-left: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
border-top: 3px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-top: 3px solid $nav-tabs-border-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:hover {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
border-top: 3px solid $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-#{$name},
|
||||
.bg-gradient-#{$name},
|
||||
.card-#{$name}:not(.card-outline) {
|
||||
.btn-tool {
|
||||
color: rgba(color-yiq($color), 0.8);
|
||||
|
||||
&:hover {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.bg-#{$name},
|
||||
.card.bg-gradient-#{$name} {
|
||||
.bootstrap-datetimepicker-widget {
|
||||
.table td,
|
||||
.table th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
table thead tr:first-child th:hover,
|
||||
table td.day:hover,
|
||||
table td.hour:hover,
|
||||
table td.minute:hover,
|
||||
table td.second:hover {
|
||||
background: darken($color, 8%);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
|
||||
table td.today::before {
|
||||
border-bottom-color: color-yiq($color);
|
||||
}
|
||||
|
||||
table td.active,
|
||||
table td.active:hover {
|
||||
background: lighten($color, 10%);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Color
|
||||
@mixin sidebar-color($color) {
|
||||
.nav-sidebar > .nav-item {
|
||||
& > .nav-link.active {
|
||||
background-color: $color;
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Mini Breakpoints
|
||||
@mixin sidebar-mini-breakpoint() {
|
||||
// A fix for text overflow while transitioning from sidebar mini to full sidebar
|
||||
.nav-sidebar,
|
||||
.nav-sidebar > .nav-header,
|
||||
.nav-sidebar .nav-link {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// When the sidebar is collapsed...
|
||||
&.sidebar-collapse {
|
||||
.d-hidden-mini {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Apply the new margins to the main content and footer
|
||||
.content-wrapper,
|
||||
.main-footer,
|
||||
.main-header {
|
||||
margin-left: $sidebar-mini-width !important;
|
||||
}
|
||||
|
||||
// Make the sidebar headers
|
||||
.nav-sidebar .nav-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-sidebar .nav-link p {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text {
|
||||
margin-left: -10px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xl {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// Modify the sidebar to shrink instead of disappearing
|
||||
.main-sidebar {
|
||||
overflow-x: hidden;
|
||||
|
||||
&,
|
||||
&::before {
|
||||
// Don't go away! Just shrink
|
||||
margin-left: 0;
|
||||
width: $sidebar-mini-width;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
.image {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.sidebar-focused {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-sidebar.nav-child-indent .nav-treeview {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
text-align: left;
|
||||
|
||||
.image {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text,
|
||||
.logo-xl {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.nav-flat {
|
||||
.nav-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-icon {
|
||||
margin-left: -.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
// Make the sidebar links, menus, labels, badges
|
||||
// and angle icons disappear
|
||||
.sidebar-form,
|
||||
.user-panel > .info {
|
||||
display: block !important;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
.nav-sidebar > .nav-item > .nav-link > span {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make an element visible only when sidebar mini is active
|
||||
.visible-sidebar-mini {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&.layout-fixed {
|
||||
.main-sidebar:hover {
|
||||
.brand-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
width: $sidebar-mini-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar Variant
|
||||
@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
|
||||
background-color: $color;
|
||||
|
||||
.nav > li > a {
|
||||
color: $font-color;
|
||||
}
|
||||
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:active,
|
||||
.nav > li > a:focus,
|
||||
.nav .open > a,
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus,
|
||||
.nav > .active > a {
|
||||
background: $hover-bg;
|
||||
color: $hover-color;
|
||||
}
|
||||
|
||||
// Add color to the sidebar toggle button
|
||||
.sidebar-toggle {
|
||||
color: $font-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $hover-bg;
|
||||
color: $hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Logo color Variant
|
||||
@mixin logo-variant($bg-color, $color: #fff, $border-bottom-color: transparent, $border-bottom-width: 0) {
|
||||
background-color: $bg-color;
|
||||
border-bottom: $border-bottom-width solid $border-bottom-color;
|
||||
color: $color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: darken($bg-color, 1%);
|
||||
}
|
||||
}
|
||||
|
||||
// Direct Chat Variant
|
||||
@mixin direct-chat-variant($bg-color, $color: #fff) {
|
||||
.right > .direct-chat-text {
|
||||
background: $bg-color;
|
||||
border-color: $bg-color;
|
||||
color: color-yiq($bg-color);
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $theme-colors {
|
||||
&.bg-#{$name},
|
||||
&.bg-gradient-#{$name} {
|
||||
.direct-chat-timestamp {
|
||||
@if (color-yiq($color) == $yiq-text-dark) {
|
||||
color: lighten(color-yiq($color), 10%);
|
||||
} @else {
|
||||
color: darken(color-yiq($color), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
&.bg-#{$name},
|
||||
&.bg-gradient-#{$name} {
|
||||
.direct-chat-timestamp {
|
||||
@if (color-yiq($color) == $yiq-text-dark) {
|
||||
color: lighten(color-yiq($color), 10%);
|
||||
} @else {
|
||||
color: darken(color-yiq($color), 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background Variant
|
||||
@mixin background-variant($name, $color) {
|
||||
.bg-#{$name} {
|
||||
background-color: #{$color} !important;
|
||||
|
||||
&,
|
||||
> a {
|
||||
color: color-yiq($color) !important;
|
||||
}
|
||||
|
||||
&.btn {
|
||||
&:hover {
|
||||
border-color: darken($color, 10%);
|
||||
color: darken(color-yiq($color), 7.5%);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken($color, 10%) !important;
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background Gradient Variant
|
||||
@mixin background-gradient-variant($name, $color) {
|
||||
.bg-gradient-#{$name} {
|
||||
@include bg-gradient-variant('&', $color);
|
||||
color: color-yiq($color);
|
||||
|
||||
&.btn {
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include bg-gradient-variant('&', darken($color, 7.5%));
|
||||
border-color: darken($color, 10%);
|
||||
color: darken(color-yiq($color), 7.5%);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:active,
|
||||
&.active {
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Switch Variant
|
||||
@mixin custom-switch-variant($name, $color) {
|
||||
&.custom-switch-off-#{$name} {
|
||||
& .custom-control-input ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input:focus ~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
& .custom-control-input ~ .custom-control-label::after {
|
||||
background: darken($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-switch-on-#{$name} {
|
||||
& .custom-control-input:checked ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input:checked:focus ~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
& .custom-control-input:checked ~ .custom-control-label::after {
|
||||
background: lighten($color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Range Variant
|
||||
@mixin custom-range-variant($name, $color) {
|
||||
&.custom-range-#{$name} {
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $color;
|
||||
|
||||
&:active {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: $color;
|
||||
|
||||
&:active {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
background-color: $color;
|
||||
|
||||
&:active {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Toast Variant
|
||||
@mixin toast-variant($name, $color) {
|
||||
&.bg-#{$name} {
|
||||
background: rgba($color, .9) !important;
|
||||
@if (color-yiq($color) == $yiq-text-light) {
|
||||
|
||||
.close {
|
||||
color: color-yiq($color);
|
||||
text-shadow: 0 1px 0 #000;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
background: rgba($color, .85);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Accent Variant
|
||||
@mixin accent-variant($name, $color) {
|
||||
.accent-#{$name} {
|
||||
$link-color: $color;
|
||||
$link-hover-color: darken($color, 15%);
|
||||
$pagination-active-bg: $color;
|
||||
$pagination-active-border-color: $color;
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
|
||||
@include hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&.active .page-link {
|
||||
background-color: $pagination-active-bg;
|
||||
border-color: $pagination-active-border-color;
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
background-color: $pagination-disabled-bg;
|
||||
border-color: $pagination-disabled-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ETC
|
||||
@mixin translate($x, $y) {
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
|
||||
// Different radius each side
|
||||
@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
|
||||
border-radius: $top-left $top-right $bottom-left $bottom-right;
|
||||
}
|
||||
|
||||
@mixin calc($property, $expression) {
|
||||
#{$property}: calc(#{$expression});
|
||||
}
|
||||
|
||||
@mixin rotate($value) {
|
||||
transform: rotate($value);
|
||||
}
|
||||
|
||||
@mixin animation($animation) {
|
||||
animation: $animation;
|
||||
}
|
||||
|
||||
// Gradient background
|
||||
@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
|
||||
background: $color;
|
||||
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
|
||||
background: -ms-linear-gradient(bottom, $start, $stop);
|
||||
background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
|
||||
background: -o-linear-gradient($stop, $start);
|
||||
}
|
||||
|
||||
@import 'mixins/cards';
|
||||
@import 'mixins/sidebar';
|
||||
@import 'mixins/navbar';
|
||||
@import 'mixins/accent';
|
||||
@import 'mixins/custom-forms';
|
||||
@import 'mixins/backgrounds';
|
||||
@import 'mixins/direct-chat';
|
||||
@import 'mixins/toasts';
|
||||
@import 'mixins/miscellaneous';
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
.progress-group {
|
||||
@extend .mb-2;
|
||||
margin-bottom: map-get($spacers, 2);
|
||||
}
|
||||
|
||||
// size variation
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
.small-box {
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($card-shadow);
|
||||
@extend .mb-3;
|
||||
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
|
|
|
|||
|
|
@ -63,11 +63,11 @@
|
|||
tbody > tr > th,
|
||||
tbody > tr > td {
|
||||
&:first-of-type {
|
||||
@extend .pl-4;
|
||||
padding-left: map-get($spacers, 4);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@extend .pr-4;
|
||||
padding-right: map-get($spacers, 4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
//
|
||||
|
||||
.users-list {
|
||||
@extend .list-unstyled;
|
||||
@include list-unstyled;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -47,6 +47,13 @@ $main-bg: #f4f6f9 !default;
|
|||
$content-padding-y: 0 !default;
|
||||
$content-padding-x: $navbar-padding-x !default;
|
||||
|
||||
// IMAGE SIZES
|
||||
// --------------------------------------------------------
|
||||
$img-size-sm: 1.875rem !default;
|
||||
$img-size-md: 3.75rem !default;
|
||||
$img-size-lg: 6.25rem !default;
|
||||
$img-size-push: .625rem !default;
|
||||
|
||||
// MAIN HEADER
|
||||
// --------------------------------------------------------
|
||||
$main-header-bottom-border-width: $border-width !default;
|
||||
|
|
@ -126,8 +133,8 @@ $sidebar-light-header-color: $gray-800 !default;
|
|||
// SIDEBAR MINI
|
||||
// --------------------------------------------------------
|
||||
$sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
|
||||
$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2);
|
||||
$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2);
|
||||
$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
|
||||
$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
|
||||
|
||||
// CONTROL SIDEBAR
|
||||
// --------------------------------------------------------
|
||||
|
|
@ -138,12 +145,12 @@ $control-sidebar-width: $sidebar-width !default;
|
|||
$card-border-color: $gray-100 !default;
|
||||
$card-dark-border-color: lighten($gray-900, 10%) !default;
|
||||
$card-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2) !default;
|
||||
$card-title-font-size: 1.1rem;
|
||||
$card-title-font-size-sm: 1rem;
|
||||
$card-title-font-weight: $font-weight-normal;
|
||||
$card-nav-link-padding-sm-y: .4rem;
|
||||
$card-nav-link-padding-sm-x: .8rem;
|
||||
|
||||
$card-title-font-size: 1.1rem !default;
|
||||
$card-title-font-size-sm: 1rem !default;
|
||||
$card-title-font-weight: $font-weight-normal !default;
|
||||
$card-nav-link-padding-sm-y: .4rem !default;
|
||||
$card-nav-link-padding-sm-x: .8rem !default;
|
||||
$card-img-size: $img-size-sm !default;
|
||||
|
||||
// PROGRESS BARS
|
||||
// --------------------------------------------------------
|
||||
|
|
@ -180,8 +187,8 @@ $transition-fn: ease-in-out !default;
|
|||
|
||||
// TEXT
|
||||
// --------------------------------------------------------
|
||||
$font-size-xs: ($font-size-base * .75);
|
||||
$font-size-xl: ($font-size-base * 2);
|
||||
$font-size-xs: ($font-size-base * .75) !default;
|
||||
$font-size-xl: ($font-size-base * 2) !default;
|
||||
|
||||
|
||||
// BUTTON
|
||||
|
|
@ -197,6 +204,17 @@ $button-font-size-xs: ($font-size-base * .75) !default;
|
|||
$button-border-radius-xs: .15rem !default;
|
||||
|
||||
|
||||
// ELEVATION
|
||||
// --------------------------------------------------------
|
||||
$elevations: ();
|
||||
$elevations: map-merge((
|
||||
1: unquote('0 1px 3px ' + rgba($black, 0.12) + ', 0 1px 2px ' + rgba($black, 0.24)),
|
||||
2: unquote('0 3px 6px ' + rgba($black, 0.16) + ', 0 3px 6px ' + rgba($black, 0.23)),
|
||||
3: unquote('0 10px 20px ' + rgba($black, 0.19) + ', 0 6px 6px ' + rgba($black, 0.23)),
|
||||
4: unquote('0 14px 28px ' + rgba($black, 0.25) + ', 0 10px 10px ' + rgba($black, 0.22)),
|
||||
5: unquote('0 19px 38px ' + rgba($black, 0.30) + ', 0 15px 12px ' + rgba($black, 0.22)),
|
||||
), $elevations);
|
||||
|
||||
// RIBBON
|
||||
// --------------------------------------------------------
|
||||
$ribbon-border-size: 3px !default;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
//
|
||||
// Mixins: Accent
|
||||
//
|
||||
|
||||
// Accent Variant
|
||||
@mixin accent-variant($name, $color) {
|
||||
.accent-#{$name} {
|
||||
$link-color: $color;
|
||||
$link-hover-color: darken($color, 15%);
|
||||
$pagination-active-bg: $color;
|
||||
$pagination-active-border-color: $color;
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
|
||||
@include hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&.active .page-link {
|
||||
background-color: $pagination-active-bg;
|
||||
border-color: $pagination-active-border-color;
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
background-color: $pagination-disabled-bg;
|
||||
border-color: $pagination-disabled-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
//
|
||||
// Mixins: Backgrounds
|
||||
//
|
||||
|
||||
// Background Variant
|
||||
@mixin background-variant($name, $color) {
|
||||
.bg-#{$name} {
|
||||
background-color: #{$color} !important;
|
||||
|
||||
&,
|
||||
> a {
|
||||
color: color-yiq($color) !important;
|
||||
}
|
||||
|
||||
&.btn {
|
||||
&:hover {
|
||||
border-color: darken($color, 10%);
|
||||
color: darken(color-yiq($color), 7.5%);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: darken($color, 10%) !important;
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background Gradient Variant
|
||||
@mixin background-gradient-variant($name, $color) {
|
||||
.bg-gradient-#{$name} {
|
||||
@include bg-gradient-variant('&', $color);
|
||||
color: color-yiq($color);
|
||||
|
||||
&.btn {
|
||||
&.disabled,
|
||||
&:disabled,
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include bg-gradient-variant('&', darken($color, 7.5%));
|
||||
border-color: darken($color, 10%);
|
||||
color: darken(color-yiq($color), 7.5%);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active,
|
||||
&:active,
|
||||
&.active {
|
||||
@include bg-gradient-variant('&', darken($color, 10%));
|
||||
border-color: darken($color, 12.5%);
|
||||
color: color-yiq(darken($color, 10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
//
|
||||
// Mixins: Cards Variant
|
||||
//
|
||||
|
||||
@mixin cards-variant($name, $color) {
|
||||
.card-#{$name} {
|
||||
&:not(.card-outline) {
|
||||
> .card-header {
|
||||
background-color: $color;
|
||||
|
||||
&,
|
||||
a {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: color-yiq($white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-outline {
|
||||
border-top: 3px solid $color;
|
||||
}
|
||||
|
||||
&.card-outline-tabs {
|
||||
> .card-header {
|
||||
a {
|
||||
&:hover {
|
||||
border-top: 3px solid $nav-tabs-border-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-top: 3px solid $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-#{$name},
|
||||
.bg-gradient-#{$name},
|
||||
.card-#{$name}:not(.card-outline) {
|
||||
.btn-tool {
|
||||
color: rgba(color-yiq($color), 0.8);
|
||||
|
||||
&:hover {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card.bg-#{$name},
|
||||
.card.bg-gradient-#{$name} {
|
||||
.bootstrap-datetimepicker-widget {
|
||||
.table td,
|
||||
.table th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
table thead tr:first-child th:hover,
|
||||
table td.day:hover,
|
||||
table td.hour:hover,
|
||||
table td.minute:hover,
|
||||
table td.second:hover {
|
||||
background: darken($color, 8%);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
|
||||
table td.today::before {
|
||||
border-bottom-color: color-yiq($color);
|
||||
}
|
||||
|
||||
table td.active,
|
||||
table td.active:hover {
|
||||
background: lighten($color, 10%);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
//
|
||||
// Mixins: Custom Forms
|
||||
//
|
||||
|
||||
// Custom Switch Variant
|
||||
@mixin custom-switch-variant($name, $color) {
|
||||
&.custom-switch-off-#{$name} {
|
||||
& .custom-control-input ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input:focus ~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
& .custom-control-input ~ .custom-control-label::after {
|
||||
background: darken($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-switch-on-#{$name} {
|
||||
& .custom-control-input:checked ~ .custom-control-label::before {
|
||||
background: #{$color};
|
||||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input:checked:focus ~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
& .custom-control-input:checked ~ .custom-control-label::after {
|
||||
background: lighten($color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom Range Variant
|
||||
@mixin custom-range-variant($name, $color) {
|
||||
&.custom-range-#{$name} {
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background-color: $color;
|
||||
|
||||
&:active {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
background-color: $color;
|
||||
|
||||
&:active {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
background-color: $color;
|
||||
|
||||
&:active {
|
||||
background-color: lighten($color, 35%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
//
|
||||
// Mixins: Direct Chat
|
||||
//
|
||||
|
||||
// Direct Chat Variant
|
||||
@mixin direct-chat-variant($bg-color, $color: #fff) {
|
||||
.right > .direct-chat-text {
|
||||
background: $bg-color;
|
||||
border-color: $bg-color;
|
||||
color: color-yiq($bg-color);
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
border-left-color: $bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
//
|
||||
// Mixins: Miscellaneous
|
||||
//
|
||||
|
||||
// ETC
|
||||
@mixin translate($x, $y) {
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
|
||||
// Different radius each side
|
||||
@mixin border-radius-sides($top-left, $top-right, $bottom-left, $bottom-right) {
|
||||
border-radius: $top-left $top-right $bottom-left $bottom-right;
|
||||
}
|
||||
|
||||
@mixin calc($property, $expression) {
|
||||
#{$property}: calc(#{$expression});
|
||||
}
|
||||
|
||||
@mixin rotate($value) {
|
||||
transform: rotate($value);
|
||||
}
|
||||
|
||||
@mixin animation($animation) {
|
||||
animation: $animation;
|
||||
}
|
||||
|
||||
// Gradient background
|
||||
@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
|
||||
background: $color;
|
||||
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
|
||||
background: -ms-linear-gradient(bottom, $start, $stop);
|
||||
background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
|
||||
background: -o-linear-gradient($stop, $start);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
//
|
||||
// Mixins: Navbar
|
||||
//
|
||||
|
||||
// Navbar Variant
|
||||
@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
|
||||
background-color: $color;
|
||||
|
||||
.nav > li > a {
|
||||
color: $font-color;
|
||||
}
|
||||
|
||||
.nav > li > a:hover,
|
||||
.nav > li > a:active,
|
||||
.nav > li > a:focus,
|
||||
.nav .open > a,
|
||||
.nav .open > a:hover,
|
||||
.nav .open > a:focus,
|
||||
.nav > .active > a {
|
||||
background: $hover-bg;
|
||||
color: $hover-color;
|
||||
}
|
||||
|
||||
// Add color to the sidebar toggle button
|
||||
.sidebar-toggle {
|
||||
color: $font-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $hover-bg;
|
||||
color: $hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
//
|
||||
// Mixins: Sidebar
|
||||
//
|
||||
|
||||
// Sidebar Color
|
||||
@mixin sidebar-color($color) {
|
||||
.nav-sidebar > .nav-item {
|
||||
& > .nav-link.active {
|
||||
background-color: $color;
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Mini Breakpoints
|
||||
@mixin sidebar-mini-breakpoint() {
|
||||
// A fix for text overflow while transitioning from sidebar mini to full sidebar
|
||||
.nav-sidebar,
|
||||
.nav-sidebar > .nav-header,
|
||||
.nav-sidebar .nav-link {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// When the sidebar is collapsed...
|
||||
&.sidebar-collapse {
|
||||
.d-hidden-mini {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Apply the new margins to the main content and footer
|
||||
.content-wrapper,
|
||||
.main-footer,
|
||||
.main-header {
|
||||
margin-left: $sidebar-mini-width !important;
|
||||
}
|
||||
|
||||
// Make the sidebar headers
|
||||
.nav-sidebar .nav-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-sidebar .nav-link p {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebar .user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text {
|
||||
margin-left: -10px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xl {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// Modify the sidebar to shrink instead of disappearing
|
||||
.main-sidebar {
|
||||
overflow-x: hidden;
|
||||
|
||||
&,
|
||||
&::before {
|
||||
// Don't go away! Just shrink
|
||||
margin-left: 0;
|
||||
width: $sidebar-mini-width;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
.image {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.sidebar-focused {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-sidebar.nav-child-indent .nav-treeview {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
|
||||
.user-panel {
|
||||
text-align: left;
|
||||
|
||||
.image {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel > .info,
|
||||
.nav-sidebar .nav-link p,
|
||||
.brand-text,
|
||||
.logo-xl {
|
||||
display: inline-block;
|
||||
margin-left: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.nav-flat {
|
||||
.nav-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav-treeview {
|
||||
.nav-icon {
|
||||
margin-left: -.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-xs {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.brand-image {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
// Make the sidebar links, menus, labels, badges
|
||||
// and angle icons disappear
|
||||
.sidebar-form,
|
||||
.user-panel > .info {
|
||||
display: block !important;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
.nav-sidebar > .nav-item > .nav-link > span {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make an element visible only when sidebar mini is active
|
||||
.visible-sidebar-mini {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&.layout-fixed {
|
||||
.main-sidebar:hover {
|
||||
.brand-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.brand-link {
|
||||
width: $sidebar-mini-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
//
|
||||
// Mixins: Toasts
|
||||
//
|
||||
|
||||
// Toast Variant
|
||||
@mixin toast-variant($name, $color) {
|
||||
&.bg-#{$name} {
|
||||
background: rgba($color, .9) !important;
|
||||
@if (color-yiq($color) == $yiq-text-light) {
|
||||
|
||||
.close {
|
||||
color: color-yiq($color);
|
||||
text-shadow: 0 1px 0 #000;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
background: rgba($color, .85);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
}
|
||||
|
||||
.mailbox-attachments {
|
||||
@extend .list-unstyled;
|
||||
@include list-unstyled;
|
||||
li {
|
||||
border: 1px solid #eee;
|
||||
float: left;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
//
|
||||
// Part: Components
|
||||
//
|
||||
|
||||
@import '../forms';
|
||||
@import '../progress-bars';
|
||||
@import '../cards';
|
||||
@import '../modals';
|
||||
@import '../toasts';
|
||||
@import '../buttons';
|
||||
@import '../callout';
|
||||
@import '../alerts';
|
||||
@import '../table';
|
||||
@import '../carousel';
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
//
|
||||
// Part: Core
|
||||
//
|
||||
|
||||
@import '../layout';
|
||||
@import '../main-header';
|
||||
@import '../brand';
|
||||
@import '../main-sidebar';
|
||||
@import '../sidebar-mini';
|
||||
@import '../control-sidebar';
|
||||
@import '../dropdown';
|
||||
@import '../navs';
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
//
|
||||
// Part: Extra Components
|
||||
//
|
||||
|
||||
@import '../small-box';
|
||||
@import '../info-box';
|
||||
@import '../timeline';
|
||||
@import '../products';
|
||||
@import '../direct-chat';
|
||||
@import '../users-list';
|
||||
@import '../social-widgets';
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
//
|
||||
// Part: Miscellaneous
|
||||
//
|
||||
|
||||
@import '../miscellaneous';
|
||||
@import '../print';
|
||||
@import '../text';
|
||||
@import '../elevation';
|
||||
@import '../colors';
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
//
|
||||
// Part: Pages
|
||||
//
|
||||
|
||||
@import '../pages/mailbox';
|
||||
@import '../pages/lockscreen';
|
||||
@import '../pages/login_and_register';
|
||||
@import '../pages/404_500_errors';
|
||||
@import '../pages/invoice';
|
||||
@import '../pages/profile';
|
||||
@import '../pages/e_commerce';
|
||||
@import '../pages/projects';
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
//
|
||||
// Part: Plugins
|
||||
//
|
||||
|
||||
@import '../plugins/mixins';
|
||||
@import '../plugins/fullcalendar';
|
||||
@import '../plugins/select2';
|
||||
@import '../plugins/bootstrap-slider';
|
||||
@import '../plugins/icheck-bootstrap';
|
||||
@import '../plugins/mapael';
|
||||
@import '../plugins/jqvmap';
|
||||
@import '../plugins/sweetalert2';
|
||||
@import '../plugins/toastr';
|
||||
@import '../plugins/pace';
|
||||
@import '../plugins/bootstrap-switch';
|
||||
@import '../plugins/miscellaneous';
|
||||
|
|
@ -37,28 +37,26 @@
|
|||
&:focus {
|
||||
border-color: lighten($color, 25%);
|
||||
}
|
||||
|
||||
.select2-selection__choice {
|
||||
background-color: $color;
|
||||
border-color: darken($color, 5%);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
color: rgba(color-yiq($color), 0.7);
|
||||
|
||||
&:hover {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.select2-container--focus .select2-selection--multiple {
|
||||
border-color: lighten($color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
.select2-selection__choice {
|
||||
background-color: $color;
|
||||
border-color: darken($color, 5%);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
color: rgba(color-yiq($color), 0.7);
|
||||
|
||||
&:hover {
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,444 @@
|
|||
/*!
|
||||
* AdminLTE: Pages v3.0.0-rc.5
|
||||
* Only Pages
|
||||
* Author: Colorlib
|
||||
* Website: AdminLTE.io <http://adminlte.io>
|
||||
* License: Open source - MIT <http://opensource.org/licenses/MIT>
|
||||
*/
|
||||
.close, .mailbox-attachment-close {
|
||||
float: right;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.close:hover, .mailbox-attachment-close:hover {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.close:not(:disabled):not(.disabled):hover, .mailbox-attachment-close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus, .mailbox-attachment-close:not(:disabled):not(.disabled):focus {
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
button.close, button.mailbox-attachment-close {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
a.close.disabled, a.disabled.mailbox-attachment-close {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.mailbox-messages > .table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mailbox-controls {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.mailbox-controls.with-border {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.mailbox-read-info {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mailbox-read-info h3 {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mailbox-read-info h5 {
|
||||
margin: 0;
|
||||
padding: 5px 0 0;
|
||||
}
|
||||
|
||||
.mailbox-read-time {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mailbox-read-message {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mailbox-attachments {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.mailbox-attachments li {
|
||||
border: 1px solid #eee;
|
||||
float: left;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.mailbox-attachment-name {
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mailbox-attachment-icon,
|
||||
.mailbox-attachment-info,
|
||||
.mailbox-attachment-size {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mailbox-attachment-info {
|
||||
background: #f8f9fa;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mailbox-attachment-size {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.mailbox-attachment-size > span {
|
||||
display: inline-block;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mailbox-attachment-icon {
|
||||
color: #666;
|
||||
font-size: 65px;
|
||||
max-height: 132.5px;
|
||||
padding: 20px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mailbox-attachment-icon.has-img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mailbox-attachment-icon.has-img > img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.lockscreen {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.lockscreen .lockscreen-name {
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lockscreen-logo {
|
||||
font-size: 35px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lockscreen-logo a {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.lockscreen-wrapper {
|
||||
margin: 0 auto;
|
||||
margin-top: 10%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.lockscreen-item {
|
||||
border-radius: 4px;
|
||||
background: #ffffff;
|
||||
margin: 10px auto 30px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 290px;
|
||||
}
|
||||
|
||||
.lockscreen-image {
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
left: -10px;
|
||||
padding: 5px;
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lockscreen-image > img {
|
||||
border-radius: 50%;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.lockscreen-credentials {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
.lockscreen-credentials .form-control {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.lockscreen-credentials .btn {
|
||||
background-color: #ffffff;
|
||||
border: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.lockscreen-footer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.login-logo,
|
||||
.register-logo {
|
||||
font-size: 2.1rem;
|
||||
font-weight: 300;
|
||||
margin-bottom: .9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-logo a,
|
||||
.register-logo a {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.login-page,
|
||||
.register-page {
|
||||
align-items: center;
|
||||
background: #e9ecef;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-box,
|
||||
.register-box {
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.login-box,
|
||||
.register-box {
|
||||
margin-top: 20px;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.login-card-body,
|
||||
.register-card-body {
|
||||
background: #ffffff;
|
||||
border-top: 0;
|
||||
color: #666;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card-body .input-group .form-control,
|
||||
.register-card-body .input-group .form-control {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.login-card-body .input-group .form-control:focus,
|
||||
.register-card-body .input-group .form-control:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
|
||||
.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
|
||||
border-color: #80bdff;
|
||||
}
|
||||
|
||||
.login-card-body .input-group .form-control.is-valid:focus,
|
||||
.register-card-body .input-group .form-control.is-valid:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
|
||||
.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.login-card-body .input-group .form-control.is-invalid:focus,
|
||||
.register-card-body .input-group .form-control.is-invalid:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
|
||||
.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.login-card-body .input-group .input-group-text,
|
||||
.register-card-body .input-group .input-group-text {
|
||||
background-color: transparent;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-left: 0;
|
||||
border-top-right-radius: 0.25rem;
|
||||
color: #777;
|
||||
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.login-box-msg,
|
||||
.register-box-msg {
|
||||
margin: 0;
|
||||
padding: 0 20px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-auth-links {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.error-page {
|
||||
margin: 20px auto 0;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.error-page {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.error-page > .headline {
|
||||
float: left;
|
||||
font-size: 100px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.error-page > .headline {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.error-page > .error-content {
|
||||
display: block;
|
||||
margin-left: 190px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.error-page > .error-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.error-page > .error-content > h3 {
|
||||
font-size: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.error-page > .error-content > h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.invoice {
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.invoice-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.profile-user-img {
|
||||
border: 3px solid #adb5bd;
|
||||
margin: 0 auto;
|
||||
padding: 3px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
font-size: 21px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.post {
|
||||
border-bottom: 1px solid #adb5bd;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.post:last-of-type {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.post .user-block {
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post .row {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-image-thumbs {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.product-image-thumb {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
|
||||
border-radius: 0.25rem;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
max-width: 7rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.product-image-thumb img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.product-image-thumb:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.product-share a {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
.projects td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.projects .list-inline {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.projects img.table-avatar,
|
||||
.projects .table-avatar img {
|
||||
border-radius: 50%;
|
||||
display: inline;
|
||||
width: 2.5rem;
|
||||
}
|
||||
|
||||
.projects .project-state {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=adminlte.pages.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
21
package.json
21
package.json
|
|
@ -7,10 +7,25 @@
|
|||
"main": "dist/js/adminlte.min.js",
|
||||
"scripts": {
|
||||
"css": "npm-run-all --sequential css-compile css-prefix css-minify",
|
||||
"css-compile": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --output-style expanded --source-map true --source-map-contents true --precision 6 build/scss/AdminLTE.scss dist/css/adminlte.css",
|
||||
"css-all": "npm-run-all --sequential css-compile css-compile-splits css-prefix css-minify css-minify-splits",
|
||||
"css-compile-bash": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js --output-style expanded --source-map true --source-map-contents true --precision 6 $*",
|
||||
"css-compile": "npm run css-compile-bash build/scss/AdminLTE.scss dist/css/adminlte.css",
|
||||
"css-compile-splits": "npm-run-all --sequential css-compile:core css-compile:components css-compile:extra-components css-compile:pages css-compile:plugins",
|
||||
"css-compile:core": "npm run css-compile-bash build/scss/AdminLTE-core.scss dist/css/alt/adminlte.core.css",
|
||||
"css-compile:components": "npm run css-compile-bash build/scss/AdminLTE-components.scss dist/css/alt/adminlte.components.css",
|
||||
"css-compile:extra-components": "npm run css-compile-bash build/scss/AdminLTE-extra-components.scss dist/css/alt/adminlte.extra-components.css",
|
||||
"css-compile:pages": "npm run css-compile-bash build/scss/AdminLTE-pages.scss dist/css/alt/adminlte.pages.css",
|
||||
"css-compile:plugins": "npm run css-compile-bash build/scss/AdminLTE-plugins.scss dist/css/alt/adminlte.plugins.css",
|
||||
"css-prefix": "postcss --config build/config/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.min.css\"",
|
||||
"css-minify": "cleancss --level 1 --source-map --source-map-inline-sources --output dist/css/adminlte.min.css dist/css/adminlte.css",
|
||||
"compile": "npm-run-all --parallel js css",
|
||||
"css-minify-bash": "cleancss --level 1 --source-map --source-map-inline-sources --output $*",
|
||||
"css-minify": "npm run css-minify-bash dist/css/adminlte.min.css dist/css/adminlte.css",
|
||||
"css-minify-splits": "npm-run-all --sequential css-minify:core css-minify:components css-minify:extra-components css-minify:pages css-minify:plugins",
|
||||
"css-minify:core": "npm run css-minify-bash dist/css/alt/adminlte.core.min.css dist/css/alt/adminlte.core.css",
|
||||
"css-minify:components": "npm run css-minify-bash dist/css/alt/adminlte.components.min.css dist/css/alt/adminlte.components.css",
|
||||
"css-minify:extra-components": "npm run css-minify-bash dist/css/alt/adminlte.extra-components.min.css dist/css/alt/adminlte.extra-components.css",
|
||||
"css-minify:pages": "npm run css-minify-bash dist/css/alt/adminlte.pages.min.css dist/css/alt/adminlte.pages.css",
|
||||
"css-minify:plugins": "npm run css-minify-bash dist/css/alt/adminlte.plugins.min.css dist/css/alt/adminlte.plugins.css",
|
||||
"compile": "npm-run-all --parallel js css-all",
|
||||
"dev": "npm-run-all --parallel watch sync",
|
||||
"docs": "npm-run-all --sequential docs-clean docs-prepare docs-compile",
|
||||
"docs-clean": "cd docs/ && bundle exec jekyll clean -d ../docs_html",
|
||||
|
|
|
|||
Loading…
Reference in New Issue