From f729cf1fa17561b46104dc1d3f268c7be3cf65f1 Mon Sep 17 00:00:00 2001 From: JP-Ellis Date: Mon, 28 Mar 2016 23:22:00 +1100 Subject: [PATCH] Fix base-level `&`. Fix is according to sass/sass#1873. Signed-off-by: JP-Ellis --- scss/mixins/_buttons.scss | 50 +++++++++++++++++++-------------------- scss/mixins/_drawer.scss | 20 ++++++++-------- scss/mixins/_forms.scss | 14 +++++------ scss/mixins/_hover.scss | 2 +- 4 files changed, 43 insertions(+), 43 deletions(-) diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 6402134a..4b6b38a9 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -10,16 +10,16 @@ border-color: $focus-border; } - &:focus, - &.focus { + #{if(&, "&", "*")}:focus, + #{if(&, "&", "*")}.focus { color: $color; background-color: $focus-background; border-color: $focus-border; } - &:active, - &.active, - .open > &.dropdown-toggle { + #{if(&, "&", "*")}:active, + #{if(&, "&", "*")}.active, + .open > #{if(&, "&", "*")}.dropdown-toggle { color: $color; background-color: $focus-background; border-color: $focus-border; @@ -34,7 +34,7 @@ } // when it is an icon, kill the active bg on open dropdown, but stabilize on hover - .open > &.dropdown-toggle.bmd-btn-icon { + .open > #{if(&, "&", "*")}.dropdown-toggle.bmd-btn-icon { color: inherit; background-color: $background; @@ -44,8 +44,8 @@ } } - &.disabled, - &:disabled { + #{if(&, "&", "*")}.disabled, + #{if(&, "&", "*")}:disabled { &:focus, &.focus { background-color: $background; @@ -78,7 +78,7 @@ $active-border); // inverse color scheme - .bg-inverse & { + .bg-inverse #{if(&, "&", "*")} { $focus-background: $mdb-inverse-btn-focus-bg; $focus-border: $mdb-inverse-btn-focus-bg; @@ -95,7 +95,7 @@ } // reverse the above for links - &.btn-link { + #{if(&, "&", "*")}.btn-link { background-color: transparent; } } @@ -105,22 +105,22 @@ @include bmd-flat-button-variant($mdb-btn-color); // flat bg with text color variations - &.btn-primary { + #{if(&, "&", "*")}.btn-primary { @include bmd-flat-button-variant($btn-primary-bg); } - &.btn-secondary { + #{if(&, "&", "*")}.btn-secondary { @include bmd-flat-button-variant($btn-secondary-color); } - &.btn-info { + #{if(&, "&", "*")}.btn-info { @include bmd-flat-button-variant($btn-info-bg); } - &.btn-success { + #{if(&, "&", "*")}.btn-success { @include bmd-flat-button-variant($btn-success-bg); } - &.btn-warning { + #{if(&, "&", "*")}.btn-warning { @include bmd-flat-button-variant($btn-warning-bg); } - &.btn-danger { + #{if(&, "&", "*")}.btn-danger { @include bmd-flat-button-variant($btn-danger-bg); } } @@ -147,31 +147,31 @@ @mixin bmd-raised-button-color() { - &.btn-primary { + #{if(&, "&", "*")}.btn-primary { @include bmd-raised-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); } - &.btn-secondary { + #{if(&, "&", "*")}.btn-secondary { @include bmd-raised-button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); } - &.btn-info { + #{if(&, "&", "*")}.btn-info { @include bmd-raised-button-variant($btn-info-color, $btn-info-bg, $btn-info-border); } - &.btn-success { + #{if(&, "&", "*")}.btn-success { @include bmd-raised-button-variant($btn-success-color, $btn-success-bg, $btn-success-border); } - &.btn-warning { + #{if(&, "&", "*")}.btn-warning { @include bmd-raised-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); } - &.btn-danger { + #{if(&, "&", "*")}.btn-danger { @include bmd-raised-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); } } @mixin undo-bs-tab-focus() { // clear out the tab-focus() from BS - &, - &:active, - &.active { + #{if(&, "&", "*")}, + #{if(&, "&", "*")}:active, + #{if(&, "&", "*")}.active { &:focus, &.focus { //@include tab-focus(); diff --git a/scss/mixins/_drawer.scss b/scss/mixins/_drawer.scss index 21c49da0..77e9ba27 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} { + #{if(&, "&", "*")}.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} { + #{if(&, "&", "*")}.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} { + #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} { // Push - drawer will push the header and content (default behavior) > .bmd-layout-header { width: calc(100% - #{$size}); @@ -82,7 +82,7 @@ @mixin bmd-drawer-y-in($size) { @each $side, $abbrev in (top: t, bottom: b) { - &.bmd-drawer-f-#{$abbrev} { + #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} { // 1. Push - drawer will push the header or content > .bmd-layout-header { @@ -109,7 +109,7 @@ // e.g. &, &-sm, &-md, &-lg $name: bmd-drawer-breakpoint-name($breakpoint, "-up"); - &.bmd-drawer-in { + #{if(&, "&", "*")}.bmd-drawer-in { #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg @if $breakpoint == xs { @@ -132,7 +132,7 @@ // e.g. &, &-sm, &-md, &-lg $name: bmd-drawer-breakpoint-name($breakpoint, "-up"); - &.bmd-drawer-in { + #{if(&, "&", "*")}.bmd-drawer-in { #{unquote($name)} { // bmd-drawer-in, bmd-drawer-in-sm, bmd-drawer-in-md, bmd-drawer-in-lg @if $breakpoint == xs { @@ -154,7 +154,7 @@ @include bmd-layout-backdrop-in(); @each $side, $abbrev in (left: l, right: r) { - &.bmd-drawer-f-#{$abbrev} { + #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} { > .bmd-layout-header, > .bmd-layout-content { width: 100%; @@ -168,7 +168,7 @@ @include bmd-layout-backdrop-in(); @each $side, $abbrev in (top: t, bottom: b) { - &.bmd-drawer-f-#{$abbrev} { + #{if(&, "&", "*")}.bmd-drawer-f-#{$abbrev} { > .bmd-layout-header { @if $side == top { // only add margin-top on a header when the drawer is at the top margin-#{$side}: 0; @@ -189,7 +189,7 @@ // e.g. &, &-sm, &-md, &-lg $name: bmd-drawer-breakpoint-name($breakpoint, "-down"); - &.bmd-drawer-overlay { + #{if(&, "&", "*")}.bmd-drawer-overlay { #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg // x - left/right @@ -215,7 +215,7 @@ // e.g. &, &-sm, &-md, &-lg $name: bmd-drawer-breakpoint-name($breakpoint, "-down"); - &.bmd-drawer-overlay { + #{if(&, "&", "*")}.bmd-drawer-overlay { #{unquote($name)} { // bmd-drawer-overlay, bmd-drawer-overlay-sm, bmd-drawer-overlay-md, bmd-drawer-overlay-lg //// y - top/bottom diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 4432f4c9..aa065536 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -1,8 +1,8 @@ @mixin bmd-disabled() { - fieldset[disabled][disabled] &, - &.disabled, - &:disabled, - &[disabled] { + fieldset[disabled][disabled] #{if(&, "&", "*")}, + #{if(&, "&", "*")}.disabled, + #{if(&, "&", "*")}:disabled, + #{if(&, "&", "*")}[disabled] { @content } } @@ -104,7 +104,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 @@ -218,9 +218,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); diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss index ae92b2ab..0424345d 100644 --- a/scss/mixins/_hover.scss +++ b/scss/mixins/_hover.scss @@ -1,6 +1,6 @@ @mixin bmd-hover-focus-active { // add the .active to the whole mix of hover-focus-active - &.active { + #{if(&, "&", "*")}.active { @content } @include hover-focus-active() {