Skip to content

Commit 4d39790

Browse files
MaxLardenoisMaxLardenois
authored
feat: add helpers for grid margin and grid gap (#3344)
1 parent 49bf58e commit 4d39790

9 files changed

Lines changed: 3592 additions & 345 deletions

File tree

‎.bundlewatch.config.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
"files": [
33
{
44
"path": "./packages/orange/dist/css/ouds-web-bootstrap.css",
5-
"maxSize": "72.5 kB"
5+
"maxSize": "74.75 kB"
66
},
77
{
88
"path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css",
9-
"maxSize": "68.80 kB"
9+
"maxSize": "71.0 kB"
1010
},
1111
{
1212
"path": "./packages/orange/dist/css/ouds-web-grid.css",
@@ -18,27 +18,27 @@
1818
},
1919
{
2020
"path": "./packages/orange/dist/css/ouds-web-reboot.css",
21-
"maxSize": "7.25 kB"
21+
"maxSize": "7.5 kB"
2222
},
2323
{
2424
"path": "./packages/orange/dist/css/ouds-web-reboot.min.css",
2525
"maxSize": "7 kB"
2626
},
2727
{
2828
"path": "./packages/orange/dist/css/ouds-web-utilities.css",
29-
"maxSize": "23.0 kB"
29+
"maxSize": "24.0 kB"
3030
},
3131
{
3232
"path": "./packages/orange/dist/css/ouds-web-utilities.min.css",
33-
"maxSize": "22.0 kB"
33+
"maxSize": "23.25 kB"
3434
},
3535
{
3636
"path": "./packages/orange/dist/css/ouds-web.css",
37-
"maxSize": "63.0 kB"
37+
"maxSize": "65.0 kB"
3838
},
3939
{
4040
"path": "./packages/orange/dist/css/ouds-web.min.css",
41-
"maxSize": "59.25 kB"
41+
"maxSize": "61.5 kB"
4242
},
4343
{
4444
"path": "./dist/js/ouds-web.bundle.js",

‎scss/_maps.scss‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ $ouds-dimension-space-scaled: (
5555
"large": var(--#{$prefix}space-scaled-large),
5656
"xlarge": var(--#{$prefix}space-scaled-xlarge),
5757
"2xlarge": var(--#{$prefix}space-scaled-2xlarge),
58-
"3xlarge": var(--#{$prefix}space-scaled-3xlarge)
58+
"3xlarge": var(--#{$prefix}space-scaled-3xlarge),
5959
) !default;
6060

6161
$ouds-dimension-negative-space-scaled: (
@@ -67,7 +67,7 @@ $ouds-dimension-negative-space-scaled: (
6767
"nlarge": calc(-1 * var(--#{$prefix}space-scaled-large)),
6868
"nxlarge": calc(-1 * var(--#{$prefix}space-scaled-xlarge)),
6969
"n2xlarge": calc(-1 * var(--#{$prefix}space-scaled-2xlarge)),
70-
"n3xlarge": calc(-1 * var(--#{$prefix}space-scaled-3xlarge))
70+
"n3xlarge": calc(-1 * var(--#{$prefix}space-scaled-3xlarge)),
7171
) !default;
7272

7373
// scss-docs-start ouds-maps-dimension-fixed
@@ -83,11 +83,30 @@ $ouds-dimension-space-fixed: (
8383
"2xlarge": $ouds-space-fixed-2xlarge,
8484
"3xlarge": $ouds-space-fixed-3xlarge,
8585
"4xlarge": $ouds-space-fixed-4xlarge,
86-
"5xlarge": $ouds-space-fixed-5xlarge
86+
"5xlarge": $ouds-space-fixed-5xlarge,
8787
) !default;
8888
// scss-docs-end ouds-maps-dimension-fixed
8989

90-
$ouds-dimension-negative-space-fixed: if($enable-negative-margins, negativify-map($ouds-dimension-space-fixed), null) !default;
90+
// scss-docs-start gutters
91+
$gutters: $ouds-dimension-space-fixed !default; // instead of `$spacers`
92+
// scss-docs-end gutters
93+
94+
$ouds-dimension-negative-space-fixed: (
95+
"ngridgap": calc(-1 * var(--#{$prefix}grid-gap)),
96+
"ngridmargin": calc(-1 * var(--#{$prefix}grid-margin))
97+
) !default;
98+
99+
$ouds-dimension-negative-space-fixed: if($enable-negative-margins, map-merge(negativify-map($ouds-dimension-space-fixed), $ouds-dimension-negative-space-fixed), $ouds-dimension-negative-space-fixed) !default;
100+
101+
// *gridgap and *gridmargin should always be present and are not compatible with negativify-map as they are custom props
102+
// stylelint-disable-next-line scss/dollar-variable-default
103+
$ouds-dimension-space-fixed: map-merge(
104+
$ouds-dimension-space-fixed,
105+
(
106+
"gridgap": var(--#{$prefix}grid-gap),
107+
"gridmargin": var(--#{$prefix}grid-margin),
108+
)
109+
);
91110
// scss-docs-end ouds-maps-dimension
92111

93112
// scss-docs-start ouds-maps-elevations
@@ -427,10 +446,6 @@ $grid-gutter-widths: (
427446
) !default;
428447
// scss-docs-end grid-gutters
429448

430-
// scss-docs-start gutters
431-
$gutters: $ouds-dimension-space-fixed !default; // instead of `$spacers`
432-
// scss-docs-end gutters
433-
434449
@if $enable-bootstrap-compatibility {
435450
// Add Bootstrap gutters
436451
$gutters: map-merge($gutters, $spacers);

‎scss/_root.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -460,6 +460,20 @@
460460
--#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor};
461461
--#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor};
462462
// End mod
463+
464+
// OUDS mod
465+
// Grid specific spacings
466+
@each $breakpoint, $gutter in $grid-gutter-widths {
467+
@include media-breakpoint-up($breakpoint) {
468+
--#{$prefix}grid-gap: #{$gutter};
469+
}
470+
}
471+
@each $breakpoint, $container-fluid-marg in $container-fluid-margin {
472+
@include media-breakpoint-up($breakpoint) {
473+
--#{$prefix}grid-margin: #{$container-fluid-marg};
474+
}
475+
}
476+
// End mod
463477
}
464478

465479
@if $enable-dark-mode {

‎scss/mixins/_container.scss‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,11 @@
33
// scss-docs-start container-mixins
44
@mixin make-container($gutter: $container-padding-x) {
55
// OUDS mod: no CSS variable gutter definition inside containers
6+
--#{$prefix}container-margin-x: var(--#{$prefix}grid-margin);
67
width: 100%;
78
padding-right: var(--#{$prefix}container-margin-x); // OUDS mod: instead of `calc(var(--#{$prefix}gutter-x) * .5)`
89
padding-left: var(--#{$prefix}container-margin-x); // OUDS mod: instead of `calc(var(--#{$prefix}gutter-x) * .5)`
910
margin-right: auto;
1011
margin-left: auto;
11-
12-
// OUDS mod: gutter depends on breakpoints
13-
@each $breakpoint, $container-fluid-marg in $container-fluid-margin {
14-
@include media-breakpoint-up($breakpoint) {
15-
--#{$prefix}container-margin-x: #{$container-fluid-marg};
16-
}
17-
}
18-
// End mod
1912
}
2013
// scss-docs-end container-mixins

‎scss/mixins/_grid.scss‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,14 @@
33
// Generate semantic grid columns with these mixins.
44

55
@mixin make-row($gutter: $grid-gutter-width) {
6-
// OUDS mod: `--#{$prefix}gutter-x` is handled below
6+
--#{$prefix}gutter-x: var(--#{$prefix}grid-gap);
77
--#{$prefix}gutter-y: 0;
88
display: flex;
99
flex-wrap: wrap;
1010
// TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
1111
margin-top: calc(-1 * var(--#{$prefix}gutter-y));
1212
margin-right: calc(-.5 * var(--#{$prefix}gutter-x));
1313
margin-left: calc(-.5 * var(--#{$prefix}gutter-x));
14-
15-
// OUDS mod: gutter depends on breakpoints
16-
@each $breakpoint, $gutter2 in $grid-gutter-widths {
17-
@include media-breakpoint-up($breakpoint) {
18-
--#{$prefix}gutter-x: #{$gutter2};
19-
}
20-
}
21-
// End mod
2214
}
2315

2416
@mixin make-col-ready() {

0 commit comments

Comments
 (0)