Browse Source

added ability to change accent color (link & pagination)

pull/2256/head
REJack 5 years ago
parent
commit
c153f13057
No known key found for this signature in database
GPG Key ID: 9F3976CC630CC888
  1. 10
      build/scss/_colors.scss
  2. 30
      build/scss/_mixins.scss
  3. 6
      docs/layout.md

10
build/scss/_colors.scss

@ -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);
}

30
build/scss/_mixins.scss

@ -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);

6
docs/layout.md

@ -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…
Cancel
Save