@natachah/vanilla-frontend 0.1.1 → 0.1.3
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/base/media.html +11 -1
- package/docs/pages/components/card.html +14 -10
- package/docs/pages/components/list.html +1 -1
- package/docs/src/js/doc-layout.js +1 -1
- package/js/_sidebar.js +5 -0
- package/js/_sortable.js +0 -2
- package/js/tests/sidebar.test.js +2 -1
- package/natachah-vanilla-frontend-0.1.3.tgz +0 -0
- package/package.json +1 -1
- package/scss/base/_reset.scss +1 -1
- package/scss/base/_typography.scss +5 -0
- package/scss/components/_card.scss +22 -17
- package/natachah-vanilla-frontend-0.1.1.tgz +0 -0
|
@@ -87,6 +87,11 @@
|
|
|
87
87
|
<h2>Video</h2>
|
|
88
88
|
<p>Use the default <code><video></code> and <code><source></code> tags.</p>
|
|
89
89
|
<p>By default the video take 100% width and have a ratio of 16:9.</p>
|
|
90
|
+
<doc-demo>
|
|
91
|
+
<video width="320" height="240" controls>
|
|
92
|
+
<source src="..." type="video/mp4">
|
|
93
|
+
</video>
|
|
94
|
+
</doc-demo>
|
|
90
95
|
<div class="code-group">
|
|
91
96
|
<div role="tablist">
|
|
92
97
|
<button role="tab" aria-controls="html">HTML</button>
|
|
@@ -94,7 +99,7 @@
|
|
|
94
99
|
</div>
|
|
95
100
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
96
101
|
<video width="320" height="240" controls>
|
|
97
|
-
<source src="http://
|
|
102
|
+
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
|
|
98
103
|
</video>
|
|
99
104
|
</doc-code>
|
|
100
105
|
<doc-code id="css" data-type="css" role="tabpanel">
|
|
@@ -108,6 +113,11 @@
|
|
|
108
113
|
<h2>Audio</h2>
|
|
109
114
|
<p>Use the default <code><audio></code> and <code><source></code> tags.</p>
|
|
110
115
|
<p>By default the audio take 100% width.</p>
|
|
116
|
+
<doc-demo>
|
|
117
|
+
<audio controls>
|
|
118
|
+
<source src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/theme_01.mp3" type="audio/mpeg">
|
|
119
|
+
</audio>
|
|
120
|
+
</doc-demo>
|
|
111
121
|
<div class="code-group">
|
|
112
122
|
<div role="tablist">
|
|
113
123
|
<button role="tab" aria-controls="html">HTML</button>
|
|
@@ -66,10 +66,11 @@
|
|
|
66
66
|
</doc-code>
|
|
67
67
|
|
|
68
68
|
<p>You also can add a <code><picture></code> on the top, center or bottom of a card.</p>
|
|
69
|
+
<p>To make the picture full width add the class <code>.flush</code></p>
|
|
69
70
|
|
|
70
71
|
<doc-demo>
|
|
71
72
|
<div class="card">
|
|
72
|
-
<picture>
|
|
73
|
+
<picture class="flush">
|
|
73
74
|
<img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
|
|
74
75
|
</picture>
|
|
75
76
|
<h3>Title of the card</h3>
|
|
@@ -79,7 +80,7 @@
|
|
|
79
80
|
|
|
80
81
|
<doc-code>
|
|
81
82
|
<div class="card">
|
|
82
|
-
<picture>
|
|
83
|
+
<picture class="flush">
|
|
83
84
|
<img src="https://picsum.photos/400/200" srcset="https://picsum.photos/800/400 2x" alt="My random image from lorem picsum">
|
|
84
85
|
</picture>
|
|
85
86
|
<h3>Title of the card</h3>
|
|
@@ -92,20 +93,22 @@
|
|
|
92
93
|
</blockquote>
|
|
93
94
|
|
|
94
95
|
<p>The card is compatible with the components <b>group</b> and <b>list</b></p>
|
|
96
|
+
<p>To make them full width add the class <code>.flush</code></p>
|
|
95
97
|
|
|
96
98
|
<doc-demo>
|
|
97
99
|
<div class="card">
|
|
98
100
|
<h3>Mycard</h3>
|
|
99
101
|
<p>Content of the card</p>
|
|
100
|
-
<div class="group">
|
|
102
|
+
<div class="group flush">
|
|
101
103
|
<button>Button A</button>
|
|
102
104
|
<button>Button B</button>
|
|
103
105
|
</div>
|
|
104
106
|
<p>Content of the card</p>
|
|
105
|
-
<ul class="list">
|
|
107
|
+
<ul class="list flush">
|
|
106
108
|
<li>List D</li>
|
|
107
109
|
<li><a>List E</a></li>
|
|
108
|
-
<li><
|
|
110
|
+
<li><span>List F</span><button>Button</button></li>
|
|
111
|
+
<li><a href="#" role="button">List F</a></li>
|
|
109
112
|
</ul>
|
|
110
113
|
</div>
|
|
111
114
|
</doc-demo>
|
|
@@ -114,15 +117,16 @@
|
|
|
114
117
|
<div class="card">
|
|
115
118
|
<h3>Mycard</h3>
|
|
116
119
|
<p>Content of the card</p>
|
|
117
|
-
<div class="group">
|
|
120
|
+
<div class="group flush">
|
|
118
121
|
<button>Button A</button>
|
|
119
122
|
<button>Button B</button>
|
|
120
123
|
</div>
|
|
121
124
|
<p>Content of the card</p>
|
|
122
|
-
<ul class="list">
|
|
125
|
+
<ul class="list flush">
|
|
123
126
|
<li>List D</li>
|
|
124
127
|
<li><a>List E</a></li>
|
|
125
|
-
<li><
|
|
128
|
+
<li><span>List F</span><button>Button</button></li>
|
|
129
|
+
<li><a href="#" role="button">List F</a></li>
|
|
126
130
|
</ul>
|
|
127
131
|
</div>
|
|
128
132
|
</doc-code>
|
|
@@ -147,7 +151,7 @@
|
|
|
147
151
|
</doc-code>
|
|
148
152
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
149
153
|
$outline-variations: (
|
|
150
|
-
|
|
154
|
+
card
|
|
151
155
|
);
|
|
152
156
|
</doc-code>
|
|
153
157
|
</div>
|
|
@@ -172,7 +176,7 @@
|
|
|
172
176
|
</doc-code>
|
|
173
177
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
174
178
|
$color-variations: (
|
|
175
|
-
|
|
179
|
+
card: (primary)
|
|
176
180
|
);
|
|
177
181
|
</doc-code>
|
|
178
182
|
</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.3
|
|
22
22
|
</span>
|
|
23
23
|
</li>
|
|
24
24
|
<li>
|
package/js/_sidebar.js
CHANGED
|
@@ -41,6 +41,8 @@ export default class Sidebar extends BaseComponent {
|
|
|
41
41
|
|
|
42
42
|
this._isOpen = !this._element.hidden
|
|
43
43
|
|
|
44
|
+
this._focus = this._element.querySelector('a,button') ?? null
|
|
45
|
+
|
|
44
46
|
// Init the event listener
|
|
45
47
|
this.#init()
|
|
46
48
|
|
|
@@ -90,6 +92,9 @@ export default class Sidebar extends BaseComponent {
|
|
|
90
92
|
// Change the [hidden] attribute on the sidebar
|
|
91
93
|
this._element.hidden = !this._isOpen
|
|
92
94
|
|
|
95
|
+
// Toggle the focus
|
|
96
|
+
if (this._focus && this._isOpen) this._focus.focus()
|
|
97
|
+
|
|
93
98
|
}
|
|
94
99
|
|
|
95
100
|
}
|
package/js/_sortable.js
CHANGED
package/js/tests/sidebar.test.js
CHANGED
|
@@ -26,7 +26,7 @@ beforeAll(() => {
|
|
|
26
26
|
document.body.innerHTML =
|
|
27
27
|
'<div id="backdrop"></div>' +
|
|
28
28
|
'<button aria-expanded="false" aria-pressed="false" aria-controls="sidebar"></button>' +
|
|
29
|
-
'<aside id="sidebar" tabindex="0" hidden></aside>'
|
|
29
|
+
'<aside id="sidebar" tabindex="0" hidden><button id="focus"></button></aside>'
|
|
30
30
|
|
|
31
31
|
Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1200 })
|
|
32
32
|
|
|
@@ -44,6 +44,7 @@ describe('Structure of the class', () => {
|
|
|
44
44
|
expect(fakeSidebar._buttons).toStrictEqual(document.querySelectorAll('button[aria-controls="sidebar"]'))
|
|
45
45
|
expect(fakeSidebar._backdrop).toStrictEqual(document.getElementById('backdrop'))
|
|
46
46
|
expect(fakeSidebar._isOpen).toBeTruthy()
|
|
47
|
+
expect(fakeSidebar._focus).toStrictEqual(document.getElementById('focus'))
|
|
47
48
|
})
|
|
48
49
|
|
|
49
50
|
})
|
|
Binary file
|
package/package.json
CHANGED
package/scss/base/_reset.scss
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
////
|
|
11
11
|
|
|
12
12
|
// Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
|
|
13
|
-
*:where(:not(iframe, canvas, img,
|
|
13
|
+
*:where(:not(iframe, canvas, img, video, abbr, b, strong, i, em, cite, s, u, sub, sup, mark, code, svg, defs, g, path, rect, circle, line, text)) {
|
|
14
14
|
all: unset;
|
|
15
15
|
display: revert;
|
|
16
16
|
}
|
|
@@ -29,6 +29,11 @@ a {
|
|
|
29
29
|
color: var(--anchor-hover-color, var(--anchor-color, currentColor));
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
&:focus-visible {
|
|
33
|
+
outline: var(--anchor-focus-size, var(--focus-size)) var(--anchor-focus-style, var(--focus-style)) var(--anchor-focus-color, color-mix(in srgb, var(--anchor-color, var(--color-font)), transparent var(--focus-opacity)));
|
|
34
|
+
outline-offset: var(--anchor-focus-offset, var(--focus-offset));
|
|
35
|
+
}
|
|
36
|
+
|
|
32
37
|
&:active,
|
|
33
38
|
&[aria-current],
|
|
34
39
|
&[aria-selected=true] {
|
|
@@ -26,16 +26,15 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
|
|
|
26
26
|
|
|
27
27
|
.card {
|
|
28
28
|
|
|
29
|
+
--card-border-color: red;
|
|
30
|
+
|
|
29
31
|
// Design as item
|
|
30
32
|
@include as-item('card', (), $customCardProperties);
|
|
31
33
|
|
|
32
34
|
// Design the layout
|
|
33
35
|
> header,
|
|
34
36
|
> footer,
|
|
35
|
-
>
|
|
36
|
-
> .list,
|
|
37
|
-
> .accordion,
|
|
38
|
-
> .group {
|
|
37
|
+
> .flush {
|
|
39
38
|
margin-inline: calc(var(--card-padding-inline, map.get($customCard, padding-inline)) * -1);
|
|
40
39
|
}
|
|
41
40
|
|
|
@@ -45,7 +44,7 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
|
|
|
45
44
|
}
|
|
46
45
|
|
|
47
46
|
> header,
|
|
48
|
-
> :first-child:is(
|
|
47
|
+
> :first-child:is(.flush) {
|
|
49
48
|
margin-top: calc(var(--card-padding-block, map.get($customCard, padding-block)) * -1);
|
|
50
49
|
border-start-start-radius: inherit;
|
|
51
50
|
border-start-end-radius: inherit;
|
|
@@ -53,19 +52,19 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
|
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
> footer,
|
|
56
|
-
> :last-child:is(
|
|
55
|
+
> :last-child:is(.flush) {
|
|
57
56
|
margin-bottom: calc(var(--card-padding-block, map.get($customCard, padding-block)) * -1);
|
|
58
57
|
border-end-start-radius: inherit;
|
|
59
58
|
border-end-end-radius: inherit;
|
|
60
59
|
border-top: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
|
|
61
60
|
}
|
|
62
61
|
|
|
63
|
-
> :not(:first-child, :last-child):is(
|
|
62
|
+
> :not(:first-child, :last-child):is(.flush) {
|
|
64
63
|
border-top: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
|
|
65
64
|
border-bottom: var(--card-divider-size, var(--card-border-size, var(--border-size))) var(--card-divider-style, var(--card-border-style, var(--border-style))) var(--card-divider-color, var(--card-border-color, transparent));
|
|
66
65
|
}
|
|
67
66
|
|
|
68
|
-
> picture {
|
|
67
|
+
> picture.flush {
|
|
69
68
|
max-width: inherit;
|
|
70
69
|
overflow: hidden;
|
|
71
70
|
|
|
@@ -74,27 +73,33 @@ $customCardProperties: map.merge(default.$item-properties, $customCard);
|
|
|
74
73
|
}
|
|
75
74
|
}
|
|
76
75
|
|
|
77
|
-
> .list {
|
|
76
|
+
> .flush.list > * {
|
|
78
77
|
|
|
79
|
-
|
|
80
|
-
|
|
78
|
+
&:not(:has(a[role=button]:only-child, button:only-child)),
|
|
79
|
+
&:has(a[role=button]:only-child, button:only-child) > * {
|
|
81
80
|
border-inline: none !important;
|
|
82
|
-
border-radius: inherit !important;
|
|
83
81
|
}
|
|
84
82
|
|
|
85
|
-
|
|
86
|
-
|
|
83
|
+
|
|
84
|
+
&:first-child,
|
|
85
|
+
&:first-child > :only-child {
|
|
87
86
|
border-top: none !important;
|
|
87
|
+
border-start-start-radius: inherit !important;
|
|
88
|
+
border-start-end-radius: inherit !important;
|
|
88
89
|
}
|
|
89
90
|
|
|
90
|
-
|
|
91
|
-
|
|
91
|
+
&:last-child,
|
|
92
|
+
&:last-child > :only-child {
|
|
92
93
|
border-bottom: none !important;
|
|
94
|
+
border-end-start-radius: inherit !important;
|
|
95
|
+
border-end-end-radius: inherit !important;
|
|
93
96
|
}
|
|
94
97
|
|
|
98
|
+
|
|
99
|
+
|
|
95
100
|
}
|
|
96
101
|
|
|
97
|
-
> .group {
|
|
102
|
+
> .flush.group {
|
|
98
103
|
|
|
99
104
|
> * {
|
|
100
105
|
width: 100%;
|
|
Binary file
|