@volverjs/style 0.1.3 → 0.1.4

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.
Files changed (18) hide show
  1. package/dist/components/vv-button.css +1 -1
  2. package/dist/components.css +1 -1
  3. package/dist/export.css +1 -1
  4. package/dist/props/spacing.css +1 -1
  5. package/dist/props.css +1 -1
  6. package/dist/utilities/flexbox.css +1 -1
  7. package/dist/utilities/layout.css +1 -1
  8. package/dist/utilities/sizing.css +1 -1
  9. package/dist/utilities/spacing.css +1 -1
  10. package/dist/utilities/tables.css +1 -1
  11. package/dist/utilities/transforms.css +1 -1
  12. package/dist/utilities.css +1 -1
  13. package/dist/volver.css +1 -1
  14. package/package.json +5 -5
  15. package/src/settings/_spacing.scss +4 -0
  16. package/src/settings/components/_vv-button.scss +14 -12
  17. package/src/utilities/tables.scss +4 -2
  18. package/src/utilities/transforms.scss +13 -11
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@volverjs/style",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
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",
@@ -167,10 +167,10 @@
167
167
  "@vitejs/plugin-vue": "^4.0.0",
168
168
  "@vueuse/core": "^9.10.0",
169
169
  "@vueuse/head": "^1.0.22",
170
- "eslint": "^8.31.0",
170
+ "eslint": "^8.32.0",
171
171
  "eslint-config-prettier": "^8.6.0",
172
- "eslint-plugin-vue": "^9.8.0",
173
- "glob": "^8.0.3",
172
+ "eslint-plugin-vue": "^9.9.0",
173
+ "glob": "^8.1.0",
174
174
  "icss-utils": "^5.1.0",
175
175
  "markdown-it-anchor": "^8.6.6",
176
176
  "markdown-it-prism": "^2.3.0",
@@ -197,7 +197,7 @@
197
197
  "vite-plugin-handlebars": "^1.6.0",
198
198
  "vite-plugin-markdown": "^2.1.0",
199
199
  "vite-plugin-pages": "^0.28.0",
200
- "vite-plugin-stylelint": "^4.1.5",
200
+ "vite-plugin-stylelint": "^4.1.6",
201
201
  "vite-plugin-vue-layouts": "^0.7.0",
202
202
  "vite-ssg": "^0.22.1",
203
203
  "vite-ssg-sitemap": "^0.4.3",
package/src/settings/_spacing.scss CHANGED
@@ -4,9 +4,13 @@ $spacing: (
4
4
  px: 1px,
5
5
  1: 0.0625rem,
6
6
  2: 0.125rem,
7
+ 3: 0.1875rem,
7
8
  4: 0.25rem,
9
+ 5: 0.3125rem,
8
10
  6: 0.375rem,
11
+ 7: 0.4375rem,
9
12
  8: 0.5rem,
13
+ 9: 0.5625rem,
10
14
  10: 0.625rem,
11
15
  12: 0.75rem,
12
16
  14: 0.875rem,
package/src/settings/components/_vv-button.scss CHANGED
@@ -5,15 +5,15 @@ $vv-button: (
5
5
  [line-height]: var(--button-line-height),
6
6
  position: relative,
7
7
  background: var(--color-brand),
8
- border-radius: 0.5ch,
8
+ border-radius: var(--rounded),
9
9
  border-style: solid,
10
10
  border-color: var(--color-brand),
11
11
  color: var(--color-white),
12
12
  font-family: var(--font-sans),
13
13
  font-weight: var(--font-semibold),
14
14
  gap: 1ch,
15
- padding-block: 0.75ch,
16
- padding-inline: 1.75ch,
15
+ padding-block: var(--spacing-7),
16
+ padding-inline: var(--spacing-16),
17
17
  text-shadow: 0 1px 0 var(--color-gray-darken-5),
18
18
  transition: var(--transition-all),
19
19
  will-change: all,
@@ -61,6 +61,13 @@ $vv-button: (
61
61
  ),
62
62
  ),
63
63
  modifier: (
64
+ icon-only: (
65
+ element: (
66
+ icon: (
67
+ margin-inline: calc(var(--spacing-9) * -1),
68
+ ),
69
+ ),
70
+ ),
64
71
  primary: (
65
72
  background: var(--color-gray-darken-3),
66
73
  border-color: var(--color-gray-darken-3),
@@ -223,8 +230,8 @@ $vv-button: (
223
230
  color: var(--color-word-1),
224
231
  border-color: var(--color-word-5),
225
232
  font-weight: var(--font-normal),
226
- padding-inline: 0.75ch,
227
- padding-block: 0.5ch,
233
+ padding-inline: var(--spacing-6),
234
+ padding-block: var(--spacing-4),
228
235
  text-shadow: none,
229
236
  state: (
230
237
  focus-visible: (
@@ -258,8 +265,8 @@ $vv-button: (
258
265
  color: var(--color-word-1),
259
266
  border-color: transparent,
260
267
  font-weight: var(--font-normal),
261
- padding-inline: 0.75ch,
262
- padding-block: 0.5ch,
268
+ padding-inline: var(--spacing-6),
269
+ padding-block: var(--spacing-4),
263
270
  text-shadow: none,
264
271
  state: (
265
272
  focus-visible: (
@@ -290,11 +297,6 @@ $vv-button: (
290
297
  ),
291
298
  rounded: (
292
299
  border-radius: var(--rounded-full),
293
- element: (
294
- icon: (
295
- margin: 0 -1ch,
296
- ),
297
- ),
298
300
  ),
299
301
  block: (
300
302
  display: block,
package/src/utilities/tables.scss CHANGED
@@ -4,12 +4,14 @@
4
4
  @include spread-map-into-utilities(
5
5
  $map: $border-collapse,
6
6
  $class: border,
7
- $attribute: border-collapse
7
+ $attribute: border-collapse,
8
+ $zero-specificity: $zero-specificity-for-utilities
8
9
  );
9
10
 
10
11
  // table-layout
11
12
  @include spread-map-into-utilities(
12
13
  $map: $table-layout,
13
14
  $class: table,
14
- $attribute: table-layout
15
+ $attribute: table-layout,
16
+ $zero-specificity: $zero-specificity-for-utilities
15
17
  );
package/src/utilities/transforms.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  transform: scale(#{$value});
7
7
  }
8
8
  @include wrap-with-where(
9
- $selector: 'scale-#{$size}',
9
+ $selector: '.scale-#{$size}',
10
10
  $enabled: $zero-specificity-for-utilities
11
11
  ) {
12
12
  @extend %scale-#{$size};
@@ -16,7 +16,7 @@
16
16
  transform: scaleX(#{$value});
17
17
  }
18
18
  @include wrap-with-where(
19
- $selector: 'scale-x-#{$size}',
19
+ $selector: '.scale-x-#{$size}',
20
20
  $enabled: $zero-specificity-for-utilities
21
21
  ) {
22
22
  @extend %scale-x-#{$size};
@@ -26,7 +26,7 @@
26
26
  transform: scaleY(#{$value});
27
27
  }
28
28
  @include wrap-with-where(
29
- $selector: 'scale-y-#{$size}',
29
+ $selector: '.scale-y-#{$size}',
30
30
  $enabled: $zero-specificity-for-utilities
31
31
  ) {
32
32
  @extend %scale-y-#{$size};
@@ -37,14 +37,16 @@
37
37
  @include spread-map-into-utilities(
38
38
  $map: $rotate,
39
39
  $class: rotate,
40
- $attribute: transform
40
+ $attribute: transform,
41
+ $zero-specificity: $zero-specificity-for-utilities
41
42
  );
42
43
 
43
44
  // transform-origin
44
45
  @include spread-map-into-utilities(
45
46
  $map: $transform-origin,
46
47
  $class: origin,
47
- $attribute: transform-origin
48
+ $attribute: transform-origin,
49
+ $zero-specificity: $zero-specificity-for-utilities
48
50
  );
49
51
 
50
52
  // translate
@@ -53,7 +55,7 @@
53
55
  transform: translate(#{$value});
54
56
  }
55
57
  @include wrap-with-where(
56
- $selector: 'translate-#{$size}',
58
+ $selector: '.translate-#{$size}',
57
59
  $enabled: $zero-specificity-for-utilities
58
60
  ) {
59
61
  @extend %translate-#{$size};
@@ -63,7 +65,7 @@
63
65
  transform: translateX(#{$value});
64
66
  }
65
67
  @include wrap-with-where(
66
- $selector: 'translate-x-#{$size}',
68
+ $selector: '.translate-x-#{$size}',
67
69
  $enabled: $zero-specificity-for-utilities
68
70
  ) {
69
71
  @extend %translate-x-#{$size};
@@ -73,7 +75,7 @@
73
75
  transform: translateY(#{$value});
74
76
  }
75
77
  @include wrap-with-where(
76
- $selector: 'translate-y-#{$size}',
78
+ $selector: '.translate-y-#{$size}',
77
79
  $enabled: $zero-specificity-for-utilities
78
80
  ) {
79
81
  @extend %translate-y-#{$size};
@@ -83,7 +85,7 @@
83
85
  transform: translate(-#{$value});
84
86
  }
85
87
  @include wrap-with-where(
86
- $selector: '-translate-#{$size}',
88
+ $selector: '.-translate-#{$size}',
87
89
  $enabled: $zero-specificity-for-utilities
88
90
  ) {
89
91
  @extend %-translate-#{$size};
@@ -93,7 +95,7 @@
93
95
  transform: translateX(-#{$value});
94
96
  }
95
97
  @include wrap-with-where(
96
- $selector: '-translate-x-#{$size}',
98
+ $selector: '.-translate-x-#{$size}',
97
99
  $enabled: $zero-specificity-for-utilities
98
100
  ) {
99
101
  @extend %-translate-x-#{$size};
@@ -103,7 +105,7 @@
103
105
  transform: translateY(-#{$value});
104
106
  }
105
107
  @include wrap-with-where(
106
- $selector: '-translate-y-#{$size}',
108
+ $selector: '.-translate-y-#{$size}',
107
109
  $enabled: $zero-specificity-for-utilities
108
110
  ) {
109
111
  @extend %-translate-y-#{$size};