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.
231 lines
6.2 KiB
SCSS
231 lines
6.2 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);
|
|
}
|
|
|
|
@each $skin, $data in $skins {
|
|
.#{$skin}-skin {
|
|
.gradient {
|
|
background: map-get($data, skin-gradient-start);
|
|
background: linear-gradient(135deg, map-get($data, skin-gradient-start) 0%, map-get($data, skin-gradient-end) 100%);
|
|
}
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.double-nav {
|
|
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 {
|
|
border-bottom: 1px solid $skins-border-color;
|
|
a {
|
|
@if $skin=="white" {
|
|
.fa {
|
|
color: map-get($data, skin-text);
|
|
}
|
|
}
|
|
&:hover {
|
|
.fa {
|
|
color: map-get($data, skin-accent) !important;
|
|
transition: $skins-side-nav-hover-transition;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@if $skin=="white" {
|
|
.search-form .md-form input {
|
|
color: map-get($data, skin-text) !important;
|
|
border-bottom: $skins-white-search-border-bottom;
|
|
@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);
|
|
transition: $skins-side-nav-hover-transition;
|
|
&.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 $white;
|
|
border-bottom: 2px solid $white;
|
|
}
|
|
&: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: $white;
|
|
background-color: map-get($data, skin-primary-color);
|
|
}
|
|
.page-link {
|
|
color: map-get($data, skin-primary-color);
|
|
&:focus {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|