Skip to content

Commit ef21004

Browse files
lucaslarrochelucaslarroche
committed
feat: optional parent selector
1 parent 9ea68c4 commit ef21004

32 files changed

+295
-277
lines changed

‎scss/_settings.scss

+5
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@ $enable-transitions: true !default;
3838
// Enable overriding with !important
3939
$enable-important: true !default;
4040

41+
// Optional parent selector
42+
// If defined, all HTML tags are wrapped with this selector
43+
// :root is not wrapped
44+
$parent-selector: "" !default;
45+
4146
// Breakpoints, viewports and root font size
4247
$breakpoints: () !default;
4348
$breakpoints: map.deep-merge(

‎scss/components/_accordion.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Accordion (<details>)
77
*/
88

9-
details {
9+
#{$parent-selector} details {
1010
display: block;
1111
margin-bottom: var(#{$css-var-prefix}spacing);
1212

@@ -102,7 +102,7 @@
102102
}
103103

104104
[dir="rtl"] {
105-
details {
105+
#{$parent-selector} details {
106106
summary {
107107
text-align: right;
108108

‎scss/components/_card.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Card (<article>)
77
*/
88

9-
article {
9+
#{$parent-selector} article {
1010
margin-bottom: var(#{$css-var-prefix}block-spacing-vertical);
1111
padding: var(#{$css-var-prefix}block-spacing-vertical)
1212
var(#{$css-var-prefix}block-spacing-horizontal);

‎scss/components/_dropdown.scss

+9-9
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
// Container
1010
// ––––––––––––––––––––
11-
details.dropdown {
11+
#{$parent-selector} details.dropdown {
1212
position: relative;
1313
border-bottom: none;
1414

@@ -38,15 +38,15 @@
3838
// Container type accordion
3939
// inside a nav
4040
// ––––––––––––––––––––
41-
nav details.dropdown {
41+
#{$parent-selector} nav details.dropdown {
4242
// Override height
4343
margin-bottom: 0;
4444
}
4545

4646
// Bouton as a select
4747
// inside container type accordion
4848
// ––––––––––––––––––––
49-
details.dropdown summary:not([role]) {
49+
#{$parent-selector} details.dropdown summary:not([role]) {
5050
height: calc(
5151
1rem *
5252
var(#{$css-var-prefix}line-height) +
@@ -122,7 +122,7 @@
122122

123123
// Dropdown inside a nav
124124
// ––––––––––––––––––––
125-
nav details.dropdown {
125+
#{$parent-selector} nav details.dropdown {
126126
display: inline;
127127
margin: calc(var(#{$css-var-prefix}nav-element-spacing-vertical) * -1) 0;
128128

@@ -146,7 +146,7 @@
146146

147147
// Submenu
148148
// ––––––––––––––––––––
149-
details.dropdown summary + ul {
149+
#{$parent-selector} details.dropdown summary + ul {
150150
display: flex;
151151
z-index: 99;
152152
position: absolute;
@@ -226,14 +226,14 @@
226226
// Button opened
227227
// inside container type accordion
228228
// ––––––––––––––––––––
229-
details.dropdown[open] summary {
229+
#{$parent-selector} details.dropdown[open] summary {
230230
margin-bottom: 0;
231231
}
232232

233233
// Menu opened
234234
// ––––––––––––––––––––
235235
// 1. Inside container type accordion
236-
details.dropdown[open] summary {
236+
#{$parent-selector} details.dropdown[open] summary {
237237
+ ul {
238238
transform: scaleY(1);
239239
opacity: 1;
@@ -249,7 +249,7 @@
249249
// Close for dropdown
250250
// inside container type accordion
251251
// ––––––––––––––––––––
252-
details.dropdown[open] summary {
252+
#{$parent-selector} details.dropdown[open] summary {
253253
&::before {
254254
display: block;
255255
z-index: 1;
@@ -264,7 +264,7 @@
264264
}
265265
// Label
266266
// ––––––––––––––––––––
267-
label > details.dropdown {
267+
#{$parent-selector} label > details.dropdown {
268268
margin-top: calc(var(#{$css-var-prefix}spacing) * 0.25);
269269
}
270270
}

‎scss/components/_group.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@
66
* Group ([role="group"], [role="search"])
77
*/
88

9-
form {
9+
#{$parent-selector} form {
1010
&[role="search"],
1111
&[role="group"] {
1212
width: 100%;
1313
}
1414
}
1515

16-
[role="search"] {
16+
#{$parent-selector} [role="search"] {
1717
> * {
1818
&:first-child {
1919
border-top-left-radius: 5rem;
@@ -27,8 +27,8 @@
2727
}
2828
}
2929

30-
[role="search"],
31-
[role="group"] {
30+
#{$parent-selector} [role="search"],
31+
#{$parent-selector} [role="group"] {
3232
display: inline-flex;
3333
position: relative;
3434
margin-bottom: var(#{$css-var-prefix}spacing);

‎scss/components/_loading.scss

+7-7
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Everything except form elements
10-
[aria-busy="true"]:not(input, select, textarea, html) {
10+
#{$parent-selector} [aria-busy="true"]:not(input, select, textarea, html) {
1111
white-space: nowrap;
1212

1313
&::before {
@@ -33,12 +33,12 @@
3333
}
3434

3535
// Buttons and links
36-
button,
37-
[type="submit"],
38-
[type="button"],
39-
[type="reset"],
40-
[role="button"],
41-
a {
36+
#{$parent-selector} button,
37+
#{$parent-selector} [type="submit"],
38+
#{$parent-selector} [type="button"],
39+
#{$parent-selector} [type="reset"],
40+
#{$parent-selector} [role="button"],
41+
#{$parent-selector} a {
4242
&[aria-busy="true"] {
4343
pointer-events: none;
4444
}

‎scss/components/_modal.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
#{$css-var-prefix}scrollbar-width: 0px;
1111
}
1212

13-
dialog {
13+
#{$parent-selector} dialog {
1414
display: flex;
1515
z-index: 999;
1616
position: fixed;

‎scss/components/_nav.scss

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@
1818
// Pico
1919
// ––––––––––––––––––––
2020

21-
nav,
22-
nav ul {
21+
#{$parent-selector} nav,
22+
#{$parent-selector} nav ul {
2323
display: flex;
2424
}
2525

26-
nav {
26+
#{$parent-selector} nav {
2727
justify-content: space-between;
2828

2929
ol,
@@ -118,7 +118,7 @@
118118
}
119119

120120
// Vertical Nav
121-
aside {
121+
#{$parent-selector} aside {
122122
nav,
123123
ol,
124124
ul,
@@ -143,7 +143,7 @@
143143

144144
// Breadcrumb RTL
145145
[dir="rtl"] {
146-
nav {
146+
#{$parent-selector} nav {
147147
&[aria-label="breadcrumb"] {
148148
& ul li {
149149
&:not(:last-child) {

‎scss/components/_progress.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313

1414
// 1. Add the correct display in Edge 18- and IE
1515
// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox
16-
progress {
16+
#{$parent-selector} progress {
1717
display: inline-block; // 1
1818
vertical-align: baseline; // 2
1919
}
2020

2121
// Pico
2222
// ––––––––––––––––––––
2323

24-
progress {
24+
#{$parent-selector} progress {
2525
// Reset the default appearance
2626
-webkit-appearance: none;
2727
-moz-appearance: none;
@@ -84,7 +84,7 @@
8484

8585
[dir="rtl"] {
8686
@media (prefers-reduced-motion: no-preference) {
87-
progress:indeterminate {
87+
#{$parent-selector} progress:indeterminate {
8888
animation-direction: reverse;
8989
}
9090
}

‎scss/components/_tooltip.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Tooltip ([data-tooltip])
77
*/
88

9-
[data-tooltip] {
9+
#{$parent-selector} [data-tooltip] {
1010
position: relative;
1111

1212
&:not(a, button, input) {

‎scss/content/_button.scss

+29-25
Original file line numberDiff line numberDiff line change
@@ -14,30 +14,30 @@
1414
// 1. Change the font styles in all browsers
1515
// 2. Remove the margin on controls in Safari
1616
// 3. Show the overflow in Edge
17-
button {
17+
#{$parent-selector} button {
1818
margin: 0; // 2
1919
overflow: visible; // 3
2020
font-family: inherit; // 1
2121
text-transform: none; // 1
2222
}
2323

2424
// Correct the inability to style buttons in iOS and Safari
25-
button,
26-
[type="submit"],
27-
[type="reset"],
28-
[type="button"] {
25+
#{$parent-selector} button,
26+
#{$parent-selector} [type="submit"],
27+
#{$parent-selector} [type="reset"],
28+
#{$parent-selector} [type="button"] {
2929
-webkit-appearance: button;
3030
}
3131

3232
// Pico
3333
// ––––––––––––––––––––
3434

35-
button,
36-
[type="submit"],
37-
[type="reset"],
38-
[type="button"],
39-
[type="file"]::file-selector-button,
40-
[role="button"] {
35+
#{$parent-selector} button,
36+
#{$parent-selector} [type="submit"],
37+
#{$parent-selector} [type="reset"],
38+
#{$parent-selector} [type="button"],
39+
#{$parent-selector} [type="file"]::file-selector-button,
40+
#{$parent-selector} [role="button"] {
4141
#{$css-var-prefix}background-color: var(#{$css-var-prefix}primary-background);
4242
#{$css-var-prefix}border-color: var(#{$css-var-prefix}primary-border);
4343
#{$css-var-prefix}color: var(#{$css-var-prefix}primary-inverse);
@@ -85,18 +85,18 @@
8585
}
8686
}
8787

88-
[type="submit"],
89-
[type="reset"],
90-
[type="button"] {
88+
#{$parent-selector} [type="submit"],
89+
#{$parent-selector} [type="reset"],
90+
#{$parent-selector} [type="button"] {
9191
margin-bottom: var(#{$css-var-prefix}spacing);
9292
}
9393

9494
// .secondary, .contrast & .outline
9595
@if $enable-classes {
9696
// Secondary
97-
:is(button, [type="submit"], [type="button"], [role="button"]).secondary,
98-
[type="reset"],
99-
[type="file"]::file-selector-button {
97+
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
98+
#{$parent-selector} [type="reset"],
99+
#{$parent-selector} [type="file"]::file-selector-button {
100100
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
101101
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
102102
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
@@ -117,7 +117,7 @@
117117
}
118118

119119
// Contrast
120-
:is(button, [type="submit"], [type="button"], [role="button"]).contrast {
120+
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
121121
#{$css-var-prefix}background-color: var(#{$css-var-prefix}contrast-background);
122122
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast-border);
123123
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast-inverse);
@@ -137,7 +137,7 @@
137137
}
138138

139139
// Outline (primary)
140-
:is(button, [type="submit"], [type="button"], [role="button"]).outline,
140+
#{$parent-selector} :is(button, [type="submit"], [type="button"], [role="button"]).outline,
141141
[type="reset"].outline {
142142
#{$css-var-prefix}background-color: transparent;
143143
#{$css-var-prefix}color: var(#{$css-var-prefix}primary);
@@ -151,7 +151,8 @@
151151
}
152152

153153
// Outline (secondary)
154-
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
154+
#{$parent-selector}
155+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
155156
[type="reset"].outline {
156157
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary);
157158
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary);
@@ -163,7 +164,8 @@
163164
}
164165

165166
// Outline (contrast)
166-
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
167+
#{$parent-selector}
168+
:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
167169
#{$css-var-prefix}color: var(#{$css-var-prefix}contrast);
168170
#{$css-var-prefix}border-color: var(#{$css-var-prefix}contrast);
169171

@@ -174,8 +176,8 @@
174176
}
175177
} @else {
176178
// Secondary button without .class
177-
[type="reset"],
178-
[type="file"]::file-selector-button {
179+
#{$parent-selector} [type="reset"],
180+
#{$parent-selector} [type="file"]::file-selector-button {
179181
#{$css-var-prefix}background-color: var(#{$css-var-prefix}secondary-background);
180182
#{$css-var-prefix}border-color: var(#{$css-var-prefix}secondary-border);
181183
#{$css-var-prefix}color: var(#{$css-var-prefix}secondary-inverse);
@@ -196,8 +198,10 @@
196198
}
197199

198200
// Button [disabled]
199-
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
200-
:where(fieldset[disabled])
201+
#{$parent-selector}
202+
:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
203+
#{$parent-selector}
204+
:where(fieldset[disabled])
201205
:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
202206
opacity: 0.5;
203207
pointer-events: none;

0 commit comments

Comments
 (0)