mirror of https://github.com/ColorlibHQ/AdminLTE
added ability to change accent color (link & pagination)
parent
c78169c3f7
commit
c153f13057
|
@ -70,3 +70,13 @@ a.text-muted:hover {
|
|||
color: lighten($gray-500, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
// Accent colors (theme colors)
|
||||
@each $name, $color in $theme-colors {
|
||||
@include accent-variant($name, $color);
|
||||
}
|
||||
|
||||
// Accent colors (colors)
|
||||
@each $name, $color in $colors {
|
||||
@include accent-variant($name, $color);
|
||||
}
|
||||
|
|
|
@ -511,6 +511,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
|
|
@ -52,9 +52,15 @@ AdminLTE 3.0 provides a set of color variations to apply to your sidebar (light
|
|||
- `.navbar-*`
|
||||
- `.sidebar-dark-*`
|
||||
- `.sidebar-light-*`
|
||||
- `.accent-*`
|
||||
|
||||
> ###### New
|
||||
> You can use override the link/accent color in AdminLTE, you can add `.accent-*` to `body`.
|
||||
{: .quote-info}
|
||||
|
||||
> ###### Info
|
||||
> You can combine `.navbar-*` with `.navbar-light` or `.navbar-dark`.
|
||||
{: .quote-info}
|
||||
|
||||
The following colors are available:
|
||||
|
||||
|
|
Loading…
Reference in New Issue