[#111] Remove dependency on Bootstrap's alert style

cyChop · Nov 23, 2016 · 5c4b7ea · 5c4b7ea
1 parent f447873
commit 5c4b7ea
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/src/js/template/beverages.html b/src/js/template/beverages.html
@@ -1,8 +1,8 @@
 <div class="beverages-container">
-    <div rv-class-up="error | toBoolean | not" class="alert alert-danger slide" role="alert">
+    <div rv-class-up="error | toBoolean | not" class="bubble error slide" role="alert">
         <i class="icon-error"></i> {error}
     </div>
-    <div rv-class-up="ready | or error" class="alert alert-info slide">
+    <div rv-class-up="ready | or error" class="bubble info slide">
         <i class="icon icon-loading spin"></i> {i18n.loading}
     </div>
     <div rv-class-up="ready | not | or error" class="slide">
@@ -68,7 +68,7 @@ <h6 rv-if="orders:total | eq 0" class="dropdown-header">{i18n.orders.none}</h6>
                 <input type="text" class="form-control" id="field-text-search" rv-value="filters:text"/>
             </div>
         </div>
-        <div class="slide alert alert-info" role="alert" rv-class-up="beverages._shown | eq 0 | not">
+        <div class="slide bubble info" role="alert" rv-class-up="beverages._shown | eq 0 | not">
             <i class="icon-info"></i> {i18n.error.empty}
         </div>
         <div class="beverage slide" rv-class-up="b._show | not" rv-addclass="b:basis" rv-class-detailed="b._detailed"

diff --git a/src/scss/_bootstrap.scss b/src/scss/_bootstrap.scss
@@ -37,7 +37,7 @@
 //@import "node_modules/bootstrap/scss/pagination";
 @import "node_modules/bootstrap/scss/tags";
 //@import "node_modules/bootstrap/scss/jumbotron";
-@import "node_modules/bootstrap/scss/alert";
+//@import "node_modules/bootstrap/scss/alert";
 //@import "node_modules/bootstrap/scss/progress";
 //@import "node_modules/bootstrap/scss/media";
 //@import "node_modules/bootstrap/scss/list-group";

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -35,6 +35,11 @@ $moment-icons: (
         unknown: $icon-question
 );
 
+$bubble-variants: (
+        info: map-get(map-get($bev-variants, tea-oolong), color),
+        error: map-get(map-get($bev-variants, tea-rooibos), color)
+);
+
 $white: #fff;
 $border-color: #ccc;
 $bev-icon-back-color: #666;
diff --git a/src/scss/beverages.scss b/src/scss/beverages.scss
@@ -272,6 +272,20 @@
     }
   }
 
+  //* Information messages */
+  .bubble {
+    margin: 5px;
+    padding: 15px;
+    font-size: 1.5rem;
+
+    @each $type, $color in $bubble-variants {
+      &.#{$type} {
+        background-color: $color;
+        color: tint($color, 90%);
+      }
+    }
+  }
+
   //* Utility classes */
   .tag {
     @each $bev-variant, $icon-map in $bev-variants {