feat(sass): allow css classes to be configured

Now the classes for has-value, has-focus, and has-error can be
set by the user through sass variables

README.md

@@ -49,6 +49,14 @@ There a few sass variables that you can update to override with your own styling
 * $fl-color-background: #fff !default;
 * $fl-font-size: 18px !default;
 
+The classes in the sass default to BEM syntax (see HTML example above). If you would like to use different classes in your HTML here are the sass variables to update.
+
+```scss
+$fl-has-focus: '&--has-focus';
+$fl-has-value: '&--has-value';
+$fl-has-error: '&--has-error';
+```
+
 Once you have the variables as you want them simply call the mixin inside the selector that you want to use.
 
 ```scss

dist/float-label.scss

@@ -1,42 +1,49 @@
-/**
-    Default colors, override these in your sass file
-*/
+//
+// Default colors, override these in your sass file
+//
 $fl-color-border: #bababa !default;
 $fl-color-error: #f31151 !default;
 $fl-color-label: #868686 !default;
 $fl-color-focus: #0096bd !default;
 $fl-color-background: #fff !default;
 
-/**
-    Typography
-*/
+//
+// Typography
+//
 $fl-font-size: 18px !default;
 
-/*
-    Begin float label styles
-*/
+//
+// Classes !default
+//
+$fl-has-focus: '&--has-focus' !default;
+$fl-has-value: '&--has-value' !default;
+$fl-has-error: '&--has-error' !default;
+
+//
+// Begin float label styles
+//
 @mixin mirum-float-labels() {
     $block: &;
 
     position: relative;
 
-    &--has-focus, &--has-value, &--has-error {
+    #{$fl-has-focus}, #{$fl-has-value}, #{$fl-has-error} {
 
         #{$block}__label {
             left: 14px;
             font-size: 12px;
             transform: translate3d(0, -12px, 0);
         }
     }
-    &--has-error {
+    #{$fl-has-error} {
         #{$block}__input, #{$block}__textarea, #{$block}__select {
             border-color: $fl-color-error;
         }
         #{$block}__label {
             color: $fl-color-error;
         }
     }
-    &--has-focus {
+    #{$fl-has-focus} {
 
         #{$block}__input, #{$block}__textarea, #{$block}__select {
             border-color: $fl-color-focus;

src/float-label.scss

@@ -1,42 +1,49 @@
-/**
-    Default colors, override these in your sass file
-*/
+//
+// Default colors, override these in your sass file
+//
 $fl-color-border: #bababa !default;
 $fl-color-error: #f31151 !default;
 $fl-color-label: #868686 !default;
 $fl-color-focus: #0096bd !default;
 $fl-color-background: #fff !default;
 
-/**
-    Typography
-*/
+//
+// Typography
+//
 $fl-font-size: 18px !default;
 
-/*
-    Begin float label styles
-*/
+//
+// Classes !default
+//
+$fl-has-focus: '&--has-focus' !default;
+$fl-has-value: '&--has-value' !default;
+$fl-has-error: '&--has-error' !default;
+
+//
+// Begin float label styles
+//
 @mixin mirum-float-labels() {
     $block: &;
 
     position: relative;
 
-    &--has-focus, &--has-value, &--has-error {
+    #{$fl-has-focus}, #{$fl-has-value}, #{$fl-has-error} {
 
         #{$block}__label {
             left: 14px;
             font-size: 12px;
             transform: translate3d(0, -12px, 0);
         }
     }
-    &--has-error {
+    #{$fl-has-error} {
         #{$block}__input, #{$block}__textarea, #{$block}__select {
             border-color: $fl-color-error;
         }
         #{$block}__label {
             color: $fl-color-error;
         }
     }
-    &--has-focus {
+    #{$fl-has-focus} {
 
         #{$block}__input, #{$block}__textarea, #{$block}__select {
             border-color: $fl-color-focus;