@arclux/arc-ui-html 1.5.1 → 1.6.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/arc-ui.css +34 -5
- package/css/card.css +3 -3
- package/css/feature-card.css +31 -2
- package/package.json +1 -1
package/css/arc-ui.css
CHANGED
|
@@ -425,13 +425,13 @@
|
|
|
425
425
|
.arc-card[interactive] .card { cursor: pointer; }
|
|
426
426
|
|
|
427
427
|
.arc-card .card__inner {
|
|
428
|
-
padding: var(--space-
|
|
428
|
+
padding: var(--space-lg);
|
|
429
429
|
}
|
|
430
430
|
|
|
431
431
|
/* Padding variants */
|
|
432
432
|
.arc-card[data-padding="none"] .card__inner { padding: 0; }
|
|
433
|
-
.arc-card[data-padding="sm"] .card__inner { padding: var(--space-
|
|
434
|
-
.arc-card[data-padding="lg"] .card__inner { padding: var(--space-
|
|
433
|
+
.arc-card[data-padding="sm"] .card__inner { padding: var(--space-sm); }
|
|
434
|
+
.arc-card[data-padding="lg"] .card__inner { padding: var(--space-xl); }
|
|
435
435
|
|
|
436
436
|
.arc-card .card__body {
|
|
437
437
|
flex: 1;
|
|
@@ -866,7 +866,7 @@
|
|
|
866
866
|
.arc-feature-card .card { height: 100%; }
|
|
867
867
|
|
|
868
868
|
.arc-feature-card .card__inner {
|
|
869
|
-
padding: var(--space-
|
|
869
|
+
padding: var(--space-lg);
|
|
870
870
|
gap: var(--space-md);
|
|
871
871
|
z-index: 1;
|
|
872
872
|
}
|
|
@@ -910,6 +910,35 @@
|
|
|
910
910
|
margin: 0;
|
|
911
911
|
}
|
|
912
912
|
|
|
913
|
+
.arc-feature-card .card__action {
|
|
914
|
+
display: inline-flex;
|
|
915
|
+
align-items: center;
|
|
916
|
+
gap: 6px;
|
|
917
|
+
font-family: var(--font-accent);
|
|
918
|
+
font-size: var(--text-xs);
|
|
919
|
+
font-weight: 600;
|
|
920
|
+
letter-spacing: 1.5px;
|
|
921
|
+
text-transform: uppercase;
|
|
922
|
+
color: var(--text-ghost);
|
|
923
|
+
transition: color var(--transition-fast), gap var(--transition-fast);
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
.arc-feature-card .card:hover .card__action {
|
|
927
|
+
color: var(--accent-primary);
|
|
928
|
+
gap: 10px;
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
.arc-feature-card .card__action-arrow {
|
|
932
|
+
display: inline-block;
|
|
933
|
+
width: 14px;
|
|
934
|
+
height: 14px;
|
|
935
|
+
transition: transform var(--transition-fast);
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.arc-feature-card .card:hover .card__action-arrow {
|
|
939
|
+
transform: translateX(2px);
|
|
940
|
+
}
|
|
941
|
+
|
|
913
942
|
.arc-feature-card .card__rule {
|
|
914
943
|
width: 32px;
|
|
915
944
|
height: 1px;
|
|
@@ -921,7 +950,7 @@
|
|
|
921
950
|
.arc-feature-card .card:hover .card__rule { opacity: 0.5; width: 48px; }
|
|
922
951
|
|
|
923
952
|
@media (max-width: 768px) {
|
|
924
|
-
.arc-feature-card .card__inner { padding: var(--space-
|
|
953
|
+
.arc-feature-card .card__inner { padding: var(--space-md); }
|
|
925
954
|
}
|
|
926
955
|
|
|
927
956
|
@media (prefers-reduced-motion: reduce) {
|
package/css/card.css
CHANGED
|
@@ -16,13 +16,13 @@
|
|
|
16
16
|
.arc-card[interactive] .card { cursor: pointer; }
|
|
17
17
|
|
|
18
18
|
.arc-card .card__inner {
|
|
19
|
-
padding: var(--space-
|
|
19
|
+
padding: var(--space-lg);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
/* Padding variants */
|
|
23
23
|
.arc-card[data-padding="none"] .card__inner { padding: 0; }
|
|
24
|
-
.arc-card[data-padding="sm"] .card__inner { padding: var(--space-
|
|
25
|
-
.arc-card[data-padding="lg"] .card__inner { padding: var(--space-
|
|
24
|
+
.arc-card[data-padding="sm"] .card__inner { padding: var(--space-sm); }
|
|
25
|
+
.arc-card[data-padding="lg"] .card__inner { padding: var(--space-xl); }
|
|
26
26
|
|
|
27
27
|
.arc-card .card__body {
|
|
28
28
|
flex: 1;
|
package/css/feature-card.css
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
.arc-feature-card .card { height: 100%; }
|
|
7
7
|
|
|
8
8
|
.arc-feature-card .card__inner {
|
|
9
|
-
padding: var(--space-
|
|
9
|
+
padding: var(--space-lg);
|
|
10
10
|
gap: var(--space-md);
|
|
11
11
|
z-index: 1;
|
|
12
12
|
}
|
|
@@ -50,6 +50,35 @@
|
|
|
50
50
|
margin: 0;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
+
.arc-feature-card .card__action {
|
|
54
|
+
display: inline-flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
gap: 6px;
|
|
57
|
+
font-family: var(--font-accent);
|
|
58
|
+
font-size: var(--text-xs);
|
|
59
|
+
font-weight: 600;
|
|
60
|
+
letter-spacing: 1.5px;
|
|
61
|
+
text-transform: uppercase;
|
|
62
|
+
color: var(--text-ghost);
|
|
63
|
+
transition: color var(--transition-fast), gap var(--transition-fast);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.arc-feature-card .card:hover .card__action {
|
|
67
|
+
color: var(--accent-primary);
|
|
68
|
+
gap: 10px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.arc-feature-card .card__action-arrow {
|
|
72
|
+
display: inline-block;
|
|
73
|
+
width: 14px;
|
|
74
|
+
height: 14px;
|
|
75
|
+
transition: transform var(--transition-fast);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.arc-feature-card .card:hover .card__action-arrow {
|
|
79
|
+
transform: translateX(2px);
|
|
80
|
+
}
|
|
81
|
+
|
|
53
82
|
.arc-feature-card .card__rule {
|
|
54
83
|
width: 32px;
|
|
55
84
|
height: 1px;
|
|
@@ -61,7 +90,7 @@
|
|
|
61
90
|
.arc-feature-card .card:hover .card__rule { opacity: 0.5; width: 48px; }
|
|
62
91
|
|
|
63
92
|
@media (max-width: 768px) {
|
|
64
|
-
.arc-feature-card .card__inner { padding: var(--space-
|
|
93
|
+
.arc-feature-card .card__inner { padding: var(--space-md); }
|
|
65
94
|
}
|
|
66
95
|
|
|
67
96
|
@media (prefers-reduced-motion: reduce) {
|