@teseor/css 2.3.1 → 2.3.2
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/package.json
CHANGED
|
@@ -14,16 +14,16 @@ description: Scroll-driven animation utilities for progress indicators and viewp
|
|
|
14
14
|
|
|
15
15
|
<!-- @view_fade -->
|
|
16
16
|
<!-- Elements fade in as they enter the viewport. -->
|
|
17
|
-
<div class="ui-view-fade ui-card ui-
|
|
17
|
+
<div class="ui-view-fade ui-card ui-card--sm">{{ t('i_fade_in_on_scroll', 'I fade in on scroll') }}</div>
|
|
18
18
|
|
|
19
19
|
<!-- @view_slide_up -->
|
|
20
20
|
<!-- Elements slide up and fade in on viewport entry. -->
|
|
21
|
-
<div class="ui-view-slide-up ui-card ui-
|
|
21
|
+
<div class="ui-view-slide-up ui-card ui-card--sm">{{ t('i_slide_up_into_view', 'I slide up into view') }}</div>
|
|
22
22
|
|
|
23
23
|
<!-- @view_slide_start -->
|
|
24
24
|
<!-- Elements slide in from the start edge (left in LTR) on viewport entry. -->
|
|
25
|
-
<div class="ui-view-slide-start ui-card ui-
|
|
25
|
+
<div class="ui-view-slide-start ui-card ui-card--sm">{{ t('i_slide_from_the_start', 'I slide from the start') }}</div>
|
|
26
26
|
|
|
27
27
|
<!-- @view_scale -->
|
|
28
28
|
<!-- Elements scale up and fade in on viewport entry. -->
|
|
29
|
-
<div class="ui-view-scale ui-card ui-
|
|
29
|
+
<div class="ui-view-scale ui-card ui-card--sm">{{ t('i_scale_into_view', 'I scale into view') }}</div>
|
|
@@ -6,72 +6,72 @@ description: Scroll-snap utilities for carousels, horizontal lists, and snap-to-
|
|
|
6
6
|
<!-- @horizontal_snap -->
|
|
7
7
|
<!-- Snap children to start position on horizontal scroll. -->
|
|
8
8
|
<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
|
|
9
|
-
<div class="ui-snap-start ui-card ui-
|
|
10
|
-
<div class="ui-snap-start ui-card ui-
|
|
11
|
-
<div class="ui-snap-start ui-card ui-
|
|
12
|
-
<div class="ui-snap-start ui-card ui-
|
|
9
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_1', 'Item 1') }}</div>
|
|
10
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_2', 'Item 2') }}</div>
|
|
11
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_3', 'Item 3') }}</div>
|
|
12
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('item_4', 'Item 4') }}</div>
|
|
13
13
|
</div>
|
|
14
14
|
|
|
15
15
|
<!-- @center_snap -->
|
|
16
16
|
<!-- Snap children to center position. -->
|
|
17
17
|
<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
|
|
18
|
-
<div class="ui-snap-center ui-card ui-
|
|
19
|
-
<div class="ui-snap-center ui-card ui-
|
|
20
|
-
<div class="ui-snap-center ui-card ui-
|
|
18
|
+
<div class="ui-snap-center ui-card ui-card--sm demo-snap-item">{{ t('center_1', 'Center 1') }}</div>
|
|
19
|
+
<div class="ui-snap-center ui-card ui-card--sm demo-snap-item">{{ t('center_2', 'Center 2') }}</div>
|
|
20
|
+
<div class="ui-snap-center ui-card ui-card--sm demo-snap-item">{{ t('center_3', 'Center 3') }}</div>
|
|
21
21
|
</div>
|
|
22
22
|
|
|
23
23
|
<!-- @vertical_snap -->
|
|
24
24
|
<!-- Snap children on vertical scroll. -->
|
|
25
25
|
<div class="ui-snap-y" style="max-block-size: 8rem">
|
|
26
|
-
<div class="ui-snap-start ui-card ui-
|
|
27
|
-
<div class="ui-snap-start ui-card ui-
|
|
28
|
-
<div class="ui-snap-start ui-card ui-
|
|
26
|
+
<div class="ui-snap-start ui-card ui-card--sm">{{ t('section_1', 'Section 1') }}</div>
|
|
27
|
+
<div class="ui-snap-start ui-card ui-card--sm">{{ t('section_2', 'Section 2') }}</div>
|
|
28
|
+
<div class="ui-snap-start ui-card ui-card--sm">{{ t('section_3', 'Section 3') }}</div>
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
<!-- @proximity_snap -->
|
|
32
32
|
<!-- Softer snap that only engages when close to a snap point. -->
|
|
33
33
|
<div class="ui-snap-x-proximity ui-flex ui-gap-2 ui-p-2 demo-narrow">
|
|
34
|
-
<div class="ui-snap-start ui-card ui-
|
|
35
|
-
<div class="ui-snap-start ui-card ui-
|
|
36
|
-
<div class="ui-snap-start ui-card ui-
|
|
34
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('proximity_1', 'Proximity 1') }}</div>
|
|
35
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('proximity_2', 'Proximity 2') }}</div>
|
|
36
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('proximity_3', 'Proximity 3') }}</div>
|
|
37
37
|
</div>
|
|
38
38
|
<div class="ui-snap-y-proximity" style="max-block-size: 8rem">
|
|
39
|
-
<div class="ui-snap-start ui-card ui-
|
|
40
|
-
<div class="ui-snap-start ui-card ui-
|
|
41
|
-
<div class="ui-snap-start ui-card ui-
|
|
39
|
+
<div class="ui-snap-start ui-card ui-card--sm">{{ t('section_1', 'Section 1') }}</div>
|
|
40
|
+
<div class="ui-snap-start ui-card ui-card--sm">{{ t('section_2', 'Section 2') }}</div>
|
|
41
|
+
<div class="ui-snap-start ui-card ui-card--sm">{{ t('section_3', 'Section 3') }}</div>
|
|
42
42
|
</div>
|
|
43
43
|
|
|
44
44
|
<!-- @end_alignment_and_stop -->
|
|
45
45
|
<!-- Snap children to end position or force stop at every snap point. -->
|
|
46
46
|
<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
|
|
47
|
-
<div class="ui-snap-end ui-card ui-
|
|
48
|
-
<div class="ui-snap-end ui-card ui-
|
|
49
|
-
<div class="ui-snap-end ui-card ui-
|
|
47
|
+
<div class="ui-snap-end ui-card ui-card--sm demo-snap-item">{{ t('end_1', 'End 1') }}</div>
|
|
48
|
+
<div class="ui-snap-end ui-card ui-card--sm demo-snap-item">{{ t('end_2', 'End 2') }}</div>
|
|
49
|
+
<div class="ui-snap-end ui-card ui-card--sm demo-snap-item">{{ t('end_3', 'End 3') }}</div>
|
|
50
50
|
</div>
|
|
51
51
|
<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
|
|
52
|
-
<div class="ui-snap-start ui-snap-always ui-card ui-
|
|
53
|
-
<div class="ui-snap-start ui-snap-always ui-card ui-
|
|
54
|
-
<div class="ui-snap-start ui-snap-always ui-card ui-
|
|
52
|
+
<div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">{{ t('always_1', 'Always 1') }}</div>
|
|
53
|
+
<div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">{{ t('always_2', 'Always 2') }}</div>
|
|
54
|
+
<div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">{{ t('always_3', 'Always 3') }}</div>
|
|
55
55
|
</div>
|
|
56
56
|
|
|
57
57
|
<!-- @disable_snap -->
|
|
58
58
|
<!-- Remove snap behavior from a container. -->
|
|
59
59
|
<div class="ui-snap-none ui-flex ui-gap-2 ui-p-2 demo-narrow ui-overflow-x-auto">
|
|
60
|
-
<div class="ui-card ui-
|
|
61
|
-
<div class="ui-card ui-
|
|
60
|
+
<div class="ui-card ui-card--sm demo-snap-item">{{ t('no_snap_1', 'No snap 1') }}</div>
|
|
61
|
+
<div class="ui-card ui-card--sm demo-snap-item">{{ t('no_snap_2', 'No snap 2') }}</div>
|
|
62
62
|
</div>
|
|
63
63
|
|
|
64
64
|
<!-- @scroll_padding -->
|
|
65
65
|
<!-- Offset snap position for fixed headers or insets. -->
|
|
66
66
|
<div class="ui-snap-x ui-snap-p-1 ui-flex ui-gap-2 ui-p-2 demo-narrow">
|
|
67
|
-
<div class="ui-snap-start ui-card ui-
|
|
68
|
-
<div class="ui-snap-start ui-card ui-
|
|
67
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_1', 'p-1') }}</div>
|
|
68
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_1', 'p-1') }}</div>
|
|
69
69
|
</div>
|
|
70
70
|
<div class="ui-snap-x ui-snap-p-2 ui-flex ui-gap-2 ui-p-2 demo-narrow">
|
|
71
|
-
<div class="ui-snap-start ui-card ui-
|
|
72
|
-
<div class="ui-snap-start ui-card ui-
|
|
71
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_2', 'p-2') }}</div>
|
|
72
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_2', 'p-2') }}</div>
|
|
73
73
|
</div>
|
|
74
74
|
<div class="ui-snap-x ui-snap-p-4 ui-flex ui-gap-2 ui-p-2 demo-narrow">
|
|
75
|
-
<div class="ui-snap-start ui-card ui-
|
|
76
|
-
<div class="ui-snap-start ui-card ui-
|
|
75
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_4', 'p-4') }}</div>
|
|
76
|
+
<div class="ui-snap-start ui-card ui-card--sm demo-snap-item">{{ t('p_4', 'p-4') }}</div>
|
|
77
77
|
</div>
|
|
@@ -6,7 +6,7 @@ description: Hides content visually while keeping it accessible to screen reader
|
|
|
6
6
|
|
|
7
7
|
<!-- @default -->
|
|
8
8
|
<!-- Content is hidden visually but announced by screen readers -->
|
|
9
|
-
<button>
|
|
9
|
+
<button class="ui-button">
|
|
10
10
|
{{ t('submit', 'Submit') }}
|
|
11
11
|
<span class="ui-visually-hidden"> {{ t('form_to_contact_support', 'form to contact support') }}</span>
|
|
12
12
|
</button>
|