@marianmeres/stuic 3.81.0 → 3.83.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.
|
@@ -97,6 +97,7 @@ Only one item can be open at a time:
|
|
|
97
97
|
| --------------------------------------- | ---------------------- | ----------------------------- |
|
|
98
98
|
| `--stuic-accordion-border-color` | `--stuic-color-border` | Item separator color |
|
|
99
99
|
| `--stuic-accordion-border-width` | `1px` | Separator width |
|
|
100
|
+
| `--stuic-accordion-divider-inset` | `0` | Inset of divider from L/R edges (e.g. `16px`) |
|
|
100
101
|
| `--stuic-accordion-radius` | `--radius-md` | Corner rounding |
|
|
101
102
|
| `--stuic-accordion-transition` | `200ms` | Open/close animation duration |
|
|
102
103
|
| `--stuic-accordion-trigger-padding-x` | `1rem` | Trigger horizontal padding |
|
|
@@ -104,6 +105,8 @@ Only one item can be open at a time:
|
|
|
104
105
|
| `--stuic-accordion-trigger-font-weight` | `--font-weight-medium` | Trigger text weight |
|
|
105
106
|
| `--stuic-accordion-trigger-bg` | `transparent` | Trigger background |
|
|
106
107
|
| `--stuic-accordion-trigger-bg-hover` | muted mix | Trigger hover background |
|
|
108
|
+
| `--stuic-accordion-chevron-size` | `16px` | Chevron icon size |
|
|
109
|
+
| `--stuic-accordion-chevron-color` | `currentColor` | Chevron icon color |
|
|
107
110
|
| `--stuic-accordion-content-padding-x` | `1rem` | Content horizontal padding |
|
|
108
111
|
| `--stuic-accordion-content-padding-y` | `0.75rem` | Content vertical padding |
|
|
109
112
|
| `--stuic-accordion-ring-width` | `2px` | Focus ring width |
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
:root {
|
|
8
8
|
/* Border & shape */
|
|
9
9
|
--stuic-accordion-border-color: var(--stuic-color-border);
|
|
10
|
+
--stuic-accordion-divider-inset: 0;
|
|
10
11
|
|
|
11
12
|
/* Animation */
|
|
12
13
|
|
|
@@ -21,6 +22,10 @@
|
|
|
21
22
|
transparent
|
|
22
23
|
);
|
|
23
24
|
|
|
25
|
+
/* Chevron */
|
|
26
|
+
--stuic-accordion-chevron-size: 16px;
|
|
27
|
+
--stuic-accordion-chevron-color: currentColor;
|
|
28
|
+
|
|
24
29
|
/* Content */
|
|
25
30
|
--stuic-accordion-content-padding-x: 1rem;
|
|
26
31
|
--stuic-accordion-content-padding-y: 0.75rem;
|
|
@@ -45,9 +50,12 @@
|
|
|
45
50
|
ITEM
|
|
46
51
|
============================================================================ */
|
|
47
52
|
|
|
48
|
-
.stuic-accordion-item + .stuic-accordion-item {
|
|
49
|
-
|
|
50
|
-
|
|
53
|
+
.stuic-accordion-item + .stuic-accordion-item::before {
|
|
54
|
+
content: "";
|
|
55
|
+
display: block;
|
|
56
|
+
height: var(--stuic-accordion-border-width, var(--stuic-border-width));
|
|
57
|
+
background: var(--stuic-accordion-border-color);
|
|
58
|
+
margin-inline: var(--stuic-accordion-divider-inset);
|
|
51
59
|
}
|
|
52
60
|
|
|
53
61
|
/* ============================================================================
|
|
@@ -89,6 +97,9 @@
|
|
|
89
97
|
|
|
90
98
|
.stuic-accordion-chevron {
|
|
91
99
|
flex-shrink: 0;
|
|
100
|
+
width: var(--stuic-accordion-chevron-size);
|
|
101
|
+
height: var(--stuic-accordion-chevron-size);
|
|
102
|
+
color: var(--stuic-accordion-chevron-color);
|
|
92
103
|
transition: transform var(--stuic-accordion-transition, var(--stuic-transition));
|
|
93
104
|
}
|
|
94
105
|
|