@natachah/vanilla-frontend 0.0.2 → 0.0.4
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/pages/components/breadcrumb.html +67 -0
- package/docs/pages/components/dropdown.html +21 -3
- package/docs/pages/javascript/sidebar.html +6 -10
- package/docs/pages/javascript/tabpanel.html +89 -0
- package/docs/pages/quick-start/installation.html +3 -3
- package/docs/src/js/doc-layout.js +2 -1
- package/docs/src/scss/layout.scss +8 -0
- package/js/_autofill.js +1 -1
- package/js/_check-all.js +1 -1
- package/js/_dialog.js +1 -1
- package/js/_dropdown.js +5 -6
- package/js/_scroll.js +1 -1
- package/js/_sidebar.js +6 -7
- package/js/_slider.js +1 -1
- package/js/_sortable.js +4 -1
- package/js/_tabpanel.js +1 -1
- package/js/_toggle.js +6 -8
- package/js/_tree.js +4 -5
- package/js/tests/dropdown.test.js +1 -1
- package/js/tests/sortable.test.js +2 -1
- package/js/utilities/_base-component.js +2 -2
- package/package.json +1 -1
- package/scss/_breadcrumb.scss +45 -0
- package/scss/_button.scss +1 -0
- package/scss/utilities/_mixin.scss +15 -5
- package/scss/vanilla-frontend.scss +1 -1
- package/docs/pages/components/nav.html +0 -119
- package/scss/_nav.scss +0 -72
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Components ></title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h2>Breadcrumb</h2>
|
|
14
|
+
<p>To create a breadcrumb navigation, always use <code><ol></code> with a class <code>.breadcrumb</code> inside a <code><nav></code> tag.</p>
|
|
15
|
+
<p>The breadcrumb will automatically be distributed horizontally.</p>
|
|
16
|
+
<doc-demo>
|
|
17
|
+
<nav aria-label="Breadcrumb navigaton">
|
|
18
|
+
<ol class="breadcrumb">
|
|
19
|
+
<li><a href="#">One</a></li>
|
|
20
|
+
<li><a href="#">Two</a></li>
|
|
21
|
+
<li><a href="#">Three</a></li>
|
|
22
|
+
<li aria-current="location">Four</li>
|
|
23
|
+
</ol>
|
|
24
|
+
</nav>
|
|
25
|
+
</doc-demo>
|
|
26
|
+
<div class="code-group">
|
|
27
|
+
<div role="tablist">
|
|
28
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
29
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
30
|
+
|
|
31
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
32
|
+
</div>
|
|
33
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
34
|
+
<nav aria-label="Breadcrumb navigaton">
|
|
35
|
+
<ol class="breadcrumb">
|
|
36
|
+
<li><a href="#">One</a></li>
|
|
37
|
+
<li><a href="#">Two</a></li>
|
|
38
|
+
<li><a href="#">Three</a></li>
|
|
39
|
+
<li aria-current="location">Four</li>
|
|
40
|
+
</ol>
|
|
41
|
+
</nav>
|
|
42
|
+
</doc-code>
|
|
43
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
44
|
+
@import '@natachah/vanilla-frontend/scss/_breadcrumb';
|
|
45
|
+
</doc-code>
|
|
46
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
47
|
+
--breadcrumb-divider
|
|
48
|
+
--breadcrumb-divider-color
|
|
49
|
+
--breadcrumb-gap
|
|
50
|
+
--breadcrumb-decoration
|
|
51
|
+
--breadcrumb-color
|
|
52
|
+
--breadcrumb-hover-color
|
|
53
|
+
--breadcrumb-active-color
|
|
54
|
+
--breadcrumb-disabled-opacity
|
|
55
|
+
</doc-code>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<blockquote class="warning">
|
|
59
|
+
<p>The custom properties for the breadcrumb is overriding the default ones in the typography setting.</p>
|
|
60
|
+
</blockquote>
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
</doc-layout>
|
|
64
|
+
<script type="module" src="/main.js"></script>
|
|
65
|
+
</body>
|
|
66
|
+
|
|
67
|
+
</html>
|
|
@@ -94,6 +94,24 @@
|
|
|
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 buttons into the list to make them look as a vertical group.</p>
|
|
98
|
+
|
|
99
|
+
<doc-demo>
|
|
100
|
+
<div class="dropdown demo-dropdown">
|
|
101
|
+
<button aria-controls="mySecondDropdown" aria-expanded="false" aria-pressed="false">
|
|
102
|
+
Dropdown
|
|
103
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
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
|
+
</svg>
|
|
106
|
+
</button>
|
|
107
|
+
<ul id="mySecondDropdown" tabindex="0" style="--button-background: var(--color-body);" hidden>
|
|
108
|
+
<li><button>Button longer</button></li>
|
|
109
|
+
<li><button>Button</button></li>
|
|
110
|
+
<li><button>Button</button></li>
|
|
111
|
+
</ul>
|
|
112
|
+
</div>
|
|
113
|
+
</doc-demo>
|
|
114
|
+
|
|
97
115
|
<h2>States</h2>
|
|
98
116
|
|
|
99
117
|
<p>The <code><button></code> inside the dropdown will work as the default button component.</p>
|
|
@@ -208,7 +226,7 @@
|
|
|
208
226
|
|
|
209
227
|
<doc-code data-type="js">
|
|
210
228
|
new Toggle(myDropdown, {
|
|
211
|
-
|
|
229
|
+
closable:false
|
|
212
230
|
})
|
|
213
231
|
</doc-code>
|
|
214
232
|
|
|
@@ -243,8 +261,8 @@
|
|
|
243
261
|
<doc-code data-type="js">
|
|
244
262
|
const dropdown = document.getElementById('myDropdown')
|
|
245
263
|
dropdown.addEventListener('dropdown:changed', (e) => {
|
|
246
|
-
|
|
247
|
-
|
|
264
|
+
const value = e.detail.isOpen
|
|
265
|
+
console.log(value)
|
|
248
266
|
})
|
|
249
267
|
</doc-code>
|
|
250
268
|
|
|
@@ -24,16 +24,12 @@
|
|
|
24
24
|
<button role="tab" aria-controls="js">JS</button>
|
|
25
25
|
</div>
|
|
26
26
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
My sidebar
|
|
34
|
-
</aside>
|
|
35
|
-
</div>
|
|
36
|
-
</dialog>
|
|
27
|
+
<div id="backdrop"></div>
|
|
28
|
+
<button aria-expanded="false" aria-pressed="false" aria-controls="sidebar">Toggle</button>
|
|
29
|
+
<aside id="sidebar" tabindex="0" hidden>
|
|
30
|
+
<button aria-expanded="false" aria-pressed="false" aria-controls="sidebar">Toggle</button>
|
|
31
|
+
My sidebar
|
|
32
|
+
</aside>
|
|
37
33
|
</doc-code>
|
|
38
34
|
<doc-code id="js" data-type="js" role="tabpanel">
|
|
39
35
|
import Sidebar from '@natachah/vanilla-frontend/js/utilities/_sidebar.js'
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Javascript > Tabpanel</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Tabpanel</h1>
|
|
14
|
+
<p>The tabpanel component make you able to make some elements visible by some <code><button></code>.</p>
|
|
15
|
+
<p>The button must have an <code>aria-controls="IdOfElement"</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<div class="code-group">
|
|
20
|
+
<div role="tablist">
|
|
21
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
22
|
+
<button role="tab" aria-controls="js">JS</button>
|
|
23
|
+
</div>
|
|
24
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
25
|
+
<div id="myPanel">
|
|
26
|
+
<div role="tablist">
|
|
27
|
+
<button role="tab" aria-controls="one">One</button>
|
|
28
|
+
<button role="tab" aria-controls="two">Two</button>
|
|
29
|
+
</div>
|
|
30
|
+
<div id="one" role="tabpanel">
|
|
31
|
+
This is the first panel
|
|
32
|
+
</div>
|
|
33
|
+
<div id="two" role="tabpanel">
|
|
34
|
+
This is the seconde panel
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</doc-code>
|
|
38
|
+
<doc-code id="js" data-type="js" role="tabpanel">
|
|
39
|
+
import Tabpanel from '@natachah/vanilla-frontend/js/_tabpanel.js'
|
|
40
|
+
const tabpanel = document.getElementById('myPanel')
|
|
41
|
+
if (tabpanel) new Tabpanel(tabpanel)
|
|
42
|
+
</doc-code>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<blockquote class="tip">
|
|
46
|
+
<p>These website use the Tabpanel to show you the code of each component !</p>
|
|
47
|
+
</blockquote>
|
|
48
|
+
|
|
49
|
+
<h2>Javascript</h2>
|
|
50
|
+
<p>To enable this component you need to import the javascript file and create a new Tabpanel object.</p>
|
|
51
|
+
|
|
52
|
+
<h3>Events</h3>
|
|
53
|
+
<table>
|
|
54
|
+
<thead>
|
|
55
|
+
<tr>
|
|
56
|
+
<th>Event</th>
|
|
57
|
+
<th>Description</th>
|
|
58
|
+
<th>Value</th>
|
|
59
|
+
</tr>
|
|
60
|
+
</thead>
|
|
61
|
+
<tbody>
|
|
62
|
+
<tr>
|
|
63
|
+
<td data-label="Event">
|
|
64
|
+
<p>tabpanel:changed</p>
|
|
65
|
+
</td>
|
|
66
|
+
<td data-label="Description">
|
|
67
|
+
<p>This event is fired when the panel as been changed</p>
|
|
68
|
+
</td>
|
|
69
|
+
<td data-label="Value">
|
|
70
|
+
<p><code>current</code> as a <code>HTMLElement</code> of the current button</p>
|
|
71
|
+
</td>
|
|
72
|
+
</tr>
|
|
73
|
+
</tbody>
|
|
74
|
+
</table>
|
|
75
|
+
|
|
76
|
+
<doc-code data-type="js">
|
|
77
|
+
const myPanel = document.getElementById('myPanel')
|
|
78
|
+
myPanel.addEventListener('tabpanel:changed', (e) => {
|
|
79
|
+
const thecurrentButton = e.detail.current
|
|
80
|
+
console.log('It has changed !')
|
|
81
|
+
})
|
|
82
|
+
</doc-code>
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
</doc-layout>
|
|
86
|
+
<script type="module" src="/main.js"></script>
|
|
87
|
+
</body>
|
|
88
|
+
|
|
89
|
+
</html>
|
|
@@ -30,14 +30,15 @@
|
|
|
30
30
|
// Can be overide by your own variables files
|
|
31
31
|
@import '@natachah/vanilla-frontend/scss/variables/_root';
|
|
32
32
|
@import '@natachah/vanilla-frontend/scss/variables/_setting';
|
|
33
|
-
|
|
33
|
+
|
|
34
34
|
// Utilities
|
|
35
35
|
@import '@natachah/vanilla-frontend/scss/utilities/_mixin';
|
|
36
36
|
@import '@natachah/vanilla-frontend/scss/utilities/_reset';
|
|
37
37
|
@import '@natachah/vanilla-frontend/scss/utilities/_typography';
|
|
38
|
-
|
|
38
|
+
|
|
39
39
|
// Components
|
|
40
40
|
@import '@natachah/vanilla-frontend/scss/_badge';
|
|
41
|
+
@import '@natachah/vanilla-frontend/scss/_breadcrumb';
|
|
41
42
|
@import '@natachah/vanilla-frontend/scss/_button';
|
|
42
43
|
@import '@natachah/vanilla-frontend/scss/_card';
|
|
43
44
|
@import '@natachah/vanilla-frontend/scss/_dialog';
|
|
@@ -49,7 +50,6 @@
|
|
|
49
50
|
@import '@natachah/vanilla-frontend/scss/_list';
|
|
50
51
|
@import '@natachah/vanilla-frontend/scss/_loading';
|
|
51
52
|
@import '@natachah/vanilla-frontend/scss/_media';
|
|
52
|
-
@import '@natachah/vanilla-frontend/scss/_nav';
|
|
53
53
|
@import '@natachah/vanilla-frontend/scss/_progress';
|
|
54
54
|
@import '@natachah/vanilla-frontend/scss/_slider';
|
|
55
55
|
@import '@natachah/vanilla-frontend/scss/_table';
|
|
@@ -64,6 +64,7 @@ class DocLayout extends HTMLElement {
|
|
|
64
64
|
<h2>Components</h2>
|
|
65
65
|
<ul>
|
|
66
66
|
<li><a href="/pages/components/badge.html">Badge</a></li>
|
|
67
|
+
<li><a href="/pages/components/breadcrumb.html">Breadcrumb</a></li>
|
|
67
68
|
<li><a href="/pages/components/button.html">Button</a></li>
|
|
68
69
|
<li><a href="/pages/components/card.html">Card</a></li>
|
|
69
70
|
<li><a href="/pages/components/dialog.html">Dialog</a></li>
|
|
@@ -73,7 +74,6 @@ class DocLayout extends HTMLElement {
|
|
|
73
74
|
<li><a href="/pages/components/list.html">List</a></li>
|
|
74
75
|
<li><a href="/pages/components/loading.html">Loading</a></li>
|
|
75
76
|
<li><a href="/pages/components/media.html">Media</a></li>
|
|
76
|
-
<li><a href="/pages/components/nav.html">Nav</a></li>
|
|
77
77
|
<li><a href="/pages/components/progress.html">Progress</a></li>
|
|
78
78
|
<li><a href="/pages/components/slider.html">Slider</a></li>
|
|
79
79
|
<li><a href="/pages/components/table.html">Table</a></li>
|
|
@@ -89,6 +89,7 @@ class DocLayout extends HTMLElement {
|
|
|
89
89
|
<li><a href="/pages/javascript/scroll.html">Scroll</a></li>
|
|
90
90
|
<li><a href="/pages/javascript/sidebar.html">Sidebar</a></li>
|
|
91
91
|
<li><a href="/pages/javascript/sortable.html">Sortable</a></li>
|
|
92
|
+
<li><a href="/pages/javascript/tabpanel.html">Tabpanel</a></li>
|
|
92
93
|
<li><a href="/pages/javascript/toggle.html">Toggle</a></li>
|
|
93
94
|
<li><a href="/pages/javascript/tree.html">Tree</a></li>
|
|
94
95
|
</ul>
|
package/js/_autofill.js
CHANGED
|
@@ -24,7 +24,7 @@ export default class Autofill extends BaseComponent {
|
|
|
24
24
|
constructor(el, options = {}) {
|
|
25
25
|
|
|
26
26
|
// Run the SUPER constructor from BaseComponent
|
|
27
|
-
super(el, options)
|
|
27
|
+
super(el, options, 'autofill')
|
|
28
28
|
|
|
29
29
|
// Check for errors
|
|
30
30
|
if (el.tagName !== 'SELECT' && el.tagName !== 'INPUT') throw new Error(ErrorMessage.typeOf('el', 'input|select'))
|
package/js/_check-all.js
CHANGED
|
@@ -23,7 +23,7 @@ export default class CheckAll extends BaseComponent {
|
|
|
23
23
|
constructor(el, options = {}) {
|
|
24
24
|
|
|
25
25
|
// Run the SUPER constructor from BaseComponent
|
|
26
|
-
super(el, options)
|
|
26
|
+
super(el, options, 'checkall')
|
|
27
27
|
|
|
28
28
|
// Define the properties
|
|
29
29
|
this._checkboxes = document.querySelectorAll(`input[type="checkbox"][name="${this._element.value}"]`)
|
package/js/_dialog.js
CHANGED
|
@@ -24,7 +24,7 @@ export default class Dialog extends BaseComponent {
|
|
|
24
24
|
constructor(el, options = {}) {
|
|
25
25
|
|
|
26
26
|
// Run the SUPER constructor from BaseComponent
|
|
27
|
-
super(el, options)
|
|
27
|
+
super(el, options, 'dialog')
|
|
28
28
|
|
|
29
29
|
// Define the properties
|
|
30
30
|
this._isModal = Boolean(this._element.getAttribute('aria-modal'))
|
package/js/_dropdown.js
CHANGED
|
@@ -33,7 +33,7 @@ export default class Dropdown extends BaseComponent {
|
|
|
33
33
|
if (options.closable && typeof options.closable !== 'boolean') throw new Error(ErrorMessage.typeOf('options.closable', 'boolean'))
|
|
34
34
|
|
|
35
35
|
// Run the SUPER constructor from BaseComponent
|
|
36
|
-
super(el, options)
|
|
36
|
+
super(el, options, 'dropdown')
|
|
37
37
|
|
|
38
38
|
// Define the properties
|
|
39
39
|
this._button = this._element.querySelector('[aria-controls]')
|
|
@@ -52,12 +52,12 @@ export default class Dropdown extends BaseComponent {
|
|
|
52
52
|
#init() {
|
|
53
53
|
|
|
54
54
|
// Toggle the content on click on the button
|
|
55
|
-
this._button.addEventListener('click', () => this
|
|
55
|
+
this._button.addEventListener('click', () => this.toggle())
|
|
56
56
|
|
|
57
57
|
// Close the content is click outside
|
|
58
58
|
if (this._options.closable) {
|
|
59
|
-
this._content.addEventListener('
|
|
60
|
-
if (e.relatedTarget !== this._button) this
|
|
59
|
+
this._content.addEventListener('focusout', (e) => {
|
|
60
|
+
if (e.relatedTarget !== this._button && !this._content.contains(e.relatedTarget)) this.toggle()
|
|
61
61
|
})
|
|
62
62
|
}
|
|
63
63
|
|
|
@@ -76,9 +76,8 @@ export default class Dropdown extends BaseComponent {
|
|
|
76
76
|
/**
|
|
77
77
|
* Toggle the [hidden] and [aria-expanded] attributes
|
|
78
78
|
*
|
|
79
|
-
* @private
|
|
80
79
|
*/
|
|
81
|
-
|
|
80
|
+
toggle() {
|
|
82
81
|
|
|
83
82
|
// Define new value
|
|
84
83
|
const value = !this.value
|
package/js/_scroll.js
CHANGED
|
@@ -44,7 +44,7 @@ export default class Scroll extends BaseComponent {
|
|
|
44
44
|
if (options.navigation && !document.getElementById(options.navigation)) throw new Error(ErrorMessage.existById('element', options.navigation))
|
|
45
45
|
|
|
46
46
|
// Run the SUPER constructor from BaseComponent
|
|
47
|
-
super(el, options)
|
|
47
|
+
super(el, options, 'scroll')
|
|
48
48
|
|
|
49
49
|
// Reduce animation
|
|
50
50
|
const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true
|
package/js/_sidebar.js
CHANGED
|
@@ -31,7 +31,7 @@ export default class Sidebar extends BaseComponent {
|
|
|
31
31
|
if (options.breakpoint && typeof options.breakpoint !== 'number') throw new Error(ErrorMessage.typeOf('options.breakpoint', 'number'))
|
|
32
32
|
|
|
33
33
|
// Run the SUPER constructor from BaseComponent
|
|
34
|
-
super(el, options)
|
|
34
|
+
super(el, options, 'sidebar')
|
|
35
35
|
|
|
36
36
|
// Define the properties
|
|
37
37
|
this._buttons = document.querySelectorAll(`[aria-controls=${this._element.id}]`) ?? []
|
|
@@ -55,30 +55,29 @@ export default class Sidebar extends BaseComponent {
|
|
|
55
55
|
#init() {
|
|
56
56
|
|
|
57
57
|
// On load check if need to open/close the sidebar
|
|
58
|
-
if (window.innerWidth > this._options.breakpoint && !this._isOpen) this
|
|
58
|
+
if (window.innerWidth > this._options.breakpoint && !this._isOpen) this.toggle()
|
|
59
59
|
|
|
60
60
|
// On resize check if need to open/close the sidebar
|
|
61
61
|
window.onresize = () => {
|
|
62
62
|
clearTimeout(this._timeout)
|
|
63
63
|
this._timeout = setTimeout(() => {
|
|
64
|
-
if ((window.innerWidth <= this._options.breakpoint && this._isOpen) || (window.innerWidth > this._options.breakpoint && !this._isOpen)) this
|
|
64
|
+
if ((window.innerWidth <= this._options.breakpoint && this._isOpen) || (window.innerWidth > this._options.breakpoint && !this._isOpen)) this.toggle()
|
|
65
65
|
}, 250)
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
// On click on the button toggle the sidebar
|
|
69
|
-
this._buttons.forEach((button) => button.addEventListener('click', () => this
|
|
69
|
+
this._buttons.forEach((button) => button.addEventListener('click', () => this.toggle()))
|
|
70
70
|
|
|
71
71
|
// On click on the backdrop, close the sidebar
|
|
72
|
-
this._backdrop.addEventListener('click', () => this
|
|
72
|
+
this._backdrop.addEventListener('click', () => this.toggle())
|
|
73
73
|
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
/**
|
|
77
77
|
* Toggle the sidebar
|
|
78
78
|
*
|
|
79
|
-
* @private
|
|
80
79
|
*/
|
|
81
|
-
|
|
80
|
+
toggle() {
|
|
82
81
|
|
|
83
82
|
// Change the state
|
|
84
83
|
this._isOpen = !this._isOpen
|
package/js/_slider.js
CHANGED
|
@@ -37,7 +37,7 @@ export default class Slider extends BaseComponent {
|
|
|
37
37
|
if (options.autoplay && (typeof options.autoplay !== 'boolean' && typeof options.autoplay !== 'number')) throw new Error(ErrorMessage.typeOf('options.autoplay', 'boolean|number'))
|
|
38
38
|
|
|
39
39
|
// Run the SUPER constructor from BaseComponent
|
|
40
|
-
super(el, options)
|
|
40
|
+
super(el, options, 'slider')
|
|
41
41
|
|
|
42
42
|
// Reduce animation
|
|
43
43
|
const isReduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true
|
package/js/_sortable.js
CHANGED
|
@@ -24,7 +24,7 @@ export default class Sortable extends BaseComponent {
|
|
|
24
24
|
constructor(el, options = {}) {
|
|
25
25
|
|
|
26
26
|
// Run the SUPER constructor from BaseComponent
|
|
27
|
-
super(el, options)
|
|
27
|
+
super(el, options, 'sortable')
|
|
28
28
|
|
|
29
29
|
// Define the properties
|
|
30
30
|
this._withHandle = this._element.querySelector('[data-handle]') ? true : false
|
|
@@ -126,6 +126,9 @@ export default class Sortable extends BaseComponent {
|
|
|
126
126
|
// Check for errors
|
|
127
127
|
if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
|
|
128
128
|
|
|
129
|
+
// Do nothing if there is NO current
|
|
130
|
+
if (!this._current) return
|
|
131
|
+
|
|
129
132
|
// Reset the current property
|
|
130
133
|
this._current = null
|
|
131
134
|
|
package/js/_tabpanel.js
CHANGED
|
@@ -25,7 +25,7 @@ export default class Tabpanel extends BaseComponent {
|
|
|
25
25
|
constructor(el, options = {}) {
|
|
26
26
|
|
|
27
27
|
// Run the SUPER constructor from BaseComponent
|
|
28
|
-
super(el, options)
|
|
28
|
+
super(el, options, 'tabpanel')
|
|
29
29
|
|
|
30
30
|
// Check for errors
|
|
31
31
|
if (!el.querySelector('[role="tab"]')) throw new Error(ErrorMessage.exist('button [role="tab"]'))
|
package/js/_toggle.js
CHANGED
|
@@ -25,7 +25,7 @@ export default class Toggle extends BaseComponent {
|
|
|
25
25
|
constructor(el, options = {}) {
|
|
26
26
|
|
|
27
27
|
// Run the SUPER constructor from BaseComponent
|
|
28
|
-
super(el, options)
|
|
28
|
+
super(el, options, 'toggle')
|
|
29
29
|
|
|
30
30
|
// Define the properties
|
|
31
31
|
this._type = this._element.tagName == 'SELECT' ? 'select' : this._element.getAttribute('type') ?? 'button'
|
|
@@ -45,21 +45,21 @@ export default class Toggle extends BaseComponent {
|
|
|
45
45
|
*/
|
|
46
46
|
#init() {
|
|
47
47
|
|
|
48
|
-
// On first load run method
|
|
49
|
-
this
|
|
48
|
+
// On first load run method toggle()
|
|
49
|
+
this.toggle()
|
|
50
50
|
|
|
51
51
|
if (this._type === 'button') {
|
|
52
52
|
|
|
53
53
|
// CLICK for <button> and change the [aria-pressed] attribute
|
|
54
54
|
this._element.addEventListener('click', () => {
|
|
55
55
|
this._element.setAttribute('aria-pressed', this.value === 'false')
|
|
56
|
-
this
|
|
56
|
+
this.toggle()
|
|
57
57
|
})
|
|
58
58
|
|
|
59
59
|
} else {
|
|
60
60
|
|
|
61
61
|
// CHANGE for <checkbox> <radio> <select>
|
|
62
|
-
this._element.addEventListener('change', () => this
|
|
62
|
+
this._element.addEventListener('change', () => this.toggle())
|
|
63
63
|
|
|
64
64
|
}
|
|
65
65
|
|
|
@@ -69,7 +69,6 @@ export default class Toggle extends BaseComponent {
|
|
|
69
69
|
* Define the value: <checkbox> and <radio> = :checked, <button> = [aria-pressed], <else> = value
|
|
70
70
|
*
|
|
71
71
|
* @return {string}
|
|
72
|
-
* @private
|
|
73
72
|
*/
|
|
74
73
|
get value() {
|
|
75
74
|
|
|
@@ -90,9 +89,8 @@ export default class Toggle extends BaseComponent {
|
|
|
90
89
|
/**
|
|
91
90
|
* Toggle the [hidden] and [aria-expanded] attributes
|
|
92
91
|
*
|
|
93
|
-
* @private
|
|
94
92
|
*/
|
|
95
|
-
|
|
93
|
+
toggle() {
|
|
96
94
|
|
|
97
95
|
// Define the group value for <select>
|
|
98
96
|
const groupValue = this._type === 'select' && this._element.querySelector('option:checked') ? this._element.querySelector('option:checked').parentElement.label ?? null : null
|
package/js/_tree.js
CHANGED
|
@@ -23,7 +23,7 @@ export default class Tree extends BaseComponent {
|
|
|
23
23
|
constructor(el, options = {}) {
|
|
24
24
|
|
|
25
25
|
// Run the SUPER constructor from BaseComponent
|
|
26
|
-
super(el, options)
|
|
26
|
+
super(el, options, 'tree')
|
|
27
27
|
|
|
28
28
|
// Define the properties
|
|
29
29
|
this._type = this._element.role == 'tree' ? 'list' : 'grid'
|
|
@@ -47,7 +47,7 @@ export default class Tree extends BaseComponent {
|
|
|
47
47
|
this._items.forEach(item => item.addEventListener('click', (e) => {
|
|
48
48
|
if (!this._withHandle || e.target.hasAttribute('data-handle')) {
|
|
49
49
|
e.stopPropagation()
|
|
50
|
-
this
|
|
50
|
+
this.toggle(item)
|
|
51
51
|
}
|
|
52
52
|
}))
|
|
53
53
|
|
|
@@ -57,9 +57,8 @@ export default class Tree extends BaseComponent {
|
|
|
57
57
|
* Toggle the [hidden] and [aria-expanded] attributes
|
|
58
58
|
*
|
|
59
59
|
* @param {HTMLElement} item - The current item
|
|
60
|
-
* @private
|
|
61
60
|
*/
|
|
62
|
-
|
|
61
|
+
toggle(item) {
|
|
63
62
|
|
|
64
63
|
// Check for errors
|
|
65
64
|
if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
|
|
@@ -75,7 +74,7 @@ export default class Tree extends BaseComponent {
|
|
|
75
74
|
children.forEach(child => child.hidden = isExpanded)
|
|
76
75
|
|
|
77
76
|
// If type grid, collapse the subchildren
|
|
78
|
-
if (this._type === 'grid' && isExpanded) children.filter(child => child.hasAttribute('aria-expanded') && child.getAttribute('aria-expanded') === 'true').forEach(child => this
|
|
77
|
+
if (this._type === 'grid' && isExpanded) children.filter(child => child.hasAttribute('aria-expanded') && child.getAttribute('aria-expanded') === 'true').forEach(child => this.toggle(child))
|
|
79
78
|
|
|
80
79
|
// Emmit event
|
|
81
80
|
this.emmitEvent('changed', { isOpen: !isExpanded })
|
|
@@ -73,7 +73,7 @@ describe('#Init()', () => {
|
|
|
73
73
|
expect(fakeDropdownClosable._button.getAttribute('aria-pressed')).toBe('true')
|
|
74
74
|
expect(fakeDropdownClosable._button.getAttribute('aria-expanded')).toBe('true')
|
|
75
75
|
expect(fakeDropdownClosable._content.hidden).toBeFalsy()
|
|
76
|
-
fireEvent
|
|
76
|
+
fireEvent(fakeDropdownClosable._content, new MouseEvent('focusout'))
|
|
77
77
|
expect(fakeDropdownClosable._button.getAttribute('aria-expanded')).toBe('false')
|
|
78
78
|
expect(fakeDropdownClosable._button.getAttribute('aria-pressed')).toBe('false')
|
|
79
79
|
expect(fakeDropdownClosable._content.hidden).toBeTruthy()
|
|
@@ -116,7 +116,8 @@ describe('#Drop()', () => {
|
|
|
116
116
|
|
|
117
117
|
test('Emmit the sortable:drop event', () => {
|
|
118
118
|
const eventSpy = vi.spyOn(fakeListSortable, 'emmitEvent')
|
|
119
|
-
|
|
119
|
+
fireEvent(fakeListItem, new MouseEvent('mousedown')) // First drag item
|
|
120
|
+
fireEvent(fakeListItem, new MouseEvent('dragstart')) // First drag item
|
|
120
121
|
fireEvent(fakeListItem, new MouseEvent('dragend'))
|
|
121
122
|
expect(eventSpy).toHaveBeenCalledWith('drop', { current: fakeListItem, items: fakeListSortable.items })
|
|
122
123
|
})
|
|
@@ -22,14 +22,14 @@ export default class BaseComponent {
|
|
|
22
22
|
* @param {Object} options - The custom options
|
|
23
23
|
* @constructor
|
|
24
24
|
*/
|
|
25
|
-
constructor(el, options = {}) {
|
|
25
|
+
constructor(el, options = {}, name = this.constructor.name.toLowerCase()) {
|
|
26
26
|
|
|
27
27
|
// Check for errors
|
|
28
28
|
if (!(el instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('el', 'HTMLElement'))
|
|
29
29
|
if (!(options instanceof Object)) throw new Error(ErrorMessage.instanceOf('options', 'Object'))
|
|
30
30
|
|
|
31
31
|
// Define the #NAME private properties
|
|
32
|
-
this.#NAME =
|
|
32
|
+
this.#NAME = name
|
|
33
33
|
|
|
34
34
|
// Define the _element property
|
|
35
35
|
this._element = el
|
package/package.json
CHANGED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// ------------------------------------------------------------------
|
|
3
|
+
/// Breadcrumb
|
|
4
|
+
/// ------------------------------------------------------------------
|
|
5
|
+
/// Create the breadcrumb component
|
|
6
|
+
///
|
|
7
|
+
/// @example <nav><ol class="breadcrumb">...</ol></nav>
|
|
8
|
+
///
|
|
9
|
+
/// @group components
|
|
10
|
+
/// @author Natacha Herth
|
|
11
|
+
/// @since 1.0.0
|
|
12
|
+
///
|
|
13
|
+
////
|
|
14
|
+
|
|
15
|
+
.breadcrumb {
|
|
16
|
+
|
|
17
|
+
// Reset the list style
|
|
18
|
+
list-style: none;
|
|
19
|
+
padding: 0;
|
|
20
|
+
margin: 0;
|
|
21
|
+
|
|
22
|
+
// Design the breadcrumb list as inline by default
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: row;
|
|
25
|
+
justify-content: start;
|
|
26
|
+
align-items: center;
|
|
27
|
+
gap: 0;
|
|
28
|
+
|
|
29
|
+
// Add a divider between links
|
|
30
|
+
li:not(:last-child)::after {
|
|
31
|
+
content: var(--breadcrumb-divider, '/');
|
|
32
|
+
color: var(--breadcrumb-divider-color, currentColor);
|
|
33
|
+
margin-inline: var(--breadcrumb-gap, .5rem);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Reset the anchor CSS properties
|
|
37
|
+
a {
|
|
38
|
+
--anchor-decoration: var(--breadcrumb-decoration, currentColor);
|
|
39
|
+
--anchor-color: var(--breadcrumb-color, currentColor);
|
|
40
|
+
--anchor-hover-color: var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor));
|
|
41
|
+
--anchor-active-color: var(--breadcrumb-active-color, var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor)));
|
|
42
|
+
--anchor-disabled-opacity: var(--breadcrumb-disabled-opacity, var(--disabled-opacity));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
}
|
package/scss/_button.scss
CHANGED
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
margin: 0;
|
|
126
126
|
|
|
127
127
|
// Simple item
|
|
128
|
-
&:not(:has(> a:first-child:last-child)) {
|
|
128
|
+
&:not(:has(> a:first-child:last-child, > button:first-child:last-child)) {
|
|
129
129
|
@include as-item($name, (), $properties);
|
|
130
130
|
}
|
|
131
131
|
|
|
@@ -135,15 +135,23 @@
|
|
|
135
135
|
@include as-item($name, $states, $properties);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
+
// Item with button
|
|
139
|
+
&:has(> button:first-child:last-child) > button {
|
|
140
|
+
width: 100%;
|
|
141
|
+
text-align: left;
|
|
142
|
+
}
|
|
143
|
+
|
|
138
144
|
// Remove extra border
|
|
139
145
|
& + *,
|
|
140
|
-
& + * > a
|
|
146
|
+
& + * > a,
|
|
147
|
+
& + * > button {
|
|
141
148
|
border-top: none !important;
|
|
142
149
|
}
|
|
143
150
|
|
|
144
151
|
// Remove radius on middle child
|
|
145
152
|
&:not(:first-child, :last-child),
|
|
146
|
-
&:not(:first-child, :last-child) > a
|
|
153
|
+
&:not(:first-child, :last-child) > a,
|
|
154
|
+
&:not(:first-child, :last-child) > button {
|
|
147
155
|
border-radius: 0 !important;
|
|
148
156
|
}
|
|
149
157
|
|
|
@@ -152,14 +160,16 @@
|
|
|
152
160
|
|
|
153
161
|
// Remove radius bottom on first child
|
|
154
162
|
&:first-child,
|
|
155
|
-
&:first-child > a
|
|
163
|
+
&:first-child > a,
|
|
164
|
+
&:first-child > button {
|
|
156
165
|
border-end-start-radius: 0 !important;
|
|
157
166
|
border-end-end-radius: 0 !important;
|
|
158
167
|
}
|
|
159
168
|
|
|
160
169
|
// Remove radius top on last child
|
|
161
170
|
&:last-child,
|
|
162
|
-
&:last-child > a
|
|
171
|
+
&:last-child > a,
|
|
172
|
+
&:last-child > button {
|
|
163
173
|
border-start-start-radius: 0 !important;
|
|
164
174
|
border-start-end-radius: 0 !important;
|
|
165
175
|
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
@import './utilities/_typography';
|
|
7
7
|
|
|
8
8
|
@import './_badge';
|
|
9
|
+
@import './_breadcrumb';
|
|
9
10
|
@import './_button';
|
|
10
11
|
@import './_card';
|
|
11
12
|
@import './_dialog';
|
|
@@ -17,7 +18,6 @@
|
|
|
17
18
|
@import './_list';
|
|
18
19
|
@import './_loading';
|
|
19
20
|
@import './_media';
|
|
20
|
-
@import './_nav';
|
|
21
21
|
@import './_progress';
|
|
22
22
|
@import './_slider';
|
|
23
23
|
@import './_table';
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Documentations: Components ></title>
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body data-preload>
|
|
11
|
-
<doc-layout>
|
|
12
|
-
|
|
13
|
-
<h1>Navigation</h1>
|
|
14
|
-
<p>The navigation is using the native <code><ul></code> inside a <code><nav></code> tag.</p>
|
|
15
|
-
<doc-demo>
|
|
16
|
-
<nav aria-label="Main navigaton">
|
|
17
|
-
<ul>
|
|
18
|
-
<li><a href="#" aria-current="page">Link 1</a></li>
|
|
19
|
-
<li><a href="#">Link 2</a></li>
|
|
20
|
-
<li><a href="#">Link 3</a></li>
|
|
21
|
-
<li><a>Link 4</a></li>
|
|
22
|
-
<li><button class="primary">Button</button></li>
|
|
23
|
-
</ul>
|
|
24
|
-
</nav>
|
|
25
|
-
</doc-demo>
|
|
26
|
-
<div class="code-group">
|
|
27
|
-
<div role="tablist">
|
|
28
|
-
<button role="tab" aria-controls="html">HTML</button>
|
|
29
|
-
<button role="tab" aria-controls="scss">SCSS</button>
|
|
30
|
-
<button role="tab" aria-controls="css">CSS</button>
|
|
31
|
-
</div>
|
|
32
|
-
<doc-code id="html" data-type="html" role="tabpanel">
|
|
33
|
-
<nav aria-label="Main navigaton">
|
|
34
|
-
<ul>
|
|
35
|
-
<li><a href="#" aria-current="page">Link 1</a></li>
|
|
36
|
-
<li><a href="#">Link 2</a></li>
|
|
37
|
-
<li><a href="#">Link 3</a></li>
|
|
38
|
-
<li><a>Link 4</a></li>
|
|
39
|
-
<li><button class="primary">Button</button></li>
|
|
40
|
-
</ul>
|
|
41
|
-
</nav>
|
|
42
|
-
</doc-code>
|
|
43
|
-
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
44
|
-
@import '@natachah/vanilla-frontend/scss/_nav';
|
|
45
|
-
</doc-code>
|
|
46
|
-
<doc-code id="css" data-type="css" role="tabpanel">
|
|
47
|
-
--nav-direction
|
|
48
|
-
--nav-justify
|
|
49
|
-
--nav-align
|
|
50
|
-
--nav-gap
|
|
51
|
-
--nav-decoration
|
|
52
|
-
--nav-color
|
|
53
|
-
--nav-hover-color
|
|
54
|
-
--nav-active-color
|
|
55
|
-
--nav-disabled-opacity
|
|
56
|
-
</doc-code>
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<blockquote class="warning">
|
|
60
|
-
<p>The custom properties for the navigation is overriding the default ones in the typography setting.</p>
|
|
61
|
-
</blockquote>
|
|
62
|
-
|
|
63
|
-
<p>You can make a vertical menu by setting the CSS property <code>--nav-direction</code> to <code>column</code>.</p>
|
|
64
|
-
|
|
65
|
-
<h2>Breadcrumb</h2>
|
|
66
|
-
<p>To create a breadcrumb navigation, always use <code><ol></code> inside a <code><nav></code> tag.</p>
|
|
67
|
-
<p>The breadcrumb will automatically be distributed horizontally.</p>
|
|
68
|
-
<doc-demo>
|
|
69
|
-
<nav aria-label="Breadcrumb navigaton">
|
|
70
|
-
<ol>
|
|
71
|
-
<li><a href="#">One</a></li>
|
|
72
|
-
<li><a href="#">Two</a></li>
|
|
73
|
-
<li><a href="#">Three</a></li>
|
|
74
|
-
<li aria-current="location">Four</li>
|
|
75
|
-
</ol>
|
|
76
|
-
</nav>
|
|
77
|
-
</doc-demo>
|
|
78
|
-
<div class="code-group">
|
|
79
|
-
<div role="tablist">
|
|
80
|
-
<button role="tab" aria-controls="html">HTML</button>
|
|
81
|
-
<button role="tab" aria-controls="scss">SCSS</button>
|
|
82
|
-
|
|
83
|
-
<button role="tab" aria-controls="css">CSS</button>
|
|
84
|
-
</div>
|
|
85
|
-
<doc-code id="html" data-type="html" role="tabpanel">
|
|
86
|
-
<nav aria-label="Breadcrumb navigaton">
|
|
87
|
-
<ol>
|
|
88
|
-
<li><a href="#">One</a></li>
|
|
89
|
-
<li><a href="#">Two</a></li>
|
|
90
|
-
<li><a href="#">Three</a></li>
|
|
91
|
-
<li aria-current="location">Four</li>
|
|
92
|
-
</ol>
|
|
93
|
-
</nav>
|
|
94
|
-
</doc-code>
|
|
95
|
-
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
96
|
-
@import '@natachah/vanilla-frontend/scss/_nav';
|
|
97
|
-
</doc-code>
|
|
98
|
-
<doc-code id="css" data-type="css" role="tabpanel">
|
|
99
|
-
--breadcrumb-divider
|
|
100
|
-
--breadcrumb-divider-color
|
|
101
|
-
--breadcrumb-gap
|
|
102
|
-
--breadcrumb-decoration
|
|
103
|
-
--breadcrumb-color
|
|
104
|
-
--breadcrumb-hover-color
|
|
105
|
-
--breadcrumb-active-color
|
|
106
|
-
--breadcrumb-disabled-opacity
|
|
107
|
-
</doc-code>
|
|
108
|
-
</div>
|
|
109
|
-
|
|
110
|
-
<blockquote class="warning">
|
|
111
|
-
<p>The custom properties for the breadcrumb is overriding the default ones in the typography setting.</p>
|
|
112
|
-
</blockquote>
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
</doc-layout>
|
|
116
|
-
<script type="module" src="/main.js"></script>
|
|
117
|
-
</body>
|
|
118
|
-
|
|
119
|
-
</html>
|
package/scss/_nav.scss
DELETED
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
////
|
|
2
|
-
/// ------------------------------------------------------------------
|
|
3
|
-
/// Nav
|
|
4
|
-
/// ------------------------------------------------------------------
|
|
5
|
-
/// Create the navigation component
|
|
6
|
-
///
|
|
7
|
-
/// @example <nav><ul>...</ul></nav> or <nav><ol>...</ol></nav>
|
|
8
|
-
///
|
|
9
|
-
/// @group components
|
|
10
|
-
/// @author Natacha Herth
|
|
11
|
-
/// @since 1.0.0
|
|
12
|
-
///
|
|
13
|
-
////
|
|
14
|
-
|
|
15
|
-
nav {
|
|
16
|
-
|
|
17
|
-
// Reset the list style
|
|
18
|
-
ul,
|
|
19
|
-
ol {
|
|
20
|
-
list-style: none;
|
|
21
|
-
padding: 0;
|
|
22
|
-
margin: 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
ul {
|
|
26
|
-
|
|
27
|
-
// Design the nav list as inline by default
|
|
28
|
-
display: flex;
|
|
29
|
-
flex-direction: var(--nav-direction, row);
|
|
30
|
-
justify-content: var(--nav-justify, start);
|
|
31
|
-
align-items: var(--nav-align, center);
|
|
32
|
-
gap: var(--nav-gap, 1rem);
|
|
33
|
-
|
|
34
|
-
// Reset the anchor CSS properties
|
|
35
|
-
a {
|
|
36
|
-
--anchor-decoration: var(--nav-decoration, currentColor);
|
|
37
|
-
--anchor-color: var(--nav-color, currentColor);
|
|
38
|
-
--anchor-hover-color: var(--nav-hover-color, var(--nav-color, currentColor));
|
|
39
|
-
--anchor-active-color: var(--nav-active-color, var(--nav-hover-color, var(--nav-color, currentColor)));
|
|
40
|
-
--anchor-disabled-opacity: var(--nav-disabled-opacity, var(--disabled-opacity));
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
ol {
|
|
46
|
-
|
|
47
|
-
// Design the breadcrumb list as inline by default
|
|
48
|
-
display: flex;
|
|
49
|
-
flex-direction: row;
|
|
50
|
-
justify-content: start;
|
|
51
|
-
align-items: center;
|
|
52
|
-
gap: 0;
|
|
53
|
-
|
|
54
|
-
// Add a divider between links
|
|
55
|
-
li:not(:last-child)::after {
|
|
56
|
-
content: var(--breadcrumb-divider, '/');
|
|
57
|
-
color: var(--breadcrumb-divider-color, currentColor);
|
|
58
|
-
margin-inline: var(--breadcrumb-gap, .5rem);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
// Reset the anchor CSS properties
|
|
62
|
-
a {
|
|
63
|
-
--anchor-decoration: var(--breadcrumb-decoration, currentColor);
|
|
64
|
-
--anchor-color: var(--breadcrumb-color, currentColor);
|
|
65
|
-
--anchor-hover-color: var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor));
|
|
66
|
-
--anchor-active-color: var(--breadcrumb-active-color, var(--breadcrumb-hover-color, var(--breadcrumb-color, currentColor)));
|
|
67
|
-
--anchor-disabled-opacity: var(--breadcrumb-disabled-opacity, var(--disabled-opacity));
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
}
|