Fix display of icons referenced from non icon- styles

- replace direct usages of character codepoint with variables - fix $font-icon variable value and use it everywhere we set the icon font-family - Adjust margin-top on .flash__message .flash--error because the warning icon was appearing too high with new icon set - Set visited color on flash message dismiss button so it doesn't change color once it has been "visited"
codeforamerica · Jun 19, 2020 · 90a5a97 · 90a5a97
1 parent 93562ff
commit 90a5a97
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 9 deletions.
diff --git a/app/assets/stylesheets/atoms/_form-elements.scss b/app/assets/stylesheets/atoms/_form-elements.scss
@@ -136,7 +136,7 @@ label {
       &:before {
         font-family: $font-icon;
         font-size: $font-size-25-small;
-        content: '\e5ca';
+        content: map_get($icons, check);
         display: inline-block;
         position: absolute;
         top: -5px;
@@ -187,7 +187,7 @@ label {
     display: block;
     font-family: $font-icon;
     font-size: $font-size-35;
-    content: '\e5c5';
+    content: map_get($icons, arrow_drop_down);
     color: $color-grey-darkest;
     border-left: 0;
     width: $s60;

diff --git a/app/assets/stylesheets/atoms/_icons.scss b/app/assets/stylesheets/atoms/_icons.scss
@@ -65,7 +65,7 @@
 
 [class^="icon-"], [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'Material Icons' !important;
+  font-family: $font-icon;
   speak: none;
   font-style: normal;
   font-weight: normal;

diff --git a/app/assets/stylesheets/atoms/_variables.scss b/app/assets/stylesheets/atoms/_variables.scss
@@ -16,7 +16,7 @@ $font-system:         	-apple-system, BlinkMacSystemFont,
                         "Fira Sans", "Droid Sans", "Helvetica Neue",
                         sans-serif;
 
-$font-icon:           	'MaterialIcons-Regular';
+$font-icon:           	'Material Icons' !important;;
 
 
 // Typopgraphy

diff --git a/app/assets/stylesheets/molecules/_flashes.scss b/app/assets/stylesheets/molecules/_flashes.scss
@@ -46,7 +46,7 @@
   color: $color-red;
   border-color: $color-red;
   .flash__message:before {
-    content: "\e002";
+    content: map_get($icons, warning);
   }
   .flash__dismiss {
     border-color: $color-red;
@@ -65,7 +65,6 @@
     display: inline-block;
     font-family: $font-icon;
     margin-right: .5em;
-    margin-top: .1em;
   }
 }
 
@@ -85,4 +84,7 @@
   &:hover {
     background-color: $color-green-light;
   }
+  &:visited {
+    color: $color-grey-darkest;
+  }
 }
diff --git a/app/assets/stylesheets/molecules/_reveal.scss b/app/assets/stylesheets/molecules/_reveal.scss
@@ -13,7 +13,7 @@
     position: relative;
     top: .1em;
     font-family: $font-icon;
-    content: '\a0\e313';
+    content: '\a0'+map_get($icons, keyboard_arrow_down);
   }
 }
 
@@ -34,7 +34,7 @@
   &.is-hidden {
     .reveal__link {
       &:after {
-        content: '\a0\e315';
+        content: '\a0'+map_get($icons, keyboard_arrow_right);
       }
     }
     .reveal__content {

diff --git a/app/assets/stylesheets/molecules/_scroller.scss b/app/assets/stylesheets/molecules/_scroller.scss
@@ -24,7 +24,7 @@
         font-family: $font-icon;
         font-size: $font-size-35;
         display: block;
-        content: '\e313';
+        content: map_get($icons, keyboard_arrow_down);
         text-align: center;
         line-height: 1.5em;
     }