From 5ec4486845d4618d818fa65dad3c8554bcc6b399 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Thu, 3 Dec 2015 10:21:30 -0600
Subject: [PATCH] #755 refactored alerts against bs4

---
 docs/assets/scss/docs.scss            | 28 ++++++++---
 scss/includes/_alerts.scss            | 17 +------
 scss/includes/_variables.scss         | 35 +++++++++++---
 scss/includes/mixins/_variations.scss | 70 +--------------------------
 4 files changed, 53 insertions(+), 97 deletions(-)

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 70dff188..280071cd 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -23,20 +23,36 @@
 // Happy Bootstrapping!
 
 // Load Bootstrap variables and mixins
-@import "../../../scss/includes/variables";
-@import "../../../scss/includes/mixins";
+//@import "../../../scss/includes/variables";
+//@import "../../../scss/includes/mixins";
+@import "../../../scss/includes/colors";
+
+//http://www.materialpalette.com/indigo/light-blue
+$brand-primary: $indigo-500; // #3F51B5
+
+/* Palette generated by Material Palette - materialpalette.com/indigo/light-blue */
+//$primary-color-dark:   #303F9F $indigo-700
+//$primary-color:        #3F51B5 $indigo-500
+//$primary-color-light:  #C5CAE9 $indigo-100
+//$primary-color-text:   #FFFFFF
+//$accent-color:         #03A9F4 $light-blue-500
+//$primary-text-color:   #212121 $grey-900
+//$secondary-text-color: #727272
+//$divider-color:        #B6B6B6
 
 // Local docs variables
-$bd-purple:         #563d7c;
-$bd-purple-bright:  lighten(saturate($bd-purple, 5%), 15%);
-$bd-purple-light:   #cdbfe3;
-$bd-graphite:       #2a2730;
+$bd-purple:         $brand-primary; // #563d7c;
+$bd-purple-bright:  $light-blue-500; //lighten(saturate($bd-purple, 5%), 15%);
+$bd-purple-light:   $indigo-100; // #C5CAE9;  #cdbfe3;
+$bd-graphite:       $indigo-700; // #303F9F; //#2a2730;
 $bd-graphite-light: lighten($bd-graphite, 40%);
 $bd-yellow:         #ffe484;
 $bd-danger:         #d9534f;
 $bd-warning:        #f0ad4e;
 $bd-info:           #5bc0de;
 
+@import "../../../scss/includes/bootstrap-material-design";
+
 // Load docs components
 @import "booticon";
 @import "nav";
diff --git a/scss/includes/_alerts.scss b/scss/includes/_alerts.scss
index 17f7b998..0073242d 100644
--- a/scss/includes/_alerts.scss
+++ b/scss/includes/_alerts.scss
@@ -1,17 +1,4 @@
 .alert {
-    border: 0;
-    border-radius: 0;
-
-    // SASS conversion note: please mirror any content change in _mixins-shared.scss alert-variations-content
-    @include alert-variations(unquote(".alert"), unquote(""), $mdb-text-color-light);
-
-    &-info, &-danger, &-warning, &-success {
-        color: $mdb-text-color-light;
-    }
-
-    &-default {
-        a, .alert-link {
-            color: $mdb-text-color-primary;
-        }
-    }
+  border: 0;
+  border-radius: 0;
 }
diff --git a/scss/includes/_variables.scss b/scss/includes/_variables.scss
index 097383e9..1b15d3f7 100644
--- a/scss/includes/_variables.scss
+++ b/scss/includes/_variables.scss
@@ -2,14 +2,13 @@
 
 
 // Typography elements FIXME: review to see if we actually need these
-$mdb-text-color-light: unquote("rgba(#{$rgb-white}, 0.84)") !default;
-$mdb-text-color-light-hex: $white !default; // for contrast function in inverse
-$mdb-text-color-primary: unquote("rgba(#{$rgb-black}, 0.87)") !default;
-$mdb-text-color-primary-hex: $black !default; // for contrast function in inverse
+$mdb-text-color-light: hsla(0, 0%, 100%, 0.84) !default; // white 0.84 //unquote("rgba(#{$rgb-white}, 0.84)") !default;
+$mdb-text-color-primary: hsla(0, 0%, 0%, 0.87) !default; // black 0.87 //unquote("rgba(#{$rgb-black}, 0.87)") !default;
 $icon-color: rgba(0, 0, 0, 0.5) !default;
 
 //---
 // Customized BS variables
+$enable-flex: true;
 
 // Bootstrap brand color customization
 $brand-primary: $teal !default;
@@ -26,12 +25,34 @@ $font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
 $headings-font-weight: 300 !default;
 
 $body-bg: #EEEEEE !default;
+
+
+// Form states and alerts
+//
+// Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             $mdb-text-color-light !default;
+$state-success-bg:               $brand-success !default;
+//$state-success-border:           darken($state-success-bg, 5%) !default;
+
+$state-info-text:                $mdb-text-color-light !default;
+$state-info-bg:                  $brand-info !default;
+//$state-info-border:              darken($state-info-bg, 7%) !default;
+
+
+$state-warning-text:             $mdb-text-color-light !default;
+$state-warning-bg:               $brand-warning !default;
+//$state-warning-border:           darken($state-warning-bg, 5%) !default;
+
+$state-danger-text:              $mdb-text-color-light !default;
+$state-danger-bg:                $brand-danger !default;
+//$state-danger-border:            darken($state-danger-bg, 5%) !default;
+
 //---
 
 // Import our customized bootstrap
-$enable-flex: true;
-@import "../../bower_components/bootstrap/scss/variables";
-@import "../../bower_components/bootstrap/scss/mixins";
+//@import "../../bower_components/bootstrap/scss/variables";
+//@import "../../bower_components/bootstrap/scss/mixins";
 
 // Bootstrap Material Design variables start with mdb-
 $mdb-brand-inverse: $indigo !default;
diff --git a/scss/includes/mixins/_variations.scss b/scss/includes/mixins/_variations.scss
index 97b6de13..6872f7ca 100644
--- a/scss/includes/mixins/_variations.scss
+++ b/scss/includes/mixins/_variations.scss
@@ -23,56 +23,6 @@
   }
 }
 
-//@mixin text-variations($component, $selector-suffix, $color-default) {
-//  @include generic-variations($component, $selector-suffix, $color-default, "text-variations-content", null);
-//}
-//
-//@mixin text-variations-content($args) {
-//  color: map-get($args, variation-color);
-//}
-//
-//@mixin button-variations($component, $selector-suffix, $color-default, $mdb-param-1) {
-//  @include generic-variations($component, $selector-suffix, $color-default, "button-variations-content", $mdb-param-1);
-//}
-//
-//@mixin button-variations-content($args) {
-//  //@debug "#{inspect($args)}";
-//  $variation-color: map-get($args, variation-color);
-//  $mdb-param-1: map-get($args, material-param-1);
-//  background-color: contrast-color($variation-color,
-//          darken($variation-color, $mdb-param-1),
-//          lighten($variation-color, $mdb-param-1));
-//}
-//
-//@mixin bg-color-variations($component, $selector-suffix, $color-default, $mdb-param-1) {
-//  @include generic-variations($component, $selector-suffix, $color-default, "bg-color-variations-content", $mdb-param-1);
-//}
-//
-//@mixin bg-color-variations-content($args) {
-//  background-color: rgba(map-get($args, variation-color), map-get($args, material-param-1));
-//}
-//
-//// bg-box-shadow-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
-//@mixin bg-box-shadow-variations($component, $selector-suffix, $color-default) {
-//  @include generic-variations($component, $selector-suffix, $color-default, "bg-box-shadow-variations-content", null);
-//}
-//
-//@mixin bg-box-shadow-variations-content($args){
-//  $variation-color: map-get($args, variation-color);
-//  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.4), 0 0 0 15px rgba($variation-color, (10/100));
-//}
-//
-//// bg-img-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
-//@mixin bg-img-variations($component, $selector-suffix, $color-default) {
-//  @include generic-variations($component, $selector-suffix, $color-default, "bg-img-variations-content", null);
-//}
-//
-//@mixin bg-img-variations-content($args){
-//  $variation-color: map-get($args, variation-color);
-//  //@debug "bg-img-variations-content called for #{map-get($args, extra)} #{map-get($args, default)} #{map-get($args, variation-color-name)} #{map-get($args, variation-color)}"; //#{inspect($args)}";
-//  background-image: linear-gradient($variation-color, $variation-color), linear-gradient($mdb-input-underline-color, $mdb-input-underline-color);
-//}
-
 // navbar-variations(" label input[type=checkbox]:checked + .toggle:active:after", $brand-primary
 @mixin navbar-variations($component, $selector-suffix, $color-default) {
   @include generic-variations($component, $selector-suffix, $color-default, "navbar-variations-content", null);
@@ -113,23 +63,6 @@
   }
 }
 
-// alert-variations("", $brand-primary)
-@mixin alert-variations($component, $selector-suffix, $color-default) {
-  @include generic-variations($component, $selector-suffix, $color-default, "alert-variations-content", null);
-}
-
-@mixin alert-variations-content($args){
-  $variation-color: map-get($args, variation-color);
-  $variation-color-text: map-get($args, variation-color-text);
-
-  background-color: $variation-color;
-  color: $variation-color-text;
-
-  a, .alert-link {
-    color: $variation-color-text;
-  }
-}
-
 // interpolation of mixin-name is not allowed evidently, so we statically include based on the mixin-name given
 @mixin call-variations-content-mixin($args) {
   $mixin-name: map-get($args, mixin-name);
@@ -177,7 +110,6 @@
   );
 
   // bootstrap styles
-  &#{$selector-suffix},
   &#{$component}-default#{$selector-suffix} {
 
     $args-extra: map-merge($args, (
@@ -189,7 +121,7 @@
   &#{$component}-inverse#{$selector-suffix} {
     $args-inverse: map-merge($args, (
             variation-color: $mdb-brand-inverse,
-            variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary-hex, $mdb-text-color-light-hex)
+            variation-color-text: contrast-color($mdb-brand-inverse, $mdb-text-color-primary, $mdb-text-color-light)
     ));
     @include call-variations-content-mixin($args-inverse);
   }