alerts component

_src/_assets/images/icon-fail.svg

@@ -0,0 +1,14 @@
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<defs>
+</defs>
+<g>
+	<line class="st0" x1="1" y1="1" x2="59" y2="59"/>
+	<line class="st0" x1="59" y1="1" x2="1" y2="59"/>
+</g>
+</svg>

_src/_assets/images/icon-success.svg

@@ -0,0 +1,13 @@
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In  -->
+<svg version="1.1"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+	 x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<defs>
+</defs>
+<g>
+	<polyline class="st0" points="59,1 17.4,59 1,42.6 	"/>
+</g>
+</svg>

_src/_assets/styles/bigchain.scss

@@ -22,6 +22,7 @@
 @import 'bigchain/_icons';
 @import 'bigchain/_grid';
 @import 'bigchain/_sections';
+@import 'bigchain/_alerts';
 @import 'bigchain/_footer';
 
 // Content types

_src/_assets/styles/bigchain/_alerts.scss

@@ -0,0 +1,57 @@
+//
+// Alerts
+// ---
+// bigchain.io
+//
+
+// Base
+.alert {
+    @extend .small;
+    padding: $alert-padding;
+    margin-bottom: $spacer;
+    border: 1px solid transparent;
+    border-radius: $border-radius;
+    text-align: left;
+
+    // Improve alignment and spacing of inner content
+    > p + p {
+        margin-top: 5px;
+    }
+
+    > p:last-child { margin-bottom: 0 }
+}
+
+.alert__icon {
+    display: block;
+    width: 100%;
+    height: 2rem;
+    stroke-width: 3;
+    margin: 0 auto $spacer auto;
+    border-bottom: 1px solid transparent;
+    padding-bottom: $spacer;
+}
+
+.alert__title {
+
+}
+
+.alert__link {
+
+}
+
+
+//
+// Alternate styles
+//
+.alert-success {
+    @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
+}
+.alert-info {
+    @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
+}
+.alert-warning {
+    @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
+}
+.alert-danger {
+    @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
+}

_src/_assets/styles/bigchain/_buttons.scss

@@ -6,16 +6,16 @@
 
 .btn {
     display: inline-block;
+    font-family: $btn-font-family;
     font-weight: $btn-font-weight;
     text-transform: uppercase;
-    font-family: $input-font;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     cursor: pointer;
     user-select: none;
     border: 1px solid transparent;
-    @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
+    @include button-size($btn-padding-y, $btn-padding-x, $font-size-sm, $line-height, $btn-border-radius);
     transition: all .2s ease-in-out;
 
     &,

_src/_assets/styles/bigchain/_mixins.scss

@@ -5,3 +5,4 @@
 //
 
 @import "_mixins/_buttons";
+@import "_mixins/_alerts";

_src/_assets/styles/bigchain/_mixins/_alerts.scss

@@ -0,0 +1,15 @@
+// Alerts
+@mixin alert-variant($background, $border, $text-color) {
+    background-color: $background;
+    border-color: $border;
+    color: $text-color;
+
+    hr { border-top-color: darken($border, 5%); }
+
+    .alert__icon {
+        stroke: $text-color;
+        border-bottom-color: rgba($text-color, .3);
+    }
+
+    .alert__link { color: darken($text-color, 10%); }
+}

_src/_assets/styles/bigchain/_sections.scss

@@ -81,19 +81,24 @@
     background: $brand-main-blue; // fallback
     background: linear-gradient(to bottom right, $brand-main-blue 0%, lighten($brand-main-blue, 10%) 100%);
 
-    * { color: #fff }
+    .section-title,
+    .section-description { color: #fff }
 }
 
 .background--dark {
     background: $brand-main-blue-dark; // fallback
     background: linear-gradient(to bottom right, $brand-main-blue-dark 0%, lighten($brand-main-blue-dark, 10%) 100%);
 
-    * { color: #fff }
+    .section-title,
+    .section-description { color: #fff }
 }
 
 .background--gray {
     background: $brand-main-gray; // fallback
     background: linear-gradient(to bottom right, $brand-main-gray 0%, lighten($brand-main-gray, 10%) 100%);
 
-    * { color: #fff }
+    .section-title,
+    .section-description,
+    .form-control,
+    .form-label { color: #fff }
 }

_src/_assets/styles/bigchain/_typography.scss

@@ -97,7 +97,7 @@ h6, .h6 { font-size: $font-size-h6; }
 // Body text
 //
 p {
-    margin: 0 0 ($spacer / 2);
+    margin: 0 0 $spacer;
 }
 
 
@@ -122,7 +122,7 @@ small,
 strong,
 .strong,
 .bold {
-    font-weight: $font-weight-normal;
+    font-weight: $font-weight-bold;
 }
 
 // Alignment

_src/_assets/styles/bigchain/_variables.scss

@@ -23,10 +23,10 @@ $gray-lighter:            #eceeef !default;
 $gray-lightest:           #f7f7f9 !default;
 
 $brand-primary:           $brand-main-blue !default;
-$brand-success:           #5cb85c !default;
+$brand-success:           #388250 !default;
-$brand-info:              #5bc0de !default;
+$brand-info:              #3E91CE !default;
-$brand-warning:           #f0ad4e !default;
+$brand-warning:           #8E8E24 !default;
-$brand-danger:            #d9534f !default;
+$brand-danger:            #8F3B39 !default;
 
 
 //
@@ -110,9 +110,11 @@ $component-active-bg:    $brand-primary !default;
 //
 // Buttons
 //
+$btn-font-family:                $font-family-avenir;
+$btn-font-weight:                $font-weight-normal !default;
+
 $btn-padding-x:                  1.5rem !default;
 $btn-padding-y:                  .375rem !default;
-$btn-font-weight:                $font-weight-normal !default;
 
 $btn-primary-color:              #fff !default;
 $btn-primary-bg:                 $brand-primary !default;
@@ -154,6 +156,9 @@ $btn-border-radius-sm:           $border-radius-sm !default;
 //
 // Forms
 //
+$input-font:                     $font-family-avenir !default;
+$input-font-weight:              $font-weight-normal !default;
+
 $input-padding-x:                .5rem !default;
 $input-padding-y:                0 !default;
 
@@ -168,5 +173,45 @@ $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 
 $input-color-placeholder:        #999 !default;
 
-$input-font:                     $font-family-avenir !default;
+
-$input-font-weight:              $font-weight-normal !default;
+//
+// Form states and alerts
+//
+$state-success-text:             $brand-success !default;
+$state-success-bg:               lighten($brand-success, 40%) !default;
+$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
+
+$state-info-text:                $brand-info !default;
+$state-info-bg:                  lighten($brand-info, 30%) !default;
+$state-info-border:              darken(adjust-hue($state-info-bg, -10), 5%) !default;
+
+$state-warning-text:             $brand-warning !default;
+$state-warning-bg:               lighten($brand-warning, 40%) !default;
+$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+
+$state-danger-text:              $brand-danger !default;
+$state-danger-bg:                lighten($brand-danger, 40%) !default;
+$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+
+
+//
+// Alerts
+//
+$alert-padding:                 $spacer !default;
+$alert-border-radius:           $border-radius !default;
+
+$alert-success-bg:              $state-success-bg !default;
+$alert-success-text:            $state-success-text !default;
+$alert-success-border:          $state-success-border !default;
+
+$alert-info-bg:                 $state-info-bg !default;
+$alert-info-text:               $state-info-text !default;
+$alert-info-border:             $state-info-border !default;
+
+$alert-warning-bg:              $state-warning-bg !default;
+$alert-warning-text:            $state-warning-text !default;
+$alert-warning-border:          $state-warning-border !default;
+
+$alert-danger-bg:               $state-danger-bg !default;
+$alert-danger-text:             $state-danger-text !default;
+$alert-danger-border:           $state-danger-border !default;