@redseed/redseed-ui-tailwindcss 5.3.4 → 5.4.1
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/components/card.css +13 -2
- package/components/card_header.css +2 -3
- package/components/checkbox_card.css +88 -0
- package/index.css +1 -0
- package/package.json +1 -1
package/components/card.css
CHANGED
|
@@ -53,10 +53,21 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.rsui-card--md .rsui-card__meta {
|
|
56
|
-
@apply grid-cols-
|
|
56
|
+
@apply grid-cols-4;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.rsui-card--lg .rsui-card__meta {
|
|
60
|
-
@apply
|
|
60
|
+
@apply grid-cols-6 gap-x-8;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
+
.rsui-card--xl .rsui-card__meta {
|
|
64
|
+
@apply grid-cols-8 gap-x-8;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.rsui-card--2xl .rsui-card__meta {
|
|
68
|
+
@apply grid-cols-10 gap-x-8;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.rsui-card--3xl .rsui-card__meta {
|
|
72
|
+
@apply grid-cols-12 gap-x-8;
|
|
73
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
.rsui-card-header {
|
|
2
2
|
@apply flex flex-col gap-x-3 gap-y-5 transition-all;
|
|
3
3
|
@apply md:flex-row md:justify-between md:items-center;
|
|
4
|
-
@apply
|
|
4
|
+
@apply pt-4 pb-0 px-4 sm:px-6;
|
|
5
5
|
@apply border-b border-transparent;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
.rsui-card-header--divider {
|
|
9
|
-
@apply border-border-primary;
|
|
9
|
+
@apply border-border-primary pb-4;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.rsui-card-header__header {
|
|
@@ -61,4 +61,3 @@
|
|
|
61
61
|
.rsui-card-header__more-actions-icon {
|
|
62
62
|
@apply size-5 text-text-secondary;
|
|
63
63
|
}
|
|
64
|
-
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
.rsui-checkbox-card {
|
|
2
|
+
}
|
|
3
|
+
|
|
4
|
+
.rsui-checkbox-card--disabled {
|
|
5
|
+
@apply focus-visible:ring-0;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.rsui-checkbox-card__content {
|
|
9
|
+
@apply flex items-center p-2 gap-4;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.rsui-checkbox-card__icon {
|
|
13
|
+
@apply size-12 flex shrink-0 items-center justify-center rounded-lg transition duration-200;
|
|
14
|
+
@apply border border-text-secondary text-text-secondary;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.rsui-checkbox-card__icon svg {
|
|
18
|
+
@apply size-5;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.rsui-checkbox-card__icon svg path {
|
|
22
|
+
@apply stroke-current;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.rsui-checkbox-card__content-text {
|
|
26
|
+
@apply flex flex-col;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.rsui-checkbox-card__title {
|
|
30
|
+
@apply text-text-primary font-semibold line-clamp-1;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.rsui-checkbox-card__title--disabled {
|
|
34
|
+
@apply text-text-disabled;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.rsui-checkbox-card__supporting-text {
|
|
38
|
+
@apply text-sm text-text-secondary line-clamp-1;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.rsui-checkbox-card__supporting-text--disabled {
|
|
42
|
+
@apply text-text-disabled;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.rsui-checkbox-card__check {
|
|
46
|
+
@apply ml-auto shrink-0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.rsui-checkbox-card__field {
|
|
50
|
+
@apply inline-flex items-center p-0.5 mt-0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.rsui-checkbox-card__field .rsui-form-field-checkbox__checkbox {
|
|
54
|
+
@apply items-center;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.rsui-checkbox-card__title-row {
|
|
58
|
+
@apply inline-flex items-start gap-2;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.rsui-checkbox-card__title-text--strikethrough {
|
|
62
|
+
@apply line-through;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* Align body/meta content with the header title (account for checkbox width + gap) */
|
|
66
|
+
.rsui-checkbox-card .rsui-card__content--padded {
|
|
67
|
+
@apply pl-[3.25rem] sm:pl-[3.75rem];
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Success state styling */
|
|
71
|
+
/* Increase specificity so it overrides base .rsui-card styles */
|
|
72
|
+
.rsui-card.rsui-checkbox-card--success {
|
|
73
|
+
@apply bg-rsui-success-100 border-border-success;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.rsui-checkbox-card--success .rsui-checkbox-card__title-text {
|
|
77
|
+
@apply text-text-success;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.rsui-checkbox-card--success .rsui-form-field-checkbox__check input[type="checkbox"] {
|
|
81
|
+
@apply border-border-success focus:ring-border-success;
|
|
82
|
+
@apply checked:bg-text-success checked:text-text-on-color;
|
|
83
|
+
@apply disabled:bg-background-disabled disabled:text-text-disabled;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.rsui-checkbox-card--success .rsui-form-field-checkbox__check {
|
|
87
|
+
@apply text-text-on-color;
|
|
88
|
+
}
|
package/index.css
CHANGED
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
@import './components/button_tertiary.css';
|
|
7
7
|
@import './components/avatar_text.css';
|
|
8
8
|
@import './components/button_card.css';
|
|
9
|
+
@import './components/checkbox_card.css';
|
|
9
10
|
@import './components/badge.css';
|
|
10
11
|
@import './components/badge_group.css';
|
|
11
12
|
@import './components/breadcrumbs.css';
|