@uncinq/css-components 1.13.1 → 1.14.0
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/README.md
CHANGED
|
@@ -24,14 +24,16 @@ Each component file contains only CSS rules, using the tokens defined in the two
|
|
|
24
24
|
Component styles are declared inside `@layer components`, utilities inside `@layer utilities`:
|
|
25
25
|
|
|
26
26
|
```css
|
|
27
|
-
@layer reset, tokens, vendors, base, layouts, components, pages, utilities;
|
|
27
|
+
@layer reset, tokens, libs, vendors, base, layouts, components, pages, utilities;
|
|
28
28
|
```
|
|
29
29
|
|
|
30
30
|
This means:
|
|
31
31
|
|
|
32
32
|
- Components never bleed into base or layout styles
|
|
33
33
|
- Project-level `@layer components` rules always win over these defaults
|
|
34
|
-
-
|
|
34
|
+
- Third-party stylesheets (`libs`, e.g. Splide) sit at the bottom, and the CSS
|
|
35
|
+
that overrides them (`vendors`) right above — so a lazily loaded library
|
|
36
|
+
cannot win on source order
|
|
35
37
|
- Utilities come last, so `.scrollsnap` wins over the grid a component declares for itself
|
|
36
38
|
|
|
37
39
|
---
|
|
@@ -117,6 +119,7 @@ css/
|
|
|
117
119
|
nav-accessibility.css ← accessibility skip links / focus helpers
|
|
118
120
|
nav-title.css ← navigation bar title
|
|
119
121
|
pagination.css ← pagination control
|
|
122
|
+
video.css ← native video wrapper with its play/pause control
|
|
120
123
|
utilities/
|
|
121
124
|
scrollsnap.css ← .scrollsnap[-sm|-md|-lg|-xl] — turns a grid into a snapping carousel
|
|
122
125
|
```
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/* components/btn-toggle-video.css */
|
|
2
|
+
/*
|
|
3
|
+
* .btn-toggle-video — play/pause control overlaid on a video that autoplays
|
|
4
|
+
* without the native controls (WCAG). It stays transparent so the video shows
|
|
5
|
+
* through it, and the `.is-playing` state, set by the script driving the
|
|
6
|
+
* video, decides which of the two icons is displayed. The .video wrapper
|
|
7
|
+
* places it — see video.css.
|
|
8
|
+
*
|
|
9
|
+
* Structure:
|
|
10
|
+
* button.btn.btn-toggle-video[.is-playing]
|
|
11
|
+
* .icon-pause
|
|
12
|
+
* .icon-play
|
|
13
|
+
*/
|
|
14
|
+
@layer components {
|
|
15
|
+
.btn-toggle-video {
|
|
16
|
+
--btn-color-background: transparent;
|
|
17
|
+
--btn-color-background-hover: transparent;
|
|
18
|
+
--btn-color-border: transparent;
|
|
19
|
+
--btn-color-border-hover: transparent;
|
|
20
|
+
|
|
21
|
+
&:not(.is-playing) .icon-pause {
|
|
22
|
+
display: none;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&.is-playing .icon-play {
|
|
26
|
+
display: none;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
package/css/components/media.css
CHANGED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/* components/video.css */
|
|
2
|
+
/*
|
|
3
|
+
* .video — wrapper for a native video, with an optional control overlaid on it
|
|
4
|
+
* when the video autoplays without the native ones (WCAG).
|
|
5
|
+
* Inside a .media the wrapper is stretched to fill it — see media.css.
|
|
6
|
+
*
|
|
7
|
+
* Structure:
|
|
8
|
+
* div.video
|
|
9
|
+
* video
|
|
10
|
+
* button.btn.btn-toggle-video
|
|
11
|
+
*/
|
|
12
|
+
@layer components {
|
|
13
|
+
.video {
|
|
14
|
+
position: relative;
|
|
15
|
+
|
|
16
|
+
video {
|
|
17
|
+
aspect-ratio: var(--video-ratio, var(--ratio-video));
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.btn-toggle-video {
|
|
22
|
+
inset-block-end: 0;
|
|
23
|
+
inset-inline-end: 0;
|
|
24
|
+
position: absolute;
|
|
25
|
+
z-index: 10;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
package/css/index.css
CHANGED
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
@import 'components/btn-search.css';
|
|
11
11
|
@import 'components/btn-share.css';
|
|
12
12
|
@import 'components/btn-toc.css';
|
|
13
|
+
@import 'components/btn-toggle-video.css';
|
|
13
14
|
@import 'components/card.css';
|
|
14
15
|
@import 'components/drawer.css';
|
|
15
16
|
@import 'components/dropdown.css';
|
|
@@ -26,6 +27,7 @@
|
|
|
26
27
|
@import 'components/pagination.css';
|
|
27
28
|
@import 'components/panel.css';
|
|
28
29
|
@import 'components/surtitle.css';
|
|
30
|
+
@import 'components/video.css';
|
|
29
31
|
|
|
30
32
|
/* Utilities — @layer utilities, last layer */
|
|
31
33
|
@import 'utilities/scrollsnap.css';
|