@natachah/vanilla-frontend 0.1.0 → 0.1.1
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/.gitlab-ci.yml +2 -0
- package/docs/pages/base/typography.html +0 -14
- package/docs/pages/components/dropdown.html +3 -9
- package/docs/pages/components/list.html +56 -23
- package/docs/pages/quick-start/mixins.html +1 -1
- package/docs/src/js/doc-layout.js +1 -1
- package/natachah-vanilla-frontend-0.1.1.tgz +0 -0
- package/package.json +3 -2
- package/scss/abstracts/_mixins.scss +12 -24
package/.gitlab-ci.yml
CHANGED
|
@@ -33,15 +33,6 @@
|
|
|
33
33
|
<h6>Heading 6</h6>
|
|
34
34
|
</doc-demo>
|
|
35
35
|
|
|
36
|
-
<p>You can also group them inside a <code><hgroup></code> tag.</p>
|
|
37
|
-
|
|
38
|
-
<doc-demo>
|
|
39
|
-
<hgroup>
|
|
40
|
-
<h2>Frankenstein</h2>
|
|
41
|
-
<p>Or the modern Prometheus</p>
|
|
42
|
-
</hgroup>
|
|
43
|
-
</doc-demo>
|
|
44
|
-
|
|
45
36
|
<div class="code-group">
|
|
46
37
|
<div role="tablist">
|
|
47
38
|
<button role="tab" aria-controls="html">HTML</button>
|
|
@@ -54,11 +45,6 @@
|
|
|
54
45
|
<h4>Heading 4</h4>
|
|
55
46
|
<h5>Heading 5</h5>
|
|
56
47
|
<h6>Heading 6</h6>
|
|
57
|
-
|
|
58
|
-
<hgroup>
|
|
59
|
-
<h2>Frankenstein</h2>
|
|
60
|
-
<p>Or the modern Prometheus</p>
|
|
61
|
-
</hgroup>
|
|
62
48
|
</doc-code>
|
|
63
49
|
<doc-code id="css" data-type="css" role="tabpanel">
|
|
64
50
|
--font-size-h*
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
|
|
95
95
|
<p>To work properly the <code><button></code> of the dropdown must have an <code>aria-controls="IdOfTheContent"</code>, an <code>aria-expanded</code> and an <code>aria-pressed</code> attributes.</p>
|
|
96
96
|
|
|
97
|
-
<p>You can also add some
|
|
97
|
+
<p>You can also add some <code><button></code> or <code><a role="button"></code> into the list to make them look as a vertical group.</p>
|
|
98
98
|
|
|
99
99
|
<doc-demo>
|
|
100
100
|
<div class="dropdown demo-dropdown">
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
<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"></path>
|
|
105
105
|
</svg>
|
|
106
106
|
</button>
|
|
107
|
-
<ul id="mySecondDropdown" tabindex="0"
|
|
107
|
+
<ul id="mySecondDropdown" tabindex="0" hidden>
|
|
108
108
|
<li><button>Button longer</button></li>
|
|
109
109
|
<li><button>Button</button></li>
|
|
110
110
|
<li><button>Button</button></li>
|
|
@@ -112,15 +112,9 @@
|
|
|
112
112
|
</div>
|
|
113
113
|
</doc-demo>
|
|
114
114
|
|
|
115
|
-
<h2>States</h2>
|
|
116
|
-
|
|
117
|
-
<p>The <code><button></code> inside the dropdown will work as the default button component.</p>
|
|
118
|
-
|
|
119
|
-
<p>If you add an <code><ul/ol></code> with some <code><a></code>, it will transform the links into items with all the default states (<code>:focus</code>, <code>:hover</code>, <code>:active</code> and <code>:disabled</code>).</p>
|
|
120
|
-
|
|
121
115
|
<h2>Variants</h2>
|
|
122
116
|
|
|
123
|
-
<p>You can make <code>.outline</code> and <code>.{COLOR}</code> variations on the
|
|
117
|
+
<p>You can make <code>.outline</code> and <code>.{COLOR}</code> variations on the children.</p>
|
|
124
118
|
|
|
125
119
|
<h3>Group</h3>
|
|
126
120
|
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
<ul class="list">
|
|
17
17
|
<li>List A</li>
|
|
18
18
|
<li>List B</li>
|
|
19
|
-
<li><
|
|
20
|
-
<li
|
|
21
|
-
<li><
|
|
19
|
+
<li><a href="#">List C</a></li>
|
|
20
|
+
<li>List D</li>
|
|
21
|
+
<li><span>List E</span> <button>button</button></li>
|
|
22
22
|
</ul>
|
|
23
23
|
</doc-demo>
|
|
24
24
|
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
<ul class="list">
|
|
33
33
|
<li>List A</li>
|
|
34
34
|
<li>List B</li>
|
|
35
|
-
<li><
|
|
36
|
-
<li
|
|
37
|
-
<li
|
|
35
|
+
<li><a href="#">List C</a></li>
|
|
36
|
+
<li>List D</li>
|
|
37
|
+
<li>List E</li>
|
|
38
38
|
</ul>
|
|
39
39
|
</doc-code>
|
|
40
40
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
@@ -49,6 +49,42 @@
|
|
|
49
49
|
--list-border-radius
|
|
50
50
|
--list-padding-inline
|
|
51
51
|
--list-padding-block
|
|
52
|
+
--list-text-align
|
|
53
|
+
</doc-code>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
<h2>Action list</h2>
|
|
57
|
+
|
|
58
|
+
<p>You can use some <b>button</b> components as <code><button></code> or <code><a role="button"></code> inside a list.</p>
|
|
59
|
+
<doc-demo>
|
|
60
|
+
<ul class="list">
|
|
61
|
+
<li><button>List A (button)</button></li>
|
|
62
|
+
<li><button disabled>List B (button disabled)</button></li>
|
|
63
|
+
<li>List C</li>
|
|
64
|
+
<li><a role="button" href="#">List D (link)</a></li>
|
|
65
|
+
<li><a role="button">List E (link disabled)</a></li>
|
|
66
|
+
</ul>
|
|
67
|
+
</doc-demo>
|
|
68
|
+
|
|
69
|
+
<div class="code-group">
|
|
70
|
+
<div role="tablist">
|
|
71
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
72
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
73
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
74
|
+
</div>
|
|
75
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
76
|
+
<ul class="list">
|
|
77
|
+
<li><button>List A</button></li>
|
|
78
|
+
<li><button disabled>List B</button></li>
|
|
79
|
+
<li>List C</li>
|
|
80
|
+
<li><a role="button" href="#">List D</a></li>
|
|
81
|
+
<li><a role="button">List E</a></li>
|
|
82
|
+
</ul>
|
|
83
|
+
</doc-code>
|
|
84
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
85
|
+
@use '@natachah/vanilla-frontend/scss/components/list';
|
|
86
|
+
</doc-code>
|
|
87
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
52
88
|
--list-transition
|
|
53
89
|
--list-decoration
|
|
54
90
|
--list-focus-size
|
|
@@ -65,22 +101,14 @@
|
|
|
65
101
|
</doc-code>
|
|
66
102
|
</div>
|
|
67
103
|
|
|
68
|
-
<h2>States</h2>
|
|
69
|
-
<p>If you add some <code><a></code> as direct child, it will transform the links into an interactive item with all the default states (<code>:focus</code>, <code>:hover</code>, <code>:active</code> and <code>:disabled</code>).</p>
|
|
70
|
-
|
|
71
|
-
<h3>Active</h3>
|
|
72
|
-
<p>Apply the <code>aria-pressed</code>, <code>aria-current</code>, or <code>aria-selected</code> attribute on the <code><a></code> tag to display the active.</p>
|
|
73
|
-
|
|
74
|
-
<h3>Disabled</h3>
|
|
75
|
-
<p>Remove the <code>href</code> attribute on <code><a></code> to display the disabled style.</p>
|
|
76
|
-
|
|
77
104
|
<h2>Variants</h2>
|
|
78
105
|
<h3>Outline</h3>
|
|
79
106
|
<p>You can create an outline variation by adding the class <code>.outline</code> on each children.</p>
|
|
80
107
|
<doc-demo>
|
|
81
108
|
<div class="list">
|
|
82
109
|
<div class="outline">List A</div>
|
|
83
|
-
<div><
|
|
110
|
+
<div><button class="outline">List B</button></div>
|
|
111
|
+
<div><a role="button" class="outline" href="#">List C</a></div>
|
|
84
112
|
</div>
|
|
85
113
|
</doc-demo>
|
|
86
114
|
|
|
@@ -92,12 +120,13 @@
|
|
|
92
120
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
93
121
|
<div class="list">
|
|
94
122
|
<div class="outline">List A</div>
|
|
95
|
-
<div><
|
|
123
|
+
<div><button class="outline">List B</button></div>
|
|
124
|
+
<div><a role="button" class="outline" href="#">List C</a></div>
|
|
96
125
|
</div>
|
|
97
126
|
</doc-code>
|
|
98
127
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
99
128
|
$outline-variations: (
|
|
100
|
-
|
|
129
|
+
list
|
|
101
130
|
);
|
|
102
131
|
</doc-code>
|
|
103
132
|
</div>
|
|
@@ -108,8 +137,10 @@
|
|
|
108
137
|
<div class="list">
|
|
109
138
|
<div class="primary">List A</div>
|
|
110
139
|
<div class="primary outline">List B</div>
|
|
111
|
-
<div><
|
|
112
|
-
<div><
|
|
140
|
+
<div><button class="primary">List C</button></div>
|
|
141
|
+
<div><button class="primary outline">List D</button></div>
|
|
142
|
+
<div><a role="button" class="primary" href="#">List E</a></div>
|
|
143
|
+
<div><a role="button" class="primary outline" href="#">List F</a></div>
|
|
113
144
|
</div>
|
|
114
145
|
</doc-demo>
|
|
115
146
|
|
|
@@ -122,13 +153,15 @@
|
|
|
122
153
|
<div class="list">
|
|
123
154
|
<div class="primary">List A</div>
|
|
124
155
|
<div class="primary outline">List B</div>
|
|
125
|
-
<div><
|
|
126
|
-
<div><
|
|
156
|
+
<div><button class="primary">List C</button></div>
|
|
157
|
+
<div><button class="primary outline">List D</button></div>
|
|
158
|
+
<div><a role="button" class="primary" href="#">List E</a></div>
|
|
159
|
+
<div><a role="button" class="primary outline" href="#">List F</a></div>
|
|
127
160
|
</div>
|
|
128
161
|
</doc-code>
|
|
129
162
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
130
163
|
$color-variations: (
|
|
131
|
-
|
|
164
|
+
list: (primary)
|
|
132
165
|
);
|
|
133
166
|
</doc-code>
|
|
134
167
|
</div>
|
|
@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
|
|
|
18
18
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
|
|
19
19
|
<path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
|
|
20
20
|
</svg>
|
|
21
|
-
0.1.
|
|
21
|
+
0.1.1
|
|
22
22
|
</span>
|
|
23
23
|
</li>
|
|
24
24
|
<li>
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@natachah/vanilla-frontend",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A vanilla frontend framework",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"html5",
|
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
"email": "info@natachaherth.ch"
|
|
15
15
|
},
|
|
16
16
|
"license": "MIT",
|
|
17
|
+
"readme": "README.md",
|
|
17
18
|
"scripts": {
|
|
18
19
|
"test": "vitest --coverage",
|
|
19
20
|
"code:build": "node esbuild.mjs",
|
|
@@ -29,7 +30,7 @@
|
|
|
29
30
|
"@testing-library/dom": "^9.3.4",
|
|
30
31
|
"@vitest/coverage-v8": "^1.3.1",
|
|
31
32
|
"autoprefixer": "^10.4.19",
|
|
32
|
-
"esbuild": "
|
|
33
|
+
"esbuild": "0.21.5",
|
|
33
34
|
"esbuild-sass-plugin": "^3.3.1",
|
|
34
35
|
"fast-glob": "^3.3.2",
|
|
35
36
|
"happy-dom": "^13.6.2",
|
|
@@ -123,56 +123,43 @@
|
|
|
123
123
|
}
|
|
124
124
|
|
|
125
125
|
> * {
|
|
126
|
-
|
|
127
126
|
position: relative;
|
|
128
127
|
margin: 0;
|
|
128
|
+
text-align: var(--list-text-align, left);
|
|
129
129
|
|
|
130
|
-
|
|
131
|
-
&:not(:has(> a:first-child:last-child, > button:first-child:last-child)) {
|
|
132
|
-
@include as-item($name, (), $properties);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
// Item with links
|
|
136
|
-
&:has(> a:first-child:last-child) > a {
|
|
130
|
+
&:has(a[role=button]:only-child, button:only-child) > * {
|
|
137
131
|
display: block;
|
|
132
|
+
width: 100%;
|
|
133
|
+
text-align: var(--list-text-align, left);
|
|
138
134
|
@include as-item($name, $states, $properties);
|
|
139
135
|
}
|
|
140
136
|
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
width: 100%;
|
|
144
|
-
text-align: left;
|
|
137
|
+
&:not(:has(a[role=button]:only-child, button:only-child)) {
|
|
138
|
+
@include as-item($name, (), $properties);
|
|
145
139
|
}
|
|
146
140
|
|
|
147
|
-
// Remove extra border
|
|
148
141
|
& + *,
|
|
149
|
-
& + * >
|
|
150
|
-
& + * > button {
|
|
142
|
+
& + * > :only-child {
|
|
151
143
|
border-top: none !important;
|
|
152
144
|
}
|
|
153
145
|
|
|
154
146
|
// Remove radius on middle child
|
|
155
147
|
&:not(:first-child, :last-child),
|
|
156
|
-
&:not(:first-child, :last-child) >
|
|
157
|
-
&:not(:first-child, :last-child) > button {
|
|
148
|
+
&:not(:first-child, :last-child) > :only-child {
|
|
158
149
|
border-radius: 0 !important;
|
|
159
150
|
}
|
|
160
151
|
|
|
161
|
-
// Remove
|
|
152
|
+
// Remove radius on first/last child
|
|
162
153
|
&:not(:only-child) {
|
|
163
154
|
|
|
164
|
-
// Remove radius bottom on first child
|
|
165
155
|
&:first-child,
|
|
166
|
-
&:first-child >
|
|
167
|
-
&:first-child > button {
|
|
156
|
+
&:first-child > :only-child {
|
|
168
157
|
border-end-start-radius: 0 !important;
|
|
169
158
|
border-end-end-radius: 0 !important;
|
|
170
159
|
}
|
|
171
160
|
|
|
172
|
-
// Remove radius top on last child
|
|
173
161
|
&:last-child,
|
|
174
|
-
&:last-child >
|
|
175
|
-
&:last-child > button {
|
|
162
|
+
&:last-child > :only-child {
|
|
176
163
|
border-start-start-radius: 0 !important;
|
|
177
164
|
border-start-end-radius: 0 !important;
|
|
178
165
|
}
|
|
@@ -180,6 +167,7 @@
|
|
|
180
167
|
}
|
|
181
168
|
|
|
182
169
|
}
|
|
170
|
+
|
|
183
171
|
}
|
|
184
172
|
|
|
185
173
|
/// Create a basic item with an header and a footer style
|