@muraldevkit/ui-toolkit 4.5.2 → 4.5.4
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.
|
@@ -1,89 +1,89 @@
|
|
|
1
1
|
|
|
2
2
|
$colors: (
|
|
3
|
-
black:
|
|
4
|
-
jade: #00c27a,
|
|
5
|
-
blue: #5887ff,
|
|
6
|
-
pink: #fc83ff,
|
|
7
|
-
red:
|
|
8
|
-
yellow: #fa0,
|
|
9
|
-
grape: #be53ff,
|
|
10
|
-
sky: #79c1ff,
|
|
11
|
-
lemon: #ffe146,
|
|
12
|
-
lavander: #e6bfff
|
|
3
|
+
color-black: #000,
|
|
4
|
+
color-jade: #00c27a,
|
|
5
|
+
color-blue: #5887ff,
|
|
6
|
+
color-pink: #fc83ff,
|
|
7
|
+
color-red: #ff4b4b,
|
|
8
|
+
color-yellow: #fa0,
|
|
9
|
+
color-grape: #be53ff,
|
|
10
|
+
color-sky: #79c1ff,
|
|
11
|
+
color-lemon: #ffe146,
|
|
12
|
+
color-lavander: #e6bfff
|
|
13
13
|
);
|
|
14
14
|
$patterns: (
|
|
15
15
|
MrlPattern-01: (
|
|
16
|
-
(blue, 2),
|
|
17
|
-
(pink, 12),
|
|
18
|
-
(jade, 1),
|
|
19
|
-
(yellow, 8),
|
|
20
|
-
(red, 6),
|
|
21
|
-
(black, 3)
|
|
16
|
+
(color-blue, 2),
|
|
17
|
+
(color-pink, 12),
|
|
18
|
+
(color-jade, 1),
|
|
19
|
+
(color-yellow, 8),
|
|
20
|
+
(color-red, 6),
|
|
21
|
+
(color-black, 3)
|
|
22
22
|
),
|
|
23
23
|
MrlPattern-02: (
|
|
24
|
-
(blue, 3),
|
|
25
|
-
(black, 3),
|
|
26
|
-
(yellow, 1),
|
|
27
|
-
(red, 9),
|
|
28
|
-
(grape, 10),
|
|
29
|
-
(jade, 6)
|
|
24
|
+
(color-blue, 3),
|
|
25
|
+
(color-black, 3),
|
|
26
|
+
(color-yellow, 1),
|
|
27
|
+
(color-red, 9),
|
|
28
|
+
(color-grape, 10),
|
|
29
|
+
(color-jade, 6)
|
|
30
30
|
),
|
|
31
31
|
MrlPattern-03: (
|
|
32
|
-
(black, 3),
|
|
33
|
-
(lemon, 2),
|
|
34
|
-
(red, 6),
|
|
35
|
-
(pink, 12),
|
|
36
|
-
(jade, 6),
|
|
37
|
-
(sky, 4)
|
|
32
|
+
(color-black, 3),
|
|
33
|
+
(color-lemon, 2),
|
|
34
|
+
(color-red, 6),
|
|
35
|
+
(color-pink, 12),
|
|
36
|
+
(color-jade, 6),
|
|
37
|
+
(color-sky, 4)
|
|
38
38
|
),
|
|
39
39
|
MrlPattern-04: (
|
|
40
|
-
(jade, 2),
|
|
41
|
-
(sky, 6),
|
|
42
|
-
(black, 3),
|
|
43
|
-
(pink, 12),
|
|
44
|
-
(lemon, 7),
|
|
45
|
-
(red, 2)
|
|
40
|
+
(color-jade, 2),
|
|
41
|
+
(color-sky, 6),
|
|
42
|
+
(color-black, 3),
|
|
43
|
+
(color-pink, 12),
|
|
44
|
+
(color-lemon, 7),
|
|
45
|
+
(color-red, 2)
|
|
46
46
|
),
|
|
47
47
|
MrlPattern-05: (
|
|
48
|
-
(lavander, 3),
|
|
49
|
-
(jade, 6),
|
|
50
|
-
(black, 2),
|
|
51
|
-
(yellow, 12),
|
|
52
|
-
(blue, 7),
|
|
53
|
-
(red, 2)
|
|
48
|
+
(color-lavander, 3),
|
|
49
|
+
(color-jade, 6),
|
|
50
|
+
(color-black, 2),
|
|
51
|
+
(color-yellow, 12),
|
|
52
|
+
(color-blue, 7),
|
|
53
|
+
(color-red, 2)
|
|
54
54
|
),
|
|
55
55
|
MrlPattern-06: (
|
|
56
|
-
(yellow, 5),
|
|
57
|
-
(lavander, 3),
|
|
58
|
-
(jade, 12),
|
|
59
|
-
(black, 3),
|
|
60
|
-
(red, 1),
|
|
61
|
-
(sky, 8)
|
|
56
|
+
(color-yellow, 5),
|
|
57
|
+
(color-lavander, 3),
|
|
58
|
+
(color-jade, 12),
|
|
59
|
+
(color-black, 3),
|
|
60
|
+
(color-red, 1),
|
|
61
|
+
(color-sky, 8)
|
|
62
62
|
)
|
|
63
63
|
);
|
|
64
64
|
$patterns-xs: (
|
|
65
65
|
MrlPattern-01: (
|
|
66
|
-
(blue, 2),
|
|
67
|
-
(pink, 6)
|
|
66
|
+
(color-blue, 2),
|
|
67
|
+
(color-pink, 6)
|
|
68
68
|
),
|
|
69
69
|
MrlPattern-02: (
|
|
70
|
-
(red, 5),
|
|
71
|
-
(grape, 3)
|
|
70
|
+
(color-red, 5),
|
|
71
|
+
(color-grape, 3)
|
|
72
72
|
),
|
|
73
73
|
MrlPattern-03: (
|
|
74
|
-
(pink, 6),
|
|
75
|
-
(jade, 2)
|
|
74
|
+
(color-pink, 6),
|
|
75
|
+
(color-jade, 2)
|
|
76
76
|
),
|
|
77
77
|
MrlPattern-04: (
|
|
78
|
-
(pink, 5),
|
|
79
|
-
(lemon, 3)
|
|
78
|
+
(color-pink, 5),
|
|
79
|
+
(color-lemon, 3)
|
|
80
80
|
),
|
|
81
81
|
MrlPattern-05: (
|
|
82
|
-
(lavander, 2),
|
|
83
|
-
(jade, 6)
|
|
82
|
+
(color-lavander, 2),
|
|
83
|
+
(color-jade, 6)
|
|
84
84
|
),
|
|
85
85
|
MrlPattern-06: (
|
|
86
|
-
(jade, 6),
|
|
87
|
-
(black, 2)
|
|
86
|
+
(color-jade, 6),
|
|
87
|
+
(color-black, 2)
|
|
88
88
|
)
|
|
89
89
|
);
|
package/dist/styles.css
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
.MrlErrorPage--qrFA2{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}.MrlErrorPage--qrFA2 .MrlErrorPage-header--BCIIl{padding:var(--mrl-spacing-08) var(--mrl-spacing-07) var(--mrl-spacing-11) var(--mrl-spacing-07)}.MrlErrorPage--qrFA2 .MrlErrorPage-header--BCIIl .MrlSvgContainer{height:1.875rem;width:6.188rem}.MrlErrorPage--qrFA2 .MrlErrorPage-main--ANe1r{flex-grow:1;padding:0 var(--mrl-spacing-07) var(--mrl-spacing-08)}.MrlErrorPage--qrFA2 .MrlErrorPage-title--gBYGh{color:var(--mrl-color-text-heading);font-family:var(--mrl-heading-font-alt);padding-bottom:var(--mrl-spacing-07)}.MrlErrorPage--qrFA2 .MrlErrorPage-brand-colors--GMR4w{flex-grow:0;flex-shrink:0}@media(min-width: 52.125rem){.MrlErrorPage--qrFA2 .MrlErrorPage-header--BCIIl{padding:var(--mrl-spacing-08) var(--mrl-spacing-08) var(--mrl-spacing-11) var(--mrl-spacing-08)}.MrlErrorPage--qrFA2 .MrlErrorPage-main--ANe1r{margin:0 auto;max-width:33.75rem;padding:0 0 var(--mrl-spacing-08) 0}}
|
|
46
46
|
.MrlText--qWcjF{--mrl-text-size: var(--mrl-type-size-text);--mrl-text-weight: var(--mrl-type-weight-text);--mrl-text-spacing: var(--mrl-type-spacing-text);--mrl-text-height: var(--mrl-type-line-height-text)}.MrlText--qWcjF.MrlText--large--Up17c{--mrl-text-size: var(--mrl-type-size-text-large);--mrl-text-height: var(--mrl-type-line-height-text-large)}.MrlText--qWcjF.MrlText--small--oJ2NK{--mrl-text-size: var(--mrl-type-size-text-small);--mrl-text-height: var(--mrl-type-line-height-text-small)}.MrlText--qWcjF.MrlText--xsmall--OjNGe{--mrl-text-size: var(--mrl-type-size-text-xsmall);--mrl-text-height: var(--mrl-type-line-height-text-xsmall)}.MrlText--qWcjF.MrlText--xxsmall--qfF1L{--mrl-text-size: var(--mrl-type-size-text-xxsmall);--mrl-text-height: var(--mrl-type-line-height-text-xxsmall)}.MrlText--qWcjF{font-family:var(--mrl-body-font);font-size:var(--mrl-text-size);font-weight:var(--mrl-text-weight);letter-spacing:var(--mrl-text-spacing);line-height:var(--mrl-text-height)}
|
|
47
47
|
.MrlTextHeading-display--YPlsQ{--mrl-heading-family: var(--mrl-heading-font-alt);--mrl-heading-size: var(--mrl-type-size-display);--mrl-heading-weight: var(--mrl-type-weight-display);--mrl-heading-spacing: var(--mrl-type-spacing-display);--mrl-heading-height: var(--mrl-type-line-height-display)}.MrlTextHeading-display--large--OoGc4{--mrl-heading-size: var(--mrl-type-size-display-large);--mrl-heading-spacing: var(--mrl-type-spacing-display-large);--mrl-heading-height: var(--mrl-type-line-height-display-large)}.MrlTextHeading-display--small--gwHpu{--mrl-heading-size: var(--mrl-type-size-display-small);--mrl-heading-spacing: var(--mrl-type-spacing-display-small);--mrl-heading-height: var(--mrl-type-line-height-display-small)}.MrlTextHeading-headline--paxPG{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-headline);--mrl-heading-weight: var(--mrl-type-weight-headline);--mrl-heading-spacing: var(--mrl-type-spacing-headline);--mrl-heading-height: var(--mrl-type-line-height-headline)}.MrlTextHeading-headline--large--edpNl{--mrl-heading-size: var(--mrl-type-size-headline-large);--mrl-heading-spacing: var(--mrl-type-spacing-headline-large);--mrl-heading-height: var(--mrl-type-line-height-headline-large)}.MrlTextHeading-headline--small--wvgZG{--mrl-heading-size: var(--mrl-type-size-headline-small);--mrl-heading-spacing: var(--mrl-type-spacing-headline-small);--mrl-heading-height: var(--mrl-type-line-height-headline-small)}.MrlTextHeading-title--Wlh8i{--mrl-heading-family: var(--mrl-heading-font);--mrl-heading-size: var(--mrl-type-size-text);--mrl-heading-weight: var(--mrl-type-weight-title);--mrl-heading-spacing: var(--mrl-type-spacing-text);--mrl-heading-height: var(--mrl-type-line-height-title)}.MrlTextHeading-title--large--VbutV{--mrl-heading-size: var(--mrl-type-size-text-large);--mrl-heading-height: var(--mrl-type-line-height-title-large)}.MrlTextHeading-title--small--BPZW2{--mrl-heading-size: var(--mrl-type-size-text-small);--mrl-heading-height: var(--mrl-type-line-height-title-small)}.MrlTextHeading-title--xsmall--MkPpJ{--mrl-heading-size: var(--mrl-type-size-text-xsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xsmall)}.MrlTextHeading-title--xxsmall--R9i95{--mrl-heading-size: var(--mrl-type-size-text-xxsmall);--mrl-heading-height: var(--mrl-type-line-height-title-xxsmall)}.MrlTextHeading-title--secondary--VzSQc{--mrl-heading-weight: var(--mrl-type-weight-title-secondary)}.MrlTextHeading-display--YPlsQ{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-headline--paxPG{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}.MrlTextHeading-title--Wlh8i{display:block;font-family:var(--mrl-heading-family);font-size:var(--mrl-heading-size);font-weight:var(--mrl-heading-weight);letter-spacing:var(--mrl-heading-spacing);line-height:var(--mrl-heading-height)}
|
|
48
|
-
.MrlBrandColor-black--
|
|
48
|
+
.MrlBrandColor-color-black--qezls{background-color:#000;grid-area:color-black}.MrlBrandColor-color-jade--FXR41{background-color:#00c27a;grid-area:color-jade}.MrlBrandColor-color-blue--QTrte{background-color:#5887ff;grid-area:color-blue}.MrlBrandColor-color-pink--ec2Rk{background-color:#fc83ff;grid-area:color-pink}.MrlBrandColor-color-red--m9sa2{background-color:#ff4b4b;grid-area:color-red}.MrlBrandColor-color-yellow--VsIdM{background-color:#fa0;grid-area:color-yellow}.MrlBrandColor-color-grape--FcHD9{background-color:#be53ff;grid-area:color-grape}.MrlBrandColor-color-sky--CTufh{background-color:#79c1ff;grid-area:color-sky}.MrlBrandColor-color-lemon--vKUgk{background-color:#ffe146;grid-area:color-lemon}.MrlBrandColor-color-lavander--jdxdU{background-color:#e6bfff;grid-area:color-lavander}.MrlBrandColors--cnjoA{display:grid;grid-template-columns:repeat(8, 1fr);grid-template-rows:1fr;height:15rem;width:100%}.MrlPattern-01--UGBWG{grid-template-areas:" color-blue color-blue color-pink color-pink color-pink color-pink color-pink color-pink"}.MrlPattern-02--ShfYW{grid-template-areas:" color-red color-red color-red color-red color-red color-grape color-grape color-grape"}.MrlPattern-03--L1EDT{grid-template-areas:" color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-jade"}.MrlPattern-04--bVc3U{grid-template-areas:" color-pink color-pink color-pink color-pink color-pink color-lemon color-lemon color-lemon"}.MrlPattern-05--DRK3W{grid-template-areas:" color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade"}.MrlPattern-06--zkwV6{grid-template-areas:" color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black"}@media(min-width: 37.5rem){.MrlBrandColors--cnjoA{grid-template-columns:repeat(32, 1fr)}.MrlPattern-01--UGBWG{grid-template-areas:" color-blue color-blue color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-red color-red color-red color-red color-red color-red color-black color-black color-black"}.MrlPattern-02--ShfYW{grid-template-areas:" color-blue color-blue color-blue color-black color-black color-black color-yellow color-red color-red color-red color-red color-red color-red color-red color-red color-red color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-grape color-jade color-jade color-jade color-jade color-jade color-jade"}.MrlPattern-03--L1EDT{grid-template-areas:" color-black color-black color-black color-lemon color-lemon color-red color-red color-red color-red color-red color-red color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-jade color-jade color-jade color-jade color-jade color-jade color-sky color-sky color-sky color-sky"}.MrlPattern-04--bVc3U{grid-template-areas:" color-jade color-jade color-sky color-sky color-sky color-sky color-sky color-sky color-black color-black color-black color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-pink color-lemon color-lemon color-lemon color-lemon color-lemon color-lemon color-lemon color-red color-red"}.MrlPattern-05--DRK3W{grid-template-areas:" color-lavander color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-yellow color-blue color-blue color-blue color-blue color-blue color-blue color-blue color-red color-red"}.MrlPattern-06--zkwV6{grid-template-areas:" color-yellow color-yellow color-yellow color-yellow color-yellow color-lavander color-lavander color-lavander color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-jade color-black color-black color-black color-red color-sky color-sky color-sky color-sky color-sky color-sky color-sky color-sky"}}
|
|
49
49
|
.mrl-u-focus-wrapper--sGwMW{position:relative}a.mrl-link--Xzu_x{--mrl-link-border-style: solid;--mrl-link-border-width: var(--mrl-line-width-border);--mrl-link-color: rgba(var(--mrl-gray-90), 1);--mrl-link-color-active: var(--mrl-color-brand-active);--mrl-link-color-hover: var(--mrl-color-brand-hover);--mrl-link-font-weight: 700;--mrl-link-border-width-focus: var(--mrl-line-width-focus);--mrl-link-color-focus: var(--mrl-color-focus);--mrl-link-offset-focus: var(--mrl-space-offset-focus)}a.mrl-link--mono--LL0fI:hover{--mrl-link-color-hover: rgba(var(--mrl-gray-100), 1)}a.mrl-link--mono--LL0fI:active{--mrl-link-color-active: rgba(var(--mrl-black), 1)}a.mrl-link--inverse--bzMVs{--mrl-link-color: var(--mrl-color-text-inverse)}a.mrl-link--inverse--bzMVs:hover{--mrl-link-color-hover: var(--mrl-white-opacity-08)}a.mrl-link--inverse--bzMVs:active{--mrl-link-color-active: var(--mrl-white-opacity-06)}.mrl-link--Xzu_x{position:relative;align-items:center;color:var(--mrl-link-color);display:inline-flex;font-weight:var(--mrl-link-font-weight);text-decoration:none;transition:all var(--mrl-duration-03) var(--mrl-timing-m2);transition-property:border-color,color}.mrl-link--Xzu_x:focus-visible{outline:none}.mrl-link--Xzu_x:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--yBIrx;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-radii-02) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-link-border-width))*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-link-border-width))*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-link-border-width))*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-link-border-width))*-1);z-index:1}@keyframes border-animation--yBIrx{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--axDWs{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlLinkText--m_Pyz{border-bottom:var(--mrl-link-border-width) var(--mrl-link-border-style) currentcolor}a.mrl-link--inverse--bzMVs{position:relative}a.mrl-link--inverse--bzMVs:focus-visible{outline:none}a.mrl-link--inverse--bzMVs:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation-inverse--axDWs;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-radii-02) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-link-border-width))*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-link-border-width))*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-link-border-width))*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-link-border-width))*-1);z-index:1}@keyframes border-animation--yBIrx{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--axDWs{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}a.mrl-link--Xzu_x:visited{color:rgb(var(--mrl-red-100))}a.mrl-link--mono--LL0fI:visited{color:rgb(var(--mrl-gray-80))}a.mrl-link--inverse--bzMVs:visited{color:rgb(var(--mrl-white))}a.mrl-link--Xzu_x:hover{color:var(--mrl-link-color-hover)}a.mrl-link--Xzu_x:active{color:var(--mrl-link-color-active)}a.mrl-link--large--a1aPV{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-large);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-large)}a.mrl-link--medium--RPXCU{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive)}a.mrl-link--small--gifgD{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-small)}a.mrl-link--xsmall--pdESI{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-xsmall);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-interactive-xsmall);line-height:var(--mrl-type-line-height-interactive-xsmall)}a.mrl-link--simple--GLfdf .MrlLinkText--m_Pyz{border-bottom:none;text-decoration:underline}.MrlLinkIcon--O8nJ8{margin-left:var(--mrl-spacing-01);margin-top:calc(var(--mrl-spacing-01)*-1)}.mrl-link--small--gifgD .MrlLinkIcon--O8nJ8{height:auto;width:var(--mrl-spacing-05)}.mrl-link--xsmall--pdESI .MrlLinkIcon--O8nJ8{height:auto;width:calc(var(--mrl-spacing-04) + var(--mrl-spacing-01))}
|
|
50
50
|
.mrl-u-focus-wrapper{position:relative}:root{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton);--mrl-button-border-radius: var(--mrl-border-radius-functional)}.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated){min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-body-font);pointer-events:none;visibility:inherit}.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated){--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}mrl-button[size=small],mrl-shadow-button[size=small]{min-height:var(--mrl-spacing-08)}mrl-icon-button[size=small]{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}mrl-button[size=large],mrl-shadow-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=xsmall][kind=ghost],mrl-icon-button[size=xsmall][kind=ghost-inverse]{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07)}.mrlIconButton,.mrlButton{background:var(--mrl-button-background-color);border:none;border-radius:var(--mrl-button-border-radius);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color);color:var(--mrl-button-text-color);justify-content:center;outline:none;transition:all var(--mrl-duration-03) var(--mrl-timing-m1);display:inline-flex;position:relative;visibility:inherit}.mrlIconButton:focus-visible:focus-visible,.mrlButton:focus-visible:focus-visible{outline:none}.mrlIconButton:focus-visible:focus-visible::after,.mrlButton:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.mrlIconButton--inverse:focus-visible,.mrlIconButton--ghost-inverse:focus-visible,.mrlButton--inverse:focus-visible,.mrlButton--ghost-inverse:focus-visible{position:relative}.mrlIconButton--inverse:focus-visible:focus-visible,.mrlIconButton--ghost-inverse:focus-visible:focus-visible,.mrlButton--inverse:focus-visible:focus-visible,.mrlButton--ghost-inverse:focus-visible:focus-visible{outline:none}.mrlIconButton--inverse:focus-visible:focus-visible::after,.mrlIconButton--ghost-inverse:focus-visible:focus-visible::after,.mrlButton--inverse:focus-visible:focus-visible::after,.mrlButton--ghost-inverse:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation-inverse;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.mrlIconButton:hover,.mrlButton:hover{cursor:pointer}.mrlIconButton[aria-disabled=true],.mrlButton[aria-disabled=true]{background:var(--mrl-button-background-color-disabled);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);color:var(--mrl-button-text-color-disabled);cursor:default}.mrlIconButton[aria-disabled=true]:hover,.mrlButton[aria-disabled=true]:hover{background:var(--mrl-button-background-color-disabled);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);color:var(--mrl-button-text-color-disabled);cursor:default}.mrlIconButton:hover:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]),.mrlButton:hover:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]){background:var(--mrl-button-background-color-hover);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-hover);color:var(--mrl-button-text-color-hover)}.mrlIconButton:active:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]),.mrlButton:active:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]){background:var(--mrl-button-background-color-active);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-active);color:var(--mrl-button-text-color-active)}.mrlIconButton--skeleton,.mrlIconButton--skeleton[aria-disabled=true],.mrlButton--skeleton,.mrlButton--skeleton[aria-disabled=true]{min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-body-font);pointer-events:none;visibility:inherit}.mrlIconButton,.mrlButton{--mrl-button-background-color: var(--mrl-color-background);--mrl-button-background-color-active: rgba(var(--mrl-gray-20), 1);--mrl-button-background-color-disabled: var(--mrl-color-background);--mrl-button-background-color-hover: rgba(var(--mrl-gray-10), 1);--mrl-button-border-color: rgba(var(--mrl-gray-30), 1);--mrl-button-border-color-active: rgba(var(--mrl-gray-50), 1);--mrl-button-border-color-disabled: rgba(var(--mrl-gray-20), 1);--mrl-button-border-color-hover: rgba(var(--mrl-gray-40), 1);--mrl-button-border-width: var(--mrl-line-width-border);--mrl-button-icon-size: var(--mrl-spacing-07);--mrl-button-text-color: rgba(var(--mrl-gray-80), 1);--mrl-button-text-color-active: rgba(var(--mrl-black), 1);--mrl-button-text-color-disabled: var(--mrl-color-text-disabled);--mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);--mrl-button-inset-vertical: 0;--mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);--mrl-button-icon-margin-right: var(--mrl-space-inline-related)}.mrlIconButton--small,.mrlButton--small{min-height:var(--mrl-spacing-08);--mrl-button-icon-size: var(--mrl-spacing-06);--mrl-button-inset-horizontal: var(--mrl-spacing-04)}.mrlIconButton--xsmall,.mrlButton--xsmall{--mrl-button-icon-size: var(--mrl-spacing-06)}.mrlIconButton.mrlIconButton--small,.mrlButton.mrlIconButton--small{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}.mrlIconButton.mrlIconButton--small+.mrl-tooltip-content,.mrlButton.mrlIconButton--small+.mrl-tooltip-content{--mrl-tooltip-arrow-spacing: calc( (var(--mrl-spacing-08) - var(--mrl-tooltip-arrow-size)) / 2 )}.mrlIconButton--large,.mrlButton--large{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));--mrl-button-inset-horizontal: var(--mrl-spacing-05)}.mrlIconButton.mrlIconButton--large,.mrlButton.mrlIconButton--large{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}.mrlIconButton.mrlButton--primary,.mrlIconButton.mrlButton--ghost,.mrlIconButton.mrlButton--ghost-inverse,.mrlIconButton.mrlIconButton--primary,.mrlIconButton.mrlIconButton--ghost,.mrlIconButton.mrlIconButton--ghost-inverse,.mrlButton.mrlButton--primary,.mrlButton.mrlButton--ghost,.mrlButton.mrlButton--ghost-inverse,.mrlButton.mrlIconButton--primary,.mrlButton.mrlIconButton--ghost,.mrlButton.mrlIconButton--ghost-inverse{--mrl-button-border-color: transparent;--mrl-button-border-color-active: transparent;--mrl-button-border-color-hover: transparent;--mrl-button-border-color-disabled: transparent}.mrlIconButton--secondary-native,.mrlButton--secondary-native{--mrl-button-border-color: transparent;--mrl-button-border-color-active: transparent;--mrl-button-border-color-hover: transparent;--mrl-button-border-color-disabled: transparent}.mrlIconButton--primary,.mrlButton--primary{--mrl-button-background-color: var(--mrl-color-brand);--mrl-button-background-color-active: var(--mrl-color-brand-active);--mrl-button-background-color-disabled: var(--mrl-color-background-disabled);--mrl-button-background-color-hover: var(--mrl-color-brand-hover);--mrl-button-text-color: var(--mrl-color-text-inverse);--mrl-button-text-color-active: var(--mrl-color-text-inverse);--mrl-button-text-color-disabled: var(--mrl-color-text-inverse);--mrl-button-text-color-hover: var(--mrl-color-text-inverse)}.mrlIconButton--primary-native,.mrlButton--primary-native{--mrl-button-background-color: transparent;--mrl-button-background-color-active: var(--mrl-black-opacity-01);--mrl-button-background-color-disabled: var(transparent);--mrl-button-background-color-hover: var(--mrl-black-opacity-00);--mrl-button-border-color: transparent;--mrl-button-border-color-active: transparent;--mrl-button-border-color-hover: transparent;--mrl-button-border-color-disabled: transparent;--mrl-button-text-color: rgba(var(--mrl-blue-70), 1);--mrl-button-text-color-active: rgba(var(--mrl-blue-70), 1);--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);--mrl-button-text-color-hover: rgba(var(--mrl-blue-70), 1)}.mrlIconButton--ghost,.mrlButton--ghost{--mrl-button-background-color: transparent;--mrl-button-background-color-active: var(--mrl-black-opacity-01);--mrl-button-background-color-hover: var(--mrl-black-opacity-00);--mrl-button-background-color-disabled: transparent;--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);--mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);--mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));--mrl-button-icon-margin-right: var(--mrl-spacing-02)}.mrlIconButton--ghost[aria-pressed=true],.mrlIconButton--ghost[aria-checked=true],.mrlIconButton--ghost[aria-expanded=true],.mrlIconButton--ghost[aria-selected=true],.mrlButton--ghost[aria-pressed=true],.mrlButton--ghost[aria-checked=true],.mrlButton--ghost[aria-expanded=true],.mrlButton--ghost[aria-selected=true]{--mrl-button-background-color: var(--mrl-color-background-inverse);--mrl-button-text-color: var(--mrl-color-text-inverse)}.mrlIconButton--ghost-inverse,.mrlButton--ghost-inverse{--mrl-button-background-color: transparent;--mrl-button-background-color-active: var(--mrl-white-opacity-04);--mrl-button-background-color-hover: var(--mrl-white-opacity-02);--mrl-button-background-color-disabled: transparent;--mrl-button-text-color: var(--mrl-color-text-inverse);--mrl-button-text-color-active: var(--mrl-color-text-inverse);--mrl-button-text-color-hover: var(--mrl-color-text-inverse);--mrl-button-text-color-disabled: var(--mrl-white-opacity-04);--mrl-button-inset-horizontal: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));--mrl-button-icon-margin-right: var(--mrl-spacing-02)}.mrlIconButton--ghost-inverse.mrlButton--skeleton,.mrlButton--ghost-inverse.mrlButton--skeleton{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}.mrlIconButton--ghost-inverse.toggleStyle--default[aria-pressed=true],.mrlIconButton--ghost-inverse.toggleStyle--default[aria-checked=true],.mrlIconButton--ghost-inverse.toggleStyle--default[aria-expanded=true],.mrlIconButton--ghost-inverse.toggleStyle--default[aria-selected=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-pressed=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-checked=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-expanded=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-selected=true]{--mrl-button-background-color: var(--mrl-color-background);--mrl-button-text-color: var(--mrl-color-text)}.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true],.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-checked=true],.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true],.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-selected=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-checked=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-selected=true]{--mrl-button-background-color: var(--mrl-color-accent);--mrl-button-text-color: var(--mrl-color-text-inverse)}.mrlIconButton--ghost-inverse[aria-disabled=true][aria-pressed=true],.mrlIconButton--ghost-inverse[aria-disabled=true][aria-checked=true],.mrlIconButton--ghost-inverse[aria-disabled=true][aria-expanded=true],.mrlIconButton--ghost-inverse[aria-disabled=true][aria-selected=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-pressed=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-checked=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-expanded=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-selected=true]{--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);--mrl-button-text-color-disabled: var(--mrl-white-opacity-04)}.mrlIconButton--inverse,.mrlButton--inverse{--mrl-button-background-color: var(--mrl-color-background);--mrl-button-background-color-active: var(--mrl-white-opacity-06);--mrl-button-background-color-hover: var(--mrl-white-opacity-08);--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);--mrl-button-border-color: transparent;--mrl-button-border-color-active: transparent;--mrl-button-border-color-hover: transparent;--mrl-button-border-color-disabled: transparent;--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-disabled: var(--mrl-black-opacity-03)}.mrlIconButton--inverse.mrlButton--skeleton,.mrlButton--inverse.mrlButton--skeleton{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}.mrlIconButton[aria-disabled=true][aria-pressed=true],.mrlIconButton[aria-disabled=true][aria-checked=true],.mrlIconButton[aria-disabled=true][aria-expanded=true],.mrlIconButton[aria-disabled=true][aria-selected=true],.mrlButton[aria-disabled=true][aria-pressed=true],.mrlButton[aria-disabled=true][aria-checked=true],.mrlButton[aria-disabled=true][aria-expanded=true],.mrlButton[aria-disabled=true][aria-selected=true]{--mrl-button-background-color-disabled: var(--mrl-black-opacity-03);--mrl-button-text-color-disabled: var(--mrl-color-text-inverse)}.mrlButton{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-small);min-height:var(--mrl-spacing-09);align-items:center;display:inline-flex;min-width:auto;padding:var(--mrl-button-inset-vertical) var(--mrl-button-inset-horizontal);text-align:center;vertical-align:middle;white-space:nowrap}.mrlButton .mrl-tooltip-trigger-content{align-items:center;display:inline-flex}.mrlButton.mrlButton--small{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-xsmall);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-interactive-xsmall);line-height:var(--mrl-type-line-height-interactive-xsmall);min-height:var(--mrl-spacing-08)}.mrlButton.mrlButton--large{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive);min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}.mrlButton .MrlSvgContainer,.mrlButton .MrlSpinner-container{margin-right:var(--mrl-button-icon-margin-right);max-width:var(--mrl-button-icon-size);min-width:var(--mrl-button-icon-size)}.mrlButton .mrlButton-spinner-container{margin:0 auto;position:absolute}.mrlButton--loading .mrlButton-text{opacity:0}.mrlButton--icon-before{padding-left:var(--mrl-spacing-04)}.mrlButton--icon-before.mrlButton--small{padding-left:var(--mrl-spacing-03)}.mrlButton--icon-before.mrlButton--ghost,.mrlButton--icon-before.mrlButton--ghost-inverse{padding-left:calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));padding-right:var(--mrl-spacing-03)}.mrlButton--icon-after{flex-direction:row-reverse;padding-right:var(--mrl-spacing-04)}.mrlButton--icon-after.mrlButton--small{padding-right:var(--mrl-spacing-03)}.mrlButton--icon-after.mrlButton--ghost,.mrlButton--icon-after.mrlButton--ghost-inverse{padding-left:var(--mrl-spacing-03);padding-right:calc(var(--mrl-spacing-01) + var(--mrl-spacing-02))}.mrlButton--icon-after .MrlSvgContainer,.mrlButton--icon-after .MrlSpinner-container{margin-left:var(--mrl-button-icon-margin-right);margin-right:0}.mrlLinkButton{text-decoration:none}
|
|
51
51
|
.MrlProgressBar-container--fe9Ne{min-width:4.25rem;padding:var(--mrl-spacing-03);width:auto}.MrlProgressBar--CTsQm{background-color:var(--mrl-black-opacity-00);border-radius:var(--mrl-radii-03);height:var(--mrl-spacing-02);overflow:hidden;position:relative;width:100%}.MrlProgressBar--complete--Vb2oS{background-color:rgba(var(--mrl-blue-70), 1);border-radius:var(--mrl-radii-03);height:var(--mrl-spacing-02);left:0;position:absolute;top:0}.MrlProgressBar--textContainer--fLrQK{margin-top:var(--mrl-spacing-03);text-align:center}@keyframes timed--mVBU9{0%{width:0}15%{width:25%}70%{width:72.5%}100%{width:100%}}.MrlProgressBar--timed--teE4n{animation-name:timed--mVBU9;animation-timing-function:var(--mrl-timing-m1);width:100%}@keyframes indeterminate--lmBAm{from{left:-100%}to{left:100%}}.MrlProgressBar--indeterminate--hpJSe{animation:2s indeterminate--lmBAm var(--mrl-timing-m1) infinite;left:-100%;width:200%}
|