From 00b78df538b38dd3fe66cf6a0a39048f7abdbf5b Mon Sep 17 00:00:00 2001
From: Angelin Calu <angelin.calu@gmail.com>
Date: Thu, 4 Jul 2019 00:37:32 +0300
Subject: [PATCH] Fix #1300

---
 scss/mixins/_drawer.scss | 129 +++++++++++++++++++++++----------------
 scss/mixins/_forms.scss  |  77 +++++++++++------------
 2 files changed, 111 insertions(+), 95 deletions(-)

diff --git a/scss/mixins/_drawer.scss b/scss/mixins/_drawer.scss
index db6bb70d..ab7ef383 100644
--- a/scss/mixins/_drawer.scss
+++ b/scss/mixins/_drawer.scss
@@ -1,9 +1,11 @@
 // Mixins to allow creation of additional custom drawer sizes when using the defaults at the same time
 
 @mixin bmd-drawer-x-out($size) {
-  @each $side, $abbrev in (left: l, right: r) {
-    &.bmd-drawer-f-#{$abbrev} {
-      > .bmd-layout-drawer {
+
+  @each $side,
+  $abbrev in (left: l, right: r) {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
+      >.bmd-layout-drawer {
         // position
         top: 0;
         #{$side}: 0;
@@ -11,19 +13,17 @@
         width: $size;
         height: 100%;
 
-        @if $side == left {
-          transform: translateX(
-            -$size - 10px
-          ); // initial position of drawer (closed), way off screen
-        } @else {
-          transform: translateX(
-            $size + 10px
-          ); // initial position of drawer (closed), way off screen
+        @if $side==left {
+          transform: translateX(-$size - 10px); // initial position of drawer (closed), way off screen
+        }
+
+        @else {
+          transform: translateX($size + 10px); // initial position of drawer (closed), way off screen
         }
       }
 
-      > .bmd-layout-header,
-      > .bmd-layout-content {
+      >.bmd-layout-header,
+      >.bmd-layout-content {
         margin-#{$side}: 0;
       }
     }
@@ -31,9 +31,11 @@
 }
 
 @mixin bmd-drawer-y-out($size) {
-  @each $side, $abbrev in (top: t, bottom: b) {
-    &.bmd-drawer-f-#{$abbrev} {
-      > .bmd-layout-drawer {
+
+  @each $side,
+  $abbrev in (top: t, bottom: b) {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
+      >.bmd-layout-drawer {
         // position
         #{$side}: 0;
         left: 0;
@@ -41,18 +43,16 @@
         width: 100%;
         height: $size;
 
-        @if $side == top {
-          transform: translateY(
-            -$size - 10px
-          ); // initial position of drawer (closed), way off screen
-        } @else {
-          transform: translateY(
-            $size + 10px
-          ); // initial position of drawer (closed), way off screen
+        @if $side==top {
+          transform: translateY(-$size - 10px); // initial position of drawer (closed), way off screen
+        }
+
+        @else {
+          transform: translateY($size + 10px); // initial position of drawer (closed), way off screen
         }
       }
 
-      > .bmd-layout-content {
+      >.bmd-layout-content {
         margin-#{$side}: 0;
       }
     }
@@ -62,26 +62,31 @@
 @function bmd-drawer-breakpoint-name($breakpoint, $suffix: "") {
   // e.g. &, &-sm, &-md, &-lg
   $name: "&-#{$breakpoint}#{$suffix}";
-  @if $breakpoint == xs {
+
+  @if $breakpoint==xs {
     $name: "&";
   }
+
   @return $name;
 }
 
 @mixin bmd-drawer-x-in($size) {
-  @each $side, $abbrev in (left: l, right: r) {
-    &.bmd-drawer-f-#{$abbrev} {
+
+  @each $side,
+  $abbrev in (left: l, right: r) {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
+
       // Push - drawer will push the header and content (default behavior)
-      > .bmd-layout-header {
+      >.bmd-layout-header {
         width: calc(100% - #{$size});
         margin-#{$side}: $size;
       }
 
-      > .bmd-layout-drawer {
+      >.bmd-layout-drawer {
         transform: translateX(0);
       }
 
-      > .bmd-layout-content {
+      >.bmd-layout-content {
         margin-#{$side}: $size;
       }
     }
@@ -89,22 +94,25 @@
 }
 
 @mixin bmd-drawer-y-in($size) {
-  @each $side, $abbrev in (top: t, bottom: b) {
-    &.bmd-drawer-f-#{$abbrev} {
+
+  @each $side,
+  $abbrev in (top: t, bottom: b) {
+    #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} {
+
       // 1. Push - drawer will push the header or content
-      > .bmd-layout-header {
-        @if $side == top {
+      >.bmd-layout-header {
+        @if $side==top {
           // only add margin-top on a header when the drawer is at the top
           margin-#{$side}: $size;
         }
       }
 
-      > .bmd-layout-drawer {
+      >.bmd-layout-drawer {
         transform: translateY(0);
       }
 
-      > .bmd-layout-content {
-        @if $side == bottom {
+      >.bmd-layout-content {
+        @if $side==bottom {
           // only add margin-bottom on content when the drawer is at the bottom
           margin-#{$side}: $size;
         }
@@ -122,10 +130,13 @@
     #{unquote($name)} {
       // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
 
-      @if $breakpoint == xs {
+      @if $breakpoint==xs {
         // bmd-drawer-in marker class (non-responsive)
         @include bmd-drawer-x-in($size);
-      } @else {
+      }
+
+      @else {
+
         // responsive class
         @include media-breakpoint-up($breakpoint) {
           // bmd-drawer-f-(left and right) styles
@@ -145,10 +156,13 @@
     #{unquote($name)} {
       // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg
 
-      @if $breakpoint == xs {
+      @if $breakpoint==xs {
         // bmd-drawer-in marker class (non-responsive)
         @include bmd-drawer-y-in($size);
-      } @else {
+      }
+
+      @else {
+
         // responsive class
         @include media-breakpoint-up($breakpoint) {
           // bmd-drawer-f-(left and right) styles
@@ -162,10 +176,12 @@
 @mixin bmd-drawer-x-overlay() {
   @include bmd-layout-backdrop-in();
 
-  @each $side, $abbrev in (left: l, right: r) {
+  @each $side,
+  $abbrev in (left: l, right: r) {
     &.bmd-drawer-f-#{$abbrev} {
-      > .bmd-layout-header,
-      > .bmd-layout-content {
+
+      >.bmd-layout-header,
+      >.bmd-layout-content {
         width: 100%;
         margin-#{$side}: 0;
       }
@@ -176,17 +192,18 @@
 @mixin bmd-drawer-y-overlay() {
   @include bmd-layout-backdrop-in();
 
-  @each $side, $abbrev in (top: t, bottom: b) {
+  @each $side,
+  $abbrev in (top: t, bottom: b) {
     &.bmd-drawer-f-#{$abbrev} {
-      > .bmd-layout-header {
-        @if $side == top {
+      >.bmd-layout-header {
+        @if $side==top {
           // only add margin-top on a header when the drawer is at the top
           margin-#{$side}: 0;
         }
       }
 
-      > .bmd-layout-content {
-        @if $side == bottom {
+      >.bmd-layout-content {
+        @if $side==bottom {
           // only add margin-bottom on content when the drawer is at the bottom
           margin-#{$side}: 0;
         }
@@ -206,7 +223,7 @@
 
       // x - left/right
 
-      @if $breakpoint == xs {
+      @if $breakpoint==xs {
         // overlay marker class (non-responsive)
 
         // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
@@ -214,7 +231,9 @@
         &.bmd-drawer-overlay {
           @include bmd-drawer-x-overlay();
         }
-      } @else {
+      }
+
+      @else {
         @include media-breakpoint-down($breakpoint) {
           // overlay responsive class
           @include bmd-drawer-x-overlay();
@@ -234,7 +253,7 @@
       // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg
       //// y - top/bottom
 
-      @if $breakpoint == xs {
+      @if $breakpoint==xs {
         // overlay marker class (non-responsive)
 
         // Must double up on the .bmd-drawer-overlay class to increase specificity otherwise the
@@ -242,7 +261,9 @@
         &.bmd-drawer-overlay {
           @include bmd-drawer-y-overlay();
         }
-      } @else {
+      }
+
+      @else {
         @include media-breakpoint-down($breakpoint) {
           // overlay responsive class
           @include bmd-drawer-y-overlay();
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 0bf7fe20..e0f65b38 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -1,4 +1,5 @@
 @mixin bmd-disabled() {
+
   fieldset[disabled][disabled] &,
   &.disabled,
   &:disabled,
@@ -8,6 +9,7 @@
 }
 
 @mixin bmd-selection-color() {
+
   .radio label,
   .radio-inline,
   .checkbox label,
@@ -34,6 +36,7 @@
       label:has(input[type=checkbox][disabled]),
       // css 4
       fieldset[disabled] & {
+
         &,
         &:hover,
         &:focus {
@@ -57,12 +60,14 @@
   &::after {
     border-color: $color;
   }
+
   &::before {
     background-color: $color;
   }
 }
 
 @mixin bmd-form-color($label-color, $label-color-focus, $border-color) {
+
   [class^='bmd-label'],
   [class*=' bmd-label'] {
     color: $label-color;
@@ -71,43 +76,29 @@
   // override BS and keep the border-color normal/grey so that overlaid focus animation draws attention
   .form-control {
     // underline animation color on focus
-    $underline-background-image: linear-gradient(
-        to top,
+    $underline-background-image: linear-gradient(to top,
         $label-color-focus 2px,
-        fade-out($label-color-focus, 1) 2px
-      ),
-      linear-gradient(
-        to top,
+        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,
+        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,
+        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,
+        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,
+        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%
-    );
+        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%);
 
     // bg image is always there, we just need to reveal it
     &,
@@ -131,18 +122,23 @@
 
     // allow underline focus image and validation images to coexist
     &.form-control-success {
+
       &,
       .is-focused & {
         background-image: $underline-background-image, $form-icon-success;
       }
     }
+
     &.form-control-warning {
+
       &,
       .is-focused & {
         background-image: $underline-background-image, $form-icon-warning;
       }
     }
+
     &.form-control-danger {
+
       &,
       .is-focused & {
         background-image: $underline-background-image, $form-icon-danger;
@@ -152,7 +148,7 @@
 
   .is-focused,
   // may or may not be a form-group or bmd-form-group
-  &.is-focused {
+  #{if(&, "&", "*")}.is-focused {
     // on focus set borders and labels to the validation color
 
     // Use the BS provided mixin for the bulk of the color
@@ -192,15 +188,12 @@
 }
 
 @mixin bmd-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
-  $variant-input-height: (
-    ($font-size * $variant-line-height) + ($variant-padding-y * 2)
-  );
+  $variant-input-height: (($font-size * $variant-line-height) + ($variant-padding-y * 2));
   $static-font-size: ($bmd-bmd-label-static-size-ratio * $font-size);
   $help-font-size: ($bmd-help-size-ratio * $font-size);
 
   $label-static-top: $label-top-margin;
-  $label-placeholder-top: $label-top-margin + $static-font-size +
-    $variant-padding-y;
+  $label-placeholder-top: $label-top-margin + $static-font-size + $variant-padding-y;
 
   //@debug "font-size: #{$font-size} static-font-size: #{$static-font-size} help-font-size: #{$help-font-size} form-group-context: #{$form-group-context} ";
 
@@ -246,8 +239,8 @@
   // across browsers
   input.form-control,
   input.form-control::placeholder {
-    padding:0.28125rem 0;
-    line-height:1.5;
+    padding: 0.28125rem 0;
+    line-height: 1.5;
   }
 
   .radio label,
@@ -278,9 +271,9 @@
   }
 
   // floating focused/filled will look like static
-  &.is-focused,
+  #{if(&, "&", "*")}.is-focused,
   .is-focused,
-  &.is-filled,
+  #{if(&, "&", "*")}.is-filled,
   .is-filled {
     .bmd-label-floating {
       @include bmd-label-static($label-static-top, $static-font-size);
@@ -291,6 +284,7 @@
   .bmd-label-static {
     @include bmd-label-static($label-static-top, $static-font-size);
   }
+
   // #559 Fix for webkit/chrome autofill - rule must be separate because it breaks firefox otherwise #731
   //input:-webkit-autofill ~ .bmd-label-floating {  FIXME: confirm that the autofill js generation of change event makes this unnecessary
   //  @include bmd-label-static($label-top, $static-font-size, $static-line-height);
@@ -303,6 +297,7 @@
 
   // validation icon placement
   .form-control {
+
     &.form-control-success,
     &.form-control-warning,
     &.form-control-danger {