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%);
|
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
|
// ETC
|
||||||
@mixin translate($x, $y) {
|
@mixin translate($x, $y) {
|
||||||
transform: 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-*`
|
- `.navbar-*`
|
||||||
- `.sidebar-dark-*`
|
- `.sidebar-dark-*`
|
||||||
- `.sidebar-light-*`
|
- `.sidebar-light-*`
|
||||||
|
- `.accent-*`
|
||||||
|
|
||||||
|
> ###### New
|
||||||
|
> You can use override the link/accent color in AdminLTE, you can add `.accent-*` to `body`.
|
||||||
|
{: .quote-info}
|
||||||
|
|
||||||
> ###### Info
|
> ###### Info
|
||||||
> You can combine `.navbar-*` with `.navbar-light` or `.navbar-dark`.
|
> You can combine `.navbar-*` with `.navbar-light` or `.navbar-dark`.
|
||||||
|
{: .quote-info}
|
||||||
|
|
||||||
The following colors are available:
|
The following colors are available:
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue