@natachah/vanilla-frontend 0.1.4 → 0.1.6
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/docs/main.js +2 -2
- package/docs/pages/base/typography.html +4 -0
- package/docs/pages/components/button.html +16 -2
- package/docs/pages/components/card.html +2 -2
- package/docs/pages/components/dialog.html +13 -11
- package/docs/pages/components/form.html +25 -1
- package/docs/pages/components/list.html +2 -2
- package/docs/pages/javascript/{sidebar.html → drawer.html} +17 -16
- package/docs/pages/javascript/scroll.html +4 -4
- package/docs/pages/javascript/tabpanel.html +2 -2
- package/docs/pages/javascript/toggle.html +3 -3
- package/docs/pages/javascript/tree.html +89 -72
- package/docs/pages/quick-start/customization.html +95 -86
- package/docs/pages/quick-start/installation.html +1 -0
- package/docs/pages/quick-start/mixins.html +7 -7
- package/docs/src/js/doc-code.js +1 -1
- package/docs/src/js/doc-layout.js +2 -2
- package/js/{_sidebar.js → _drawer.js} +16 -15
- package/js/_toggle.js +2 -0
- package/js/_tree.js +9 -3
- package/js/tests/{sidebar.test.js → drawer.test.js} +27 -27
- package/js/tests/tree.test.js +11 -10
- package/js/utilities/_cookie.js +2 -2
- package/natachah-vanilla-frontend-0.1.6.tgz +0 -0
- package/package.json +1 -1
- package/scss/abstracts/_mixins.scss +2 -0
- package/scss/base/_reset.scss +12 -26
- package/scss/base/_typography.scss +3 -2
- package/scss/components/_button.scss +1 -1
- package/scss/components/_dropdown.scss +1 -1
- package/scss/components/_form.scss +8 -8
- package/scss/themes/_root.scss +8 -0
- package/natachah-vanilla-frontend-0.1.4.tgz +0 -0
package/scss/base/_reset.scss
CHANGED
|
@@ -65,47 +65,33 @@ summary {
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
// Force the hidden
|
|
68
|
-
[hidden]
|
|
68
|
+
[hidden=true],
|
|
69
|
+
[hidden=""] {
|
|
69
70
|
display: none !important;
|
|
70
71
|
}
|
|
71
72
|
|
|
73
|
+
// Change cursor for item with aria-control or data-handle
|
|
74
|
+
[aria-controls]:not(:has([data-handle])),
|
|
75
|
+
[data-handle] {
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
}
|
|
78
|
+
|
|
72
79
|
// Change cursor for draggable
|
|
73
80
|
[draggable] {
|
|
74
81
|
|
|
75
|
-
&:not(:has([data-handle])),
|
|
76
|
-
[data-handle] {
|
|
82
|
+
&:not(:has([data-handle=sortable])),
|
|
83
|
+
[data-handle=sortable] {
|
|
77
84
|
cursor: grab;
|
|
78
85
|
}
|
|
79
86
|
|
|
80
87
|
&[aria-grabbed=true],
|
|
81
|
-
&[aria-grabbed=true] [data-handle] {
|
|
88
|
+
&[aria-grabbed=true] [data-handle=sortable] {
|
|
82
89
|
cursor: grabbing;
|
|
83
90
|
}
|
|
84
91
|
|
|
85
92
|
}
|
|
86
93
|
|
|
87
|
-
//
|
|
88
|
-
[role=tree],
|
|
89
|
-
[role=treegrid] {
|
|
90
|
-
|
|
91
|
-
[aria-expanded]:not(:has([data-handle])),
|
|
92
|
-
[data-handle] {
|
|
93
|
-
cursor: pointer;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
@media screen and (prefers-reduced-motion: no-preference) {
|
|
97
|
-
[data-handle] > svg {
|
|
98
|
-
transition: all .25s ease-in-out;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
[aria-expanded=true] > [data-handle] > svg {
|
|
103
|
-
transform: rotate(90deg);
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
// Reduce animation on scroll for #target
|
|
94
|
+
// Reduce animation on scroll for #target + data-handle SVG
|
|
109
95
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
110
96
|
:has(:target) {
|
|
111
97
|
scroll-behavior: smooth;
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
a
|
|
22
|
+
a,
|
|
23
|
+
button[role=link] {
|
|
23
24
|
|
|
24
25
|
cursor: pointer;
|
|
25
26
|
text-decoration: var(--anchor-decoration, var(--decoration));
|
|
@@ -41,7 +42,7 @@ a {
|
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
&:disabled,
|
|
44
|
-
&:not([href]) {
|
|
45
|
+
&:is(a):not([href]) {
|
|
45
46
|
pointer-events: none;
|
|
46
47
|
opacity: var(--anchor-disabled-opacity, var(--disabled-opacity));
|
|
47
48
|
}
|
|
@@ -55,7 +55,7 @@ $customDropdownProperties: map.merge(default.$item-properties, $customDropdown);
|
|
|
55
55
|
top: calc(100% + var(--dropdown-offset, .5rem));
|
|
56
56
|
|
|
57
57
|
// Simple bloc
|
|
58
|
-
&:not(ul,
|
|
58
|
+
&:not(ul, ol) {
|
|
59
59
|
@include as-item('dropdown', (), $customDropdownProperties);
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -60,11 +60,11 @@ select {
|
|
|
60
60
|
|
|
61
61
|
[type=date],
|
|
62
62
|
[type=datetime-local] {
|
|
63
|
-
background-image:
|
|
63
|
+
background-image: var(--icon-date);
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
[type=time] {
|
|
67
|
-
background-image:
|
|
67
|
+
background-image: var(--icon-time);
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
@-moz-document url-prefix() {
|
|
@@ -86,7 +86,7 @@ select {
|
|
|
86
86
|
|
|
87
87
|
[type=file] {
|
|
88
88
|
|
|
89
|
-
background-image:
|
|
89
|
+
background-image: var(--icon-file);
|
|
90
90
|
|
|
91
91
|
// Hide the default button, and make it look like a default input
|
|
92
92
|
&::file-selector-button {
|
|
@@ -99,7 +99,7 @@ select {
|
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
select {
|
|
102
|
-
background-image:
|
|
102
|
+
background-image: var(--icon-select);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
[type=color] {
|
|
@@ -116,7 +116,7 @@ select {
|
|
|
116
116
|
width: $size;
|
|
117
117
|
border: none;
|
|
118
118
|
border-radius: $size;
|
|
119
|
-
box-shadow: calc(-
|
|
119
|
+
box-shadow: calc(-1000px - $size / 2) 0 0 1000px color-mix(in srgb, var(--range-color, currentColor), transparent 75%);
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
padding: calc($size / 2) 0;
|
|
@@ -171,14 +171,14 @@ select {
|
|
|
171
171
|
|
|
172
172
|
&:checked {
|
|
173
173
|
background-size: 50%;
|
|
174
|
-
background-image:
|
|
174
|
+
background-image: var(--icon-radio);
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
[type=checkbox]:not([role=switch]):checked {
|
|
180
180
|
background-size: 100%;
|
|
181
|
-
background-image:
|
|
181
|
+
background-image: var(--icon-check);
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
|
|
@@ -189,7 +189,7 @@ select {
|
|
|
189
189
|
background-position: .125em center;
|
|
190
190
|
background-size: auto calc(100% - .25em);
|
|
191
191
|
background-color: var(--form-background, rgba(black, 25%));
|
|
192
|
-
background-image:
|
|
192
|
+
background-image: var(--icon-switch);
|
|
193
193
|
|
|
194
194
|
&:checked {
|
|
195
195
|
background-position: calc(100% - .125em) center;
|
package/scss/themes/_root.scss
CHANGED
|
@@ -66,4 +66,12 @@
|
|
|
66
66
|
// Contrasts
|
|
67
67
|
--color-warning-contrast: black;
|
|
68
68
|
|
|
69
|
+
// Icons
|
|
70
|
+
--icon-date: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>');
|
|
71
|
+
--icon-time: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/></svg>');
|
|
72
|
+
--icon-file: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/></svg>');
|
|
73
|
+
--icon-select: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
|
|
74
|
+
--icon-radio: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8"/></svg>');
|
|
75
|
+
--icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/></svg>');
|
|
76
|
+
--icon-switch: var(--icon-radio);
|
|
69
77
|
}
|
|
Binary file
|