From 8fde68df7dfc26002e997212e2d82db3e2dc8937 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rg=20Riemenschneider?=
 <joerg.riemenschneider@gmail.com>
Date: Tue, 9 May 2017 23:22:42 +0200
Subject: [PATCH] Fixing issue #957

---
 scss/mixins/_drawer.scss |  9 ++++-----
 scss/mixins/_forms.scss  | 21 +++++++++------------
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/scss/mixins/_drawer.scss b/scss/mixins/_drawer.scss
index 21c49da0..57a9b58a 100644
--- a/scss/mixins/_drawer.scss
+++ b/scss/mixins/_drawer.scss
@@ -2,7 +2,7 @@
 
 @mixin bmd-drawer-x-out($size) {
   @each $side, $abbrev in (left: l, right: r) {
-    &.bmd-drawer-f-#{$abbrev} {
+    @at-root #{if(not &, '.bmd-drawer-f-#{$abbrev}', selector-append(&, '.bmd-drawer-f-#{$abbrev}'))} {
       > .bmd-layout-drawer {
         // position
         top: 0;
@@ -28,7 +28,7 @@
 
 @mixin bmd-drawer-y-out($size) {
   @each $side, $abbrev in (top: t, bottom: b) {
-    &.bmd-drawer-f-#{$abbrev} {
+    @at-root #{if(not &, '.bmd-drawer-f-#{$abbrev}', selector-append(&, '.bmd-drawer-f-#{$abbrev}'))} {
       > .bmd-layout-drawer {
         // position
         #{$side}: 0;
@@ -62,7 +62,7 @@
 
 @mixin bmd-drawer-x-in($size) {
   @each $side, $abbrev in (left: l, right: r) {
-    &.bmd-drawer-f-#{$abbrev} {
+    @at-root #{if(not &, '.bmd-drawer-f-#{$abbrev}', selector-append(&, '.bmd-drawer-f-#{$abbrev}'))} {
       // Push - drawer will push the header and content (default behavior)
       > .bmd-layout-header {
         width: calc(100% - #{$size});
@@ -82,8 +82,7 @@
 
 @mixin bmd-drawer-y-in($size) {
   @each $side, $abbrev in (top: t, bottom: b) {
-    &.bmd-drawer-f-#{$abbrev} {
-
+    @at-root #{if(not &, '.bmd-drawer-f-#{$abbrev}', selector-append(&, '.bmd-drawer-f-#{$abbrev}'))} {
       // 1. Push - drawer will push the header or content
       > .bmd-layout-header {
         @if $side == top { // only add margin-top on a header when the drawer is at the top
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 6fcde7f8..cfcb175f 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -72,8 +72,8 @@
   .form-control {
 
     // underline animation color on focus
-    $underline-background-image:          linear-gradient(to top, $label-color-focus 2px, fade-out($label-color-focus, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
-    $underline-background-image-invalid:  linear-gradient(to top, $bmd-invalid-underline 2px, fade-out($bmd-invalid-underline, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
+    $underline-background-image: linear-gradient(to top, $label-color-focus 2px, fade-out($label-color-focus, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
+    $underline-background-image-invalid: linear-gradient(to top, $bmd-invalid-underline 2px, fade-out($bmd-invalid-underline, 1) 2px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
     $underline-background-image-readonly: linear-gradient(to top, $bmd-readonly-underline 1px, fade-out($bmd-readonly-underline, 1) 1px), linear-gradient(to top, $input-border-color 1px, fade-out($input-border-color, 1) 1px);
     $underline-background-image-disabled: linear-gradient(to right, $input-border-color 0%, $input-border-color 30%, transparent 30%, transparent 100%);
 
@@ -118,10 +118,9 @@
     }
   }
 
-  .is-focused, // may or may not be a form-group or bmd-form-group
-  &.is-focused {
+  // may or may not be a form-group or bmd-form-group
+  @at-root #{if(not &, 'is-focused', selector-append(&, 'is-focused'))} {
     // on focus set borders and labels to the validation color
-
     // Use the BS provided mixin for the bulk of the color
     @include form-control-validation($label-color);
 
@@ -143,7 +142,6 @@
     //.input-group-addon {
     //  border-color: $border-color;
     //}
-
     .bmd-help {
       color: $bmd-label-color-inner-focus;
     }
@@ -233,12 +231,11 @@
   }
 
   // floating focused/filled will look like static
-  &.is-focused,
-  .is-focused,
-  &.is-filled,
-  .is-filled {
-    .bmd-label-floating {
-      @include bmd-label-static($label-static-top, $static-font-size);
+  @each $sel in '.is-focused', 'is-filled' {
+    @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+      .bmd-label-floating {
+        @include bmd-label-static($label-static-top, $static-font-size);
+      }
     }
   }