From 035b6b2675659b52f7f76305763648b367f0f069 Mon Sep 17 00:00:00 2001 From: Diego Hernandez Date: Fri, 20 Jul 2018 12:21:50 -0500 Subject: [PATCH 1/2] fix(prefix): make use of -- as a prefix standard --- .../bootstrap/css-gridish/scss/_core.scss | 16 ++-- .../bootstrap/css-gridish/scss/_mixins.scss | 80 +++++++++---------- .../scss/bootstrap-grid-legacy.scss | 10 +-- examples/carbon/css-gridish/scss/_core.scss | 16 ++-- examples/carbon/css-gridish/scss/_mixins.scss | 80 +++++++++---------- .../css-gridish/scss/bx-grid-legacy.scss | 10 +-- examples/material/css-gridish/scss/_core.scss | 16 ++-- .../material/css-gridish/scss/_mixins.scss | 80 +++++++++---------- .../scss/material-grid-legacy.scss | 10 +-- src/scss/_core.scss | 16 ++-- src/scss/_mixins.scss | 80 +++++++++---------- src/scss/gridish-grid-legacy.scss | 10 +-- 12 files changed, 212 insertions(+), 212 deletions(-) diff --git a/examples/bootstrap/css-gridish/scss/_core.scss b/examples/bootstrap/css-gridish/scss/_core.scss index 0df8cfd..5c61cf8 100755 --- a/examples/bootstrap/css-gridish/scss/_core.scss +++ b/examples/bootstrap/css-gridish/scss/_core.scss @@ -11,7 +11,7 @@ body { margin: 0; } -.#{$prefix}-container { +.#{$prefix}--container { box-sizing: border-box; margin-left: auto; margin-right: auto; @@ -20,15 +20,15 @@ body { width: 100vw; } -.#{$prefix}-container--left { +.#{$prefix}--container--left { margin-left: 0; } -.#{$prefix}-container--right { +.#{$prefix}--container--right { margin-right: 0; } -.#{$prefix}-grid { +.#{$prefix}--grid { align-items: flex-start; box-sizing: border-box; @if $includeFlexFallback { @@ -55,16 +55,16 @@ body { // Rules needed in legacy, but needed to change in CSS Grid @if $includeFlexFallback { - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { width: 100%; } @supports (display: grid) { - .#{$prefix}-grid { + .#{$prefix}--grid { align-items: unset; } - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { width: initial; } } @@ -72,7 +72,7 @@ body { // Rules not needed in legacy, but needed in CSS Grid @supports (display: grid) { - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { height: 100%; } } diff --git a/examples/bootstrap/css-gridish/scss/_mixins.scss b/examples/bootstrap/css-gridish/scss/_mixins.scss index cf7bf4b..052f6f6 100755 --- a/examples/bootstrap/css-gridish/scss/_mixins.scss +++ b/examples/bootstrap/css-gridish/scss/_mixins.scss @@ -3,13 +3,13 @@ @if (map-get($breakpoint, columns) != null) { $columnSize: get-fluid-size($breakpointName, 1); - .#{$prefix}-grid { + .#{$prefix}--grid { @if is-same-breakpoint($breakpoint, $first) { grid-auto-rows: minmax($rowHeight * 1rem, min-content); } grid-template-columns: repeat(auto-fill, $columnSize); - &.#{$prefix}-grid--fixed-columns { + &.#{$prefix}--grid--fixed-columns { grid-template-columns: repeat( auto-fill, map-get($breakpoint, breakpoint) * @@ -18,7 +18,7 @@ ); } - &.#{$prefix}-grid--fluid-rows { + &.#{$prefix}--grid--fluid-rows { grid-auto-rows: $columnSize; } @@ -67,7 +67,7 @@ $columnMultiplier ); - .#{$prefix}-grid__col--#{$currentName}--#{$i} { + .#{$prefix}--grid__col--#{$currentName}--#{$i} { @if $includeFlexFallback { // If second-to-last media query, apply max-width instead of remaking classes in last media query @if $isSecondToLast { @@ -78,14 +78,14 @@ grid-column: span #{$columnMultiplier}; @if is-same-breakpoint($breakpoint, $last) == false { - &.#{$prefix}-grid > *:not([class*="#{$prefix}-grid__col"]) { + &.#{$prefix}--grid > *:not([class*="#{$prefix}-grid__col"]) { grid-column: span #{$i}; } } } - .#{$prefix}-grid--fluid-rows - > .#{$prefix}-grid__height--#{$currentName}--#{$i} { + .#{$prefix}--grid--fluid-rows + > .#{$prefix}--grid__height--#{$currentName}--#{$i} { grid-row: span $i; @if $includeFlexFallback { height: $columnSize; @@ -112,12 +112,12 @@ // Set the height of an item for legacy grid @mixin grid-legacy-heights($name) { - .#{$prefix}-grid__height--#{$name}--0 { + .#{$prefix}--grid__height--#{$name}--0 { height: 0; min-height: 0; } @for $i from 1 to $rows { - .#{$prefix}-grid__height--#{$name}--#{$i} { + .#{$prefix}--grid__height--#{$name}--#{$i} { grid-row: span $i; @if $includeFlexFallback { height: get-fixed-size($i); @@ -146,7 +146,7 @@ @if map-get(nth($currentBreakpoint, 2), breakpoint) < map-get($breakpoint, breakpoint) { - .#{$prefix}-grid__col--#{nth($currentBreakpoint, 1)}--0--only { + .#{$prefix}--grid__col--#{nth($currentBreakpoint, 1)}--0--only { display: block; } } @@ -156,8 +156,8 @@ display: block; } - .#{$prefix}-grid__col--#{$name}--0, - .#{$prefix}-grid__col--#{$name}--0--only { + .#{$prefix}--grid__col--#{$name}--0, + .#{$prefix}--grid__col--#{$name}--0--only { display: none; } } @@ -224,53 +224,53 @@ $marginPlusPadding: $margin; } - .#{$prefix}-container { + .#{$prefix}--container { margin-left: auto; margin-right: auto; padding-left: $margin; padding-right: $margin; } - .#{$prefix}-container--left { + .#{$prefix}--container--left { margin-left: 0; } - .#{$prefix}-container--right { + .#{$prefix}--container--right { margin-right: 0; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--left, - .#{$prefix}-container__break--#{$nameToUse}, - .#{$prefix}-container__break--#{$nameToUse}--left { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--left, + .#{$prefix}--container__break--#{$nameToUse}, + .#{$prefix}--container__break--#{$nameToUse}--left { margin-left: -#{$margin}; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--right, - .#{$prefix}-container__break--#{$nameToUse}, - .#{$prefix}-container__break--#{$nameToUse}--right { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--right, + .#{$prefix}--container__break--#{$nameToUse}, + .#{$prefix}--container__break--#{$nameToUse}--right { margin-right: -#{$margin}; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--left { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--left { padding-left: $margin; - &.#{$prefix}-padding, - &.#{$prefix}-padding--horizontal, - &.#{$prefix}-padding--left { + &.#{$prefix}--padding, + &.#{$prefix}--padding--horizontal, + &.#{$prefix}--padding--left { padding-left: $marginPlusPadding; } } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--right { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--right { padding-right: $margin; - &.#{$prefix}-padding, - &.#{$prefix}-padding--horizontal, - &.#{$prefix}-padding--right { + &.#{$prefix}--padding, + &.#{$prefix}--padding--horizontal, + &.#{$prefix}--padding--right { padding-right: $marginPlusPadding; } } @@ -282,32 +282,32 @@ @if (map-get($breakpoint, padding) != null) { $padding: map-get($breakpoint, padding); - .#{$prefix}-padding { + .#{$prefix}--padding { padding: $padding; } - .#{$prefix}-padding--bottom { + .#{$prefix}--padding--bottom { padding-bottom: $padding; } - .#{$prefix}-padding--left { + .#{$prefix}--padding--left { padding-left: $padding; } - .#{$prefix}-padding--right { + .#{$prefix}--padding--right { padding-right: $padding; } - .#{$prefix}-padding--top { + .#{$prefix}--padding--top { padding-top: $padding; } - .#{$prefix}-padding--horizontal { + .#{$prefix}--padding--horizontal { padding-left: $padding; padding-right: $padding; } - .#{$prefix}-padding--vertical { + .#{$prefix}--padding--vertical { padding-bottom: $padding; padding-top: $padding; } diff --git a/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss b/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss index 7f14ce0..41ba010 100755 --- a/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss +++ b/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss @@ -2,24 +2,24 @@ $includeFlexFallback: true; @import "core.scss"; @supports (display: grid) { - .#{$prefix}-grid > *, - .#{$prefix}-grid > [class*="#{$prefix}-grid__col--"] { + .#{$prefix}--grid > *, + .#{$prefix}--grid > [class*="#{$prefix}-grid__col--"] { min-width: initial; max-width: initial; width: initial; - &.#{$prefix}-grid { + &.#{$prefix}--grid { display: grid; } } - .#{$prefix}-grid > [class*="#{$prefix}-grid__height--"] { + .#{$prefix}--grid > [class*="#{$prefix}-grid__height--"] { height: unset; max-height: unset; min-height: initial; } } -.#{$prefix}-grid > script { +.#{$prefix}--grid > script { display: none; } diff --git a/examples/carbon/css-gridish/scss/_core.scss b/examples/carbon/css-gridish/scss/_core.scss index 0df8cfd..5c61cf8 100755 --- a/examples/carbon/css-gridish/scss/_core.scss +++ b/examples/carbon/css-gridish/scss/_core.scss @@ -11,7 +11,7 @@ body { margin: 0; } -.#{$prefix}-container { +.#{$prefix}--container { box-sizing: border-box; margin-left: auto; margin-right: auto; @@ -20,15 +20,15 @@ body { width: 100vw; } -.#{$prefix}-container--left { +.#{$prefix}--container--left { margin-left: 0; } -.#{$prefix}-container--right { +.#{$prefix}--container--right { margin-right: 0; } -.#{$prefix}-grid { +.#{$prefix}--grid { align-items: flex-start; box-sizing: border-box; @if $includeFlexFallback { @@ -55,16 +55,16 @@ body { // Rules needed in legacy, but needed to change in CSS Grid @if $includeFlexFallback { - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { width: 100%; } @supports (display: grid) { - .#{$prefix}-grid { + .#{$prefix}--grid { align-items: unset; } - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { width: initial; } } @@ -72,7 +72,7 @@ body { // Rules not needed in legacy, but needed in CSS Grid @supports (display: grid) { - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { height: 100%; } } diff --git a/examples/carbon/css-gridish/scss/_mixins.scss b/examples/carbon/css-gridish/scss/_mixins.scss index cf7bf4b..052f6f6 100755 --- a/examples/carbon/css-gridish/scss/_mixins.scss +++ b/examples/carbon/css-gridish/scss/_mixins.scss @@ -3,13 +3,13 @@ @if (map-get($breakpoint, columns) != null) { $columnSize: get-fluid-size($breakpointName, 1); - .#{$prefix}-grid { + .#{$prefix}--grid { @if is-same-breakpoint($breakpoint, $first) { grid-auto-rows: minmax($rowHeight * 1rem, min-content); } grid-template-columns: repeat(auto-fill, $columnSize); - &.#{$prefix}-grid--fixed-columns { + &.#{$prefix}--grid--fixed-columns { grid-template-columns: repeat( auto-fill, map-get($breakpoint, breakpoint) * @@ -18,7 +18,7 @@ ); } - &.#{$prefix}-grid--fluid-rows { + &.#{$prefix}--grid--fluid-rows { grid-auto-rows: $columnSize; } @@ -67,7 +67,7 @@ $columnMultiplier ); - .#{$prefix}-grid__col--#{$currentName}--#{$i} { + .#{$prefix}--grid__col--#{$currentName}--#{$i} { @if $includeFlexFallback { // If second-to-last media query, apply max-width instead of remaking classes in last media query @if $isSecondToLast { @@ -78,14 +78,14 @@ grid-column: span #{$columnMultiplier}; @if is-same-breakpoint($breakpoint, $last) == false { - &.#{$prefix}-grid > *:not([class*="#{$prefix}-grid__col"]) { + &.#{$prefix}--grid > *:not([class*="#{$prefix}-grid__col"]) { grid-column: span #{$i}; } } } - .#{$prefix}-grid--fluid-rows - > .#{$prefix}-grid__height--#{$currentName}--#{$i} { + .#{$prefix}--grid--fluid-rows + > .#{$prefix}--grid__height--#{$currentName}--#{$i} { grid-row: span $i; @if $includeFlexFallback { height: $columnSize; @@ -112,12 +112,12 @@ // Set the height of an item for legacy grid @mixin grid-legacy-heights($name) { - .#{$prefix}-grid__height--#{$name}--0 { + .#{$prefix}--grid__height--#{$name}--0 { height: 0; min-height: 0; } @for $i from 1 to $rows { - .#{$prefix}-grid__height--#{$name}--#{$i} { + .#{$prefix}--grid__height--#{$name}--#{$i} { grid-row: span $i; @if $includeFlexFallback { height: get-fixed-size($i); @@ -146,7 +146,7 @@ @if map-get(nth($currentBreakpoint, 2), breakpoint) < map-get($breakpoint, breakpoint) { - .#{$prefix}-grid__col--#{nth($currentBreakpoint, 1)}--0--only { + .#{$prefix}--grid__col--#{nth($currentBreakpoint, 1)}--0--only { display: block; } } @@ -156,8 +156,8 @@ display: block; } - .#{$prefix}-grid__col--#{$name}--0, - .#{$prefix}-grid__col--#{$name}--0--only { + .#{$prefix}--grid__col--#{$name}--0, + .#{$prefix}--grid__col--#{$name}--0--only { display: none; } } @@ -224,53 +224,53 @@ $marginPlusPadding: $margin; } - .#{$prefix}-container { + .#{$prefix}--container { margin-left: auto; margin-right: auto; padding-left: $margin; padding-right: $margin; } - .#{$prefix}-container--left { + .#{$prefix}--container--left { margin-left: 0; } - .#{$prefix}-container--right { + .#{$prefix}--container--right { margin-right: 0; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--left, - .#{$prefix}-container__break--#{$nameToUse}, - .#{$prefix}-container__break--#{$nameToUse}--left { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--left, + .#{$prefix}--container__break--#{$nameToUse}, + .#{$prefix}--container__break--#{$nameToUse}--left { margin-left: -#{$margin}; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--right, - .#{$prefix}-container__break--#{$nameToUse}, - .#{$prefix}-container__break--#{$nameToUse}--right { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--right, + .#{$prefix}--container__break--#{$nameToUse}, + .#{$prefix}--container__break--#{$nameToUse}--right { margin-right: -#{$margin}; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--left { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--left { padding-left: $margin; - &.#{$prefix}-padding, - &.#{$prefix}-padding--horizontal, - &.#{$prefix}-padding--left { + &.#{$prefix}--padding, + &.#{$prefix}--padding--horizontal, + &.#{$prefix}--padding--left { padding-left: $marginPlusPadding; } } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--right { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--right { padding-right: $margin; - &.#{$prefix}-padding, - &.#{$prefix}-padding--horizontal, - &.#{$prefix}-padding--right { + &.#{$prefix}--padding, + &.#{$prefix}--padding--horizontal, + &.#{$prefix}--padding--right { padding-right: $marginPlusPadding; } } @@ -282,32 +282,32 @@ @if (map-get($breakpoint, padding) != null) { $padding: map-get($breakpoint, padding); - .#{$prefix}-padding { + .#{$prefix}--padding { padding: $padding; } - .#{$prefix}-padding--bottom { + .#{$prefix}--padding--bottom { padding-bottom: $padding; } - .#{$prefix}-padding--left { + .#{$prefix}--padding--left { padding-left: $padding; } - .#{$prefix}-padding--right { + .#{$prefix}--padding--right { padding-right: $padding; } - .#{$prefix}-padding--top { + .#{$prefix}--padding--top { padding-top: $padding; } - .#{$prefix}-padding--horizontal { + .#{$prefix}--padding--horizontal { padding-left: $padding; padding-right: $padding; } - .#{$prefix}-padding--vertical { + .#{$prefix}--padding--vertical { padding-bottom: $padding; padding-top: $padding; } diff --git a/examples/carbon/css-gridish/scss/bx-grid-legacy.scss b/examples/carbon/css-gridish/scss/bx-grid-legacy.scss index 7f14ce0..41ba010 100755 --- a/examples/carbon/css-gridish/scss/bx-grid-legacy.scss +++ b/examples/carbon/css-gridish/scss/bx-grid-legacy.scss @@ -2,24 +2,24 @@ $includeFlexFallback: true; @import "core.scss"; @supports (display: grid) { - .#{$prefix}-grid > *, - .#{$prefix}-grid > [class*="#{$prefix}-grid__col--"] { + .#{$prefix}--grid > *, + .#{$prefix}--grid > [class*="#{$prefix}-grid__col--"] { min-width: initial; max-width: initial; width: initial; - &.#{$prefix}-grid { + &.#{$prefix}--grid { display: grid; } } - .#{$prefix}-grid > [class*="#{$prefix}-grid__height--"] { + .#{$prefix}--grid > [class*="#{$prefix}-grid__height--"] { height: unset; max-height: unset; min-height: initial; } } -.#{$prefix}-grid > script { +.#{$prefix}--grid > script { display: none; } diff --git a/examples/material/css-gridish/scss/_core.scss b/examples/material/css-gridish/scss/_core.scss index 0df8cfd..5c61cf8 100755 --- a/examples/material/css-gridish/scss/_core.scss +++ b/examples/material/css-gridish/scss/_core.scss @@ -11,7 +11,7 @@ body { margin: 0; } -.#{$prefix}-container { +.#{$prefix}--container { box-sizing: border-box; margin-left: auto; margin-right: auto; @@ -20,15 +20,15 @@ body { width: 100vw; } -.#{$prefix}-container--left { +.#{$prefix}--container--left { margin-left: 0; } -.#{$prefix}-container--right { +.#{$prefix}--container--right { margin-right: 0; } -.#{$prefix}-grid { +.#{$prefix}--grid { align-items: flex-start; box-sizing: border-box; @if $includeFlexFallback { @@ -55,16 +55,16 @@ body { // Rules needed in legacy, but needed to change in CSS Grid @if $includeFlexFallback { - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { width: 100%; } @supports (display: grid) { - .#{$prefix}-grid { + .#{$prefix}--grid { align-items: unset; } - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { width: initial; } } @@ -72,7 +72,7 @@ body { // Rules not needed in legacy, but needed in CSS Grid @supports (display: grid) { - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { height: 100%; } } diff --git a/examples/material/css-gridish/scss/_mixins.scss b/examples/material/css-gridish/scss/_mixins.scss index cf7bf4b..052f6f6 100755 --- a/examples/material/css-gridish/scss/_mixins.scss +++ b/examples/material/css-gridish/scss/_mixins.scss @@ -3,13 +3,13 @@ @if (map-get($breakpoint, columns) != null) { $columnSize: get-fluid-size($breakpointName, 1); - .#{$prefix}-grid { + .#{$prefix}--grid { @if is-same-breakpoint($breakpoint, $first) { grid-auto-rows: minmax($rowHeight * 1rem, min-content); } grid-template-columns: repeat(auto-fill, $columnSize); - &.#{$prefix}-grid--fixed-columns { + &.#{$prefix}--grid--fixed-columns { grid-template-columns: repeat( auto-fill, map-get($breakpoint, breakpoint) * @@ -18,7 +18,7 @@ ); } - &.#{$prefix}-grid--fluid-rows { + &.#{$prefix}--grid--fluid-rows { grid-auto-rows: $columnSize; } @@ -67,7 +67,7 @@ $columnMultiplier ); - .#{$prefix}-grid__col--#{$currentName}--#{$i} { + .#{$prefix}--grid__col--#{$currentName}--#{$i} { @if $includeFlexFallback { // If second-to-last media query, apply max-width instead of remaking classes in last media query @if $isSecondToLast { @@ -78,14 +78,14 @@ grid-column: span #{$columnMultiplier}; @if is-same-breakpoint($breakpoint, $last) == false { - &.#{$prefix}-grid > *:not([class*="#{$prefix}-grid__col"]) { + &.#{$prefix}--grid > *:not([class*="#{$prefix}-grid__col"]) { grid-column: span #{$i}; } } } - .#{$prefix}-grid--fluid-rows - > .#{$prefix}-grid__height--#{$currentName}--#{$i} { + .#{$prefix}--grid--fluid-rows + > .#{$prefix}--grid__height--#{$currentName}--#{$i} { grid-row: span $i; @if $includeFlexFallback { height: $columnSize; @@ -112,12 +112,12 @@ // Set the height of an item for legacy grid @mixin grid-legacy-heights($name) { - .#{$prefix}-grid__height--#{$name}--0 { + .#{$prefix}--grid__height--#{$name}--0 { height: 0; min-height: 0; } @for $i from 1 to $rows { - .#{$prefix}-grid__height--#{$name}--#{$i} { + .#{$prefix}--grid__height--#{$name}--#{$i} { grid-row: span $i; @if $includeFlexFallback { height: get-fixed-size($i); @@ -146,7 +146,7 @@ @if map-get(nth($currentBreakpoint, 2), breakpoint) < map-get($breakpoint, breakpoint) { - .#{$prefix}-grid__col--#{nth($currentBreakpoint, 1)}--0--only { + .#{$prefix}--grid__col--#{nth($currentBreakpoint, 1)}--0--only { display: block; } } @@ -156,8 +156,8 @@ display: block; } - .#{$prefix}-grid__col--#{$name}--0, - .#{$prefix}-grid__col--#{$name}--0--only { + .#{$prefix}--grid__col--#{$name}--0, + .#{$prefix}--grid__col--#{$name}--0--only { display: none; } } @@ -224,53 +224,53 @@ $marginPlusPadding: $margin; } - .#{$prefix}-container { + .#{$prefix}--container { margin-left: auto; margin-right: auto; padding-left: $margin; padding-right: $margin; } - .#{$prefix}-container--left { + .#{$prefix}--container--left { margin-left: 0; } - .#{$prefix}-container--right { + .#{$prefix}--container--right { margin-right: 0; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--left, - .#{$prefix}-container__break--#{$nameToUse}, - .#{$prefix}-container__break--#{$nameToUse}--left { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--left, + .#{$prefix}--container__break--#{$nameToUse}, + .#{$prefix}--container__break--#{$nameToUse}--left { margin-left: -#{$margin}; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--right, - .#{$prefix}-container__break--#{$nameToUse}, - .#{$prefix}-container__break--#{$nameToUse}--right { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--right, + .#{$prefix}--container__break--#{$nameToUse}, + .#{$prefix}--container__break--#{$nameToUse}--right { margin-right: -#{$margin}; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--left { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--left { padding-left: $margin; - &.#{$prefix}-padding, - &.#{$prefix}-padding--horizontal, - &.#{$prefix}-padding--left { + &.#{$prefix}--padding, + &.#{$prefix}--padding--horizontal, + &.#{$prefix}--padding--left { padding-left: $marginPlusPadding; } } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--right { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--right { padding-right: $margin; - &.#{$prefix}-padding, - &.#{$prefix}-padding--horizontal, - &.#{$prefix}-padding--right { + &.#{$prefix}--padding, + &.#{$prefix}--padding--horizontal, + &.#{$prefix}--padding--right { padding-right: $marginPlusPadding; } } @@ -282,32 +282,32 @@ @if (map-get($breakpoint, padding) != null) { $padding: map-get($breakpoint, padding); - .#{$prefix}-padding { + .#{$prefix}--padding { padding: $padding; } - .#{$prefix}-padding--bottom { + .#{$prefix}--padding--bottom { padding-bottom: $padding; } - .#{$prefix}-padding--left { + .#{$prefix}--padding--left { padding-left: $padding; } - .#{$prefix}-padding--right { + .#{$prefix}--padding--right { padding-right: $padding; } - .#{$prefix}-padding--top { + .#{$prefix}--padding--top { padding-top: $padding; } - .#{$prefix}-padding--horizontal { + .#{$prefix}--padding--horizontal { padding-left: $padding; padding-right: $padding; } - .#{$prefix}-padding--vertical { + .#{$prefix}--padding--vertical { padding-bottom: $padding; padding-top: $padding; } diff --git a/examples/material/css-gridish/scss/material-grid-legacy.scss b/examples/material/css-gridish/scss/material-grid-legacy.scss index 7f14ce0..41ba010 100755 --- a/examples/material/css-gridish/scss/material-grid-legacy.scss +++ b/examples/material/css-gridish/scss/material-grid-legacy.scss @@ -2,24 +2,24 @@ $includeFlexFallback: true; @import "core.scss"; @supports (display: grid) { - .#{$prefix}-grid > *, - .#{$prefix}-grid > [class*="#{$prefix}-grid__col--"] { + .#{$prefix}--grid > *, + .#{$prefix}--grid > [class*="#{$prefix}-grid__col--"] { min-width: initial; max-width: initial; width: initial; - &.#{$prefix}-grid { + &.#{$prefix}--grid { display: grid; } } - .#{$prefix}-grid > [class*="#{$prefix}-grid__height--"] { + .#{$prefix}--grid > [class*="#{$prefix}-grid__height--"] { height: unset; max-height: unset; min-height: initial; } } -.#{$prefix}-grid > script { +.#{$prefix}--grid > script { display: none; } diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 0df8cfd..5c61cf8 100755 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -11,7 +11,7 @@ body { margin: 0; } -.#{$prefix}-container { +.#{$prefix}--container { box-sizing: border-box; margin-left: auto; margin-right: auto; @@ -20,15 +20,15 @@ body { width: 100vw; } -.#{$prefix}-container--left { +.#{$prefix}--container--left { margin-left: 0; } -.#{$prefix}-container--right { +.#{$prefix}--container--right { margin-right: 0; } -.#{$prefix}-grid { +.#{$prefix}--grid { align-items: flex-start; box-sizing: border-box; @if $includeFlexFallback { @@ -55,16 +55,16 @@ body { // Rules needed in legacy, but needed to change in CSS Grid @if $includeFlexFallback { - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { width: 100%; } @supports (display: grid) { - .#{$prefix}-grid { + .#{$prefix}--grid { align-items: unset; } - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { width: initial; } } @@ -72,7 +72,7 @@ body { // Rules not needed in legacy, but needed in CSS Grid @supports (display: grid) { - .#{$prefix}-grid > * { + .#{$prefix}--grid > * { height: 100%; } } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index cf7bf4b..052f6f6 100755 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -3,13 +3,13 @@ @if (map-get($breakpoint, columns) != null) { $columnSize: get-fluid-size($breakpointName, 1); - .#{$prefix}-grid { + .#{$prefix}--grid { @if is-same-breakpoint($breakpoint, $first) { grid-auto-rows: minmax($rowHeight * 1rem, min-content); } grid-template-columns: repeat(auto-fill, $columnSize); - &.#{$prefix}-grid--fixed-columns { + &.#{$prefix}--grid--fixed-columns { grid-template-columns: repeat( auto-fill, map-get($breakpoint, breakpoint) * @@ -18,7 +18,7 @@ ); } - &.#{$prefix}-grid--fluid-rows { + &.#{$prefix}--grid--fluid-rows { grid-auto-rows: $columnSize; } @@ -67,7 +67,7 @@ $columnMultiplier ); - .#{$prefix}-grid__col--#{$currentName}--#{$i} { + .#{$prefix}--grid__col--#{$currentName}--#{$i} { @if $includeFlexFallback { // If second-to-last media query, apply max-width instead of remaking classes in last media query @if $isSecondToLast { @@ -78,14 +78,14 @@ grid-column: span #{$columnMultiplier}; @if is-same-breakpoint($breakpoint, $last) == false { - &.#{$prefix}-grid > *:not([class*="#{$prefix}-grid__col"]) { + &.#{$prefix}--grid > *:not([class*="#{$prefix}-grid__col"]) { grid-column: span #{$i}; } } } - .#{$prefix}-grid--fluid-rows - > .#{$prefix}-grid__height--#{$currentName}--#{$i} { + .#{$prefix}--grid--fluid-rows + > .#{$prefix}--grid__height--#{$currentName}--#{$i} { grid-row: span $i; @if $includeFlexFallback { height: $columnSize; @@ -112,12 +112,12 @@ // Set the height of an item for legacy grid @mixin grid-legacy-heights($name) { - .#{$prefix}-grid__height--#{$name}--0 { + .#{$prefix}--grid__height--#{$name}--0 { height: 0; min-height: 0; } @for $i from 1 to $rows { - .#{$prefix}-grid__height--#{$name}--#{$i} { + .#{$prefix}--grid__height--#{$name}--#{$i} { grid-row: span $i; @if $includeFlexFallback { height: get-fixed-size($i); @@ -146,7 +146,7 @@ @if map-get(nth($currentBreakpoint, 2), breakpoint) < map-get($breakpoint, breakpoint) { - .#{$prefix}-grid__col--#{nth($currentBreakpoint, 1)}--0--only { + .#{$prefix}--grid__col--#{nth($currentBreakpoint, 1)}--0--only { display: block; } } @@ -156,8 +156,8 @@ display: block; } - .#{$prefix}-grid__col--#{$name}--0, - .#{$prefix}-grid__col--#{$name}--0--only { + .#{$prefix}--grid__col--#{$name}--0, + .#{$prefix}--grid__col--#{$name}--0--only { display: none; } } @@ -224,53 +224,53 @@ $marginPlusPadding: $margin; } - .#{$prefix}-container { + .#{$prefix}--container { margin-left: auto; margin-right: auto; padding-left: $margin; padding-right: $margin; } - .#{$prefix}-container--left { + .#{$prefix}--container--left { margin-left: 0; } - .#{$prefix}-container--right { + .#{$prefix}--container--right { margin-right: 0; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--left, - .#{$prefix}-container__break--#{$nameToUse}, - .#{$prefix}-container__break--#{$nameToUse}--left { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--left, + .#{$prefix}--container__break--#{$nameToUse}, + .#{$prefix}--container__break--#{$nameToUse}--left { margin-left: -#{$margin}; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--right, - .#{$prefix}-container__break--#{$nameToUse}, - .#{$prefix}-container__break--#{$nameToUse}--right { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--right, + .#{$prefix}--container__break--#{$nameToUse}, + .#{$prefix}--container__break--#{$nameToUse}--right { margin-right: -#{$margin}; } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--left { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--left { padding-left: $margin; - &.#{$prefix}-padding, - &.#{$prefix}-padding--horizontal, - &.#{$prefix}-padding--left { + &.#{$prefix}--padding, + &.#{$prefix}--padding--horizontal, + &.#{$prefix}--padding--left { padding-left: $marginPlusPadding; } } - .#{$prefix}-container__bleed--#{$nameToUse}, - .#{$prefix}-container__bleed--#{$nameToUse}--right { + .#{$prefix}--container__bleed--#{$nameToUse}, + .#{$prefix}--container__bleed--#{$nameToUse}--right { padding-right: $margin; - &.#{$prefix}-padding, - &.#{$prefix}-padding--horizontal, - &.#{$prefix}-padding--right { + &.#{$prefix}--padding, + &.#{$prefix}--padding--horizontal, + &.#{$prefix}--padding--right { padding-right: $marginPlusPadding; } } @@ -282,32 +282,32 @@ @if (map-get($breakpoint, padding) != null) { $padding: map-get($breakpoint, padding); - .#{$prefix}-padding { + .#{$prefix}--padding { padding: $padding; } - .#{$prefix}-padding--bottom { + .#{$prefix}--padding--bottom { padding-bottom: $padding; } - .#{$prefix}-padding--left { + .#{$prefix}--padding--left { padding-left: $padding; } - .#{$prefix}-padding--right { + .#{$prefix}--padding--right { padding-right: $padding; } - .#{$prefix}-padding--top { + .#{$prefix}--padding--top { padding-top: $padding; } - .#{$prefix}-padding--horizontal { + .#{$prefix}--padding--horizontal { padding-left: $padding; padding-right: $padding; } - .#{$prefix}-padding--vertical { + .#{$prefix}--padding--vertical { padding-bottom: $padding; padding-top: $padding; } diff --git a/src/scss/gridish-grid-legacy.scss b/src/scss/gridish-grid-legacy.scss index 7f14ce0..41ba010 100755 --- a/src/scss/gridish-grid-legacy.scss +++ b/src/scss/gridish-grid-legacy.scss @@ -2,24 +2,24 @@ $includeFlexFallback: true; @import "core.scss"; @supports (display: grid) { - .#{$prefix}-grid > *, - .#{$prefix}-grid > [class*="#{$prefix}-grid__col--"] { + .#{$prefix}--grid > *, + .#{$prefix}--grid > [class*="#{$prefix}-grid__col--"] { min-width: initial; max-width: initial; width: initial; - &.#{$prefix}-grid { + &.#{$prefix}--grid { display: grid; } } - .#{$prefix}-grid > [class*="#{$prefix}-grid__height--"] { + .#{$prefix}--grid > [class*="#{$prefix}-grid__height--"] { height: unset; max-height: unset; min-height: initial; } } -.#{$prefix}-grid > script { +.#{$prefix}--grid > script { display: none; } From d18a999a01b148ed75f6059a386285cd9e2b488e Mon Sep 17 00:00:00 2001 From: Diego Hernandez Date: Fri, 20 Jul 2018 12:28:02 -0500 Subject: [PATCH 2/2] fix(prefix): also include prefixed selectors that don't start with . --- examples/bootstrap/css-gridish/scss/_core.scss | 2 +- examples/bootstrap/css-gridish/scss/_mixins.scss | 14 +++++++------- .../css-gridish/scss/bootstrap-grid-legacy.scss | 4 ++-- examples/carbon/css-gridish/scss/_core.scss | 2 +- examples/carbon/css-gridish/scss/_mixins.scss | 14 +++++++------- .../carbon/css-gridish/scss/bx-grid-legacy.scss | 4 ++-- examples/material/css-gridish/scss/_core.scss | 2 +- examples/material/css-gridish/scss/_mixins.scss | 14 +++++++------- .../css-gridish/scss/material-grid-legacy.scss | 4 ++-- src/scss/_core.scss | 2 +- src/scss/_mixins.scss | 14 +++++++------- src/scss/gridish-grid-legacy.scss | 4 ++-- 12 files changed, 40 insertions(+), 40 deletions(-) diff --git a/examples/bootstrap/css-gridish/scss/_core.scss b/examples/bootstrap/css-gridish/scss/_core.scss index 5c61cf8..a7e7020 100755 --- a/examples/bootstrap/css-gridish/scss/_core.scss +++ b/examples/bootstrap/css-gridish/scss/_core.scss @@ -49,7 +49,7 @@ body { } } -[class*="#{$prefix}-padding"] { +[class*="#{$prefix}--padding"] { box-sizing: border-box; } diff --git a/examples/bootstrap/css-gridish/scss/_mixins.scss b/examples/bootstrap/css-gridish/scss/_mixins.scss index 052f6f6..c646797 100755 --- a/examples/bootstrap/css-gridish/scss/_mixins.scss +++ b/examples/bootstrap/css-gridish/scss/_mixins.scss @@ -34,7 +34,7 @@ // Generate variables for commonly used rows @mixin grid-heights-fixed($rows) { @for $i from 1 to $rows { - --#{$prefix}-height-#{$i}: get-fixed-size($i); + --#{$prefix}--height-#{$i}: get-fixed-size($i); } } @@ -78,7 +78,7 @@ grid-column: span #{$columnMultiplier}; @if is-same-breakpoint($breakpoint, $last) == false { - &.#{$prefix}--grid > *:not([class*="#{$prefix}-grid__col"]) { + &.#{$prefix}--grid > *:not([class*="#{$prefix}--grid__col"]) { grid-column: span #{$i}; } } @@ -103,7 +103,7 @@ @if $includeFlexFallback { @if is-same-breakpoint($breakpoint, $last) { - [class*="#{$prefix}-grid__col--"] { + [class*="#{$prefix}--grid__col--"] { min-width: 0; } } @@ -152,7 +152,7 @@ } } - [class*="#{$prefix}-grid__col--#{$name}--"] { + [class*="#{$prefix}--grid__col--#{$name}--"] { display: block; } @@ -199,14 +199,14 @@ $previousMargin != "0" { - [class^="#{$prefix}-container__bleed--#{$previousName}"], - [class^="#{$prefix}-container__break--#{$previousName}"] { + [class^="#{$prefix}--container__bleed--#{$previousName}"], + [class^="#{$prefix}--container__break--#{$previousName}"] { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; - &[class^="#{$prefix}-padding"] { + &[class^="#{$prefix}--padding"] { padding-left: $padding; padding-right: $padding; } diff --git a/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss b/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss index 41ba010..6922b03 100755 --- a/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss +++ b/examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss @@ -3,7 +3,7 @@ $includeFlexFallback: true; @supports (display: grid) { .#{$prefix}--grid > *, - .#{$prefix}--grid > [class*="#{$prefix}-grid__col--"] { + .#{$prefix}--grid > [class*="#{$prefix}--grid__col--"] { min-width: initial; max-width: initial; width: initial; @@ -13,7 +13,7 @@ $includeFlexFallback: true; } } - .#{$prefix}--grid > [class*="#{$prefix}-grid__height--"] { + .#{$prefix}--grid > [class*="#{$prefix}--grid__height--"] { height: unset; max-height: unset; min-height: initial; diff --git a/examples/carbon/css-gridish/scss/_core.scss b/examples/carbon/css-gridish/scss/_core.scss index 5c61cf8..a7e7020 100755 --- a/examples/carbon/css-gridish/scss/_core.scss +++ b/examples/carbon/css-gridish/scss/_core.scss @@ -49,7 +49,7 @@ body { } } -[class*="#{$prefix}-padding"] { +[class*="#{$prefix}--padding"] { box-sizing: border-box; } diff --git a/examples/carbon/css-gridish/scss/_mixins.scss b/examples/carbon/css-gridish/scss/_mixins.scss index 052f6f6..c646797 100755 --- a/examples/carbon/css-gridish/scss/_mixins.scss +++ b/examples/carbon/css-gridish/scss/_mixins.scss @@ -34,7 +34,7 @@ // Generate variables for commonly used rows @mixin grid-heights-fixed($rows) { @for $i from 1 to $rows { - --#{$prefix}-height-#{$i}: get-fixed-size($i); + --#{$prefix}--height-#{$i}: get-fixed-size($i); } } @@ -78,7 +78,7 @@ grid-column: span #{$columnMultiplier}; @if is-same-breakpoint($breakpoint, $last) == false { - &.#{$prefix}--grid > *:not([class*="#{$prefix}-grid__col"]) { + &.#{$prefix}--grid > *:not([class*="#{$prefix}--grid__col"]) { grid-column: span #{$i}; } } @@ -103,7 +103,7 @@ @if $includeFlexFallback { @if is-same-breakpoint($breakpoint, $last) { - [class*="#{$prefix}-grid__col--"] { + [class*="#{$prefix}--grid__col--"] { min-width: 0; } } @@ -152,7 +152,7 @@ } } - [class*="#{$prefix}-grid__col--#{$name}--"] { + [class*="#{$prefix}--grid__col--#{$name}--"] { display: block; } @@ -199,14 +199,14 @@ $previousMargin != "0" { - [class^="#{$prefix}-container__bleed--#{$previousName}"], - [class^="#{$prefix}-container__break--#{$previousName}"] { + [class^="#{$prefix}--container__bleed--#{$previousName}"], + [class^="#{$prefix}--container__break--#{$previousName}"] { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; - &[class^="#{$prefix}-padding"] { + &[class^="#{$prefix}--padding"] { padding-left: $padding; padding-right: $padding; } diff --git a/examples/carbon/css-gridish/scss/bx-grid-legacy.scss b/examples/carbon/css-gridish/scss/bx-grid-legacy.scss index 41ba010..6922b03 100755 --- a/examples/carbon/css-gridish/scss/bx-grid-legacy.scss +++ b/examples/carbon/css-gridish/scss/bx-grid-legacy.scss @@ -3,7 +3,7 @@ $includeFlexFallback: true; @supports (display: grid) { .#{$prefix}--grid > *, - .#{$prefix}--grid > [class*="#{$prefix}-grid__col--"] { + .#{$prefix}--grid > [class*="#{$prefix}--grid__col--"] { min-width: initial; max-width: initial; width: initial; @@ -13,7 +13,7 @@ $includeFlexFallback: true; } } - .#{$prefix}--grid > [class*="#{$prefix}-grid__height--"] { + .#{$prefix}--grid > [class*="#{$prefix}--grid__height--"] { height: unset; max-height: unset; min-height: initial; diff --git a/examples/material/css-gridish/scss/_core.scss b/examples/material/css-gridish/scss/_core.scss index 5c61cf8..a7e7020 100755 --- a/examples/material/css-gridish/scss/_core.scss +++ b/examples/material/css-gridish/scss/_core.scss @@ -49,7 +49,7 @@ body { } } -[class*="#{$prefix}-padding"] { +[class*="#{$prefix}--padding"] { box-sizing: border-box; } diff --git a/examples/material/css-gridish/scss/_mixins.scss b/examples/material/css-gridish/scss/_mixins.scss index 052f6f6..c646797 100755 --- a/examples/material/css-gridish/scss/_mixins.scss +++ b/examples/material/css-gridish/scss/_mixins.scss @@ -34,7 +34,7 @@ // Generate variables for commonly used rows @mixin grid-heights-fixed($rows) { @for $i from 1 to $rows { - --#{$prefix}-height-#{$i}: get-fixed-size($i); + --#{$prefix}--height-#{$i}: get-fixed-size($i); } } @@ -78,7 +78,7 @@ grid-column: span #{$columnMultiplier}; @if is-same-breakpoint($breakpoint, $last) == false { - &.#{$prefix}--grid > *:not([class*="#{$prefix}-grid__col"]) { + &.#{$prefix}--grid > *:not([class*="#{$prefix}--grid__col"]) { grid-column: span #{$i}; } } @@ -103,7 +103,7 @@ @if $includeFlexFallback { @if is-same-breakpoint($breakpoint, $last) { - [class*="#{$prefix}-grid__col--"] { + [class*="#{$prefix}--grid__col--"] { min-width: 0; } } @@ -152,7 +152,7 @@ } } - [class*="#{$prefix}-grid__col--#{$name}--"] { + [class*="#{$prefix}--grid__col--#{$name}--"] { display: block; } @@ -199,14 +199,14 @@ $previousMargin != "0" { - [class^="#{$prefix}-container__bleed--#{$previousName}"], - [class^="#{$prefix}-container__break--#{$previousName}"] { + [class^="#{$prefix}--container__bleed--#{$previousName}"], + [class^="#{$prefix}--container__break--#{$previousName}"] { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; - &[class^="#{$prefix}-padding"] { + &[class^="#{$prefix}--padding"] { padding-left: $padding; padding-right: $padding; } diff --git a/examples/material/css-gridish/scss/material-grid-legacy.scss b/examples/material/css-gridish/scss/material-grid-legacy.scss index 41ba010..6922b03 100755 --- a/examples/material/css-gridish/scss/material-grid-legacy.scss +++ b/examples/material/css-gridish/scss/material-grid-legacy.scss @@ -3,7 +3,7 @@ $includeFlexFallback: true; @supports (display: grid) { .#{$prefix}--grid > *, - .#{$prefix}--grid > [class*="#{$prefix}-grid__col--"] { + .#{$prefix}--grid > [class*="#{$prefix}--grid__col--"] { min-width: initial; max-width: initial; width: initial; @@ -13,7 +13,7 @@ $includeFlexFallback: true; } } - .#{$prefix}--grid > [class*="#{$prefix}-grid__height--"] { + .#{$prefix}--grid > [class*="#{$prefix}--grid__height--"] { height: unset; max-height: unset; min-height: initial; diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 5c61cf8..a7e7020 100755 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -49,7 +49,7 @@ body { } } -[class*="#{$prefix}-padding"] { +[class*="#{$prefix}--padding"] { box-sizing: border-box; } diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 052f6f6..c646797 100755 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -34,7 +34,7 @@ // Generate variables for commonly used rows @mixin grid-heights-fixed($rows) { @for $i from 1 to $rows { - --#{$prefix}-height-#{$i}: get-fixed-size($i); + --#{$prefix}--height-#{$i}: get-fixed-size($i); } } @@ -78,7 +78,7 @@ grid-column: span #{$columnMultiplier}; @if is-same-breakpoint($breakpoint, $last) == false { - &.#{$prefix}--grid > *:not([class*="#{$prefix}-grid__col"]) { + &.#{$prefix}--grid > *:not([class*="#{$prefix}--grid__col"]) { grid-column: span #{$i}; } } @@ -103,7 +103,7 @@ @if $includeFlexFallback { @if is-same-breakpoint($breakpoint, $last) { - [class*="#{$prefix}-grid__col--"] { + [class*="#{$prefix}--grid__col--"] { min-width: 0; } } @@ -152,7 +152,7 @@ } } - [class*="#{$prefix}-grid__col--#{$name}--"] { + [class*="#{$prefix}--grid__col--#{$name}--"] { display: block; } @@ -199,14 +199,14 @@ $previousMargin != "0" { - [class^="#{$prefix}-container__bleed--#{$previousName}"], - [class^="#{$prefix}-container__break--#{$previousName}"] { + [class^="#{$prefix}--container__bleed--#{$previousName}"], + [class^="#{$prefix}--container__break--#{$previousName}"] { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; - &[class^="#{$prefix}-padding"] { + &[class^="#{$prefix}--padding"] { padding-left: $padding; padding-right: $padding; } diff --git a/src/scss/gridish-grid-legacy.scss b/src/scss/gridish-grid-legacy.scss index 41ba010..6922b03 100755 --- a/src/scss/gridish-grid-legacy.scss +++ b/src/scss/gridish-grid-legacy.scss @@ -3,7 +3,7 @@ $includeFlexFallback: true; @supports (display: grid) { .#{$prefix}--grid > *, - .#{$prefix}--grid > [class*="#{$prefix}-grid__col--"] { + .#{$prefix}--grid > [class*="#{$prefix}--grid__col--"] { min-width: initial; max-width: initial; width: initial; @@ -13,7 +13,7 @@ $includeFlexFallback: true; } } - .#{$prefix}--grid > [class*="#{$prefix}-grid__height--"] { + .#{$prefix}--grid > [class*="#{$prefix}--grid__height--"] { height: unset; max-height: unset; min-height: initial;