Merge pull request #16 from Fraham/Fraham-Alerts

Alerts

README.md

@@ -34,6 +34,13 @@ Here's the full workflow for customization:
 - preview changes with `npm start` and go to http://localhost:8080 (changes are automatically reloaded on page)
 - OR run `npm run build` to create the new CSS in the /dist folder
 
+### Adding a new color
+- Go to file `src/color.less`
+- Add a new varable and assign it to a color hex value
+- Add the new variable to the list of colors
+- Add a new variable for the light variation
+- Once `npm start` or `npm run build` has been run then it will create the new css so that the new color can be used as a text, border or background
+
 ## Contributing
 This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process.
 

index.html

@@ -821,6 +821,36 @@ function add(x, y) {
 &lt;img src="https://unsplash.it/300" class="no-responsive no-border"&gt;</pre>
       </div>
     </div>
+    <div class="section">
+      <h2>Alerts</h2>
+      <div class="row flex-spaces">
+          <div class="alert alert-primary">
+              Alert-primary
+          </div>
+          <div class="alert alert-secondary">
+              Alert-secondary
+          </div>
+          <div class="alert alert-success">
+              Alert-success
+          </div>
+          <div class="alert alert-warning">
+              Alert-warning
+          </div>
+          <div class="alert alert-danger">
+              Alert-danger
+          </div>
+      </div>
+      <div class="docs">
+          <pre>
+  &lt;div class="row flex-spaces"&gt;
+    &lt;div class="alert alert-primary"&gt;Alert-primary&lt;/div&gt;
+    &lt;div class="alert alert-secondary"&gt;Alert-secondary&lt;/div&gt;
+    &lt;div class="alert alert-success"&gt;Alert-success&lt;/div&gt;
+    &lt;div class="alert alert-warning"&gt;Alert-warning&lt;/div&gt;
+    &lt;div class="alert alert-danger"&gt;Alert-danger&lt;/div&gt;
+  &lt;/div&gt;</pre>
+        </div>
+    </div>
     <div class="section">
       <h2 id="download">Download</h2>
       <p>Download the latest version (1.0.1) using either of the links below. Or download an older release via Github.</p>

src/alerts.less

@@ -0,0 +1,18 @@
+.alert{
+    .border;
+    padding: 15px;
+    margin-bottom: 20px;
+    width: 100%;
+}
+
+.make-alert-color-classes(@a: length(@colors)) when (@a > 0) {
+    .make-alert-color-classes(@a - 1);
+    @color: extract(@colors, @a);
+    .alert-@{color} {
+        border-color: @@color;
+        color: @@color;
+        background-color: ~"@{@{color}-light}";
+    }
+}
+
+.make-alert-color-classes();

src/borders.less

@@ -40,21 +40,6 @@
 .child-borders > * {
     border: 2px solid @primary;
 }
-.border-primary {
-    border-color: @primary;
-}
-.border-secondary {
-    border-color: @secondary;
-}
-.border-success {
-    border-color: @success;
-}
-.border-warning {
-    border-color: @warning;
-}
-.border-danger {
-    border-color: @danger;
-}
 .border-white {
     border-color: #FFF;
 }
@@ -66,4 +51,14 @@
 }
 .border-thick {
     border-width: 5px;
-}
+}
+
+.make-border-color-classes(@i: length(@colors)) when (@i > 0) {
+    .make-border-color-classes(@i - 1);
+    @color: extract(@colors, @i);
+    .border-@{color} {
+        border-color: @@color;
+    }
+}
+
+.make-border-color-classes();

src/colors.less

@@ -5,44 +5,23 @@
 @warning: #ddcd45;
 @danger: #a7342d;
 
-@main-colors: @primary, @secondary, @success, @warning, @danger;
-
 @primary-light: lighten(@primary, 50%);
 @secondary-light: lighten(@secondary, 50%);
 @success-light: lighten(@success, 30%);
 @warning-light: lighten(@warning, 30%);
 @danger-light: lighten(@danger, 45%);
 
-// Mixin to create colors from list
-.text-primary {
-    color: @primary;
-}
-.text-secondary {
-    color: @secondary;
-}
-.text-success {
-    color: @success;
-}
-.text-warning {
-    color: @warning;
-}
-.text-danger {
-    color: @danger;
-}
-.background {
-    &-primary {
-        background-color: @primary-light;
+@colors: primary, secondary, success, warning, danger;
+
+.make-text-color-classes(@i: length(@colors)) when (@i > 0) {
+    .make-text-color-classes(@i - 1);
+    @color: extract(@colors, @i);
+    .text-@{color} {
+        color: @@color;
     }
-    &-secondary {
-        background-color: @secondary-light;
+    .background-@{color}{
+        background-color: ~"@{@{color}-light}";
     }
-    &-success {
-        background-color: @success-light;
-    }
-    &-warning {
-        background-color: @warning-light;
-    }
-    &-danger {
-        background-color: @danger-light;
-    }
-}
+}
+
+.make-text-color-classes();

src/styles.less

@@ -13,4 +13,5 @@
 @import (less) "./tables.less";
 @import (less) "./images.less";
 @import (less) "./utilities.less";
-@import (less) "./popovers.less";
+@import (less) "./popovers.less";
+@import (less) "./alerts.less";