@volverjs/style 0.1.2-beta.6 → 0.1.2-beta.7
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/components/vv-badge.css +1 -1
- package/dist/components/vv-button-group.css +1 -1
- package/dist/components/vv-button.css +1 -1
- package/dist/components/vv-card.css +1 -1
- package/dist/components/vv-input-checkbox.css +1 -1
- package/dist/components/vv-input-radio.css +1 -1
- package/dist/components.css +1 -1
- package/dist/style.css +1 -1
- package/package.json +5 -5
- package/src/components/vv-button-group.scss +4 -8
- package/src/settings/components/_vv-badge.scss +22 -9
- package/src/settings/components/_vv-button.scss +10 -9
- package/src/settings/components/_vv-card.scss +2 -1
- package/src/settings/components/_vv-input-checkbox.scss +1 -0
- package/src/settings/components/_vv-input-radio.scss +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@volverjs/style",
|
|
3
|
-
"version": "0.1.2-beta.
|
|
3
|
+
"version": "0.1.2-beta.7",
|
|
4
4
|
"description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
|
|
5
5
|
"main": "dist/style.css",
|
|
6
6
|
"style": "dist/style.css",
|
|
@@ -138,20 +138,20 @@
|
|
|
138
138
|
"homepage": "https://github.com/volverjs/style#readme",
|
|
139
139
|
"devDependencies": {
|
|
140
140
|
"eslint-config-prettier": "^8.5.0",
|
|
141
|
-
"eslint": "^8.
|
|
141
|
+
"eslint": "^8.26.0",
|
|
142
142
|
"glob": "^8.0.3",
|
|
143
143
|
"icss-utils": "^5.1.0",
|
|
144
144
|
"postcss-preset-env": "^7.8.2",
|
|
145
145
|
"postcss": "^8.4.18",
|
|
146
|
-
"promise": "^8.
|
|
146
|
+
"promise": "^8.3.0",
|
|
147
147
|
"sass": "^1.55.0",
|
|
148
148
|
"stylelint-config-prettier": "^9.0.3",
|
|
149
|
-
"stylelint-config-standard-scss": "^
|
|
149
|
+
"stylelint-config-standard-scss": "^6.0.0",
|
|
150
150
|
"stylelint": "^14.14.0",
|
|
151
151
|
"vite-plugin-eslint": "^1.8.1",
|
|
152
152
|
"vite-plugin-handlebars": "^1.6.0",
|
|
153
153
|
"vite-plugin-stylelint": "^3.0.8",
|
|
154
|
-
"vite": "^3.
|
|
154
|
+
"vite": "^3.2.0"
|
|
155
155
|
},
|
|
156
156
|
"scripts": {
|
|
157
157
|
"dev": "vite --port 3000 --open",
|
|
@@ -64,14 +64,12 @@ $button-component-selector: '.' + $button-component-name;
|
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
// clear margin for inner children
|
|
67
|
-
@if map.get($vv-button, 'border-width') {
|
|
67
|
+
@if map.get($vv-button, '--button-border-width') {
|
|
68
68
|
@include wrap-with-where(
|
|
69
69
|
$selector: '&:not(:last-child, :last-child)',
|
|
70
70
|
$enabled: $zero-specificity-for-compoenents
|
|
71
71
|
) {
|
|
72
|
-
margin-block: calc(
|
|
73
|
-
map.get($vv-button, 'border-width') * -1
|
|
74
|
-
);
|
|
72
|
+
margin-block: calc(var(--button-border-width) * -1);
|
|
75
73
|
}
|
|
76
74
|
}
|
|
77
75
|
}
|
|
@@ -99,14 +97,12 @@ $button-component-selector: '.' + $button-component-name;
|
|
|
99
97
|
}
|
|
100
98
|
|
|
101
99
|
// clear margin for inner children
|
|
102
|
-
@if map.get($vv-button, 'border-width') {
|
|
100
|
+
@if map.get($vv-button, '--button-border-width') {
|
|
103
101
|
@include wrap-with-where(
|
|
104
102
|
$selector: '&:not(:last-child, :last-child)',
|
|
105
103
|
$enabled: $zero-specificity-for-compoenents
|
|
106
104
|
) {
|
|
107
|
-
margin-inline: calc(
|
|
108
|
-
map.get($vv-button, 'border-width') * -1
|
|
109
|
-
);
|
|
105
|
+
margin-inline: calc(var(--button-border-width) * -1);
|
|
110
106
|
}
|
|
111
107
|
}
|
|
112
108
|
}
|
|
@@ -1,26 +1,39 @@
|
|
|
1
1
|
$vv-badge: (
|
|
2
|
-
|
|
2
|
+
--badge-font-size: 0.7em,
|
|
3
|
+
[font-size]: var(--badge-font-size),
|
|
4
|
+
border-radius: 0.5em,
|
|
3
5
|
background: var(--color-brand),
|
|
4
6
|
color: var(--color-white),
|
|
5
|
-
|
|
6
|
-
height:
|
|
7
|
-
min-width:
|
|
8
|
-
padding: 0
|
|
7
|
+
line-height: 2em,
|
|
8
|
+
min-height: 2em,
|
|
9
|
+
min-width: 2em,
|
|
10
|
+
padding: 0 0.5em,
|
|
9
11
|
display: inline-flex,
|
|
10
12
|
justify-content: center,
|
|
13
|
+
align-items: center,
|
|
14
|
+
gap: 0.5ch,
|
|
15
|
+
white-space: nowrap,
|
|
11
16
|
font-family: var(--font-sans),
|
|
12
|
-
|
|
17
|
+
font-weight: var(--font-normal),
|
|
18
|
+
text-shadow: none,
|
|
13
19
|
state: (
|
|
14
20
|
empty: (
|
|
15
21
|
font-size: inherit,
|
|
16
|
-
width: 0.5em,
|
|
17
|
-
height: 0.5em,
|
|
18
22
|
min-width: 0,
|
|
19
|
-
|
|
23
|
+
min-height: 0,
|
|
24
|
+
[width]: var(--badge-font-size),
|
|
25
|
+
[height]: var(--badge-font-size),
|
|
26
|
+
[border-radius]: calc(var(--badge-font-size) * 0.5),
|
|
20
27
|
padding: 0,
|
|
21
28
|
),
|
|
22
29
|
),
|
|
23
30
|
modifier: (
|
|
31
|
+
small: (
|
|
32
|
+
--badge-font-size: 0.6em,
|
|
33
|
+
),
|
|
34
|
+
rounded: (
|
|
35
|
+
border-radius: 1em,
|
|
36
|
+
),
|
|
24
37
|
white: (
|
|
25
38
|
background: alpha-color('white', 80%),
|
|
26
39
|
color: var(--color-black),
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
$vv-button: (
|
|
2
|
+
--button-border-width: var(--border-2),
|
|
2
3
|
position: relative,
|
|
3
4
|
background: var(--color-brand),
|
|
4
5
|
border-radius: 0.5ch,
|
|
5
|
-
border-width: var(--border-
|
|
6
|
+
[border-width]: var(--button-border-width),
|
|
6
7
|
border-style: solid,
|
|
7
8
|
border-color: var(--color-brand),
|
|
8
9
|
color: var(--color-white),
|
|
@@ -184,15 +185,15 @@ $vv-button: (
|
|
|
184
185
|
),
|
|
185
186
|
),
|
|
186
187
|
action: (
|
|
188
|
+
--button-border-width: var(--border),
|
|
187
189
|
font-size: 0.875em,
|
|
188
190
|
background: var(--color-surface-1),
|
|
189
191
|
color: var(--color-word-1),
|
|
190
192
|
border-color: var(--color-word-5),
|
|
191
|
-
border-width: var(--border),
|
|
192
193
|
font-weight: var(--font-normal),
|
|
193
194
|
padding-inline: 0.75ch,
|
|
194
195
|
padding-block: 0.5ch,
|
|
195
|
-
line-height: var(--leading-
|
|
196
|
+
line-height: var(--leading-snug),
|
|
196
197
|
text-shadow: none,
|
|
197
198
|
state: (
|
|
198
199
|
focus-visible: (
|
|
@@ -213,21 +214,21 @@ $vv-button: (
|
|
|
213
214
|
element: (
|
|
214
215
|
icon: (
|
|
215
216
|
margin-inline: -0.125ch,
|
|
216
|
-
block-size:
|
|
217
|
-
inline-size:
|
|
217
|
+
block-size: calc(1em * var(--leading-snug)),
|
|
218
|
+
inline-size: calc(1em * var(--leading-snug)),
|
|
218
219
|
),
|
|
219
220
|
),
|
|
220
221
|
),
|
|
221
222
|
action-quiet: (
|
|
223
|
+
--button-border-width: var(--border),
|
|
222
224
|
font-size: var(--text-14),
|
|
223
225
|
background: transparent,
|
|
224
226
|
color: var(--color-word-1),
|
|
225
|
-
border-width: var(--border),
|
|
226
227
|
border-color: transparent,
|
|
227
228
|
font-weight: var(--font-normal),
|
|
228
229
|
padding-inline: 0.75ch,
|
|
229
230
|
padding-block: 0.5ch,
|
|
230
|
-
line-height: var(--leading-
|
|
231
|
+
line-height: var(--leading-snug),
|
|
231
232
|
text-shadow: none,
|
|
232
233
|
state: (
|
|
233
234
|
focus-visible: (
|
|
@@ -251,8 +252,8 @@ $vv-button: (
|
|
|
251
252
|
element: (
|
|
252
253
|
icon: (
|
|
253
254
|
margin-inline: -0.125ch,
|
|
254
|
-
block-size:
|
|
255
|
-
inline-size:
|
|
255
|
+
block-size: calc(1em * var(--leading-snug)),
|
|
256
|
+
inline-size: calc(1em * var(--leading-snug)),
|
|
256
257
|
),
|
|
257
258
|
),
|
|
258
259
|
),
|
|
@@ -29,6 +29,8 @@ $vv-card: (
|
|
|
29
29
|
display: block,
|
|
30
30
|
width: 100%,
|
|
31
31
|
height: auto,
|
|
32
|
+
object-fit: cover,
|
|
33
|
+
object-position: center,
|
|
32
34
|
),
|
|
33
35
|
content: (
|
|
34
36
|
padding: var(--spacing-md),
|
|
@@ -38,7 +40,6 @@ $vv-card: (
|
|
|
38
40
|
),
|
|
39
41
|
footer: (
|
|
40
42
|
_alias: '> footer',
|
|
41
|
-
background-color: var(--color-surface-1),
|
|
42
43
|
border-top: var(--border) solid var(--color-surface-4),
|
|
43
44
|
padding: var(--spacing-md),
|
|
44
45
|
),
|