@sbb-esta/lyne-elements-dev 4.6.0-dev.1772464299 → 4.6.0-dev.1772466712
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/core/styles/mixins/pearl-chain-bullet.scss +12 -6
- package/custom-elements.json +1125 -1125
- package/package.json +2 -2
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
// ----------------------------------------------------------------------------------------------------
|
|
7
7
|
|
|
8
8
|
@mixin pearl-chain-bullet-variables {
|
|
9
|
+
--sbb-pearl-chain-position-color: var(--sbb-color-primary);
|
|
9
10
|
--sbb-pearl-chain-bullet-size-start-end: #{functions.px-to-rem-build(10)};
|
|
10
11
|
--sbb-pearl-chain-bullet-size-stop: #{functions.px-to-rem-build(8)};
|
|
11
12
|
--sbb-pearl-chain-bullet-color: var(--sbb-background-color-3-inverted);
|
|
@@ -14,7 +15,7 @@
|
|
|
14
15
|
var(--sbb-color-metal),
|
|
15
16
|
var(--sbb-color-granite)
|
|
16
17
|
);
|
|
17
|
-
--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-
|
|
18
|
+
--sbb-pearl-chain-bullet-color-disruption: var(--sbb-color-error);
|
|
18
19
|
--sbb-pearl-chain-bullet-border-width: var(--sbb-border-width-2x);
|
|
19
20
|
--sbb-pearl-chain-bullet-animation-duration: 1920ms;
|
|
20
21
|
--sbb-pearl-chain-bullet-animation-easing: ease-out;
|
|
@@ -107,24 +108,29 @@
|
|
|
107
108
|
@mixin pearl-chain-bullet-position {
|
|
108
109
|
@include pearl-chain-bullet-start-end;
|
|
109
110
|
@include pearl-chain-bullet;
|
|
110
|
-
|
|
111
|
+
|
|
112
|
+
--sbb-pearl-chain-bullet-color: var(--sbb-pearl-chain-position-color);
|
|
113
|
+
|
|
114
|
+
@include a11y.if-forced-colors {
|
|
115
|
+
--sbb-pearl-chain-position-color: Highlight;
|
|
116
|
+
}
|
|
111
117
|
|
|
112
118
|
@keyframes pearl-chain-bullet-position-pulse {
|
|
113
119
|
0% {
|
|
114
|
-
box-shadow: 0 0 0 0 var(--sbb-pearl-chain-
|
|
120
|
+
box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
|
|
115
121
|
}
|
|
116
122
|
|
|
117
123
|
25% {
|
|
118
|
-
box-shadow: 0 0 0 0 var(--sbb-pearl-chain-
|
|
124
|
+
box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
|
|
119
125
|
}
|
|
120
126
|
|
|
121
127
|
50% {
|
|
122
128
|
box-shadow: 0 0 0 #{functions.px-to-rem-build(3)}
|
|
123
|
-
color-mix(in srgb, var(--sbb-color
|
|
129
|
+
color-mix(in srgb, var(--sbb-pearl-chain-position-color) 20%, transparent);
|
|
124
130
|
}
|
|
125
131
|
|
|
126
132
|
100% {
|
|
127
|
-
box-shadow: 0 0 0 0 var(--sbb-pearl-chain-
|
|
133
|
+
box-shadow: 0 0 0 0 var(--sbb-pearl-chain-position-color);
|
|
128
134
|
}
|
|
129
135
|
}
|
|
130
136
|
|