@siemens/element-theme 48.2.0 → 48.3.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 +1 -1
- package/src/styles/bootstrap/_button-group.scss +44 -12
- package/src/styles/bootstrap/_buttons.scss +9 -1
- package/src/styles/bootstrap/_card.scss +0 -5
- package/src/styles/components/_markdown.scss +127 -0
- package/src/styles/variables/_semantic-tokens.scss +2 -0
- package/src/theme.scss +1 -0
package/package.json
CHANGED
|
@@ -11,37 +11,64 @@
|
|
|
11
11
|
display: inline-flex;
|
|
12
12
|
vertical-align: middle;
|
|
13
13
|
|
|
14
|
-
.btn {
|
|
14
|
+
.btn:not(.btn-circle) {
|
|
15
|
+
position: relative;
|
|
16
|
+
flex: 1 1 auto;
|
|
15
17
|
border-radius: 0;
|
|
16
18
|
}
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
.btn-primary + .btn-primary {
|
|
21
|
+
border-inline-start: 1px solid var(--btn-color, inherit);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
> .btn:first-of-type:not(.btn-circle),
|
|
25
|
+
> label:first-of-type .btn:not(.btn-circle) {
|
|
20
26
|
border-start-start-radius: semantic-tokens.$element-button-radius;
|
|
21
27
|
border-end-start-radius: semantic-tokens.$element-button-radius;
|
|
22
28
|
}
|
|
23
29
|
|
|
24
|
-
> .btn:last-of-type,
|
|
25
|
-
> label:last-of-type .btn {
|
|
30
|
+
> .btn:last-of-type:not(.btn-circle),
|
|
31
|
+
> label:last-of-type .btn:not(.btn-circle) {
|
|
26
32
|
border-start-end-radius: semantic-tokens.$element-button-radius;
|
|
27
33
|
border-end-end-radius: semantic-tokens.$element-button-radius;
|
|
28
34
|
}
|
|
29
35
|
|
|
30
|
-
> .btn,
|
|
31
|
-
label > .btn {
|
|
32
|
-
position: relative;
|
|
33
|
-
flex: 1 1 auto;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
36
|
> .btn-check:focus + .btn,
|
|
37
|
-
> .btn:is(:hover, :active, .active) {
|
|
37
|
+
> .btn:is(:hover, :active, .active, :focus-visible) {
|
|
38
38
|
z-index: 1;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
// Add separator border on primary button hover/focus to keep the layout consistent
|
|
42
|
+
> .btn-primary:has(+ .btn-primary):is(:hover, :active, .active, :focus-visible)::after {
|
|
43
|
+
content: '';
|
|
44
|
+
position: absolute;
|
|
45
|
+
inset-inline-end: 0;
|
|
46
|
+
border-inline-end: 1px solid var(--btn-color, inherit);
|
|
47
|
+
block-size: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
41
50
|
> .btn:not(:first-of-type),
|
|
42
51
|
label + label {
|
|
43
52
|
margin-inline-start: -1px;
|
|
44
53
|
}
|
|
54
|
+
|
|
55
|
+
// Dropdown toggle styling for split buttons
|
|
56
|
+
.btn.dropdown-toggle {
|
|
57
|
+
inline-size: 24px;
|
|
58
|
+
padding: 0;
|
|
59
|
+
border-start-start-radius: 0;
|
|
60
|
+
border-end-start-radius: 0;
|
|
61
|
+
|
|
62
|
+
.dropdown-caret {
|
|
63
|
+
margin-inline: 0;
|
|
64
|
+
padding-inline: 0;
|
|
65
|
+
transform-origin: center;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&[inert] {
|
|
70
|
+
opacity: semantic-tokens.$element-action-disabled-opacity;
|
|
71
|
+
}
|
|
45
72
|
}
|
|
46
73
|
|
|
47
74
|
.btn-group .btn-check {
|
|
@@ -52,6 +79,11 @@
|
|
|
52
79
|
border: 1px solid semantic-tokens.$element-ui-4;
|
|
53
80
|
transition: none;
|
|
54
81
|
|
|
82
|
+
&.btn-icon {
|
|
83
|
+
padding-inline: map.get(spacers.$spacers, 5) - 1px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// @deprecated Will be removed in a future major version, use .btn-icon instead.
|
|
55
87
|
&.icon-only {
|
|
56
88
|
min-inline-size: unset;
|
|
57
89
|
padding-inline: map.get(spacers.$spacers, 5) - 1px;
|
|
@@ -64,9 +64,17 @@ button {
|
|
|
64
64
|
margin-block: -#{map.get(spacers.$spacers, 2)};
|
|
65
65
|
margin-inline: -#{map.get(spacers.$spacers, 2)} #{map.get(spacers.$spacers, 2)};
|
|
66
66
|
}
|
|
67
|
+
|
|
68
|
+
&.btn-icon {
|
|
69
|
+
padding-inline: calc(#{map.get(spacers.$spacers, 2)} - var(--btn-border-width, 0px));
|
|
70
|
+
|
|
71
|
+
.icon {
|
|
72
|
+
margin-inline: 0;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
67
75
|
}
|
|
68
76
|
|
|
69
|
-
.btn:not(:is(.btn-circle, .btn-link, .btn-close)) {
|
|
77
|
+
.btn:not(:is(.btn-circle, .btn-link, .btn-close, .btn-icon)) {
|
|
70
78
|
min-inline-size: variables.$btn-width-normal;
|
|
71
79
|
}
|
|
72
80
|
|
|
@@ -127,11 +127,6 @@ button.card {
|
|
|
127
127
|
background-color: variables.$card-cap-bg;
|
|
128
128
|
line-height: typography.$si-font-size-h5;
|
|
129
129
|
|
|
130
|
-
.icon {
|
|
131
|
-
// The icon would be 8px too high without this.
|
|
132
|
-
margin-block: - map.get(spacers.$spacers, 2);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
130
|
+ .card-body {
|
|
136
131
|
margin-block-start: map.get(spacers.$spacers, 2) * -1;
|
|
137
132
|
padding-block-start: map.get(spacers.$spacers, 2);
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
@use '../variables';
|
|
2
|
+
|
|
3
|
+
@use 'sass:map';
|
|
4
|
+
|
|
5
|
+
.markdown-content {
|
|
6
|
+
max-inline-size: 100%;
|
|
7
|
+
min-inline-size: 0;
|
|
8
|
+
word-wrap: break-word;
|
|
9
|
+
overflow-wrap: break-word;
|
|
10
|
+
word-break: break-word;
|
|
11
|
+
|
|
12
|
+
strong {
|
|
13
|
+
font-weight: variables.$si-font-weight-semibold;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
code {
|
|
17
|
+
color: variables.$element-text-primary;
|
|
18
|
+
background-color: variables.$element-ui-4;
|
|
19
|
+
padding-block: map.get(variables.$spacers, 1);
|
|
20
|
+
padding-inline: map.get(variables.$spacers, 2);
|
|
21
|
+
border-radius: variables.$element-radius-1;
|
|
22
|
+
font-family:
|
|
23
|
+
'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
ul,
|
|
27
|
+
ol {
|
|
28
|
+
max-inline-size: 100%;
|
|
29
|
+
overflow-wrap: break-word;
|
|
30
|
+
|
|
31
|
+
li:first-child {
|
|
32
|
+
margin-block-start: 0;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
li:last-child {
|
|
36
|
+
margin-block-end: 0;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
li {
|
|
41
|
+
margin-block: map.get(variables.$spacers, 2);
|
|
42
|
+
max-inline-size: 100%;
|
|
43
|
+
overflow-wrap: break-word;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
pre {
|
|
47
|
+
background-color: variables.$element-ui-4;
|
|
48
|
+
padding-block: map.get(variables.$spacers, 4);
|
|
49
|
+
padding-inline: map.get(variables.$spacers, 4);
|
|
50
|
+
border-radius: variables.$element-radius-1;
|
|
51
|
+
overflow-x: auto;
|
|
52
|
+
margin-inline: 0;
|
|
53
|
+
inline-size: max-content;
|
|
54
|
+
max-inline-size: 100%;
|
|
55
|
+
box-sizing: border-box;
|
|
56
|
+
|
|
57
|
+
code {
|
|
58
|
+
background-color: transparent;
|
|
59
|
+
padding-block: 0;
|
|
60
|
+
padding-inline: 0;
|
|
61
|
+
border-radius: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
p {
|
|
65
|
+
margin-block: 0;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
em {
|
|
70
|
+
font-style: italic;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
blockquote {
|
|
74
|
+
border-inline-start: 4px solid variables.$element-ui-3;
|
|
75
|
+
padding-inline-start: map.get(variables.$spacers, 4);
|
|
76
|
+
|
|
77
|
+
p {
|
|
78
|
+
margin-block-end: 0;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
> *:first-child {
|
|
83
|
+
// stylelint-disable-next-line declaration-no-important
|
|
84
|
+
margin-block-start: 0 !important;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
> *:last-child {
|
|
88
|
+
// stylelint-disable-next-line declaration-no-important
|
|
89
|
+
margin-block-end: 0 !important;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
table {
|
|
93
|
+
inline-size: max-content;
|
|
94
|
+
max-inline-size: 100%;
|
|
95
|
+
// stylelint-disable-next-line declaration-no-important
|
|
96
|
+
margin-block-start: map.get(variables.$spacers, 6) !important;
|
|
97
|
+
// stylelint-disable-next-line declaration-no-important
|
|
98
|
+
margin-block-end: 0 !important;
|
|
99
|
+
overflow: auto;
|
|
100
|
+
display: block;
|
|
101
|
+
white-space: nowrap;
|
|
102
|
+
|
|
103
|
+
ul,
|
|
104
|
+
ol {
|
|
105
|
+
// stylelint-disable-next-line declaration-no-important
|
|
106
|
+
padding-inline-start: map.get(variables.$spacers, 6) !important;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
table td,
|
|
111
|
+
table th {
|
|
112
|
+
max-inline-size: 200px;
|
|
113
|
+
overflow: hidden;
|
|
114
|
+
text-overflow: ellipsis;
|
|
115
|
+
|
|
116
|
+
*:last-child {
|
|
117
|
+
// stylelint-disable-next-line declaration-no-important
|
|
118
|
+
margin-block-end: 0 !important;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
p {
|
|
123
|
+
max-inline-size: 100%;
|
|
124
|
+
overflow-wrap: break-word;
|
|
125
|
+
word-break: break-word;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
@@ -24,6 +24,8 @@ $element-base-danger: var(--element-base-danger);
|
|
|
24
24
|
$element-base-critical: var(--element-base-critical);
|
|
25
25
|
$element-base-translucent-1: var(--element-base-translucent-1);
|
|
26
26
|
$element-base-translucent-2: var(--element-base-translucent-2);
|
|
27
|
+
// EXPERIMENTAL: Do not use
|
|
28
|
+
$element-base-input-experimental: var(--element-base-input-experimental);
|
|
27
29
|
|
|
28
30
|
$element-radius-0: var(--element-radius-0);
|
|
29
31
|
$element-radius-1: var(--element-radius-1);
|
package/src/theme.scss
CHANGED