srcdev-nuxt-components 0.0.32 → 0.0.34
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/assets/styles/ally/_utils.css +20 -0
- package/assets/styles/ally/_variables.css +8 -0
- package/assets/styles/ally/index.css +2 -0
- package/assets/styles/forms/themes/_error.css +16 -2
- package/assets/styles/forms/themes/_ghost.css +16 -2
- package/assets/styles/forms/themes/_input-action.css +20 -0
- package/assets/styles/forms/themes/_primary.css +17 -2
- package/assets/styles/forms/themes/_secondary.css +16 -2
- package/assets/styles/forms/themes/_success.css +16 -2
- package/assets/styles/forms/themes/_tertiary.css +15 -1
- package/assets/styles/forms/themes/_warning.css +16 -2
- package/assets/styles/forms/themes/index.css +8 -7
- package/assets/styles/forms/variables/_sizes.css +82 -0
- package/assets/styles/forms/variables/_theme.css +1 -59
- package/assets/styles/forms/variables/index.css +1 -0
- package/assets/styles/main.css +1 -0
- package/components/functional/pop-over/PopOver.vue +18 -8
- package/package.json +1 -1
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
.sr-only {
|
|
2
|
+
border-width: 0;
|
|
3
|
+
clip: rect(1px, 0.1rem, 0.1rem, 0.1rem);
|
|
4
|
+
clip-path: inset(50%);
|
|
5
|
+
height: 0.1rem;
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
position: absolute;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
width: 0.1rem;
|
|
10
|
+
}
|
|
11
|
+
/* .sr-only {
|
|
12
|
+
position: absolute;
|
|
13
|
+
width: 0.1rem;
|
|
14
|
+
height: 0.1rem;
|
|
15
|
+
padding: 0;
|
|
16
|
+
margin: -0.1rem;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
clip: rect(0, 0, 0, 0);
|
|
19
|
+
white-space: nowrap;
|
|
20
|
+
} */
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--focus-box-shadow-colour-off: transparent;
|
|
3
|
+
--focus-box-shadow-colour-on: light-dark(var(--blue-12), var(--gray-0));
|
|
4
|
+
--form-focus-box-shadow: 0 0 0 0.3rem;
|
|
5
|
+
|
|
6
|
+
--box-shadow-off: 0 0 0 0.3rem transparent;
|
|
7
|
+
--box-shadow-on: 0 0 0 0.3rem light-dark(var(--blue-12), var(--gray-0));
|
|
8
|
+
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--red-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--red-12), var(--red-12));
|
|
@@ -27,6 +27,20 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--red-12), var(--red-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--red-12), var(--red-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--red-12), var(--red-12));
|
|
39
|
+
--theme-form-toggle-symbol-off: var(--orange-12);
|
|
40
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
|
+
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
42
|
+
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
43
|
+
|
|
30
44
|
/*
|
|
31
45
|
* Checkbox as button
|
|
32
46
|
**/
|
|
@@ -58,6 +72,6 @@
|
|
|
58
72
|
--theme-btn-outline-focus: var(--red-0);
|
|
59
73
|
--theme-btn-text-focus: var(--red-12);
|
|
60
74
|
|
|
61
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--red-12), var(--red-2));
|
|
62
76
|
}
|
|
63
77
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--gray-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
|
|
@@ -27,6 +27,20 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
--form-element-border-width: 0.1rem;
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
|
|
37
|
+
--form-element-border-width: 0.1rem;
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
|
|
39
|
+
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
40
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
|
+
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
42
|
+
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
43
|
+
|
|
30
44
|
/*
|
|
31
45
|
* Checkbox as button
|
|
32
46
|
**/
|
|
@@ -58,6 +72,6 @@
|
|
|
58
72
|
--theme-btn-outline-focus: light-dark(var(--gray-12), var(--gray-0));
|
|
59
73
|
--theme-btn-text-focus: light-dark(var(--gray-12), var(--gray-0));
|
|
60
74
|
|
|
61
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
62
76
|
}
|
|
63
77
|
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
[data-btn-theme='input-action'] {
|
|
3
|
+
--theme-btn-bg: transparent;
|
|
4
|
+
--theme-btn-border: transparent;
|
|
5
|
+
--theme-btn-outline: transparent;
|
|
6
|
+
--theme-btn-text: var(--theme-form-input-text);
|
|
7
|
+
|
|
8
|
+
--theme-btn-bg-hover: light-dark(var(--gray-2), var(--gray-3));
|
|
9
|
+
--theme-btn-border-hover: transparent;
|
|
10
|
+
--theme-btn-outline-hover: transparent;
|
|
11
|
+
--theme-btn-text-hover: var(--theme-form-input-text);
|
|
12
|
+
|
|
13
|
+
--theme-btn-bg-focus: transparent;
|
|
14
|
+
--theme-btn-border-focus: transparent;
|
|
15
|
+
--theme-btn-outline-focus: transparent;
|
|
16
|
+
--theme-btn-text-focus: transparent;
|
|
17
|
+
|
|
18
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--blue-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
/* --theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2)); */
|
|
13
|
+
--theme-form-focus-box-shadow: light-dark(red, yellowgreen);
|
|
13
14
|
|
|
14
15
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
16
|
--theme-form-checkbox-border: light-dark(var(--blue-12), var(--blue-12));
|
|
@@ -27,6 +28,20 @@
|
|
|
27
28
|
|
|
28
29
|
--theme-form-range-accent-color: light-dark(var(--blue-12), var(--blue-));
|
|
29
30
|
|
|
31
|
+
/*
|
|
32
|
+
* ToggleSwitch
|
|
33
|
+
**/
|
|
34
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
35
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
36
|
+
|
|
37
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--blue-12), var(--blue-1));
|
|
38
|
+
|
|
39
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--blue-1), var(--blue-1));
|
|
40
|
+
--theme-form-toggle-symbol-off: var(--blue-7);
|
|
41
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
42
|
+
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
43
|
+
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
44
|
+
|
|
30
45
|
/*
|
|
31
46
|
* Checkbox as button
|
|
32
47
|
**/
|
|
@@ -62,6 +77,6 @@
|
|
|
62
77
|
--theme-btn-outline-focus: var(--blue-0);
|
|
63
78
|
--theme-btn-text-focus: var(--blue-12);
|
|
64
79
|
|
|
65
|
-
--theme-form-focus-box-shadow:
|
|
80
|
+
--theme-form-focus-box-shadow: light-dark(var(--blue-12), var(--blue-2));
|
|
66
81
|
}
|
|
67
82
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--gray-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
|
|
@@ -27,6 +27,20 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
|
|
39
|
+
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
40
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
|
+
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
42
|
+
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
43
|
+
|
|
30
44
|
/*
|
|
31
45
|
* Checkbox as button
|
|
32
46
|
**/
|
|
@@ -58,6 +72,6 @@
|
|
|
58
72
|
--theme-btn-outline-focus: var(--gray-0);
|
|
59
73
|
--theme-btn-text-focus: var(--gray-12);
|
|
60
74
|
|
|
61
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
62
76
|
}
|
|
63
77
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--green-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--green-12), var(--green-12));
|
|
@@ -27,6 +27,20 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--green-12), var(--green-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--green-12), var(--green-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--green-12), var(--green-12));
|
|
39
|
+
--theme-form-toggle-symbol-off: var(--green-4);
|
|
40
|
+
--theme-form-toggle-symbol-on: var(--green-12);
|
|
41
|
+
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
42
|
+
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
43
|
+
|
|
30
44
|
/*
|
|
31
45
|
* Checkbox as button
|
|
32
46
|
**/
|
|
@@ -58,6 +72,6 @@
|
|
|
58
72
|
--theme-btn-outline-focus: var(--green-0);
|
|
59
73
|
--theme-btn-text-focus: var(--green-12);
|
|
60
74
|
|
|
61
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--green-12), var(--green-2));
|
|
62
76
|
}
|
|
63
77
|
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--gray-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--gray-12), var(--gray-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--gray-12), var(--gray-12));
|
|
@@ -27,6 +27,20 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-12));
|
|
39
|
+
--theme-form-toggle-symbol-off: var(--gray-4);
|
|
40
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
|
+
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
42
|
+
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
43
|
+
|
|
30
44
|
/*
|
|
31
45
|
* Checkbox as button
|
|
32
46
|
**/
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
--theme-form-input-outline-focus: var(--orange-6);
|
|
10
10
|
--theme-form-input-text: light-dark(var(--gray-10), var(--gray-11));
|
|
11
11
|
|
|
12
|
-
--theme-form-focus-box-shadow:
|
|
12
|
+
--theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
|
|
13
13
|
|
|
14
14
|
--theme-form-checkbox-bg: light-dark(var(--gray-1), var(--gray-4));
|
|
15
15
|
--theme-form-checkbox-border: light-dark(var(--orange-12), var(--orange-12));
|
|
@@ -27,6 +27,20 @@
|
|
|
27
27
|
|
|
28
28
|
--theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
|
|
29
29
|
|
|
30
|
+
/*
|
|
31
|
+
* ToggleSwitch
|
|
32
|
+
**/
|
|
33
|
+
--theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
|
|
34
|
+
--theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
|
|
35
|
+
|
|
36
|
+
--theme-form-toggle-border: var(--form-element-border-width) solid light-dark(var(--orange-12), var(--orange-1));
|
|
37
|
+
|
|
38
|
+
--theme-form-toggle-outline: var(--form-element-outline-width) solid light-dark(var(--orange-12), var(--orange-12));
|
|
39
|
+
--theme-form-toggle-symbol-off: var(--orange-12);
|
|
40
|
+
--theme-form-toggle-symbol-on: var(--gray-12);
|
|
41
|
+
--theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
|
|
42
|
+
--theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
|
|
43
|
+
|
|
30
44
|
/*
|
|
31
45
|
* Checkbox as button
|
|
32
46
|
**/
|
|
@@ -58,6 +72,6 @@
|
|
|
58
72
|
--theme-btn-outline-focus: var(--orange-0);
|
|
59
73
|
--theme-btn-text-focus: var(--orange-12);
|
|
60
74
|
|
|
61
|
-
--theme-form-focus-box-shadow:
|
|
75
|
+
--theme-form-focus-box-shadow: light-dark(var(--orange-12), var(--orange-2));
|
|
62
76
|
}
|
|
63
77
|
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
@import './_primary
|
|
2
|
-
@import './_secondary
|
|
3
|
-
@import './_tertiary
|
|
4
|
-
@import './_ghost
|
|
5
|
-
@import './_error
|
|
6
|
-
@import './_success
|
|
7
|
-
@import './_warning
|
|
1
|
+
@import './_primary';
|
|
2
|
+
@import './_secondary';
|
|
3
|
+
@import './_tertiary';
|
|
4
|
+
@import './_ghost';
|
|
5
|
+
@import './_error';
|
|
6
|
+
@import './_success';
|
|
7
|
+
@import './_warning';
|
|
8
|
+
@import './_input-action';
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--form-element-padding-block-start: 0.4lh;
|
|
3
|
+
--form-element-padding-block-end: 0.4lh;
|
|
4
|
+
--form-element-border-width: 0.2rem;
|
|
5
|
+
--form-element-outline-width: 0.1rem;
|
|
6
|
+
|
|
7
|
+
[data-size='x-small'] {
|
|
8
|
+
--form-element-font-size: var(--step-0);
|
|
9
|
+
--form-placeholder-font-size: calc(var(--step-0) * 0.65);
|
|
10
|
+
--form-element-line-height: var(--step-0);
|
|
11
|
+
--form-icon-size: var(--step-0);
|
|
12
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.65);
|
|
13
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
14
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.65);
|
|
15
|
+
--form-input-border-radius: 0.4rem;
|
|
16
|
+
--form-icon-only-button-size: calc(var(--step-1) * 2);
|
|
17
|
+
--form-toggle-symbol-size: calc(var(--step-0) * 1.55);
|
|
18
|
+
--form-toggle-switch-width-adjustment: 0.5rem;
|
|
19
|
+
|
|
20
|
+
--form-input-checkbox-radio-button-size: var(--step-0);
|
|
21
|
+
}
|
|
22
|
+
[data-size='small'] {
|
|
23
|
+
--form-element-font-size: var(--step-1);
|
|
24
|
+
--form-placeholder-font-size: calc(var(--step-1) * 0.65);
|
|
25
|
+
--form-element-line-height: var(--step-1);
|
|
26
|
+
--form-icon-size: var(--step-1);
|
|
27
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.65);
|
|
28
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
29
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.65);
|
|
30
|
+
--form-input-border-radius: 0.4rem;
|
|
31
|
+
--form-icon-only-button-size: calc(var(--step-1) * 2.25);
|
|
32
|
+
--form-toggle-symbol-size: calc(var(--step-1) * 1.635);
|
|
33
|
+
--form-toggle-switch-width-adjustment: 0.3rem;
|
|
34
|
+
|
|
35
|
+
--form-input-checkbox-radio-button-size: var(--step-1);
|
|
36
|
+
}
|
|
37
|
+
[data-size='normal'] {
|
|
38
|
+
--form-element-font-size: var(--step-2);
|
|
39
|
+
--form-placeholder-font-size: calc(var(--step-2) * 0.65);
|
|
40
|
+
--form-element-line-height: var(--step-2);
|
|
41
|
+
--form-icon-size: var(--step-2);
|
|
42
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.65);
|
|
43
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
44
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.65);
|
|
45
|
+
--form-input-border-radius: 0.4rem;
|
|
46
|
+
--form-icon-only-button-size: calc(var(--step-1) * 2.5);
|
|
47
|
+
--form-toggle-symbol-size: calc(var(--step-2) * 1.72);
|
|
48
|
+
--form-toggle-switch-width-adjustment: 0.2rem;
|
|
49
|
+
|
|
50
|
+
--form-input-checkbox-radio-button-size: var(--step-2);
|
|
51
|
+
}
|
|
52
|
+
[data-size='medium'] {
|
|
53
|
+
--form-element-font-size: var(--step-3);
|
|
54
|
+
--form-placeholder-font-size: calc(var(--step-3) * 0.65);
|
|
55
|
+
--form-element-line-height: var(--step-3);
|
|
56
|
+
--form-icon-size: var(--step-3);
|
|
57
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.65);
|
|
58
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
59
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.65);
|
|
60
|
+
--form-input-border-radius: 0.4rem;
|
|
61
|
+
--form-icon-only-button-size: calc(var(--step-1) * 2.75);
|
|
62
|
+
--form-toggle-symbol-size: calc(var(--step-3) * 1.78);
|
|
63
|
+
--form-toggle-switch-width-adjustment: 0rem;
|
|
64
|
+
|
|
65
|
+
--form-input-checkbox-radio-button-size: var(--step-3);
|
|
66
|
+
}
|
|
67
|
+
[data-size='large'] {
|
|
68
|
+
--form-element-font-size: var(--step-4);
|
|
69
|
+
--form-placeholder-font-size: calc(var(--step-4) * 0.65);
|
|
70
|
+
--form-element-line-height: var(--step-4);
|
|
71
|
+
--form-icon-size: var(--step-4);
|
|
72
|
+
--form-button-padding-inline: calc(var(--step-0) * 1.75);
|
|
73
|
+
--form-text-padding-inline: calc(var(--step-0) * 0.25);
|
|
74
|
+
--form-button-icon-gap: calc(var(--step-0) * 0.75);
|
|
75
|
+
--form-input-border-radius: 0.4rem;
|
|
76
|
+
--form-icon-only-button-size: calc(var(--step-1) * 3);
|
|
77
|
+
--form-toggle-symbol-size: calc(var(--step-4) * 1.816);
|
|
78
|
+
--form-toggle-switch-width-adjustment: -0.2rem;
|
|
79
|
+
|
|
80
|
+
--form-input-checkbox-radio-button-size: var(--step-4);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -2,68 +2,10 @@
|
|
|
2
2
|
--font-size: 1.6rem;
|
|
3
3
|
--line-height: calc((var(--font-size) * 2) - 1rem);
|
|
4
4
|
|
|
5
|
-
--input-border-radius: 0.4rem;
|
|
6
|
-
--input-border-width-thin: 0.1rem;
|
|
7
|
-
--input-border-width-default: 0.2rem;
|
|
8
|
-
--input-border-width-thick: 0.3rem;
|
|
9
|
-
|
|
10
|
-
--input-outline-radius: 0.4rem;
|
|
11
|
-
--input-outline-width-thin: 0.1rem;
|
|
12
|
-
--input-outline-width-default: 0.2rem;
|
|
13
|
-
--input-outline-width-thick: 0.3rem;
|
|
14
|
-
|
|
15
5
|
--font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
|
16
6
|
|
|
17
7
|
--theme-error-surface: var(--red-12);
|
|
18
8
|
--theme-error-text: var(--red-0);
|
|
19
9
|
|
|
20
|
-
--theme-form-button-font-size-
|
|
21
|
-
--theme-form-button-font-size-small: 1.4rem;
|
|
22
|
-
--theme-form-button-font-size-normal: 1.6rem;
|
|
23
|
-
--theme-form-button-font-size-medium: 1.8rem;
|
|
24
|
-
--theme-form-button-font-size-large: 2rem;
|
|
25
|
-
|
|
26
|
-
/*
|
|
27
|
-
* Button Padding
|
|
28
|
-
*/
|
|
29
|
-
|
|
30
|
-
--theme-form-button-padding-block-x-small: 0.6rem;
|
|
31
|
-
--theme-form-button-padding-block-small: 0.8rem;
|
|
32
|
-
--theme-form-button-padding-block-normal: 1rem;
|
|
33
|
-
--theme-form-button-padding-block-medium: 1.2rem;
|
|
34
|
-
--theme-form-button-padding-block-large: 1.2rem;
|
|
35
|
-
|
|
36
|
-
--theme-form-button-padding-inline-x-small: 1.2rem;
|
|
37
|
-
--theme-form-button-padding-inline-small: 1.6rem;
|
|
38
|
-
--theme-form-button-padding-inline-normal: 2rem;
|
|
39
|
-
--theme-form-button-padding-inline-medium: 2.2rem;
|
|
40
|
-
--theme-form-button-padding-inline-large: 2.4rem;
|
|
41
|
-
|
|
42
|
-
/*
|
|
43
|
-
* Button Icon Sizes and Gap
|
|
44
|
-
*/
|
|
45
|
-
|
|
46
|
-
--theme-form-button-padding-inline-icon-only-x-small: 0.4rem;
|
|
47
|
-
--theme-form-button-padding-inline-icon-only-small: 0.6rem;
|
|
48
|
-
--theme-form-button-padding-inline-icon-only-normal: 0.8rem;
|
|
49
|
-
--theme-form-button-padding-inline-icon-only-medium: 1rem;
|
|
50
|
-
--theme-form-button-padding-inline-icon-only-large: 1.2rem;
|
|
51
|
-
|
|
52
|
-
--theme-form-button-padding-block-icon-only-x-small: 0.4rem;
|
|
53
|
-
--theme-form-button-padding-block-icon-only-small: 0.4rem;
|
|
54
|
-
--theme-form-button-padding-block-icon-only-normal: 0.6rem;
|
|
55
|
-
--theme-form-button-padding-block-icon-only-medium: 0.8rem;
|
|
56
|
-
--theme-form-button-padding-block-icon-only-large: 1rem;
|
|
57
|
-
|
|
58
|
-
--theme-form-button-icon-size-x-small: 1.8rem;
|
|
59
|
-
--theme-form-button-icon-size-small: 1.8rem;
|
|
60
|
-
--theme-form-button-icon-size-normal: 1.8rem;
|
|
61
|
-
--theme-form-button-icon-size-medium: 2rem;
|
|
62
|
-
--theme-form-button-icon-size-large: 2.2rem;
|
|
63
|
-
|
|
64
|
-
--theme-form-button-icon-gap-x-small: var(--theme-form-button-padding-inline-x-small);
|
|
65
|
-
--theme-form-button-icon-gap-small: var(--theme-form-button-padding-inline-small);
|
|
66
|
-
--theme-form-button-icon-gap-normal: var(--theme-form-button-padding-inline-normal);
|
|
67
|
-
--theme-form-button-icon-gap-medium: var(--theme-form-button-padding-inline-medium);
|
|
68
|
-
--theme-form-button-icon-gap-large: var(--theme-form-button-padding-inline-large);
|
|
10
|
+
--theme-form-button-font-size-normal: var(--form-element-font-size);
|
|
69
11
|
}
|
package/assets/styles/main.css
CHANGED
|
@@ -30,6 +30,18 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
|
30
30
|
|
|
31
31
|
<style scoped lang="css">
|
|
32
32
|
@layer popover-setup {
|
|
33
|
+
@position-try --right {
|
|
34
|
+
inset: auto;
|
|
35
|
+
top: anchor(top);
|
|
36
|
+
left: calc(anchor(right) + 10px);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
@position-try --left {
|
|
40
|
+
inset: auto;
|
|
41
|
+
top: anchor(top);
|
|
42
|
+
right: calc(anchor(left) + 10px);
|
|
43
|
+
}
|
|
44
|
+
|
|
33
45
|
.popover-trigger {
|
|
34
46
|
anchor-name: v-bind(anchorName);
|
|
35
47
|
}
|
|
@@ -40,12 +52,16 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
|
40
52
|
position-anchor: v-bind(anchorName);
|
|
41
53
|
margin: 0;
|
|
42
54
|
inset: auto;
|
|
43
|
-
|
|
44
|
-
left: anchor(right);
|
|
55
|
+
top: anchor(top);
|
|
56
|
+
left: calc(anchor(right) + 10px);
|
|
45
57
|
opacity: 0;
|
|
46
58
|
transition: opacity 200ms, display 200ms, overlay 200ms;
|
|
47
59
|
transition-behavior: allow-discrete;
|
|
48
60
|
|
|
61
|
+
/* position-try: flip-inline, flip-block, flip-block flip-inline; */
|
|
62
|
+
/* position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline; */
|
|
63
|
+
|
|
64
|
+
position-try: --right;
|
|
49
65
|
position-try-fallbacks: --left;
|
|
50
66
|
|
|
51
67
|
&:popover-open {
|
|
@@ -58,11 +74,5 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
|
58
74
|
}
|
|
59
75
|
}
|
|
60
76
|
}
|
|
61
|
-
|
|
62
|
-
@position-try --left {
|
|
63
|
-
inset: auto;
|
|
64
|
-
top: anchor(bottom);
|
|
65
|
-
right: anchor(right);
|
|
66
|
-
}
|
|
67
77
|
}
|
|
68
78
|
</style>
|
package/package.json
CHANGED