Skip to content
This repository was archived by the owner on Jul 18, 2024. It is now read-only.

Commit 4d16d65

Browse files
seejamescodeseejamescode
committed
fix(scss): make sure legacy rules are unset by support query
1 parent b2ecc4e commit 4d16d65

21 files changed

+92
-96
lines changed

‎examples/bootstrap/css-gridish/bootstrap-grid.sketch

3.09 KB
Binary file not shown.

‎examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -471,18 +471,18 @@ body {
471471
min-width: 0; } }
472472

473473
@supports (display: grid) {
474-
.bootstrap-grid > * {
475-
height: initial;
476-
min-height: initial;
474+
.bootstrap-grid > *,
475+
.bootstrap-grid > [class*="bootstrap-grid__col--"] {
477476
min-width: initial;
478-
max-height: initial;
479477
max-width: initial;
480478
width: initial; }
481-
.bootstrap-grid > *.bootstrap-grid {
479+
.bootstrap-grid > *.bootstrap-grid,
480+
.bootstrap-grid > [class*="bootstrap-grid__col--"].bootstrap-grid {
482481
display: grid; }
483-
[class*="bootstrap-grid__height-"] {
482+
.bootstrap-grid > [class*="bootstrap-grid__height--"] {
484483
height: unset;
485-
max-height: unset; } }
484+
max-height: unset;
485+
min-height: initial; } }
486486

487487
.bootstrap-grid > script {
488488
display: none; }

‎examples/bootstrap/css-gridish/css/bootstrap-grid-legacy.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/bootstrap/css-gridish/scss/_core.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,12 @@ body {
8686
@each $name, $breakpoint in $allBreakpoints {
8787
@include media-query($name) {
8888
@if is-same-breakpoint($breakpoint, $last) == false {
89-
@include grid-legacy-heights($name, $rows);
89+
@include grid-legacy-heights($name);
9090
}
91-
@include grid-legacy-zeros($breakpoint, $allBreakpoints, $name);
91+
@include grid-legacy-zeros($breakpoint, $name);
9292
@include grid-padding($breakpoint);
93-
@include grid($breakpoint, $first, $name);
94-
@include grid-legacy-columns($breakpoint, $last, $name, $allBreakpoints);
93+
@include grid($breakpoint, $name);
94+
@include grid-legacy-columns($breakpoint, $name);
9595

9696
// Wrap all bleed/break classes and css variables in a CSS Grid support query
9797
@include grid-legacy-wrapper($includeFlexFallback) {

‎examples/bootstrap/css-gridish/scss/_mixins.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Set the width of a grid’s column
2-
@mixin grid($breakpoint, $first, $breakpointName) {
2+
@mixin grid($breakpoint, $breakpointName) {
33
@if (map-get($breakpoint, columns) != null) {
44
$columnSize: get-fluid-size($breakpointName, 1);
55

@@ -39,12 +39,12 @@
3939
}
4040

4141
// Set the width of a grid’s column for legacy grid
42-
@mixin grid-legacy-columns($breakpoint, $last, $name, $breakpoints) {
42+
@mixin grid-legacy-columns($breakpoint, $name) {
4343
// Do not make class if last media query
4444
@if is-same-breakpoint($breakpoint, $last) == false {
4545
// Loop each breakpoint to insert previous breakpoint classes inside this breakpoint’s media query
4646
// Ex: Make sure .yourPrefix-grid__col--sm--2 has correct sizes in the lg media query
47-
@each $currentName, $currentBreakpoint in $breakpoints {
47+
@each $currentName, $currentBreakpoint in $allBreakpoints {
4848
// Check if current breakpoint is not bigger than current media query
4949
@if map-get($breakpoint, breakpoint) >=
5050
map-get($currentBreakpoint, breakpoint)
@@ -59,11 +59,11 @@
5959

6060
$isSecondToLast: is-same-breakpoint(
6161
$breakpoint,
62-
nth(nth($breakpoints, length($breakpoints) - 1), 2)
62+
nth(nth($allBreakpoints, length($allBreakpoints) - 1), 2)
6363
);
6464

6565
$maxColumnSize: get-fluid-size(
66-
nth(nth($breakpoints, length($breakpoints)), 1),
66+
nth(nth($allBreakpoints, length($allBreakpoints)), 1),
6767
$columnMultiplier
6868
);
6969

@@ -111,7 +111,7 @@
111111
}
112112

113113
// Set the height of an item for legacy grid
114-
@mixin grid-legacy-heights($name, $rows) {
114+
@mixin grid-legacy-heights($name) {
115115
.#{$prefix}-grid__height--#{$name}--0 {
116116
height: 0;
117117
min-height: 0;
@@ -139,10 +139,10 @@
139139
}
140140

141141
// Generate all classes for 0 and 0-only displaying, including custom breakpoints if they exist
142-
@mixin grid-legacy-zeros($breakpoint, $breakpoints, $name) {
142+
@mixin grid-legacy-zeros($breakpoint, $name) {
143143
// Undo previous breakpoint’s 0--only class
144-
@for $i from length($breakpoints) * -1 through -1 {
145-
$currentBreakpoint: nth($breakpoints, $i);
144+
@for $i from length($allBreakpoints) * -1 through -1 {
145+
$currentBreakpoint: nth($allBreakpoints, $i);
146146
@if map-get(nth($currentBreakpoint, 2), breakpoint) <
147147
map-get($breakpoint, breakpoint)
148148
{

‎examples/bootstrap/css-gridish/scss/bootstrap-grid-legacy.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@ $includeFlexFallback: true;
22
@import "core.scss";
33

44
@supports (display: grid) {
5-
.#{$prefix}-grid > * {
6-
height: initial;
7-
min-height: initial;
5+
.#{$prefix}-grid > *,
6+
.#{$prefix}-grid > [class*="#{$prefix}-grid__col--"] {
87
min-width: initial;
9-
max-height: initial;
108
max-width: initial;
119
width: initial;
1210

@@ -15,9 +13,10 @@ $includeFlexFallback: true;
1513
}
1614
}
1715

18-
[class*="#{$prefix}-grid__height-"] {
16+
.#{$prefix}-grid > [class*="#{$prefix}-grid__height--"] {
1917
height: unset;
2018
max-height: unset;
19+
min-height: initial;
2120
}
2221
}
2322

‎examples/carbon/css-gridish/bx-grid.sketch

3.16 KB
Binary file not shown.

‎examples/carbon/css-gridish/css/bx-grid-legacy.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -544,18 +544,18 @@ body {
544544
padding-right: calc(5vw + 0.625rem); } } }
545545

546546
@supports (display: grid) {
547-
.bx-grid > * {
548-
height: initial;
549-
min-height: initial;
547+
.bx-grid > *,
548+
.bx-grid > [class*="bx-grid__col--"] {
550549
min-width: initial;
551-
max-height: initial;
552550
max-width: initial;
553551
width: initial; }
554-
.bx-grid > *.bx-grid {
552+
.bx-grid > *.bx-grid,
553+
.bx-grid > [class*="bx-grid__col--"].bx-grid {
555554
display: grid; }
556-
[class*="bx-grid__height-"] {
555+
.bx-grid > [class*="bx-grid__height--"] {
557556
height: unset;
558-
max-height: unset; } }
557+
max-height: unset;
558+
min-height: initial; } }
559559

560560
.bx-grid > script {
561561
display: none; }

‎examples/carbon/css-gridish/css/bx-grid-legacy.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/carbon/css-gridish/scss/_core.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,12 +86,12 @@ body {
8686
@each $name, $breakpoint in $allBreakpoints {
8787
@include media-query($name) {
8888
@if is-same-breakpoint($breakpoint, $last) == false {
89-
@include grid-legacy-heights($name, $rows);
89+
@include grid-legacy-heights($name);
9090
}
91-
@include grid-legacy-zeros($breakpoint, $allBreakpoints, $name);
91+
@include grid-legacy-zeros($breakpoint, $name);
9292
@include grid-padding($breakpoint);
93-
@include grid($breakpoint, $first, $name);
94-
@include grid-legacy-columns($breakpoint, $last, $name, $allBreakpoints);
93+
@include grid($breakpoint, $name);
94+
@include grid-legacy-columns($breakpoint, $name);
9595

9696
// Wrap all bleed/break classes and css variables in a CSS Grid support query
9797
@include grid-legacy-wrapper($includeFlexFallback) {

0 commit comments

Comments
 (0)