You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
458 lines
14 KiB
SCSS
458 lines
14 KiB
SCSS
// Sidenav background variants
|
|
.sn-bg-1 {
|
|
background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav1.jpg);
|
|
}
|
|
|
|
.sn-bg-2 {
|
|
background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav2.jpg);
|
|
}
|
|
|
|
.sn-bg-3 {
|
|
background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav3.jpg);
|
|
}
|
|
|
|
.sn-bg-4 {
|
|
background-image: url(https://mdbootstrap.com/img/Photos/Others/sidenav4.jpg);
|
|
}
|
|
|
|
$skins: (
|
|
"white": (
|
|
"skin-primary-color": #4285F4,
|
|
"skin-navbar": #fff,
|
|
"skin-footer-color": #6f7178,
|
|
"skin-accent": #4285F4,
|
|
"skin-flat": #F9F9F9,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": #4285F4,
|
|
"skin-sidenav-item-hover": rgba(0,0,0,0.05),
|
|
// Gradients
|
|
"skin-gradient-start": #ababab,
|
|
"skin-gradient-end": #fff,
|
|
// Masks
|
|
"skin-mask-slight": rgba(255, 255, 255, 0.5),
|
|
"skin-mask-light": rgba(255, 255, 255, 0.65),
|
|
"skin-mask-strong": rgba(255, 255, 255, 0.8),
|
|
// Buttons
|
|
"skin-sn-child": #4285F4,
|
|
"skin-btn-primary": #4285F4,
|
|
"skin-btn-secondary": #fc685f,
|
|
"skin-btn-default": #454545,
|
|
"skin-text": #424242
|
|
),
|
|
"black": (
|
|
"skin-primary-color": #2AD1A3,
|
|
"skin-navbar": #222,
|
|
"skin-footer-color": #222,
|
|
"skin-accent": #2AD1A3,
|
|
"skin-flat": #222,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": #2AD1A3,
|
|
"skin-sidenav-item-hover": #2AD1A3,
|
|
// Gradients
|
|
"skin-gradient-start": #000,
|
|
"skin-gradient-end": #616161,
|
|
// Masks
|
|
"skin-mask-slight": rgba(0, 0, 0, 0.5),
|
|
"skin-mask-light": rgba(0, 0, 0, 0.65),
|
|
"skin-mask-strong": rgba(0, 0, 0, 0.8),
|
|
// Buttons
|
|
"skin-sn-child": #2AD1A3,
|
|
"skin-btn-primary": #2AD1A3,
|
|
"skin-btn-secondary": #0f478a,
|
|
"skin-btn-default": #222222,
|
|
"skin-text": #fff
|
|
),
|
|
"cyan": (
|
|
"skin-primary-color": #4fada7,
|
|
"skin-navbar": #114861,
|
|
"skin-footer-color": #114861,
|
|
"skin-accent": #f0b247,
|
|
"skin-flat": #24879d,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": rgba(29, 65, 82, 0.8),
|
|
"skin-sidenav-item-hover": rgba(29, 65, 82, 0.8),
|
|
// Gradients
|
|
"skin-gradient-start": #114861,
|
|
"skin-gradient-end": #45b0c0,
|
|
// Masks
|
|
"skin-mask-slight": rgba(21, 78, 96, 0.5),
|
|
"skin-mask-light": rgba(21, 78, 96, 0.65),
|
|
"skin-mask-strong": rgba(21, 78, 96, 0.8),
|
|
// Buttons
|
|
"skin-sn-child": #ffa742,
|
|
"skin-btn-primary": #ffa742,
|
|
"skin-btn-secondary": #45b0c0,
|
|
"skin-btn-default": #114861,
|
|
"skin-text": #fff
|
|
),
|
|
"mdb": (
|
|
"skin-primary-color": #33b5e5,
|
|
"skin-navbar": #243a51,
|
|
"skin-footer-color": #243a51,
|
|
"skin-accent": #33b5e5,
|
|
"skin-flat": #224562,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": rgba(72, 198, 255, 0.8),
|
|
"skin-sidenav-item-hover": rgba(72, 198, 255, 0.8),
|
|
// Gradients
|
|
"skin-gradient-start": #0e2135,
|
|
"skin-gradient-end": #2c76b8,
|
|
// Masks
|
|
"skin-mask-slight": rgba(13, 36, 60, 0.5),
|
|
"skin-mask-light": rgba(13, 36, 60, 0.65),
|
|
"skin-mask-strong": rgba(13, 36, 60, 0.8),
|
|
// Buttons
|
|
"skin-sn-child": #67d5ff,
|
|
"skin-btn-primary": #33b5e5,
|
|
"skin-btn-secondary": #0e3d67,
|
|
"skin-btn-default": #1a6398,
|
|
"skin-text": #fff
|
|
),
|
|
"deep-purple": (
|
|
"skin-primary-color": #d0637c,
|
|
"skin-navbar": #7f7e91,
|
|
"skin-footer-color": #7f7e91,
|
|
"skin-accent": #ac85f0,
|
|
"skin-flat": #372e5f,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": rgba(176, 139, 240, 0.5),
|
|
"skin-sidenav-item-hover": rgba(176, 139, 240, 0.5),
|
|
// Gradients
|
|
"skin-gradient-start": #2e1f49,
|
|
"skin-gradient-end": #a47fe3,
|
|
// Masks
|
|
"skin-mask-slight": rgba(36, 9, 56, 0.5),
|
|
"skin-mask-light": rgba(36, 9, 56, 0.65),
|
|
"skin-mask-strong": rgba(36, 9, 56, 0.88),
|
|
// Buttons
|
|
"skin-sn-child": #c9abfc,
|
|
"skin-btn-primary": #ac85f0,
|
|
"skin-btn-secondary": #6e4ca3,
|
|
"skin-btn-default": #372e5f,
|
|
"skin-text": #fff
|
|
),
|
|
"navy-blue": (
|
|
"skin-primary-color": #309e9e,
|
|
"skin-navbar": #353b50,
|
|
"skin-footer-color": #353b50,
|
|
"skin-accent": #40c6c6,
|
|
"skin-flat": #4c5678,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": rgba(37, 207, 207, 0.8),
|
|
"skin-sidenav-item-hover": rgba(37, 207, 207, 0.8),
|
|
// Gradients
|
|
"skin-gradient-start": #222735,
|
|
"skin-gradient-end": #4f68a6,
|
|
// Masks
|
|
"skin-mask-slight": rgba(14, 15, 32, 0.5),
|
|
"skin-mask-light": rgba(14, 15, 32, 0.65),
|
|
"skin-mask-strong": rgba(14, 15, 32, 0.8),
|
|
// Buttons
|
|
"skin-sn-child": #40c6c6,
|
|
"skin-btn-primary": #40c6c6,
|
|
"skin-btn-secondary": #7e51b4,
|
|
"skin-btn-default": #293756,
|
|
"skin-text": #fff
|
|
),
|
|
"pink": (
|
|
"skin-primary-color": #bd5d70,
|
|
"skin-navbar": #535466,
|
|
"skin-footer-color": #535466,
|
|
"skin-accent": #9fa0ae,
|
|
"skin-flat": #aa5077,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": rgba(0, 0, 0, 0.4),
|
|
"skin-sidenav-item-hover": rgba(0, 0, 0, 0.4),
|
|
// Gradients
|
|
"skin-gradient-start": #812b5a,
|
|
"skin-gradient-end": #f28cc0,
|
|
// Masks
|
|
"skin-mask-slight": rgba(152, 47, 88, 0.5),
|
|
"skin-mask-light": rgba(152, 47, 88, 0.65),
|
|
"skin-mask-strong": rgba(152, 47, 88, 0.8),
|
|
// Buttons
|
|
"skin-sn-child": #ffb0e6,
|
|
"skin-btn-primary": #601f39,
|
|
"skin-btn-secondary": #e7649d,
|
|
"skin-btn-default": #535466,
|
|
"skin-text": #fff
|
|
),
|
|
"indigo": (
|
|
"skin-primary-color": #7f82c5,
|
|
"skin-navbar": #9095aa,
|
|
"skin-footer-color": #9095aa,
|
|
"skin-accent": #fd668c,
|
|
"skin-flat": #404f9f,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": rgba(250, 80, 121, 0.8),
|
|
"skin-sidenav-item-hover": rgba(250, 80, 121, 0.8),
|
|
// Gradients
|
|
"skin-gradient-start": #272d6e,
|
|
"skin-gradient-end": #90a8ff,
|
|
// Masks
|
|
"skin-mask-slight": rgba(35, 65, 134, 0.5),
|
|
"skin-mask-light": rgba(35, 65, 134, 0.65),
|
|
"skin-mask-strong": rgba(35, 65, 134, 0.8),
|
|
// Buttons
|
|
"skin-sn-child": #ff89ac,
|
|
"skin-btn-primary": #fd668c,
|
|
"skin-btn-secondary": #3c61ae,
|
|
"skin-btn-default": #9095aa,
|
|
"skin-text": #fff
|
|
),
|
|
"light-blue": (
|
|
"skin-primary-color": #3d799c,
|
|
"skin-navbar": #3f5c80,
|
|
"skin-footer-color": #3f5c80,
|
|
"skin-accent": #b4c2c9,
|
|
"skin-flat": #6a9ed3,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": rgba(29, 54, 86, 0.6),
|
|
"skin-sidenav-item-hover": rgba(29, 54, 86, 0.6),
|
|
// Gradients
|
|
"skin-gradient-start": #69adf4,
|
|
"skin-gradient-end": #69adf4,
|
|
// Masks
|
|
"skin-mask-slight": rgba(87, 134, 180, 0.5),
|
|
'skin-mask-light': rgba(87, 134, 180, 0.65),
|
|
"skin-mask-strong": rgba(87, 134, 180, 0.8),
|
|
// Buttons
|
|
"skin-sn-child": #aadeff,
|
|
"skin-btn-primary": #ff4a67,
|
|
"skin-btn-secondary": #64c3f0,
|
|
"skin-btn-default": #2d486a,
|
|
"skin-text": #fff
|
|
),
|
|
"grey": (
|
|
"skin-primary-color": #2b2b2b,
|
|
"skin-navbar": #44474b,
|
|
"skin-footer-color": #44474b,
|
|
"skin-accent": #75c1f0,
|
|
"skin-flat": #a5a4a4,
|
|
// Sidenav Styles
|
|
"skin-sidenav-item": rgba(0, 0, 0, 0.4),
|
|
"skin-sidenav-item-hover": rgba(0, 0, 0, 0.4),
|
|
// Gradients
|
|
"skin-gradient-start": #383838,
|
|
"skin-gradient-end": #a5a4a4,
|
|
// Masks
|
|
"skin-mask-slight": rgba(121, 121, 121, 0.5),
|
|
"skin-mask-light": rgba(121, 121, 121, 0.65),
|
|
"skin-mask-strong": rgba(121, 121, 121, 0.8),
|
|
// Buttons
|
|
"skin-sn-child": #afdffc,
|
|
"skin-btn-primary": #46aded,
|
|
"skin-btn-secondary": #7d8488,
|
|
"skin-btn-default": #353637,
|
|
"skin-text": #fff
|
|
)
|
|
);
|
|
|
|
@each $skin, $data in $skins {
|
|
.#{$skin}-skin {
|
|
.gradient {
|
|
background: map-get($data, skin-gradient-start);
|
|
/* Old browsers */
|
|
background: -moz-linear-gradient(-45deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
|
|
/* FF3.6-15 */
|
|
background: -webkit-linear-gradient(-45deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
|
|
/* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(135deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
}
|
|
.primary-color {
|
|
background-color: map-get($data, skin-primary-color)!important;
|
|
}
|
|
.navbar {
|
|
background-color: map-get($data, skin-navbar);
|
|
color: map-get($data, skin-text);
|
|
.navbar-nav {
|
|
.nav-item {
|
|
.dropdown-menu a {
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: darken( map-get($data, skin-accent), 5%);
|
|
}
|
|
}
|
|
@if $skin == "white" {
|
|
a {
|
|
color: map-get($data, skin-text);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.page-footer {
|
|
background-color: map-get($data, skin-footer-color);
|
|
}
|
|
.side-nav {
|
|
background-color: map-get($data, skin-flat);
|
|
.logo-wrapper {
|
|
&> div {
|
|
background-color: transparent!important;
|
|
}
|
|
}
|
|
.sn-avatar-wrapper img {
|
|
border: 3px solid darken( map-get($data, skin-accent), 15%);
|
|
}
|
|
.social a {
|
|
@if $skin == "white" {
|
|
.fa {
|
|
color: map-get($data, skin-text);
|
|
}
|
|
}
|
|
&:hover {
|
|
.fa {
|
|
color: map-get($data, skin-accent) !important;
|
|
@include transition (all 0.3s linear);
|
|
}
|
|
}
|
|
}
|
|
@if $skin == "white" {
|
|
.search-form input[type=text] {
|
|
color: #424242;
|
|
border-bottom: 1px solid rgba(153, 153, 153, 0.3);
|
|
@include placeholder {
|
|
color: rgba(map-get($data, skin-text), .5) !important;
|
|
}
|
|
}
|
|
}
|
|
.collapsible li {
|
|
background-color: transparent;
|
|
@if $skin == "white" {
|
|
a {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.collapsible-header {
|
|
color: map-get($data, skin-text);
|
|
@include transition (all 0.3s linear);
|
|
&.active {
|
|
@if $skin == "white" {
|
|
color: map-get($data, skin-sidenav-item);
|
|
background-color: transparent;
|
|
} @else {
|
|
background-color: map-get($data, skin-sidenav-item-hover);
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: map-get($data, skin-sidenav-item-hover);
|
|
}
|
|
}
|
|
.collapsible-body a {
|
|
color: map-get($data, skin-text);
|
|
&:hover {
|
|
color:map-get($data, skin-sn-child);
|
|
}
|
|
}
|
|
}
|
|
.fa {
|
|
color: map-get($data, skin-text);
|
|
}
|
|
.sidenav-bg {
|
|
&:after,
|
|
&.mask-strong:after,
|
|
{
|
|
background: map-get($data, skin-mask-strong);
|
|
}
|
|
&.mask-light:after {
|
|
background: map-get($data, skin-mask-light);
|
|
}
|
|
&.mask-slight:after {
|
|
background: map-get($data, skin-mask-slight);
|
|
}
|
|
}
|
|
}
|
|
@include make-button('primary', map-get($data, skin-btn-primary));
|
|
@include make-button('secondary', map-get($data, skin-btn-secondary));
|
|
@include make-button('default', map-get($data, skin-btn-default));
|
|
.card .btn-action {
|
|
background: map-get($data, skin-btn-default);
|
|
&:hover,
|
|
&:focus {
|
|
background-color: lighten( map-get($data, skin-btn-default), 5%)!important;
|
|
}
|
|
&.active {
|
|
background-color: darken( map-get($data, skin-btn-default), 20%)!important;
|
|
}
|
|
}
|
|
// Custom inputs
|
|
input[type="email"]:focus:not([readonly]),
|
|
input[type="text"]:focus:not([readonly]),
|
|
input[type="password"]:focus:not([readonly]),
|
|
textarea.md-textarea:focus:not([readonly]) {
|
|
border-color: map-get($data, skin-accent);
|
|
box-shadow: 0 1px 0 0 map-get($data, skin-accent);
|
|
&+label {
|
|
color: map-get($data, skin-accent);
|
|
}
|
|
}
|
|
input[type=checkbox]:checked {
|
|
&+label {
|
|
&:before {
|
|
border-right: 2px solid map-get($data, skin-accent);
|
|
border-bottom: 2px solid map-get($data, skin-accent);
|
|
}
|
|
}
|
|
}
|
|
input[type=checkbox].filled-in:checked {
|
|
&+label {
|
|
&:before {
|
|
border-right: 2px solid #fff;
|
|
border-bottom: 2px solid #fff;
|
|
}
|
|
&:after {
|
|
background-color: map-get($data, skin-accent);
|
|
border-color: map-get($data, skin-accent);
|
|
}
|
|
}
|
|
}
|
|
.md-form {
|
|
.prefix {
|
|
&.active {
|
|
color: map-get($data, skin-accent);
|
|
}
|
|
}
|
|
}
|
|
/* Select colors */
|
|
.dropdown-content {
|
|
li:not(.disabled) {
|
|
span {
|
|
color: map-get($data, skin-accent);
|
|
}
|
|
}
|
|
}
|
|
.top-nav-collapse {
|
|
background-color: map-get($data, skin-navbar);
|
|
}
|
|
.carousel-multi-item {
|
|
.controls-top > a,
|
|
.carousel-indicators li,
|
|
.carousel-indicators li.active {
|
|
background-color: map-get($data, skin-accent);
|
|
}
|
|
}
|
|
// Form-header, card-header
|
|
.form-header,
|
|
.card-header {
|
|
background-color: lighten( map-get($data, skin-accent), 2%);
|
|
}
|
|
.spinner-primary-color,
|
|
.spinner-primary-color-only {
|
|
border-color: map-get($data, skin-primary-color);
|
|
}
|
|
.pagination-primary-color {
|
|
.page-item.active .page-link,
|
|
.page-item.active .page-link:focus,
|
|
.page-item.active .page-link:hover {
|
|
color: #fff;
|
|
background-color: map-get($data, skin-primary-color);
|
|
border-color: map-get($data, skin-primary-color);
|
|
}
|
|
.page-link {
|
|
color: map-get($data, skin-primary-color);
|
|
}
|
|
}
|
|
}
|
|
} |