@db-ux/core-components 4.5.4-tailwind-inline-5d37a00 → 4.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/CHANGELOG.md +32 -15
- package/README.md +13 -22
- package/agent/Best-Practise_Common-AI-Mistakes.md +4 -0
- package/agent/_instructions.md +19 -0
- package/build/components/accordion/accordion.css +0 -34
- package/build/components/accordion-item/accordion-item.css +3 -94
- package/build/components/badge/badge.css +6 -102
- package/build/components/brand/brand.css +3 -94
- package/build/components/button/button.css +6 -100
- package/build/components/card/card.css +0 -34
- package/build/components/checkbox/checkbox.css +6 -100
- package/build/components/custom-button/custom-button.css +6 -100
- package/build/components/custom-select/custom-select.css +453 -566
- package/build/components/custom-select-dropdown/custom-select-dropdown.css +147 -238
- package/build/components/custom-select-form-field/custom-select-form-field.css +0 -88
- package/build/components/custom-select-list/custom-select-list.css +0 -88
- package/build/components/custom-select-list-item/custom-select-list-item.css +3 -94
- package/build/components/divider/divider.css +0 -34
- package/build/components/drawer/drawer.css +4 -38
- package/build/components/drawer/drawer.scss +4 -4
- package/build/components/header/header.css +255 -373
- package/build/components/icon/icon.css +0 -34
- package/build/components/infotext/infotext.css +6 -100
- package/build/components/input/input.css +306 -416
- package/build/components/link/link.css +6 -100
- package/build/components/navigation/navigation.css +0 -88
- package/build/components/navigation-item/navigation-item.css +3 -95
- package/build/components/notification/notification.css +741 -868
- package/build/components/page/page.css +0 -34
- package/build/components/popover/popover.css +0 -34
- package/build/components/radio/radio.css +6 -100
- package/build/components/section/section.css +0 -34
- package/build/components/select/select.css +306 -416
- package/build/components/stack/stack-web-component.css +0 -34
- package/build/components/stack/stack.css +0 -34
- package/build/components/switch/switch.css +9 -106
- package/build/components/tab-item/tab-item.css +0 -88
- package/build/components/tab-list/tab-list.css +3 -94
- package/build/components/tab-panel/tab-panel.css +0 -34
- package/build/components/tabs/tabs.css +0 -88
- package/build/components/tag/tag.css +741 -854
- package/build/components/textarea/textarea.css +12 -116
- package/build/components/tooltip/tooltip.css +3 -94
- package/build/styles/absolute.css +1636 -1636
- package/build/styles/absolute.scss +2 -4
- package/build/styles/bundle.css +1989 -0
- package/build/styles/bundle.scss +15 -0
- package/build/styles/dialog-init.css +1 -1
- package/build/styles/index.css +482 -482
- package/build/styles/relative.css +1636 -1636
- package/build/styles/relative.scss +2 -15
- package/build/styles/rollup.css +1636 -1636
- package/build/styles/rollup.scss +2 -4
- package/build/styles/visually-hidden.css +1 -1
- package/build/styles/webpack.css +1636 -1636
- package/build/styles/webpack.scss +2 -4
- package/package.json +4 -4
|
@@ -1,111 +1,17 @@
|
|
|
1
1
|
/* Variants for adaptive components like input, select, notification, ... */
|
|
2
|
-
@layer variables {}
|
|
3
|
-
|
|
4
|
-
@layer variables {}
|
|
5
|
-
|
|
6
|
-
@layer variables {}
|
|
7
|
-
|
|
8
|
-
@layer variables {}
|
|
9
|
-
|
|
10
|
-
@layer variables {}
|
|
11
|
-
|
|
12
|
-
@layer variables {}
|
|
13
|
-
|
|
14
|
-
@layer variables {}
|
|
15
|
-
|
|
16
|
-
@layer variables {}
|
|
17
|
-
|
|
18
|
-
@layer variables {}
|
|
19
|
-
|
|
20
|
-
@layer variables {}
|
|
21
|
-
|
|
22
|
-
@layer variables {}
|
|
23
|
-
|
|
24
|
-
@layer variables {}
|
|
25
|
-
|
|
26
|
-
@layer variables {}
|
|
27
|
-
|
|
28
|
-
@layer variables {}
|
|
29
|
-
|
|
30
|
-
@layer variables {}
|
|
31
|
-
|
|
32
|
-
@layer variables {}
|
|
33
|
-
|
|
34
|
-
@layer variables {}
|
|
35
|
-
|
|
36
|
-
@layer variables {}
|
|
37
|
-
|
|
38
|
-
@layer variables {}
|
|
39
|
-
|
|
40
|
-
@layer variables {}
|
|
41
|
-
|
|
42
|
-
@layer variables {}
|
|
43
|
-
|
|
44
|
-
@layer variables {}
|
|
45
|
-
|
|
46
|
-
@layer variables {}
|
|
47
|
-
|
|
48
|
-
@layer variables {}
|
|
49
|
-
|
|
50
|
-
@layer variables {}
|
|
51
|
-
|
|
52
|
-
@layer variables {}
|
|
53
|
-
|
|
54
|
-
@layer variables {}
|
|
55
|
-
|
|
56
|
-
@layer variables {}
|
|
57
|
-
|
|
58
|
-
@layer variables {}
|
|
59
|
-
|
|
60
|
-
@layer variables {}
|
|
61
|
-
|
|
62
2
|
.db-button {
|
|
63
3
|
font: var(--db-type-body-md);
|
|
64
|
-
/*
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
.db-button {
|
|
68
|
-
/* Those variables are only for components to calculate heights and change icons */
|
|
69
|
-
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
70
|
-
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
71
|
-
}
|
|
4
|
+
/* Those variables are only for components to calculate heights and change icons */
|
|
5
|
+
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
6
|
+
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
72
7
|
}
|
|
73
8
|
|
|
74
|
-
@layer variables {}
|
|
75
|
-
|
|
76
|
-
@layer variables {}
|
|
77
|
-
|
|
78
9
|
.db-button[data-size=small] {
|
|
79
10
|
font: var(--db-type-body-sm);
|
|
80
|
-
/*
|
|
11
|
+
/* Those variables are only for components to calculate heights and change icons */
|
|
12
|
+
--db-icon-font-weight: var(--db-base-body-icon-weight-sm);
|
|
13
|
+
--db-icon-font-size: var(--db-base-body-icon-font-size-sm);
|
|
81
14
|
}
|
|
82
|
-
@layer variables {
|
|
83
|
-
.db-button[data-size=small] {
|
|
84
|
-
/* Those variables are only for components to calculate heights and change icons */
|
|
85
|
-
--db-icon-font-weight: var(--db-base-body-icon-weight-sm);
|
|
86
|
-
--db-icon-font-size: var(--db-base-body-icon-font-size-sm);
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@layer variables {}
|
|
91
|
-
|
|
92
|
-
@layer variables {}
|
|
93
|
-
|
|
94
|
-
@layer variables {}
|
|
95
|
-
|
|
96
|
-
@layer variables {}
|
|
97
|
-
|
|
98
|
-
@layer variables {}
|
|
99
|
-
|
|
100
|
-
@layer variables {}
|
|
101
|
-
|
|
102
|
-
@layer variables {}
|
|
103
|
-
|
|
104
|
-
@layer variables {}
|
|
105
|
-
|
|
106
|
-
@layer variables {}
|
|
107
|
-
|
|
108
|
-
@layer variables {}
|
|
109
15
|
|
|
110
16
|
.db-button {
|
|
111
17
|
border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
|
|
@@ -1,38 +1,4 @@
|
|
|
1
1
|
/* Variants for adaptive components like input, select, notification, ... */
|
|
2
|
-
@layer variables {}
|
|
3
|
-
|
|
4
|
-
@layer variables {}
|
|
5
|
-
|
|
6
|
-
@layer variables {}
|
|
7
|
-
|
|
8
|
-
@layer variables {}
|
|
9
|
-
|
|
10
|
-
@layer variables {}
|
|
11
|
-
|
|
12
|
-
@layer variables {}
|
|
13
|
-
|
|
14
|
-
@layer variables {}
|
|
15
|
-
|
|
16
|
-
@layer variables {}
|
|
17
|
-
|
|
18
|
-
@layer variables {}
|
|
19
|
-
|
|
20
|
-
@layer variables {}
|
|
21
|
-
|
|
22
|
-
@layer variables {}
|
|
23
|
-
|
|
24
|
-
@layer variables {}
|
|
25
|
-
|
|
26
|
-
@layer variables {}
|
|
27
|
-
|
|
28
|
-
@layer variables {}
|
|
29
|
-
|
|
30
|
-
@layer variables {}
|
|
31
|
-
|
|
32
|
-
@layer variables {}
|
|
33
|
-
|
|
34
|
-
@layer variables {}
|
|
35
|
-
|
|
36
2
|
.db-card {
|
|
37
3
|
border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
|
|
38
4
|
}
|
|
@@ -18,40 +18,6 @@
|
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
/* Variants for adaptive components like input, select, notification, ... */
|
|
21
|
-
@layer variables {}
|
|
22
|
-
|
|
23
|
-
@layer variables {}
|
|
24
|
-
|
|
25
|
-
@layer variables {}
|
|
26
|
-
|
|
27
|
-
@layer variables {}
|
|
28
|
-
|
|
29
|
-
@layer variables {}
|
|
30
|
-
|
|
31
|
-
@layer variables {}
|
|
32
|
-
|
|
33
|
-
@layer variables {}
|
|
34
|
-
|
|
35
|
-
@layer variables {}
|
|
36
|
-
|
|
37
|
-
@layer variables {}
|
|
38
|
-
|
|
39
|
-
@layer variables {}
|
|
40
|
-
|
|
41
|
-
@layer variables {}
|
|
42
|
-
|
|
43
|
-
@layer variables {}
|
|
44
|
-
|
|
45
|
-
@layer variables {}
|
|
46
|
-
|
|
47
|
-
@layer variables {}
|
|
48
|
-
|
|
49
|
-
@layer variables {}
|
|
50
|
-
|
|
51
|
-
@layer variables {}
|
|
52
|
-
|
|
53
|
-
@layer variables {}
|
|
54
|
-
|
|
55
21
|
.db-checkbox input:checked:not([data-show-icon-leading=false])::before, .db-checkbox input:indeterminate:not([data-show-icon-leading=false])::before {
|
|
56
22
|
color: var(--db-icon-color, inherit);
|
|
57
23
|
display: inline-block;
|
|
@@ -93,79 +59,19 @@
|
|
|
93
59
|
}
|
|
94
60
|
}
|
|
95
61
|
|
|
96
|
-
@layer variables {}
|
|
97
|
-
|
|
98
|
-
@layer variables {}
|
|
99
|
-
|
|
100
|
-
@layer variables {}
|
|
101
|
-
|
|
102
|
-
@layer variables {}
|
|
103
|
-
|
|
104
|
-
@layer variables {}
|
|
105
|
-
|
|
106
|
-
@layer variables {}
|
|
107
|
-
|
|
108
|
-
@layer variables {}
|
|
109
|
-
|
|
110
|
-
@layer variables {}
|
|
111
|
-
|
|
112
|
-
@layer variables {}
|
|
113
|
-
|
|
114
|
-
@layer variables {}
|
|
115
|
-
|
|
116
|
-
@layer variables {}
|
|
117
|
-
|
|
118
|
-
@layer variables {}
|
|
119
|
-
|
|
120
|
-
@layer variables {}
|
|
121
|
-
|
|
122
62
|
.db-checkbox {
|
|
123
63
|
font: var(--db-type-body-md);
|
|
124
|
-
/*
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
.db-checkbox {
|
|
128
|
-
/* Those variables are only for components to calculate heights and change icons */
|
|
129
|
-
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
130
|
-
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
131
|
-
}
|
|
64
|
+
/* Those variables are only for components to calculate heights and change icons */
|
|
65
|
+
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
66
|
+
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
132
67
|
}
|
|
133
68
|
|
|
134
|
-
@layer variables {}
|
|
135
|
-
|
|
136
|
-
@layer variables {}
|
|
137
|
-
|
|
138
69
|
.db-checkbox[data-size=small] {
|
|
139
70
|
font: var(--db-type-body-sm);
|
|
140
|
-
/*
|
|
71
|
+
/* Those variables are only for components to calculate heights and change icons */
|
|
72
|
+
--db-icon-font-weight: var(--db-base-body-icon-weight-sm);
|
|
73
|
+
--db-icon-font-size: var(--db-base-body-icon-font-size-sm);
|
|
141
74
|
}
|
|
142
|
-
@layer variables {
|
|
143
|
-
.db-checkbox[data-size=small] {
|
|
144
|
-
/* Those variables are only for components to calculate heights and change icons */
|
|
145
|
-
--db-icon-font-weight: var(--db-base-body-icon-weight-sm);
|
|
146
|
-
--db-icon-font-size: var(--db-base-body-icon-font-size-sm);
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
@layer variables {}
|
|
151
|
-
|
|
152
|
-
@layer variables {}
|
|
153
|
-
|
|
154
|
-
@layer variables {}
|
|
155
|
-
|
|
156
|
-
@layer variables {}
|
|
157
|
-
|
|
158
|
-
@layer variables {}
|
|
159
|
-
|
|
160
|
-
@layer variables {}
|
|
161
|
-
|
|
162
|
-
@layer variables {}
|
|
163
|
-
|
|
164
|
-
@layer variables {}
|
|
165
|
-
|
|
166
|
-
@layer variables {}
|
|
167
|
-
|
|
168
|
-
@layer variables {}
|
|
169
75
|
|
|
170
76
|
.db-checkbox > db-infotext > .db-infotext,
|
|
171
77
|
.db-checkbox > .db-infotext {
|
|
@@ -17,40 +17,6 @@
|
|
|
17
17
|
pointer-events: none !important;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
@layer variables {}
|
|
21
|
-
|
|
22
|
-
@layer variables {}
|
|
23
|
-
|
|
24
|
-
@layer variables {}
|
|
25
|
-
|
|
26
|
-
@layer variables {}
|
|
27
|
-
|
|
28
|
-
@layer variables {}
|
|
29
|
-
|
|
30
|
-
@layer variables {}
|
|
31
|
-
|
|
32
|
-
@layer variables {}
|
|
33
|
-
|
|
34
|
-
@layer variables {}
|
|
35
|
-
|
|
36
|
-
@layer variables {}
|
|
37
|
-
|
|
38
|
-
@layer variables {}
|
|
39
|
-
|
|
40
|
-
@layer variables {}
|
|
41
|
-
|
|
42
|
-
@layer variables {}
|
|
43
|
-
|
|
44
|
-
@layer variables {}
|
|
45
|
-
|
|
46
|
-
@layer variables {}
|
|
47
|
-
|
|
48
|
-
@layer variables {}
|
|
49
|
-
|
|
50
|
-
@layer variables {}
|
|
51
|
-
|
|
52
|
-
@layer variables {}
|
|
53
|
-
|
|
54
20
|
.db-custom-button:not([data-disable-focus=true]):has(input):focus-within {
|
|
55
21
|
outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
|
|
56
22
|
outline-offset: var(--db-border-width-xs);
|
|
@@ -65,79 +31,19 @@
|
|
|
65
31
|
border-radius: var(--db-border-radius-xs);
|
|
66
32
|
}
|
|
67
33
|
|
|
68
|
-
@layer variables {}
|
|
69
|
-
|
|
70
|
-
@layer variables {}
|
|
71
|
-
|
|
72
|
-
@layer variables {}
|
|
73
|
-
|
|
74
|
-
@layer variables {}
|
|
75
|
-
|
|
76
|
-
@layer variables {}
|
|
77
|
-
|
|
78
|
-
@layer variables {}
|
|
79
|
-
|
|
80
|
-
@layer variables {}
|
|
81
|
-
|
|
82
|
-
@layer variables {}
|
|
83
|
-
|
|
84
|
-
@layer variables {}
|
|
85
|
-
|
|
86
|
-
@layer variables {}
|
|
87
|
-
|
|
88
|
-
@layer variables {}
|
|
89
|
-
|
|
90
|
-
@layer variables {}
|
|
91
|
-
|
|
92
|
-
@layer variables {}
|
|
93
|
-
|
|
94
34
|
.db-custom-button label, .db-custom-button button, .db-custom-button a {
|
|
95
35
|
font: var(--db-type-body-md);
|
|
96
|
-
/*
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
.db-custom-button label, .db-custom-button button, .db-custom-button a {
|
|
100
|
-
/* Those variables are only for components to calculate heights and change icons */
|
|
101
|
-
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
102
|
-
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
103
|
-
}
|
|
36
|
+
/* Those variables are only for components to calculate heights and change icons */
|
|
37
|
+
--db-icon-font-weight: var(--db-base-body-icon-weight-md);
|
|
38
|
+
--db-icon-font-size: var(--db-base-body-icon-font-size-md);
|
|
104
39
|
}
|
|
105
40
|
|
|
106
|
-
@layer variables {}
|
|
107
|
-
|
|
108
|
-
@layer variables {}
|
|
109
|
-
|
|
110
41
|
.db-custom-button[data-size=small] label, .db-custom-button[data-size=small] button, .db-custom-button[data-size=small] a {
|
|
111
42
|
font: var(--db-type-body-sm);
|
|
112
|
-
/*
|
|
43
|
+
/* Those variables are only for components to calculate heights and change icons */
|
|
44
|
+
--db-icon-font-weight: var(--db-base-body-icon-weight-sm);
|
|
45
|
+
--db-icon-font-size: var(--db-base-body-icon-font-size-sm);
|
|
113
46
|
}
|
|
114
|
-
@layer variables {
|
|
115
|
-
.db-custom-button[data-size=small] label, .db-custom-button[data-size=small] button, .db-custom-button[data-size=small] a {
|
|
116
|
-
/* Those variables are only for components to calculate heights and change icons */
|
|
117
|
-
--db-icon-font-weight: var(--db-base-body-icon-weight-sm);
|
|
118
|
-
--db-icon-font-size: var(--db-base-body-icon-font-size-sm);
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
@layer variables {}
|
|
123
|
-
|
|
124
|
-
@layer variables {}
|
|
125
|
-
|
|
126
|
-
@layer variables {}
|
|
127
|
-
|
|
128
|
-
@layer variables {}
|
|
129
|
-
|
|
130
|
-
@layer variables {}
|
|
131
|
-
|
|
132
|
-
@layer variables {}
|
|
133
|
-
|
|
134
|
-
@layer variables {}
|
|
135
|
-
|
|
136
|
-
@layer variables {}
|
|
137
|
-
|
|
138
|
-
@layer variables {}
|
|
139
|
-
|
|
140
|
-
@layer variables {}
|
|
141
47
|
|
|
142
48
|
.db-custom-button label, .db-custom-button button, .db-custom-button a {
|
|
143
49
|
border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
|