@digiko-npm/designsystem 0.2.2 → 0.2.3
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/dist/designsystem.css +331 -263
- package/dist/designsystem.min.css +1 -1
- package/package.json +1 -1
- package/src/base/typography.css +6 -0
- package/src/components/accordion.css +36 -32
- package/src/components/alert.css +1 -1
- package/src/components/badge.css +3 -3
- package/src/components/breadcrumb.css +2 -2
- package/src/components/button.css +32 -12
- package/src/components/command.css +32 -33
- package/src/components/drawer.css +31 -30
- package/src/components/input.css +19 -4
- package/src/components/kbd.css +18 -19
- package/src/components/modal.css +1 -1
- package/src/components/pagination.css +4 -4
- package/src/components/popover.css +21 -22
- package/src/components/progress.css +52 -48
- package/src/components/slider.css +18 -19
- package/src/components/tabs.css +1 -1
- package/src/components/tag.css +5 -5
- package/src/components/timeline.css +24 -25
- package/src/components/toast.css +1 -1
- package/src/components/toggle.css +3 -3
- package/src/tokens/colors.css +8 -0
- package/src/tokens/spacing.css +14 -0
- package/src/tokens/typography.css +1 -0
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
display: inline-flex;
|
|
8
8
|
align-items: center;
|
|
9
9
|
justify-content: center;
|
|
10
|
+
height: var(--ds-size-3);
|
|
10
11
|
gap: var(--ds-space-2);
|
|
11
|
-
padding:
|
|
12
|
+
padding: 0 var(--ds-space-4);
|
|
12
13
|
font-family: var(--ds-font-sans);
|
|
13
14
|
font-size: var(--ds-text-sm);
|
|
14
15
|
font-weight: var(--ds-weight-medium);
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
border-radius: var(--ds-radius-lg);
|
|
18
19
|
border: 1px solid transparent;
|
|
19
20
|
cursor: pointer;
|
|
20
|
-
transition: all var(--ds-duration-fast) ease;
|
|
21
|
+
transition: all var(--ds-duration-fast) var(--ds-ease-default);
|
|
21
22
|
|
|
22
23
|
/* Default: inverted (dark bg in light mode, light bg in dark mode) */
|
|
23
24
|
background-color: var(--ds-color-inverted);
|
|
@@ -81,7 +82,7 @@
|
|
|
81
82
|
}
|
|
82
83
|
.ds-btn--danger:hover {
|
|
83
84
|
background-color: var(--ds-color-error);
|
|
84
|
-
color:
|
|
85
|
+
color: var(--ds-color-on-inverted);
|
|
85
86
|
opacity: 1;
|
|
86
87
|
}
|
|
87
88
|
|
|
@@ -92,21 +93,31 @@
|
|
|
92
93
|
}
|
|
93
94
|
.ds-btn--success:hover {
|
|
94
95
|
background-color: var(--ds-color-success);
|
|
95
|
-
color:
|
|
96
|
+
color: var(--ds-color-on-inverted);
|
|
96
97
|
opacity: 1;
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
/* --- Sizes --- */
|
|
100
101
|
|
|
102
|
+
.ds-btn--xs {
|
|
103
|
+
height: var(--ds-size-1);
|
|
104
|
+
padding: 0 var(--ds-space-2);
|
|
105
|
+
font-size: var(--ds-text-xs);
|
|
106
|
+
gap: var(--ds-space-1);
|
|
107
|
+
border-radius: var(--ds-radius-md);
|
|
108
|
+
}
|
|
109
|
+
|
|
101
110
|
.ds-btn--sm {
|
|
102
|
-
|
|
111
|
+
height: var(--ds-size-2);
|
|
112
|
+
padding: 0 var(--ds-space-3);
|
|
103
113
|
font-size: var(--ds-text-sm);
|
|
104
114
|
gap: var(--ds-space-1-5);
|
|
105
115
|
border-radius: var(--ds-radius-md);
|
|
106
116
|
}
|
|
107
117
|
|
|
108
118
|
.ds-btn--lg {
|
|
109
|
-
|
|
119
|
+
height: var(--ds-size-4);
|
|
120
|
+
padding: 0 var(--ds-space-6);
|
|
110
121
|
font-size: var(--ds-text-base);
|
|
111
122
|
border-radius: var(--ds-radius-lg);
|
|
112
123
|
}
|
|
@@ -114,11 +125,15 @@
|
|
|
114
125
|
/* --- Pill (rounded-full, like hero CTAs) --- */
|
|
115
126
|
.ds-btn--pill {
|
|
116
127
|
border-radius: var(--ds-radius-full);
|
|
117
|
-
padding:
|
|
128
|
+
padding: 0 var(--ds-space-6);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.ds-btn--pill.ds-btn--xs {
|
|
132
|
+
padding: 0 var(--ds-space-3);
|
|
118
133
|
}
|
|
119
134
|
|
|
120
135
|
.ds-btn--pill.ds-btn--sm {
|
|
121
|
-
padding:
|
|
136
|
+
padding: 0 var(--ds-space-5);
|
|
122
137
|
}
|
|
123
138
|
|
|
124
139
|
/* --- Full Width --- */
|
|
@@ -127,14 +142,19 @@
|
|
|
127
142
|
/* --- Icon Only --- */
|
|
128
143
|
.ds-btn--icon {
|
|
129
144
|
padding: 0;
|
|
130
|
-
width:
|
|
131
|
-
height:
|
|
145
|
+
width: var(--ds-size-3);
|
|
146
|
+
height: var(--ds-size-3);
|
|
132
147
|
border-radius: var(--ds-radius-md);
|
|
133
148
|
}
|
|
134
149
|
|
|
150
|
+
.ds-btn--icon.ds-btn--xs {
|
|
151
|
+
width: var(--ds-size-1);
|
|
152
|
+
height: var(--ds-size-1);
|
|
153
|
+
}
|
|
154
|
+
|
|
135
155
|
.ds-btn--icon.ds-btn--sm {
|
|
136
|
-
width:
|
|
137
|
-
height:
|
|
156
|
+
width: var(--ds-size-2);
|
|
157
|
+
height: var(--ds-size-2);
|
|
138
158
|
}
|
|
139
159
|
|
|
140
160
|
/* --- Button Group --- */
|
|
@@ -1,36 +1,35 @@
|
|
|
1
1
|
/* ==========================================================================
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
* ========================================================================== */
|
|
2
|
+
Command Palette
|
|
3
|
+
==========================================================================
|
|
4
|
+
Command palette / search overlay following the Cmd+K pattern. Provides a
|
|
5
|
+
full-screen overlay with a centered search dialog, grouped results,
|
|
6
|
+
keyboard-navigable items, and a footer with shortcut hints.
|
|
7
|
+
|
|
8
|
+
Usage:
|
|
9
|
+
<div class="ds-command ds-command--open">
|
|
10
|
+
<div class="ds-command__content">
|
|
11
|
+
<div class="ds-command__input-wrapper">
|
|
12
|
+
<span class="ds-command__input-icon">...</span>
|
|
13
|
+
<input class="ds-command__input" placeholder="Search..." />
|
|
14
|
+
</div>
|
|
15
|
+
<div class="ds-command__list">
|
|
16
|
+
<div class="ds-command__group">
|
|
17
|
+
<div class="ds-command__group-heading">Results</div>
|
|
18
|
+
<div class="ds-command__item ds-command__item--active">
|
|
19
|
+
<span class="ds-command__item-icon">...</span>
|
|
20
|
+
<span class="ds-command__item-label">Item</span>
|
|
21
|
+
<span class="ds-command__item-shortcut">Ctrl+N</span>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="ds-command__empty">No results found.</div>
|
|
25
|
+
</div>
|
|
26
|
+
<div class="ds-command__footer">...</div>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
Modifiers:
|
|
31
|
+
.ds-command--open — Shows the command palette
|
|
32
|
+
========================================================================== */
|
|
34
33
|
|
|
35
34
|
/* Overlay */
|
|
36
35
|
.ds-command {
|
|
@@ -119,7 +118,7 @@
|
|
|
119
118
|
.ds-command__group-heading {
|
|
120
119
|
font-size: var(--ds-text-xs);
|
|
121
120
|
text-transform: uppercase;
|
|
122
|
-
letter-spacing:
|
|
121
|
+
letter-spacing: var(--ds-tracking-wide);
|
|
123
122
|
color: var(--ds-color-text-tertiary);
|
|
124
123
|
padding: var(--ds-space-2) var(--ds-space-3);
|
|
125
124
|
font-weight: var(--ds-weight-medium);
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
/* ==========================================================================
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
2
|
+
Drawer / Sheet
|
|
3
|
+
==========================================================================
|
|
4
|
+
A sliding overlay panel anchored to the edge of the viewport.
|
|
5
|
+
Default direction is right; use `--left` or `--bottom` modifiers
|
|
6
|
+
to change the slide origin.
|
|
7
|
+
|
|
8
|
+
Sizes:
|
|
9
|
+
--sm 18 rem
|
|
10
|
+
(default) 24 rem
|
|
11
|
+
--lg 36 rem
|
|
12
|
+
|
|
13
|
+
Usage:
|
|
14
|
+
<div class="ds-drawer ds-drawer--right ds-drawer--open">
|
|
15
|
+
<div class="ds-drawer__content">
|
|
16
|
+
<div class="ds-drawer__header">
|
|
17
|
+
<h3>Title</h3>
|
|
18
|
+
<button class="ds-drawer__close" aria-label="Close">×</button>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="ds-drawer__body">…</div>
|
|
21
|
+
<div class="ds-drawer__footer">…</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
========================================================================== */
|
|
25
|
+
|
|
26
|
+
/* ---------------------------------------------------------------------------
|
|
27
|
+
Overlay backdrop
|
|
28
|
+
--------------------------------------------------------------------------- */
|
|
29
29
|
|
|
30
30
|
.ds-drawer {
|
|
31
31
|
position: fixed;
|
|
@@ -44,8 +44,9 @@
|
|
|
44
44
|
visibility: visible;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
/*
|
|
48
|
-
|
|
47
|
+
/* ---------------------------------------------------------------------------
|
|
48
|
+
Sliding panel
|
|
49
|
+
--------------------------------------------------------------------------- */
|
|
49
50
|
|
|
50
51
|
.ds-drawer__content {
|
|
51
52
|
position: fixed;
|
|
@@ -172,7 +173,7 @@
|
|
|
172
173
|
background-color: transparent;
|
|
173
174
|
color: var(--ds-color-text-tertiary);
|
|
174
175
|
font-size: var(--ds-text-lg);
|
|
175
|
-
line-height:
|
|
176
|
+
line-height: var(--ds-leading-none);
|
|
176
177
|
cursor: pointer;
|
|
177
178
|
flex-shrink: 0;
|
|
178
179
|
transition:
|
package/src/components/input.css
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
.ds-textarea,
|
|
16
16
|
.ds-select {
|
|
17
17
|
width: 100%;
|
|
18
|
-
padding:
|
|
18
|
+
padding: 0 var(--ds-space-4);
|
|
19
19
|
font-family: var(--ds-font-sans);
|
|
20
20
|
font-size: var(--ds-text-sm);
|
|
21
21
|
line-height: var(--ds-leading-normal);
|
|
@@ -23,7 +23,12 @@
|
|
|
23
23
|
background-color: var(--ds-color-surface);
|
|
24
24
|
border: 1px solid var(--ds-color-border);
|
|
25
25
|
border-radius: var(--ds-radius-lg);
|
|
26
|
-
transition: all var(--ds-duration-fast) ease;
|
|
26
|
+
transition: all var(--ds-duration-fast) var(--ds-ease-default);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.ds-input,
|
|
30
|
+
.ds-select {
|
|
31
|
+
height: var(--ds-size-3);
|
|
27
32
|
}
|
|
28
33
|
|
|
29
34
|
.ds-input:hover,
|
|
@@ -60,14 +65,23 @@
|
|
|
60
65
|
}
|
|
61
66
|
|
|
62
67
|
/* Sizes */
|
|
68
|
+
.ds-input--xs {
|
|
69
|
+
height: var(--ds-size-1);
|
|
70
|
+
padding: 0 var(--ds-space-1-5);
|
|
71
|
+
font-size: var(--ds-text-xs);
|
|
72
|
+
border-radius: var(--ds-radius-sm);
|
|
73
|
+
}
|
|
74
|
+
|
|
63
75
|
.ds-input--sm {
|
|
64
|
-
|
|
76
|
+
height: var(--ds-size-2);
|
|
77
|
+
padding: 0 var(--ds-space-2);
|
|
65
78
|
font-size: var(--ds-text-xs);
|
|
66
79
|
border-radius: var(--ds-radius-md);
|
|
67
80
|
}
|
|
68
81
|
|
|
69
82
|
.ds-input--lg {
|
|
70
|
-
|
|
83
|
+
height: var(--ds-size-4);
|
|
84
|
+
padding: 0 var(--ds-space-4);
|
|
71
85
|
font-size: var(--ds-text-base);
|
|
72
86
|
}
|
|
73
87
|
|
|
@@ -75,6 +89,7 @@
|
|
|
75
89
|
.ds-textarea {
|
|
76
90
|
min-height: 6rem;
|
|
77
91
|
padding: var(--ds-space-2-5) var(--ds-space-4);
|
|
92
|
+
height: auto;
|
|
78
93
|
resize: vertical;
|
|
79
94
|
}
|
|
80
95
|
|
package/src/components/kbd.css
CHANGED
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
/* ==========================================================================
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
* ========================================================================== */
|
|
2
|
+
Kbd
|
|
3
|
+
==========================================================================
|
|
4
|
+
Keyboard shortcut display component with a raised 3D key appearance.
|
|
5
|
+
Use individually or group multiple keys with ds-kbd-group for combos
|
|
6
|
+
like "Cmd + K".
|
|
7
|
+
|
|
8
|
+
Usage:
|
|
9
|
+
<kbd class="ds-kbd">Esc</kbd>
|
|
10
|
+
|
|
11
|
+
<span class="ds-kbd-group">
|
|
12
|
+
<kbd class="ds-kbd">Cmd</kbd>
|
|
13
|
+
<span class="ds-kbd-group__separator">+</span>
|
|
14
|
+
<kbd class="ds-kbd">K</kbd>
|
|
15
|
+
</span>
|
|
16
|
+
|
|
17
|
+
Modifiers:
|
|
18
|
+
.ds-kbd--lg — Larger key display
|
|
19
|
+
========================================================================== */
|
|
21
20
|
|
|
22
21
|
.ds-kbd {
|
|
23
22
|
display: inline-flex;
|
package/src/components/modal.css
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
background-color: var(--ds-color-surface);
|
|
35
35
|
border: 1px solid var(--ds-color-border);
|
|
36
36
|
border-radius: var(--ds-radius-xl);
|
|
37
|
-
box-shadow:
|
|
37
|
+
box-shadow: var(--ds-shadow-lg);
|
|
38
38
|
overflow: hidden;
|
|
39
39
|
display: flex;
|
|
40
40
|
flex-direction: column;
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
.ds-pagination__item:focus-visible {
|
|
60
|
-
outline:
|
|
61
|
-
outline-offset:
|
|
60
|
+
outline: var(--ds-ring-width) solid var(--ds-ring-color);
|
|
61
|
+
outline-offset: var(--ds-ring-offset);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
/* ---------------------------------------------------------------------------
|
|
@@ -116,8 +116,8 @@
|
|
|
116
116
|
|
|
117
117
|
.ds-pagination__prev:focus-visible,
|
|
118
118
|
.ds-pagination__next:focus-visible {
|
|
119
|
-
outline:
|
|
120
|
-
outline-offset:
|
|
119
|
+
outline: var(--ds-ring-width) solid var(--ds-ring-color);
|
|
120
|
+
outline-offset: var(--ds-ring-offset);
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.ds-pagination__prev:disabled,
|
|
@@ -1,26 +1,25 @@
|
|
|
1
1
|
/* ==========================================================================
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
* ========================================================================== */
|
|
2
|
+
Popover
|
|
3
|
+
==========================================================================
|
|
4
|
+
Flexible popover component for displaying complex content anchored to a
|
|
5
|
+
trigger element. Supports four placement directions (top, bottom, left,
|
|
6
|
+
right) and multiple size variants. Default placement is bottom.
|
|
7
|
+
|
|
8
|
+
Usage:
|
|
9
|
+
<div class="ds-popover ds-popover--open">
|
|
10
|
+
<button>Trigger</button>
|
|
11
|
+
<div class="ds-popover__content">...</div>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
Modifiers:
|
|
15
|
+
.ds-popover--open — Shows the popover content
|
|
16
|
+
.ds-popover--top — Places content above the trigger
|
|
17
|
+
.ds-popover--bottom — Places content below the trigger (default)
|
|
18
|
+
.ds-popover--left — Places content to the left of the trigger
|
|
19
|
+
.ds-popover--right — Places content to the right of the trigger
|
|
20
|
+
.ds-popover__content--sm — Smaller popover (12rem min-width)
|
|
21
|
+
.ds-popover__content--lg — Larger popover (24rem min-width)
|
|
22
|
+
========================================================================== */
|
|
24
23
|
|
|
25
24
|
.ds-popover {
|
|
26
25
|
position: relative;
|
|
@@ -1,42 +1,41 @@
|
|
|
1
1
|
/* ==========================================================================
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
* ========================================================================== */
|
|
2
|
+
Progress Bar & Step Indicator
|
|
3
|
+
==========================================================================
|
|
4
|
+
Two related components for communicating progress:
|
|
5
|
+
|
|
6
|
+
1. Progress bar — a horizontal fill bar with optional label row.
|
|
7
|
+
Sizes: --sm, (default), --lg
|
|
8
|
+
Statuses: --success, --warning, --error, --info
|
|
9
|
+
|
|
10
|
+
2. Step indicator — a numbered sequence of steps with connectors.
|
|
11
|
+
States: --completed, --current, --error
|
|
12
|
+
Layout: horizontal (default), --vertical
|
|
13
|
+
|
|
14
|
+
Progress bar usage:
|
|
15
|
+
<div class="ds-progress__label">
|
|
16
|
+
<span>Uploading…</span><span>64 %</span>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="ds-progress">
|
|
19
|
+
<div class="ds-progress__bar" style="width: 64%"></div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
Step indicator usage:
|
|
23
|
+
<div class="ds-steps">
|
|
24
|
+
<div class="ds-step ds-step--completed">
|
|
25
|
+
<div class="ds-step__indicator">1</div>
|
|
26
|
+
<div class="ds-step__content">
|
|
27
|
+
<span class="ds-step__title">Account</span>
|
|
28
|
+
<span class="ds-step__description">Create your account</span>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="ds-step__connector"></div>
|
|
32
|
+
<div class="ds-step ds-step--current">…</div>
|
|
33
|
+
</div>
|
|
34
|
+
========================================================================== */
|
|
36
35
|
|
|
37
36
|
/* ==========================================================================
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
Progress Bar
|
|
38
|
+
========================================================================== */
|
|
40
39
|
|
|
41
40
|
/* Label row (sits above the bar) */
|
|
42
41
|
.ds-progress__label {
|
|
@@ -65,8 +64,9 @@
|
|
|
65
64
|
transition: width var(--ds-duration-normal) var(--ds-ease-default);
|
|
66
65
|
}
|
|
67
66
|
|
|
68
|
-
/*
|
|
69
|
-
|
|
67
|
+
/* ---------------------------------------------------------------------------
|
|
68
|
+
Sizes
|
|
69
|
+
--------------------------------------------------------------------------- */
|
|
70
70
|
|
|
71
71
|
.ds-progress--sm {
|
|
72
72
|
height: 0.25rem;
|
|
@@ -76,8 +76,9 @@
|
|
|
76
76
|
height: 0.75rem;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
/*
|
|
80
|
-
|
|
79
|
+
/* ---------------------------------------------------------------------------
|
|
80
|
+
Status colours
|
|
81
|
+
--------------------------------------------------------------------------- */
|
|
81
82
|
|
|
82
83
|
.ds-progress--success .ds-progress__bar {
|
|
83
84
|
background-color: var(--ds-color-success);
|
|
@@ -96,8 +97,8 @@
|
|
|
96
97
|
}
|
|
97
98
|
|
|
98
99
|
/* ==========================================================================
|
|
99
|
-
|
|
100
|
-
|
|
100
|
+
Step Indicator
|
|
101
|
+
========================================================================== */
|
|
101
102
|
|
|
102
103
|
/* Steps container (horizontal by default) */
|
|
103
104
|
.ds-steps {
|
|
@@ -113,8 +114,9 @@
|
|
|
113
114
|
align-items: flex-start;
|
|
114
115
|
}
|
|
115
116
|
|
|
116
|
-
/*
|
|
117
|
-
|
|
117
|
+
/* ---------------------------------------------------------------------------
|
|
118
|
+
Single step
|
|
119
|
+
--------------------------------------------------------------------------- */
|
|
118
120
|
|
|
119
121
|
.ds-step {
|
|
120
122
|
display: flex;
|
|
@@ -161,8 +163,9 @@
|
|
|
161
163
|
color: var(--ds-color-error);
|
|
162
164
|
}
|
|
163
165
|
|
|
164
|
-
/*
|
|
165
|
-
|
|
166
|
+
/* ---------------------------------------------------------------------------
|
|
167
|
+
Step content
|
|
168
|
+
--------------------------------------------------------------------------- */
|
|
166
169
|
|
|
167
170
|
.ds-step__content {
|
|
168
171
|
display: flex;
|
|
@@ -180,8 +183,9 @@
|
|
|
180
183
|
color: var(--ds-color-text-tertiary);
|
|
181
184
|
}
|
|
182
185
|
|
|
183
|
-
/*
|
|
184
|
-
|
|
186
|
+
/* ---------------------------------------------------------------------------
|
|
187
|
+
Connector (line between steps)
|
|
188
|
+
--------------------------------------------------------------------------- */
|
|
185
189
|
|
|
186
190
|
/* Horizontal connector */
|
|
187
191
|
.ds-step__connector {
|
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
/* ==========================================================================
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
* ========================================================================== */
|
|
2
|
+
Slider
|
|
3
|
+
==========================================================================
|
|
4
|
+
Range slider input component with customizable thumb and track styling.
|
|
5
|
+
Supports labels, value display, size variants, and disabled state.
|
|
6
|
+
|
|
7
|
+
Usage:
|
|
8
|
+
<div class="ds-slider">
|
|
9
|
+
<input type="range" min="0" max="100" value="50" />
|
|
10
|
+
<div class="ds-slider__labels">
|
|
11
|
+
<span>0</span>
|
|
12
|
+
<span>100</span>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
Modifiers:
|
|
17
|
+
.ds-slider--sm — Smaller track and thumb
|
|
18
|
+
.ds-slider--disabled — Reduced opacity, no interaction
|
|
19
|
+
========================================================================== */
|
|
21
20
|
|
|
22
21
|
.ds-slider {
|
|
23
22
|
width: 100%;
|
package/src/components/tabs.css
CHANGED