AdminLTE/build/scss/mixins/_accent.scss

107 lines
2.6 KiB
SCSS
Raw Normal View History

//
// Mixins: Accent
//
// Accent Variant
@mixin accent-variant($name, $color) {
2020-09-23 14:08:15 +00:00
$link-color: $color;
.accent-#{$name} {
$link-hover-color: darken($color, 15%);
$pagination-active-bg: $color;
$pagination-active-border-color: $color;
2019-12-04 08:34:36 +00:00
.btn-link,
2021-07-12 20:04:57 +00:00
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.badge):not(.btn),
2020-12-02 09:09:15 +00:00
.nav-tabs .nav-link {
color: $link-color;
@include hover () {
color: $link-hover-color;
}
}
.dropdown-item {
&:active,
&.active {
background-color: $color;
color: color-yiq($color);
}
}
.custom-control-input:checked ~ .custom-control-label {
&::before {
background-color: $color;
border-color: darken($color, 20%);
}
&::after {
$new-color: color-yiq($color);
background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, "#", "%23"), str-replace(#{$new-color}, "#", "%23"));
}
}
.form-control:focus:not(.is-invalid):not(.is-warning):not(.is-valid),
.custom-select:focus,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-file-input:focus ~ .custom-file-label {
border-color: lighten($color, 25%);
}
.page-item {
2020-04-01 15:01:35 +00:00
.page-link {
color: $link-color;
}
&.active a,
&.active .page-link {
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;
2020-04-01 15:01:35 +00:00
color: $pagination-active-color;
}
2020-04-01 15:01:35 +00:00
&.disabled a,
&.disabled .page-link {
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border-color;
2020-04-01 15:01:35 +00:00
color: $pagination-disabled-color;
}
}
[class*="sidebar-dark-"] {
.sidebar {
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
color: $sidebar-dark-color;
@include hover () {
color: $sidebar-dark-hover-color;
}
}
}
}
[class*="sidebar-light-"] {
.sidebar {
a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
color: $sidebar-light-color;
@include hover () {
color: $sidebar-light-hover-color;
}
}
}
}
}
@include dark-mode () {
&.accent-#{$name} {
.page-item {
.page-link {
&:hover,
&:focus {
color: lighten($link-color, 5%);
}
2020-09-23 14:08:15 +00:00
}
}
}
}
}