@uncinq/css-components 0.2.2 → 0.3.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/css/component/alert.css +1 -0
- package/css/component/btn-close.css +44 -0
- package/css/component/btn-menu.css +44 -0
- package/css/component/btn-search.css +44 -0
- package/css/component/button.css +60 -0
- package/css/component/nav.css +4 -9
- package/css/component/pagination.css +29 -0
- package/css/index.css +3 -0
- package/package.json +1 -1
package/css/component/alert.css
CHANGED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/* component/btn-close.css */
|
|
2
|
+
/* Close button */
|
|
3
|
+
@layer components {
|
|
4
|
+
.btn-close {
|
|
5
|
+
align-items: center;
|
|
6
|
+
appearance: none;
|
|
7
|
+
background-color: var(--btn-close-color-bg, var(--btn-color-bg));
|
|
8
|
+
border: var(--btn-close-border-width, var(--btn-border-width)) var(--btn-close-border-style, var(--btn-border-style)) var(--btn-close-color-border, var(--btn-color-border));
|
|
9
|
+
border-radius: var(--btn-close-border-radius, var(--btn-border-radius));
|
|
10
|
+
color: var(--btn-close-color-text, var(--btn-color-text));
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
font-size: var(--btn-close-font-size, var(--btn-font-size));
|
|
14
|
+
font-weight: var(--btn-close-font-weight, var(--btn-font-weight));
|
|
15
|
+
gap: var(--btn-close-gap, var(--btn-gap));
|
|
16
|
+
padding: var(--btn-close-padding-y, var(--btn-padding-y)) var(--btn-close-padding-x, var(--btn-padding-x));
|
|
17
|
+
text-decoration-color: var(--btn-close-color-text-decoration, var(--btn-color-text-decoration));
|
|
18
|
+
text-decoration-line: var(--btn-text-decoration-line);
|
|
19
|
+
text-decoration-thickness: var(--text-decoration-thickness);
|
|
20
|
+
text-transform: var(--btn-text-transform);
|
|
21
|
+
text-underline-offset: var(--text-decoration-offset);
|
|
22
|
+
|
|
23
|
+
&::before {
|
|
24
|
+
background-color: currentColor;
|
|
25
|
+
content: '';
|
|
26
|
+
flex-shrink: 0;
|
|
27
|
+
height: var(--icon-size);
|
|
28
|
+
mask: var(--icon-close) center / var(--icon-size) no-repeat;
|
|
29
|
+
width: var(--icon-size);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (hover: hover) and (pointer: fine) {
|
|
33
|
+
&:hover {
|
|
34
|
+
background-color: var(--btn-close-color-bg-hover, var(--btn-color-bg-hover));
|
|
35
|
+
color: var(--btn-close-color-text-hover, var(--btn-color-text-hover));
|
|
36
|
+
text-decoration-color: var(--btn-close-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
41
|
+
transition: var(--btn-transition);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/* component/btn-menu.css */
|
|
2
|
+
/* Menu toggle button */
|
|
3
|
+
@layer components {
|
|
4
|
+
.btn-menu {
|
|
5
|
+
align-items: center;
|
|
6
|
+
appearance: none;
|
|
7
|
+
background-color: var(--btn-menu-color-bg, var(--btn-color-bg));
|
|
8
|
+
border: var(--btn-menu-border-width, var(--btn-border-width)) var(--btn-menu-border-style, var(--btn-border-style)) var(--btn-menu-color-border, var(--btn-color-border));
|
|
9
|
+
border-radius: var(--btn-menu-border-radius, var(--btn-border-radius));
|
|
10
|
+
color: var(--btn-menu-color-text, var(--btn-color-text));
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
font-size: var(--btn-menu-font-size, var(--btn-font-size));
|
|
14
|
+
font-weight: var(--btn-menu-font-weight, var(--btn-font-weight));
|
|
15
|
+
gap: var(--btn-menu-gap, var(--btn-gap));
|
|
16
|
+
padding: var(--btn-menu-padding-y, var(--btn-padding-y)) var(--btn-menu-padding-x, var(--btn-padding-x));
|
|
17
|
+
text-decoration-color: var(--btn-menu-color-text-decoration, var(--btn-color-text-decoration));
|
|
18
|
+
text-decoration-line: var(--btn-text-decoration-line);
|
|
19
|
+
text-decoration-thickness: var(--text-decoration-thickness);
|
|
20
|
+
text-transform: var(--btn-text-transform);
|
|
21
|
+
text-underline-offset: var(--text-decoration-offset);
|
|
22
|
+
|
|
23
|
+
&::before {
|
|
24
|
+
background-color: currentColor;
|
|
25
|
+
content: '';
|
|
26
|
+
flex-shrink: 0;
|
|
27
|
+
height: var(--icon-size);
|
|
28
|
+
mask: var(--icon-menu) center / var(--icon-size) no-repeat;
|
|
29
|
+
width: var(--icon-size);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (hover: hover) and (pointer: fine) {
|
|
33
|
+
&:hover {
|
|
34
|
+
background-color: var(--btn-menu-color-bg-hover, var(--btn-color-bg-hover));
|
|
35
|
+
color: var(--btn-menu-color-text-hover, var(--btn-color-text-hover));
|
|
36
|
+
text-decoration-color: var(--btn-menu-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
41
|
+
transition: var(--btn-transition);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/* component/btn-search.css */
|
|
2
|
+
/* Search button */
|
|
3
|
+
@layer components {
|
|
4
|
+
.btn-search {
|
|
5
|
+
align-items: center;
|
|
6
|
+
appearance: none;
|
|
7
|
+
background-color: var(--btn-search-color-bg, var(--btn-color-bg));
|
|
8
|
+
border: var(--btn-search-border-width, var(--btn-border-width)) var(--btn-search-border-style, var(--btn-border-style)) var(--btn-search-color-border, var(--btn-color-border));
|
|
9
|
+
border-radius: var(--btn-search-border-radius, var(--btn-border-radius));
|
|
10
|
+
color: var(--btn-search-color-text, var(--btn-color-text));
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
font-size: var(--btn-search-font-size, var(--btn-font-size));
|
|
14
|
+
font-weight: var(--btn-search-font-weight, var(--btn-font-weight));
|
|
15
|
+
gap: var(--btn-search-gap, var(--btn-gap));
|
|
16
|
+
padding: var(--btn-search-padding-y, var(--btn-padding-y)) var(--btn-search-padding-x, var(--btn-padding-x));
|
|
17
|
+
text-decoration-color: var(--btn-search-color-text-decoration, var(--btn-color-text-decoration));
|
|
18
|
+
text-decoration-line: var(--btn-text-decoration-line);
|
|
19
|
+
text-decoration-thickness: var(--text-decoration-thickness);
|
|
20
|
+
text-transform: var(--btn-text-transform);
|
|
21
|
+
text-underline-offset: var(--text-decoration-offset);
|
|
22
|
+
|
|
23
|
+
&::before {
|
|
24
|
+
background-color: currentColor;
|
|
25
|
+
content: '';
|
|
26
|
+
flex-shrink: 0;
|
|
27
|
+
height: var(--icon-size);
|
|
28
|
+
mask: var(--icon-search) center / var(--icon-size) no-repeat;
|
|
29
|
+
width: var(--icon-size);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@media (hover: hover) and (pointer: fine) {
|
|
33
|
+
&:hover {
|
|
34
|
+
background-color: var(--btn-search-color-bg-hover, var(--btn-color-bg-hover));
|
|
35
|
+
color: var(--btn-search-color-text-hover, var(--btn-color-text-hover));
|
|
36
|
+
text-decoration-color: var(--btn-search-color-text-decoration-hover, var(--btn-color-text-decoration-hover));
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
41
|
+
transition: var(--btn-transition);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
package/css/component/button.css
CHANGED
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
@media (hover: hover) and (pointer: fine) {
|
|
35
35
|
&:hover {
|
|
36
36
|
background-color: var(--btn-color-bg-hover);
|
|
37
|
+
border-color: var(--btn-color-border-hover);
|
|
37
38
|
color: var(--btn-color-text-hover);
|
|
38
39
|
text-decoration-color: var(--btn-color-text-decoration-hover);
|
|
39
40
|
}
|
|
@@ -47,34 +48,93 @@
|
|
|
47
48
|
/* Variants */
|
|
48
49
|
.btn-danger {
|
|
49
50
|
--btn-color-bg: var(--color-danger);
|
|
51
|
+
--btn-color-bg-hover: var(--color-danger-strong);
|
|
50
52
|
--btn-color-border: var(--color-danger);
|
|
53
|
+
--btn-color-border-hover: var(--color-danger-strong);
|
|
51
54
|
--btn-color-text: var(--color-text-on-danger);
|
|
52
55
|
}
|
|
53
56
|
|
|
57
|
+
.btn-dark {
|
|
58
|
+
--btn-color-bg: var(--color-dark);
|
|
59
|
+
--btn-color-bg-hover: var(--color-dark-strong);
|
|
60
|
+
--btn-color-border: var(--color-dark);
|
|
61
|
+
--btn-color-border-hover: var(--color-dark-strong);
|
|
62
|
+
--btn-color-text: var(--color-text-on-dark);
|
|
63
|
+
}
|
|
64
|
+
|
|
54
65
|
.btn-ghost {
|
|
55
66
|
--btn-color-bg: transparent;
|
|
67
|
+
--btn-color-bg-hover: transparent;
|
|
68
|
+
--btn-color-border: transparent;
|
|
69
|
+
--btn-color-border-hover: transparent;
|
|
70
|
+
--btn-color-text: var(--color-text);
|
|
71
|
+
--btn-color-text-hover: var(--color-text-hover);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.btn-info {
|
|
75
|
+
--btn-color-bg: var(--color-info);
|
|
76
|
+
--btn-color-bg-hover: var(--color-info-strong);
|
|
77
|
+
--btn-color-border: var(--color-info);
|
|
78
|
+
--btn-color-border-hover: var(--color-info-strong);
|
|
79
|
+
--btn-color-text: var(--color-text-on-info);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.btn-light {
|
|
83
|
+
--btn-color-bg: var(--color-light);
|
|
84
|
+
--btn-color-bg-hover: var(--color-light-strong);
|
|
85
|
+
--btn-color-border: var(--color-light);
|
|
86
|
+
--btn-color-border-hover: var(--color-light-strong);
|
|
87
|
+
--btn-color-text: var(--color-text-on-light);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.btn-link {
|
|
91
|
+
--btn-color-bg: transparent;
|
|
92
|
+
--btn-color-bg-hover: transparent;
|
|
56
93
|
--btn-color-border: transparent;
|
|
94
|
+
--btn-color-border-hover: transparent;
|
|
57
95
|
--btn-color-text: var(--color-text);
|
|
96
|
+
--btn-color-text-hover: var(--color-text);
|
|
97
|
+
--btn-color-text-decoration: initial;
|
|
98
|
+
|
|
99
|
+
@media (hover: hover) and (pointer: fine) {
|
|
100
|
+
&:hover {
|
|
101
|
+
--btn-color-text-decoration: transparent;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
58
104
|
}
|
|
59
105
|
|
|
60
106
|
.btn-primary {
|
|
61
107
|
--btn-color-bg: var(--color-brand);
|
|
108
|
+
--btn-color-bg-hover: var(--color-brand-strong);
|
|
62
109
|
--btn-color-border: var(--color-brand);
|
|
110
|
+
--btn-color-border-hover: var(--color-brand-strong);
|
|
63
111
|
--btn-color-text: var(--color-text-on-brand);
|
|
64
112
|
}
|
|
65
113
|
|
|
66
114
|
.btn-secondary {
|
|
67
115
|
--btn-color-bg: var(--color-secondary);
|
|
116
|
+
--btn-color-bg-hover: var(--color-secondary-strong);
|
|
68
117
|
--btn-color-border: var(--color-secondary);
|
|
118
|
+
--btn-color-border-hover: var(--color-secondary-strong);
|
|
69
119
|
--btn-color-text: var(--color-text-on-secondary);
|
|
70
120
|
}
|
|
71
121
|
|
|
72
122
|
.btn-success {
|
|
73
123
|
--btn-color-bg: var(--color-success);
|
|
124
|
+
--btn-color-bg-hover: var(--color-success-strong);
|
|
74
125
|
--btn-color-border: var(--color-success);
|
|
126
|
+
--btn-color-border-hover: var(--color-success-strong);
|
|
75
127
|
--btn-color-text: var(--color-text-on-success);
|
|
76
128
|
}
|
|
77
129
|
|
|
130
|
+
.btn-warning {
|
|
131
|
+
--btn-color-bg: var(--color-warning);
|
|
132
|
+
--btn-color-bg-hover: var(--color-warning-strong);
|
|
133
|
+
--btn-color-border: var(--color-warning);
|
|
134
|
+
--btn-color-border-hover: var(--color-warning-strong);
|
|
135
|
+
--btn-color-text: var(--color-text-on-warning);
|
|
136
|
+
}
|
|
137
|
+
|
|
78
138
|
/* Sizes */
|
|
79
139
|
.btn-xs {
|
|
80
140
|
--btn-font-size: var(--font-size-xs);
|
package/css/component/nav.css
CHANGED
|
@@ -14,8 +14,7 @@
|
|
|
14
14
|
@layer components {
|
|
15
15
|
.nav {
|
|
16
16
|
&,
|
|
17
|
-
ul,
|
|
18
|
-
ol {
|
|
17
|
+
:is(ul, ol) {
|
|
19
18
|
display: flex;
|
|
20
19
|
flex-direction: var(--nav-direction, column);
|
|
21
20
|
gap: var(--nav-gap);
|
|
@@ -26,6 +25,8 @@
|
|
|
26
25
|
/* ── Nav item ────────────────────────────────────────────────── */
|
|
27
26
|
|
|
28
27
|
li {
|
|
28
|
+
margin-block: var(--nav-margin-y, 0);
|
|
29
|
+
margin-inline: var(--nav-margin-x, 0);
|
|
29
30
|
position: relative;
|
|
30
31
|
}
|
|
31
32
|
|
|
@@ -53,14 +54,8 @@
|
|
|
53
54
|
/* ── Item highlighted ───────────────────────────────────────────────────── */
|
|
54
55
|
|
|
55
56
|
.nav-item-highlighted {
|
|
56
|
-
line-height:
|
|
57
|
+
line-height: var(--line-height-snug);
|
|
57
58
|
margin-inline: var(--nav-padding-x);
|
|
58
|
-
&:first-child {
|
|
59
|
-
margin-inline-start: 0;
|
|
60
|
-
}
|
|
61
|
-
&:last-child {
|
|
62
|
-
margin-inline-end: 0;
|
|
63
|
-
}
|
|
64
59
|
}
|
|
65
60
|
}
|
|
66
61
|
}
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
display: flex;
|
|
20
20
|
flex-wrap: wrap;
|
|
21
21
|
gap: var(--pagination-gap);
|
|
22
|
+
justify-content: center;
|
|
22
23
|
list-style: none;
|
|
23
24
|
margin-block: 0;
|
|
24
25
|
padding-inline-start: 0;
|
|
@@ -61,6 +62,34 @@
|
|
|
61
62
|
pointer-events: none;
|
|
62
63
|
}
|
|
63
64
|
|
|
65
|
+
:is(.first, .previous, .next, .last) {
|
|
66
|
+
&::after {
|
|
67
|
+
background-color: currentColor;
|
|
68
|
+
content: '';
|
|
69
|
+
flex-shrink: 0;
|
|
70
|
+
height: var(--pagination-icon-size);
|
|
71
|
+
width: var(--pagination-icon-size);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.first::after {
|
|
76
|
+
mask: var(--pagination-icon-first) center / var(--pagination-icon-size) no-repeat;
|
|
77
|
+
rotate: 180deg;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.previous::after {
|
|
81
|
+
mask: var(--pagination-icon-previous) center / var(--pagination-icon-size) no-repeat;
|
|
82
|
+
rotate: 180deg;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.next::after {
|
|
86
|
+
mask: var(--pagination-icon-next) center / var(--pagination-icon-size) no-repeat;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.last::after {
|
|
90
|
+
mask: var(--pagination-icon-last) center / var(--pagination-icon-size) no-repeat;
|
|
91
|
+
}
|
|
92
|
+
|
|
64
93
|
/* On small screens: hide first/last controls and non-adjacent page numbers */
|
|
65
94
|
@media (--mobile-only) {
|
|
66
95
|
.first,
|
package/css/index.css
CHANGED
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
@import 'component/badge.css';
|
|
4
4
|
@import 'component/banner.css';
|
|
5
5
|
@import 'component/breadcrumb.css';
|
|
6
|
+
@import 'component/btn-close.css';
|
|
7
|
+
@import 'component/btn-menu.css';
|
|
8
|
+
@import 'component/btn-search.css';
|
|
6
9
|
@import 'component/button.css';
|
|
7
10
|
@import 'component/card.css';
|
|
8
11
|
@import 'component/drawer.css';
|