Skip to content

Commit 44f491a

Browse files
pmbrownpmbrown
committed
StyleMods v1.1.9
See release notes.
1 parent e31b585 commit 44f491a

File tree

6 files changed

+330
-45
lines changed

6 files changed

+330
-45
lines changed

‎scss/components/alerts.scss

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -34,34 +34,25 @@ $close-alert: $alert-close-icon !default;
3434
}
3535

3636
.alert[open] {
37-
display: flex;
38-
flex-wrap: wrap;
39-
align-items: center;
4037
position: relative;
4138
inline-size: 100%;
4239
max-inline-size: 100%;
4340
margin: initial;
4441
margin-block-end: $alert-margin-bottom;
4542
padding-block: $alert-padding-block;
46-
padding-inline-end: $alert-padding-inline;
43+
padding-inline-end: 3rem;
4744
transition: none;
4845
}
4946

5047
.alert [method="dialog"] {
51-
margin-inline-start: auto;
48+
position: absolute;
49+
inset-block-start: 0.375rem;
50+
inset-inline-end: 0.375rem;
5251
}
5352

5453
.alert [method="dialog"] button {
5554
background-color: transparent;
5655
border: none;
57-
padding-block: 0.1rem;
58-
padding-inline: 0.5rem;
59-
margin-inline-start: auto;
60-
}
61-
62-
.alert [method="dialog"] button:is(:hover, :focus, :active) {
63-
background-color: transparent;
64-
border: none;
6556
}
6657

6758
.alert [method="dialog"] button:before {
@@ -78,11 +69,11 @@ $close-alert: $alert-close-icon !default;
7869

7970
.alert [method="dialog"] button span {
8071
position: absolute;
81-
width: 1px;
82-
height: 1px;
72+
block-size: 1px;
73+
inline-size: 1px;
8374
margin: -1px;
8475
overflow: hidden;
85-
clip: rect(0,0,0,0);
76+
clip-path: inset(50%);
8677
white-space: nowrap;
8778
}
8879

‎scss/content/typography.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ a > :where(code) {
266266
}
267267

268268
:where(figure) {
269-
margin-block-end: 1rem;
269+
margin-block-end: var(--fig-mb, 1rem);
270270
}
271271

272272
:where(img, svg, video, audio, iframe, embed, object) {

‎scss/layout/aspect-ratio.scss

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
// ----------------------------------------------------------
2+
// Aspect ratio
3+
// ----------------------------------------------------------
4+
$aspect-ratio-values: (
5+
"auto": auto,
6+
"1x1": #{"1 / 1"},
7+
"16x9": #{"16 / 9"},
8+
"5x2": #{"5 / 2"},
9+
"4x1": #{"4 / 1"},
10+
"3x4": #{"3 / 4"},
11+
"4x6": #{"4 / 6"},
12+
) !default;
13+
14+
@mixin aspect-ratio-css {
15+
.ratio {
16+
aspect-ratio: var(--ratio);
17+
}
18+
19+
@each $name, $value in $aspect-ratio-values {
20+
.ratio-#{$name} {
21+
aspect-ratio: $value;
22+
}
23+
}
24+
25+
.child-ratio *:not(figcaption) {
26+
aspect-ratio: var(--ratio);
27+
}
28+
29+
@each $name, $value in $aspect-ratio-values {
30+
.child-ratio-#{$name} *:not(figcaption) {
31+
aspect-ratio: $value;
32+
}
33+
}
34+
}
35+
36+
37+
// Breakpoints
38+
@mixin aspect-ratio-xxl-css {
39+
@each $name, $value in $aspect-ratio-values {
40+
.ratio-#{$name}-xxl {
41+
aspect-ratio: #{$value};
42+
}
43+
}
44+
45+
@each $name, $value in $aspect-ratio-values {
46+
.child-ratio-#{$name}-xxl *:not(figcaption) {
47+
aspect-ratio: $value;
48+
}
49+
}
50+
}
51+
52+
@mixin aspect-ratio-xl-css {
53+
@each $name, $value in $aspect-ratio-values {
54+
.ratio-#{$name}-xl {
55+
aspect-ratio: #{$value};
56+
}
57+
}
58+
59+
@each $name, $value in $aspect-ratio-values {
60+
.child-ratio-#{$name}-xl *:not(figcaption) {
61+
aspect-ratio: $value;
62+
}
63+
}
64+
}
65+
66+
@mixin aspect-ratio-lg-css {
67+
@each $name, $value in $aspect-ratio-values {
68+
.ratio-#{$name}-lg {
69+
aspect-ratio: #{$value};
70+
}
71+
}
72+
73+
@each $name, $value in $aspect-ratio-values {
74+
.child-ratio-#{$name}-lg *:not(figcaption) {
75+
aspect-ratio: $value;
76+
}
77+
}
78+
}
79+
80+
@mixin aspect-ratio-md-css {
81+
@each $name, $value in $aspect-ratio-values {
82+
.ratio-#{$name}-md {
83+
aspect-ratio: #{$value};
84+
}
85+
}
86+
87+
@each $name, $value in $aspect-ratio-values {
88+
.child-ratio-#{$name}-md *:not(figcaption) {
89+
aspect-ratio: $value;
90+
}
91+
}
92+
}
93+
94+
@mixin aspect-ratio-sm-css {
95+
@each $name, $value in $aspect-ratio-values {
96+
.ratio-#{$name}-sm {
97+
aspect-ratio: #{$value};
98+
}
99+
}
100+
101+
@each $name, $value in $aspect-ratio-values {
102+
.child-ratio-#{$name}-sm *:not(figcaption) {
103+
aspect-ratio: $value;
104+
}
105+
}
106+
}
107+
108+
@mixin aspect-ratio-xs-css {
109+
@each $name, $value in $aspect-ratio-values {
110+
.ratio-#{$name}-xs {
111+
aspect-ratio: #{$value};
112+
}
113+
}
114+
115+
@each $name, $value in $aspect-ratio-values {
116+
.child-ratio-#{$name}-xs *:not(figcaption) {
117+
aspect-ratio: $value;
118+
}
119+
}
120+
}
121+
122+
@mixin aspect-ratio-xxs-css {
123+
@each $name, $value in $aspect-ratio-values {
124+
.ratio-#{$name}-xxs {
125+
aspect-ratio: #{$value};
126+
}
127+
}
128+
129+
@each $name, $value in $aspect-ratio-values {
130+
.child-ratio-#{$name}-xxs *:not(figcaption) {
131+
aspect-ratio: $value;
132+
}
133+
}
134+
}

‎scss/layout/index.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// Layout
33
// ----------------------------------------------------------
44
@forward "alignment";
5+
@forward "aspect-ratio";
56
@forward "block";
67
@forward "columns";
78
@forward "containers";
@@ -13,6 +14,7 @@
1314
@forward "margins";
1415
@forward "padding";
1516
@forward "position";
17+
@forward "object-fit";
1618
@forward "order";
1719
@forward "overflow";
1820
@forward "overscroll";

‎scss/layout/object-fit.scss

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
// ----------------------------------------------------------
2+
// Object-fit
3+
// ----------------------------------------------------------
4+
$object-fit-values: (
5+
"contain": contain,
6+
"cover": cover,
7+
"fill": fill,
8+
"scale": scale-down,
9+
"none": none,
10+
"initial": initial,
11+
) !default;
12+
13+
@mixin object-fit-css {
14+
@each $name, $value in $object-fit-values {
15+
.object-#{$name} {
16+
object-fit: $value;
17+
}
18+
}
19+
20+
@each $name, $value in $object-fit-values {
21+
.child-object-#{$name} * {
22+
object-fit: $value;
23+
}
24+
}
25+
}
26+
27+
@mixin object-fit-xxl-css {
28+
@each $name, $value in $object-fit-values {
29+
.object-#{$name}-xxl {
30+
object-fit: $value;
31+
}
32+
}
33+
34+
@each $name, $value in $object-fit-values {
35+
.child-object-#{$name}-xxl * {
36+
object-fit: $value;
37+
}
38+
}
39+
}
40+
41+
@mixin object-fit-xl-css {
42+
@each $name, $value in $object-fit-values {
43+
.object-#{$name}-xl {
44+
object-fit: $value;
45+
}
46+
}
47+
48+
@each $name, $value in $object-fit-values {
49+
.child-object-#{$name}-xl * {
50+
object-fit: $value;
51+
}
52+
}
53+
}
54+
55+
@mixin object-fit-lg-css {
56+
@each $name, $value in $object-fit-values {
57+
.object-#{$name}-lg {
58+
object-fit: $value;
59+
}
60+
}
61+
62+
@each $name, $value in $object-fit-values {
63+
.child-object-#{$name}-lg * {
64+
object-fit: $value;
65+
}
66+
}
67+
}
68+
69+
@mixin object-fit-md-css {
70+
@each $name, $value in $object-fit-values {
71+
.object-#{$name}-md {
72+
object-fit: $value;
73+
}
74+
}
75+
76+
@each $name, $value in $object-fit-values {
77+
.child-object-#{$name}-md * {
78+
object-fit: $value;
79+
}
80+
}
81+
}
82+
83+
@mixin object-fit-sm-css {
84+
@each $name, $value in $object-fit-values {
85+
.object-#{$name}-sm {
86+
object-fit: $value;
87+
}
88+
}
89+
90+
@each $name, $value in $object-fit-values {
91+
.child-object-#{$name}-sm * {
92+
object-fit: $value;
93+
}
94+
}
95+
}
96+
97+
@mixin object-fit-xxl-css {
98+
@each $name, $value in $object-fit-values {
99+
.object-#{$name}-xs {
100+
object-fit: $value;
101+
}
102+
}
103+
104+
@each $name, $value in $object-fit-values {
105+
.child-object-#{$name}-xs * {
106+
object-fit: $value;
107+
}
108+
}
109+
}
110+
111+
@mixin object-fit-xxl-css {
112+
@each $name, $value in $object-fit-values {
113+
.object-#{$name}-xxs {
114+
object-fit: $value;
115+
}
116+
}
117+
118+
@each $name, $value in $object-fit-values {
119+
.child-object-#{$name}-xxs * {
120+
object-fit: $value;
121+
}
122+
}
123+
}

0 commit comments

Comments
 (0)