@volverjs/style 0.1.2-beta.16 → 0.1.2-beta.18
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-avatar.css +1 -0
- package/dist/components/vv-button.css +1 -1
- package/dist/components/vv-card.css +1 -1
- package/dist/components/vv-input-checkbox-group.css +1 -1
- package/dist/components/vv-input-radio-group.css +1 -1
- package/dist/components/vv-tooltip.css +1 -1
- package/dist/components.css +1 -1
- package/dist/themes/dark/components.css +1 -1
- package/dist/themes/dark/volver.css +1 -1
- package/dist/volver.css +1 -1
- package/package.json +7 -5
- package/src/_config.scss +1 -0
- package/src/components/index.scss +1 -0
- package/src/components/vv-avatar.scss +12 -0
- package/src/settings/_index.scss +1 -0
- package/src/settings/components/_vv-avatar.scss +40 -0
- package/src/settings/components/_vv-button.scss +2 -2
- package/src/settings/components/_vv-card.scss +0 -1
- package/src/settings/components/_vv-input-checkbox-group.scss +1 -0
- package/src/settings/components/_vv-tooltip.scss +10 -5
- package/src/themes/dark/settings/components/_vv-button.scss +1 -1
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.18",
|
|
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",
|
|
@@ -27,6 +27,8 @@
|
|
|
27
27
|
"./scss/components/vv-accordion": "./src/components/vv-accordion.scss",
|
|
28
28
|
"./components/vv-alert": "./dist/components/vv-alert.css",
|
|
29
29
|
"./scss/components/vv-alert": "./src/components/vv-alert.scss",
|
|
30
|
+
"./components/vv-avatar": "./dist/components/vv-avatar.css",
|
|
31
|
+
"./scss/components/vv-avatar": "./src/components/vv-avatar.scss",
|
|
30
32
|
"./components/vv-badge": "./dist/components/vv-badge.css",
|
|
31
33
|
"./scss/components/vv-badge": "./src/components/vv-badge.scss",
|
|
32
34
|
"./components/vv-breadcrumb": "./dist/components/vv-breadcrumb.css",
|
|
@@ -149,7 +151,7 @@
|
|
|
149
151
|
"devDependencies": {
|
|
150
152
|
"@iconify/vue": "^4.0.0",
|
|
151
153
|
"@vitejs/plugin-vue": "^3.2.0",
|
|
152
|
-
"@vueuse/core": "^9.
|
|
154
|
+
"@vueuse/core": "^9.5.0",
|
|
153
155
|
"@vueuse/head": "^0.9.8",
|
|
154
156
|
"eslint": "^8.27.0",
|
|
155
157
|
"eslint-config-prettier": "^8.5.0",
|
|
@@ -163,9 +165,9 @@
|
|
|
163
165
|
"postcss-preset-env": "^7.8.2",
|
|
164
166
|
"prism-themes": "^1.9.0",
|
|
165
167
|
"prismjs": "1.29.0",
|
|
166
|
-
"sass": "^1.56.
|
|
168
|
+
"sass": "^1.56.1",
|
|
167
169
|
"stylelint": "^14.14.1",
|
|
168
|
-
"stylelint-config-prettier": "^9.0.
|
|
170
|
+
"stylelint-config-prettier": "^9.0.4",
|
|
169
171
|
"stylelint-config-recommended-scss": "^8.0.0",
|
|
170
172
|
"stylelint-config-recommended-vue": "^1.4.0",
|
|
171
173
|
"stylelint-config-standard-scss": "^6.1.0",
|
|
@@ -181,7 +183,7 @@
|
|
|
181
183
|
"vite-plugin-vue-layouts": "^0.7.0",
|
|
182
184
|
"vite-ssg": "^0.21.2",
|
|
183
185
|
"vite-ssg-sitemap": "^0.4.3",
|
|
184
|
-
"vue": "^3.2.
|
|
186
|
+
"vue": "^3.2.44",
|
|
185
187
|
"vue-live": "^2.1.0",
|
|
186
188
|
"vue-router": "^4.1.6"
|
|
187
189
|
},
|
package/src/_config.scss
CHANGED
|
@@ -25,6 +25,7 @@ $components-names: (
|
|
|
25
25
|
vv-input-checkbox: $components-prefix + -input-checkbox,
|
|
26
26
|
vv-input-radio-group: $components-prefix + -input-radio-group,
|
|
27
27
|
vv-input-radio: $components-prefix + -input-radio,
|
|
28
|
+
vv-avatar: $components-prefix + -avatar,
|
|
28
29
|
vv-input-text: $components-prefix + -input-text,
|
|
29
30
|
vv-nav: $components-prefix + -nav,
|
|
30
31
|
vv-progress: $components-prefix + -progress,
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@import '../context';
|
|
3
|
+
|
|
4
|
+
$component-name: map.get($components-names, vv-avatar);
|
|
5
|
+
$component-map: $vv-avatar;
|
|
6
|
+
|
|
7
|
+
@include spread-map-into-bem(
|
|
8
|
+
$map: $component-map,
|
|
9
|
+
$block: $component-name,
|
|
10
|
+
$props: $use-custom-props-for-components,
|
|
11
|
+
$zero-specificity: $zero-specificity-for-compoenents
|
|
12
|
+
);
|
package/src/settings/_index.scss
CHANGED
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
@import 'components/vv-input-checkbox';
|
|
29
29
|
@import 'components/vv-input-radio-group';
|
|
30
30
|
@import 'components/vv-input-radio';
|
|
31
|
+
@import 'components/vv-avatar';
|
|
31
32
|
@import 'components/vv-input-text';
|
|
32
33
|
@import 'components/vv-nav';
|
|
33
34
|
@import 'components/vv-progress';
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
$vv-avatar: (
|
|
2
|
+
display: inline-flex,
|
|
3
|
+
justify-content: center,
|
|
4
|
+
align-items: center,
|
|
5
|
+
width: var(--spacing-40),
|
|
6
|
+
height: var(--spacing-40),
|
|
7
|
+
border-radius: 50%,
|
|
8
|
+
border-width: var(--spacing-2),
|
|
9
|
+
border-style: solid,
|
|
10
|
+
border-color: var(--color-surface-4),
|
|
11
|
+
background-color: var(--color-word),
|
|
12
|
+
background-position: center,
|
|
13
|
+
background-size: contain,
|
|
14
|
+
background-repeat: no-repeat,
|
|
15
|
+
color: var(--color-surface),
|
|
16
|
+
object-fit: contain,
|
|
17
|
+
overflow: hidden,
|
|
18
|
+
modifier: (
|
|
19
|
+
small: (
|
|
20
|
+
width: var(--spacing-40),
|
|
21
|
+
height: var(--spacing-40),
|
|
22
|
+
),
|
|
23
|
+
medium: (
|
|
24
|
+
width: var(--spacing-50),
|
|
25
|
+
height: var(--spacing-50),
|
|
26
|
+
font-size: 1.3em,
|
|
27
|
+
),
|
|
28
|
+
large: (
|
|
29
|
+
width: var(--spacing-64),
|
|
30
|
+
height: var(--spacing-64),
|
|
31
|
+
font-size: 1.7em,
|
|
32
|
+
),
|
|
33
|
+
),
|
|
34
|
+
state: (
|
|
35
|
+
focus: (
|
|
36
|
+
outline: var(--spacing-px) solid var(--color-brand),
|
|
37
|
+
outline-offset: var(--spacing-0),
|
|
38
|
+
),
|
|
39
|
+
),
|
|
40
|
+
) !default;
|
|
@@ -132,7 +132,7 @@ $vv-button: (
|
|
|
132
132
|
state: (
|
|
133
133
|
focus-visible: (
|
|
134
134
|
outline: var(--spacing-px) solid var(--color-gray-lighten-4),
|
|
135
|
-
outline-offset: 0,
|
|
135
|
+
outline-offset: var(--spacing-0),
|
|
136
136
|
),
|
|
137
137
|
hover: (
|
|
138
138
|
background: var(--color-gray-lighten-5),
|
|
@@ -259,7 +259,7 @@ $vv-button: (
|
|
|
259
259
|
state: (
|
|
260
260
|
focus-visible: (
|
|
261
261
|
outline: var(--spacing-px) solid var(--color-gray-lighten-4),
|
|
262
|
-
outline-offset: 0,
|
|
262
|
+
outline-offset: var(--spacing-0),
|
|
263
263
|
),
|
|
264
264
|
hover: (
|
|
265
265
|
background: var(--color-surface-2),
|
|
@@ -30,7 +30,8 @@ $vv-tooltip: (
|
|
|
30
30
|
inset-inline: -10% auto,
|
|
31
31
|
inset-block: 50% auto,
|
|
32
32
|
transform: translateY(-50%),
|
|
33
|
-
border: 10px
|
|
33
|
+
border-width: 10px,
|
|
34
|
+
border-style: solid,
|
|
34
35
|
border-color: transparent var(--color-gray-darken-4)
|
|
35
36
|
transparent transparent,
|
|
36
37
|
),
|
|
@@ -50,7 +51,8 @@ $vv-tooltip: (
|
|
|
50
51
|
z-index: -1,
|
|
51
52
|
inset-inline: 45% auto,
|
|
52
53
|
inset-block: 130% auto,
|
|
53
|
-
border: 10px
|
|
54
|
+
border-width: 10px,
|
|
55
|
+
border-style: solid,
|
|
54
56
|
border-color: var(--color-gray-darken-4) transparent
|
|
55
57
|
transparent,
|
|
56
58
|
),
|
|
@@ -71,7 +73,8 @@ $vv-tooltip: (
|
|
|
71
73
|
inset-inline: -10% auto,
|
|
72
74
|
inset-block: 50% auto,
|
|
73
75
|
transform: translateY(-50%),
|
|
74
|
-
border: 10px
|
|
76
|
+
border-width: 10px,
|
|
77
|
+
border-style: solid,
|
|
75
78
|
border-color: transparent var(--color-gray-darken-4)
|
|
76
79
|
transparent transparent,
|
|
77
80
|
),
|
|
@@ -91,7 +94,8 @@ $vv-tooltip: (
|
|
|
91
94
|
z-index: -1,
|
|
92
95
|
inset-inline: 45% auto,
|
|
93
96
|
inset-block: auto 50%,
|
|
94
|
-
border: 10px
|
|
97
|
+
border-width: 10px,
|
|
98
|
+
border-style: solid,
|
|
95
99
|
border-color: transparent transparent
|
|
96
100
|
var(--color-gray-darken-4) transparent,
|
|
97
101
|
),
|
|
@@ -112,7 +116,8 @@ $vv-tooltip: (
|
|
|
112
116
|
inset-inline: auto -10%,
|
|
113
117
|
inset-block: 50% auto,
|
|
114
118
|
transform: translateY(-50%),
|
|
115
|
-
border: 10px
|
|
119
|
+
border-width: 10px,
|
|
120
|
+
border-style: solid,
|
|
116
121
|
border-color: transparent transparent transparent
|
|
117
122
|
var(--color-gray-darken-4),
|
|
118
123
|
),
|