Browse Source

added ability to change accent color (link & pagination)

REJack 5 years ago
parent
commit
c153f13057
3 changed files with 46 additions and 0 deletions
  1. 10 0
      build/scss/_colors.scss
  2. 30 0
      build/scss/_mixins.scss
  3. 6 0
      docs/layout.md

+ 10 - 0
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 - 0
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 - 0
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: