cerulean: fix btn-check active background, closes #1284

thomaspark · Nov 16, 2023 · 6d67bf7 · 6d67bf7
1 parent 2f248e9
commit 6d67bf7
Show file tree

Hide file tree

Showing 14 changed files with 432 additions and 8 deletions.
diff --git a/dist/cerulean/_bootswatch.scss b/dist/cerulean/_bootswatch.scss
@@ -12,6 +12,14 @@ $text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
   @include gradient-y-three-colors(tint-color($color, 16%), $color, 60%, shade-color($color, 6%));
 }
 
+@mixin btn-shadow-hover($color){
+  @include gradient-y-three-colors($color, shade-color($color, 5%), 60%, shade-color($color, 15%));
+}
+
+@mixin btn-shadow-active($color){
+  @include gradient-y-three-colors(shade-color($color, 20%), shade-color($color, 20%), 60%, shade-color($color, 30%));
+}
+
 // Navbar
 
 .navbar {
@@ -42,6 +50,18 @@ $text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
   .btn-#{$color} {
     @include btn-shadow($value);
   }
+
+  .btn-#{$color}:hover {
+    @include btn-shadow-hover($value);
+  }
+
+  .btn-#{$color}:active {
+    @include btn-shadow-active($value);
+  }
+
+  .btn-check:checked + .btn-#{$color} {
+    @include btn-shadow-active($value);
+  }
 }
 
 // Typography

diff --git a/dist/cerulean/bootstrap.css b/dist/cerulean/bootstrap.css
@@ -12114,34 +12114,130 @@ textarea.form-control-lg {
   background-image: linear-gradient(#50b3eb, #2fa4e7 60%, #2c9ad9);
 }
 
+.btn-primary:hover {
+  background-image: linear-gradient(#2fa4e7, #2d9cdb 60%, #288bc4);
+}
+
+.btn-primary:active {
+  background-image: linear-gradient(#2683b9, #2683b9 60%, #2173a2);
+}
+
+.btn-check:checked + .btn-primary {
+  background-image: linear-gradient(#2683b9, #2683b9 60%, #2173a2);
+}
+
 .btn-secondary {
   background-image: linear-gradient(#edeff2, #e9ecef 60%, #dbdee1);
 }
 
+.btn-secondary:hover {
+  background-image: linear-gradient(#e9ecef, #dde0e3 60%, #c6c9cb);
+}
+
+.btn-secondary:active {
+  background-image: linear-gradient(#babdbf, #babdbf 60%, #a3a5a7);
+}
+
+.btn-check:checked + .btn-secondary {
+  background-image: linear-gradient(#babdbf, #babdbf 60%, #a3a5a7);
+}
+
 .btn-success {
   background-image: linear-gradient(#89b659, #73a839 60%, #6c9e36);
 }
 
+.btn-success:hover {
+  background-image: linear-gradient(#73a839, #6da036 60%, #628f30);
+}
+
+.btn-success:active {
+  background-image: linear-gradient(#5c862e, #5c862e 60%, #517628);
+}
+
+.btn-check:checked + .btn-success {
+  background-image: linear-gradient(#5c862e, #5c862e 60%, #517628);
+}
+
 .btn-info {
   background-image: linear-gradient(#2b5b89, #033c73 60%, #03386c);
 }
 
+.btn-info:hover {
+  background-image: linear-gradient(#033c73, #03396d 60%, #033362);
+}
+
+.btn-info:active {
+  background-image: linear-gradient(#02305c, #02305c 60%, #022a51);
+}
+
+.btn-check:checked + .btn-info {
+  background-image: linear-gradient(#02305c, #02305c 60%, #022a51);
+}
+
 .btn-warning {
   background-image: linear-gradient(#e27129, #dd5600 60%, #d05100);
 }
 
+.btn-warning:hover {
+  background-image: linear-gradient(#dd5600, #d25200 60%, #bc4900);
+}
+
+.btn-warning:active {
+  background-image: linear-gradient(#b14500, #b14500 60%, #9b3c00);
+}
+
+.btn-check:checked + .btn-warning {
+  background-image: linear-gradient(#b14500, #b14500 60%, #9b3c00);
+}
+
 .btn-danger {
   background-image: linear-gradient(#d04045, #c71c22 60%, #bb1a20);
 }
 
+.btn-danger:hover {
+  background-image: linear-gradient(#c71c22, #bd1b20 60%, #a9181d);
+}
+
+.btn-danger:active {
+  background-image: linear-gradient(#9f161b, #9f161b 60%, #8b1418);
+}
+
+.btn-check:checked + .btn-danger {
+  background-image: linear-gradient(#9f161b, #9f161b 60%, #8b1418);
+}
+
 .btn-light {
   background-image: linear-gradient(#f9fafb, #f8f9fa 60%, #e9eaeb);
 }
 
+.btn-light:hover {
+  background-image: linear-gradient(#f8f9fa, #ecedee 60%, #d3d4d5);
+}
+
+.btn-light:active {
+  background-image: linear-gradient(#c6c7c8, #c6c7c8 60%, #aeaeaf);
+}
+
+.btn-check:checked + .btn-light {
+  background-image: linear-gradient(#c6c7c8, #c6c7c8 60%, #aeaeaf);
+}
+
 .btn-dark {
   background-image: linear-gradient(#545a5f, #343a40 60%, #31373c);
 }
 
+.btn-dark:hover {
+  background-image: linear-gradient(#343a40, #31373d 60%, #2c3136);
+}
+
+.btn-dark:active {
+  background-image: linear-gradient(#2a2e33, #2a2e33 60%, #24292d);
+}
+
+.btn-check:checked + .btn-dark {
+  background-image: linear-gradient(#2a2e33, #2a2e33 60%, #24292d);
+}
+
 .text-secondary {
   color: #adb5bd !important;
 }

diff --git a/dist/cerulean/bootstrap.min.css b/dist/cerulean/bootstrap.min.css
diff --git a/dist/cerulean/bootstrap.min.css.map b/dist/cerulean/bootstrap.min.css.map
diff --git a/dist/cerulean/bootstrap.rtl.css b/dist/cerulean/bootstrap.rtl.css
@@ -12079,34 +12079,130 @@ textarea.form-control-lg {
   background-image: linear-gradient(#50b3eb, #2fa4e7 60%, #2c9ad9);
 }
 
+.btn-primary:hover {
+  background-image: linear-gradient(#2fa4e7, #2d9cdb 60%, #288bc4);
+}
+
+.btn-primary:active {
+  background-image: linear-gradient(#2683b9, #2683b9 60%, #2173a2);
+}
+
+.btn-check:checked + .btn-primary {
+  background-image: linear-gradient(#2683b9, #2683b9 60%, #2173a2);
+}
+
 .btn-secondary {
   background-image: linear-gradient(#edeff2, #e9ecef 60%, #dbdee1);
 }
 
+.btn-secondary:hover {
+  background-image: linear-gradient(#e9ecef, #dde0e3 60%, #c6c9cb);
+}
+
+.btn-secondary:active {
+  background-image: linear-gradient(#babdbf, #babdbf 60%, #a3a5a7);
+}
+
+.btn-check:checked + .btn-secondary {
+  background-image: linear-gradient(#babdbf, #babdbf 60%, #a3a5a7);
+}
+
 .btn-success {
   background-image: linear-gradient(#89b659, #73a839 60%, #6c9e36);
 }
 
+.btn-success:hover {
+  background-image: linear-gradient(#73a839, #6da036 60%, #628f30);
+}
+
+.btn-success:active {
+  background-image: linear-gradient(#5c862e, #5c862e 60%, #517628);
+}
+
+.btn-check:checked + .btn-success {
+  background-image: linear-gradient(#5c862e, #5c862e 60%, #517628);
+}
+
 .btn-info {
   background-image: linear-gradient(#2b5b89, #033c73 60%, #03386c);
 }
 
+.btn-info:hover {
+  background-image: linear-gradient(#033c73, #03396d 60%, #033362);
+}
+
+.btn-info:active {
+  background-image: linear-gradient(#02305c, #02305c 60%, #022a51);
+}
+
+.btn-check:checked + .btn-info {
+  background-image: linear-gradient(#02305c, #02305c 60%, #022a51);
+}
+
 .btn-warning {
   background-image: linear-gradient(#e27129, #dd5600 60%, #d05100);
 }
 
+.btn-warning:hover {
+  background-image: linear-gradient(#dd5600, #d25200 60%, #bc4900);
+}
+
+.btn-warning:active {
+  background-image: linear-gradient(#b14500, #b14500 60%, #9b3c00);
+}
+
+.btn-check:checked + .btn-warning {
+  background-image: linear-gradient(#b14500, #b14500 60%, #9b3c00);
+}
+
 .btn-danger {
   background-image: linear-gradient(#d04045, #c71c22 60%, #bb1a20);
 }
 
+.btn-danger:hover {
+  background-image: linear-gradient(#c71c22, #bd1b20 60%, #a9181d);
+}
+
+.btn-danger:active {
+  background-image: linear-gradient(#9f161b, #9f161b 60%, #8b1418);
+}
+
+.btn-check:checked + .btn-danger {
+  background-image: linear-gradient(#9f161b, #9f161b 60%, #8b1418);
+}
+
 .btn-light {
   background-image: linear-gradient(#f9fafb, #f8f9fa 60%, #e9eaeb);
 }
 
+.btn-light:hover {
+  background-image: linear-gradient(#f8f9fa, #ecedee 60%, #d3d4d5);
+}
+
+.btn-light:active {
+  background-image: linear-gradient(#c6c7c8, #c6c7c8 60%, #aeaeaf);
+}
+
+.btn-check:checked + .btn-light {
+  background-image: linear-gradient(#c6c7c8, #c6c7c8 60%, #aeaeaf);
+}
+
 .btn-dark {
   background-image: linear-gradient(#545a5f, #343a40 60%, #31373c);
 }
 
+.btn-dark:hover {
+  background-image: linear-gradient(#343a40, #31373d 60%, #2c3136);
+}
+
+.btn-dark:active {
+  background-image: linear-gradient(#2a2e33, #2a2e33 60%, #24292d);
+}
+
+.btn-check:checked + .btn-dark {
+  background-image: linear-gradient(#2a2e33, #2a2e33 60%, #24292d);
+}
+
 .text-secondary {
   color: #adb5bd !important;
 }

diff --git a/dist/cerulean/bootstrap.rtl.min.css b/dist/cerulean/bootstrap.rtl.min.css
diff --git a/dist/cerulean/bootstrap.rtl.min.css.map b/dist/cerulean/bootstrap.rtl.min.css.map
diff --git a/docs/5/cerulean/_bootswatch.scss b/docs/5/cerulean/_bootswatch.scss
@@ -12,6 +12,14 @@ $text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
   @include gradient-y-three-colors(tint-color($color, 16%), $color, 60%, shade-color($color, 6%));
 }
 
+@mixin btn-shadow-hover($color){
+  @include gradient-y-three-colors($color, shade-color($color, 5%), 60%, shade-color($color, 15%));
+}
+
+@mixin btn-shadow-active($color){
+  @include gradient-y-three-colors(shade-color($color, 20%), shade-color($color, 20%), 60%, shade-color($color, 30%));
+}
+
 // Navbar
 
 .navbar {
@@ -42,6 +50,18 @@ $text-shadow: 0 1px 0 rgba(0, 0, 0, .05) !default;
   .btn-#{$color} {
     @include btn-shadow($value);
   }
+
+  .btn-#{$color}:hover {
+    @include btn-shadow-hover($value);
+  }
+
+  .btn-#{$color}:active {
+    @include btn-shadow-active($value);
+  }
+
+  .btn-check:checked + .btn-#{$color} {
+    @include btn-shadow-active($value);
+  }
 }
 
 // Typography