@momentum-design/components 0.142.0 → 0.142.2
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.
|
@@ -2,11 +2,12 @@ import { css } from 'lit';
|
|
|
2
2
|
import { hostFitContentStyles } from '../../utils/styles';
|
|
3
3
|
const styles = css `
|
|
4
4
|
:host {
|
|
5
|
-
height:
|
|
6
|
-
gap:
|
|
7
|
-
padding:
|
|
8
|
-
border-radius:
|
|
9
|
-
border:
|
|
5
|
+
height: var(--mds-size-theme-md-24);
|
|
6
|
+
gap: var(--mds-spacing-theme-gap-2xs);
|
|
7
|
+
padding: var(--mds-spacing-theme-pad-none) var(--mds-spacing-theme-pad-h-xs);
|
|
8
|
+
border-radius: var(--mds-radius-theme-xs);
|
|
9
|
+
border-style: solid;
|
|
10
|
+
border-width: var(--mds-border-theme-default);
|
|
10
11
|
white-space: nowrap;
|
|
11
12
|
|
|
12
13
|
--mdc-chip-color: var(--mds-color-theme-text-primary-normal);
|
|
@@ -27,8 +28,8 @@ const styles = css `
|
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
::slotted(mdc-avatar[slot='prefix']) {
|
|
30
|
-
width:
|
|
31
|
-
height:
|
|
31
|
+
width: var(--mds-size-theme-md-20);
|
|
32
|
+
height: var(--mds-size-theme-md-20);
|
|
32
33
|
overflow: hidden;
|
|
33
34
|
}
|
|
34
35
|
|
|
@@ -5,13 +5,16 @@
|
|
|
5
5
|
* `mdc-gradient-border-primary` or `mdc-gradient-border-secondary` to any
|
|
6
6
|
* element that should carry an AI hint border, and
|
|
7
7
|
* `mdc-gradient-border-animated` to make that gradient travel around it.
|
|
8
|
+
* Finite playback settles to a stop. Add `mdc-gradient-border-fade-in` and/or
|
|
9
|
+
* `mdc-gradient-border-fade-out` for optional opacity transitions.
|
|
8
10
|
*
|
|
9
11
|
* import '@momentum-design/components/dist/styles/gradient-border.css';
|
|
10
12
|
*
|
|
11
13
|
* <div class="mdc-gradient-border-primary mdc-gradient-border-animated">…</div>
|
|
12
14
|
*
|
|
13
15
|
* Requires a Momentum theme stylesheet to be loaded for the AI hint colour
|
|
14
|
-
* tokens to resolve.
|
|
16
|
+
* tokens to resolve. Load the motion token stylesheet and apply `mds-motion`
|
|
17
|
+
* on the element or an ancestor to use the system's easing tokens.
|
|
15
18
|
*
|
|
16
19
|
* The ring is a masked pseudo-element rather than a box-shadow, so it leaves
|
|
17
20
|
* box-shadow free for the focus ring and never tints translucent or glass
|
|
@@ -27,6 +30,31 @@
|
|
|
27
30
|
initial-value: 0deg;
|
|
28
31
|
}
|
|
29
32
|
|
|
33
|
+
/* A finite number resolves normally; `infinite` falls back to zero. */
|
|
34
|
+
@property --mdc-gradient-border-finite-turns {
|
|
35
|
+
syntax: '<number>';
|
|
36
|
+
inherits: false;
|
|
37
|
+
initial-value: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@property --mdc-gradient-border-settle-angle {
|
|
41
|
+
syntax: '<angle>';
|
|
42
|
+
inherits: false;
|
|
43
|
+
initial-value: 0deg;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@property --mdc-gradient-border-fade-in-opacity {
|
|
47
|
+
syntax: '<number>';
|
|
48
|
+
inherits: false;
|
|
49
|
+
initial-value: 1;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@property --mdc-gradient-border-fade-out-opacity {
|
|
53
|
+
syntax: '<number>';
|
|
54
|
+
inherits: false;
|
|
55
|
+
initial-value: 1;
|
|
56
|
+
}
|
|
57
|
+
|
|
30
58
|
/* A full turn, so engines without the Properties and Values API (Firefox below
|
|
31
59
|
128) land on a value identical to the first frame instead of jumping. */
|
|
32
60
|
@keyframes mdc-gradient-border-rotate {
|
|
@@ -39,11 +67,64 @@
|
|
|
39
67
|
}
|
|
40
68
|
}
|
|
41
69
|
|
|
70
|
+
@keyframes mdc-gradient-border-settle {
|
|
71
|
+
from {
|
|
72
|
+
--mdc-gradient-border-settle-angle: 0deg;
|
|
73
|
+
animation-timing-function: linear;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* Entrance starts with slope 5. Covering 15/17 of the travel in 60% of
|
|
77
|
+
the time joins that curve to the linear phase at the same speed. */
|
|
78
|
+
60% {
|
|
79
|
+
--mdc-gradient-border-settle-angle: calc(360deg * var(--mdc-gradient-border-finite-turns) * 15 / 17);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
to {
|
|
83
|
+
--mdc-gradient-border-settle-angle: calc(360deg * var(--mdc-gradient-border-finite-turns));
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@keyframes mdc-gradient-border-fade-in {
|
|
88
|
+
from {
|
|
89
|
+
--mdc-gradient-border-fade-in-opacity: 0;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
to {
|
|
93
|
+
--mdc-gradient-border-fade-in-opacity: 1;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
@keyframes mdc-gradient-border-fade-out {
|
|
98
|
+
from {
|
|
99
|
+
--mdc-gradient-border-fade-out-opacity: 1;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
to {
|
|
103
|
+
--mdc-gradient-border-fade-out-opacity: calc(1 - var(--mdc-gradient-border-finite));
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
42
107
|
.mdc-gradient-border-primary,
|
|
43
108
|
.mdc-gradient-border-secondary {
|
|
44
109
|
--mdc-gradient-border-width: 0.125rem;
|
|
45
110
|
--mdc-gradient-border-duration: 6s;
|
|
46
111
|
--mdc-gradient-border-iteration-count: infinite;
|
|
112
|
+
--mdc-gradient-border-fade-in-duration: var(--mds-motion-duration-slow, 600ms);
|
|
113
|
+
--mdc-gradient-border-fade-out-duration: var(--mds-motion-duration-slow, 600ms);
|
|
114
|
+
--mdc-gradient-border-fade-in-name: none;
|
|
115
|
+
--mdc-gradient-border-fade-out-name: none;
|
|
116
|
+
--mdc-gradient-border-fade-in-requested: 0s;
|
|
117
|
+
--mdc-gradient-border-fade-out-requested: 0s;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.mdc-gradient-border-fade-in {
|
|
121
|
+
--mdc-gradient-border-fade-in-name: mdc-gradient-border-fade-in;
|
|
122
|
+
--mdc-gradient-border-fade-in-requested: max(0s, var(--mdc-gradient-border-fade-in-duration));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.mdc-gradient-border-fade-out {
|
|
126
|
+
--mdc-gradient-border-fade-out-name: mdc-gradient-border-fade-out;
|
|
127
|
+
--mdc-gradient-border-fade-out-requested: max(0s, var(--mdc-gradient-border-fade-out-duration));
|
|
47
128
|
}
|
|
48
129
|
|
|
49
130
|
/* Opaque end to end, so the ring reads as a steady hint. */
|
|
@@ -90,12 +171,12 @@
|
|
|
90
171
|
once and never see the animation, which runs on this pseudo-element. The
|
|
91
172
|
start angle is added here too, so it also applies when static. */
|
|
92
173
|
.mdc-gradient-border-primary::after {
|
|
93
|
-
background: linear-gradient(calc(var(--mdc-gradient-border-start-angle) + var(--mds-gradient-border-angle, 0deg)),
|
|
174
|
+
background: linear-gradient(calc(var(--mdc-gradient-border-start-angle) + var(--mdc-gradient-border-angle, var(--mds-gradient-border-angle, 0deg))),
|
|
94
175
|
var(--mdc-gradient-border-stops));
|
|
95
176
|
}
|
|
96
177
|
|
|
97
178
|
.mdc-gradient-border-secondary::after {
|
|
98
|
-
background: conic-gradient(from calc(var(--mdc-gradient-border-start-angle) + var(--mds-gradient-border-angle, 0deg)),
|
|
179
|
+
background: conic-gradient(from calc(var(--mdc-gradient-border-start-angle) + var(--mdc-gradient-border-angle, var(--mds-gradient-border-angle, 0deg))),
|
|
99
180
|
var(--mdc-gradient-border-stops));
|
|
100
181
|
}
|
|
101
182
|
|
|
@@ -104,9 +185,45 @@
|
|
|
104
185
|
}
|
|
105
186
|
}
|
|
106
187
|
|
|
188
|
+
@supports (mask-composite: exclude) and (width: round(up, 1px, 1px)) {
|
|
189
|
+
.mdc-gradient-border-fade-in::after {
|
|
190
|
+
opacity: 0;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.mdc-gradient-border-animated::after {
|
|
194
|
+
--mdc-gradient-border-finite-turns: var(--mdc-gradient-border-iteration-count);
|
|
195
|
+
--mdc-gradient-border-finite: min(1, round(up, var(--mdc-gradient-border-finite-turns), 1));
|
|
196
|
+
--mdc-gradient-border-total-duration: calc(var(--mdc-gradient-border-duration) * var(--mdc-gradient-border-finite-turns));
|
|
197
|
+
--mdc-gradient-border-fade-in-time: min(
|
|
198
|
+
var(--mdc-gradient-border-fade-in-requested),
|
|
199
|
+
max(var(--mdc-gradient-border-total-duration), calc(var(--mdc-gradient-border-fade-in-requested) * (1 - var(--mdc-gradient-border-finite))))
|
|
200
|
+
);
|
|
201
|
+
--mdc-gradient-border-fade-out-time: min(
|
|
202
|
+
var(--mdc-gradient-border-fade-out-requested),
|
|
203
|
+
max(0s, calc(var(--mdc-gradient-border-total-duration) - var(--mdc-gradient-border-fade-in-time)))
|
|
204
|
+
);
|
|
205
|
+
--mdc-gradient-border-angle: calc(
|
|
206
|
+
var(--mds-gradient-border-angle) * (1 - var(--mdc-gradient-border-finite)) +
|
|
207
|
+
var(--mdc-gradient-border-settle-angle)
|
|
208
|
+
);
|
|
209
|
+
|
|
210
|
+
opacity: calc(var(--mdc-gradient-border-fade-in-opacity) * var(--mdc-gradient-border-fade-out-opacity));
|
|
211
|
+
animation:
|
|
212
|
+
var(--mdc-gradient-border-duration) linear 0ms var(--mdc-gradient-border-iteration-count) mdc-gradient-border-rotate,
|
|
213
|
+
var(--mdc-gradient-border-total-duration) var(--mds-motion-easing-entrance, cubic-bezier(0, 0, 0.2, 1))
|
|
214
|
+
0ms 1 forwards mdc-gradient-border-settle,
|
|
215
|
+
var(--mdc-gradient-border-fade-in-time) var(--mds-motion-easing-entrance, cubic-bezier(0, 0, 0.2, 1))
|
|
216
|
+
0ms 1 both var(--mdc-gradient-border-fade-in-name),
|
|
217
|
+
var(--mdc-gradient-border-fade-out-time) var(--mds-motion-easing-exit, cubic-bezier(0.5, 0, 1, 1))
|
|
218
|
+
calc(var(--mdc-gradient-border-total-duration) - var(--mdc-gradient-border-fade-out-time))
|
|
219
|
+
1 forwards var(--mdc-gradient-border-fade-out-name);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
107
223
|
@media (prefers-reduced-motion: reduce) {
|
|
108
224
|
.mdc-gradient-border-animated::after {
|
|
109
225
|
animation: none;
|
|
226
|
+
opacity: 1;
|
|
110
227
|
}
|
|
111
228
|
}
|
|
112
229
|
|
|
@@ -117,5 +234,6 @@
|
|
|
117
234
|
.mdc-gradient-border-secondary::after {
|
|
118
235
|
background: CanvasText;
|
|
119
236
|
animation: none;
|
|
237
|
+
opacity: 1;
|
|
120
238
|
}
|
|
121
|
-
}
|
|
239
|
+
}
|