fix deprecations

diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss
index f3b69a4693fe93754f3f2119bc4da4c85cc48ca4..0323e64a8f2dc29103cf03ed6c36c94d4681b24a 100644 (file)
--- a/scss/components/_badge.scss
+++ b/scss/components/_badge.scss
@@ -54,7 +54,7 @@ $badge-font-size: 0.6rem !default;
     color: $badge-color;
 
     @each $name, $color in $badge-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         background: $color;
         color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
       }

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index 4734408a137f2c04c8d915356cdf79e1da316240..eef6cc4ec32a4118902a57ec54f4d961c6f0f7c1 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -242,13 +242,13 @@ $buttongroup-radius-on-each: true !default;
 
         @each $name, $color in $button-palette {
           @if($button-fill != $filling) {
-            $individual-selector: ' #{$buttongroup-child-selector}.#{$name}';
-            &.#{$name} #{$buttongroup-child-selector}, &#{$individual-selector} {
+            $individual-selector: ' #{$buttongroup-child-selector}.#{"" + $name}';
+            &.#{"" + $name} #{$buttongroup-child-selector}, &#{$individual-selector} {
               @include button-fill-style($filling, $color, auto, auto);
             }
           }
           @else {
-            &.#{$name} #{$buttongroup-child-selector} {
+            &.#{"" + $name} #{$buttongroup-child-selector} {
               @include button-fill-style($filling, $color, auto, auto);
             }
           }

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 8e7a231b04baa93724d1caeba82fd74e7ebb406c..4d98fbae7856c5a76bacdc8b294eb6b30cc45ba6 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -374,7 +374,7 @@ $button-responsive-expanded: false !default;
         @include button-fill-style($filling);
 
         @each $name, $color in $button-palette {
-          &.#{$name} {
+          &.#{"" + $name} {
             @include button-fill-style($filling, $color, auto, auto);
           }
         }
@@ -402,7 +402,7 @@ $button-responsive-expanded: false !default;
         }
 
         @each $name, $color in $button-palette {
-          &.#{$name} {
+          &.#{"" + $name} {
             &::after {
               border-top-color: $color;
             }

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
index c8472c04a1c522ec31b4e3d09a67b765a5d22008..43f02670ba21902c67a425d777ce0dbd9896d1ab 100644 (file)
--- a/scss/components/_callout.scss
+++ b/scss/components/_callout.scss
@@ -94,7 +94,7 @@ $callout-link-tint: 30% !default;
     @include callout;
 
     @each $name, $color in $foundation-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         @include callout-style($color);
       }
     }

diff --git a/scss/components/_label.scss b/scss/components/_label.scss
index 3ec8eed13a50a220c2ee408f00a7864afacebcce..460fcb7749676d71f35638cbbee73515db7afeb9 100644 (file)
--- a/scss/components/_label.scss
+++ b/scss/components/_label.scss
@@ -55,7 +55,7 @@ $label-radius: $global-radius !default;
     color: $label-color;
 
     @each $name, $color in $label-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         background: $color;
         color: color-pick-contrast($color, ($label-color, $label-color-alt));
       }

diff --git a/scss/components/_progress-bar.scss b/scss/components/_progress-bar.scss
index b2b891307c7800a7534ed7b8a3ad97c57fa797d3..9d952b0c8cac22c5ce9158893af7fff8d3b26dc5 100644 (file)
--- a/scss/components/_progress-bar.scss
+++ b/scss/components/_progress-bar.scss
@@ -43,7 +43,7 @@
     @include progress-container;
 
     @each $name, $color in $foundation-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         .progress-meter {
           background-color: $color;
         }

diff --git a/scss/forms/_progress.scss b/scss/forms/_progress.scss
index 396d0f16f23df415336800fdf27ab0f26d6cf710..c0ea63f5c49b1a2b57b0420120ad05e81de91b33 100644 (file)
--- a/scss/forms/_progress.scss
+++ b/scss/forms/_progress.scss
@@ -68,7 +68,7 @@ $progress-radius: $global-radius !default;
     }
 
     @each $name, $color in $foundation-palette {
-      &.#{$name} {
+      &.#{"" + $name} {
         // Internet Explorer sets the fill with color
         color: $color;