contain-css-svelte 0.0.7 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Card.svelte +18 -15
- package/dist/controls/Button.svelte +2 -6
- package/dist/controls/Checkbox.svelte +19 -22
- package/dist/controls/Input.svelte +14 -14
- package/dist/controls/MiniButton.svelte +16 -20
- package/dist/controls/RadioButton.svelte +16 -20
- package/dist/controls/Select.svelte +2 -2
- package/dist/dropdowns/DropdownMenu.svelte +57 -27
- package/dist/layout/Container.svelte +18 -16
- package/dist/layout/FormItem.svelte +28 -28
- package/dist/layout/GridLayout.svelte +2 -1
- package/dist/layout/GridLayout.svelte.d.ts +3 -1
- package/dist/layout/Hero.svelte +17 -15
- package/dist/layout/MenuList.svelte +32 -28
- package/dist/layout/Sidebar.svelte +2 -6
- package/dist/layout/Tile.svelte +33 -35
- package/dist/misc/Code.svelte +11 -220
- package/dist/misc/Code.svelte.d.ts +0 -1
- package/dist/misc/CodeInner.svelte +228 -0
- package/dist/misc/CodeInner.svelte.d.ts +21 -0
- package/dist/overlays/Tooltip.svelte +21 -19
- package/dist/sass/_mixins.scss +6 -7
- package/dist/typography/TextLayout.svelte +49 -44
- package/dist/typography/TextLayout.svelte.d.ts +2 -2
- package/dist/vars/themes/bootstrap.css +16 -5
- package/package.json +1 -3
package/dist/Card.svelte
CHANGED
|
@@ -60,20 +60,20 @@ let hasFooter = $$slots.footer;
|
|
|
60
60
|
margin-left: auto;
|
|
61
61
|
margin-right: auto;
|
|
62
62
|
font-family: var(--card-body-font-family, var(--container-body-font-family, var(--body-font-family, var(--font-family))));
|
|
63
|
-
font-family: var(--card-font-family, var(--container-font-family, var(--font-family,
|
|
64
|
-
text-transform: var(--card-text-transform, var(--container-text-transform, var(--text-transform,
|
|
65
|
-
text-decoration: var(--card-text-decoration, var(--container-text-decoration, var(--text-decoration,
|
|
66
|
-
font-size: var(--card-font-size, var(--container-font-size, var(--font-size,
|
|
67
|
-
font-weight: var(--card-font-weight, var(--container-font-weight, var(--font-weight,
|
|
68
|
-
line-height: var(--card-line-height, var(--container-line-height, var(--line-height,
|
|
69
|
-
letter-spacing: var(--card-letter-spacing, var(--container-letter-spacing, var(--letter-spacing,
|
|
70
|
-
margin-top: var(--card-margin, var(--container-margin, var(--margin,
|
|
71
|
-
margin-top: var(--card-margin-top, var(--container-margin-top, var(--margin-top,
|
|
72
|
-
margin-bottom: var(--card-margin, var(--container-margin, var(--margin,
|
|
73
|
-
margin-bottom: var(--card-margin-bottom, var(--container-margin-bottom, var(--margin-bottom,
|
|
74
|
-
text-indent: var(--card-indent, var(--container-indent, var(--indent,
|
|
75
|
-
font-variant: var(--card-font-variant, var(--container-font-variant, var(--font-variant,
|
|
76
|
-
text-align: var(--card-text-align, var(--container-text-align, var(--text-align,
|
|
63
|
+
font-family: var(--card-font-family, var(--container-font-family, var(--font-family, unset)));
|
|
64
|
+
text-transform: var(--card-text-transform, var(--container-text-transform, var(--text-transform, unset)));
|
|
65
|
+
text-decoration: var(--card-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
|
|
66
|
+
font-size: var(--card-font-size, var(--container-font-size, var(--font-size, unset)));
|
|
67
|
+
font-weight: var(--card-font-weight, var(--container-font-weight, var(--font-weight, unset)));
|
|
68
|
+
line-height: var(--card-line-height, var(--container-line-height, var(--line-height, unset)));
|
|
69
|
+
letter-spacing: var(--card-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
|
|
70
|
+
margin-top: var(--card-margin, var(--container-margin, var(--margin, unset)));
|
|
71
|
+
margin-top: var(--card-margin-top, var(--container-margin-top, var(--margin-top, unset)));
|
|
72
|
+
margin-bottom: var(--card-margin, var(--container-margin, var(--margin, unset)));
|
|
73
|
+
margin-bottom: var(--card-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
|
|
74
|
+
text-indent: var(--card-indent, var(--container-indent, var(--indent, unset)));
|
|
75
|
+
font-variant: var(--card-font-variant, var(--container-font-variant, var(--font-variant, unset)));
|
|
76
|
+
text-align: var(--card-text-align, var(--container-text-align, var(--text-align, unset)));
|
|
77
77
|
}
|
|
78
78
|
.card section :global(p), .card section :global(blockquote), .card section :global(dl), .card section :global(ul), .card section :global(ol) {
|
|
79
79
|
max-width: var(--card-line-width, var(--container-line-width, var(--line-width, 40em)));
|
|
@@ -81,7 +81,7 @@ let hasFooter = $$slots.footer;
|
|
|
81
81
|
line-height: var(--card-line-height, var(--container-line-height, var(--line-height, 1.5)));
|
|
82
82
|
margin-left: auto;
|
|
83
83
|
margin-right: auto;
|
|
84
|
-
font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight,
|
|
84
|
+
font-weight: var(--card-body-font-weight, var(--container-body-font-weight, var(--body-font-weight, unset)));
|
|
85
85
|
}
|
|
86
86
|
.card section :global(h1),
|
|
87
87
|
.card section :global(h2),
|
|
@@ -96,6 +96,8 @@ let hasFooter = $$slots.footer;
|
|
|
96
96
|
max-width: var(--card-line-width, var(--container-line-width, var(--line-width, unset)));
|
|
97
97
|
margin-left: auto;
|
|
98
98
|
margin-right: auto;
|
|
99
|
+
margin-bottom: var(--card-heading-margin-bottom, var(--container-heading-margin-bottom, var(--heading-margin-bottom, 0)));
|
|
100
|
+
margin-top: var(--card-heading-margin-top, var(--container-heading-margin-top, var(--heading-margin-top, 1.5em)));
|
|
99
101
|
}
|
|
100
102
|
.card section :global(p) {
|
|
101
103
|
font-family: var(--card-paragraph-font-family, var(--container-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
|
|
@@ -183,6 +185,7 @@ let hasFooter = $$slots.footer;
|
|
|
183
185
|
.card section {
|
|
184
186
|
line-height: var(--line-height);
|
|
185
187
|
max-width: var(--line-width);
|
|
188
|
+
width: calc(100% - var(--card-padding, var(--padding, container)));
|
|
186
189
|
}
|
|
187
190
|
|
|
188
191
|
.card.fixedHeight {
|
|
@@ -77,14 +77,10 @@ button {
|
|
|
77
77
|
button:hover {
|
|
78
78
|
filter: var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
|
|
79
79
|
transform: var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
|
|
80
|
-
background-color: var(--button-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit)));
|
|
81
|
-
color: var(--button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
|
|
82
80
|
}
|
|
83
81
|
button:active {
|
|
84
|
-
filter: var(--button-
|
|
85
|
-
transform: var(--button-
|
|
86
|
-
background-color: var(--active-bg, button, clickable, inherit);
|
|
87
|
-
color: var(--active-fg, button, clickable, inherit);
|
|
82
|
+
filter: var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
|
|
83
|
+
transform: var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
|
|
88
84
|
}
|
|
89
85
|
|
|
90
86
|
button.primary {
|
|
@@ -66,20 +66,20 @@ $: {
|
|
|
66
66
|
|
|
67
67
|
.offscreen,
|
|
68
68
|
label {
|
|
69
|
-
font-family: var(--checkbox-font-family, var(--ui-font-family, var(--font-family,
|
|
70
|
-
text-transform: var(--checkbox-text-transform, var(--ui-text-transform, var(--text-transform,
|
|
71
|
-
text-decoration: var(--checkbox-text-decoration, var(--ui-text-decoration, var(--text-decoration,
|
|
72
|
-
font-size: var(--checkbox-font-size, var(--ui-font-size, var(--font-size,
|
|
73
|
-
font-weight: var(--checkbox-font-weight, var(--ui-font-weight, var(--font-weight,
|
|
74
|
-
line-height: var(--checkbox-line-height, var(--ui-line-height, var(--line-height,
|
|
75
|
-
letter-spacing: var(--checkbox-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing,
|
|
76
|
-
margin-top: var(--checkbox-margin, var(--ui-margin, var(--margin,
|
|
77
|
-
margin-top: var(--checkbox-margin-top, var(--ui-margin-top, var(--margin-top,
|
|
78
|
-
margin-bottom: var(--checkbox-margin, var(--ui-margin, var(--margin,
|
|
79
|
-
margin-bottom: var(--checkbox-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom,
|
|
80
|
-
text-indent: var(--checkbox-indent, var(--ui-indent, var(--indent,
|
|
81
|
-
font-variant: var(--checkbox-font-variant, var(--ui-font-variant, var(--font-variant,
|
|
82
|
-
text-align: var(--checkbox-text-align, var(--ui-text-align, var(--text-align,
|
|
69
|
+
font-family: var(--checkbox-font-family, var(--ui-font-family, var(--font-family, unset)));
|
|
70
|
+
text-transform: var(--checkbox-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
|
|
71
|
+
text-decoration: var(--checkbox-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
|
|
72
|
+
font-size: var(--checkbox-font-size, var(--ui-font-size, var(--font-size, unset)));
|
|
73
|
+
font-weight: var(--checkbox-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
|
|
74
|
+
line-height: var(--checkbox-line-height, var(--ui-line-height, var(--line-height, unset)));
|
|
75
|
+
letter-spacing: var(--checkbox-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
|
|
76
|
+
margin-top: var(--checkbox-margin, var(--ui-margin, var(--margin, unset)));
|
|
77
|
+
margin-top: var(--checkbox-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
|
|
78
|
+
margin-bottom: var(--checkbox-margin, var(--ui-margin, var(--margin, unset)));
|
|
79
|
+
margin-bottom: var(--checkbox-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
|
|
80
|
+
text-indent: var(--checkbox-indent, var(--ui-indent, var(--indent, unset)));
|
|
81
|
+
font-variant: var(--checkbox-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
|
|
82
|
+
text-align: var(--checkbox-text-align, var(--ui-text-align, var(--text-align, unset)));
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
label {
|
|
@@ -104,14 +104,10 @@ label {
|
|
|
104
104
|
label:hover {
|
|
105
105
|
filter: var(--checkbox-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
|
|
106
106
|
transform: var(--checkbox-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
|
|
107
|
-
background-color: var(--checkbox-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit)));
|
|
108
|
-
color: var(--checkbox-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
|
|
109
107
|
}
|
|
110
108
|
label:active {
|
|
111
|
-
filter: var(--checkbox-
|
|
112
|
-
transform: var(--checkbox-
|
|
113
|
-
background-color: var(--active-bg, checkbox, clickable, inherit);
|
|
114
|
-
color: var(--active-fg, checkbox, clickable, inherit);
|
|
109
|
+
filter: var(--checkbox-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
|
|
110
|
+
transform: var(--checkbox-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
|
|
115
111
|
}
|
|
116
112
|
|
|
117
113
|
label span {
|
|
@@ -139,6 +135,7 @@ label::before {
|
|
|
139
135
|
--link-fg: var(--checkbox-link-fg, var(--toggle-link-fg, var(--inactive-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)))));
|
|
140
136
|
border: var(--checkbox-border, var(--border, 1px solid var(--border-color)));
|
|
141
137
|
box-sizing: border-box;
|
|
138
|
+
border-radius: var(--checkbox-radius, 0);
|
|
142
139
|
}
|
|
143
140
|
|
|
144
141
|
label:has(input:checked)::before {
|
|
@@ -152,10 +149,10 @@ label:has(input:checked)::before {
|
|
|
152
149
|
|
|
153
150
|
label:has(input:checked)::after {
|
|
154
151
|
content: var(--checkbox-check, "✓");
|
|
155
|
-
font-size: var(--checkbox-
|
|
152
|
+
font-size: var(--checkbox-check-size, var(--size, 0.875em));
|
|
156
153
|
color: var(--checkbox-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, checkbox))));
|
|
157
154
|
position: absolute;
|
|
158
|
-
left: 0;
|
|
155
|
+
left: var(--checkbox-left-offset, 0.125em);
|
|
159
156
|
animation: checkbox-check var(--checkbox-transition) ease-in-out;
|
|
160
157
|
}
|
|
161
158
|
|
|
@@ -12,20 +12,20 @@ export let placeholder = "";
|
|
|
12
12
|
container queries don't get their styles overridden by large media queries.
|
|
13
13
|
*/
|
|
14
14
|
input {
|
|
15
|
-
font-family: var(--input-font-family, var(--ui-font-family, var(--font-family,
|
|
16
|
-
text-transform: var(--input-text-transform, var(--ui-text-transform, var(--text-transform,
|
|
17
|
-
text-decoration: var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration,
|
|
18
|
-
font-size: var(--input-font-size, var(--ui-font-size, var(--font-size,
|
|
19
|
-
font-weight: var(--input-font-weight, var(--ui-font-weight, var(--font-weight,
|
|
20
|
-
line-height: var(--input-line-height, var(--ui-line-height, var(--line-height,
|
|
21
|
-
letter-spacing: var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing,
|
|
22
|
-
margin-top: var(--input-margin, var(--ui-margin, var(--margin,
|
|
23
|
-
margin-top: var(--input-margin-top, var(--ui-margin-top, var(--margin-top,
|
|
24
|
-
margin-bottom: var(--input-margin, var(--ui-margin, var(--margin,
|
|
25
|
-
margin-bottom: var(--input-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom,
|
|
26
|
-
text-indent: var(--input-indent, var(--ui-indent, var(--indent,
|
|
27
|
-
font-variant: var(--input-font-variant, var(--ui-font-variant, var(--font-variant,
|
|
28
|
-
text-align: var(--input-text-align, var(--ui-text-align, var(--text-align,
|
|
15
|
+
font-family: var(--input-font-family, var(--ui-font-family, var(--font-family, unset)));
|
|
16
|
+
text-transform: var(--input-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
|
|
17
|
+
text-decoration: var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
|
|
18
|
+
font-size: var(--input-font-size, var(--ui-font-size, var(--font-size, unset)));
|
|
19
|
+
font-weight: var(--input-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
|
|
20
|
+
line-height: var(--input-line-height, var(--ui-line-height, var(--line-height, unset)));
|
|
21
|
+
letter-spacing: var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
|
|
22
|
+
margin-top: var(--input-margin, var(--ui-margin, var(--margin, unset)));
|
|
23
|
+
margin-top: var(--input-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
|
|
24
|
+
margin-bottom: var(--input-margin, var(--ui-margin, var(--margin, unset)));
|
|
25
|
+
margin-bottom: var(--input-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
|
|
26
|
+
text-indent: var(--input-indent, var(--ui-indent, var(--indent, unset)));
|
|
27
|
+
font-variant: var(--input-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
|
|
28
|
+
text-align: var(--input-text-align, var(--ui-text-align, var(--text-align, unset)));
|
|
29
29
|
box-sizing: border-box;
|
|
30
30
|
padding: var(--input-padding, var(--ui-padding, var(--padding, 4px)));
|
|
31
31
|
border: var(--input-border, var(--ui-border, var(--border, inherit)));
|
|
@@ -42,20 +42,20 @@ button.primary {
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
button {
|
|
45
|
-
font-family: var(--button-font-family, var(--control-font-family, var(--font-family,
|
|
46
|
-
text-transform: var(--button-text-transform, var(--control-text-transform, var(--text-transform,
|
|
47
|
-
text-decoration: var(--button-text-decoration, var(--control-text-decoration, var(--text-decoration,
|
|
48
|
-
font-size: var(--button-font-size, var(--control-font-size, var(--font-size,
|
|
49
|
-
font-weight: var(--button-font-weight, var(--control-font-weight, var(--font-weight,
|
|
50
|
-
line-height: var(--button-line-height, var(--control-line-height, var(--line-height,
|
|
51
|
-
letter-spacing: var(--button-letter-spacing, var(--control-letter-spacing, var(--letter-spacing,
|
|
52
|
-
margin-top: var(--button-margin, var(--control-margin, var(--margin,
|
|
53
|
-
margin-top: var(--button-margin-top, var(--control-margin-top, var(--margin-top,
|
|
54
|
-
margin-bottom: var(--button-margin, var(--control-margin, var(--margin,
|
|
55
|
-
margin-bottom: var(--button-margin-bottom, var(--control-margin-bottom, var(--margin-bottom,
|
|
56
|
-
text-indent: var(--button-indent, var(--control-indent, var(--indent,
|
|
57
|
-
font-variant: var(--button-font-variant, var(--control-font-variant, var(--font-variant,
|
|
58
|
-
text-align: var(--button-text-align, var(--control-text-align, var(--text-align,
|
|
45
|
+
font-family: var(--button-font-family, var(--control-font-family, var(--font-family, unset)));
|
|
46
|
+
text-transform: var(--button-text-transform, var(--control-text-transform, var(--text-transform, unset)));
|
|
47
|
+
text-decoration: var(--button-text-decoration, var(--control-text-decoration, var(--text-decoration, unset)));
|
|
48
|
+
font-size: var(--button-font-size, var(--control-font-size, var(--font-size, unset)));
|
|
49
|
+
font-weight: var(--button-font-weight, var(--control-font-weight, var(--font-weight, unset)));
|
|
50
|
+
line-height: var(--button-line-height, var(--control-line-height, var(--line-height, unset)));
|
|
51
|
+
letter-spacing: var(--button-letter-spacing, var(--control-letter-spacing, var(--letter-spacing, unset)));
|
|
52
|
+
margin-top: var(--button-margin, var(--control-margin, var(--margin, unset)));
|
|
53
|
+
margin-top: var(--button-margin-top, var(--control-margin-top, var(--margin-top, unset)));
|
|
54
|
+
margin-bottom: var(--button-margin, var(--control-margin, var(--margin, unset)));
|
|
55
|
+
margin-bottom: var(--button-margin-bottom, var(--control-margin-bottom, var(--margin-bottom, unset)));
|
|
56
|
+
text-indent: var(--button-indent, var(--control-indent, var(--indent, unset)));
|
|
57
|
+
font-variant: var(--button-font-variant, var(--control-font-variant, var(--font-variant, unset)));
|
|
58
|
+
text-align: var(--button-text-align, var(--control-text-align, var(--text-align, unset)));
|
|
59
59
|
background: var(--mini-button-bg, var(--button-bg, var(--control-bg, var(--secondary-bg, var(--secondary-bg, inherit)))));
|
|
60
60
|
color: var(--mini-button-fg, var(--button-fg, var(--control-fg, var(--secondary-fg, var(--secondary-fg, inherit)))));
|
|
61
61
|
--link-bg: var(--mini-button-link-bg, var(--button-link-bg, var(--control-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)))));
|
|
@@ -75,14 +75,10 @@ button {
|
|
|
75
75
|
button:hover {
|
|
76
76
|
filter: var(--mini-button-hover-filter, var(--button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4)))));
|
|
77
77
|
transform: var(--mini-button-hover-transform, var(--button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none))));
|
|
78
|
-
background-color: var(--mini-button-hover-bg, var(--button-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit))));
|
|
79
|
-
color: var(--mini-button-hover-fg, var(--button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit))));
|
|
80
78
|
}
|
|
81
79
|
button:active {
|
|
82
|
-
filter: var(--mini-button-
|
|
83
|
-
transform: var(--mini-button-
|
|
84
|
-
background-color: var(--active-bg, mini-button, button, clickable, inherit);
|
|
85
|
-
color: var(--active-fg, mini-button, button, clickable, inherit);
|
|
80
|
+
filter: var(--mini-button-active-filter, var(--button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9)))));
|
|
81
|
+
transform: var(--mini-button-active-transform, var(--button-active-transform, var(--clickable-active-transform, var(--active-transform, none))));
|
|
86
82
|
}
|
|
87
83
|
|
|
88
84
|
button.primary {
|
|
@@ -67,20 +67,20 @@ $: {
|
|
|
67
67
|
/* ... (rest of your styles adapted for radio button) ... */
|
|
68
68
|
.offscreen,
|
|
69
69
|
label {
|
|
70
|
-
font-family: var(--radio-button-font-family, var(--ui-font-family, var(--font-family,
|
|
71
|
-
text-transform: var(--radio-button-text-transform, var(--ui-text-transform, var(--text-transform,
|
|
72
|
-
text-decoration: var(--radio-button-text-decoration, var(--ui-text-decoration, var(--text-decoration,
|
|
73
|
-
font-size: var(--radio-button-font-size, var(--ui-font-size, var(--font-size,
|
|
74
|
-
font-weight: var(--radio-button-font-weight, var(--ui-font-weight, var(--font-weight,
|
|
75
|
-
line-height: var(--radio-button-line-height, var(--ui-line-height, var(--line-height,
|
|
76
|
-
letter-spacing: var(--radio-button-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing,
|
|
77
|
-
margin-top: var(--radio-button-margin, var(--ui-margin, var(--margin,
|
|
78
|
-
margin-top: var(--radio-button-margin-top, var(--ui-margin-top, var(--margin-top,
|
|
79
|
-
margin-bottom: var(--radio-button-margin, var(--ui-margin, var(--margin,
|
|
80
|
-
margin-bottom: var(--radio-button-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom,
|
|
81
|
-
text-indent: var(--radio-button-indent, var(--ui-indent, var(--indent,
|
|
82
|
-
font-variant: var(--radio-button-font-variant, var(--ui-font-variant, var(--font-variant,
|
|
83
|
-
text-align: var(--radio-button-text-align, var(--ui-text-align, var(--text-align,
|
|
70
|
+
font-family: var(--radio-button-font-family, var(--ui-font-family, var(--font-family, unset)));
|
|
71
|
+
text-transform: var(--radio-button-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
|
|
72
|
+
text-decoration: var(--radio-button-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
|
|
73
|
+
font-size: var(--radio-button-font-size, var(--ui-font-size, var(--font-size, unset)));
|
|
74
|
+
font-weight: var(--radio-button-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
|
|
75
|
+
line-height: var(--radio-button-line-height, var(--ui-line-height, var(--line-height, unset)));
|
|
76
|
+
letter-spacing: var(--radio-button-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
|
|
77
|
+
margin-top: var(--radio-button-margin, var(--ui-margin, var(--margin, unset)));
|
|
78
|
+
margin-top: var(--radio-button-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
|
|
79
|
+
margin-bottom: var(--radio-button-margin, var(--ui-margin, var(--margin, unset)));
|
|
80
|
+
margin-bottom: var(--radio-button-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
|
|
81
|
+
text-indent: var(--radio-button-indent, var(--ui-indent, var(--indent, unset)));
|
|
82
|
+
font-variant: var(--radio-button-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
|
|
83
|
+
text-align: var(--radio-button-text-align, var(--ui-text-align, var(--text-align, unset)));
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
.offscreen {
|
|
@@ -101,14 +101,10 @@ label {
|
|
|
101
101
|
label:hover {
|
|
102
102
|
filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
|
|
103
103
|
transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
|
|
104
|
-
background-color: var(--radio-button-hover-bg, var(--clickable-hover-bg, var(--hover-bg, inherit)));
|
|
105
|
-
color: var(--radio-button-hover-fg, var(--clickable-hover-fg, var(--hover-fg, inherit)));
|
|
106
104
|
}
|
|
107
105
|
label:active {
|
|
108
|
-
filter: var(--radio-button-
|
|
109
|
-
transform: var(--radio-button-
|
|
110
|
-
background-color: var(--active-bg, radio-button, clickable, inherit);
|
|
111
|
-
color: var(--active-fg, radio-button, clickable, inherit);
|
|
106
|
+
filter: var(--radio-button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
|
|
107
|
+
transform: var(--radio-button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
|
|
112
108
|
}
|
|
113
109
|
|
|
114
110
|
label span {
|
|
@@ -59,7 +59,7 @@ async function updateOption(value) {
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
$: updateOption(value);
|
|
62
|
-
let targetWidth
|
|
62
|
+
let targetWidth;
|
|
63
63
|
let optionButtons = [];
|
|
64
64
|
</script>
|
|
65
65
|
|
|
@@ -157,7 +157,7 @@ select,
|
|
|
157
157
|
width: var(--select-dropdown-arrow-width, 1em);
|
|
158
158
|
place-content: center;
|
|
159
159
|
position: absolute;
|
|
160
|
-
right: var(--select-arrow-right-offset, calc(-
|
|
160
|
+
right: var(--select-arrow-right-offset, calc(-0.5 * var(--padding)));
|
|
161
161
|
top: 50%;
|
|
162
162
|
}
|
|
163
163
|
|
|
@@ -173,14 +173,10 @@ button {
|
|
|
173
173
|
button:hover {
|
|
174
174
|
filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.4)))));
|
|
175
175
|
transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
|
|
176
|
-
background-color: var(--menu-hover-bg, var(--button-hover-bg, var(--control-hover-bg, var(--hover-bg, inherit))));
|
|
177
|
-
color: var(--menu-hover-fg, var(--button-hover-fg, var(--control-hover-fg, var(--hover-fg, inherit))));
|
|
178
176
|
}
|
|
179
177
|
button:active {
|
|
180
|
-
filter: var(--menu-
|
|
181
|
-
transform: var(--menu-
|
|
182
|
-
background-color: var(--active-bg, menu, button, control, inherit);
|
|
183
|
-
color: var(--active-fg, menu, button, control, inherit);
|
|
178
|
+
filter: var(--menu-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
|
|
179
|
+
transform: var(--menu-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
|
|
184
180
|
}
|
|
185
181
|
|
|
186
182
|
.menu {
|
|
@@ -196,34 +192,47 @@ button:active {
|
|
|
196
192
|
border-bottom: var(--menu-border-bottom, var(--border-bottom, var(--menu-border, var(--border, none))));
|
|
197
193
|
border-left: var(--menu-border-left, var(--border-left, var(--menu-border, var(--border, none))));
|
|
198
194
|
border-radius: var(--menu-border-radius, var(--border-radius, none));
|
|
199
|
-
font-family: var(--menu-font-family, var(--container-font-family, var(--font-family,
|
|
200
|
-
text-transform: var(--menu-text-transform, var(--container-text-transform, var(--text-transform,
|
|
201
|
-
text-decoration: var(--menu-text-decoration, var(--container-text-decoration, var(--text-decoration,
|
|
202
|
-
font-size: var(--menu-font-size, var(--container-font-size, var(--font-size,
|
|
203
|
-
font-weight: var(--menu-font-weight, var(--container-font-weight, var(--font-weight,
|
|
204
|
-
line-height: var(--menu-line-height, var(--container-line-height, var(--line-height,
|
|
205
|
-
letter-spacing: var(--menu-letter-spacing, var(--container-letter-spacing, var(--letter-spacing,
|
|
206
|
-
margin-top: var(--menu-margin, var(--container-margin, var(--margin,
|
|
207
|
-
margin-top: var(--menu-margin-top, var(--container-margin-top, var(--margin-top,
|
|
208
|
-
margin-bottom: var(--menu-margin, var(--container-margin, var(--margin,
|
|
209
|
-
margin-bottom: var(--menu-margin-bottom, var(--container-margin-bottom, var(--margin-bottom,
|
|
210
|
-
text-indent: var(--menu-indent, var(--container-indent, var(--indent,
|
|
211
|
-
font-variant: var(--menu-font-variant, var(--container-font-variant, var(--font-variant,
|
|
212
|
-
text-align: var(--menu-text-align, var(--container-text-align, var(--text-align,
|
|
195
|
+
font-family: var(--menu-font-family, var(--container-font-family, var(--font-family, unset)));
|
|
196
|
+
text-transform: var(--menu-text-transform, var(--container-text-transform, var(--text-transform, unset)));
|
|
197
|
+
text-decoration: var(--menu-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
|
|
198
|
+
font-size: var(--menu-font-size, var(--container-font-size, var(--font-size, unset)));
|
|
199
|
+
font-weight: var(--menu-font-weight, var(--container-font-weight, var(--font-weight, unset)));
|
|
200
|
+
line-height: var(--menu-line-height, var(--container-line-height, var(--line-height, unset)));
|
|
201
|
+
letter-spacing: var(--menu-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
|
|
202
|
+
margin-top: var(--menu-margin, var(--container-margin, var(--margin, unset)));
|
|
203
|
+
margin-top: var(--menu-margin-top, var(--container-margin-top, var(--margin-top, unset)));
|
|
204
|
+
margin-bottom: var(--menu-margin, var(--container-margin, var(--margin, unset)));
|
|
205
|
+
margin-bottom: var(--menu-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
|
|
206
|
+
text-indent: var(--menu-indent, var(--container-indent, var(--indent, unset)));
|
|
207
|
+
font-variant: var(--menu-font-variant, var(--container-font-variant, var(--font-variant, unset)));
|
|
208
|
+
text-align: var(--menu-text-align, var(--container-text-align, var(--text-align, unset)));
|
|
213
209
|
cursor: var(--menu-cursor, var(--button-cursor, var(--control-cursor, var(--cursor, pointer))));
|
|
214
210
|
transition: filter, transform var(--menu-transition, var(--button-transition, var(--control-transition, var(--transition, 300ms))));
|
|
215
211
|
}
|
|
216
212
|
.menu:hover {
|
|
217
213
|
filter: var(--menu-hover-filter, var(--button-hover-filter, var(--control-hover-filter, var(--hover-filter, brightness(1.4)))));
|
|
218
214
|
transform: var(--menu-hover-transform, var(--button-hover-transform, var(--control-hover-transform, var(--hover-transform, none))));
|
|
219
|
-
background-color: var(--menu-hover-bg, var(--button-hover-bg, var(--control-hover-bg, var(--hover-bg, inherit))));
|
|
220
|
-
color: var(--menu-hover-fg, var(--button-hover-fg, var(--control-hover-fg, var(--hover-fg, inherit))));
|
|
221
215
|
}
|
|
222
216
|
.menu:active {
|
|
223
|
-
filter: var(--menu-
|
|
224
|
-
transform: var(--menu-
|
|
225
|
-
|
|
226
|
-
|
|
217
|
+
filter: var(--menu-active-filter, var(--button-active-filter, var(--control-active-filter, var(--active-filter, brightness(0.9)))));
|
|
218
|
+
transform: var(--menu-active-transform, var(--button-active-transform, var(--control-active-transform, var(--active-transform, none))));
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.dropdown-menu {
|
|
222
|
+
font-family: var(--menu-font-family, var(--container-font-family, var(--font-family, unset)));
|
|
223
|
+
text-transform: var(--menu-text-transform, var(--container-text-transform, var(--text-transform, unset)));
|
|
224
|
+
text-decoration: var(--menu-text-decoration, var(--container-text-decoration, var(--text-decoration, unset)));
|
|
225
|
+
font-size: var(--menu-font-size, var(--container-font-size, var(--font-size, unset)));
|
|
226
|
+
font-weight: var(--menu-font-weight, var(--container-font-weight, var(--font-weight, unset)));
|
|
227
|
+
line-height: var(--menu-line-height, var(--container-line-height, var(--line-height, unset)));
|
|
228
|
+
letter-spacing: var(--menu-letter-spacing, var(--container-letter-spacing, var(--letter-spacing, unset)));
|
|
229
|
+
margin-top: var(--menu-margin, var(--container-margin, var(--margin, unset)));
|
|
230
|
+
margin-top: var(--menu-margin-top, var(--container-margin-top, var(--margin-top, unset)));
|
|
231
|
+
margin-bottom: var(--menu-margin, var(--container-margin, var(--margin, unset)));
|
|
232
|
+
margin-bottom: var(--menu-margin-bottom, var(--container-margin-bottom, var(--margin-bottom, unset)));
|
|
233
|
+
text-indent: var(--menu-indent, var(--container-indent, var(--indent, unset)));
|
|
234
|
+
font-variant: var(--menu-font-variant, var(--container-font-variant, var(--font-variant, unset)));
|
|
235
|
+
text-align: var(--menu-text-align, var(--container-text-align, var(--text-align, unset)));
|
|
227
236
|
}
|
|
228
237
|
|
|
229
238
|
.dropdown-container {
|
|
@@ -259,8 +268,28 @@ button:active {
|
|
|
259
268
|
|
|
260
269
|
.dropdown-content {
|
|
261
270
|
width: var(--dropdown-menu-width, 12em);
|
|
262
|
-
padding: 0;
|
|
263
271
|
box-shadow: var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--dropdown-menu-shadow-distance, var(--dropdown-shadow-distance, var(--shadow-distance, var(--space-md)))) var(--dropdown-menu-shadow-blur, var(--dropdown-shadow-blur, var(--shadow-blur, var(--space)))) var(--dropdown-menu-shadow-color, var(--dropdown-shadow-color, var(--shadow-color, rgba(127, 127, 127, 0.4))));
|
|
272
|
+
box-sizing: border-box;
|
|
273
|
+
border: var(--dropdown-menu-border, var(--menu-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg))))));
|
|
274
|
+
/* border-top: var-with-fallbacks(--border-top,
|
|
275
|
+
append($prefixes,
|
|
276
|
+
var-with-fallbacks(--border,$prefixes...)
|
|
277
|
+
)...) */
|
|
278
|
+
/* border-right: var-with-fallbacks(--border-right,
|
|
279
|
+
append($prefixes,
|
|
280
|
+
var-with-fallbacks(--border,$prefixes...)
|
|
281
|
+
)...) */
|
|
282
|
+
/* border-bottom: var-with-fallbacks(--border-bottom,
|
|
283
|
+
append($prefixes,
|
|
284
|
+
var-with-fallbacks(--border,$prefixes...)
|
|
285
|
+
)...) */
|
|
286
|
+
/* border-left: var-with-fallbacks(--border-left,
|
|
287
|
+
append($prefixes,
|
|
288
|
+
var-with-fallbacks(--border,$prefixes...)
|
|
289
|
+
)...) */
|
|
290
|
+
padding: var(--dropdown-menu-padding, var(--menu-padding, var(--container-padding, var(--padding, 4px))));
|
|
291
|
+
border-radius: var(--dropdown-menu-square-radius, var(--menu-square-radius, var(--container-square-radius, var(--square-radius, 0))));
|
|
292
|
+
padding: 0;
|
|
264
293
|
}
|
|
265
294
|
|
|
266
295
|
nav {
|
|
@@ -279,4 +308,5 @@ nav {
|
|
|
279
308
|
visibility: visible;
|
|
280
309
|
opacity: 1;
|
|
281
310
|
padding: 0;
|
|
311
|
+
border: none;
|
|
282
312
|
}</style>
|
|
@@ -51,20 +51,20 @@ section {
|
|
|
51
51
|
margin-left: auto;
|
|
52
52
|
margin-right: auto;
|
|
53
53
|
font-family: var(--container-body-font-family, var(--block-body-font-family, var(--body-font-family, var(--font-family))));
|
|
54
|
-
font-family: var(--container-font-family, var(--block-font-family, var(--font-family,
|
|
55
|
-
text-transform: var(--container-text-transform, var(--block-text-transform, var(--text-transform,
|
|
56
|
-
text-decoration: var(--container-text-decoration, var(--block-text-decoration, var(--text-decoration,
|
|
57
|
-
font-size: var(--container-font-size, var(--block-font-size, var(--font-size,
|
|
58
|
-
font-weight: var(--container-font-weight, var(--block-font-weight, var(--font-weight,
|
|
59
|
-
line-height: var(--container-line-height, var(--block-line-height, var(--line-height,
|
|
60
|
-
letter-spacing: var(--container-letter-spacing, var(--block-letter-spacing, var(--letter-spacing,
|
|
61
|
-
margin-top: var(--container-margin, var(--block-margin, var(--margin,
|
|
62
|
-
margin-top: var(--container-margin-top, var(--block-margin-top, var(--margin-top,
|
|
63
|
-
margin-bottom: var(--container-margin, var(--block-margin, var(--margin,
|
|
64
|
-
margin-bottom: var(--container-margin-bottom, var(--block-margin-bottom, var(--margin-bottom,
|
|
65
|
-
text-indent: var(--container-indent, var(--block-indent, var(--indent,
|
|
66
|
-
font-variant: var(--container-font-variant, var(--block-font-variant, var(--font-variant,
|
|
67
|
-
text-align: var(--container-text-align, var(--block-text-align, var(--text-align,
|
|
54
|
+
font-family: var(--container-font-family, var(--block-font-family, var(--font-family, unset)));
|
|
55
|
+
text-transform: var(--container-text-transform, var(--block-text-transform, var(--text-transform, unset)));
|
|
56
|
+
text-decoration: var(--container-text-decoration, var(--block-text-decoration, var(--text-decoration, unset)));
|
|
57
|
+
font-size: var(--container-font-size, var(--block-font-size, var(--font-size, unset)));
|
|
58
|
+
font-weight: var(--container-font-weight, var(--block-font-weight, var(--font-weight, unset)));
|
|
59
|
+
line-height: var(--container-line-height, var(--block-line-height, var(--line-height, unset)));
|
|
60
|
+
letter-spacing: var(--container-letter-spacing, var(--block-letter-spacing, var(--letter-spacing, unset)));
|
|
61
|
+
margin-top: var(--container-margin, var(--block-margin, var(--margin, unset)));
|
|
62
|
+
margin-top: var(--container-margin-top, var(--block-margin-top, var(--margin-top, unset)));
|
|
63
|
+
margin-bottom: var(--container-margin, var(--block-margin, var(--margin, unset)));
|
|
64
|
+
margin-bottom: var(--container-margin-bottom, var(--block-margin-bottom, var(--margin-bottom, unset)));
|
|
65
|
+
text-indent: var(--container-indent, var(--block-indent, var(--indent, unset)));
|
|
66
|
+
font-variant: var(--container-font-variant, var(--block-font-variant, var(--font-variant, unset)));
|
|
67
|
+
text-align: var(--container-text-align, var(--block-text-align, var(--text-align, unset)));
|
|
68
68
|
/* Override typography max-width */
|
|
69
69
|
max-width: var(--container-max-width, var(--block-max-width, var(--max-width, 900px)));
|
|
70
70
|
margin-top: var(--container-margin, var(--block-margin, var(--margin, var(--gap))));
|
|
@@ -72,7 +72,7 @@ section {
|
|
|
72
72
|
/* Why is this suddenly causing a scroll? */
|
|
73
73
|
container-type: inline-size;
|
|
74
74
|
overflow-x: hidden;
|
|
75
|
-
height: var(--container-height);
|
|
75
|
+
height: var(--container-height, 100%);
|
|
76
76
|
overflow-y: auto;
|
|
77
77
|
overflow-y: auto;
|
|
78
78
|
scrollbar-width: var(--container-scrollbar-width, var(--scrollbar-width, thin));
|
|
@@ -84,7 +84,7 @@ section :global(p), section :global(blockquote), section :global(dl), section :g
|
|
|
84
84
|
line-height: var(--container-line-height, var(--block-line-height, var(--line-height, 1.5)));
|
|
85
85
|
margin-left: auto;
|
|
86
86
|
margin-right: auto;
|
|
87
|
-
font-weight: var(--container-body-font-weight, var(--block-body-font-weight, var(--body-font-weight,
|
|
87
|
+
font-weight: var(--container-body-font-weight, var(--block-body-font-weight, var(--body-font-weight, unset)));
|
|
88
88
|
}
|
|
89
89
|
section :global(h1),
|
|
90
90
|
section :global(h2),
|
|
@@ -99,6 +99,8 @@ section :global(h6) {
|
|
|
99
99
|
max-width: var(--container-line-width, var(--block-line-width, var(--line-width, unset)));
|
|
100
100
|
margin-left: auto;
|
|
101
101
|
margin-right: auto;
|
|
102
|
+
margin-bottom: var(--container-heading-margin-bottom, var(--block-heading-margin-bottom, var(--heading-margin-bottom, 0)));
|
|
103
|
+
margin-top: var(--container-heading-margin-top, var(--block-heading-margin-top, var(--heading-margin-top, 1.5em)));
|
|
102
104
|
}
|
|
103
105
|
section :global(p) {
|
|
104
106
|
font-family: var(--container-paragraph-font-family, var(--block-paragraph-font-family, var(--paragraph-font-family, var(--paragraph-font-family, inherit))));
|
|
@@ -36,20 +36,20 @@
|
|
|
36
36
|
gap: var(--form-label-horizontal-gap, var(--padding));
|
|
37
37
|
padding-top: var(--padding, form-item, 8px);
|
|
38
38
|
padding-bottom: var(--padding, form-item, 8px);
|
|
39
|
-
font-family: var(--form-item-font-family, var(--ui-font-family, var(--font-family,
|
|
40
|
-
text-transform: var(--form-item-text-transform, var(--ui-text-transform, var(--text-transform,
|
|
41
|
-
text-decoration: var(--form-item-text-decoration, var(--ui-text-decoration, var(--text-decoration,
|
|
42
|
-
font-size: var(--form-item-font-size, var(--ui-font-size, var(--font-size,
|
|
43
|
-
font-weight: var(--form-item-font-weight, var(--ui-font-weight, var(--font-weight,
|
|
44
|
-
line-height: var(--form-item-line-height, var(--ui-line-height, var(--line-height,
|
|
45
|
-
letter-spacing: var(--form-item-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing,
|
|
46
|
-
margin-top: var(--form-item-margin, var(--ui-margin, var(--margin,
|
|
47
|
-
margin-top: var(--form-item-margin-top, var(--ui-margin-top, var(--margin-top,
|
|
48
|
-
margin-bottom: var(--form-item-margin, var(--ui-margin, var(--margin,
|
|
49
|
-
margin-bottom: var(--form-item-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom,
|
|
50
|
-
text-indent: var(--form-item-indent, var(--ui-indent, var(--indent,
|
|
51
|
-
font-variant: var(--form-item-font-variant, var(--ui-font-variant, var(--font-variant,
|
|
52
|
-
text-align: var(--form-item-text-align, var(--ui-text-align, var(--text-align,
|
|
39
|
+
font-family: var(--form-item-font-family, var(--ui-font-family, var(--font-family, unset)));
|
|
40
|
+
text-transform: var(--form-item-text-transform, var(--ui-text-transform, var(--text-transform, unset)));
|
|
41
|
+
text-decoration: var(--form-item-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset)));
|
|
42
|
+
font-size: var(--form-item-font-size, var(--ui-font-size, var(--font-size, unset)));
|
|
43
|
+
font-weight: var(--form-item-font-weight, var(--ui-font-weight, var(--font-weight, unset)));
|
|
44
|
+
line-height: var(--form-item-line-height, var(--ui-line-height, var(--line-height, unset)));
|
|
45
|
+
letter-spacing: var(--form-item-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset)));
|
|
46
|
+
margin-top: var(--form-item-margin, var(--ui-margin, var(--margin, unset)));
|
|
47
|
+
margin-top: var(--form-item-margin-top, var(--ui-margin-top, var(--margin-top, unset)));
|
|
48
|
+
margin-bottom: var(--form-item-margin, var(--ui-margin, var(--margin, unset)));
|
|
49
|
+
margin-bottom: var(--form-item-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset)));
|
|
50
|
+
text-indent: var(--form-item-indent, var(--ui-indent, var(--indent, unset)));
|
|
51
|
+
font-variant: var(--form-item-font-variant, var(--ui-font-variant, var(--font-variant, unset)));
|
|
52
|
+
text-align: var(--form-item-text-align, var(--ui-text-align, var(--text-align, unset)));
|
|
53
53
|
box-sizing: border-box;
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -100,20 +100,20 @@ label {
|
|
|
100
100
|
.globalInputStyles :global(input),
|
|
101
101
|
.globalInputStyles :global(select),
|
|
102
102
|
.globalInputStyles :global(textarea) {
|
|
103
|
-
font-family: var(--form-input-font-family, var(--input-font-family, var(--ui-font-family, var(--font-family,
|
|
104
|
-
text-transform: var(--form-input-text-transform, var(--input-text-transform, var(--ui-text-transform, var(--text-transform,
|
|
105
|
-
text-decoration: var(--form-input-text-decoration, var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration,
|
|
106
|
-
font-size: var(--form-input-font-size, var(--input-font-size, var(--ui-font-size, var(--font-size,
|
|
107
|
-
font-weight: var(--form-input-font-weight, var(--input-font-weight, var(--ui-font-weight, var(--font-weight,
|
|
108
|
-
line-height: var(--form-input-line-height, var(--input-line-height, var(--ui-line-height, var(--line-height,
|
|
109
|
-
letter-spacing: var(--form-input-letter-spacing, var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing,
|
|
110
|
-
margin-top: var(--form-input-margin, var(--input-margin, var(--ui-margin, var(--margin,
|
|
111
|
-
margin-top: var(--form-input-margin-top, var(--input-margin-top, var(--ui-margin-top, var(--margin-top,
|
|
112
|
-
margin-bottom: var(--form-input-margin, var(--input-margin, var(--ui-margin, var(--margin,
|
|
113
|
-
margin-bottom: var(--form-input-margin-bottom, var(--input-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom,
|
|
114
|
-
text-indent: var(--form-input-indent, var(--input-indent, var(--ui-indent, var(--indent,
|
|
115
|
-
font-variant: var(--form-input-font-variant, var(--input-font-variant, var(--ui-font-variant, var(--font-variant,
|
|
116
|
-
text-align: var(--form-input-text-align, var(--input-text-align, var(--ui-text-align, var(--text-align,
|
|
103
|
+
font-family: var(--form-input-font-family, var(--input-font-family, var(--ui-font-family, var(--font-family, unset))));
|
|
104
|
+
text-transform: var(--form-input-text-transform, var(--input-text-transform, var(--ui-text-transform, var(--text-transform, unset))));
|
|
105
|
+
text-decoration: var(--form-input-text-decoration, var(--input-text-decoration, var(--ui-text-decoration, var(--text-decoration, unset))));
|
|
106
|
+
font-size: var(--form-input-font-size, var(--input-font-size, var(--ui-font-size, var(--font-size, unset))));
|
|
107
|
+
font-weight: var(--form-input-font-weight, var(--input-font-weight, var(--ui-font-weight, var(--font-weight, unset))));
|
|
108
|
+
line-height: var(--form-input-line-height, var(--input-line-height, var(--ui-line-height, var(--line-height, unset))));
|
|
109
|
+
letter-spacing: var(--form-input-letter-spacing, var(--input-letter-spacing, var(--ui-letter-spacing, var(--letter-spacing, unset))));
|
|
110
|
+
margin-top: var(--form-input-margin, var(--input-margin, var(--ui-margin, var(--margin, unset))));
|
|
111
|
+
margin-top: var(--form-input-margin-top, var(--input-margin-top, var(--ui-margin-top, var(--margin-top, unset))));
|
|
112
|
+
margin-bottom: var(--form-input-margin, var(--input-margin, var(--ui-margin, var(--margin, unset))));
|
|
113
|
+
margin-bottom: var(--form-input-margin-bottom, var(--input-margin-bottom, var(--ui-margin-bottom, var(--margin-bottom, unset))));
|
|
114
|
+
text-indent: var(--form-input-indent, var(--input-indent, var(--ui-indent, var(--indent, unset))));
|
|
115
|
+
font-variant: var(--form-input-font-variant, var(--input-font-variant, var(--ui-font-variant, var(--font-variant, unset))));
|
|
116
|
+
text-align: var(--form-input-text-align, var(--input-text-align, var(--ui-text-align, var(--text-align, unset))));
|
|
117
117
|
box-sizing: border-box;
|
|
118
118
|
border: var(--form-input-border, var(--input-border, var(--ui-border, var(--border, inherit))));
|
|
119
119
|
border-top: var(--form-input-border-top, var(--input-border-top, var(--ui-border-top, var(--border-top, var(--form-input-border, var(--input-border, var(--ui-border, var(--border, none))))))));
|