Merge pull request #2280 from weseek/imprv/fix-alert-and-badge

Imprv/fix alert and badge

src/client/styles/scss/_override-bootstrap.scss

@@ -124,13 +124,4 @@
     margin-bottom: 18px;
     overflow: hidden;
   }
-
-  // badge
-  .badge {
-    letter-spacing: 0.05em;
-    &.badge-warning {
-      // badge-warning text is white color in bootstrap3
-      color: white;
-    }
-  }
 }

src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -52,26 +52,18 @@ $theme-colors: map-merge($theme-colors, $colors);
   }
 }
 
-@each $theme-color, $color in $theme-colors {
-  .alert.alert-#{$theme-color} {
-    color: $color-alert;
-    background: $color;
-    border: none;
-
-    a:not(.btn) {
-      color: $bgcolor-global;
-
-      &:hover,
-      &:focus {
-        color: lighten($color, 30%);
-      }
-    }
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    @include alert-variant(
+      theme-color-level($color, $alert-bg-level),
+      theme-color-level($color, $alert-border-level),
+      theme-color-level($color, $alert-color-level)
+    );
   }
 }
 
-@each $theme-color, $color in $theme-colors {
-  .badge.badge-#{$theme-color} {
-    color: $color-badge;
-    background: $color;
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
   }
 }

src/client/styles/scss/theme/antarctic.scss

@@ -108,12 +108,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($themecolor, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -180,12 +174,6 @@ html[dark] {
 //   $color-dropdown-link-active: $color-global;
 //   $color-dropdown-link-hover: $color-reversal;
 
-//   // alert
-//   $color-alert: $color-global;
-
-//   // badge
-//   $color-badge: $color-global;
-
 //   // Sidebar
 //   $bgcolor-sidebar: $bgcolor-navbar;
 //   $color-sidebar-context: $color-global;

src/client/styles/scss/theme/christmas.scss

@@ -98,12 +98,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($themecolor, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

src/client/styles/scss/theme/default.scss

@@ -95,12 +95,6 @@ html[light] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 }
@@ -188,12 +182,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: $primary;
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 }

src/client/styles/scss/theme/future.scss

@@ -53,9 +53,9 @@ html[dark] {
   $bgcolor-sidebar-list-group: #162126; // optional
 
   // Sidebar resize button
-  $color-resize-button: #0E2329;
-  $bgcolor-resize-button: #00C2C4;
-  $color-resize-button-hover: #0E2329;
+  $color-resize-button: #0e2329;
+  $bgcolor-resize-button: #00c2c4;
+  $color-resize-button-hover: #0e2329;
   $bgcolor-resize-button-hover: lighten($bgcolor-resize-button, 5%);
 
   // Icon colors
@@ -73,12 +73,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 

src/client/styles/scss/theme/halloween.scss

@@ -103,12 +103,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 
@@ -121,5 +115,4 @@ html[dark] {
     color: #edba4a;
     background: #000000;
   }
-
 }

src/client/styles/scss/theme/island.scss

@@ -73,12 +73,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 

src/client/styles/scss/theme/kibela.scss

@@ -61,12 +61,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($bgcolor-theme, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   // Sidebar
   $bgcolor-sidebar: $bgcolor-theme;
   $color-sidebar-context: $color-reversal;

src/client/styles/scss/theme/mono-blue.scss

@@ -71,12 +71,6 @@ html[light] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -170,12 +164,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: $primary;
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-dark';
 

src/client/styles/scss/theme/nature.scss

@@ -90,12 +90,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: lighten($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -119,64 +113,3 @@ html[dark] {
     }
   }
 }
-
-//== Dark Mode
-//
-// html[dark] {
-//   $primary: #d65a31;
-
-//   $basecolor: #222831;
-
-//   // Background colors
-//   $bgcolor-global: $basecolor;
-//   $bgcolor-navbar: #151515;
-//   $bgcolor-inline-code: darken($basecolor, 5%);
-//   $bgcolor-card: darken($basecolor, 5%);
-
-//   // Font colors
-//   $color-global: #eeeeee;
-//   $color-reversal: #333333;
-//   // $color-header: desaturate($primary, 20%);
-//   $color-link: $primary;
-//   $color-link-hover: lighten($color-link, 10%);
-//   $color-link-wiki: lighten($basecolor, 50%);
-//   $color-link-wiki-hover: darken($color-link-wiki, 5%);
-//   $color-link-nabvar: $color-global;
-//   $color-inline-code: #c7254e;
-
-//   // List Group colors
-//   $color-list: $color-global;
-//   $bgcolor-list: $bgcolor-global;
-//   $color-list-active: $color-reversal;
-//   $bgcolor-list-active: $primary;
-//   $color-list-hover: $color-reversal;
-
-//   // Logo colors
-//   $bgcolor-logo: $bgcolor-navbar;
-//   $fillcolor-logo-mark: #444;
-
-//   // Icon colors
-//   $color-editor-icons: darken($accentcolor, 15%);
-
-//   // Border colors
-//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
-
-//   // Dropdown colors
-//   $bgcolor-dropdown-link-active: $primary;
-//   $color-dropdown-link-active: $color-global;
-//   $color-dropdown-link-hover: $color-reversal;
-
-//   // alert
-//   $color-alert: $color-global;
-
-//   // badge
-//   $color-badge: $color-global;
-
-//   // Sidebar
-//   $bgcolor-sidebar: $bgcolor-navbar;
-//   $color-sidebar-context: $color-global;
-//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
-
-//   @import 'apply-colors';
-//   @import 'apply-colors-dark';
-// }

src/client/styles/scss/theme/spring.scss

@@ -89,12 +89,6 @@ html[dark] {
   // admin theme box
   $color-theme-color-box: darken($primary, 20%);
 
-  // alert
-  $color-alert: $color-reversal;
-
-  // badge
-  $color-badge: $color-reversal;
-
   @import 'apply-colors';
   @import 'apply-colors-light';
 
@@ -145,64 +139,3 @@ html[dark] {
     }
   }
 }
-
-//== Dark Mode
-//
-// html[dark] {
-//   $primary: #d65a31;
-
-//   $basecolor: #222831;
-
-//   // Background colors
-//   $bgcolor-global: $basecolor;
-//   $bgcolor-navbar: #151515;
-//   $bgcolor-inline-code: darken($basecolor, 5%);
-//   $bgcolor-card: darken($basecolor, 5%);
-
-//   // Font colors
-//   $color-global: #eeeeee;
-//   $color-reversal: #333333;
-//   // $color-header: desaturate($primary, 20%);
-//   $color-link: $primary;
-//   $color-link-hover: lighten($color-link, 10%);
-//   $color-link-wiki: lighten($basecolor, 50%);
-//   $color-link-wiki-hover: darken($color-link-wiki, 5%);
-//   $color-link-nabvar: $color-global;
-//   $color-inline-code: #c7254e;
-
-//   // List Group colors
-//   $color-list: $color-global;
-//   $bgcolor-list: $bgcolor-global;
-//   $color-list-active: $color-reversal;
-//   $bgcolor-list-active: $primary;
-//   $color-list-hover: $color-reversal;
-
-//   // Logo colors
-//   $bgcolor-logo: $bgcolor-navbar;
-//   $fillcolor-logo-mark: #444;
-
-//   // Icon colors
-//   $color-editor-icons: darken($accentcolor, 15%);
-
-//   // Border colors
-//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
-
-//   // Dropdown colors
-//   $bgcolor-dropdown-link-active: $primary;
-//   $color-dropdown-link-active: $color-global;
-//   $color-dropdown-link-hover: $color-reversal;
-
-//   // alert
-//   $color-alert: $color-global;
-
-//   // badge
-//   $color-badge: $color-global;
-
-//   // Sidebar
-//   $bgcolor-sidebar: $bgcolor-navbar;
-//   $color-sidebar-context: $color-global;
-//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
-
-//   @import 'apply-colors';
-//   @import 'apply-colors-dark';
-// }

src/client/styles/scss/theme/wood.scss

@@ -96,9 +96,6 @@ html[dark] {
   // alert
   $color-alert: $color-reversal;
 
-  // badge
-  $color-badge: $color-reversal;
-
   // portal
   $info: lighten($themecolor, 10%);
 
@@ -147,64 +144,3 @@ html[dark] {
     color: rgba(black, 0.5);
   }
 }
-
-//== Dark Mode
-//
-// html[dark] {
-//   $primary: #d65a31;
-
-//   $basecolor: #222831;
-
-//   // Background colors
-//   $bgcolor-global: $basecolor;
-//   $bgcolor-navbar: #151515;
-//   $bgcolor-inline-code: darken($basecolor, 5%);
-//   $bgcolor-card: darken($basecolor, 5%);
-
-//   // Font colors
-//   $color-global: #eeeeee;
-//   $color-reversal: #333333;
-//   // $color-header: desaturate($primary, 20%);
-//   $color-link: $primary;
-//   $color-link-hover: lighten($color-link, 10%);
-//   $color-link-wiki: lighten($basecolor, 50%);
-//   $color-link-wiki-hover: darken($color-link-wiki, 5%);
-//   $color-link-nabvar: $color-global;
-//   $color-inline-code: #c7254e;
-
-//   // List Group colors
-//   $color-list: $color-global;
-//   $bgcolor-list: $bgcolor-global;
-//   $color-list-active: $color-reversal;
-//   $bgcolor-list-active: $primary;
-//   $color-list-hover: $color-reversal;
-
-//   // Logo colors
-//   $bgcolor-logo: $bgcolor-navbar;
-//   $fillcolor-logo-mark: #444;
-
-//   // Icon colors
-//   $color-editor-icons: darken($accentcolor, 15%);
-
-//   // Border colors
-//   $border-color-theme: black; // former: `$navbar-border: #ccc;`
-
-//   // Dropdown colors
-//   $bgcolor-dropdown-link-active: $primary;
-//   $color-dropdown-link-active: $color-global;
-//   $color-dropdown-link-hover: $color-reversal;
-
-//   // alert
-//   $color-alert: $color-global;
-
-//   // badge
-//   $color-badge: $color-global;
-
-//   // Sidebar
-//   $bgcolor-sidebar: $bgcolor-navbar;
-//   $color-sidebar-context: $color-global;
-//   $bgcolor-sidebar-context: lighten($bgcolor-navbar, 5%);
-
-//   @import 'apply-colors';
-//   @import 'apply-colors-dark';
-// }