Skip to content

Commit 1269919

Browse files
iroybotlinioiroybotlinio
committed
chore: continued refactoring of inline elements
1 parent 7a95e42 commit 1269919

13 files changed

+404
-99
lines changed

‎scss/block/_preformatted-text.scss‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,33 @@
2121
font-weight: var(#{$css-var-prefix}font-weight);
2222
}
2323
}
24+
25+
@if map.get($modules, "content/code") {
26+
// Reboot based on :
27+
// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
28+
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
29+
// ––––––––––––––––––––
30+
31+
// 1. Correct the inheritance and scaling of font size in all browsers
32+
// 2. Correct the odd `em` font sizing in all browsers
33+
#{$parent-selector} pre {
34+
font-size: 0.875em; // 2
35+
font-family: var(#{$css-var-prefix}font-family); // 1
36+
// Prevent overflow of the container in all browsers (opinionated)
37+
-ms-overflow-style: scrollbar;
38+
overflow: auto;
39+
}
40+
41+
// Pico
42+
// ––––––––––––––––––––
43+
#{$parent-selector} pre {
44+
border-radius: var(#{$css-var-prefix}border-radius);
45+
background: var(#{$css-var-prefix}code-background-color);
46+
color: var(#{$css-var-prefix}code-color);
47+
font-weight: var(#{$css-var-prefix}font-weight);
48+
line-height: initial;
49+
display: block;
50+
margin-bottom: var(#{$css-var-prefix}spacing);
51+
overflow-x: auto;
52+
}
53+
}

‎scss/content/_typography.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,6 @@
1111
// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css
1212
// ––––––––––––––––––––
1313

14-
// Add the correct font weight in Chrome, Edge, and Safari
15-
#{$parent-selector} b,
16-
#{$parent-selector} strong {
17-
font-weight: bolder;
18-
}
19-
2014
// Prevent `sub` and `sup` elements from affecting the line height in all browsers
2115
#{$parent-selector} sub,
2216
#{$parent-selector} sup {

‎scss/inline/_bidirectional-isolation.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
/** SASS for the <bdi> HTML element
2-
*
3-
42
*
53
* Add your styles here
64
*/

‎scss/inline/_bidirectional-override.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
/** SASS for the <bdo> HTML element
2-
*
3-
42
*
53
* Add your styles here
64
*/

‎scss/inline/_bold.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
/** SASS for the <b> HTML element
2-
*
3-
42
*
53
* Add your styles here
64
*/
5+
@use "sass:map";
6+
@use "../settings" as *;
7+
8+
@if map.get($modules, "content/typography") {
9+
// Add the correct font weight in Chrome, Edge, and Safari
10+
#{$parent-selector} b{
11+
font-weight: bolder;
12+
}
13+
}

‎scss/inline/_button.scss‎

Lines changed: 198 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,24 @@
11
/** SASS for the <button> HTML element
22
*
3-
* Found in scss/components/_accordion.scss#74: `// Type button`
43
* Found in scss/components/_accordion.scss#75: `&[role="button"] {`
54
* Found in scss/components/_dropdown.scss#18: `> button,`
65
* Found in scss/components/_group.scss#43: `button,`
76
* Found in scss/components/_group.scss#46: `[type="button"],`
87
* Found in scss/components/_group.scss#47: `[role="button"],`
9-
* Found in scss/components/_group.scss#55: `button,`
10-
* Found in scss/components/_group.scss#58: `[type="button"],`
11-
* Found in scss/components/_group.scss#59: `[role="button"] {`
12-
* Found in scss/components/_group.scss#64: `// Group box shadow when a button is focused`
13-
* Found in scss/components/_group.scss#65: `&:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {`
14-
* Found in scss/components/_group.scss#67: `#{\$css-var-prefix}group-box-shadow-focus-with-button`
15-
* Found in scss/components/_group.scss#77: `&:has(input:not([type="submit"], [type="button"]):focus, select:focus) {`
16-
* Found in scss/components/_group.scss#82: `// Adapt box shadow for buttons`
17-
* Found in scss/components/_group.scss#83: `button,`
18-
* Found in scss/components/_group.scss#85: `[type="button"],`
19-
* Found in scss/components/_group.scss#86: `[role="button"] {`
20-
* Found in scss/components/_group.scss#87: `#{\$css-var-prefix}button-box-shadow: 0 0 0 var(#{\$css-var-prefix}border-width)`
21-
* Found in scss/components/_group.scss#89: `#{\$css-var-prefix}button-hover-box-shadow: 0 0 0 var(#{\$css-var-prefix}border-width)`
22-
* Found in scss/components/_group.scss#94: `// Remove button box shadow if we have a group box shadow`
23-
* Found in scss/components/_group.scss#95: `button,`
24-
* Found in scss/components/_group.scss#98: `[type="button"],`
25-
* Found in scss/components/_group.scss#99: `[role="button"] {`
268
* Found in scss/components/_loading.scss#36: `#{\$parent-selector} button,`
279
* Found in scss/components/_loading.scss#38: `#{\$parent-selector} [type="button"],`
2810
* Found in scss/components/_loading.scss#40: `#{\$parent-selector} [role="button"],`
2911
* Found in scss/components/_modal.scss#38: `".close, :is(a, button)[rel=prev]",`
3012
* Found in scss/components/_modal.scss#39: `":is(a, button)[rel=prev]"`
3113
* Found in scss/components/_modal.scss#74: `button,`
3214
* Found in scss/components/_modal.scss#75: `[role="button"] {`
33-
* Found in scss/components/_nav.scss#64: `// Minimal support for buttons and forms elements`
3415
* Found in scss/components/_nav.scss#65: `button,`
3516
* Found in scss/components/_nav.scss#66: `[role="button"],`
3617
* Found in scss/components/_nav.scss#67: `[type="button"],`
37-
* Found in scss/components/_nav.scss#139: `// Minimal support for links as buttons`
3818
* Found in scss/components/_nav.scss#140: `[role="button"] {`
3919
* Found in scss/components/_tooltip.scss#12: `&:not(a, button, input, [role="button"]) {`
40-
* Found in scss/content/_button.scss#4: `@if map.get($modules, "content/button") {`
41-
* Found in scss/content/_button.scss#17: `#{\$parent-selector} button {`
42-
* Found in scss/content/_button.scss#24: `// Correct the inability to style buttons in iOS and Safari`
43-
* Found in scss/content/_button.scss#25: `#{\$parent-selector} button,`
44-
* Found in scss/content/_button.scss#28: `#{\$parent-selector} [type="button"] {`
45-
* Found in scss/content/_button.scss#29: `-webkit-appearance: button;`
46-
* Found in scss/content/_button.scss#35: `#{\$parent-selector} button,`
47-
* Found in scss/content/_button.scss#38: `#{\$parent-selector} [type="button"],`
48-
* Found in scss/content/_button.scss#39: `#{\$parent-selector} [type="file"]::file-selector-button,`
49-
* Found in scss/content/_button.scss#40: `#{\$parent-selector} [role="button"] {`
50-
* Found in scss/content/_button.scss#44: `#{\$css-var-prefix}box-shadow: var(#{\$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));`
51-
* Found in scss/content/_button.scss#74: `#{\$css-var-prefix}button-hover-box-shadow,`
52-
* Found in scss/content/_button.scss#83: `var(#{\$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),`
53-
* Found in scss/content/_button.scss#90: `#{\$parent-selector} [type="button"] {`
54-
* Found in scss/content/_button.scss#97: `#{\$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,`
55-
* Found in scss/content/_button.scss#99: `#{\$parent-selector} [type="file"]::file-selector-button {`
56-
* Found in scss/content/_button.scss#114: `var(#{\$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),`
57-
* Found in scss/content/_button.scss#120: `#{\$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {`
58-
* Found in scss/content/_button.scss#134: `var(#{\$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),`
59-
* Found in scss/content/_button.scss#140: `#{\$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,`
60-
* Found in scss/content/_button.scss#155: `:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,`
61-
* Found in scss/content/_button.scss#168: `:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {`
62-
* Found in scss/content/_button.scss#178: `// Secondary button without .class`
63-
* Found in scss/content/_button.scss#180: `#{\$parent-selector} [type="file"]::file-selector-button {`
64-
* Found in scss/content/_button.scss#194: `var(#{\$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),`
65-
* Found in scss/content/_button.scss#202: `:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],`
66-
* Found in scss/content/_button.scss#205: `:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {`
6720
* Found in scss/content/_link.scss#9: `#{\$parent-selector} :where(a:not([role="button"])),`
6821
* Found in scss/content/_link.scss#65: `&[role="button"] {`
69-
* Found in scss/forms/_basics.scss#61: `// Correct the cursor style of increment and decrement buttons in Safari`
7022
* Found in scss/forms/_basics.scss#62: `#{\$parent-selector} ::-webkit-inner-spin-button,`
7123
* Found in scss/forms/_basics.scss#63: `#{\$parent-selector} ::-webkit-outer-spin-button {`
7224
* Found in scss/forms/_basics.scss#81: `#{\$parent-selector} ::-webkit-file-upload-button {`
@@ -97,3 +49,201 @@
9749
-ms-touch-action: manipulation;
9850
}
9951
}
52+
53+
@if map.get($modules, "content/button") {
54+
// 1. Change the font styles in all browsers
55+
// 2. Remove the margin on controls in Safari
56+
// 3. Show the overflow in Edge
57+
#{$parent-selector} button {
58+
margin: 0; // 2
59+
overflow: visible; // 3
60+
font-family: inherit; // 1
61+
text-transform: none; // 1
62+
}
63+
64+
// Correct the inability to style buttons in iOS and Safari
65+
#{$parent-selector} button,
66+
#{$parent-selector} [type="submit"],
67+
#{$parent-selector} [type="reset"],
68+
#{$parent-selector} [type="button"] {
69+
-webkit-appearance: button;
70+
}
71+
72+
// Pico
73+
// ––––––––––––––––––––
74+
75+
#{$parent-selector} button,
76+
#{$parent-selector} [type="submit"],
77+
#{$parent-selector} [type="reset"],
78+
#{$parent-selector} [type="button"],
79+
#{$parent-selector} [type="file"]::file-selector-button,
80+
#{$parent-selector} [role="button"] {
81+
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
82+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
83+
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
84+
#{$css-var-prefix}box-shadow: var(#{$css-var-prefix}button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
85+
padding: var(#{$css-var-prefix}form-element-spacing-vertical)
86+
var(#{$css-var-prefix}form-element-spacing-horizontal);
87+
border: var(#{$css-var-prefix}border-width) solid var(#{$css-var-prefix}border-color);
88+
border-radius: var(#{$css-var-prefix}border-radius);
89+
outline: none;
90+
background-color: var(#{$css-var-prefix}background-color);
91+
box-shadow: var(#{$css-var-prefix}box-shadow);
92+
color: var(#{$css-var-prefix}color);
93+
font-weight: var(#{$css-var-prefix}font-weight);
94+
font-size: 1rem;
95+
line-height: var(#{$css-var-prefix}line-height);
96+
text-align: center;
97+
text-decoration: none;
98+
cursor: pointer;
99+
user-select: none;
100+
101+
@if $enable-transitions {
102+
transition:
103+
background-color var(#{$css-var-prefix}transition),
104+
border-color var(#{$css-var-prefix}transition),
105+
color var(#{$css-var-prefix}transition),
106+
box-shadow var(#{$css-var-prefix}transition);
107+
}
108+
109+
&:is([aria-current]:not([aria-current="false"])),
110+
&:is(:hover, :active, :focus) {
111+
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-hover-background);
112+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover-border);
113+
#{$css-var-prefix}box-shadow: var(
114+
#{$css-var-prefix}button-hover-box-shadow,
115+
0 0 0 rgba(0, 0, 0, 0)
116+
);
117+
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
118+
}
119+
120+
&:focus,
121+
&:is([aria-current]:not([aria-current="false"])):focus {
122+
#{$css-var-prefix}box-shadow:
123+
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
124+
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}primary-focus);
125+
}
126+
}
127+
128+
#{$parent-selector} [type="submit"],
129+
#{$parent-selector} [type="reset"],
130+
#{$parent-selector} [type="button"] {
131+
margin-bottom: var(#{$css-var-prefix}spacing);
132+
}
133+
134+
// .secondary, .contrast & .outline
135+
@if $enable-classes {
136+
// Secondary
137+
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
138+
#{$parent-selector} [type="reset"],
139+
#{$parent-selector} [type="file"]::file-selector-button {
140+
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
141+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
142+
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
143+
cursor: pointer;
144+
145+
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
146+
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
147+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
148+
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
149+
}
150+
151+
&:focus,
152+
&:is([aria-current]:not([aria-current="false"])):focus {
153+
#{$css-var-prefix}box-shadow:
154+
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
155+
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
156+
}
157+
}
158+
159+
// Contrast
160+
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
161+
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
162+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
163+
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
164+
165+
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
166+
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-hover-background);
167+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover-border);
168+
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
169+
}
170+
171+
&:focus,
172+
&:is([aria-current]:not([aria-current="false"])):focus {
173+
#{$css-var-prefix}box-shadow:
174+
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
175+
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}contrast-focus);
176+
}
177+
}
178+
179+
// Outline (primary)
180+
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
181+
[type="reset"].outline {
182+
#{$css-var-prefix}background-color: transparent;
183+
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
184+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary);
185+
186+
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
187+
#{$css-var-prefix}background-color: transparent;
188+
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-hover);
189+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-hover);
190+
}
191+
}
192+
193+
// Outline (secondary)
194+
#{$parent-selector}
195+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
196+
[type="reset"].outline {
197+
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
198+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
199+
200+
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
201+
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-hover);
202+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover);
203+
}
204+
}
205+
206+
// Outline (contrast)
207+
#{$parent-selector}
208+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
209+
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
210+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
211+
212+
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
213+
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-hover);
214+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-hover);
215+
}
216+
}
217+
} @else {
218+
// Secondary button without .class
219+
#{$parent-selector} [type="reset"],
220+
#{$parent-selector} [type="file"]::file-selector-button {
221+
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
222+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
223+
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
224+
cursor: pointer;
225+
226+
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
227+
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-hover-background);
228+
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-hover-border);
229+
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
230+
}
231+
232+
&:focus {
233+
#{$css-var-prefix}box-shadow:
234+
var(#{$css-var-prefix}button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
235+
0 0 0 var(#{$css-var-prefix}outline-width) var(#{$css-var-prefix}secondary-focus);
236+
}
237+
}
238+
}
239+
240+
// Button [disabled]
241+
#{$parent-selector}
242+
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
243+
#{$parent-selector}
244+
:where(fieldset[disabled])
245+
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
246+
opacity: 0.5;
247+
pointer-events: none;
248+
}
249+
}

‎scss/inline/_citation.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
/** SASS for the <cite> HTML element
2-
*
3-
42
*
53
* Add your styles here
64
*/

0 commit comments

Comments
 (0)