@siemens/element-theme 49.3.0 → 49.4.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/package.json
CHANGED
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
$btn-icon-font-size-default: variables.$si-icon-font-size !default;
|
|
12
12
|
$btn-icon-font-size-lg: variables.$si-icon-font-size-lg !default;
|
|
13
13
|
$btn-icon-font-size-sm: variables.$si-icon-font-size !default;
|
|
14
|
-
$btn-icon-size-default:
|
|
15
|
-
$btn-icon-size-lg:
|
|
16
|
-
$btn-icon-size-sm:
|
|
14
|
+
$btn-icon-size-default: 2rem !default;
|
|
15
|
+
$btn-icon-size-lg: 2.5rem !default;
|
|
16
|
+
$btn-icon-size-sm: 1.5rem !default;
|
|
17
17
|
|
|
18
18
|
// there are some non .btn buttons used in element
|
|
19
19
|
button {
|
|
@@ -103,6 +103,18 @@
|
|
|
103
103
|
.application-header.show-navigation & {
|
|
104
104
|
@extend %collapsible-expanded;
|
|
105
105
|
}
|
|
106
|
+
|
|
107
|
+
.header-item {
|
|
108
|
+
&.active {
|
|
109
|
+
--si-header-item-border: #{semantic-tokens.$element-action-primary};
|
|
110
|
+
color: semantic-tokens.$element-action-primary;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&:hover {
|
|
114
|
+
--si-header-item-border: #{semantic-tokens.$element-action-primary-hover};
|
|
115
|
+
color: semantic-tokens.$element-action-primary-hover;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
106
118
|
}
|
|
107
119
|
|
|
108
120
|
.header-collapsible-actions {
|
|
@@ -174,8 +186,10 @@
|
|
|
174
186
|
position: absolute;
|
|
175
187
|
inset-block-end: 0;
|
|
176
188
|
inset-inline: 0;
|
|
177
|
-
block-size: map.get(spacers.$spacers, 2);
|
|
178
189
|
background: var(--si-header-item-border);
|
|
190
|
+
|
|
191
|
+
block-size: 100%;
|
|
192
|
+
inline-size: map.get(spacers.$spacers, 2);
|
|
179
193
|
}
|
|
180
194
|
|
|
181
195
|
&.header-selection-item {
|
|
@@ -208,18 +222,6 @@
|
|
|
208
222
|
display: flex;
|
|
209
223
|
flex: 1 1 33.333%;
|
|
210
224
|
justify-content: center;
|
|
211
|
-
|
|
212
|
-
.header-item {
|
|
213
|
-
&.active {
|
|
214
|
-
color: semantic-tokens.$element-action-primary;
|
|
215
|
-
--si-header-item-border: #{semantic-tokens.$element-action-primary};
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
&:hover {
|
|
219
|
-
color: semantic-tokens.$element-action-primary-hover;
|
|
220
|
-
--si-header-item-border: #{semantic-tokens.$element-action-primary-hover};
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
225
|
}
|
|
224
226
|
|
|
225
227
|
.header-actions {
|
|
@@ -243,6 +245,11 @@
|
|
|
243
245
|
.header-item {
|
|
244
246
|
inline-size: auto;
|
|
245
247
|
flex-basis: auto;
|
|
248
|
+
|
|
249
|
+
&::after {
|
|
250
|
+
inline-size: 100%;
|
|
251
|
+
block-size: map.get(spacers.$spacers, 2);
|
|
252
|
+
}
|
|
246
253
|
}
|
|
247
254
|
}
|
|
248
255
|
}
|