Browse code

Add success and error hint variations

Ben Delevingne authored on 18/08/2016 23:14:40
Showing 3 changed files
... ...
@@ -7,4 +7,12 @@
7 7
 .c-field:focus + .c-hint,
8 8
 .c-label__field:focus + .c-hint {
9 9
   @include hint--active;
10
-}
11 10
\ No newline at end of file
11
+}
12
+
13
+.c-hint--success {
14
+  @include hint--success;
15
+}
16
+
17
+.c-hint--error {
18
+  @include hint--error;
19
+}
... ...
@@ -14,4 +14,12 @@
14 14
 @mixin hint--active {
15 15
   transform: scale(0.9);
16 16
   opacity: 1;
17
-}
18 17
\ No newline at end of file
18
+}
19
+
20
+@mixin hint--success {
21
+  color: $hint-success-color;
22
+}
23
+
24
+@mixin hint--error {
25
+  color: $hint-error-color;
26
+}
... ...
@@ -479,6 +479,9 @@ $hint-padding: 0 $spacing-small !default;
479 479
 $hint-color: $color-darker-grey !default;
480 480
 $hint-font-size: $text-font-size-medium !default;
481 481
 
482
+$hint-success-color: $color-success !default;
483
+$hint-error-color: $color-error !default;
484
+
482 485
 //
483 486
 // Inputs
484 487
 //
... ...
@@ -864,4 +867,4 @@ $tree-item-indicator-padding: 0 $spacing-small 0 0 !default;
864 867
 $tree-item-indicator-color: $color-light-grey !default;
865 868
 
866 869
 $tree-item-expandable-indicator-color: $color-grey !default;
867
-$tree-item-expanded-indicator-color: $color-darker-grey !default;
868 870
\ No newline at end of file
871
+$tree-item-expanded-indicator-color: $color-darker-grey !default;