feat(alerts): add styles for alert icon

seb-oss · Nov 15, 2018 · b6fa7a0 · b6fa7a0
1 parent ac72396
commit b6fa7a0
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -379,6 +379,7 @@ $modal-footer-border-width:         0 !default;
 $alert-padding-x:                   .75rem !default;
 $alert-link-font-weight:            $font-weight-medium !default; //500
 $alert-border-width:                0 !default;
+$alert-icon-width:                  1.125rem !default; // SEB Specific
 
 
 // Progress bars

diff --git a/scss/styles/_alert.scss b/scss/styles/_alert.scss
@@ -92,3 +92,27 @@
     @include alert-outline-variant($value, $value, theme-color-level($color, $alert-color-level));
   }
 }
+
+// Alert icons
+.alert {
+  &.alert-icon {
+    &.alert-danger, &.alert-warning {
+      padding-left: $alert-icon-width + ($alert-padding-x*2);
+      &::before {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        display: inline-block;
+        font-style: normal;
+        font-variant: normal;
+        text-rendering: auto;
+        font-family: "Font Awesome 5 Pro";
+        font-weight: 300;
+        content: "\f071";
+        line-height: inherit;
+        margin-right: $alert-padding-x;
+        margin-left: -$alert-icon-width - $alert-padding-x;
+        width: $alert-icon-width;
+      }
+    }
+  }
+}
diff --git a/src/example/components/alerts/alerts.component.html b/src/example/components/alerts/alerts.component.html
@@ -98,6 +98,31 @@ <h4 class="card-header">Alert</h4>
     <exemplify [selector]="'#alertExample .alert'"></exemplify>
   </div>
 </div>
+<div class="card mb-4" id="alertIconExample">
+  <h4 class="card-header">Alert with icons</h4>
+  <div class="card-body">
+    <p>The examples below use the traditional <code>.alert-*</code> class (replace * with context), together with <code>.alert-icon</code> to add extra emphasis by displaying an icon next to the message. Note that only <code>warning</code> and <code>danger</code> alerts have icons at the moment.</p>
+    <div class="alert alert-primary alert-icon" role="alert">
+      <strong>Primary content</strong> This message just needs to stand out.
+    </div>
+    <div class="alert alert-secondary alert-icon" role="alert">
+      <strong>Secondary content</strong> This message just needs to stand out.
+    </div>
+    <div class="alert alert-success alert-icon" role="alert">
+      <strong>Well done!</strong> You successfully read this important alert message.
+    </div>
+    <div class="alert alert-info alert-icon" role="alert">
+      <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
+    </div>
+    <div class="alert alert-warning alert-icon" role="alert">
+      <strong>Warning!</strong> Better check yourself, you're not looking too good.
+    </div>
+    <div class="alert alert-danger alert-icon" role="alert">
+      <strong>Oh snap!</strong> Change a few things up and try submitting again. Look it works with really long texts too. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu purus in odio finibus dignissim. Pellentesque nibh tortor, lacinia a dapibus et, scelerisque quis dui.
+    </div>
+    <exemplify [selector]="'#alertIconExample .alert'"></exemplify>
+  </div>
+</div>
 <div class="card mb-4" id="alertLinkExample">
   <h4 class="card-header">Alert with link</h4>
   <div class="card-body">