@muraldevkit/ui-toolkit 4.0.1 → 4.1.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/dist/components/badge/MrlBadge/MrlBadge.d.ts +26 -0
- package/dist/components/badge/MrlBadge/index.d.ts +1 -0
- package/dist/components/badge/MrlBadgeNotification/MrlBadgeNotification.d.ts +25 -0
- package/dist/components/badge/MrlBadgeNotification/index.d.ts +1 -0
- package/dist/components/badge/index.d.ts +2 -0
- package/dist/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.d.ts +1 -1
- package/dist/components/button/MrlButton/MrlButton.d.ts +1 -1
- package/dist/components/button/MrlIconButton/MrlIconButton.d.ts +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/link/MrlLinkButton/MrlLinkButton.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/MrlBadge/module.scss +39 -0
- package/dist/styles/MrlBadgeNotification/module.scss +37 -0
- package/dist/styles/MrlSidebar/module.scss +0 -1
- package/dist/styles.css +3 -1
- package/package.json +1 -1
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
|
|
2
|
+
.MrlBadge {
|
|
3
|
+
align-items: center;
|
|
4
|
+
background-color: var(--mrl-black-opacity-01);
|
|
5
|
+
border-radius: var(--mrl-radii-04);
|
|
6
|
+
color: var(--mrl-color-text-emph);
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
flex-shrink: 1;
|
|
9
|
+
font-size: var(--mrl-font-size-02);
|
|
10
|
+
font-weight: var(--mrl-font-weight-02);
|
|
11
|
+
height: var(--mrl-spacing-06);
|
|
12
|
+
padding: var(--mrl-spacing-01) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
|
|
13
|
+
width: auto;
|
|
14
|
+
:global(.MrlSvgContainer) {
|
|
15
|
+
flex-shrink: 0;
|
|
16
|
+
height: var(--mrl-spacing-04);
|
|
17
|
+
margin-left: var(--mrl-spacing-02);
|
|
18
|
+
width: var(--mrl-spacing-04);
|
|
19
|
+
}
|
|
20
|
+
&--error {
|
|
21
|
+
background-color: var(--mrl-color-background-error-light);
|
|
22
|
+
color: var(--mrl-color-text-error);
|
|
23
|
+
}
|
|
24
|
+
&--info {
|
|
25
|
+
background-color: var(--mrl-color-background-info-light);
|
|
26
|
+
color: rgb(var(--mrl-status-info));
|
|
27
|
+
}
|
|
28
|
+
&--success {
|
|
29
|
+
background-color: var(--mrl-color-background-success-light);
|
|
30
|
+
color: rgb(var(--mrl-status-success));
|
|
31
|
+
}
|
|
32
|
+
&--warning {
|
|
33
|
+
background-color: var(--mrl-color-background-warning-light);
|
|
34
|
+
color: var(--mrl-color-text-warning-light);
|
|
35
|
+
:global(.MrlSvgContainer) {
|
|
36
|
+
color: rgb(var(--mrl-status-warning));
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
|
|
2
|
+
.MrlBadgeNotification {
|
|
3
|
+
align-items: center;
|
|
4
|
+
background-color: rgb(var(--mrl-gray-90));
|
|
5
|
+
border: var(--mrl-line-width-border-fine) solid rgb(var(--mrl-white));
|
|
6
|
+
border-radius: var(--mrl-radii-04);
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
color: var(--mrl-color-text-inverse);
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
flex-shrink: 1;
|
|
11
|
+
font-size: var(--mrl-font-size-02);
|
|
12
|
+
font-weight: var(--mrl-font-weight-02);
|
|
13
|
+
height: var(--mrl-spacing-03);
|
|
14
|
+
padding: 0;
|
|
15
|
+
width: var(--mrl-spacing-03);
|
|
16
|
+
&--info {
|
|
17
|
+
background-color: var(--mrl-color-background-info);
|
|
18
|
+
}
|
|
19
|
+
&--numeric {
|
|
20
|
+
font-size: 0.5625rem;
|
|
21
|
+
height: var(--mrl-spacing-05);
|
|
22
|
+
padding: 0 var(--mrl-spacing-01);
|
|
23
|
+
width: var(--mrl-spacing-05);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
:global(.mrlButton),
|
|
27
|
+
:global(.mrlIconButton) {
|
|
28
|
+
.MrlBadgeNotification {
|
|
29
|
+
position: absolute;
|
|
30
|
+
right: 0;
|
|
31
|
+
top: 0;
|
|
32
|
+
&--numeric {
|
|
33
|
+
right: calc(var(--mrl-spacing-01) * -1);
|
|
34
|
+
top: calc(var(--mrl-spacing-01) * -1);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
package/dist/styles.css
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
.MrlAvatar-content--E7qX_{border:var(--mrl-stroke-02) solid rgba(0,0,0,0);border-radius:var(--mrl-radii-03);display:block;font-size:var(--mrl-font-size-04);font-weight:var(--mrl-font-weight-04);height:100%;line-height:2.875rem;max-width:100%;overflow:hidden;text-align:center;width:100%}.MrlAvatar-content--E7qX_ .MrlSvgContainer{display:block;height:auto;max-width:100%;width:100%}.MrlAvatar--e8VFH{border-radius:var(--mrl-radii-03);box-shadow:0 0 1px 1px rgba(0,0,0,.04) inset;box-sizing:border-box;display:block;height:var(--mrl-spacing-10);position:relative;width:var(--mrl-spacing-10)}.MrlAvatar--xsmall--jn6uR{height:var(--mrl-spacing-07);width:var(--mrl-spacing-07)}.MrlAvatar--xsmall--jn6uR .MrlAvatar-content--E7qX_{font-size:var(--mrl-font-size-02);line-height:1.375rem}.MrlAvatar--small--DdBZ7{height:var(--mrl-spacing-08);width:var(--mrl-spacing-08)}.MrlAvatar--small--DdBZ7 .MrlAvatar-content--E7qX_{font-size:var(--mrl-font-size-02);line-height:1.875rem}.MrlAvatar--large--eT7KW{border-radius:var(--mrl-radii-06);height:var(--mrl-spacing-13);width:var(--mrl-spacing-13)}.MrlAvatar--large--eT7KW .MrlAvatar-content--E7qX_{border-radius:var(--mrl-radii-06);font-size:var(--mrl-font-size-07);line-height:5.875rem}.MrlAvatar-image--lWg5A{display:block;height:auto;max-width:100%;width:100%}.MrlAvatar-icon-container--xUwiS{border-radius:1rem;bottom:-0.1875rem;color:var(--mrl-color-background);position:absolute}.MrlAvatar-icon-container--xUwiS .MrlAvatar-icon--tfC5v{display:block;left:50%;position:absolute}.MrlAvatar-icon-container--xUwiS .MrlAvatar-icon--tfC5v .mrl-svg{margin:0}.MrlAvatar-icon-container--small--_IFIA{height:1rem;right:-0.1875rem;width:1rem}.MrlAvatar-icon-container--small--_IFIA .MrlAvatar-icon--tfC5v{height:1rem;margin-left:-0.3125rem;top:0;width:.625rem}.MrlAvatar-icon-container--xsmall--oIGsd{border-radius:.75rem;height:.75rem;right:-0.125rem;width:.75rem}.MrlAvatar-icon-container--xsmall--oIGsd .MrlAvatar-icon--tfC5v{height:.5rem;margin-left:-0.225rem;top:-0.1rem;width:.5rem}
|
|
2
2
|
.mrl-u-focus-wrapper--l91TH{position:relative}.MrlAvatarButton--b_ja8{background-color:rgba(0,0,0,0);border:none;border-radius:var(--mrl-radii-03);margin:0;outline:none;padding:0;position:relative}.MrlAvatarButton--b_ja8::after{background-color:rgba(0,0,0,0);border-radius:var(--mrl-radii-03);content:"";display:block;inset:0;position:absolute}.MrlAvatarButton--b_ja8:focus-visible{position:relative}.MrlAvatarButton--b_ja8:focus-visible:focus-visible{outline:none}.MrlAvatarButton--b_ja8:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--vEDGJ;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--vEDGJ{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--inA8c{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlAvatarButton--b_ja8:hover{cursor:pointer}.MrlAvatarButton--b_ja8:hover::after{background-color:rgba(var(--mrl-gray-90), 0.32)}.MrlAvatarButton--b_ja8:active::after{background-color:rgba(var(--mrl-gray-90), 0.64)}.MrlAvatarButton--large--m1iPW{border-radius:var(--mrl-radii-06)}.MrlAvatarButton--large--m1iPW:focus-visible{position:relative}.MrlAvatarButton--large--m1iPW:focus-visible:focus-visible{outline:none}.MrlAvatarButton--large--m1iPW:focus-visible:focus-visible::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--vEDGJ;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-06) + 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--vEDGJ{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--inA8c{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlAvatarButton--large--m1iPW::after{border-radius:var(--mrl-radii-06)}
|
|
3
|
+
.MrlBadge--qJnMn{align-items:center;background-color:var(--mrl-black-opacity-01);border-radius:var(--mrl-radii-04);color:var(--mrl-color-text-emph);display:inline-flex;flex-shrink:1;font-size:var(--mrl-font-size-02);font-weight:var(--mrl-font-weight-02);height:var(--mrl-spacing-06);padding:var(--mrl-spacing-01) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));width:auto}.MrlBadge--qJnMn .MrlSvgContainer{flex-shrink:0;height:var(--mrl-spacing-04);margin-left:var(--mrl-spacing-02);width:var(--mrl-spacing-04)}.MrlBadge--error--bn1gA{background-color:var(--mrl-color-background-error-light);color:var(--mrl-color-text-error)}.MrlBadge--info--sHw3k{background-color:var(--mrl-color-background-info-light);color:rgb(var(--mrl-status-info))}.MrlBadge--success--xHWDK{background-color:var(--mrl-color-background-success-light);color:rgb(var(--mrl-status-success))}.MrlBadge--warning--L7ZsA{background-color:var(--mrl-color-background-warning-light);color:var(--mrl-color-text-warning-light)}.MrlBadge--warning--L7ZsA .MrlSvgContainer{color:rgb(var(--mrl-status-warning))}
|
|
4
|
+
.MrlBadgeNotification--eAK4M{align-items:center;background-color:rgb(var(--mrl-gray-90));border:var(--mrl-line-width-border-fine) solid rgb(var(--mrl-white));border-radius:var(--mrl-radii-04);box-sizing:border-box;color:var(--mrl-color-text-inverse);display:inline-flex;flex-shrink:1;font-size:var(--mrl-font-size-02);font-weight:var(--mrl-font-weight-02);height:var(--mrl-spacing-03);padding:0;width:var(--mrl-spacing-03)}.MrlBadgeNotification--info--YY6Sg{background-color:var(--mrl-color-background-info)}.MrlBadgeNotification--numeric--jVYpk{font-size:.5625rem;height:var(--mrl-spacing-05);padding:0 var(--mrl-spacing-01);width:var(--mrl-spacing-05)}.mrlButton .MrlBadgeNotification--eAK4M,.mrlIconButton .MrlBadgeNotification--eAK4M{position:absolute;right:0;top:0}.mrlButton .MrlBadgeNotification--numeric--jVYpk,.mrlIconButton .MrlBadgeNotification--numeric--jVYpk{right:calc(var(--mrl-spacing-01)*-1);top:calc(var(--mrl-spacing-01)*-1)}
|
|
3
5
|
.mrl-tooltip-content{--mrl-tooltip-background-color: var(--mrl-color-background-inverse);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);--mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);--mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);--mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);--mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-03);--mrl-tooltip-arrow-size: 8px;--mrl-tooltip-arrow-border-radius: 1px;--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);--mrl-tooltip-arrow-display-left-right: none;--mrl-tooltip-trigger-offset: var(--mrl-spacing-03)}.mrl-tooltip-content--inverse{--mrl-tooltip-background-color: var(--mrl-gray-80);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary)}.mrl-tooltip-content{background:var(--mrl-tooltip-background-color);border-radius:var(--mrl-tooltip-border-radius);color:var(--mrl-tooltip-text-color);cursor:default;font-family:var(--mrl-body-font);font-size:var(--mrl-tooltip-font-size);font-weight:var(--mrl-type-weight-title-secondary);line-height:var(--mrl-tooltip-line-height);max-width:calc(var(--mrl-spacing-09)*7);overflow-wrap:break-word;padding:var(--mrl-tooltip-padding);position:absolute;transition-property:opacity;white-space:normal;width:max-content;z-index:900}.mrl-tooltip-content__hover{background:rgba(0,0,0,0);position:absolute}.mrl-tooltip-content::after{background:rgba(0,0,0,0);border-bottom:9.4339811321px solid var(--mrl-tooltip-background-color);border-right:9.4339811321px solid rgba(0,0,0,0);content:"";height:0;position:absolute;transform:rotate(135deg);width:0}.mrl-tooltip-content[data-position=top]{bottom:100%;margin-bottom:var(--mrl-tooltip-trigger-offset);right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=top]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);bottom:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);left:calc(50% - var(--mrl-tooltip-arrow-size)/2);transform:rotate(315deg)}.mrl-tooltip-content[data-position=top] .mrl-tooltip-content__hover{height:10px;left:0;top:100%;width:100%}.mrl-tooltip-content[data-anchor=start]{left:0;right:initial;transform:none}.mrl-tooltip-content[data-anchor=start]::after{left:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-anchor=end]{right:0;transform:none}.mrl-tooltip-content[data-anchor=end]::after{left:auto;right:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content[data-position=bottom]{margin-top:var(--mrl-tooltip-trigger-offset);top:100%}.mrl-tooltip-content[data-position=bottom]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);top:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px)}.mrl-tooltip-content[data-position=bottom] .mrl-tooltip-content__hover{height:10px;left:0;top:-10px;width:100%}.mrl-tooltip-content[data-position=bottom][data-anchor=center]{right:50%;transform:translateX(50%)}.mrl-tooltip-content[data-position=bottom][data-anchor=center]::after{left:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left]{left:initial;margin-right:var(--mrl-tooltip-trigger-offset);right:100%;top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=left]::after{border-top-right-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);right:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=left] .mrl-tooltip-content__hover{height:23px;right:-10px;top:0;width:100%}.mrl-tooltip-content[data-position=right]{left:100%;margin-left:var(--mrl-tooltip-trigger-offset);top:50%;transform:translateY(-50%)}.mrl-tooltip-content[data-position=right]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);left:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content[data-position=right] .mrl-tooltip-content__hover{height:23px;left:-10px;top:0;width:100%}
|
|
4
6
|
.mrl-visually-hidden{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}
|
|
5
7
|
: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)}.mrl-u-focus-wrapper{position:relative}.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)}.mrlIconButton-wrapper{display:inline-flex}.mrlIconButton{min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09)}.mrlIconButton.mrlIconButton--small{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}.mrlIconButton.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.mrlIconButton--xsmall{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07);padding:var(--mrl-spacing-01)}.mrlIconButton span{align-self:center;max-height:var(--mrl-button-icon-size);max-width:var(--mrl-button-icon-size);pointer-events:none}@media screen and (hover: hover){.mrlIconButton:hover~.mrl-tooltip-content{opacity:1;pointer-events:inherit;transition-delay:var(--mrl-duration-03);transition-duration:var(--mrl-duration-03);transition-timing-function:var(--mrl-timing-m2)}}.mrlAnimatedIconButton{align-items:center}.mrlAnimatedIconButton-iconContainer{height:1.5rem;pointer-events:none;width:1.5rem}.mrlAnimatedIconButton-iconContainer svg{pointer-events:none}
|
|
@@ -39,7 +41,7 @@
|
|
|
39
41
|
.MrlMain--rES8q{--main-padding-large: var(--mrl-spacing-10);--main-padding-medium: var(--mrl-spacing-08);--main-padding-small: var(--mrl-spacing-07)}.MrlMain--rES8q{align-items:initial;background:rgba(var(--mrl-white), 1);border-radius:var(--mrl-border-radius-container-large);flex:1;margin-bottom:var(--mrl-spacing-05);padding:var(--main-padding-large) var(--main-padding-small);width:100%}.MrlMain--no-topbar--C6OzW{margin-top:var(--mrl-spacing-05)}@media(min-width: 52.125rem){.MrlMain--rES8q{padding:var(--main-padding-large) var(--main-padding-medium)}}@media(min-width: 64rem){.MrlMain--rES8q{padding:var(--main-padding-large) var(--main-padding-large)}}
|
|
40
42
|
.MrlPage--i0SC6{background:var(--mrl-color-background-page);display:flex;flex-wrap:wrap;padding-left:var(--mrl-spacing-05);padding-right:var(--mrl-spacing-05);position:relative}.MrlPage--no-topbar--aD2VD{padding-top:var(--mrl-spacing-05)}
|
|
41
43
|
.MrlTopbar--_n1bW{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-08));width:100%}.MrlTopbar--mobile--n4rls{padding-left:calc(var(--mrl-spacing-10) + var(--mrl-spacing-01))}.MrlTopbar--no-sidebar--IjCZZ{margin-left:0}
|
|
42
|
-
.MrlSidebar--BgZ1u{align-items:stretch;margin-right:var(--mrl-spacing-05);
|
|
44
|
+
.MrlSidebar--BgZ1u{align-items:stretch;margin-right:var(--mrl-spacing-05);width:calc(var(--mrl-spacing-14) + var(--mrl-spacing-08))}.MrlSidebar--mobile--ze4Hn{align-items:stretch;background:var(--mrl-color-background-page);border-radius:0 var(--mrl-radii-03) var(--mrl-radii-03) 0;bottom:0;left:calc((var(--mrl-spacing-14) + var(--mrl-spacing-08) + 2px)*-1);max-height:calc(100% - var(--mrl-spacing-03));overflow-y:auto;padding:4.5rem var(--mrl-space-inset-large) var(--mrl-space-inset-large);position:fixed;top:var(--mrl-spacing-03);transition:opacity var(--mrl-duration-03) var(--mrl-timing-m1),left var(--mrl-duration-03) var(--mrl-timing-m1);z-index:2}@media(prefers-reduced-motion: reduce){.MrlSidebar--mobile--ze4Hn{transition:opacity var(--mrl-duration-03) var(--mrl-timing-m1)}}.MrlSidebar--mobile--open--WpVyZ{left:0;opacity:1}.MrlSidebar--offset--PDTE_.MrlSidebar--mobile--ze4Hn,.MrlSidebar--offset--PDTE_.MrlSidebar-overlay--mWzx1{bottom:0}.MrlSidebar-menu--wFDdM.MrlSidebar-menu-trigger--pNEb8{left:var(--mrl-spacing-05);position:absolute;top:var(--mrl-spacing-05);width:50px;z-index:1}.MrlSidebar-menu-close--zZq68{position:fixed}.MrlSidebar-overlay--mWzx1{background-color:rgba(0,0,0,.56);inset:0 0 0 -10000px;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--mrl-duration-03) var(--mrl-timing-m1);z-index:1}.MrlSidebar-overlay--visible--wjTzw{opacity:1;pointer-events:initial}.MrlSidebar-content--2VXk1{display:none}.MrlSidebar-content--visible--ZLFsB{display:block}
|
|
43
45
|
.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))}
|
|
44
46
|
.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}
|
|
45
47
|
.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%}
|