@natachah/vanilla-frontend 0.0.5 → 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.
Files changed (72) hide show
  1. package/.gitlab-ci.yml +9 -0
  2. package/docs/pages/{components → base}/media.html +2 -2
  3. package/docs/pages/{layout → base}/reset.html +2 -2
  4. package/docs/pages/{layout → base}/typography.html +2 -16
  5. package/docs/pages/components/badge.html +2 -2
  6. package/docs/pages/components/breadcrumb.html +1 -1
  7. package/docs/pages/components/button.html +2 -2
  8. package/docs/pages/components/card.html +1 -1
  9. package/docs/pages/components/dialog.html +1 -1
  10. package/docs/pages/components/disclosure.html +1 -1
  11. package/docs/pages/components/dropdown.html +5 -11
  12. package/docs/pages/components/form.html +2 -2
  13. package/docs/pages/components/list.html +57 -24
  14. package/docs/pages/components/loading.html +1 -1
  15. package/docs/pages/components/progress.html +1 -1
  16. package/docs/pages/components/slider.html +1 -1
  17. package/docs/pages/components/table.html +1 -1
  18. package/docs/pages/{layout → layouts}/grid.html +1 -1
  19. package/docs/pages/quick-start/conventions.html +7 -7
  20. package/docs/pages/quick-start/customization.html +59 -62
  21. package/docs/pages/quick-start/installation.html +31 -28
  22. package/docs/pages/quick-start/mixins.html +29 -11
  23. package/docs/src/js/demo.js +1 -1
  24. package/docs/src/js/doc-layout.js +9 -6
  25. package/docs/src/scss/demo.scss +2 -2
  26. package/docs/src/scss/layout.scss +1 -1
  27. package/docs/src/scss/style.scss +2 -2
  28. package/esbuild.mjs +1 -1
  29. package/js/_autofill.js +0 -1
  30. package/js/_check-all.js +0 -1
  31. package/js/_comfort.js +0 -1
  32. package/js/_consent.js +0 -1
  33. package/js/_dialog.js +0 -1
  34. package/js/_dropdown.js +0 -1
  35. package/js/_scroll.js +0 -1
  36. package/js/_sidebar.js +0 -1
  37. package/js/_slider.js +0 -1
  38. package/js/_sortable.js +0 -1
  39. package/js/_tabpanel.js +0 -1
  40. package/js/_toggle.js +0 -1
  41. package/js/_tree.js +0 -1
  42. package/js/utilities/_base-component.js +0 -1
  43. package/js/utilities/_cookie.js +0 -1
  44. package/js/utilities/_error.js +0 -1
  45. package/js/utilities/_form-helper.js +0 -1
  46. package/natachah-vanilla-frontend-0.1.1.tgz +0 -0
  47. package/package.json +2 -1
  48. package/scss/abstracts/_default.scss +21 -0
  49. package/scss/{utilities/_mixin.scss → abstracts/_mixins.scss} +61 -39
  50. package/scss/{variables/_setting.scss → abstracts/_options.scss} +5 -24
  51. package/scss/{_media.scss → base/_media.scss} +1 -2
  52. package/scss/{utilities → base}/_reset.scss +2 -3
  53. package/scss/{utilities → base}/_typography.scss +1 -2
  54. package/scss/base/index.scss +3 -0
  55. package/scss/{_badge.scss → components/_badge.scss} +5 -4
  56. package/scss/{_breadcrumb.scss → components/_breadcrumb.scss} +0 -1
  57. package/scss/{_button.scss → components/_button.scss} +2 -1
  58. package/scss/{_card.scss → components/_card.scss} +9 -8
  59. package/scss/{_dialog.scss → components/_dialog.scss} +7 -23
  60. package/scss/{_disclosure.scss → components/_disclosure.scss} +2 -1
  61. package/scss/{_dropdown.scss → components/_dropdown.scss} +7 -6
  62. package/scss/{_form.scss → components/_form.scss} +2 -1
  63. package/scss/{_group.scss → components/_group.scss} +3 -1
  64. package/scss/{_list.scss → components/_list.scss} +4 -3
  65. package/scss/{_loading.scss → components/_loading.scss} +0 -1
  66. package/scss/{_progress.scss → components/_progress.scss} +0 -1
  67. package/scss/{_slider.scss → components/_slider.scss} +0 -1
  68. package/scss/{_table.scss → components/_table.scss} +0 -1
  69. package/scss/components/index.scss +14 -0
  70. package/scss/{_grid.scss → layouts/_grid.scss} +1 -2
  71. package/scss/{variables → themes}/_root.scss +0 -1
  72. package/scss/vanilla-frontend.scss +19 -21
package/.gitlab-ci.yml CHANGED
@@ -3,6 +3,8 @@ image: node:latest
3
3
  before_script:
4
4
  - npm install
5
5
  - npm ci
6
+ - node -v
7
+ - npm -v
6
8
 
7
9
  stages:
8
10
  - test
@@ -20,9 +22,13 @@ pages:
20
22
  stage: build
21
23
  script:
22
24
  - npm run docs:build
25
+ - echo "Fichiers générés dans docs/dist :"
26
+ - ls -R docs/dist
23
27
  - rm -rf public
24
28
  - mkdir public
25
29
  - cp -a docs/dist/* public/
30
+ - echo "Fichiers dans le répertoire public :"
31
+ - ls -R public
26
32
  artifacts:
27
33
  paths:
28
34
  # The folder that contains the files to be exposed at the Page URL
@@ -37,4 +43,7 @@ publish-job:
37
43
  - if: $CI_COMMIT_REF_NAME == "production"
38
44
  script:
39
45
  - echo "//registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN}" > .npmrc
46
+ - echo "Fichiers dans le répertoire public avant publication :"
47
+ - ls -R public
48
+ - npm pack
40
49
  - npm publish --access public
package/docs/pages/{components → base}/media.html RENAMED
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Components ></title>
7
+ <title>Documentations: Base ></title>
8
8
  </head>
9
9
 
10
10
  <body data-preload>
@@ -28,7 +28,7 @@
28
28
  <img src="https://picsum.photos/400/330" srcset="https://picsum.photos/800/660 2x" alt="A random image from lorem picsum" title="This is my picture">
29
29
  </doc-code>
30
30
  <doc-code id="scss" data-type="scss" role="tabpanel">
31
- @import '@natachah/vanilla-frontend/scss/_media';
31
+ @use '@natachah/vanilla-frontend/scss/base/media';
32
32
  </doc-code>
33
33
  <doc-code id="css" data-type="css" role="tabpanel">
34
34
  --image-width
package/docs/pages/{layout → base}/reset.html RENAMED
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Layout > Reset</title>
7
+ <title>Documentations: Base > Reset</title>
8
8
  </head>
9
9
 
10
10
  <body data-preload>
@@ -31,7 +31,7 @@
31
31
  <p>To use it, import this file:</p>
32
32
 
33
33
  <doc-code data-type="scss">
34
- @import '@natachah/vanilla-frontend/scss/utilities/_reset';
34
+ @use '@natachah/vanilla-frontend/scss/base/reset';
35
35
  </doc-code>
36
36
 
37
37
  <h2>Preload</h2>
package/docs/pages/{layout → base}/typography.html RENAMED
@@ -4,7 +4,7 @@
4
4
  <head>
5
5
  <meta charset="UTF-8" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Layout > Typography</title>
7
+ <title>Documentations: Base > Typography</title>
8
8
  </head>
9
9
 
10
10
  <body data-preload>
@@ -17,7 +17,7 @@
17
17
  <p>To use it, import this file:</p>
18
18
 
19
19
  <doc-code data-type="scss">
20
- @import '@natachah/vanilla-frontend/scss/layout/_typography'
20
+ @use '@natachah/vanilla-frontend/scss/base/typography'
21
21
  </doc-code>
22
22
 
23
23
  <h2>Heading</h2>
@@ -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>&lt;hgroup&gt;</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*
package/docs/pages/components/badge.html CHANGED
@@ -28,7 +28,7 @@
28
28
  <span class="badge">Badge</span>
29
29
  </doc-code>
30
30
  <doc-code id="scss" data-type="scss" role="tabpanel">
31
- @import '@natachah/vanilla-frontend/scss/_badge';
31
+ @use '@natachah/vanilla-frontend/scss/components/badge';
32
32
  </doc-code>
33
33
  <doc-code id="css" data-type="css" role="tabpanel">
34
34
  --badge-color
@@ -143,7 +143,7 @@
143
143
  </div>
144
144
  </doc-code>
145
145
  <doc-code id="scss" data-type="scss" role="tabpanel">
146
- @import '@natachah/vanilla-frontend/scss/_group';
146
+ @use '@natachah/vanilla-frontend/scss/components/group';
147
147
  </doc-code>
148
148
  </div>
149
149
 
package/docs/pages/components/breadcrumb.html CHANGED
@@ -41,7 +41,7 @@
41
41
  </nav>
42
42
  </doc-code>
43
43
  <doc-code id="scss" data-type="scss" role="tabpanel">
44
- @import '@natachah/vanilla-frontend/scss/_breadcrumb';
44
+ @use '@natachah/vanilla-frontend/scss/components/breadcrumb';
45
45
  </doc-code>
46
46
  <doc-code id="css" data-type="css" role="tabpanel">
47
47
  --breadcrumb-divider
package/docs/pages/components/button.html CHANGED
@@ -29,7 +29,7 @@
29
29
  <a href="#" role="button">Link as button</a>
30
30
  </doc-code>
31
31
  <doc-code id="scss" data-type="scss" role="tabpanel">
32
- @import '@natachah/vanilla-frontend/scss/_button';
32
+ @use '@natachah/vanilla-frontend/scss/components/button';
33
33
  </doc-code>
34
34
  <doc-code id="css" data-type="css" role="tabpanel">
35
35
  --button-color
@@ -174,7 +174,7 @@
174
174
  </div>
175
175
  </doc-code>
176
176
  <doc-code id="scss" data-type="scss" role="tabpanel">
177
- @import '@natachah/vanilla-frontend/scss/_group';
177
+ @use '@natachah/vanilla-frontend/scss/components/group';
178
178
  </doc-code>
179
179
  </div>
180
180
 
package/docs/pages/components/card.html CHANGED
@@ -28,7 +28,7 @@
28
28
  <div class="card">Hello there !</div>
29
29
  </doc-code>
30
30
  <doc-code id="scss" data-type="scss" role="tabpanel">
31
- @import '@natachah/vanilla-frontend/scss/_card';
31
+ @use '@natachah/vanilla-frontend/scss/components/card';
32
32
  </doc-code>
33
33
  <doc-code id="css" data-type="css" role="tabpanel">
34
34
  --card-color
package/docs/pages/components/dialog.html CHANGED
@@ -48,7 +48,7 @@
48
48
  </dialog>
49
49
  </doc-code>
50
50
  <doc-code id="scss" data-type="scss" role="tabpanel">
51
- @import '@natachah/vanilla-frontend/scss/_dialog';
51
+ @use '@natachah/vanilla-frontend/scss/components/dialog';
52
52
  </doc-code>
53
53
  <doc-code id="css" data-type="css" role="tabpanel">
54
54
  --dialog-color
package/docs/pages/components/disclosure.html CHANGED
@@ -52,7 +52,7 @@
52
52
  </details>
53
53
  </doc-code>
54
54
  <doc-code id="scss" data-type="scss" role="tabpanel">
55
- @import '@natachah/vanilla-frontend/scss/_disclosure';
55
+ @use '@natachah/vanilla-frontend/scss/components/disclosure';
56
56
  </doc-code>
57
57
  <doc-code id="css" data-type="css" role="tabpanel">
58
58
  --disclosure-color
package/docs/pages/components/dropdown.html CHANGED
@@ -56,7 +56,7 @@
56
56
  </div>
57
57
  </doc-code>
58
58
  <doc-code id="scss" data-type="scss" role="tabpanel">
59
- @import '@natachah/vanilla-frontend/scss/_component';
59
+ @use '@natachah/vanilla-frontend/scss/components/component';
60
60
  </doc-code>
61
61
  <doc-code id="css" data-type="css" role="tabpanel">
62
62
  --dropdown-color
@@ -94,7 +94,7 @@
94
94
 
95
95
  <p>To work properly the <code>&lt;button&gt;</code> of the dropdown must have an <code>aria-controls=&quot;IdOfTheContent&quot;</code>, an <code>aria-expanded</code> and an <code>aria-pressed</code> attributes.</p>
96
96
 
97
- <p>You can also add some buttons into the list to make them look as a vertical group.</p>
97
+ <p>You can also add some <code>&lt;button&gt;</code> or <code>&lt;a role="button"&gt;</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" style="--button-background: var(--color-body);" hidden>
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>&lt;button&gt;</code> inside the dropdown will work as the default button component.</p>
118
-
119
- <p>If you add an <code>&lt;ul/ol&gt;</code> with some <code>&lt;a&gt;</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 <code>&lt;button&gt;</code>.</p>
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
 
@@ -189,7 +183,7 @@
189
183
  </div>
190
184
  </doc-code>
191
185
  <doc-code id="scss" data-type="scss" role="tabpanel">
192
- @import '@natachah/vanilla-frontend/scss/_group';
186
+ @use '@natachah/vanilla-frontend/scss/components/group';
193
187
  </doc-code>
194
188
  </div>
195
189
 
package/docs/pages/components/form.html CHANGED
@@ -34,7 +34,7 @@
34
34
  </small>
35
35
  </doc-code>
36
36
  <doc-code id="scss" data-type="scss" role="tabpanel">
37
- @import '@natachah/vanilla-frontend/scss/_form';
37
+ @use '@natachah/vanilla-frontend/scss/components/form';
38
38
  </doc-code>
39
39
  <doc-code id="css" data-type="css" role="tabpanel">
40
40
  --form-color
@@ -320,7 +320,7 @@
320
320
  </fieldset>
321
321
  </doc-code>
322
322
  <doc-code id="scss" data-type="scss" role="tabpanel">
323
- @import '@natachah/vanilla-frontend/scss/_group';
323
+ @use '@natachah/vanilla-frontend/scss/components/group';
324
324
  </doc-code>
325
325
  </div>
326
326
 
package/docs/pages/components/list.html CHANGED
@@ -16,9 +16,9 @@
16
16
  <ul class="list">
17
17
  <li>List A</li>
18
18
  <li>List B</li>
19
- <li><span>List C with <a href="#">link</a></span></li>
20
- <li><a>List D</a></li>
21
- <li><a href="#">List E</a></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,13 +32,13 @@
32
32
  <ul class="list">
33
33
  <li>List A</li>
34
34
  <li>List B</li>
35
- <li><span>List C with <a href="#">link</a></span></li>
36
- <li><a>List D</a></li>
37
- <li><a href="#">List E</a></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">
41
- @import '@natachah/vanilla-frontend/scss/_list';
41
+ @use '@natachah/vanilla-frontend/scss/components/list';
42
42
  </doc-code>
43
43
  <doc-code id="css" data-type="css" role="tabpanel">
44
44
  --list-color
@@ -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>&lt;button&gt;</code> or <code>&lt;a role="button"&gt;</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>&lt;a&gt;</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>&lt;a&gt;</code> tag to display the active.</p>
73
-
74
- <h3>Disabled</h3>
75
- <p>Remove the <code>href</code> attribute on <code>&lt;a&gt;</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><a class="outline">List B</a></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><a class="outline">List B</a></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
- list
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><a class="primary">List C</a></div>
112
- <div><a class="primary outline">List D</a></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><a class="primary">List C</a></div>
126
- <div><a class="primary outline">List D</a></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
- list: (primary)
164
+ list: (primary)
132
165
  );
133
166
  </doc-code>
134
167
  </div>
package/docs/pages/components/loading.html CHANGED
@@ -25,7 +25,7 @@
25
25
  <div aria-busy="true"></div>
26
26
  </doc-code>
27
27
  <doc-code id="scss" data-type="scss" role="tabpanel">
28
- @import '@natachah/vanilla-frontend/scss/_loading';
28
+ @use '@natachah/vanilla-frontend/scss/components/loading';
29
29
  </doc-code>
30
30
  </div>
31
31
 
package/docs/pages/components/progress.html CHANGED
@@ -28,7 +28,7 @@
28
28
  <progress id="download" value="50" max="100">50%</progress>
29
29
  </doc-code>
30
30
  <doc-code id="scss" data-type="scss" role="tabpanel">
31
- @import '@natachah/vanilla-frontend/scss/_progress';
31
+ @use '@natachah/vanilla-frontend/scss/components/progress';
32
32
  </doc-code>
33
33
  <doc-code id="css" data-type="css" role="tabpanel">
34
34
  --progress-width
package/docs/pages/components/slider.html CHANGED
@@ -41,7 +41,7 @@
41
41
  </div>
42
42
  </doc-code>
43
43
  <doc-code id="scss" data-type="scss" role="tabpanel">
44
- @import '@natachah/vanilla-frontend/scss/_slider';
44
+ @use '@natachah/vanilla-frontend/scss/components/slider';
45
45
  </doc-code>
46
46
  <doc-code id="css" data-type="css" role="tabpanel">
47
47
  --slider-columns
package/docs/pages/components/table.html CHANGED
@@ -81,7 +81,7 @@
81
81
  </table>
82
82
  </doc-code>
83
83
  <doc-code id="scss" data-type="scss" role="tabpanel">
84
- @import '@natachah/vanilla-frontend/scss/_table';
84
+ @use '@natachah/vanilla-frontend/scss/components/table';
85
85
  </doc-code>
86
86
  <doc-code id="css" data-type="css" role="tabpanel">
87
87
  --table-padding-inline
package/docs/pages/{layout → layouts}/grid.html RENAMED
@@ -17,7 +17,7 @@
17
17
  <p>To use it, import this file:</p>
18
18
 
19
19
  <doc-code data-type="scss">
20
- @import '@natachah/vanilla-frontend/scss/layout/_grid';
20
+ @use '@natachah/vanilla-frontend/scss/layouts/grid';
21
21
  </doc-code>
22
22
 
23
23
  <p>There is two types of grid, the basic and the flexible.</p>
package/docs/pages/quick-start/conventions.html CHANGED
@@ -51,16 +51,16 @@
51
51
 
52
52
  <doc-code data-type="css">
53
53
  :root {
54
- --global-property: red;
54
+ --global-property: red;
55
55
  }
56
56
 
57
57
  .my-class {
58
- background-color: var(--global-property)
58
+ background-color: var(--global-property)
59
59
  }
60
60
 
61
61
  #myId {
62
- --_private-property: green;
63
- background-color: var(--_private-property);
62
+ --_private-property: green;
63
+ background-color: var(--_private-property);
64
64
  }
65
65
  </doc-code>
66
66
 
@@ -78,7 +78,7 @@
78
78
  /// @access public
79
79
  ///
80
80
  @mixin something($name){
81
- color: $name
81
+ color: $name
82
82
  }
83
83
  </doc-code>
84
84
 
@@ -100,8 +100,8 @@
100
100
  * @returns {number} - The area of the rectangle
101
101
  */
102
102
  function calculate(length, width) {
103
- const myVariable = 'nothing'
104
- return length * height
103
+ const myVariable = 'nothing'
104
+ return length * height
105
105
  }
106
106
  </doc-code>
107
107