diff --git a/css/app.d50f9bf3.css b/css/app.6266feec.css similarity index 93% rename from css/app.d50f9bf3.css rename to css/app.6266feec.css index 47ce3610..44a87382 100644 --- a/css/app.d50f9bf3.css +++ b/css/app.6266feec.css @@ -1,4 +1,4 @@ -@charset "UTF-8";.kill-ie{position:absolute;text-align:center;background-color:#bdbdbd}.kill-ie h1{font-size:36px}.kill-ie p{font-size:24px}.kill-ie a{text-decoration:underline;color:red;font-weight:700}*,:after,:before{box-sizing:border-box;background-repeat:no-repeat}:after,:before{text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}:where(body){margin:0}:where(h1){font-size:2em;margin:.67em 0}:where(dl,ol,ul) :where(dl,ol,ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol,ul){list-style-type:none;padding:0}:where(nav li):before{content:"";float:left}:where(pre){font-family:monospace,monospace;font-size:1em;overflow:auto}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,select){margin:0}:where(button,[type=button i],[type=reset i],[type=submit i]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){margin:0;resize:vertical}:where([type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(details>summary:first-of-type){display:list-item}:where([aria-busy=true i]){cursor:progress}:where([aria-controls]){cursor:pointer}:where([aria-disabled=true i],[disabled]){cursor:not-allowed}:where([aria-hidden=false i][hidden]){display:initial}:where([aria-hidden=false i][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}body,html{margin:0;height:100%}html{word-break:normal}a{text-decoration:none}img{max-width:100%}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(../font/material-icons.37ce905a.woff2) format("woff2"),url(../font/material-icons.49f2e1a9.woff) format("woff");font-display:swap}.material-icons{font-family:Material Icons;font-feature-settings:"liga"}@font-face{font-family:Material Icons Outlined;font-style:normal;font-weight:400;src:url(../font/material-icons-outlined.26da31fa.woff2) format("woff2");font-display:swap}.material-icons,.material-icons-outlined{font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.material-icons-outlined{font-family:Material Icons Outlined;font-feature-settings:"liga"}@font-face{font-family:Material Icons Round;font-style:normal;font-weight:400;src:url(../font/material-icons-round.4092b875.woff2) format("woff2");font-display:swap}.material-icons-round{font-family:Material Icons Round;font-feature-settings:"liga"}@font-face{font-family:Material Icons Two Tone;font-style:normal;font-weight:400;src:url(../font/material-icons-two-tone.0b6b657d.woff2) format("woff2");font-display:swap}.material-icons-round,.material-icons-two-tone{font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.material-icons-two-tone{font-family:Material Icons Two Tone;font-feature-settings:"liga"}@font-face{font-family:Material Icons Sharp;font-style:normal;font-weight:400;src:url(../font/material-icons-sharp.1b68a840.woff2) format("woff2");font-display:swap}.material-icons-sharp{font-family:Material Icons Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}.material-icons-outlined.md-18,.material-icons-round.md-18,.material-icons-two-tone.md-18,.material-icons.md-18{font-size:18px;width:18px;height:18px}.material-icons-outlined.md-24,.material-icons-round.md-24,.material-icons-two-tone.md-24,.material-icons.md-24{font-size:24px;width:24px;height:24px}.material-icons-outlined.md-36,.material-icons-round.md-36,.material-icons-two-tone.md-36,.material-icons.md-36{font-size:36px;width:36px;height:36px}.material-icons-outlined.md-48,.material-icons-round.md-48,.material-icons-two-tone.md-48,.material-icons.md-48{font-size:48px;width:48px;height:48px}.material-icons-outlined.md-dark,.material-icons-outlined.md-light,.material-icons-round.md-dark,.material-icons-round.md-light,.material-icons-two-tone.md-dark,.material-icons-two-tone.md-light,.material-icons.md-dark,.material-icons.md-light{transition:color .25s}.material-icons-outlined.md-dark,.material-icons-round.md-dark,.material-icons-two-tone.md-dark,.material-icons.md-dark{color:rgba(0,0,0,.54)}.material-icons-outlined.md-dark:hover,.material-icons-round.md-dark:hover,.material-icons-two-tone.md-dark:hover,.material-icons.md-dark:hover{color:rgba(0,0,0,.87)}.material-icons-outlined.md-dark.md-inactive,.material-icons-round.md-dark.md-inactive,.material-icons-two-tone.md-dark.md-inactive,.material-icons.md-dark.md-inactive{color:rgba(0,0,0,.38)}.material-icons-outlined.md-light,.material-icons-round.md-light,.material-icons-two-tone.md-light,.material-icons.md-light{color:hsla(0,0%,100%,.7)}.material-icons-outlined.md-light:hover,.material-icons-round.md-light:hover,.material-icons-two-tone.md-light:hover,.material-icons.md-light:hover{color:#fff}.material-icons-outlined.md-light.md-inactive,.material-icons-round.md-light.md-inactive,.material-icons-two-tone.md-light.md-inactive,.material-icons.md-light.md-inactive{color:hsla(0,0%,100%,.5)}.md-success-icon,.md-success-icon--outlined{color:#0f9d58;border-radius:50%}.md-info-icon,.md-info-icon--outlined{color:#4285f4;border-radius:50%}.md-warning-icon,.md-warning-icon--outlined{color:#f4b400;border-radius:50%}.md-error-icon,.md-error-icon--outlined{color:#db4437;border-radius:50%}.mdc-banner__text{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-banner__graphic{color:#fff;color:var(--mdc-theme-surface,#fff);background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);border-radius:50%}.mdc-banner__content,.mdc-banner__fixed{min-width:344px}@media (max-width:344px),(max-width:480px){.mdc-banner__content,.mdc-banner__fixed{min-width:100%}}.mdc-banner__content{max-width:720px}.mdc-banner{z-index:1;border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;display:none;flex-shrink:0;height:0;position:relative;width:100%}@media (max-width:480px){.mdc-banner .mdc-banner__fixed{left:0;right:0}.mdc-banner .mdc-banner__text{margin-left:16px;margin-right:36px}.mdc-banner .mdc-banner__text[dir=rtl],[dir=rtl] .mdc-banner .mdc-banner__text{margin-left:36px;margin-right:16px}}@media (max-width:480px){.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__content{flex-wrap:wrap}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__graphic{margin-bottom:12px}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text{margin-left:16px;margin-right:8px;padding-bottom:4px}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text[dir=rtl],[dir=rtl] .mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text{margin-left:8px;margin-right:16px}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__actions{margin-left:auto}}.mdc-banner--closing,.mdc-banner--open,.mdc-banner--opening{display:flex}.mdc-banner--open{transition:height .3s ease}.mdc-banner--open .mdc-banner__content{transition:transform .3s ease;transform:translateY(0)}.mdc-banner--closing{transition:height .25s ease}.mdc-banner--closing .mdc-banner__content{transition:transform .25s ease}.mdc-banner--centered .mdc-banner__content{left:0;margin-left:auto;margin-right:auto;right:0}.mdc-banner__fixed{border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;height:inherit;position:fixed;width:100%}.mdc-banner__content{min-height:52px;position:absolute;transform:translateY(-100%)}.mdc-banner__content,.mdc-banner__graphic-text-wrapper{display:flex;width:100%}.mdc-banner__graphic{flex-shrink:0;height:40px;margin:16px 0 16px 16px;text-align:center;width:40px}.mdc-banner__graphic[dir=rtl],[dir=rtl] .mdc-banner__graphic{margin-left:0;margin-right:16px}.mdc-banner__icon{position:relative;top:50%;transform:translateY(-50%)}.mdc-banner__text{margin-left:24px;margin-right:90px;align-self:center;flex-grow:1;padding-top:16px;padding-bottom:16px}.mdc-banner__text[dir=rtl],[dir=rtl] .mdc-banner__text{margin-left:90px;margin-right:24px}.mdc-banner__actions{align-self:flex-end;display:flex;flex-shrink:0;padding:8px 8px 8px 0}.mdc-banner__actions[dir=rtl],[dir=rtl] .mdc-banner__actions{padding-left:8px;padding-right:0}.mdc-banner{border-bottom-color:rgba(0,0,0,.12)}.mdc-banner,.mdc-banner .mdc-banner__fixed{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-banner .mdc-banner__fixed{border-bottom-color:rgba(0,0,0,.12)}.mdc-banner__text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-banner__primary-action:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-banner__primary-action:after,.mdc-banner__primary-action:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-banner__primary-action.mdc-ripple-surface--hover:before,.mdc-banner__primary-action:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-banner__primary-action.mdc-ripple-upgraded--background-focused:before,.mdc-banner__primary-action:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-banner__primary-action:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-banner__primary-action:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-banner__primary-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-banner__secondary-action{margin-left:0;margin-right:8px}.mdc-banner__secondary-action:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-banner__secondary-action:after,.mdc-banner__secondary-action:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-banner__secondary-action.mdc-ripple-surface--hover:before,.mdc-banner__secondary-action:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-banner__secondary-action.mdc-ripple-upgraded--background-focused:before,.mdc-banner__secondary-action:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-banner__secondary-action:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-banner__secondary-action:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-banner__secondary-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-banner__secondary-action[dir=rtl],[dir=rtl] .mdc-banner__secondary-action{margin-left:8px;margin-right:0}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity,0);transition:opacity .28s cubic-bezier(.4,0,.2,1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color,#fff)}.mdc-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;border:none;outline:none;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:transparent}.mdc-button .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-button::-moz-focus-inner{padding:0;border:0}.mdc-button:active{outline:none}.mdc-button:hover{cursor:pointer}.mdc-button:disabled{cursor:default;pointer-events:none}.mdc-button .mdc-button__icon{margin-left:0;margin-right:8px;display:inline-block;position:relative;vertical-align:top}.mdc-button .mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button .mdc-button__icon{margin-left:8px;margin-right:0}.mdc-button .mdc-button__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-button__label+.mdc-button__icon{margin-left:8px;margin-right:0}.mdc-button__label+.mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button__label+.mdc-button__icon{margin-left:0;margin-right:8px}svg.mdc-button__icon{fill:currentColor}.mdc-button--outlined .mdc-button__icon,.mdc-button--raised .mdc-button__icon,.mdc-button--unelevated .mdc-button__icon{margin-left:-4px;margin-right:8px}.mdc-button--outlined .mdc-button__icon[dir=rtl],.mdc-button--outlined .mdc-button__label+.mdc-button__icon,.mdc-button--raised .mdc-button__icon[dir=rtl],.mdc-button--raised .mdc-button__label+.mdc-button__icon,.mdc-button--unelevated .mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--outlined .mdc-button__icon,[dir=rtl] .mdc-button--raised .mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__icon{margin-left:8px;margin-right:-4px}.mdc-button--outlined .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--raised .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__label+.mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button--outlined .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--raised .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__label+.mdc-button__icon{margin-left:-4px;margin-right:8px}.mdc-button--touch{margin-top:6px;margin-bottom:6px}.mdc-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none)}@keyframes mdc-ripple-fg-radius-in{0%{animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-opacity-in{0%{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity,0)}}@keyframes mdc-ripple-fg-opacity-out{0%{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity,0)}to{opacity:0}}.mdc-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-button .mdc-button__ripple:after,.mdc-button .mdc-button__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-button .mdc-button__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-button .mdc-button__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-button .mdc-button__ripple:after,.mdc-button .mdc-button__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-button .mdc-button__ripple{position:absolute;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.mdc-button:not(.mdc-button--outlined) .mdc-button__ripple{top:0;left:0}.mdc-button--raised{transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.mdc-button--outlined{border-style:solid}.mdc-button{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px);padding:0 8px}.mdc-button:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-button:disabled{color:rgba(0,0,0,.38)}.mdc-button .mdc-button__icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.mdc-button .mdc-button__ripple:after,.mdc-button .mdc-button__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-button.mdc-ripple-surface--hover .mdc-button__ripple:before,.mdc-button:hover .mdc-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple:before,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple:after{transition:opacity .15s linear}.mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-button--unelevated,.mdc-button .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-button--unelevated{padding:0 16px;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);height:36px}.mdc-button--unelevated.mdc-button--icon-trailing{padding:0 12px 0 16px}.mdc-button--unelevated.mdc-button--icon-leading{padding:0 16px 0 12px}.mdc-button--unelevated:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.mdc-button--unelevated:disabled{background-color:rgba(0,0,0,.12)}.mdc-button--unelevated:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-button--unelevated:disabled{color:rgba(0,0,0,.38)}.mdc-button--unelevated .mdc-button__icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.mdc-button--unelevated .mdc-button__ripple:after,.mdc-button--unelevated .mdc-button__ripple:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple:before,.mdc-button--unelevated:hover .mdc-button__ripple:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple:before,.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple:after{transition:opacity .15s linear}.mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-button--unelevated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-button--raised,.mdc-button--unelevated .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-button--raised{padding:0 16px;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);height:36px;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mdc-button--raised.mdc-button--icon-trailing{padding:0 12px 0 16px}.mdc-button--raised.mdc-button--icon-leading{padding:0 16px 0 12px}.mdc-button--raised:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.mdc-button--raised:disabled{background-color:rgba(0,0,0,.12)}.mdc-button--raised:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-button--raised:disabled{color:rgba(0,0,0,.38)}.mdc-button--raised .mdc-button__icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.mdc-button--raised .mdc-button__ripple:after,.mdc-button--raised .mdc-button__ripple:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple:before,.mdc-button--raised:hover .mdc-button__ripple:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple:before,.mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple:after{transition:opacity .15s linear}.mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-button--raised.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-button--raised .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-button--raised.mdc-ripple-upgraded--background-focused,.mdc-button--raised:hover,.mdc-button--raised:not(.mdc-ripple-upgraded):focus{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-button--raised:not(:disabled):active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.mdc-button--raised:disabled{box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.mdc-button--outlined{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px);padding:0 15px;border-width:1px}.mdc-button--outlined:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-button--outlined:disabled{color:rgba(0,0,0,.38)}.mdc-button--outlined .mdc-button__icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.mdc-button--outlined .mdc-button__ripple:after,.mdc-button--outlined .mdc-button__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple:before,.mdc-button--outlined:hover .mdc-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple:before,.mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple:after{transition:opacity .15s linear}.mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-button--outlined.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-button--outlined .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-button--outlined:disabled,.mdc-button--outlined:not(:disabled){border-color:rgba(0,0,0,.12)}.mdc-button--outlined.mdc-button--icon-trailing{padding:0 11px 0 15px}.mdc-button--outlined.mdc-button--icon-leading{padding:0 15px 0 11px}.mdc-button--outlined .mdc-button__ripple{top:-1px;left:-1px;border:1px solid transparent}.mdc-button--outlined .mdc-button__touch{left:-1px;width:calc(100% + 2px)}.mdc-card{border-radius:4px;border-radius:var(--mdc-shape-medium,4px);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);position:relative;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;box-sizing:border-box}.mdc-card .mdc-elevation-overlay,.mdc-card:after{width:100%;height:100%;top:0;left:0}.mdc-card:after{border-radius:4px;border-radius:var(--mdc-shape-medium,4px);position:absolute;box-sizing:border-box;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-card--outlined{box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);border:1px solid #e0e0e0}.mdc-card--outlined:after{border:none}.mdc-card__content{border-radius:inherit;height:100%}.mdc-card__media{position:relative;box-sizing:border-box;background-repeat:no-repeat;background-position:50%;background-size:cover}.mdc-card__media:before{display:block;content:""}.mdc-card__media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mdc-card__media:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mdc-card__media--square:before{margin-top:100%}.mdc-card__media--16-9:before{margin-top:56.25%}.mdc-card__media-content{position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box}.mdc-card__primary-action{display:flex;flex-direction:column;box-sizing:border-box;position:relative;outline:none;color:inherit;text-decoration:none;cursor:pointer;overflow:hidden}.mdc-card__primary-action:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mdc-card__primary-action:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mdc-card__actions{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:52px;padding:8px}.mdc-card__actions--full-bleed{padding:0}.mdc-card__action-buttons,.mdc-card__action-icons{display:flex;flex-direction:row;align-items:center;box-sizing:border-box}.mdc-card__action-icons{color:rgba(0,0,0,.6);flex-grow:1;justify-content:flex-end}.mdc-card__action-buttons+.mdc-card__action-icons{margin-left:16px;margin-right:0}.mdc-card__action-buttons+.mdc-card__action-icons[dir=rtl],[dir=rtl] .mdc-card__action-buttons+.mdc-card__action-icons{margin-left:0;margin-right:16px}.mdc-card__action{display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mdc-card__action:focus{outline:none}.mdc-card__action--button{margin-left:0;margin-right:8px;padding:0 8px}.mdc-card__action--button[dir=rtl],[dir=rtl] .mdc-card__action--button{margin-left:8px;margin-right:0}.mdc-card__action--button:last-child,.mdc-card__action--button:last-child[dir=rtl],[dir=rtl] .mdc-card__action--button:last-child{margin-left:0;margin-right:0}.mdc-card__actions--full-bleed .mdc-card__action--button{justify-content:space-between;width:100%;height:auto;max-height:none;margin:0;padding:8px 16px;text-align:left}.mdc-card__actions--full-bleed .mdc-card__action--button[dir=rtl],[dir=rtl] .mdc-card__actions--full-bleed .mdc-card__action--button{text-align:right}.mdc-card__action--icon{margin:-6px 0;padding:12px}.mdc-card__action--icon:not(:disabled){color:rgba(0,0,0,.6)}.mdc-card__primary-action{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-card__primary-action .mdc-card__ripple:after,.mdc-card__primary-action .mdc-card__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-card__primary-action .mdc-card__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-card__primary-action .mdc-card__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-card__primary-action.mdc-ripple-upgraded--unbounded .mdc-card__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-card__primary-action.mdc-ripple-upgraded--foreground-activation .mdc-card__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-card__primary-action.mdc-ripple-upgraded--foreground-deactivation .mdc-card__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-card__primary-action .mdc-card__ripple:after,.mdc-card__primary-action .mdc-card__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-card__primary-action .mdc-card__ripple:after,.mdc-card__primary-action .mdc-card__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-card__primary-action.mdc-ripple-surface--hover .mdc-card__ripple:before,.mdc-card__primary-action:hover .mdc-card__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-card__primary-action.mdc-ripple-upgraded--background-focused .mdc-card__ripple:before,.mdc-card__primary-action:not(.mdc-ripple-upgraded):focus .mdc-card__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-card__primary-action:not(.mdc-ripple-upgraded) .mdc-card__ripple:after{transition:opacity .15s linear}.mdc-card__primary-action:not(.mdc-ripple-upgraded):active .mdc-card__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-card__primary-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-card__primary-action .mdc-card__ripple{box-sizing:content-box;height:100%;overflow:hidden;left:0;pointer-events:none;position:absolute;top:0;width:100%}.mdc-card__primary-action.mdc-ripple-upgraded--background-focused:after,.mdc-card__primary-action:not(.mdc-ripple-upgraded):focus:after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:5px double transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-checkbox{padding:11px;padding:calc(var(--mdc-checkbox-ripple-size, 40px)/2 - 9px);margin:0;margin:calc(var(--mdc-checkbox-touch-target-size, 40px)/2 - 20px)}.mdc-checkbox .mdc-checkbox__ripple:after,.mdc-checkbox .mdc-checkbox__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-checkbox.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.mdc-checkbox:hover .mdc-checkbox__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-checkbox:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after{transition:opacity .15s linear}.mdc-checkbox:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-checkbox.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.mdc-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after{transition:opacity .15s linear}.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-checkbox .mdc-checkbox__background{top:11px;top:calc(var(--mdc-checkbox-ripple-size, 40px)/2 - 9px);left:11px;left:calc(var(--mdc-checkbox-ripple-size, 40px)/2 - 9px)}.mdc-checkbox .mdc-checkbox__native-control{top:0;top:calc(20px - var(--mdc-checkbox-touch-target-size, 40px)/2);right:0;right:calc(20px - var(--mdc-checkbox-touch-target-size, 40px)/2);left:0;left:calc(20px - var(--mdc-checkbox-touch-target-size, 40px)/2);width:40px;width:var(--mdc-checkbox-touch-target-size,40px);height:40px;height:var(--mdc-checkbox-touch-target-size,40px)}.mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}.mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#018786;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786))}@keyframes mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786{0%{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}50%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#018786;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786))}}@keyframes mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786{0%,80%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#018786;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786))}to{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}}.mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786}.mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786}.mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:rgba(0,0,0,.38);border-color:var(--mdc-checkbox-disabled-color,rgba(0,0,0,.38));background-color:transparent}.mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background,.mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,.mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background{border-color:transparent;background-color:rgba(0,0,0,.38);background-color:var(--mdc-checkbox-disabled-color,rgba(0,0,0,.38))}.mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff;color:var(--mdc-checkbox-ink-color,#fff)}.mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff;border-color:var(--mdc-checkbox-ink-color,#fff)}.mdc-checkbox .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff;color:var(--mdc-checkbox-ink-color,#fff)}.mdc-checkbox .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff;border-color:var(--mdc-checkbox-ink-color,#fff)}@keyframes mdc-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:29.7833385}50%{animation-timing-function:cubic-bezier(0,0,.2,1)}to{stroke-dashoffset:0}}@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{transform:scaleX(0)}68.2%{animation-timing-function:cubic-bezier(0,0,0,1)}to{transform:scaleX(1)}}@keyframes mdc-checkbox-checked-unchecked-checkmark-path{0%{animation-timing-function:cubic-bezier(.4,0,1,1);opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-29.7833385}}@keyframes mdc-checkbox-checked-indeterminate-checkmark{0%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:rotate(0deg);opacity:1}to{transform:rotate(45deg);opacity:0}}@keyframes mdc-checkbox-indeterminate-checked-checkmark{0%{animation-timing-function:cubic-bezier(.14,0,0,1);transform:rotate(45deg);opacity:0}to{transform:rotate(1turn);opacity:1}}@keyframes mdc-checkbox-checked-indeterminate-mixedmark{0%{animation-timing-function:mdc-animation-deceleration-curve-timing-function;transform:rotate(-45deg);opacity:0}to{transform:rotate(0deg);opacity:1}}@keyframes mdc-checkbox-indeterminate-checked-mixedmark{0%{animation-timing-function:cubic-bezier(.14,0,0,1);transform:rotate(0deg);opacity:1}to{transform:rotate(315deg);opacity:0}}@keyframes mdc-checkbox-indeterminate-unchecked-mixedmark{0%{animation-timing-function:linear;transform:scaleX(1);opacity:1}32.8%,to{transform:scaleX(0);opacity:0}}.mdc-checkbox{display:inline-block;position:relative;flex:0 0 18px;box-sizing:content-box;width:18px;height:18px;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:GrayText;border-color:var(--mdc-checkbox-disabled-color,GrayText);background-color:transparent}.mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background,.mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,.mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background{border-color:GrayText;background-color:transparent;background-color:var(--mdc-checkbox-disabled-color,transparent)}.mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__checkmark{color:GrayText;color:var(--mdc-checkbox-ink-color,GrayText)}.mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:GrayText;border-color:var(--mdc-checkbox-ink-color,GrayText)}.mdc-checkbox__mixedmark{margin:0 1px}}.mdc-checkbox--disabled{cursor:default;pointer-events:none}.mdc-checkbox__background{display:inline-flex;position:absolute;align-items:center;justify-content:center;box-sizing:border-box;width:18px;height:18px;border:2px solid;border-radius:2px;background-color:transparent;pointer-events:none;will-change:background-color,border-color;transition:background-color 90ms cubic-bezier(.4,0,.6,1) 0ms,border-color 90ms cubic-bezier(.4,0,.6,1) 0ms}.mdc-checkbox__checkmark{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;opacity:0;transition:opacity .18s cubic-bezier(.4,0,.6,1) 0ms}.mdc-checkbox--upgraded .mdc-checkbox__checkmark{opacity:1}.mdc-checkbox__checkmark-path{transition:stroke-dashoffset .18s cubic-bezier(.4,0,.6,1) 0ms;stroke:currentColor;stroke-width:3.12px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-checkbox__mixedmark{width:100%;height:0;transform:scaleX(0) rotate(0deg);border-width:1px;border-style:solid;opacity:0;transition:opacity 90ms cubic-bezier(.4,0,.6,1) 0ms,transform 90ms cubic-bezier(.4,0,.6,1) 0ms}.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background,.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background,.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background,.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background{animation-duration:.18s;animation-timing-function:linear}.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark-path{animation:mdc-checkbox-unchecked-checked-checkmark-path .18s linear 0s;transition:none}.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark{animation:mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;transition:none}.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark-path{animation:mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark{animation:mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark{animation:mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark{animation:mdc-checkbox-indeterminate-checked-checkmark .5s linear 0s;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark{animation:mdc-checkbox-indeterminate-checked-mixedmark .5s linear 0s;transition:none}.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark{animation:mdc-checkbox-indeterminate-unchecked-mixedmark .3s linear 0s;transition:none}.mdc-checkbox__native-control:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background,.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background{transition:border-color 90ms cubic-bezier(0,0,.2,1) 0ms,background-color 90ms cubic-bezier(0,0,.2,1) 0ms}.mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path,.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background .mdc-checkbox__checkmark-path,.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke-dashoffset:0}.mdc-checkbox__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit}.mdc-checkbox__native-control:disabled{cursor:default;pointer-events:none}.mdc-checkbox--touch{margin:4px;margin:calc(var(--mdc-checkbox-state-layer-size, 48px)/2 - var(--mdc-checkbox-state-layer-size, 40px)/2)}.mdc-checkbox--touch .mdc-checkbox__native-control{top:-4px;top:calc(var(--mdc-checkbox-state-layer-size, 40px)/2 - var(--mdc-checkbox-state-layer-size, 48px)/2);right:-4px;right:calc(var(--mdc-checkbox-state-layer-size, 40px)/2 - var(--mdc-checkbox-state-layer-size, 48px)/2);left:-4px;left:calc(var(--mdc-checkbox-state-layer-size, 40px)/2 - var(--mdc-checkbox-state-layer-size, 48px)/2);width:48px;width:var(--mdc-checkbox-state-layer-size,48px);height:48px;height:var(--mdc-checkbox-state-layer-size,48px)}.mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{transition:opacity .18s cubic-bezier(0,0,.2,1) 0ms,transform .18s cubic-bezier(0,0,.2,1) 0ms;opacity:1}.mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{transform:scaleX(1) rotate(-45deg)}.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background .mdc-checkbox__checkmark,.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background .mdc-checkbox__checkmark{transform:rotate(45deg);opacity:0;transition:opacity 90ms cubic-bezier(.4,0,.6,1) 0ms,transform 90ms cubic-bezier(.4,0,.6,1) 0ms}.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background .mdc-checkbox__mixedmark,.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background .mdc-checkbox__mixedmark{transform:scaleX(1) rotate(0deg);opacity:1}.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark-path,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__mixedmark{transition:none}.mdc-checkbox{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-checkbox .mdc-checkbox__ripple:after,.mdc-checkbox .mdc-checkbox__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-checkbox .mdc-checkbox__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-checkbox .mdc-checkbox__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-checkbox.mdc-ripple-upgraded--unbounded .mdc-checkbox__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-checkbox.mdc-ripple-upgraded--foreground-activation .mdc-checkbox__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-checkbox.mdc-ripple-upgraded--foreground-deactivation .mdc-checkbox__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-checkbox .mdc-checkbox__ripple:after,.mdc-checkbox .mdc-checkbox__ripple:before{top:0;left:0;width:100%;height:100%}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:after,.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-checkbox{z-index:0}.mdc-checkbox .mdc-checkbox__ripple:after,.mdc-checkbox .mdc-checkbox__ripple:before{z-index:-1;z-index:var(--mdc-ripple-z-index,-1)}.mdc-checkbox__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-deprecated-chip-trailing-action__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}.mdc-deprecated-chip-trailing-action{border:none;display:inline-flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;padding:0;outline:none;cursor:pointer;-webkit-appearance:none;background:none}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__touch{width:26px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{fill:currentColor;color:inherit}.mdc-deprecated-chip-trailing-action{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:after,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--unbounded .mdc-deprecated-chip-trailing-action__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-chip-trailing-action__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-chip-trailing-action__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:after,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:before{top:0;left:0;width:100%;height:100%}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:after,.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:after,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-deprecated-chip-trailing-action.mdc-ripple-surface--hover .mdc-deprecated-chip-trailing-action__ripple:before,.mdc-deprecated-chip-trailing-action:hover .mdc-deprecated-chip-trailing-action__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--background-focused .mdc-deprecated-chip-trailing-action__ripple:before,.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):focus .mdc-deprecated-chip-trailing-action__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded) .mdc-deprecated-chip-trailing-action__ripple:after{transition:opacity .15s linear}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):active .mdc-deprecated-chip-trailing-action__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple{position:absolute;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.mdc-chip__icon--leading{color:rgba(0,0,0,.54)}.mdc-deprecated-chip-trailing-action{color:#000}.mdc-chip__icon--trailing{color:rgba(0,0,0,.54)}.mdc-chip__icon--trailing:hover{color:rgba(0,0,0,.62)}.mdc-chip__icon--trailing:focus{color:rgba(0,0,0,.87)}.mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-chip__icon.mdc-chip__icon--trailing,.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}.mdc-deprecated-chip-trailing-action[dir=rtl],[dir=rtl] .mdc-deprecated-chip-trailing-action{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}.mdc-chip__icon--trailing[dir=rtl],[dir=rtl] .mdc-chip__icon--trailing{margin-left:-4px;margin-right:4px}.mdc-chip{background-color:#e0e0e0;color:rgba(0,0,0,.87);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip,.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip:hover{color:rgba(0,0,0,.87)}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl],[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip:hover{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{transition:opacity 75ms cubic-bezier(.4,0,.2,1),width .15s cubic-bezier(0,0,.2,1),padding .1s linear,margin .1s linear;opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset .15s cubic-bezier(.4,0,.6,1) 50ms;stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__icon--leading{color:rgba(98,0,238,.54)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-chip-set--choice .mdc-chip .mdc-chip__checkmark-path{stroke:#6200ee;stroke:var(--mdc-theme-primary,#6200ee)}.mdc-chip-set--choice .mdc-chip--selected{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width .15s cubic-bezier(.4,0,.2,1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}.mdc-chip{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-chip .mdc-chip__ripple:after,.mdc-chip .mdc-chip__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-chip .mdc-chip__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-chip .mdc-chip__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-chip.mdc-ripple-upgraded--unbounded .mdc-chip__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-chip.mdc-ripple-upgraded--foreground-activation .mdc-chip__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-chip.mdc-ripple-upgraded--foreground-deactivation .mdc-chip__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-chip .mdc-chip__ripple:after,.mdc-chip .mdc-chip__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-chip .mdc-chip__ripple:after,.mdc-chip .mdc-chip__ripple:before{background-color:rgba(0,0,0,.87);background-color:var(--mdc-ripple-color,rgba(0,0,0,.87))}.mdc-chip.mdc-ripple-surface--hover .mdc-chip__ripple:before,.mdc-chip:hover .mdc-chip__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-chip.mdc-ripple-upgraded--background-focused .mdc-chip__ripple:before,.mdc-chip.mdc-ripple-upgraded:focus-within .mdc-chip__ripple:before,.mdc-chip:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple:before,.mdc-chip:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-chip:not(.mdc-ripple-upgraded) .mdc-chip__ripple:after{transition:opacity .15s linear}.mdc-chip:not(.mdc-ripple-upgraded):active .mdc-chip__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-chip .mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple:before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple:after,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-surface--hover .mdc-chip__ripple:before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover .mdc-chip__ripple:before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded--background-focused .mdc-chip__ripple:before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded:focus-within .mdc-chip__ripple:before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple:before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple:before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded) .mdc-chip__ripple:after{transition:opacity .15s linear}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):active .mdc-chip__ripple:after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.2)}@keyframes mdc-chip-entry{0%{transform:scale(.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry .1s cubic-bezier(0,0,.2,1)}.mdc-circular-progress__determinate-circle,.mdc-circular-progress__indeterminate-circle-graphic{stroke:#6200ee;stroke:var(--mdc-theme-primary,#6200ee)}.mdc-circular-progress__determinate-track{stroke:transparent}@keyframes mdc-circular-progress-container-rotate{to{transform:rotate(1turn)}}@keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(3turn)}}@keyframes mdc-circular-progress-color-1-fade-in-out{0%{opacity:.99}25%{opacity:.99}26%{opacity:0}89%{opacity:0}90%{opacity:.99}to{opacity:.99}}@keyframes mdc-circular-progress-color-2-fade-in-out{0%{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-3-fade-in-out{0%{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-4-fade-in-out{0%{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@keyframes mdc-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes mdc-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}.mdc-circular-progress{display:inline-flex;position:relative;direction:ltr;line-height:0;transition:opacity .25s cubic-bezier(.4,0,.6,1) 0ms}.mdc-circular-progress__determinate-container,.mdc-circular-progress__indeterminate-circle-graphic,.mdc-circular-progress__indeterminate-container,.mdc-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.mdc-circular-progress__determinate-container{transform:rotate(-90deg)}.mdc-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.mdc-circular-progress__determinate-circle-graphic,.mdc-circular-progress__indeterminate-circle-graphic{fill:transparent}.mdc-circular-progress__determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1) 0ms}.mdc-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.mdc-circular-progress__circle-clipper{position:relative;width:50%;height:100%;overflow:hidden}.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic{width:200%}.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{left:-100%}.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container{opacity:0}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{opacity:1;animation:mdc-circular-progress-container-rotate 1.5682352941176s linear infinite}.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-1{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-2{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-3{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-4{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--closed{opacity:0}.mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);position:absolute;left:0;transform-origin:left top;line-height:1.15rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;transition:transform .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}.mdc-floating-label[dir=rtl],[dir=rtl] .mdc-floating-label{right:0;left:auto;transform-origin:right top;text-align:right}.mdc-floating-label--float-above{cursor:auto}.mdc-floating-label--required:after{margin-left:1px;margin-right:0;content:"*"}.mdc-floating-label--required[dir=rtl]:after,[dir=rtl] .mdc-floating-label--required:after{margin-left:0;margin-right:1px}.mdc-floating-label--float-above{transform:translateY(-106%) scale(.75)}.mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-standard .25s 1}@keyframes mdc-floating-label-shake-float-above-standard{0%{transform:translateX(0) translateY(-106%) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-106%) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-106%) scale(.75)}to{transform:translateX(0) translateY(-106%) scale(.75)}}.mdc-line-ripple:after,.mdc-line-ripple:before{position:absolute;bottom:0;left:0;width:100%;border-bottom-style:solid;content:""}.mdc-line-ripple:before{border-bottom-width:1px;z-index:1}.mdc-line-ripple:after{transform:scaleX(0);border-bottom-width:2px;opacity:0;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1)}.mdc-line-ripple--active:after{transform:scaleX(1);opacity:1}.mdc-line-ripple--deactivating:after{opacity:0}.mdc-notched-outline{display:flex;position:absolute;top:0;right:0;left:0;box-sizing:border-box;width:100%;max-width:100%;height:100%;text-align:left;pointer-events:none}.mdc-notched-outline[dir=rtl],[dir=rtl] .mdc-notched-outline{text-align:right}.mdc-notched-outline__leading,.mdc-notched-outline__notch,.mdc-notched-outline__trailing{box-sizing:border-box;height:100%;border-top:1px solid;border-bottom:1px solid;pointer-events:none}.mdc-notched-outline__leading{border-left:1px solid;border-right:none;width:12px}.mdc-notched-outline__leading[dir=rtl],.mdc-notched-outline__trailing,[dir=rtl] .mdc-notched-outline__leading{border-left:none;border-right:1px solid}.mdc-notched-outline__trailing{flex-grow:1}.mdc-notched-outline__trailing[dir=rtl],[dir=rtl] .mdc-notched-outline__trailing{border-left:1px solid;border-right:none}.mdc-notched-outline__notch{flex:0 0 auto;width:auto;max-width:calc(100% - 24px)}.mdc-notched-outline .mdc-floating-label{display:inline-block;position:relative;max-width:100%}.mdc-notched-outline .mdc-floating-label--float-above{text-overflow:clip}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:133.33333%}.mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:0;padding-right:8px;border-top:none}.mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl],[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:8px;padding-right:0}.mdc-notched-outline--no-label .mdc-notched-outline__notch{display:none}.mdc-select{display:inline-flex;position:relative}.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text{color:rgba(0,0,0,.87)}.mdc-select.mdc-select--disabled .mdc-select__selected-text{color:rgba(0,0,0,.38)}.mdc-select:not(.mdc-select--disabled) .mdc-floating-label{color:rgba(0,0,0,.6)}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-select.mdc-select--disabled .mdc-floating-label{color:rgba(0,0,0,.38)}.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon{fill:rgba(0,0,0,.54)}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon{fill:#6200ee;fill:var(--mdc-theme-primary,#6200ee)}.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon{fill:rgba(0,0,0,.38)}.mdc-select:not(.mdc-select--disabled)+.mdc-select-helper-text{color:rgba(0,0,0,.6)}.mdc-select.mdc-select--disabled+.mdc-select-helper-text{color:rgba(0,0,0,.38)}.mdc-select:not(.mdc-select--disabled) .mdc-select__icon{color:rgba(0,0,0,.54)}.mdc-select.mdc-select--disabled .mdc-select__icon{color:rgba(0,0,0,.38)}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-select.mdc-select--disabled .mdc-select__selected-text{color:GrayText}.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon{fill:red}.mdc-select.mdc-select--disabled .mdc-floating-label{color:GrayText}.mdc-select.mdc-select--disabled .mdc-line-ripple:before{border-bottom-color:GrayText}.mdc-select.mdc-select--disabled .mdc-notched-outline__leading,.mdc-select.mdc-select--disabled .mdc-notched-outline__notch,.mdc-select.mdc-select--disabled .mdc-notched-outline__trailing{border-color:GrayText}.mdc-select.mdc-select--disabled+.mdc-select-helper-text,.mdc-select.mdc-select--disabled .mdc-select__icon{color:GrayText}}.mdc-select .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-select .mdc-select__anchor{padding-left:16px;padding-right:0}.mdc-select .mdc-select__anchor[dir=rtl],[dir=rtl] .mdc-select .mdc-select__anchor{padding-left:0;padding-right:16px}.mdc-select.mdc-select--with-leading-icon .mdc-select__anchor,.mdc-select.mdc-select--with-leading-icon .mdc-select__anchor[dir=rtl],[dir=rtl] .mdc-select.mdc-select--with-leading-icon .mdc-select__anchor{padding-left:0;padding-right:0}.mdc-select .mdc-select__icon{width:24px;height:24px;font-size:24px}.mdc-select .mdc-select__dropdown-icon{width:24px;height:24px}.mdc-select .mdc-select__menu .mdc-deprecated-list-item,.mdc-select .mdc-select__menu .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:12px}.mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic{margin-left:12px;margin-right:0}.mdc-select__dropdown-icon{margin-left:12px;margin-right:12px;display:inline-flex;position:relative;align-self:center;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active,.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{position:absolute;top:0;left:0}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-graphic{width:41.6666666667%;height:20.8333333333%}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{opacity:1;transition:opacity 75ms linear 75ms}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active{opacity:0;transition:opacity 75ms linear}.mdc-select__dropdown-icon[dir=rtl],[dir=rtl] .mdc-select__dropdown-icon{margin-left:12px;margin-right:12px}.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{opacity:0;transition:opacity 49.5ms linear}.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-active{opacity:1;transition:opacity .1005s linear 49.5ms}.mdc-select__anchor{width:200px;min-width:0;flex:1 1 auto;position:relative;box-sizing:border-box;overflow:hidden;outline:none;cursor:pointer}.mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-106%) scale(.75)}.mdc-select__selected-text-container{display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;box-sizing:border-box;width:auto;min-width:0;flex-grow:1;height:28px;border:none;outline:none;padding:0;background-color:transparent;color:inherit}.mdc-select__selected-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:100%;text-align:left}.mdc-select__selected-text[dir=rtl],[dir=rtl] .mdc-select__selected-text{text-align:right}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-floating-label,.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label,.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid+.mdc-select-helper-text--validation-msg{color:#b00020;color:var(--mdc-theme-error,#b00020)}.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon,.mdc-select--invalid:not(.mdc-select--disabled) .mdc-select__dropdown-icon{fill:#b00020;fill:var(--mdc-theme-error,#b00020)}.mdc-select--disabled{cursor:default;pointer-events:none}.mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item,.mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item{padding-left:12px;padding-right:12px}.mdc-select__menu .mdc-deprecated-list .mdc-select__icon,.mdc-select__menu .mdc-deprecated-list .mdc-select__icon[dir=rtl],[dir=rtl] .mdc-select__menu .mdc-deprecated-list .mdc-select__icon{margin-left:0;margin-right:0}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-select--filled .mdc-select__anchor{height:56px;display:flex;align-items:baseline}.mdc-select--filled .mdc-select__anchor:before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text:before{content:""}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text-container{height:100%;display:inline-flex;align-items:center}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor:before{display:none}.mdc-select--filled .mdc-select__anchor{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:0;border-bottom-left-radius:0}.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor{background-color:#f5f5f5}.mdc-select--filled.mdc-select--disabled .mdc-select__anchor{background-color:#fafafa}.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.42)}.mdc-select--filled:not(.mdc-select--disabled):hover .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.87)}.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple:after{border-bottom-color:#6200ee;border-bottom-color:var(--mdc-theme-primary,#6200ee)}.mdc-select--filled.mdc-select--disabled .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.06)}.mdc-select--filled .mdc-floating-label{max-width:calc(100% - 64px)}.mdc-select--filled .mdc-floating-label--float-above{max-width:calc(133.33333% - 85.33333px)}.mdc-select--filled .mdc-menu-surface--is-open-below{border-top-left-radius:0;border-top-right-radius:0}.mdc-select--filled.mdc-select--focused.mdc-line-ripple:after{transform:scaleY(2);opacity:1}.mdc-select--filled .mdc-floating-label{left:16px;right:auto}.mdc-select--filled .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-select--filled .mdc-floating-label{left:auto;right:16px}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{left:48px;right:auto}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{left:auto;right:48px}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{max-width:calc(100% - 96px)}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label--float-above{max-width:calc(133.33333% - 128px)}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple:after,.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple:before,.mdc-select--invalid:not(.mdc-select--disabled):hover .mdc-line-ripple:before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error,#b00020)}.mdc-select--outlined{border:none}.mdc-select--outlined .mdc-select__anchor{height:56px}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-56px .25s 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-56px{0%{transform:translateX(0) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-34.75px) scale(.75)}to{transform:translateX(0) translateY(-34.75px) scale(.75)}}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small,4px)}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small,4px);border-bottom-left-radius:0}@supports (top:max(0%)){.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px,var(--mdc-shape-small,4px))}}@supports (top:max(0%)){.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:calc(100% - max(12px, var(--mdc-shape-small, 4px))*2)}}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small,4px);border-bottom-left-radius:0}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small,4px)}@supports (top:max(0%)){.mdc-select--outlined .mdc-select__anchor{padding-left:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-select--outlined .mdc-select__anchor[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-select__anchor{padding-left:0}@supports (top:max(0%)){.mdc-select--outlined .mdc-select__anchor[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-select__anchor{padding-right:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top:max(0%)){.mdc-select--outlined+.mdc-select-helper-text{margin-left:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-select--outlined+.mdc-select-helper-text[dir=rtl],[dir=rtl] .mdc-select--outlined+.mdc-select-helper-text{margin-left:0}@supports (top:max(0%)){.mdc-select--outlined+.mdc-select-helper-text[dir=rtl],[dir=rtl] .mdc-select--outlined+.mdc-select-helper-text{margin-right:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-select--outlined.mdc-select--disabled .mdc-select__anchor,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-select__anchor{background-color:transparent}.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.38)}.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.87)}.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px;border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.06)}.mdc-select--outlined .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-select--outlined .mdc-select__anchor{display:flex;align-items:baseline;overflow:visible}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined .25s 1}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1);font-size:.75rem}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(.75);font-size:1rem}.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text:before{content:""}.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text-container{height:100%;display:inline-flex;align-items:center}.mdc-select--outlined .mdc-select__anchor:before{display:none}.mdc-select--outlined .mdc-select__selected-text-container{display:flex;border:none;z-index:1;background-color:transparent}.mdc-select--outlined .mdc-select__icon{z-index:2}.mdc-select--outlined .mdc-floating-label{line-height:1.15rem;left:4px;right:auto}.mdc-select--outlined .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-floating-label{left:auto;right:4px}.mdc-select--outlined.mdc-select--focused .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__trailing,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px;border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:36px;right:auto}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:auto;right:36px}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(-32px) scale(1)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above[dir=rtl],[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(32px) scale(1)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{font-size:.75rem}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(-32px) scale(.75)}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(32px) scale(.75)}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px .25s 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px{0%{transform:translateX(-32px) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(calc(4% - 32px)) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(calc(-4% - 32px)) translateY(-34.75px) scale(.75)}to{transform:translateX(-32px) translateY(-34.75px) scale(.75)}}.mdc-select--outlined.mdc-select--with-leading-icon[dir=rtl] .mdc-floating-label--shake,[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px .25s 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px-rtl{0%{transform:translateX(32px) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(calc(4% + 32px)) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(calc(-4% + 32px)) translateY(-34.75px) scale(.75)}to{transform:translateX(32px) translateY(-34.75px) scale(.75)}}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 96px)}.mdc-select--outlined .mdc-menu-surface{margin-bottom:8px}.mdc-select--outlined .mdc-menu-surface--is-open-below,.mdc-select--outlined.mdc-select--no-label .mdc-menu-surface{margin-bottom:0}.mdc-select__anchor{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-select__anchor .mdc-select__ripple:after,.mdc-select__anchor .mdc-select__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-select__anchor .mdc-select__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-select__anchor .mdc-select__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-select__anchor.mdc-ripple-upgraded--unbounded .mdc-select__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-select__anchor.mdc-ripple-upgraded--foreground-activation .mdc-select__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-select__anchor.mdc-ripple-upgraded--foreground-deactivation .mdc-select__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-select__anchor .mdc-select__ripple:after,.mdc-select__anchor .mdc-select__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-select__anchor .mdc-select__ripple:after,.mdc-select__anchor .mdc-select__ripple:before{background-color:rgba(0,0,0,.87);background-color:var(--mdc-ripple-color,rgba(0,0,0,.87))}.mdc-select__anchor.mdc-ripple-surface--hover .mdc-select__ripple:before,.mdc-select__anchor:hover .mdc-select__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-select__anchor.mdc-ripple-upgraded--background-focused .mdc-select__ripple:before,.mdc-select__anchor:not(.mdc-ripple-upgraded):focus .mdc-select__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-select__anchor .mdc-select__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:after,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple:before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:hover .mdc-deprecated-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple:after{transition:opacity .15s linear}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple:after,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-list-item__ripple:before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:hover .mdc-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-select-helper-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;margin:0 16px;line-height:normal}.mdc-select-helper-text[dir=rtl],[dir=rtl] .mdc-select-helper-text{margin-left:16px;margin-right:16px}.mdc-select-helper-text:before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.mdc-select-helper-text--validation-msg{opacity:0;transition:opacity .18s cubic-bezier(.4,0,.2,1)}.mdc-select--invalid+.mdc-select-helper-text--validation-msg,.mdc-select-helper-text--validation-msg-persistent{opacity:1}.mdc-select--with-leading-icon .mdc-select__icon{display:inline-block;box-sizing:border-box;border:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;align-self:center;background-color:transparent;fill:currentColor;margin-left:12px;margin-right:12px}.mdc-select--with-leading-icon .mdc-select__icon[dir=rtl],[dir=rtl] .mdc-select--with-leading-icon .mdc-select__icon{margin-left:12px;margin-right:12px}.mdc-select__icon:not([tabindex]),.mdc-select__icon[tabindex="-1"]{cursor:default;pointer-events:none}.mdc-data-table__content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-data-table{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);border:1px solid rgba(0,0,0,.12);-webkit-overflow-scrolling:touch;display:inline-flex;flex-direction:column;box-sizing:border-box;position:relative}.mdc-data-table .mdc-data-table__header-cell:first-child{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-medium,4px)}.mdc-data-table .mdc-data-table__header-cell:first-child[dir=rtl],[dir=rtl] .mdc-data-table .mdc-data-table__header-cell:first-child{border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-medium,4px);border-top-left-radius:0}.mdc-data-table .mdc-data-table__header-cell:last-child{border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-medium,4px)}.mdc-data-table .mdc-data-table__header-cell:last-child[dir=rtl],[dir=rtl] .mdc-data-table .mdc-data-table__header-cell:last-child{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-medium,4px);border-top-right-radius:0}.mdc-data-table__row{background-color:inherit}.mdc-data-table__header-cell{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-data-table__row--selected{background-color:rgba(98,0,238,.04)}.mdc-data-table__pagination-rows-per-page-select:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-data-table__pagination-rows-per-page-select:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-data-table__pagination-rows-per-page-select:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.12)}.mdc-data-table__cell,.mdc-data-table__header-cell{border-bottom-color:rgba(0,0,0,.12)}.mdc-data-table__pagination{border-top-color:rgba(0,0,0,.12)}.mdc-data-table__cell,.mdc-data-table__header-cell{border-bottom-width:1px;border-bottom-style:solid}.mdc-data-table__pagination{border-top-width:1px;border-top-style:solid}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:none}.mdc-data-table__row:not(.mdc-data-table__row--selected):hover{background-color:rgba(0,0,0,.04)}.mdc-data-table__cell,.mdc-data-table__header-cell,.mdc-data-table__pagination-rows-per-page-label,.mdc-data-table__pagination-total{color:rgba(0,0,0,.87)}.mdc-data-table__row{height:52px}.mdc-data-table__pagination{min-height:52px}.mdc-data-table__header-row{height:56px}.mdc-data-table__cell,.mdc-data-table__header-cell{padding:0 16px}.mdc-data-table__cell--checkbox,.mdc-data-table__header-cell--checkbox{padding-left:4px;padding-right:0}.mdc-data-table__cell--checkbox[dir=rtl],.mdc-data-table__header-cell--checkbox[dir=rtl],[dir=rtl] .mdc-data-table__cell--checkbox,[dir=rtl] .mdc-data-table__header-cell--checkbox{padding-left:0;padding-right:4px}.mdc-data-table__sort-icon-button{color:rgba(0,0,0,.6)}.mdc-data-table__sort-icon-button .mdc-icon-button__ripple:after,.mdc-data-table__sort-icon-button .mdc-icon-button__ripple:before{background-color:rgba(0,0,0,.6);background-color:var(--mdc-ripple-color,rgba(0,0,0,.6))}.mdc-data-table__sort-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-data-table__sort-icon-button:hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-data-table__sort-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-data-table__sort-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button{color:rgba(0,0,0,.87)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button .mdc-icon-button__ripple:after,.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button .mdc-icon-button__ripple:before{background-color:rgba(0,0,0,.87);background-color:var(--mdc-ripple-color,rgba(0,0,0,.87))}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button:hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-data-table__table-container{-webkit-overflow-scrolling:touch;overflow-x:auto;width:100%}.mdc-data-table__table{min-width:100%;border:0;white-space:nowrap;border-spacing:0;table-layout:fixed}.mdc-data-table__cell{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);box-sizing:border-box;overflow:hidden;text-align:left;text-overflow:ellipsis}.mdc-data-table__cell--numeric,.mdc-data-table__cell[dir=rtl],[dir=rtl] .mdc-data-table__cell{text-align:right}.mdc-data-table__cell--numeric[dir=rtl],[dir=rtl] .mdc-data-table__cell--numeric{text-align:left}.mdc-data-table__cell--checkbox{width:1px}.mdc-data-table__header-cell{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;outline:none;text-align:left}.mdc-data-table__header-cell[dir=rtl],[dir=rtl] .mdc-data-table__header-cell{text-align:right}.mdc-data-table__header-cell--checkbox{width:1px}.mdc-data-table__header-cell--numeric{text-align:right}.mdc-data-table__header-cell--numeric[dir=rtl],[dir=rtl] .mdc-data-table__header-cell--numeric{text-align:left}.mdc-data-table__sort-icon-button{width:28px;height:28px;padding:2px;transform:rotate(.0001deg);margin-left:4px;margin-right:0;transition:transform .15s cubic-bezier(.4,0,.2,1) 0ms;opacity:0}.mdc-data-table__sort-icon-button.mdc-icon-button--touch{margin-top:0;margin-bottom:0}.mdc-data-table__sort-icon-button.mdc-icon-button--touch .mdc-icon-button__touch{display:none}.mdc-data-table__header-cell--numeric .mdc-data-table__sort-icon-button,.mdc-data-table__sort-icon-button[dir=rtl],[dir=rtl] .mdc-data-table__sort-icon-button{margin-left:0;margin-right:4px}.mdc-data-table__header-cell--numeric .mdc-data-table__sort-icon-button[dir=rtl],[dir=rtl] .mdc-data-table__header-cell--numeric .mdc-data-table__sort-icon-button{margin-left:4px;margin-right:0}.mdc-data-table__header-cell--sorted-descending .mdc-data-table__sort-icon-button{transform:rotate(-180deg)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button,.mdc-data-table__header-cell:hover .mdc-data-table__sort-icon-button,.mdc-data-table__sort-icon-button:focus{opacity:1}.mdc-data-table__header-cell-wrapper{align-items:center;display:inline-flex;vertical-align:middle}.mdc-data-table__header-cell--with-sort{cursor:pointer}.mdc-data-table__sort-status-label{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.mdc-data-table__progress-indicator{display:none;position:absolute;width:100%}.mdc-data-table--in-progress .mdc-data-table__progress-indicator{display:block}.mdc-data-table__scrim{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);height:100%;opacity:.32;position:absolute;top:0;width:100%}.mdc-data-table--sticky-header .mdc-data-table__header-cell{position:sticky;top:0;z-index:1}.mdc-data-table__pagination{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);box-sizing:border-box;display:flex;justify-content:flex-end}.mdc-data-table__pagination-trailing{margin-left:4px;margin-right:0;align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}.mdc-data-table__pagination-trailing[dir=rtl],[dir=rtl] .mdc-data-table__pagination-trailing{margin-left:0;margin-right:4px}.mdc-data-table__pagination-navigation{align-items:center;display:flex}.mdc-data-table__pagination-button{margin-left:0;margin-right:4px}.mdc-data-table__pagination-button .mdc-button__icon[dir=rtl],[dir=rtl] .mdc-data-table__pagination-button .mdc-button__icon{transform:rotate(180deg)}.mdc-data-table__pagination-button[dir=rtl],[dir=rtl] .mdc-data-table__pagination-button{margin-left:4px;margin-right:0}.mdc-data-table__pagination-total{margin-left:14px;margin-right:36px;white-space:nowrap}.mdc-data-table__pagination-total[dir=rtl],[dir=rtl] .mdc-data-table__pagination-total{margin-left:36px;margin-right:14px}.mdc-data-table__pagination-rows-per-page{margin-left:0;margin-right:22px;align-items:center;display:inline-flex}.mdc-data-table__pagination-rows-per-page[dir=rtl],[dir=rtl] .mdc-data-table__pagination-rows-per-page{margin-left:22px;margin-right:0}.mdc-data-table__pagination-rows-per-page-label{margin-left:0;margin-right:12px;white-space:nowrap}.mdc-data-table__pagination-rows-per-page-label[dir=rtl],[dir=rtl] .mdc-data-table__pagination-rows-per-page-label{margin-left:12px;margin-right:0}.mdc-data-table__pagination-rows-per-page-select{min-width:80px;min-width:var(--mdc-menu-min-width,80px);margin:8px 0}.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor{width:100%;min-width:80px;height:36px}.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-27.25px) scale(1);font-size:.75rem}.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-24.75px) scale(.75);font-size:1rem}.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-36px .25s 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-36px{0%{transform:translateX(0) translateY(-24.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-24.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-24.75px) scale(.75)}to{transform:translateX(0) translateY(-24.75px) scale(.75)}}.mdc-data-table__pagination-rows-per-page-select .mdc-select__dropdown-icon{width:20px;height:20px}.mdc-data-table__pagination-rows-per-page-select.mdc-select--outlined .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 56px)}.mdc-data-table__pagination-rows-per-page-select .mdc-deprecated-list-item{height:36px}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-data-table__header-row-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-data-table__row-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.mdc-data-table__header-row-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.mdc-data-table__header-row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after,.mdc-data-table__row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after{transition:opacity .15s linear}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after,.mdc-data-table__row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded,.mdc-data-table__row-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-data-table__header-row-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-data-table__header-row-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-data-table__row-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{border-color:#6200ee;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee));background-color:#6200ee;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee))}@keyframes mdc-checkbox-fade-in-background-8A000000FF6200EE00000000FF6200EE{0%{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}50%{border-color:#6200ee;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee));background-color:#6200ee;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee))}}@keyframes mdc-checkbox-fade-out-background-8A000000FF6200EE00000000FF6200EE{0%,80%{border-color:#6200ee;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee));background-color:#6200ee;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee))}to{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}}.mdc-data-table__header-row-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__header-row-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-in-background-8A000000FF6200EE00000000FF6200EE}.mdc-data-table__header-row-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__header-row-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-out-background-8A000000FF6200EE00000000FF6200EE}.mdc-dialog,.mdc-dialog__scrim{position:fixed;top:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.mdc-dialog{display:none;z-index:7;z-index:var(--mdc-dialog-z-index,7)}.mdc-dialog .mdc-dialog__surface{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-dialog .mdc-dialog__scrim,.mdc-dialog .mdc-dialog__surface-scrim{background-color:rgba(0,0,0,.32)}.mdc-dialog .mdc-dialog__title{color:rgba(0,0,0,.87)}.mdc-dialog .mdc-dialog__content{color:rgba(0,0,0,.6)}.mdc-dialog .mdc-dialog__close{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple:after,.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-dialog .mdc-dialog__close:hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions,.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions,.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title{border-color:rgba(0,0,0,.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:0}.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mdc-dialog .mdc-dialog__content{padding:20px 24px}.mdc-dialog .mdc-dialog__surface{min-width:280px}@media (max-width:592px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media (min-width:592px){.mdc-dialog .mdc-dialog__surface{max-width:560px}}.mdc-dialog .mdc-dialog__surface{max-height:calc(100% - 32px)}.mdc-dialog .mdc-dialog__surface{border-radius:4px;border-radius:var(--mdc-shape-medium,4px)}@media (max-width:960px) and (max-height:1440px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px;max-width:560px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width:720px) and (max-height:1023px) and (max-width:672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:calc(100vw - 112px)}}@media (max-width:720px) and (max-height:1023px) and (min-width:672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:560px}}@media (max-width:720px) and (max-height:1023px) and (max-height:720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:calc(100vh - 160px)}}@media (max-width:720px) and (max-height:1023px) and (min-height:720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px}}@media (max-width:720px) and (max-height:1023px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width:720px) and (max-height:400px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100%;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:-8px}}@media (max-width:600px) and (max-height:960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:-8px}}@media (min-width:960px) and (min-height:1440px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:calc(100vw - 400px)}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim{opacity:0}.mdc-dialog__scrim{opacity:0;z-index:-1}.mdc-dialog__container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;transform:scale(.8);opacity:0;pointer-events:none}.mdc-dialog__surface{position:relative;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;max-width:100%;max-height:100%;pointer-events:auto;overflow-y:auto}.mdc-dialog__surface .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-dialog__surface[dir=rtl],[dir=rtl] .mdc-dialog__surface{text-align:right}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-dialog__surface{outline:2px solid windowText}}.mdc-dialog__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:2px solid transparent;border-radius:inherit;content:"";pointer-events:none}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.mdc-dialog__surface:before{content:none}}.mdc-dialog__title{display:block;line-height:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit);position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:0 24px 9px}.mdc-dialog__title:before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}.mdc-dialog__title[dir=rtl],[dir=rtl] .mdc-dialog__title{text-align:right}.mdc-dialog--scrollable .mdc-dialog__title{margin-bottom:1px;padding-bottom:15px}.mdc-dialog--fullscreen .mdc-dialog__header{align-items:baseline;border-bottom:1px solid transparent;display:inline-flex;justify-content:space-between;padding:0 16px 9px;z-index:1}.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close{right:-12px}.mdc-dialog--fullscreen .mdc-dialog__title{margin-bottom:0;padding:0;border-bottom:0}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:0;margin-bottom:0}.mdc-dialog--fullscreen .mdc-dialog__close{top:5px}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions{border-top:1px solid transparent}.mdc-dialog__content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size,1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height,1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing,.03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);flex-grow:1;box-sizing:border-box;margin:0;overflow:auto;-webkit-overflow-scrolling:touch}.mdc-dialog__content>:first-child{margin-top:0}.mdc-dialog__content>:last-child{margin-bottom:0}.mdc-dialog__header+.mdc-dialog__content,.mdc-dialog__title+.mdc-dialog__content{padding-top:0}.mdc-dialog--scrollable .mdc-dialog__title+.mdc-dialog__content{padding-top:8px;padding-bottom:8px}.mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:6px 0 0}.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:0}.mdc-dialog__actions{display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid transparent}.mdc-dialog--stacked .mdc-dialog__actions{flex-direction:column;align-items:flex-end}.mdc-dialog__button{margin-left:8px;margin-right:0;max-width:100%;text-align:right}.mdc-dialog__button[dir=rtl],[dir=rtl] .mdc-dialog__button{margin-left:0;margin-right:8px}.mdc-dialog__button:first-child,.mdc-dialog__button:first-child[dir=rtl],[dir=rtl] .mdc-dialog__button:first-child{margin-left:0;margin-right:0}.mdc-dialog__button[dir=rtl],[dir=rtl] .mdc-dialog__button{text-align:left}.mdc-dialog--stacked .mdc-dialog__button:not(:first-child){margin-top:12px}.mdc-dialog--closing,.mdc-dialog--open,.mdc-dialog--opening{display:flex}.mdc-dialog--opening .mdc-dialog__scrim{transition:opacity .15s linear}.mdc-dialog--opening .mdc-dialog__container{transition:opacity 75ms linear,transform .15s cubic-bezier(0,0,.2,1) 0ms}.mdc-dialog--closing .mdc-dialog__container,.mdc-dialog--closing .mdc-dialog__scrim{transition:opacity 75ms linear}.mdc-dialog--closing .mdc-dialog__container{transform:none}.mdc-dialog--open .mdc-dialog__scrim{opacity:1}.mdc-dialog--open .mdc-dialog__container{transform:none;opacity:1}.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim{opacity:1;z-index:1}.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{transition:opacity 75ms linear}.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim{transition:opacity .15s linear}.mdc-dialog__surface-scrim{display:none;opacity:0;position:absolute;width:100%;height:100%}.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim{display:block}.mdc-dialog-scroll-lock,.mdc-drawer{overflow:hidden}.mdc-drawer{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-top-left-radius:0;border-top-right-radius:0;border-top-right-radius:var(--mdc-shape-large,0);border-bottom-right-radius:0;border-bottom-right-radius:var(--mdc-shape-large,0);border-bottom-left-radius:0;z-index:6;width:256px;display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;height:100%;border-right:1px solid;border-color:rgba(0,0,0,.12);transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.mdc-drawer .mdc-drawer__title{color:rgba(0,0,0,.87)}.mdc-drawer .mdc-deprecated-list-group__subheader,.mdc-drawer .mdc-deprecated-list-item__graphic,.mdc-drawer .mdc-drawer__subtitle{color:rgba(0,0,0,.6)}.mdc-drawer .mdc-deprecated-list-item{color:rgba(0,0,0,.87)}.mdc-drawer .mdc-deprecated-list-item--activated{color:rgba(98,0,238,.87)}.mdc-drawer[dir=rtl],[dir=rtl] .mdc-drawer{border-top-left-radius:0;border-top-left-radius:var(--mdc-shape-large,0);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-left-radius:var(--mdc-shape-large,0)}.mdc-drawer .mdc-deprecated-list-item{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content{margin-left:256px;margin-right:0}.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content[dir=rtl],[dir=rtl] .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content{margin-left:0;margin-right:256px}.mdc-drawer[dir=rtl],[dir=rtl] .mdc-drawer{border-right-width:0;border-left-width:1px;border-right-style:none;border-left-style:solid}.mdc-drawer .mdc-deprecated-list-item{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);height:40px;margin:8px;padding:0 8px}.mdc-drawer .mdc-deprecated-list-item:first-child{margin-top:2px}.mdc-drawer .mdc-deprecated-list-item:last-child{margin-bottom:0}.mdc-drawer .mdc-deprecated-list-group__subheader{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);display:block;line-height:normal;margin:0;padding:0 16px}.mdc-drawer .mdc-deprecated-list-group__subheader:before{display:inline-block;width:0;height:24px;content:"";vertical-align:0}.mdc-drawer .mdc-deprecated-list-divider{margin:3px 0 4px}.mdc-drawer .mdc-deprecated-list-item__graphic,.mdc-drawer .mdc-deprecated-list-item__text{pointer-events:none}.mdc-drawer--animate{transform:translateX(-100%)}.mdc-drawer--animate[dir=rtl],[dir=rtl] .mdc-drawer--animate{transform:translateX(100%)}.mdc-drawer--opening{transition-duration:.25s}.mdc-drawer--opening,.mdc-drawer--opening[dir=rtl],[dir=rtl] .mdc-drawer--opening{transform:translateX(0)}.mdc-drawer--closing{transform:translateX(-100%);transition-duration:.2s}.mdc-drawer--closing[dir=rtl],[dir=rtl] .mdc-drawer--closing{transform:translateX(100%)}.mdc-drawer__header{flex-shrink:0;box-sizing:border-box;min-height:64px;padding:0 16px 4px}.mdc-drawer__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit);display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-drawer__title:before{display:inline-block;width:0;height:36px;content:"";vertical-align:0}.mdc-drawer__title:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-drawer__subtitle{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);display:block;margin-top:0;line-height:normal;margin-bottom:0}.mdc-drawer__subtitle:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-drawer__content{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}.mdc-drawer--dismissible{left:0;right:auto;display:none;position:absolute}.mdc-drawer--dismissible[dir=rtl],[dir=rtl] .mdc-drawer--dismissible{left:auto;right:0}.mdc-drawer--dismissible.mdc-drawer--open{display:flex}.mdc-drawer-app-content{position:relative}.mdc-drawer-app-content,.mdc-drawer-app-content[dir=rtl],[dir=rtl] .mdc-drawer-app-content{margin-left:0;margin-right:0}.mdc-drawer--modal{box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);left:0;right:auto;display:none;position:fixed}.mdc-drawer--modal+.mdc-drawer-scrim{background-color:rgba(0,0,0,.32)}.mdc-drawer--modal[dir=rtl],[dir=rtl] .mdc-drawer--modal{left:auto;right:0}.mdc-drawer--modal.mdc-drawer--open{display:flex}.mdc-drawer-scrim{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:5;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.mdc-drawer--open+.mdc-drawer-scrim{display:block}.mdc-drawer--animate+.mdc-drawer-scrim{opacity:0}.mdc-drawer--opening+.mdc-drawer-scrim{transition-duration:.25s;opacity:1}.mdc-drawer--closing+.mdc-drawer-scrim{transition-duration:.2s;opacity:0}.mdc-elevation--z0{box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.mdc-elevation--z1{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.mdc-elevation--z2{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mdc-elevation--z3{box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12)}.mdc-elevation--z4{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-elevation--z5{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)}.mdc-elevation--z6{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.mdc-elevation--z7{box-shadow:0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12)}.mdc-elevation--z8{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.mdc-elevation--z9{box-shadow:0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12)}.mdc-elevation--z10{box-shadow:0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12)}.mdc-elevation--z11{box-shadow:0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12)}.mdc-elevation--z12{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mdc-elevation--z13{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)}.mdc-elevation--z14{box-shadow:0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12)}.mdc-elevation--z15{box-shadow:0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12)}.mdc-elevation--z16{box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12)}.mdc-elevation--z17{box-shadow:0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12)}.mdc-elevation--z18{box-shadow:0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12)}.mdc-elevation--z19{box-shadow:0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12)}.mdc-elevation--z20{box-shadow:0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12)}.mdc-elevation--z21{box-shadow:0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12)}.mdc-elevation--z22{box-shadow:0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12)}.mdc-elevation--z23{box-shadow:0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12)}.mdc-elevation--z24{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.mdc-elevation-transition{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);will-change:box-shadow}.mdc-fab{display:inline-flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;width:56px;height:56px;padding:0;border:none;fill:currentColor;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-moz-appearance:none;-webkit-appearance:none;overflow:visible;transition:box-shadow .28s cubic-bezier(.4,0,.2,1),opacity 15ms linear 30ms,transform .27s cubic-bezier(0,0,.2,1) 0ms}.mdc-fab .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-fab::-moz-focus-inner{padding:0;border:0}.mdc-fab.mdc-ripple-upgraded--background-focused,.mdc-fab:hover,.mdc-fab:not(.mdc-ripple-upgraded):focus{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.mdc-fab:active,.mdc-fab:focus:active{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mdc-fab:active,.mdc-fab:focus{outline:none}.mdc-fab:hover{cursor:pointer}.mdc-fab>svg{width:100%}.mdc-fab--mini{width:40px;height:40px}.mdc-fab--extended{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height,2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);border-radius:24px;padding-left:20px;padding-right:20px;width:auto;max-width:100%;height:48px;line-height:normal}.mdc-fab--extended .mdc-fab__ripple{border-radius:24px}.mdc-fab--extended .mdc-fab__icon{margin-left:-8px;margin-right:12px}.mdc-fab--extended .mdc-fab__icon[dir=rtl],.mdc-fab--extended .mdc-fab__label+.mdc-fab__icon,[dir=rtl] .mdc-fab--extended .mdc-fab__icon{margin-left:12px;margin-right:-8px}.mdc-fab--extended .mdc-fab__label+.mdc-fab__icon[dir=rtl],[dir=rtl] .mdc-fab--extended .mdc-fab__label+.mdc-fab__icon{margin-left:-8px;margin-right:12px}.mdc-fab--touch{margin:4px}.mdc-fab--touch .mdc-fab__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}.mdc-fab:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-fab__label{justify-content:flex-start;text-overflow:ellipsis;white-space:nowrap;overflow-x:hidden;overflow-y:visible}.mdc-fab__icon{transition:transform .18s cubic-bezier(0,0,.2,1) 90ms;fill:currentColor;will-change:transform}.mdc-fab .mdc-fab__icon{display:inline-flex;align-items:center;justify-content:center}.mdc-fab--exited{transform:scale(0);opacity:0;transition:opacity 15ms linear .15s,transform .18s cubic-bezier(.4,0,1,1) 0ms}.mdc-fab--exited .mdc-fab__icon{transform:scale(0);transition:transform 135ms cubic-bezier(.4,0,1,1) 0ms}.mdc-fab{background-color:#018786;background-color:var(--mdc-theme-secondary,#018786);box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.mdc-fab .mdc-fab__icon{width:24px;height:24px;font-size:24px}.mdc-fab,.mdc-fab:disabled .mdc-fab__icon,.mdc-fab:disabled .mdc-fab__label,.mdc-fab:not(:disabled) .mdc-fab__icon,.mdc-fab:not(:disabled) .mdc-fab__label{color:#fff;color:var(--mdc-theme-on-secondary,#fff)}.mdc-fab:not(.mdc-fab--extended),.mdc-fab:not(.mdc-fab--extended) .mdc-fab__ripple{border-radius:50%}.mdc-fab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-fab .mdc-fab__ripple:after,.mdc-fab .mdc-fab__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-fab .mdc-fab__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-fab .mdc-fab__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-fab.mdc-ripple-upgraded--unbounded .mdc-fab__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-fab.mdc-ripple-upgraded--foreground-activation .mdc-fab__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-fab.mdc-ripple-upgraded--foreground-deactivation .mdc-fab__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-fab .mdc-fab__ripple:after,.mdc-fab .mdc-fab__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-fab .mdc-fab__ripple:after,.mdc-fab .mdc-fab__ripple:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-secondary,#fff))}.mdc-fab.mdc-ripple-surface--hover .mdc-fab__ripple:before,.mdc-fab:hover .mdc-fab__ripple:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__ripple:before,.mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-fab:not(.mdc-ripple-upgraded) .mdc-fab__ripple:after{transition:opacity .15s linear}.mdc-fab:not(.mdc-ripple-upgraded):active .mdc-fab__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-fab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-fab .mdc-fab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.mdc-fab{z-index:0}.mdc-fab .mdc-fab__ripple:after,.mdc-fab .mdc-fab__ripple:before{z-index:-1;z-index:var(--mdc-ripple-z-index,-1)}.mdc-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:inline-flex;align-items:center;vertical-align:middle}.mdc-form-field>label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0;order:0}.mdc-form-field>label[dir=rtl],[dir=rtl] .mdc-form-field>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px}.mdc-form-field--nowrap>label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mdc-form-field--align-end>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px;order:-1}.mdc-form-field--align-end>label[dir=rtl],[dir=rtl] .mdc-form-field--align-end>label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0}.mdc-form-field--space-between{justify-content:space-between}.mdc-form-field--space-between>label,.mdc-form-field--space-between>label[dir=rtl],[dir=rtl] .mdc-form-field--space-between>label{margin:0}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.mdc-icon-button img,.mdc-icon-button svg{width:24px;height:24px}.mdc-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:default;pointer-events:none}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button--on .mdc-icon-button__icon,.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}.mdc-icon-button--touch{margin-top:0;margin-bottom:0}.mdc-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-icon-button .mdc-icon-button__ripple:after,.mdc-icon-button .mdc-icon-button__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-icon-button .mdc-icon-button__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-icon-button .mdc-icon-button__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-icon-button .mdc-icon-button__ripple:after,.mdc-icon-button .mdc-icon-button__ripple:before{top:0;left:0;width:100%;height:100%}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:after,.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-icon-button .mdc-icon-button__ripple:after,.mdc-icon-button .mdc-icon-button__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-icon-button:hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-icon-button .mdc-icon-button__ripple{pointer-events:none;z-index:1}.mdc-image-list{display:flex;flex-wrap:wrap;margin:0 auto;padding:0}.mdc-image-list__image-aspect-container,.mdc-image-list__item{position:relative;box-sizing:border-box}.mdc-image-list__item{list-style-type:none}.mdc-image-list__image{width:100%}.mdc-image-list__image-aspect-container .mdc-image-list__image{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover}.mdc-image-list__image-aspect-container{padding-bottom:100%}.mdc-image-list__image{border-radius:0}.mdc-image-list--with-text-protection .mdc-image-list__supporting{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.mdc-image-list__supporting{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;padding:8px 0;line-height:24px}.mdc-image-list__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-image-list--with-text-protection .mdc-image-list__supporting{position:absolute;bottom:0;width:100%;height:48px;padding:0 16px;background:rgba(0,0,0,.6);color:#fff}.mdc-image-list--masonry{display:block}.mdc-image-list--masonry .mdc-image-list__item{-moz-column-break-inside:avoid;break-inside:avoid-column}.mdc-image-list--masonry .mdc-image-list__image{display:block;height:auto}:root{--mdc-layout-grid-margin-desktop:24px;--mdc-layout-grid-gutter-desktop:24px;--mdc-layout-grid-column-width-desktop:72px;--mdc-layout-grid-margin-tablet:16px;--mdc-layout-grid-gutter-tablet:16px;--mdc-layout-grid-column-width-tablet:72px;--mdc-layout-grid-margin-phone:16px;--mdc-layout-grid-gutter-phone:16px;--mdc-layout-grid-column-width-phone:72px}@media (min-width:840px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:24px;padding:var(--mdc-layout-grid-margin-desktop,24px)}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:16px;padding:var(--mdc-layout-grid-margin-tablet,16px)}}@media (max-width:599px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:16px;padding:var(--mdc-layout-grid-margin-phone,16px)}}@media (min-width:840px){.mdc-layout-grid__inner{display:flex;flex-flow:row wrap;align-items:stretch;margin:-12px;margin:calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{display:grid;margin:0;grid-gap:24px;grid-gap:var(--mdc-layout-grid-gutter-desktop,24px);grid-template-columns:repeat(12,minmax(0,1fr))}}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid__inner{display:flex;flex-flow:row wrap;align-items:stretch;margin:-8px;margin:calc(var(--mdc-layout-grid-gutter-tablet, 16px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{display:grid;margin:0;grid-gap:16px;grid-gap:var(--mdc-layout-grid-gutter-tablet,16px);grid-template-columns:repeat(8,minmax(0,1fr))}}}@media (max-width:599px){.mdc-layout-grid__inner{display:flex;flex-flow:row wrap;align-items:stretch;margin:-8px;margin:calc(var(--mdc-layout-grid-gutter-phone, 16px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{display:grid;margin:0;grid-gap:16px;grid-gap:var(--mdc-layout-grid-gutter-phone,16px);grid-template-columns:repeat(4,minmax(0,1fr))}}}@media (min-width:840px){.mdc-layout-grid__cell{width:calc(33.33333% - 24px);width:calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));box-sizing:border-box;margin:12px;margin:calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2)}@supports (display:grid){.mdc-layout-grid__cell{width:auto;grid-column-end:span 4;margin:0}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-desktop{width:calc(8.33333% - 24px);width:calc(8.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-desktop{width:auto;grid-column-end:span 1}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-desktop{width:calc(16.66667% - 24px);width:calc(16.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-desktop{width:auto;grid-column-end:span 2}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-desktop{width:calc(25% - 24px);width:calc(25% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-desktop{width:auto;grid-column-end:span 3}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-desktop{width:calc(33.33333% - 24px);width:calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-desktop{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-desktop{width:calc(41.66667% - 24px);width:calc(41.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-desktop{width:auto;grid-column-end:span 5}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-desktop{width:calc(50% - 24px);width:calc(50% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-desktop{width:auto;grid-column-end:span 6}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-desktop{width:calc(58.33333% - 24px);width:calc(58.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-desktop{width:auto;grid-column-end:span 7}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-desktop{width:calc(66.66667% - 24px);width:calc(66.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-desktop{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-desktop{width:calc(75% - 24px);width:calc(75% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-desktop{width:auto;grid-column-end:span 9}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-desktop{width:calc(83.33333% - 24px);width:calc(83.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-desktop{width:auto;grid-column-end:span 10}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-desktop{width:calc(91.66667% - 24px);width:calc(91.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-desktop{width:auto;grid-column-end:span 11}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-desktop{width:calc(100% - 24px);width:calc(100% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-desktop{width:auto;grid-column-end:span 12}}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid__cell{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px));box-sizing:border-box;margin:8px;margin:calc(var(--mdc-layout-grid-gutter-tablet, 16px)/2)}@supports (display:grid){.mdc-layout-grid__cell{width:auto;grid-column-end:span 4;margin:0}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-tablet{width:calc(12.5% - 16px);width:calc(12.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-tablet{width:auto;grid-column-end:span 1}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-tablet{width:calc(25% - 16px);width:calc(25% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-tablet{width:auto;grid-column-end:span 2}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-tablet{width:calc(37.5% - 16px);width:calc(37.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-tablet{width:auto;grid-column-end:span 3}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-tablet{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-tablet{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-tablet{width:calc(62.5% - 16px);width:calc(62.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-tablet{width:auto;grid-column-end:span 5}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-tablet{width:calc(75% - 16px);width:calc(75% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-tablet{width:auto;grid-column-end:span 6}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-tablet{width:calc(87.5% - 16px);width:calc(87.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-tablet{width:auto;grid-column-end:span 7}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-tablet{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-tablet{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-tablet{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-tablet{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-tablet{width:auto;grid-column-end:span 8}}}@media (max-width:599px){.mdc-layout-grid__cell{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));box-sizing:border-box;margin:8px;margin:calc(var(--mdc-layout-grid-gutter-phone, 16px)/2)}@supports (display:grid){.mdc-layout-grid__cell{width:auto;grid-column-end:span 4;margin:0}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-phone{width:calc(25% - 16px);width:calc(25% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-phone{width:auto;grid-column-end:span 1}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-phone{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-phone{width:auto;grid-column-end:span 2}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-phone{width:calc(75% - 16px);width:calc(75% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-phone{width:auto;grid-column-end:span 3}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-phone{width:auto;grid-column-end:span 4}}}.mdc-layout-grid__cell--order-1{order:1}.mdc-layout-grid__cell--order-2{order:2}.mdc-layout-grid__cell--order-3{order:3}.mdc-layout-grid__cell--order-4{order:4}.mdc-layout-grid__cell--order-5{order:5}.mdc-layout-grid__cell--order-6{order:6}.mdc-layout-grid__cell--order-7{order:7}.mdc-layout-grid__cell--order-8{order:8}.mdc-layout-grid__cell--order-9{order:9}.mdc-layout-grid__cell--order-10{order:10}.mdc-layout-grid__cell--order-11{order:11}.mdc-layout-grid__cell--order-12{order:12}.mdc-layout-grid__cell--align-top{align-self:flex-start}@supports (display:grid){.mdc-layout-grid__cell--align-top{align-self:start}}.mdc-layout-grid__cell--align-middle{align-self:center}.mdc-layout-grid__cell--align-bottom{align-self:flex-end}@supports (display:grid){.mdc-layout-grid__cell--align-bottom{align-self:end}}@media (min-width:840px){.mdc-layout-grid--fixed-column-width{width:1176px;width:calc(var(--mdc-layout-grid-column-width-desktop, 72px)*12 + var(--mdc-layout-grid-gutter-desktop, 24px)*11 + var(--mdc-layout-grid-margin-desktop, 24px)*2)}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid--fixed-column-width{width:720px;width:calc(var(--mdc-layout-grid-column-width-tablet, 72px)*8 + var(--mdc-layout-grid-gutter-tablet, 16px)*7 + var(--mdc-layout-grid-margin-tablet, 16px)*2)}}@media (max-width:599px){.mdc-layout-grid--fixed-column-width{width:368px;width:calc(var(--mdc-layout-grid-column-width-phone, 72px)*4 + var(--mdc-layout-grid-gutter-phone, 16px)*3 + var(--mdc-layout-grid-margin-phone, 16px)*2)}}.mdc-layout-grid--align-left{margin-right:auto;margin-left:0}.mdc-layout-grid--align-right{margin-right:0;margin-left:auto}@keyframes mdc-linear-progress-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%);transform:translateX(var(--mdc-linear-progress-primary-half,83.67142%))}to{transform:translateX(200.611057%);transform:translateX(var(--mdc-linear-progress-primary-full,200.611057%))}}@keyframes mdc-linear-progress-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes mdc-linear-progress-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%);transform:translateX(var(--mdc-linear-progress-secondary-quarter,37.651913%))}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%);transform:translateX(var(--mdc-linear-progress-secondary-half,84.386165%))}to{transform:translateX(160.277782%);transform:translateX(var(--mdc-linear-progress-secondary-full,160.277782%))}}@keyframes mdc-linear-progress-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}@keyframes mdc-linear-progress-buffering{0%{transform:rotate(180deg) translateX(-10px)}}@keyframes mdc-linear-progress-primary-indeterminate-translate-reverse{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-83.67142%);transform:translateX(var(--mdc-linear-progress-primary-half-neg,-83.67142%))}to{transform:translateX(-200.611057%);transform:translateX(var(--mdc-linear-progress-primary-full-neg,-200.611057%))}}@keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(-37.651913%);transform:translateX(var(--mdc-linear-progress-secondary-quarter-neg,-37.651913%))}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(-84.386165%);transform:translateX(var(--mdc-linear-progress-secondary-half-neg,-84.386165%))}to{transform:translateX(-160.277782%);transform:translateX(var(--mdc-linear-progress-secondary-full-neg,-160.277782%))}}@keyframes mdc-linear-progress-buffering-reverse{0%{transform:translateX(-10px)}}.mdc-linear-progress{position:relative;width:100%;height:4px;transform:translateZ(0);outline:1px solid transparent;overflow:hidden;transition:opacity .25s cubic-bezier(.4,0,.6,1) 0ms}.mdc-linear-progress__bar{position:absolute;width:100%;height:100%;animation:none;transform-origin:top left;transition:transform .25s cubic-bezier(.4,0,.6,1) 0ms}.mdc-linear-progress__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top:4px solid}.mdc-linear-progress__buffer{display:flex;position:absolute;width:100%;height:100%}.mdc-linear-progress__buffer-dots{background-repeat:repeat-x;background-size:10px 4px;flex:auto;transform:rotate(180deg);animation:mdc-linear-progress-buffering .25s linear infinite}.mdc-linear-progress__buffer-bar{flex:0 1 100%;transition:flex-basis .25s cubic-bezier(.4,0,.6,1) 0ms}.mdc-linear-progress__primary-bar{transform:scaleX(0)}.mdc-linear-progress__secondary-bar{display:none}.mdc-linear-progress--indeterminate .mdc-linear-progress__bar{transition:none}.mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar{left:-145.166611%}.mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar{left:-54.888891%;display:block}.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar{animation:mdc-linear-progress-primary-indeterminate-translate 2s linear infinite}.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar>.mdc-linear-progress__bar-inner{animation:mdc-linear-progress-primary-indeterminate-scale 2s linear infinite}.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar{animation:mdc-linear-progress-secondary-indeterminate-translate 2s linear infinite}.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar>.mdc-linear-progress__bar-inner{animation:mdc-linear-progress-secondary-indeterminate-scale 2s linear infinite}.mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__bar{right:0;transform-origin:center right}.mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar{animation-name:mdc-linear-progress-primary-indeterminate-translate-reverse}.mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar{animation-name:mdc-linear-progress-secondary-indeterminate-translate-reverse}.mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__buffer-dots,[dir=rtl] .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__buffer-dots{animation:mdc-linear-progress-buffering-reverse .25s linear infinite;transform:rotate(0)}.mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar{right:-145.166611%;left:auto}.mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar{right:-54.888891%;left:auto}.mdc-linear-progress--closed{opacity:0}.mdc-linear-progress--closed-animation-off.mdc-linear-progress--indeterminate .mdc-linear-progress__bar,.mdc-linear-progress--closed-animation-off.mdc-linear-progress--indeterminate .mdc-linear-progress__bar .mdc-linear-progress__bar-inner,.mdc-linear-progress--closed-animation-off .mdc-linear-progress__buffer-dots{animation:none}.mdc-linear-progress__bar-inner{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-linear-progress__buffer-dots{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E")}.mdc-linear-progress__buffer-bar{background-color:#e6e6e6}.mdc-deprecated-list{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);line-height:1.5rem;margin:0;padding:8px 0;list-style-type:none;color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.mdc-deprecated-list:focus{outline:none}.mdc-deprecated-list-item__secondary-text{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.mdc-deprecated-list-item__graphic{background-color:transparent;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.mdc-deprecated-list-item__meta{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38))}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__text{opacity:.38}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__secondary-text,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__text{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-deprecated-list-item--activated,.mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic,.mdc-deprecated-list-item--selected,.mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-deprecated-list--dense{padding-top:4px;padding-bottom:4px;font-size:.812rem}.mdc-deprecated-list-item{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;padding:0 16px;height:48px}.mdc-deprecated-list-item:focus{outline:none}.mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused:before,.mdc-deprecated-list-item:not(.mdc-deprecated-list-item--selected):focus:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-deprecated-list-item.mdc-deprecated-list-item--selected:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:3px double transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px;height:56px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px;height:56px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px;height:56px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--image-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px;height:72px}.mdc-deprecated-list--image-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--video-list .mdc-deprecated-list-item{padding-left:0;padding-right:16px;height:72px}.mdc-deprecated-list--video-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-item{padding-left:16px;padding-right:0}.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:20px;height:20px}.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list-item__graphic{flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;-o-object-fit:cover;object-fit:cover;margin-left:0;margin-right:32px;width:24px;height:24px}.mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list-item__graphic{margin-left:32px;margin-right:0}.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:32px;width:24px;height:24px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic{margin-left:32px;margin-right:0}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:40px;height:40px;border-radius:50%}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:40px;height:40px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list--image-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:56px;height:56px}.mdc-deprecated-list--image-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list--video-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:100px;height:56px}.mdc-deprecated-list--video-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list .mdc-deprecated-list-item__graphic{display:inline-flex}.mdc-deprecated-list-item__meta{margin-left:auto;margin-right:0}.mdc-deprecated-list-item__meta:not(.material-icons){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.mdc-deprecated-list-item[dir=rtl] .mdc-deprecated-list-item__meta,[dir=rtl] .mdc-deprecated-list-item .mdc-deprecated-list-item__meta{margin-left:0;margin-right:auto}.mdc-deprecated-list-item__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-deprecated-list-item__text[for]{pointer-events:none}.mdc-deprecated-list-item__primary-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-deprecated-list-item__primary-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-deprecated-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list--image-list .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list--video-list .mdc-deprecated-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__primary-text:before,.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__primary-text:before,.mdc-deprecated-list--image-list .mdc-deprecated-list-item__primary-text:before,.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__primary-text:before,.mdc-deprecated-list--video-list .mdc-deprecated-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__primary-text:after,.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__primary-text:after,.mdc-deprecated-list--image-list .mdc-deprecated-list-item__primary-text:after,.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__primary-text:after,.mdc-deprecated-list--video-list .mdc-deprecated-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-deprecated-list--dense .mdc-deprecated-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-deprecated-list--dense .mdc-deprecated-list-item__primary-text:before{display:inline-block;width:0;height:24px;content:"";vertical-align:0}.mdc-deprecated-list--dense .mdc-deprecated-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-deprecated-list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal}.mdc-deprecated-list-item__secondary-text:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-deprecated-list--dense .mdc-deprecated-list-item__secondary-text{font-size:inherit}.mdc-deprecated-list--dense .mdc-deprecated-list-item{height:40px}.mdc-deprecated-list--two-line .mdc-deprecated-list-item__text{align-self:flex-start}.mdc-deprecated-list--two-line .mdc-deprecated-list-item{height:64px}.mdc-deprecated-list--two-line.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--icon-list .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--image-list .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--video-list .mdc-deprecated-list-item{height:72px}.mdc-deprecated-list--two-line.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic{align-self:flex-start;margin-top:16px}.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--dense .mdc-deprecated-list-item{height:60px}.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:36px;height:36px}.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item{cursor:pointer}a.mdc-deprecated-list-item{color:inherit;text-decoration:none}.mdc-deprecated-list-divider{height:0;margin:0;border:none;border-bottom:1px solid;border-bottom-color:rgba(0,0,0,.12)}.mdc-deprecated-list-divider--padded{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list-divider--padded[dir=rtl],[dir=rtl] .mdc-deprecated-list-divider--padded{margin-left:0;margin-right:16px}.mdc-deprecated-list-divider--inset{margin-left:72px;margin-right:0;width:calc(100% - 72px)}.mdc-deprecated-list-divider--inset[dir=rtl],[dir=rtl] .mdc-deprecated-list-divider--inset{margin-left:0;margin-right:72px}.mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded{margin-left:72px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded[dir=rtl],[dir=rtl] .mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded{margin-left:0;margin-right:72px}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:16px}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:16px}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading{margin-left:72px;margin-right:0;width:calc(100% - 72px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:72px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:72px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:72px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading{margin-left:72px;margin-right:0;width:calc(100% - 72px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:72px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:72px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:72px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading{margin-left:72px;margin-right:0;width:calc(100% - 72px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:72px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:72px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:72px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading{margin-left:88px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:88px}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:88px;margin-right:0;width:calc(100% - 104px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:88px}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading{margin-left:116px;margin-right:0;width:calc(100% - 116px)}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:116px}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:116px;margin-right:0;width:calc(100% - 132px)}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:116px}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:0;width:100%}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:0}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:0}.mdc-deprecated-list-group .mdc-deprecated-list{padding:0}.mdc-deprecated-list-group__subheader{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);margin:.75rem 16px}.mdc-list-item__primary-text{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.mdc-list-item__secondary-text{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.mdc-list-item__overline-text{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38))}.mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-list-item--with-trailing-icon .mdc-list-item__end{background-color:transparent;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.mdc-list-item__end{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38))}.mdc-list-item--disabled .mdc-list-item__content,.mdc-list-item--disabled .mdc-list-item__end,.mdc-list-item--disabled .mdc-list-item__start{opacity:.38}.mdc-list-item--disabled.mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-list-item--disabled.mdc-list-item--with-trailing-icon .mdc-list-item__end,.mdc-list-item--disabled.mdc-list-item--with-trailing-meta .mdc-list-item__end,.mdc-list-item--disabled .mdc-list-item__overline-text,.mdc-list-item--disabled .mdc-list-item__primary-text,.mdc-list-item--disabled .mdc-list-item__secondary-text{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-list-item--activated.mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-list-item--activated .mdc-list-item__primary-text,.mdc-list-item--selected.mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-list-item--selected .mdc-list-item__primary-text{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-deprecated-list-group__subheader{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-list-divider:after{content:"";display:block;border-bottom:1px solid #fff}}.mdc-list{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);line-height:1.5rem;margin:0;padding:8px 0;list-style-type:none}.mdc-list:focus{outline:none}.mdc-list-item{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;padding:0;align-items:stretch;cursor:pointer}.mdc-list-item:focus{outline:none}.mdc-list-item.mdc-list-item--with-one-line{height:48px}.mdc-list-item.mdc-list-item--with-two-lines{height:64px}.mdc-list-item.mdc-list-item--with-three-lines{height:88px}.mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__start{align-self:center;margin-top:0}.mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__start,.mdc-list-item.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:16px}.mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__end,.mdc-list-item.mdc-list-item--with-two-lines .mdc-list-item__end{align-self:center;margin-top:0}.mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__end{align-self:flex-start;margin-top:16px}.mdc-list-item.mdc-list-item--disabled,.mdc-list-item.mdc-list-item--non-interactive{cursor:auto}.mdc-list-item.mdc-ripple-upgraded--background-focused:before,.mdc-list-item:not(.mdc-list-item--selected):focus:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-list-item.mdc-list-item--selected:before{border:3px double transparent;border-radius:inherit}.mdc-list-item.mdc-list-item--selected:before,.mdc-list-item.mdc-list-item--selected:focus:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;content:"";pointer-events:none}.mdc-list-item.mdc-list-item--selected:focus:before{border:3px solid transparent;border-radius:inherit}a.mdc-list-item{color:inherit;text-decoration:none}.mdc-list-item__start{fill:currentColor}.mdc-list-item__end,.mdc-list-item__start{flex-shrink:0;pointer-events:none}.mdc-list-item__content{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;align-self:center;flex:1;pointer-events:none}.mdc-list-item--with-three-lines .mdc-list-item__content,.mdc-list-item--with-two-lines .mdc-list-item__content{align-self:stretch}.mdc-list-item__content[for]{pointer-events:none}.mdc-list-item__primary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-list-item--with-three-lines .mdc-list-item__primary-text,.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-three-lines .mdc-list-item__primary-text:before,.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-three-lines .mdc-list-item__primary-text:after,.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal}.mdc-list-item__secondary-text:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list-item--with-three-lines .mdc-list-item__secondary-text{white-space:normal;line-height:20px}.mdc-list-item--with-overline .mdc-list-item__secondary-text{white-space:nowrap;line-height:auto}.mdc-list-item__overline-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-overline-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-overline-font-size,.75rem);line-height:2rem;line-height:var(--mdc-typography-overline-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-overline-font-weight,500);letter-spacing:.1666666667em;letter-spacing:var(--mdc-typography-overline-letter-spacing,.1666666667em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-overline-text-decoration,none);text-decoration:var(--mdc-typography-overline-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-overline-text-transform,uppercase);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:24px;content:"";vertical-align:0}.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-three-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-three-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-three-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-avatar.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-avatar.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-avatar .mdc-list-item__start,.mdc-list-item--with-leading-avatar .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin-left:16px;margin-right:16px}.mdc-list-item--with-leading-avatar .mdc-list-item__start{width:40px;height:40px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-avatar .mdc-list-item__start{border-radius:50%}.mdc-list-item--with-leading-icon .mdc-list-item__start{width:24px;height:24px}.mdc-list-item--with-leading-icon.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-icon.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-icon.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-icon .mdc-list-item__start{margin-left:16px;margin-right:32px}.mdc-list-item--with-leading-icon .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-icon .mdc-list-item__start{margin-left:32px;margin-right:16px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-thumbnail.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-thumbnail.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-thumbnail.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-thumbnail .mdc-list-item__start,.mdc-list-item--with-leading-thumbnail .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-thumbnail .mdc-list-item__start{margin-left:16px;margin-right:16px}.mdc-list-item--with-leading-thumbnail .mdc-list-item__start{width:40px;height:40px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-image.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-image.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-image.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-image .mdc-list-item__start,.mdc-list-item--with-leading-image .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-image .mdc-list-item__start{margin-left:16px;margin-right:16px}.mdc-list-item--with-leading-image .mdc-list-item__start{width:56px;height:56px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-image.mdc-list-item--with-one-line,.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:8px}.mdc-list-item--with-leading-video.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-video.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-video.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-video .mdc-list-item__start{margin-left:0;margin-right:16px}.mdc-list-item--with-leading-video .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-video .mdc-list-item__start{margin-left:16px;margin-right:0}.mdc-list-item--with-leading-video .mdc-list-item__start{width:100px;height:56px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-video.mdc-list-item--with-one-line,.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-checkbox.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-checkbox.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-checkbox.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-checkbox .mdc-list-item__start{margin-left:8px;margin-right:24px}.mdc-list-item--with-leading-checkbox .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-checkbox .mdc-list-item__start{margin-left:24px;margin-right:8px}.mdc-list-item--with-leading-checkbox .mdc-list-item__start{width:40px;height:40px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:8px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-radio.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-radio.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-radio.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-radio .mdc-list-item__start{margin-left:8px;margin-right:24px}.mdc-list-item--with-leading-radio .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-radio .mdc-list-item__start{margin-left:24px;margin-right:8px}.mdc-list-item--with-leading-radio .mdc-list-item__start{width:40px;height:40px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:8px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-radio.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-switch.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-switch.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-switch.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-switch .mdc-list-item__start,.mdc-list-item--with-leading-switch .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-switch .mdc-list-item__start{margin-left:16px;margin-right:16px}.mdc-list-item--with-leading-switch .mdc-list-item__start{width:36px;height:20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:16px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-switch.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-trailing-icon.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-icon.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-icon.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-icon .mdc-list-item__end,.mdc-list-item--with-trailing-icon .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-icon .mdc-list-item__end{margin-left:16px;margin-right:16px}.mdc-list-item--with-trailing-icon .mdc-list-item__end{width:24px;height:24px}.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end,.mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end{align-self:flex-start}.mdc-list-item--with-trailing-meta.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-meta.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-meta.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-meta .mdc-list-item__end{margin-left:28px;margin-right:16px}.mdc-list-item--with-trailing-meta .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-meta .mdc-list-item__end{margin-left:16px;margin-right:28px}.mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-trailing-meta .mdc-list-item__end{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.mdc-list-item--with-trailing-checkbox.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-checkbox.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-checkbox.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-checkbox .mdc-list-item__end{margin-left:24px;margin-right:8px}.mdc-list-item--with-trailing-checkbox .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-checkbox .mdc-list-item__end{margin-left:8px;margin-right:24px}.mdc-list-item--with-trailing-checkbox .mdc-list-item__end{width:40px;height:40px}.mdc-list-item--with-trailing-checkbox.mdc-list-item--with-three-lines .mdc-list-item__end{align-self:flex-start;margin-top:8px}.mdc-list-item--with-trailing-radio.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-radio.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-radio.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-radio .mdc-list-item__end{margin-left:24px;margin-right:8px}.mdc-list-item--with-trailing-radio .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-radio .mdc-list-item__end{margin-left:8px;margin-right:24px}.mdc-list-item--with-trailing-radio .mdc-list-item__end{width:40px;height:40px}.mdc-list-item--with-trailing-radio.mdc-list-item--with-three-lines .mdc-list-item__end{align-self:flex-start;margin-top:8px}.mdc-list-item--with-trailing-switch.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-switch.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-switch.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-switch .mdc-list-item__end,.mdc-list-item--with-trailing-switch .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-switch .mdc-list-item__end{margin-left:16px;margin-right:16px}.mdc-list-item--with-trailing-switch .mdc-list-item__end{width:36px;height:20px}.mdc-list-item--with-trailing-switch.mdc-list-item--with-three-lines .mdc-list-item__end{align-self:flex-start;margin-top:16px}.mdc-list-item--with-overline.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-overline.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list-item--with-overline.mdc-list-item--with-three-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-overline.mdc-list-item--with-three-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list-item,.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item{padding-left:16px;padding-right:16px}.mdc-list-group .mdc-deprecated-list{padding:0}.mdc-list-group__subheader{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);margin:.75rem 16px}.mdc-list-divider{background-color:rgba(0,0,0,.12);height:1px;padding:0;background-clip:content-box}.mdc-list-divider--with-leading-avatar.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-icon.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-image.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-radio.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-switch.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-text.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-leading-inset,.mdc-list-divider.mdc-list-divider--with-leading-inset{padding-left:16px;padding-right:auto}.mdc-list-divider--with-leading-avatar.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-avatar.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-icon.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-icon.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-image.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-image.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-radio.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-radio.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-switch.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-switch.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-text.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-text.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-trailing-inset,.mdc-list-divider.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-avatar.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-icon.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-image.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-radio.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-switch.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-text.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider.mdc-list-divider--with-leading-inset{padding-left:auto;padding-right:16px}.mdc-list-divider--with-leading-avatar.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-icon.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-image.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-radio.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-switch.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-text.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider.mdc-list-divider--with-trailing-inset[dir=rtl],[dir=rtl] .mdc-list-divider--with-leading-avatar.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-icon.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-image.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-radio.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-switch.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-text.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider.mdc-list-divider--with-trailing-inset{padding-left:16px;padding-right:auto}.mdc-list-divider--with-leading-video.mdc-list-divider--with-leading-inset{padding-left:0;padding-right:auto}.mdc-list-divider--with-leading-video.mdc-list-divider--with-leading-inset[dir=rtl],[dir=rtl] .mdc-list-divider--with-leading-video.mdc-list-divider--with-leading-inset{padding-left:auto;padding-right:0}.mdc-list-divider[dir=rtl],[dir=rtl] .mdc-list-divider{padding:0}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--unbounded .mdc-deprecated-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--unbounded .mdc-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--foreground-activation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--foreground-deactivation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:hover .mdc-deprecated-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:hover .mdc-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-deprecated-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-deprecated-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:hover .mdc-deprecated-list-item__ripple:before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity,.16)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:hover .mdc-list-item__ripple:before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity,.16)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:hover .mdc-deprecated-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple:after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-list-item__ripple:before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:hover .mdc-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-deprecated-list-item--disabled{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--unbounded .mdc-deprecated-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--unbounded .mdc-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--foreground-activation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--foreground-deactivation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:before,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,.mdc-deprecated-list-item--disabled:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before,.mdc-deprecated-list-item--disabled:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}:not(.mdc-list-item--disabled).mdc-list-item{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded--unbounded .mdc-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded--foreground-activation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded--foreground-deactivation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item:hover .mdc-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}:not(.mdc-list-item--disabled).mdc-list-item:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-list-item--disabled).mdc-list-item:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}:not(.mdc-list-item--disabled).mdc-list-item--activated .mdc-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity,.12)}:not(.mdc-list-item--disabled).mdc-list-item--activated .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item--activated .mdc-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-list-item--disabled).mdc-list-item--activated.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item--activated:hover .mdc-list-item__ripple:before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity,.16)}:not(.mdc-list-item--disabled).mdc-list-item--activated.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item--activated:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}:not(.mdc-list-item--disabled).mdc-list-item--activated:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-list-item--disabled).mdc-list-item--activated:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}:not(.mdc-list-item--disabled).mdc-list-item--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}:not(.mdc-list-item--disabled).mdc-list-item--selected .mdc-list-item__ripple:before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}:not(.mdc-list-item--disabled).mdc-list-item--selected .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item--selected .mdc-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-list-item--disabled).mdc-list-item--selected.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item--selected:hover .mdc-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}:not(.mdc-list-item--disabled).mdc-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}:not(.mdc-list-item--disabled).mdc-list-item--selected:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-list-item--disabled).mdc-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}:not(.mdc-list-item--disabled).mdc-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.2)}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-list-item--disabled{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-list-item--disabled .mdc-list-item__ripple:after,.mdc-list-item--disabled .mdc-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-list-item--disabled .mdc-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-list-item--disabled .mdc-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-list-item--disabled.mdc-ripple-upgraded--unbounded .mdc-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-list-item--disabled.mdc-ripple-upgraded--foreground-activation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-list-item--disabled.mdc-ripple-upgraded--foreground-deactivation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-list-item--disabled .mdc-list-item__ripple:after,.mdc-list-item--disabled .mdc-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-list-item--disabled .mdc-list-item__ripple:after,.mdc-list-item--disabled .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-list-item--disabled.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,.mdc-list-item--disabled:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-list-item--disabled .mdc-list-item__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-menu{min-width:112px;min-width:var(--mdc-menu-min-width,112px)}.mdc-menu .mdc-deprecated-list-item__graphic,.mdc-menu .mdc-deprecated-list-item__meta{color:rgba(0,0,0,.87)}.mdc-menu .mdc-deprecated-list{color:rgba(0,0,0,.87);position:relative}.mdc-menu .mdc-deprecated-list .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-menu .mdc-deprecated-list-divider{margin:8px 0}.mdc-menu .mdc-deprecated-list-item{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mdc-menu .mdc-deprecated-list-item--disabled{cursor:auto}.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic,.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__text{pointer-events:none}.mdc-menu__selection-group{padding:0;fill:currentColor}.mdc-menu__selection-group .mdc-deprecated-list-item{padding-left:56px;padding-right:16px}.mdc-menu__selection-group .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-menu__selection-group .mdc-deprecated-list-item{padding-left:16px;padding-right:56px}.mdc-menu__selection-group .mdc-menu__selection-group-icon{left:16px;right:auto;display:none;position:absolute;top:50%;transform:translateY(-50%)}.mdc-menu__selection-group .mdc-menu__selection-group-icon[dir=rtl],[dir=rtl] .mdc-menu__selection-group .mdc-menu__selection-group-icon{left:auto;right:16px}.mdc-menu-item--selected .mdc-menu__selection-group-icon{display:inline}.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-width:var(--mdc-menu-max-width,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:var(--mdc-menu-max-height,calc(100vh - 32px));margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform,opacity;z-index:8;transition:opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1),height .25s cubic-bezier(0,0,.2,1);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(.8);opacity:0}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity 75ms linear}.mdc-menu-surface[dir=rtl],[dir=rtl] .mdc-menu-surface{transform-origin-left:top right;transform-origin-right:top left}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}.mdc-menu-surface--fullwidth{width:100%}.mdc-radio{padding:10px}.mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:rgba(0,0,0,.54)}.mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:#018786;border-color:var(--mdc-theme-secondary,#018786)}.mdc-radio .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:rgba(0,0,0,.38)}.mdc-radio .mdc-radio__background:before{background-color:#018786;background-color:var(--mdc-theme-secondary,#018786);top:-10px;left:-10px;width:40px;height:40px}.mdc-radio .mdc-radio__native-control{top:0;right:0;left:0;width:40px;height:40px}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-radio .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:GrayText}}.mdc-radio{flex:0 0 auto;box-sizing:content-box;cursor:pointer;will-change:opacity,transform,border-color,color}.mdc-radio,.mdc-radio__background{display:inline-block;position:relative;width:20px;height:20px}.mdc-radio__background{box-sizing:border-box}.mdc-radio__background:before{position:absolute;transform:scale(0);border-radius:50%;opacity:0;pointer-events:none;content:"";transition:opacity .12s cubic-bezier(.4,0,.6,1) 0ms,transform .12s cubic-bezier(.4,0,.6,1) 0ms}.mdc-radio__outer-circle{border-width:2px;transition:border-color .12s cubic-bezier(.4,0,.6,1) 0ms}.mdc-radio__inner-circle,.mdc-radio__outer-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border-style:solid;border-radius:50%}.mdc-radio__inner-circle{transform:scale(0);border-width:10px;transition:transform .12s cubic-bezier(.4,0,.6,1) 0ms,border-color .12s cubic-bezier(.4,0,.6,1) 0ms}.mdc-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}.mdc-radio--touch{margin:4px}.mdc-radio--touch .mdc-radio__native-control{top:-4px;right:-4px;left:-4px;width:48px;height:48px}.mdc-radio__native-control:checked+.mdc-radio__background,.mdc-radio__native-control:disabled+.mdc-radio__background{transition:opacity .12s cubic-bezier(0,0,.2,1) 0ms,transform .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{transition:border-color .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle{transition:transform .12s cubic-bezier(0,0,.2,1) 0ms,border-color .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio--disabled{cursor:default;pointer-events:none}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.5);transition:transform .12s cubic-bezier(0,0,.2,1) 0ms,border-color .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio__native-control:disabled+.mdc-radio__background,[aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background{cursor:default}.mdc-radio__native-control:focus+.mdc-radio__background:before{transform:scale(1);opacity:.12;transition:opacity .12s cubic-bezier(0,0,.2,1) 0ms,transform .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-radio .mdc-radio__ripple:after,.mdc-radio .mdc-radio__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-radio .mdc-radio__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-radio .mdc-radio__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-radio.mdc-ripple-upgraded--unbounded .mdc-radio__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-radio.mdc-ripple-upgraded--foreground-activation .mdc-radio__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-radio.mdc-ripple-upgraded--foreground-deactivation .mdc-radio__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-radio .mdc-radio__ripple:after,.mdc-radio .mdc-radio__ripple:before{top:0;left:0;width:100%;height:100%}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:after,.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-radio .mdc-radio__ripple:after,.mdc-radio .mdc-radio__ripple:before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-radio.mdc-ripple-surface--hover .mdc-radio__ripple:before,.mdc-radio:hover .mdc-radio__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__ripple:before,.mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-radio:not(.mdc-ripple-upgraded) .mdc-radio__ripple:after{transition:opacity .15s linear}.mdc-radio:not(.mdc-ripple-upgraded):active .mdc-radio__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-radio.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__background:before,.mdc-radio.mdc-ripple-upgraded .mdc-radio__background:before{content:none}.mdc-radio__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface:after,.mdc-ripple-surface:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-ripple-surface:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface:after,.mdc-ripple-surface:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]:after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]:before,.mdc-ripple-upgraded--unbounded:after,.mdc-ripple-upgraded--unbounded:before{top:0;left:0;width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded:after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded:before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded:after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded:after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface:after,.mdc-ripple-surface:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover:before,.mdc-ripple-surface:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused:before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-segmented-button{display:inline-block;font-size:0}.mdc-segmented-button__segment{border-color:rgba(0,0,0,.12);border-color:var(--mdc-segmented-button-outline-color,rgba(0,0,0,.12));color:rgba(0,0,0,.6);color:var(--mdc-segmented-button-unselected-ink-color,rgba(0,0,0,.6));background-color:#fff;background-color:var(--mdc-segmented-button-unselected-container-fill-color,#fff)}.mdc-segmented-button__segment--selected{color:#6200ee;color:var(--mdc-segmented-button-selected-ink-color,#6200ee);background-color:rgba(98,0,238,.08);background-color:var(--mdc-segmented-button-selected-container-fill-color,rgba(98,0,238,.08))}.mdc-segmented-button__segment{position:relative;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height,2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);display:inline-flex;vertical-align:top;align-items:center;height:36px;min-width:48px;padding:0 12px;border-width:1px 0 1px 1px}.mdc-segmented-button__segment .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-segmented-button__segment:hover{cursor:pointer}.mdc-segmented-button__segment:focus{outline-width:0}.mdc-segmented-button__segment:first-child{border-radius:4px 0 0 4px}.mdc-segmented-button__segment:last-child{border-right-width:1px;border-radius:0 4px 4px 0}.mdc-segmented-button__segment .mdc-segmented-button__segment__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-segmented-button__segment .mdc-segmented-button__segment--touch{margin-top:0;margin-bottom:0}.mdc-touch-target-wrapper .mdc-segmented-button__segment{border-radius:0;border-right-width:0}.mdc-touch-target-wrapper:first-child .mdc-segmented-button__segment{border-radius:4px 0 0 4px}.mdc-touch-target-wrapper:last-child .mdc-segmented-button__segment{border-right-width:1px;border-radius:0 4px 4px 0}.mdc-segmented-button__icon{width:24px;font-size:18px}.mdc-segmented-button__icon+.mdc-segmented-button__label{padding-left:6px}.mdc-segmented-button__segment{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity;overflow:hidden}.mdc-segmented-button__segment .mdc-segmented-button__ripple:after,.mdc-segmented-button__segment .mdc-segmented-button__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-segmented-button__segment .mdc-segmented-button__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-segmented-button__segment .mdc-segmented-button__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-segmented-button__segment.mdc-ripple-upgraded .mdc-segmented-button__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-segmented-button__segment.mdc-ripple-upgraded .mdc-segmented-button__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-segmented-button__segment.mdc-ripple-upgraded--unbounded .mdc-segmented-button__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-segmented-button__segment.mdc-ripple-upgraded--foreground-activation .mdc-segmented-button__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-segmented-button__segment.mdc-ripple-upgraded--foreground-deactivation .mdc-segmented-button__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-segmented-button__segment .mdc-segmented-button__ripple:after,.mdc-segmented-button__segment .mdc-segmented-button__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-segmented-button__segment.mdc-ripple-upgraded .mdc-segmented-button__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-segmented-button__segment .mdc-segmented-button__ripple:after,.mdc-segmented-button__segment .mdc-segmented-button__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,#6200ee)}.mdc-segmented-button__segment.mdc-ripple-surface--hover .mdc-segmented-button__ripple:before,.mdc-segmented-button__segment:hover .mdc-segmented-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-segmented-button__segment.mdc-ripple-upgraded--background-focused .mdc-segmented-button__ripple:before,.mdc-segmented-button__segment.mdc-ripple-upgraded:focus-within .mdc-segmented-button__ripple:before,.mdc-segmented-button__segment:not(.mdc-ripple-upgraded):focus-within .mdc-segmented-button__ripple:before,.mdc-segmented-button__segment:not(.mdc-ripple-upgraded):focus .mdc-segmented-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-segmented-button__segment:not(.mdc-ripple-upgraded) .mdc-segmented-button__ripple:after{transition:opacity .15s linear}.mdc-segmented-button__segment:not(.mdc-ripple-upgraded):active .mdc-segmented-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-segmented-button__segment.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-segmented-button__segment .mdc-segmented-button__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-slider__thumb{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-slider__thumb:after,.mdc-slider__thumb:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-slider__thumb:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-slider__thumb:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-slider__thumb.mdc-ripple-upgraded:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb.mdc-ripple-upgraded:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-slider__thumb.mdc-ripple-upgraded--unbounded:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-deactivation:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb:after,.mdc-slider__thumb:before{top:0;left:0;width:100%;height:100%}.mdc-slider__thumb.mdc-ripple-upgraded:after,.mdc-slider__thumb.mdc-ripple-upgraded:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb:after,.mdc-slider__thumb:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider__thumb.mdc-ripple-surface--hover:before,.mdc-slider__thumb:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-slider__thumb.mdc-ripple-upgraded--background-focused:before,.mdc-slider__thumb:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-slider__thumb:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-slider__thumb:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{height:4px;position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{border-radius:3px;height:6px;overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;transform-origin:left}.mdc-slider .mdc-slider__track--active_fill[dir=rtl],[dir=rtl] .mdc-slider .mdc-slider__track--active_fill{transform-origin:right}.mdc-slider .mdc-slider__track--inactive{border-radius:2px;height:4px;left:0;top:0}.mdc-slider .mdc-slider__track--inactive:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-slider .mdc-slider__track--active_fill{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider .mdc-slider__track--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.24}.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.24}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;pointer-events:none;position:absolute;transform:translateX(-50%)}.mdc-slider .mdc-slider__value-indicator{transition:transform .1s cubic-bezier(.4,0,1,1) 0ms;align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator:before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid;bottom:-5px;content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.mdc-slider .mdc-slider__value-indicator:after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform .1s cubic-bezier(0,0,.2,1) 0ms;transform:scale(1)}@media (prefers-reduced-motion){.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator,.mdc-slider .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__value-indicator-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-slider .mdc-slider__value-indicator{background-color:#000;opacity:.6}.mdc-slider .mdc-slider__value-indicator:before{border-top-color:#000}.mdc-slider .mdc-slider__value-indicator{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-slider .mdc-slider__thumb{display:flex;height:48px;left:-24px;outline:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);border:10px solid;border-radius:50%;box-sizing:border-box;height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider .mdc-slider__thumb:after,.mdc-slider .mdc-slider__thumb:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover:before,.mdc-slider .mdc-slider__thumb:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused:before,.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--inactive{border-radius:50%;height:2px;width:2px}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary,#fff);opacity:.6}.mdc-slider .mdc-slider__tick-mark--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.6}.mdc-slider.mdc-slider--disabled{opacity:.38;cursor:auto}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media (prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mdc-snackbar{z-index:8;margin:8px;display:none;position:fixed;right:0;bottom:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-snackbar__surface{background-color:#333}.mdc-snackbar__label{color:hsla(0,0%,100%,.87)}.mdc-snackbar__surface{min-width:344px}@media (max-width:344px),(max-width:480px){.mdc-snackbar__surface{min-width:100%}}.mdc-snackbar__surface{max-width:672px;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-snackbar--closing,.mdc-snackbar--open,.mdc-snackbar--opening{display:flex}.mdc-snackbar--open .mdc-snackbar__actions,.mdc-snackbar--open .mdc-snackbar__label{visibility:visible}.mdc-snackbar--leading{justify-content:flex-start}.mdc-snackbar--stacked .mdc-snackbar__label{padding-left:16px;padding-right:8px;padding-bottom:12px}.mdc-snackbar--stacked .mdc-snackbar__label[dir=rtl],[dir=rtl] .mdc-snackbar--stacked .mdc-snackbar__label{padding-left:8px;padding-right:16px}.mdc-snackbar--stacked .mdc-snackbar__surface{flex-direction:column;align-items:flex-start}.mdc-snackbar--stacked .mdc-snackbar__actions{align-self:flex-end;margin-bottom:8px}.mdc-snackbar__surface{padding-left:0;padding-right:8px;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;transform:scale(.8);opacity:0}.mdc-snackbar__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-snackbar__surface[dir=rtl],[dir=rtl] .mdc-snackbar__surface{padding-left:8px;padding-right:0}.mdc-snackbar--open .mdc-snackbar__surface{transform:scale(1);opacity:1;pointer-events:auto;transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.mdc-snackbar--closing .mdc-snackbar__surface{transform:scale(1);transition:opacity 75ms cubic-bezier(.4,0,1,1) 0ms}.mdc-snackbar__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);width:100%;flex-grow:1;box-sizing:border-box;margin:0;visibility:hidden;padding:14px 8px 14px 16px}.mdc-snackbar__label[dir=rtl],[dir=rtl] .mdc-snackbar__label{padding-left:8px;padding-right:16px}.mdc-snackbar__label:before{display:inline;content:attr(data-mdc-snackbar-label-text)}.mdc-snackbar__actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;visibility:hidden}.mdc-snackbar__action:not(:disabled){color:#bb86fc}.mdc-snackbar__action:after,.mdc-snackbar__action:before{background-color:#bb86fc;background-color:var(--mdc-ripple-color,#bb86fc)}.mdc-snackbar__action.mdc-ripple-surface--hover:before,.mdc-snackbar__action:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-snackbar__action.mdc-ripple-upgraded--background-focused:before,.mdc-snackbar__action:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-snackbar__action:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-snackbar__action:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-snackbar__action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-snackbar__dismiss{color:hsla(0,0%,100%,.87)}.mdc-snackbar__dismiss .mdc-icon-button__ripple:after,.mdc-snackbar__dismiss .mdc-icon-button__ripple:before{background-color:hsla(0,0%,100%,.87);background-color:var(--mdc-ripple-color,hsla(0,0%,100%,.87))}.mdc-snackbar__dismiss.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-snackbar__dismiss:hover .mdc-icon-button__ripple:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-snackbar__dismiss.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-snackbar__dismiss.mdc-snackbar__dismiss{width:36px;height:36px;padding:6px;font-size:18px}.mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:8px;margin-right:0}.mdc-snackbar__action+.mdc-snackbar__dismiss[dir=rtl],[dir=rtl] .mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:0;margin-right:8px}.mdc-switch__thumb-underlay{left:-14px;right:auto;top:-17px;width:48px;height:48px}.mdc-switch__thumb-underlay[dir=rtl],[dir=rtl] .mdc-switch__thumb-underlay{left:auto;right:-14px}.mdc-switch__native-control{width:64px;height:48px}.mdc-switch{display:inline-block;position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mdc-switch.mdc-switch--checked .mdc-switch__thumb,.mdc-switch.mdc-switch--checked .mdc-switch__track{background-color:#018786;background-color:var(--mdc-theme-secondary,#018786)}.mdc-switch.mdc-switch--checked .mdc-switch__thumb{border-color:#018786;border-color:var(--mdc-theme-secondary,#018786)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track{background-color:#000;background-color:var(--mdc-theme-on-surface,#000)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-color:#fff;border-color:var(--mdc-theme-surface,#fff)}.mdc-switch__native-control{left:0;right:auto;position:absolute;top:0;margin:0;opacity:0;cursor:pointer;pointer-events:auto;transition:transform 90ms cubic-bezier(.4,0,.2,1)}.mdc-switch__native-control[dir=rtl],[dir=rtl] .mdc-switch__native-control{left:auto;right:0}.mdc-switch__track{box-sizing:border-box;width:36px;height:14px;border:1px solid transparent;border-radius:7px;opacity:.38;transition:opacity 90ms cubic-bezier(.4,0,.2,1),background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1)}.mdc-switch__thumb-underlay{display:flex;position:absolute;align-items:center;justify-content:center;transform:translateX(0);transition:transform 90ms cubic-bezier(.4,0,.2,1),background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1)}.mdc-switch__thumb{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-sizing:border-box;width:20px;height:20px;border:10px solid;border-radius:50%;pointer-events:none;z-index:1}.mdc-switch--checked .mdc-switch__track{opacity:.54}.mdc-switch--checked .mdc-switch__thumb-underlay{transform:translateX(16px)}.mdc-switch--checked .mdc-switch__native-control,.mdc-switch--checked .mdc-switch__thumb-underlay[dir=rtl],[dir=rtl] .mdc-switch--checked .mdc-switch__thumb-underlay{transform:translateX(-16px)}.mdc-switch--checked .mdc-switch__native-control[dir=rtl],[dir=rtl] .mdc-switch--checked .mdc-switch__native-control{transform:translateX(16px)}.mdc-switch--disabled{opacity:.38;pointer-events:none}.mdc-switch--disabled .mdc-switch__thumb{border-width:1px}.mdc-switch--disabled .mdc-switch__native-control{cursor:default;pointer-events:none}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:after,.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:before{background-color:#9e9e9e;background-color:var(--mdc-ripple-color,#9e9e9e)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-surface--hover:before,.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused:before,.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-switch__thumb-underlay{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-switch__thumb-underlay:after,.mdc-switch__thumb-underlay:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-switch__thumb-underlay:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-switch__thumb-underlay:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-switch__thumb-underlay.mdc-ripple-upgraded:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--unbounded:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-activation:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-deactivation:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-switch__thumb-underlay:after,.mdc-switch__thumb-underlay:before{top:0;left:0;width:100%;height:100%}.mdc-switch__thumb-underlay.mdc-ripple-upgraded:after,.mdc-switch__thumb-underlay.mdc-ripple-upgraded:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-switch__thumb-underlay:after,.mdc-switch__thumb-underlay:before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-switch__thumb-underlay.mdc-ripple-surface--hover:before,.mdc-switch__thumb-underlay:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused:before,.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height,2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative}.mdc-tab .mdc-tab__text-label{color:rgba(0,0,0,.6)}.mdc-tab .mdc-tab__icon{color:rgba(0,0,0,.54);fill:currentColor}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__icon,.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-tab--active .mdc-tab__icon{fill:currentColor}.mdc-tab{background:none;min-width:90px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding:0 24px;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{display:inline-block;line-height:1}.mdc-tab__icon,.mdc-tab__text-label{transition:color .15s linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__icon,.mdc-tab--active .mdc-tab__text-label{transition-delay:.1s}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl],[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:0;padding-right:8px}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-tab .mdc-tab__ripple:after,.mdc-tab .mdc-tab__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-tab .mdc-tab__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-tab .mdc-tab__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-tab .mdc-tab__ripple:after,.mdc-tab .mdc-tab__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-tab .mdc-tab__ripple:after,.mdc-tab .mdc-tab__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple:before,.mdc-tab:hover .mdc-tab__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple:before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple:after{transition:opacity .15s linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform,opacity}.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary,#018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:opacity .15s linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:.1s}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.mdc-text-field--filled{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-text-field--filled .mdc-text-field__ripple:after,.mdc-text-field--filled .mdc-text-field__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-text-field--filled .mdc-text-field__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-text-field--filled .mdc-text-field__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-text-field--filled .mdc-text-field__ripple:after,.mdc-text-field--filled .mdc-text-field__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-text-field__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-text-field{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:0;border-bottom-left-radius:0;display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity,transform,color}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,0,.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:rgba(0,0,0,.87)}@media{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::-moz-placeholder{color:rgba(0,0,0,.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:rgba(0,0,0,.54)}}@media{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:rgba(0,0,0,.54)}}.mdc-text-field .mdc-text-field__input{caret-color:#6200ee;caret-color:var(--mdc-theme-primary,#6200ee)}.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-character-counter,.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter{color:rgba(0,0,0,.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:rgba(0,0,0,.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix{color:rgba(0,0,0,.6)}.mdc-text-field .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-text-field__input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);height:28px;transition:opacity .15s cubic-bezier(.4,0,.2,1) 0ms;width:100%;min-width:0;border:none;border-radius:0;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0}.mdc-text-field__input::-ms-clear{display:none}.mdc-text-field__input::-webkit-calendar-picker-indicator{display:none}.mdc-text-field__input:focus{outline:none}.mdc-text-field__input:invalid{box-shadow:none}@media{.mdc-text-field__input::-moz-placeholder{-moz-transition:opacity 67ms 0ms cubic-bezier(.4,0,.2,1);transition:opacity 67ms cubic-bezier(.4,0,.2,1) 0ms;opacity:0}.mdc-text-field__input::placeholder{transition:opacity 67ms cubic-bezier(.4,0,.2,1) 0ms;opacity:0}}@media{.mdc-text-field__input:-ms-input-placeholder{-ms-transition:opacity 67ms 0ms cubic-bezier(.4,0,.2,1);transition:opacity 67ms cubic-bezier(.4,0,.2,1) 0ms;opacity:0}}@media{.mdc-text-field--focused .mdc-text-field__input::-moz-placeholder,.mdc-text-field--no-label .mdc-text-field__input::-moz-placeholder{transition-delay:40ms;transition-duration:.11s;opacity:1}.mdc-text-field--focused .mdc-text-field__input::placeholder,.mdc-text-field--no-label .mdc-text-field__input::placeholder{transition-delay:40ms;transition-duration:.11s;opacity:1}}@media{.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder,.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder{transition-delay:40ms;transition-duration:.11s;opacity:1}}.mdc-text-field__affix{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);height:28px;transition:opacity .15s cubic-bezier(.4,0,.2,1) 0ms;opacity:0;white-space:nowrap}.mdc-text-field--label-floating .mdc-text-field__affix,.mdc-text-field--no-label .mdc-text-field__affix{opacity:1}@supports (-webkit-hyphens:none){.mdc-text-field--outlined .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}.mdc-text-field__affix--prefix[dir=rtl],[dir=rtl] .mdc-text-field__affix--prefix{padding-left:2px;padding-right:0}.mdc-text-field--end-aligned .mdc-text-field__affix--prefix{padding-left:0;padding-right:12px}.mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl],.mdc-text-field__affix--suffix,[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix{padding-left:12px;padding-right:0}.mdc-text-field__affix--suffix[dir=rtl],[dir=rtl] .mdc-text-field__affix--suffix{padding-left:0;padding-right:12px}.mdc-text-field--end-aligned .mdc-text-field__affix--suffix{padding-left:2px;padding-right:0}.mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl],[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix{padding-left:0;padding-right:2px}.mdc-text-field--filled{height:56px}.mdc-text-field--filled .mdc-text-field__ripple:after,.mdc-text-field--filled .mdc-text-field__ripple:before{background-color:rgba(0,0,0,.87);background-color:var(--mdc-ripple-color,rgba(0,0,0,.87))}.mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple:before,.mdc-text-field--filled:hover .mdc-text-field__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple:before,.mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-text-field--filled:before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#f5f5f5}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.42)}.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.87)}.mdc-text-field--filled .mdc-line-ripple:after{border-bottom-color:#6200ee;border-bottom-color:var(--mdc-theme-primary,#6200ee)}.mdc-text-field--filled .mdc-floating-label{left:16px;right:auto}.mdc-text-field--filled .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-text-field--filled .mdc-floating-label{left:auto;right:16px}.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-106%) scale(.75)}.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{height:100%}.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label,.mdc-text-field--filled.mdc-text-field--no-label:before{display:none}@supports (-webkit-hyphens:none){.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field--outlined{height:56px;overflow:visible}.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1);font-size:.75rem}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(.75);font-size:1rem}.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined .25s 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined{0%{transform:translateX(0) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-34.75px) scale(.75)}to{transform:translateX(0) translateY(-34.75px) scale(.75)}}.mdc-text-field--outlined .mdc-text-field__input{height:100%}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.38)}.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.87)}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small,4px)}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small,4px);border-bottom-left-radius:0}@supports (top:max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px,var(--mdc-shape-small,4px))}}@supports (top:max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:calc(100% - max(12px, var(--mdc-shape-small, 4px))*2)}}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small,4px);border-bottom-left-radius:0}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small,4px)}@supports (top:max(0%)){.mdc-text-field--outlined{padding-right:max(16px,var(--mdc-shape-small,4px))}}@supports (top:max(0%)){.mdc-text-field--outlined,.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-left:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top:max(0%)){.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-right:max(16px,var(--mdc-shape-small,4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-left:0}@supports (top:max(0%)){.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-right:max(16px,var(--mdc-shape-small,4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl],[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-right:0}@supports (top:max(0%)){.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl],[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-left:max(16px,var(--mdc-shape-small,4px))}}.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-right:0}@supports (top:max(0%)){.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-left:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl],[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-left:0}@supports (top:max(0%)){.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl],[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-right:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-text-field--outlined .mdc-text-field__ripple:after,.mdc-text-field--outlined .mdc-text-field__ripple:before{content:none}.mdc-text-field--outlined .mdc-floating-label{left:4px;right:auto}.mdc-text-field--outlined .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-floating-label{left:auto;right:4px}.mdc-text-field--outlined .mdc-text-field__input{display:flex;border:none!important;background-color:transparent}.mdc-text-field--outlined .mdc-notched-outline{z-index:1}.mdc-text-field--textarea{flex-direction:column;align-items:center;width:auto;height:auto;padding:0;transition:none}.mdc-text-field--textarea .mdc-floating-label{top:19px}.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above){transform:none}.mdc-text-field--textarea .mdc-text-field__input{flex-grow:1;height:auto;min-height:1.5rem;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;resize:none;padding:0 16px;line-height:1.5rem}.mdc-text-field--textarea.mdc-text-field--filled:before{display:none}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-10.25px) scale(.75)}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-filled .25s 1}@keyframes mdc-floating-label-shake-float-above-textarea-filled{0%{transform:translateX(0) translateY(-10.25px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-10.25px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-10.25px) scale(.75)}to{transform:translateX(0) translateY(-10.25px) scale(.75)}}.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input{margin-top:23px;margin-bottom:9px}.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-27.25px) scale(1);font-size:.75rem}.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-24.75px) scale(.75);font-size:1rem}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-outlined .25s 1}@keyframes mdc-floating-label-shake-float-above-textarea-outlined{0%{transform:translateX(0) translateY(-24.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-24.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-24.75px) scale(.75)}to{transform:translateX(0) translateY(-24.75px) scale(.75)}}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label{top:18px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input{margin-bottom:2px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter{align-self:flex-end;padding:0 16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter:after{display:inline-block;width:0;height:16px;content:"";vertical-align:-16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter:before{display:none}.mdc-text-field__resizer{align-self:stretch;display:inline-flex;flex-direction:column;flex-grow:1;max-height:100%;max-width:100%;min-height:56px;min-width:-moz-fit-content;min-width:fit-content;min-width:-moz-available;min-width:-webkit-fill-available;overflow:hidden;resize:both}.mdc-text-field--filled .mdc-text-field__resizer{transform:translateY(-1px)}.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter,.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input{transform:translateY(1px)}.mdc-text-field--outlined .mdc-text-field__resizer{transform:translateX(-1px) translateY(-1px)}.mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer{transform:translateX(1px) translateY(-1px)}.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input{transform:translateX(1px) translateY(1px)}.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl],.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input{transform:translateX(-1px) translateY(1px)}.mdc-text-field--with-leading-icon{padding-left:0;padding-right:16px}.mdc-text-field--with-leading-icon[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon{padding-left:16px;padding-right:0}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 48px);left:48px;right:auto}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label{left:auto;right:48px}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(133.33333% - 85.33333px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:36px;right:auto}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:auto;right:36px}.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(-32px) scale(1)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(32px) scale(1)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:.75rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(-32px) scale(.75)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(32px) scale(.75)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon .25s 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon{0%{transform:translateX(-32px) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(calc(4% - 32px)) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(calc(-4% - 32px)) translateY(-34.75px) scale(.75)}to{transform:translateX(-32px) translateY(-34.75px) scale(.75)}}.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake,[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon .25s 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl{0%{transform:translateX(32px) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(calc(4% + 32px)) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(calc(-4% + 32px)) translateY(-34.75px) scale(.75)}to{transform:translateX(32px) translateY(-34.75px) scale(.75)}}.mdc-text-field--with-trailing-icon{padding-left:16px;padding-right:0}.mdc-text-field--with-trailing-icon[dir=rtl],[dir=rtl] .mdc-text-field--with-trailing-icon{padding-left:0;padding-right:16px}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 64px)}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(133.33333% - 85.33333px)}.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 96px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(133.33333% - 128px)}.mdc-text-field-helper-line{display:flex;justify-content:space-between;box-sizing:border-box}.mdc-text-field+.mdc-text-field-helper-line{padding-right:16px;padding-left:16px}.mdc-form-field>.mdc-text-field+label{align-self:flex-start}.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--focused .mdc-notched-outline__trailing{border-width:2px}.mdc-text-field--focused+.mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg){opacity:1}.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after,.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{color:#b00020;color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid .mdc-text-field__input{caret-color:#b00020;caret-color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:#b00020;color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{opacity:1}.mdc-text-field--disabled{pointer-events:none}.mdc-text-field--disabled .mdc-text-field__input{color:rgba(0,0,0,.38)}@media{.mdc-text-field--disabled .mdc-text-field__input::-moz-placeholder{color:rgba(0,0,0,.38)}.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:rgba(0,0,0,.38)}}@media{.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:rgba(0,0,0,.38)}}.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text,.mdc-text-field--disabled .mdc-floating-label,.mdc-text-field--disabled .mdc-text-field-character-counter{color:rgba(0,0,0,.38)}.mdc-text-field--disabled .mdc-text-field__icon--leading,.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:rgba(0,0,0,.3)}.mdc-text-field--disabled .mdc-text-field__affix--prefix,.mdc-text-field--disabled .mdc-text-field__affix--suffix{color:rgba(0,0,0,.38)}.mdc-text-field--disabled .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.06)}.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.06)}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled .mdc-text-field__input::-moz-placeholder{color:GrayText}.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:GrayText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:GrayText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text,.mdc-text-field--disabled .mdc-floating-label,.mdc-text-field--disabled .mdc-text-field-character-counter,.mdc-text-field--disabled .mdc-text-field__affix--prefix,.mdc-text-field--disabled .mdc-text-field__affix--suffix,.mdc-text-field--disabled .mdc-text-field__icon--leading,.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:GrayText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled .mdc-line-ripple:before{border-bottom-color:GrayText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:GrayText}}@media screen and (forced-colors:active){.mdc-text-field--disabled .mdc-text-field__input{background-color:Window}.mdc-text-field--disabled .mdc-floating-label{z-index:1}}.mdc-text-field--disabled .mdc-floating-label{cursor:default}.mdc-text-field--disabled.mdc-text-field--filled{background-color:#fafafa}.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple{display:none}.mdc-text-field--disabled .mdc-text-field__input{pointer-events:auto}.mdc-text-field--end-aligned .mdc-text-field__input{text-align:right}.mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl],[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input{text-align:left}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input{direction:ltr}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix{padding-left:12px;padding-right:0}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading{order:1}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix{order:2}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input{order:3}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix{order:4}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing{order:5}.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input,[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input{text-align:right}.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix,[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix{padding-right:12px}.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix,[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix{padding-left:2px}.mdc-text-field-helper-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;line-height:normal;margin:0;opacity:0;will-change:opacity;transition:opacity .15s cubic-bezier(.4,0,.2,1) 0ms}.mdc-text-field-helper-text:before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.mdc-text-field-helper-text--persistent{transition:none;opacity:1;will-change:auto}.mdc-text-field-character-counter{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;margin-top:0;line-height:normal;margin-left:auto;margin-right:0;padding-left:16px;padding-right:0;white-space:nowrap}.mdc-text-field-character-counter:before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.mdc-text-field-character-counter[dir=rtl],[dir=rtl] .mdc-text-field-character-counter{margin-left:0;margin-right:auto;padding-left:0;padding-right:16px}.mdc-text-field__icon{align-self:center;cursor:pointer}.mdc-text-field__icon:not([tabindex]),.mdc-text-field__icon[tabindex="-1"]{cursor:default;pointer-events:none}.mdc-text-field__icon svg{display:block}.mdc-text-field__icon--leading{margin-left:16px;margin-right:8px}.mdc-text-field__icon--leading[dir=rtl],[dir=rtl] .mdc-text-field__icon--leading{margin-left:8px;margin-right:16px}.mdc-text-field__icon--trailing{padding:12px;margin-left:0;margin-right:0}.mdc-text-field__icon--trailing[dir=rtl],[dir=rtl] .mdc-text-field__icon--trailing{margin-left:0;margin-right:0}:root{--mdc-theme-primary:#6200ee;--mdc-theme-secondary:#018786;--mdc-theme-background:#fff;--mdc-theme-surface:#fff;--mdc-theme-error:#b00020;--mdc-theme-on-primary:#fff;--mdc-theme-on-secondary:#fff;--mdc-theme-on-surface:#000;--mdc-theme-on-error:#fff;--mdc-theme-text-primary-on-background:rgba(0,0,0,0.87);--mdc-theme-text-secondary-on-background:rgba(0,0,0,0.54);--mdc-theme-text-hint-on-background:rgba(0,0,0,0.38);--mdc-theme-text-disabled-on-background:rgba(0,0,0,0.38);--mdc-theme-text-icon-on-background:rgba(0,0,0,0.38);--mdc-theme-text-primary-on-light:rgba(0,0,0,0.87);--mdc-theme-text-secondary-on-light:rgba(0,0,0,0.54);--mdc-theme-text-hint-on-light:rgba(0,0,0,0.38);--mdc-theme-text-disabled-on-light:rgba(0,0,0,0.38);--mdc-theme-text-icon-on-light:rgba(0,0,0,0.38);--mdc-theme-text-primary-on-dark:#fff;--mdc-theme-text-secondary-on-dark:hsla(0,0%,100%,0.7);--mdc-theme-text-hint-on-dark:hsla(0,0%,100%,0.5);--mdc-theme-text-disabled-on-dark:hsla(0,0%,100%,0.5);--mdc-theme-text-icon-on-dark:hsla(0,0%,100%,0.5)}.mdc-theme--primary{color:#6200ee!important;color:var(--mdc-theme-primary,#6200ee)!important}.mdc-theme--secondary{color:#018786!important;color:var(--mdc-theme-secondary,#018786)!important}.mdc-theme--background{background-color:#fff;background-color:var(--mdc-theme-background,#fff)}.mdc-theme--surface{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-theme--error{color:#b00020!important;color:var(--mdc-theme-error,#b00020)!important}.mdc-theme--on-primary{color:#fff!important;color:var(--mdc-theme-on-primary,#fff)!important}.mdc-theme--on-secondary{color:#fff!important;color:var(--mdc-theme-on-secondary,#fff)!important}.mdc-theme--on-surface{color:#000!important;color:var(--mdc-theme-on-surface,#000)!important}.mdc-theme--on-error{color:#fff!important;color:var(--mdc-theme-on-error,#fff)!important}.mdc-theme--text-primary-on-background{color:rgba(0,0,0,.87)!important;color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))!important}.mdc-theme--text-secondary-on-background{color:rgba(0,0,0,.54)!important;color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))!important}.mdc-theme--text-hint-on-background{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38))!important}.mdc-theme--text-disabled-on-background{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))!important}.mdc-theme--text-icon-on-background{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))!important}.mdc-theme--text-primary-on-light{color:rgba(0,0,0,.87)!important;color:var(--mdc-theme-text-primary-on-light,rgba(0,0,0,.87))!important}.mdc-theme--text-secondary-on-light{color:rgba(0,0,0,.54)!important;color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54))!important}.mdc-theme--text-hint-on-light{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-hint-on-light,rgba(0,0,0,.38))!important}.mdc-theme--text-disabled-on-light{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))!important}.mdc-theme--text-icon-on-light{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-icon-on-light,rgba(0,0,0,.38))!important}.mdc-theme--text-primary-on-dark{color:#fff!important;color:var(--mdc-theme-text-primary-on-dark,#fff)!important}.mdc-theme--text-secondary-on-dark{color:hsla(0,0%,100%,.7)!important;color:var(--mdc-theme-text-secondary-on-dark,hsla(0,0%,100%,.7))!important}.mdc-theme--text-hint-on-dark{color:hsla(0,0%,100%,.5)!important;color:var(--mdc-theme-text-hint-on-dark,hsla(0,0%,100%,.5))!important}.mdc-theme--text-disabled-on-dark{color:hsla(0,0%,100%,.5)!important;color:var(--mdc-theme-text-disabled-on-dark,hsla(0,0%,100%,.5))!important}.mdc-theme--text-icon-on-dark{color:hsla(0,0%,100%,.5)!important;color:var(--mdc-theme-text-icon-on-dark,hsla(0,0%,100%,.5))!important}.mdc-theme--primary-bg{background-color:#6200ee!important;background-color:var(--mdc-theme-primary,#6200ee)!important}.mdc-theme--secondary-bg{background-color:#018786!important;background-color:var(--mdc-theme-secondary,#018786)!important}.mdc-tooltip__caret-surface-bottom,.mdc-tooltip__caret-surface-top,.mdc-tooltip__surface{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-tooltip__surface{color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff);background-color:rgba(0,0,0,.6);word-break:break-all;word-break:var(--mdc-tooltip-word-break,normal);overflow-wrap:anywhere}.mdc-tooltip{z-index:9}.mdc-tooltip--showing-transition .mdc-tooltip__surface-animation{transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms cubic-bezier(.4,0,1,1) 0ms}.mdc-tooltip__title{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-light,rgba(0,0,0,.87))}.mdc-tooltip__content{color:rgba(0,0,0,.6)}.mdc-tooltip__content-link{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-tooltip{position:fixed;display:none}.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__caret-surface-bottom,.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__caret-surface-top,.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__surface{background-color:#fff}.mdc-tooltip-wrapper--rich{position:relative}.mdc-tooltip--hide,.mdc-tooltip--showing,.mdc-tooltip--shown{display:inline-flex}.mdc-tooltip--hide.mdc-tooltip--rich,.mdc-tooltip--showing.mdc-tooltip--rich,.mdc-tooltip--shown.mdc-tooltip--rich{display:inline-block;left:-320px;position:absolute}.mdc-tooltip__surface{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);line-height:16px;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center}.mdc-tooltip__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-tooltip--rich .mdc-tooltip__surface{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);align-items:flex-start;border-radius:4px;display:flex;flex-direction:column;line-height:20px;min-height:24px;min-width:40px;max-width:320px;position:relative}.mdc-tooltip--rich .mdc-tooltip__surface .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-tooltip--multiline .mdc-tooltip__surface{text-align:left}.mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl],[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface{text-align:right}.mdc-tooltip__surface .mdc-tooltip__title{display:block;line-height:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);margin:0 8px}.mdc-tooltip__surface .mdc-tooltip__title:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-tooltip__surface .mdc-tooltip__content{display:block;line-height:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);max-width:calc(100% - 16px);margin:0 8px 16px;text-align:left}.mdc-tooltip__surface .mdc-tooltip__content:before{display:inline-block;width:0;height:24px;content:"";vertical-align:0}.mdc-tooltip__surface .mdc-tooltip__content[dir=rtl],[dir=rtl] .mdc-tooltip__surface .mdc-tooltip__content{text-align:right}.mdc-tooltip__surface .mdc-tooltip__content-link{text-decoration:none}.mdc-tooltip__surface-animation{opacity:0;transform:scale(.8);will-change:transform,opacity}.mdc-tooltip--shown .mdc-tooltip__surface-animation{transform:scale(1);opacity:1}.mdc-tooltip--hide .mdc-tooltip__surface-animation{transform:scale(1)}.mdc-tooltip__caret-surface-bottom,.mdc-tooltip__caret-surface-top{position:absolute;height:24px;width:24px;transform:rotate(35deg) skewY(20deg) scaleX(.9396926208)}.mdc-tooltip__caret-surface-bottom .mdc-elevation-overlay,.mdc-tooltip__caret-surface-top .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-tooltip__caret-surface-bottom{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);outline:1px solid transparent;z-index:-1}.mdc-top-app-bar{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);display:flex;position:fixed;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:100%;z-index:4}.mdc-top-app-bar .mdc-top-app-bar__action-item,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-top-app-bar .mdc-top-app-bar__action-item:after,.mdc-top-app-bar .mdc-top-app-bar__action-item:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:after,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-surface--hover:before,.mdc-top-app-bar .mdc-top-app-bar__action-item:hover:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-surface--hover:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded--background-focused:before,.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):focus:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--background-focused:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):after,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):active:after,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-top-app-bar__row{display:flex;position:relative;box-sizing:border-box;width:100%;height:64px}.mdc-top-app-bar__section{display:inline-flex;flex:1 1 auto;align-items:center;min-width:0;padding:8px 12px;z-index:1}.mdc-top-app-bar__section--align-start{justify-content:flex-start;order:-1}.mdc-top-app-bar__section--align-end{justify-content:flex-end;order:1}.mdc-top-app-bar__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit);padding-left:20px;padding-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;z-index:1}.mdc-top-app-bar__title[dir=rtl],[dir=rtl] .mdc-top-app-bar__title{padding-left:0;padding-right:20px}.mdc-top-app-bar--short-collapsed{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:24px;border-bottom-left-radius:0}.mdc-top-app-bar--short-collapsed[dir=rtl],[dir=rtl] .mdc-top-app-bar--short-collapsed{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:24px}.mdc-top-app-bar--short{top:0;right:auto;left:0;width:100%;transition:width .25s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short[dir=rtl],[dir=rtl] .mdc-top-app-bar--short{right:0;left:auto}.mdc-top-app-bar--short .mdc-top-app-bar__row{height:56px}.mdc-top-app-bar--short .mdc-top-app-bar__section{padding:4px}.mdc-top-app-bar--short .mdc-top-app-bar__title{transition:opacity .2s cubic-bezier(.4,0,.2,1);opacity:1}.mdc-top-app-bar--short-collapsed{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);width:56px;transition:width .3s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__title{display:none}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__action-item{transition:padding .15s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item{width:112px}.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end{padding-left:0;padding-right:12px}.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end[dir=rtl],[dir=rtl] .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end{padding-left:12px;padding-right:0}.mdc-top-app-bar--dense .mdc-top-app-bar__row{height:48px}.mdc-top-app-bar--dense .mdc-top-app-bar__section{padding:0 4px}.mdc-top-app-bar--dense .mdc-top-app-bar__title{padding-left:12px;padding-right:0}.mdc-top-app-bar--dense .mdc-top-app-bar__title[dir=rtl],[dir=rtl] .mdc-top-app-bar--dense .mdc-top-app-bar__title{padding-left:0;padding-right:12px}.mdc-top-app-bar--prominent .mdc-top-app-bar__row{height:128px}.mdc-top-app-bar--prominent .mdc-top-app-bar__title{align-self:flex-end;padding-bottom:2px}.mdc-top-app-bar--prominent .mdc-top-app-bar__action-item,.mdc-top-app-bar--prominent .mdc-top-app-bar__navigation-icon{align-self:flex-start}.mdc-top-app-bar--fixed{transition:box-shadow .2s linear}.mdc-top-app-bar--fixed-scrolled{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);transition:box-shadow .2s linear}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__row{height:96px}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__section{padding:0 12px}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title{padding-left:20px;padding-right:0;padding-bottom:9px}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title[dir=rtl],[dir=rtl] .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title{padding-left:0;padding-right:20px}.mdc-top-app-bar--fixed-adjust{padding-top:64px}.mdc-top-app-bar--dense-fixed-adjust{padding-top:48px}.mdc-top-app-bar--short-fixed-adjust{padding-top:56px}.mdc-top-app-bar--prominent-fixed-adjust{padding-top:128px}.mdc-top-app-bar--dense-prominent-fixed-adjust{padding-top:96px}@media (max-width:599px){.mdc-top-app-bar__row{height:56px}.mdc-top-app-bar__section{padding:4px}.mdc-top-app-bar--short{transition:width .2s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short-collapsed{transition:width .25s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end{padding-left:0;padding-right:12px}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end[dir=rtl],[dir=rtl] .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end{padding-left:12px;padding-right:0}.mdc-top-app-bar--prominent .mdc-top-app-bar__title{padding-bottom:6px}.mdc-top-app-bar--fixed-adjust{padding-top:56px}}.mdc-typography{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-font-family,Roboto,sans-serif)}.mdc-typography--headline1{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:6rem;font-size:var(--mdc-typography-headline1-font-size,6rem);line-height:6rem;line-height:var(--mdc-typography-headline1-line-height,6rem);font-weight:300;font-weight:var(--mdc-typography-headline1-font-weight,300);letter-spacing:-.015625em;letter-spacing:var(--mdc-typography-headline1-letter-spacing,-.015625em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline1-text-decoration,inherit);text-decoration:var(--mdc-typography-headline1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline1-text-transform,inherit)}.mdc-typography--headline1,.mdc-typography--headline2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--headline2{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:3.75rem;font-size:var(--mdc-typography-headline2-font-size,3.75rem);line-height:3.75rem;line-height:var(--mdc-typography-headline2-line-height,3.75rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight,300);letter-spacing:-.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing,-.0083333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline2-text-decoration,inherit);text-decoration:var(--mdc-typography-headline2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform,inherit)}.mdc-typography--headline3{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline3-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:3rem;font-size:var(--mdc-typography-headline3-font-size,3rem);line-height:3.125rem;line-height:var(--mdc-typography-headline3-line-height,3.125rem);font-weight:400;font-weight:var(--mdc-typography-headline3-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline3-letter-spacing,normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline3-text-decoration,inherit);text-decoration:var(--mdc-typography-headline3-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline3-text-transform,inherit)}.mdc-typography--headline3,.mdc-typography--headline4{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--headline4{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline4-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:2.125rem;font-size:var(--mdc-typography-headline4-font-size,2.125rem);line-height:2.5rem;line-height:var(--mdc-typography-headline4-line-height,2.5rem);font-weight:400;font-weight:var(--mdc-typography-headline4-font-weight,400);letter-spacing:.0073529412em;letter-spacing:var(--mdc-typography-headline4-letter-spacing,.0073529412em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline4-text-decoration,inherit);text-decoration:var(--mdc-typography-headline4-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline4-text-transform,inherit)}.mdc-typography--headline5{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline5-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.5rem;font-size:var(--mdc-typography-headline5-font-size,1.5rem);line-height:2rem;line-height:var(--mdc-typography-headline5-line-height,2rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing,normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform,inherit)}.mdc-typography--headline5,.mdc-typography--headline6{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--headline6{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit)}.mdc-typography--subtitle1{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit)}.mdc-typography--subtitle1,.mdc-typography--subtitle2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--subtitle2{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-typography--body1{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size,1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height,1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing,.03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit)}.mdc-typography--body1,.mdc-typography--body2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--body2{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-typography--caption{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.mdc-typography--button{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height,2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase)}.mdc-typography--button,.mdc-typography--overline{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--overline{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-overline-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-overline-font-size,.75rem);line-height:2rem;line-height:var(--mdc-typography-overline-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-overline-font-weight,500);letter-spacing:.1666666667em;letter-spacing:var(--mdc-typography-overline-letter-spacing,.1666666667em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-overline-text-decoration,none);text-decoration:var(--mdc-typography-overline-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-overline-text-transform,uppercase)}.mdc-drawer-root{display:flex;height:100vh}.mdc-top-app-bar{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-text-field--fullwidth,.mdc-top-app-bar__section--align-end>.mdc-deprecated-list{display:flex}.mdc-form-field .mdc-text-field--fullwidth{width:100%}.mdc-autocomplete{display:inline-flex;position:relative}.mdc-autocomplete .mdc-text-field__ripple:after,.mdc-autocomplete .mdc-text-field__ripple:before{top:0;left:0;width:100%;height:100%;border-radius:4px 4px 0 0}.mdc-autocomplete--fullwidth{display:flex;width:100%}.mdc-autocomplete__menu{position:absolute;top:54px;left:0;max-height:calc(50vh - 32px)}.mdc-autocomplete__menu.mdc-menu-surface--open{display:block}.mdc-autocomplete__menu .mdc-deprecated-list{width:100%}.mdc-autocomplete__menu .mdc-deprecated-list-item{height:30px;line-height:30px;padding:0 10px}.mdc-autocomplete__menu .mdc-deprecated-list-item strong{font-weight:700}.mdc-autocomplete__menu .mdc-deprecated-list-item.selected{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu{position:fixed!important;top:0!important;right:0;bottom:0!important;left:0!important;flex-direction:row;align-items:center;justify-content:space-around;max-width:100vw!important;max-height:100vh!important;background-color:transparent;box-shadow:none}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu .mdc-deprecated-list{z-index:6;width:560px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px)}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu.mdc-menu-surface--open{display:flex}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu.mdc-menu-surface--open .mdc-drawer-scrim{display:block;background-color:rgba(0,0,0,.32)}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu.mdc-menu-surface--open .mdc-deprecated-list{max-height:100%;overflow-y:scroll}@media (max-width:599px){.mdc-autocomplete--in-dialog .mdc-autocomplete__menu .mdc-deprecated-list{width:100%}}.mdc-card__text{padding:16px}.mdc-card__text+.mdc-card__text{padding-top:0}.mdc-card__media+.mdc-card__text{padding-top:16px}.mdc-file{display:inline-block}.mdc-form{margin:0;padding:0;border:0}.mdc-form__item{display:flex;align-items:center;height:100%;margin-bottom:0}.mdc-form__item:last-child{margin-bottom:0}.mdc-form__item>label{margin:0;padding:0}.mdc-form__item.required>label:before{content:"*";color:red}.mdc-form--nowrap .mdc-form__item>label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mdc-form--horizontal .mdc-form__item>label{flex:0 0 auto;margin-right:0}.mdc-form--horizontal .mdc-form__actions{padding-left:auto0}.mdc-form--horizontal .mdc-form__actions .mdc-button{margin-right:8px}.mdc-form--horizontal .mdc-form__actions .mdc-button:last-child{margin-right:0}.mdc-form--horizontal.mdc-form--label-top-aligned .mdc-form__item{align-items:flex-start}.mdc-form--horizontal.mdc-form--label-right-aligned .mdc-form__item>label{text-align:right}.mdc-form--horizontal.mdc-form--label-top-right-aligned .mdc-form__item{align-items:flex-start}.mdc-form--horizontal.mdc-form--label-top-right-aligned .mdc-form__item>label{text-align:right}.mdc-form--horizontal .mdc-checkbox+label,.mdc-form--horizontal .mdc-radio+label{flex-basis:auto}.mdc-form--vertical .mdc-form__item{flex-direction:column;align-items:flex-start}.mdc-form--vertical .mdc-form__item>label{margin-bottom:0}.mdc-form--vertical .mdc-form__actions{flex-direction:row}.mdc-form--vertical .mdc-form__actions .mdc-button{margin-right:8px}.mdc-form--vertical .mdc-form__actions .mdc-button:last-child,.mdc-form__item>.mdc-form-field{margin-right:0}.mdc-form--actions-center .mdc-form__actions{justify-content:center;padding-left:0}.mdc-form--actions-right .mdc-form__actions{justify-content:flex-end}.mdc-icon-button img,.mdc-icon-button svg{vertical-align:initial}.mdc-pagination .material-icons{font-size:18px}.mdc-pagination .mdc-button{min-width:32px;height:32px}.mdc-pagination .mdc-button.mdc-pagination__button--ellipsis{cursor:default;color:rgba(0,0,0,.38)}.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis){color:rgba(0,0,0,.87);border:1px solid rgba(0,0,0,.87)}.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis):hover{color:#6200ee;color:var(--mdc-theme-primary,#6200ee);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis).mdc-pagination__button--active{cursor:default}.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis).mdc-pagination__button--active,.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis).mdc-pagination__button--active:hover{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-pagination .mdc-data-table__pagination-button:disabled{color:rgba(0,0,0,.38);border-color:rgba(0,0,0,.38);cursor:not-allowed}.mdc-pagination.mdc-pagination--left{justify-content:flex-start}.mdc-pagination.mdc-pagination--center{justify-content:center}.mdc-pagination.mdc-pagination--right{justify-content:flex-end}.mdc-pagination.mdc-pagination--mini .mdc-data-table__pagination-trailing{justify-content:center;width:100%;margin:0}.mdc-pagination.mdc-pagination--mini .mdc-data-table__pagination-navigation{justify-content:space-between;width:100%}.mdc-pagination.mdc-pagination--mini .mdc-data-table__pagination-total{margin:0}.mdc-pagination.mdc-pagination--mini .mdc-data-table__pagination-prev-button{order:-1}.mdc-data-table__pagination-rows-per-page select{width:48px;height:24px;border:1px solid #d9d9d9;text-indent:4px;outline:0;transition:all .3s}.mdc-data-table__pagination-rows-per-page select:focus,.mdc-data-table__pagination-rows-per-page select:hover{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-data-table__pagination-jumper{display:inline-flex;align-items:center;margin-left:22px}.mdc-data-table__pagination-jumper .mdc-data-table__pagination-jumper-label{margin-right:12px}.mdc-data-table__pagination-jumper input{width:48px;height:24px;border:1px solid #d9d9d9;text-indent:4px;outline:0;transition:all .3s}.mdc-data-table__pagination-jumper input:focus,.mdc-data-table__pagination-jumper input:hover{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-data-table__pagination-jumper button{height:24px;line-height:22px;border:1px solid #d9d9d9}@keyframes mdc-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.mdc-skeleton{display:flex;align-items:flex-start;width:100%}.mdc-skeleton-avatar{display:block;margin-left:0;margin-right:16px;background:#f2f2f2;width:36px;height:36px;line-height:36px}.mdc-skeleton-avatar.mdc-skeleton-avatar--circle{border-radius:50%}.mdc-skeleton-avatar.mdc-skeleton-avatar--large{width:40px;height:40px;line-height:40px}.mdc-skeleton-avatar.mdc-skeleton-avatar--small{width:24px;height:24px;line-height:24px}.mdc-skeleton__content{width:100%}.mdc-skeleton-paragraph{margin:0;padding:0}.mdc-skeleton-paragraph>li{width:100%;height:16px;list-style:none;background:#f2f2f2}.mdc-skeleton-paragraph>li+li{margin-top:16px}.mdc-skeleton-paragraph>li:last-child:not(:first-child):not(:nth-child(2)){width:61%}.mdc-skeleton-title{width:100%;height:16px;margin:16px 0 0;background:#f2f2f2}.mdc-skeleton-title+.mdc-skeleton-paragraph{margin-top:24px}.mdc-skeleton--with-avatar .mdc-skeleton-title{margin-top:12px}.mdc-skeleton--with-avatar .mdc-skeleton-title+.mdc-skeleton-paragraph{margin-top:28px}.mdc-skeleton--active .mdc-skeleton-avatar,.mdc-skeleton--active .mdc-skeleton-paragraph>li,.mdc-skeleton--active .mdc-skeleton-title{background:linear-gradient(90deg,#f2f2f2 25%,#dadada 37%,#f2f2f2 63%);background-size:400% 100%;animation:mdc-skeleton-loading 1.4s ease infinite}.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:#fff;background-color:var(--mdc-theme-background,#fff)}.mdc-data-table--fullwidth{display:flex;width:100%}.mdc-data-table__cell--left{text-align:left}.mdc-data-table__cell--center{text-align:center}.mdc-data-table__cell--right{text-align:right}.mdc-data-table__footer-row{border-top:1px solid rgba(0,0,0,.12)}.mdc-data-table__footer-row .mdc-data-table__cell{font-weight:700}.mdc-data-table__header-cell-label{align-items:center;display:inline-flex;vertical-align:middle}@media (max-width:599px){.mdc-data-table{width:100%}}.mdc-data-table__header-cell--scrollbar{position:sticky;right:0;width:0;border-right-color:transparent}.mdc-data-table--fixed{width:100%}.mdc-data-table--fixed .mdc-data-table__cell{background-color:#fff;z-index:1}.mdc-data-table__fixed-footer,.mdc-data-table__fixed-header{overflow:hidden}.mdc-data-table__fixed-footer table,.mdc-data-table__fixed-header table{position:relative;width:100%}.mdc-data-table__fixed-body{overflow:auto}.mdc-data-table__fixed-body table{min-width:100%}.mdc-panels .mdc-panel{display:none}.mdc-panels .mdc-panel.active{display:block}.mdc-divider{display:flex;justify-content:space-around;align-items:center}.mdc-divider__text{display:inline-flex;justify-content:space-between;align-items:center}.mdc-divider__text:after,.mdc-divider__text:before{display:block;content:""}.mdc-divider__text span{display:inline-block;flex-shrink:0;font-size:inherit;text-transform:uppercase}.mdc-divider--horizontal{width:100%}.mdc-divider--horizontal.mdc-divider--no-text{height:2px;background-color:rgba(0,0,0,.12)}.mdc-divider--horizontal .mdc-divider__text{width:100%}.mdc-divider--horizontal .mdc-divider__text:after,.mdc-divider--horizontal .mdc-divider__text:before{width:50%;height:2px;background-color:rgba(0,0,0,.12)}.mdc-divider--horizontal .mdc-divider__text>span{padding:8px 16px}.mdc-divider--vertical{height:100%}.mdc-divider--vertical .mdc-divider__text{height:100%;flex-direction:column}.mdc-divider--vertical .mdc-divider__text:after,.mdc-divider--vertical .mdc-divider__text:before{width:2px;height:50%;background-color:rgba(0,0,0,.12)}.mdc-divider--vertical .mdc-divider__text>span{padding:16px 8px}.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;box-sizing:border-box;touch-action:manipulation;background:#fff;box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,.08)}.flatpickr-calendar.inline,.flatpickr-calendar.open{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{animation:fpFadeInDown .3s cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasTime .dayContainer,.flatpickr-calendar .hasWeeks .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:after,.flatpickr-calendar:before{position:absolute;display:block;pointer-events:none;border:solid transparent;content:"";height:0;width:0;left:22px}.flatpickr-calendar.arrowRight:after,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.rightMost:before{left:auto;right:22px}.flatpickr-calendar.arrowCenter:after,.flatpickr-calendar.arrowCenter:before{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowTop:before{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:after,.flatpickr-calendar.arrowBottom:before{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:transparent;line-height:1;text-align:center;position:relative;overflow:hidden;flex:1}.flatpickr-months .flatpickr-month,.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{color:rgba(0,0,0,.9);fill:rgba(0,0,0,.9);height:34px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{text-decoration:none;cursor:pointer;position:absolute;top:0;padding:10px;z-index:3}.flatpickr-months .flatpickr-next-month.flatpickr-disabled,.flatpickr-months .flatpickr-prev-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-next-month i,.flatpickr-months .flatpickr-prev-month i{position:relative}.flatpickr-months .flatpickr-next-month.flatpickr-prev-month,.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month{left:0}.flatpickr-months .flatpickr-next-month.flatpickr-next-month,.flatpickr-months .flatpickr-prev-month.flatpickr-next-month{right:0}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:#959ea9}.flatpickr-months .flatpickr-next-month:hover svg,.flatpickr-months .flatpickr-prev-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-next-month svg path,.flatpickr-months .flatpickr-prev-month svg path{transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-inner-spin-button,.numInputWrapper input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,.15);box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,.1)}.numInputWrapper span:active{background:rgba(0,0,0,.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,.5)}.numInputWrapper:hover{background:rgba(0,0,0,.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0;line-height:1;height:34px;display:inline-block;text-align:center;transform:translateZ(0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0 ;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,.9)}.flatpickr-current-month input.cur-year{background:transparent;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:active,.flatpickr-current-month .flatpickr-monthDropdown-months:focus{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,.54);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0}.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-around;transform:translateZ(0);opacity:1}.dayContainer+.dayContainer{box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus,.flatpickr-day:hover{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:focus,.flatpickr-day.today:hover{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover{background:#569ff7;box-shadow:none;border-color:#569ff7}.flatpickr-day.endRange.startRange,.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.endRange.endRange,.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)){box-shadow:-10px 0 0 #569ff7}.flatpickr-day.endRange.startRange.endRange,.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:rgba(57,57,57,.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,.1)}.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:700}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-am-pm,.flatpickr-time .flatpickr-time-separator{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:700;width:2%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time .flatpickr-am-pm:focus,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time input:hover{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@keyframes fpFadeInDown{0%{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translateZ(0)}}.flatpickr-monthSelect-months{margin:10px 1px 3px;flex-wrap:wrap}.flatpickr-monthSelect-month{background:none;border:1px solid transparent;border-radius:4px;box-sizing:border-box;color:#393939;cursor:pointer;display:inline-block;font-weight:400;margin:.5px;justify-content:center;padding:10px;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;text-align:center;width:33%}.flatpickr-monthSelect-month.flatpickr-disabled{color:#eee}.flatpickr-monthSelect-month.flatpickr-disabled:focus,.flatpickr-monthSelect-month.flatpickr-disabled:hover{cursor:not-allowed;background:none!important}.flatpickr-monthSelect-theme-dark{background:#3f4458}.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year{color:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month,.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month{color:#fff;fill:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month{color:hsla(0,0%,100%,.95)}.flatpickr-monthSelect-month.today{border-color:#959ea9}.flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-month.inRange.today,.flatpickr-monthSelect-month:focus,.flatpickr-monthSelect-month:hover{background:#e6e6e6;cursor:pointer;outline:0;border-color:#e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover{background:#646c8c;border-color:#646c8c}.flatpickr-monthSelect-month.today:focus,.flatpickr-monthSelect-month.today:hover{background:#959ea9;border-color:#959ea9;color:#fff}.flatpickr-monthSelect-month.endRange,.flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-month.startRange{background-color:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-monthSelect-month.startRange{border-radius:50px 0 0 50px}.flatpickr-monthSelect-month.endRange{border-radius:0 50px 50px 0}.flatpickr-monthSelect-month.startRange.endRange{border-radius:50px}.flatpickr-monthSelect-month.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange{background:#80cbc4;box-shadow:none;color:#fff;border-color:#80cbc4}.flatpickr-calendar.open{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover,.flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-datepicker .mdc-datepicker__icon{display:inline-flex;justify-content:space-around;align-items:center;width:48px;pointer-events:auto}.mdc-datepicker .mdc-datepicker__icon>span{cursor:pointer}.mdc-datepicker .mdc-datepicker__icon>span svg{width:16px;height:16px}.mdc-datepicker .flatpickr-mobile{min-width:180px}.mdc-rangepicker,.mdc-rangepicker__separator{display:inline-flex;align-items:center}.mdc-rangepicker__separator{justify-content:center;height:56px;padding:8px}.mdc-rangepicker__end .mdc-text-field__input{cursor:pointer}.mdc-bottom-navigation--fixed-adjust{padding-bottom:48px}.mdc-bottom-navigation--stacked-fixed-adjust{padding-bottom:72px}.mdc-bottom-navigation{position:fixed;right:0;bottom:0;left:0;z-index:4;height:48px;background-color:#fff;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-bottom-navigation.mdc-bottom-navigation--stacked{height:72px}.mdc-bottom-navigation .mdc-tab__content,.mdc-bottom-navigation .mdc-tab__text-label{color:#6200ee}.mdc-bottom-navigation .mdc-tab--active{color:rgba(98,0,238,.87)}.mdc-bottom-navigation .mdc-tab-scroller__scroll-content{width:100%}.mdc-bottom-navigation--dest-33 .mdc-tab{width:33%}.mdc-bottom-navigation--dest-25 .mdc-tab{width:25%}.mdc-bottom-navigation--dest-20 .mdc-tab{width:20%}.mdc-circular-progress__spinner-layer{display:flex}.mdc-circular-progress__circle-clipper{display:inline-flex}.mdc-circular-progress__color-1 .mdc-circular-progress__indeterminate-circle-graphic{stroke:#4285f4}.mdc-circular-progress__color-2 .mdc-circular-progress__indeterminate-circle-graphic{stroke:#db4437}.mdc-circular-progress__color-3 .mdc-circular-progress__indeterminate-circle-graphic{stroke:#f4b400}.mdc-circular-progress__color-4 .mdc-circular-progress__indeterminate-circle-graphic{stroke:#0f9d58}.mdc-circular-progress--large{width:48px;height:48px}.mdc-circular-progress--medium{width:36px;height:36px}.mdc-circular-progress--small{width:24px;height:24px}.mdc-menu .mdc-deprecated-list{color:inherit}.mdc-menu :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after,.mdc-menu :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{background-color:currentColor}.mdc-menu-surface--absolute{position:absolute}.mdc-menu-surface :not(.mdc-deprecated-list-item--disabled).mdc-menu-item--selected{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-menu-surface :not(.mdc-deprecated-list-item--disabled).mdc-menu-item--selected .mdc-deprecated-list-item__graphic{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-select--fullwidth{display:flex;width:100%}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-select--in-dialog .mdc-select__menu{position:fixed!important;top:0!important;right:0;bottom:0!important;left:0!important;flex-direction:row;align-items:center;justify-content:space-around;max-width:100vw!important;max-height:100vh!important;background-color:transparent;box-shadow:none}.mdc-select--in-dialog .mdc-select__menu .mdc-deprecated-list{z-index:6;width:560px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px)}.mdc-select--in-dialog .mdc-select__menu.mdc-menu-surface--open{display:flex}.mdc-select--in-dialog .mdc-select__menu.mdc-menu-surface--open .mdc-drawer-scrim{display:block;background-color:rgba(0,0,0,.32)}.mdc-select--in-dialog .mdc-select__menu.mdc-menu-surface--open .mdc-deprecated-list{max-height:100%;overflow-y:scroll}@media (max-width:599px){.mdc-select--in-dialog .mdc-select__menu .mdc-deprecated-list{width:100%}}.mdc-alert{display:flex;align-items:center;margin-bottom:16px;padding:8px 16px;border-radius:2px;transition:opacity .15s linear}.mdc-alert .mdc-alert__icon{margin-right:8px}.mdc-alert.mdc-alert--success{background-color:rgba(15,157,88,.12);border:1px solid rgba(15,157,88,.5)}.mdc-alert.mdc-alert--info{background-color:rgba(66,133,244,.12);border:1px solid rgba(66,133,244,.5)}.mdc-alert.mdc-alert--warning{background-color:rgba(244,180,0,.12);border:1px solid rgba(244,180,0,.5)}.mdc-alert.mdc-alert--error{background-color:rgba(219,68,55,.12);border:1px solid rgba(219,68,55,.5)}.mdc-alert.mdc-alert--closed{opacity:0}.mdc-alert__content{flex:1}.mdc-alert__close-button{font-size:18px;color:rgba(0,0,0,.45);transition:color .3s}.mdc-alert__close-button:hover{color:rgba(0,0,0,.75)}.mdc-collapse{display:flex;flex-direction:column;margin-bottom:0}.mdc-collapse__header{display:flex;align-items:center;align-self:flex-start;margin-bottom:0}.mdc-collapse__icon{margin-right:8px}.mdc-collapse__content,.mdc-collapse__title{padding:8px 0}.mdc-collapse--with-icon .mdc-collapse__header{align-self:auto}.mdc-collapse--with-icon .mdc-collapse__content{padding-left:32px}.mdc-collapse--icon-end-aligned .mdc-collapse__header{justify-content:space-between}.mdc-collapse--icon-end-aligned .mdc-collapse__title{order:-1}.mdc-badge{position:relative;display:inline-flex;align-items:center}.mdc-badge__sup{overflow:hidden;height:20px;line-height:20px;padding:0 6px;border-radius:10px;white-space:nowrap;font-size:12px;background-color:#db4437;color:#fff}.mdc-badge__sup.mdc-badge__sup--dot{height:auto;line-height:normal;padding:6px;border-radius:50%}.mdc-badge__sup.mdc-badge__sup--success{background-color:#0f9d58;color:#fff}.mdc-badge__sup.mdc-badge__sup--info{background-color:#4285f4;color:#fff}.mdc-badge__sup.mdc-badge__sup--warning{background-color:#f4b400;color:#fff}.mdc-badge__sup.mdc-badge__sup--error{background-color:#db4437;color:#fff}.mdc-badge__sup.mdc-badge__sup--hide{display:none}.mdc-badge--overlap .mdc-badge__sup{position:absolute;top:0;right:0;transform:translate(50%,-50%)}.mdc-layout-grid__inner{height:100%}.mdc-drawer .mdc-deprecated-list-item--activated,.mdc-drawer .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-drawer .mdc-deprecated-list-item--activated[class*=mdc-theme--text-],.mdc-drawer .mdc-deprecated-list-item--activated [class*=mdc-theme--text-]{color:#6200ee!important;color:var(--mdc-theme-primary,#6200ee)!important}.mdc-deprecated-list--non-interactive .mdc-deprecated-list-item{cursor:default} +@charset "UTF-8";.kill-ie{position:absolute;text-align:center;background-color:#bdbdbd}.kill-ie h1{font-size:36px}.kill-ie p{font-size:24px}.kill-ie a{text-decoration:underline;color:red;font-weight:700}*,:after,:before{box-sizing:border-box;background-repeat:no-repeat}:after,:before{text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}:where(body){margin:0}:where(h1){font-size:2em;margin:.67em 0}:where(dl,ol,ul) :where(dl,ol,ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol,ul){list-style-type:none;padding:0}:where(nav li):before{content:"";float:left}:where(pre){font-family:monospace,monospace;font-size:1em;overflow:auto}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:inherit;text-indent:0}:where(button,input,select){margin:0}:where(button,[type=button i],[type=reset i],[type=submit i]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){margin:0;resize:vertical}:where([type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(details>summary:first-of-type){display:list-item}:where([aria-busy=true i]){cursor:progress}:where([aria-controls]){cursor:pointer}:where([aria-disabled=true i],[disabled]){cursor:not-allowed}:where([aria-hidden=false i][hidden]){display:initial}:where([aria-hidden=false i][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}body,html{margin:0;height:100%}html{word-break:normal}a{text-decoration:none}img{max-width:100%}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(../font/material-icons.37ce905a.woff2) format("woff2"),url(../font/material-icons.49f2e1a9.woff) format("woff");font-display:swap}.material-icons{font-family:Material Icons;font-feature-settings:"liga"}@font-face{font-family:Material Icons Outlined;font-style:normal;font-weight:400;src:url(../font/material-icons-outlined.26da31fa.woff2) format("woff2");font-display:swap}.material-icons,.material-icons-outlined{font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.material-icons-outlined{font-family:Material Icons Outlined;font-feature-settings:"liga"}@font-face{font-family:Material Icons Round;font-style:normal;font-weight:400;src:url(../font/material-icons-round.4092b875.woff2) format("woff2");font-display:swap}.material-icons-round{font-family:Material Icons Round;font-feature-settings:"liga"}@font-face{font-family:Material Icons Two Tone;font-style:normal;font-weight:400;src:url(../font/material-icons-two-tone.0b6b657d.woff2) format("woff2");font-display:swap}.material-icons-round,.material-icons-two-tone{font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale}.material-icons-two-tone{font-family:Material Icons Two Tone;font-feature-settings:"liga"}@font-face{font-family:Material Icons Sharp;font-style:normal;font-weight:400;src:url(../font/material-icons-sharp.1b68a840.woff2) format("woff2");font-display:swap}.material-icons-sharp{font-family:Material Icons Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"}.material-icons-outlined.md-18,.material-icons-round.md-18,.material-icons-two-tone.md-18,.material-icons.md-18{font-size:18px;width:18px;height:18px}.material-icons-outlined.md-24,.material-icons-round.md-24,.material-icons-two-tone.md-24,.material-icons.md-24{font-size:24px;width:24px;height:24px}.material-icons-outlined.md-36,.material-icons-round.md-36,.material-icons-two-tone.md-36,.material-icons.md-36{font-size:36px;width:36px;height:36px}.material-icons-outlined.md-48,.material-icons-round.md-48,.material-icons-two-tone.md-48,.material-icons.md-48{font-size:48px;width:48px;height:48px}.material-icons-outlined.md-dark,.material-icons-outlined.md-light,.material-icons-round.md-dark,.material-icons-round.md-light,.material-icons-two-tone.md-dark,.material-icons-two-tone.md-light,.material-icons.md-dark,.material-icons.md-light{transition:color .25s}.material-icons-outlined.md-dark,.material-icons-round.md-dark,.material-icons-two-tone.md-dark,.material-icons.md-dark{color:rgba(0,0,0,.54)}.material-icons-outlined.md-dark:hover,.material-icons-round.md-dark:hover,.material-icons-two-tone.md-dark:hover,.material-icons.md-dark:hover{color:rgba(0,0,0,.87)}.material-icons-outlined.md-dark.md-inactive,.material-icons-round.md-dark.md-inactive,.material-icons-two-tone.md-dark.md-inactive,.material-icons.md-dark.md-inactive{color:rgba(0,0,0,.38)}.material-icons-outlined.md-light,.material-icons-round.md-light,.material-icons-two-tone.md-light,.material-icons.md-light{color:hsla(0,0%,100%,.7)}.material-icons-outlined.md-light:hover,.material-icons-round.md-light:hover,.material-icons-two-tone.md-light:hover,.material-icons.md-light:hover{color:#fff}.material-icons-outlined.md-light.md-inactive,.material-icons-round.md-light.md-inactive,.material-icons-two-tone.md-light.md-inactive,.material-icons.md-light.md-inactive{color:hsla(0,0%,100%,.5)}.md-success-icon,.md-success-icon--outlined{color:#0f9d58;border-radius:50%}.md-info-icon,.md-info-icon--outlined{color:#4285f4;border-radius:50%}.md-warning-icon,.md-warning-icon--outlined{color:#f4b400;border-radius:50%}.md-error-icon,.md-error-icon--outlined{color:#db4437;border-radius:50%}.mdc-banner__text{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-banner__graphic{color:#fff;color:var(--mdc-theme-surface,#fff);background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);border-radius:50%}.mdc-banner__content,.mdc-banner__fixed{min-width:344px}@media (max-width:344px),(max-width:480px){.mdc-banner__content,.mdc-banner__fixed{min-width:100%}}.mdc-banner__content{max-width:720px}.mdc-banner{z-index:1;border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;display:none;flex-shrink:0;height:0;position:relative;width:100%}@media (max-width:480px){.mdc-banner .mdc-banner__fixed{left:0;right:0}.mdc-banner .mdc-banner__text{margin-left:16px;margin-right:36px}.mdc-banner .mdc-banner__text[dir=rtl],[dir=rtl] .mdc-banner .mdc-banner__text{margin-left:36px;margin-right:16px}}@media (max-width:480px){.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__content{flex-wrap:wrap}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__graphic{margin-bottom:12px}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text{margin-left:16px;margin-right:8px;padding-bottom:4px}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text[dir=rtl],[dir=rtl] .mdc-banner.mdc-banner--mobile-stacked .mdc-banner__text{margin-left:8px;margin-right:16px}.mdc-banner.mdc-banner--mobile-stacked .mdc-banner__actions{margin-left:auto}}.mdc-banner--closing,.mdc-banner--open,.mdc-banner--opening{display:flex}.mdc-banner--open{transition:height .3s ease}.mdc-banner--open .mdc-banner__content{transition:transform .3s ease;transform:translateY(0)}.mdc-banner--closing{transition:height .25s ease}.mdc-banner--closing .mdc-banner__content{transition:transform .25s ease}.mdc-banner--centered .mdc-banner__content{left:0;margin-left:auto;margin-right:auto;right:0}.mdc-banner__fixed{border-bottom-style:solid;border-bottom-width:1px;box-sizing:border-box;height:inherit;position:fixed;width:100%}.mdc-banner__content{min-height:52px;position:absolute;transform:translateY(-100%)}.mdc-banner__content,.mdc-banner__graphic-text-wrapper{display:flex;width:100%}.mdc-banner__graphic{flex-shrink:0;height:40px;margin:16px 0 16px 16px;text-align:center;width:40px}.mdc-banner__graphic[dir=rtl],[dir=rtl] .mdc-banner__graphic{margin-left:0;margin-right:16px}.mdc-banner__icon{position:relative;top:50%;transform:translateY(-50%)}.mdc-banner__text{margin-left:24px;margin-right:90px;align-self:center;flex-grow:1;padding-top:16px;padding-bottom:16px}.mdc-banner__text[dir=rtl],[dir=rtl] .mdc-banner__text{margin-left:90px;margin-right:24px}.mdc-banner__actions{align-self:flex-end;display:flex;flex-shrink:0;padding:8px 8px 8px 0}.mdc-banner__actions[dir=rtl],[dir=rtl] .mdc-banner__actions{padding-left:8px;padding-right:0}.mdc-banner{border-bottom-color:rgba(0,0,0,.12)}.mdc-banner,.mdc-banner .mdc-banner__fixed{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-banner .mdc-banner__fixed{border-bottom-color:rgba(0,0,0,.12)}.mdc-banner__text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-banner__primary-action:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-banner__primary-action:after,.mdc-banner__primary-action:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-banner__primary-action.mdc-ripple-surface--hover:before,.mdc-banner__primary-action:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-banner__primary-action.mdc-ripple-upgraded--background-focused:before,.mdc-banner__primary-action:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-banner__primary-action:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-banner__primary-action:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-banner__primary-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-banner__secondary-action{margin-left:0;margin-right:8px}.mdc-banner__secondary-action:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-banner__secondary-action:after,.mdc-banner__secondary-action:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-banner__secondary-action.mdc-ripple-surface--hover:before,.mdc-banner__secondary-action:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-banner__secondary-action.mdc-ripple-upgraded--background-focused:before,.mdc-banner__secondary-action:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-banner__secondary-action:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-banner__secondary-action:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-banner__secondary-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-banner__secondary-action[dir=rtl],[dir=rtl] .mdc-banner__secondary-action{margin-left:8px;margin-right:0}.mdc-touch-target-wrapper{display:inline}.mdc-elevation-overlay{position:absolute;border-radius:inherit;pointer-events:none;opacity:0;opacity:var(--mdc-elevation-overlay-opacity,0);transition:opacity .28s cubic-bezier(.4,0,.2,1);background-color:#fff;background-color:var(--mdc-elevation-overlay-color,#fff)}.mdc-button{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:64px;border:none;outline:none;line-height:inherit;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;background:transparent}.mdc-button .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-button::-moz-focus-inner{padding:0;border:0}.mdc-button:active{outline:none}.mdc-button:hover{cursor:pointer}.mdc-button:disabled{cursor:default;pointer-events:none}.mdc-button .mdc-button__icon{margin-left:0;margin-right:8px;display:inline-block;position:relative;vertical-align:top}.mdc-button .mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button .mdc-button__icon{margin-left:8px;margin-right:0}.mdc-button .mdc-button__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-button__label+.mdc-button__icon{margin-left:8px;margin-right:0}.mdc-button__label+.mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button__label+.mdc-button__icon{margin-left:0;margin-right:8px}svg.mdc-button__icon{fill:currentColor}.mdc-button--outlined .mdc-button__icon,.mdc-button--raised .mdc-button__icon,.mdc-button--unelevated .mdc-button__icon{margin-left:-4px;margin-right:8px}.mdc-button--outlined .mdc-button__icon[dir=rtl],.mdc-button--outlined .mdc-button__label+.mdc-button__icon,.mdc-button--raised .mdc-button__icon[dir=rtl],.mdc-button--raised .mdc-button__label+.mdc-button__icon,.mdc-button--unelevated .mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--outlined .mdc-button__icon,[dir=rtl] .mdc-button--raised .mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__icon{margin-left:8px;margin-right:-4px}.mdc-button--outlined .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--raised .mdc-button__label+.mdc-button__icon[dir=rtl],.mdc-button--unelevated .mdc-button__label+.mdc-button__icon[dir=rtl],[dir=rtl] .mdc-button--outlined .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--raised .mdc-button__label+.mdc-button__icon,[dir=rtl] .mdc-button--unelevated .mdc-button__label+.mdc-button__icon{margin-left:-4px;margin-right:8px}.mdc-button--touch{margin-top:6px;margin-bottom:6px}.mdc-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none)}@keyframes mdc-ripple-fg-radius-in{0%{animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-opacity-in{0%{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity,0)}}@keyframes mdc-ripple-fg-opacity-out{0%{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity,0)}to{opacity:0}}.mdc-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-button .mdc-button__ripple:after,.mdc-button .mdc-button__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-button .mdc-button__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-button .mdc-button__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-button.mdc-ripple-upgraded--foreground-deactivation .mdc-button__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-button .mdc-button__ripple:after,.mdc-button .mdc-button__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-button.mdc-ripple-upgraded .mdc-button__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-button .mdc-button__ripple{position:absolute;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.mdc-button:not(.mdc-button--outlined) .mdc-button__ripple{top:0;left:0}.mdc-button--raised{transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.mdc-button--outlined{border-style:solid}.mdc-button{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px);padding:0 8px}.mdc-button:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-button:disabled{color:rgba(0,0,0,.38)}.mdc-button .mdc-button__icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.mdc-button .mdc-button__ripple:after,.mdc-button .mdc-button__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-button.mdc-ripple-surface--hover .mdc-button__ripple:before,.mdc-button:hover .mdc-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple:before,.mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple:after{transition:opacity .15s linear}.mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-button--unelevated,.mdc-button .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-button--unelevated{padding:0 16px;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);height:36px}.mdc-button--unelevated.mdc-button--icon-trailing{padding:0 12px 0 16px}.mdc-button--unelevated.mdc-button--icon-leading{padding:0 16px 0 12px}.mdc-button--unelevated:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.mdc-button--unelevated:disabled{background-color:rgba(0,0,0,.12)}.mdc-button--unelevated:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-button--unelevated:disabled{color:rgba(0,0,0,.38)}.mdc-button--unelevated .mdc-button__icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.mdc-button--unelevated .mdc-button__ripple:after,.mdc-button--unelevated .mdc-button__ripple:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple:before,.mdc-button--unelevated:hover .mdc-button__ripple:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple:before,.mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple:after{transition:opacity .15s linear}.mdc-button--unelevated:not(.mdc-ripple-upgraded):active .mdc-button__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-button--unelevated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-button--raised,.mdc-button--unelevated .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-button--raised{padding:0 16px;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);height:36px;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mdc-button--raised.mdc-button--icon-trailing{padding:0 12px 0 16px}.mdc-button--raised.mdc-button--icon-leading{padding:0 16px 0 12px}.mdc-button--raised:not(:disabled){background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.mdc-button--raised:disabled{background-color:rgba(0,0,0,.12)}.mdc-button--raised:not(:disabled){color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-button--raised:disabled{color:rgba(0,0,0,.38)}.mdc-button--raised .mdc-button__icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.mdc-button--raised .mdc-button__ripple:after,.mdc-button--raised .mdc-button__ripple:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple:before,.mdc-button--raised:hover .mdc-button__ripple:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple:before,.mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple:after{transition:opacity .15s linear}.mdc-button--raised:not(.mdc-ripple-upgraded):active .mdc-button__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-button--raised.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-button--raised .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-button--raised.mdc-ripple-upgraded--background-focused,.mdc-button--raised:hover,.mdc-button--raised:not(.mdc-ripple-upgraded):focus{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-button--raised:not(:disabled):active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.mdc-button--raised:disabled{box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.mdc-button--outlined{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);height:36px;border-radius:4px;border-radius:var(--mdc-shape-small,4px);padding:0 15px;border-width:1px}.mdc-button--outlined:not(:disabled){color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-button--outlined:disabled{color:rgba(0,0,0,.38)}.mdc-button--outlined .mdc-button__icon{font-size:1.125rem;height:1.125rem;width:1.125rem}.mdc-button--outlined .mdc-button__ripple:after,.mdc-button--outlined .mdc-button__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple:before,.mdc-button--outlined:hover .mdc-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple:before,.mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple:after{transition:opacity .15s linear}.mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-button--outlined.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-button--outlined .mdc-button__ripple{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-button--outlined:disabled,.mdc-button--outlined:not(:disabled){border-color:rgba(0,0,0,.12)}.mdc-button--outlined.mdc-button--icon-trailing{padding:0 11px 0 15px}.mdc-button--outlined.mdc-button--icon-leading{padding:0 15px 0 11px}.mdc-button--outlined .mdc-button__ripple{top:-1px;left:-1px;border:1px solid transparent}.mdc-button--outlined .mdc-button__touch{left:-1px;width:calc(100% + 2px)}.mdc-card{border-radius:4px;border-radius:var(--mdc-shape-medium,4px);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);position:relative;box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;box-sizing:border-box}.mdc-card .mdc-elevation-overlay,.mdc-card:after{width:100%;height:100%;top:0;left:0}.mdc-card:after{border-radius:4px;border-radius:var(--mdc-shape-medium,4px);position:absolute;box-sizing:border-box;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-card--outlined{box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12);border:1px solid #e0e0e0}.mdc-card--outlined:after{border:none}.mdc-card__content{border-radius:inherit;height:100%}.mdc-card__media{position:relative;box-sizing:border-box;background-repeat:no-repeat;background-position:50%;background-size:cover}.mdc-card__media:before{display:block;content:""}.mdc-card__media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mdc-card__media:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mdc-card__media--square:before{margin-top:100%}.mdc-card__media--16-9:before{margin-top:56.25%}.mdc-card__media-content{position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box}.mdc-card__primary-action{display:flex;flex-direction:column;box-sizing:border-box;position:relative;outline:none;color:inherit;text-decoration:none;cursor:pointer;overflow:hidden}.mdc-card__primary-action:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mdc-card__primary-action:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mdc-card__actions{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;min-height:52px;padding:8px}.mdc-card__actions--full-bleed{padding:0}.mdc-card__action-buttons,.mdc-card__action-icons{display:flex;flex-direction:row;align-items:center;box-sizing:border-box}.mdc-card__action-icons{color:rgba(0,0,0,.6);flex-grow:1;justify-content:flex-end}.mdc-card__action-buttons+.mdc-card__action-icons{margin-left:16px;margin-right:0}.mdc-card__action-buttons+.mdc-card__action-icons[dir=rtl],[dir=rtl] .mdc-card__action-buttons+.mdc-card__action-icons{margin-left:0;margin-right:16px}.mdc-card__action{display:inline-flex;flex-direction:row;align-items:center;box-sizing:border-box;justify-content:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mdc-card__action:focus{outline:none}.mdc-card__action--button{margin-left:0;margin-right:8px;padding:0 8px}.mdc-card__action--button[dir=rtl],[dir=rtl] .mdc-card__action--button{margin-left:8px;margin-right:0}.mdc-card__action--button:last-child,.mdc-card__action--button:last-child[dir=rtl],[dir=rtl] .mdc-card__action--button:last-child{margin-left:0;margin-right:0}.mdc-card__actions--full-bleed .mdc-card__action--button{justify-content:space-between;width:100%;height:auto;max-height:none;margin:0;padding:8px 16px;text-align:left}.mdc-card__actions--full-bleed .mdc-card__action--button[dir=rtl],[dir=rtl] .mdc-card__actions--full-bleed .mdc-card__action--button{text-align:right}.mdc-card__action--icon{margin:-6px 0;padding:12px}.mdc-card__action--icon:not(:disabled){color:rgba(0,0,0,.6)}.mdc-card__primary-action{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-card__primary-action .mdc-card__ripple:after,.mdc-card__primary-action .mdc-card__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-card__primary-action .mdc-card__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-card__primary-action .mdc-card__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-card__primary-action.mdc-ripple-upgraded--unbounded .mdc-card__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-card__primary-action.mdc-ripple-upgraded--foreground-activation .mdc-card__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-card__primary-action.mdc-ripple-upgraded--foreground-deactivation .mdc-card__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-card__primary-action .mdc-card__ripple:after,.mdc-card__primary-action .mdc-card__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-card__primary-action .mdc-card__ripple:after,.mdc-card__primary-action .mdc-card__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-card__primary-action.mdc-ripple-surface--hover .mdc-card__ripple:before,.mdc-card__primary-action:hover .mdc-card__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-card__primary-action.mdc-ripple-upgraded--background-focused .mdc-card__ripple:before,.mdc-card__primary-action:not(.mdc-ripple-upgraded):focus .mdc-card__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-card__primary-action:not(.mdc-ripple-upgraded) .mdc-card__ripple:after{transition:opacity .15s linear}.mdc-card__primary-action:not(.mdc-ripple-upgraded):active .mdc-card__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-card__primary-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-card__primary-action .mdc-card__ripple{box-sizing:content-box;height:100%;overflow:hidden;left:0;pointer-events:none;position:absolute;top:0;width:100%}.mdc-card__primary-action.mdc-ripple-upgraded--background-focused:after,.mdc-card__primary-action:not(.mdc-ripple-upgraded):focus:after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:5px double transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-checkbox{padding:11px;padding:calc(var(--mdc-checkbox-ripple-size, 40px)/2 - 9px);margin:0;margin:calc(var(--mdc-checkbox-touch-target-size, 40px)/2 - 20px)}.mdc-checkbox .mdc-checkbox__ripple:after,.mdc-checkbox .mdc-checkbox__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-checkbox.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.mdc-checkbox:hover .mdc-checkbox__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-checkbox:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after{transition:opacity .15s linear}.mdc-checkbox:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-checkbox.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.mdc-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after{transition:opacity .15s linear}.mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-checkbox .mdc-checkbox__background{top:11px;top:calc(var(--mdc-checkbox-ripple-size, 40px)/2 - 9px);left:11px;left:calc(var(--mdc-checkbox-ripple-size, 40px)/2 - 9px)}.mdc-checkbox .mdc-checkbox__native-control{top:0;top:calc(20px - var(--mdc-checkbox-touch-target-size, 40px)/2);right:0;right:calc(20px - var(--mdc-checkbox-touch-target-size, 40px)/2);left:0;left:calc(20px - var(--mdc-checkbox-touch-target-size, 40px)/2);width:40px;width:var(--mdc-checkbox-touch-target-size,40px);height:40px;height:var(--mdc-checkbox-touch-target-size,40px)}.mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}.mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#018786;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786))}@keyframes mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786{0%{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}50%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#018786;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786))}}@keyframes mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786{0%,80%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#018786;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786))}to{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}}.mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-in-background-8A000000FF01878600000000FF018786}.mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-out-background-8A000000FF01878600000000FF018786}.mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:rgba(0,0,0,.38);border-color:var(--mdc-checkbox-disabled-color,rgba(0,0,0,.38));background-color:transparent}.mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background,.mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,.mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background{border-color:transparent;background-color:rgba(0,0,0,.38);background-color:var(--mdc-checkbox-disabled-color,rgba(0,0,0,.38))}.mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff;color:var(--mdc-checkbox-ink-color,#fff)}.mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff;border-color:var(--mdc-checkbox-ink-color,#fff)}.mdc-checkbox .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__checkmark{color:#fff;color:var(--mdc-checkbox-ink-color,#fff)}.mdc-checkbox .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:#fff;border-color:var(--mdc-checkbox-ink-color,#fff)}@keyframes mdc-checkbox-unchecked-checked-checkmark-path{0%,50%{stroke-dashoffset:29.7833385}50%{animation-timing-function:cubic-bezier(0,0,.2,1)}to{stroke-dashoffset:0}}@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark{0%,68.2%{transform:scaleX(0)}68.2%{animation-timing-function:cubic-bezier(0,0,0,1)}to{transform:scaleX(1)}}@keyframes mdc-checkbox-checked-unchecked-checkmark-path{0%{animation-timing-function:cubic-bezier(.4,0,1,1);opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:-29.7833385}}@keyframes mdc-checkbox-checked-indeterminate-checkmark{0%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:rotate(0deg);opacity:1}to{transform:rotate(45deg);opacity:0}}@keyframes mdc-checkbox-indeterminate-checked-checkmark{0%{animation-timing-function:cubic-bezier(.14,0,0,1);transform:rotate(45deg);opacity:0}to{transform:rotate(1turn);opacity:1}}@keyframes mdc-checkbox-checked-indeterminate-mixedmark{0%{animation-timing-function:mdc-animation-deceleration-curve-timing-function;transform:rotate(-45deg);opacity:0}to{transform:rotate(0deg);opacity:1}}@keyframes mdc-checkbox-indeterminate-checked-mixedmark{0%{animation-timing-function:cubic-bezier(.14,0,0,1);transform:rotate(0deg);opacity:1}to{transform:rotate(315deg);opacity:0}}@keyframes mdc-checkbox-indeterminate-unchecked-mixedmark{0%{animation-timing-function:linear;transform:scaleX(1);opacity:1}32.8%,to{transform:scaleX(0);opacity:0}}.mdc-checkbox{display:inline-block;position:relative;flex:0 0 18px;box-sizing:content-box;width:18px;height:18px;line-height:0;white-space:nowrap;cursor:pointer;vertical-align:bottom}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:GrayText;border-color:var(--mdc-checkbox-disabled-color,GrayText);background-color:transparent}.mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background,.mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,.mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background{border-color:GrayText;background-color:transparent;background-color:var(--mdc-checkbox-disabled-color,transparent)}.mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__checkmark{color:GrayText;color:var(--mdc-checkbox-ink-color,GrayText)}.mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__mixedmark{border-color:GrayText;border-color:var(--mdc-checkbox-ink-color,GrayText)}.mdc-checkbox__mixedmark{margin:0 1px}}.mdc-checkbox--disabled{cursor:default;pointer-events:none}.mdc-checkbox__background{display:inline-flex;position:absolute;align-items:center;justify-content:center;box-sizing:border-box;width:18px;height:18px;border:2px solid;border-radius:2px;background-color:transparent;pointer-events:none;will-change:background-color,border-color;transition:background-color 90ms cubic-bezier(.4,0,.6,1) 0ms,border-color 90ms cubic-bezier(.4,0,.6,1) 0ms}.mdc-checkbox__checkmark{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;opacity:0;transition:opacity .18s cubic-bezier(.4,0,.6,1) 0ms}.mdc-checkbox--upgraded .mdc-checkbox__checkmark{opacity:1}.mdc-checkbox__checkmark-path{transition:stroke-dashoffset .18s cubic-bezier(.4,0,.6,1) 0ms;stroke:currentColor;stroke-width:3.12px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-checkbox__mixedmark{width:100%;height:0;transform:scaleX(0) rotate(0deg);border-width:1px;border-style:solid;opacity:0;transition:opacity 90ms cubic-bezier(.4,0,.6,1) 0ms,transform 90ms cubic-bezier(.4,0,.6,1) 0ms}.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background,.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background,.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background,.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background{animation-duration:.18s;animation-timing-function:linear}.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark-path{animation:mdc-checkbox-unchecked-checked-checkmark-path .18s linear 0s;transition:none}.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark{animation:mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;transition:none}.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark-path{animation:mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark{animation:mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s;transition:none}.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark{animation:mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark{animation:mdc-checkbox-indeterminate-checked-checkmark .5s linear 0s;transition:none}.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark{animation:mdc-checkbox-indeterminate-checked-mixedmark .5s linear 0s;transition:none}.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark{animation:mdc-checkbox-indeterminate-unchecked-mixedmark .3s linear 0s;transition:none}.mdc-checkbox__native-control:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background,.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background{transition:border-color 90ms cubic-bezier(0,0,.2,1) 0ms,background-color 90ms cubic-bezier(0,0,.2,1) 0ms}.mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path,.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background .mdc-checkbox__checkmark-path,.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background .mdc-checkbox__checkmark-path{stroke-dashoffset:0}.mdc-checkbox__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit}.mdc-checkbox__native-control:disabled{cursor:default;pointer-events:none}.mdc-checkbox--touch{margin:4px;margin:calc(var(--mdc-checkbox-state-layer-size, 48px)/2 - var(--mdc-checkbox-state-layer-size, 40px)/2)}.mdc-checkbox--touch .mdc-checkbox__native-control{top:-4px;top:calc(var(--mdc-checkbox-state-layer-size, 40px)/2 - var(--mdc-checkbox-state-layer-size, 48px)/2);right:-4px;right:calc(var(--mdc-checkbox-state-layer-size, 40px)/2 - var(--mdc-checkbox-state-layer-size, 48px)/2);left:-4px;left:calc(var(--mdc-checkbox-state-layer-size, 40px)/2 - var(--mdc-checkbox-state-layer-size, 48px)/2);width:48px;width:var(--mdc-checkbox-state-layer-size,48px);height:48px;height:var(--mdc-checkbox-state-layer-size,48px)}.mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark{transition:opacity .18s cubic-bezier(0,0,.2,1) 0ms,transform .18s cubic-bezier(0,0,.2,1) 0ms;opacity:1}.mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark{transform:scaleX(1) rotate(-45deg)}.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background .mdc-checkbox__checkmark,.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background .mdc-checkbox__checkmark{transform:rotate(45deg);opacity:0;transition:opacity 90ms cubic-bezier(.4,0,.6,1) 0ms,transform 90ms cubic-bezier(.4,0,.6,1) 0ms}.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background .mdc-checkbox__mixedmark,.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background .mdc-checkbox__mixedmark{transform:scaleX(1) rotate(0deg);opacity:1}.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__background,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark-path,.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__mixedmark{transition:none}.mdc-checkbox{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-checkbox .mdc-checkbox__ripple:after,.mdc-checkbox .mdc-checkbox__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-checkbox .mdc-checkbox__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-checkbox .mdc-checkbox__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-checkbox.mdc-ripple-upgraded--unbounded .mdc-checkbox__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-checkbox.mdc-ripple-upgraded--foreground-activation .mdc-checkbox__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-checkbox.mdc-ripple-upgraded--foreground-deactivation .mdc-checkbox__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-checkbox .mdc-checkbox__ripple:after,.mdc-checkbox .mdc-checkbox__ripple:before{top:0;left:0;width:100%;height:100%}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:after,.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-checkbox{z-index:0}.mdc-checkbox .mdc-checkbox__ripple:after,.mdc-checkbox .mdc-checkbox__ripple:before{z-index:-1;z-index:var(--mdc-ripple-z-index,-1)}.mdc-checkbox__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-deprecated-chip-trailing-action__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}.mdc-deprecated-chip-trailing-action{border:none;display:inline-flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;padding:0;outline:none;cursor:pointer;-webkit-appearance:none;background:none}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__touch{width:26px}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__icon{fill:currentColor;color:inherit}.mdc-deprecated-chip-trailing-action{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:after,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--unbounded .mdc-deprecated-chip-trailing-action__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-chip-trailing-action__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-chip-trailing-action__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:after,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:before{top:0;left:0;width:100%;height:100%}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:after,.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:after,.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-deprecated-chip-trailing-action.mdc-ripple-surface--hover .mdc-deprecated-chip-trailing-action__ripple:before,.mdc-deprecated-chip-trailing-action:hover .mdc-deprecated-chip-trailing-action__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--background-focused .mdc-deprecated-chip-trailing-action__ripple:before,.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):focus .mdc-deprecated-chip-trailing-action__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded) .mdc-deprecated-chip-trailing-action__ripple:after{transition:opacity .15s linear}.mdc-deprecated-chip-trailing-action:not(.mdc-ripple-upgraded):active .mdc-deprecated-chip-trailing-action__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple{position:absolute;box-sizing:content-box;width:100%;height:100%;overflow:hidden}.mdc-chip__icon--leading{color:rgba(0,0,0,.54)}.mdc-deprecated-chip-trailing-action{color:#000}.mdc-chip__icon--trailing{color:rgba(0,0,0,.54)}.mdc-chip__icon--trailing:hover{color:rgba(0,0,0,.62)}.mdc-chip__icon--trailing:focus{color:rgba(0,0,0,.87)}.mdc-chip__icon.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){width:20px;height:20px;font-size:20px}.mdc-chip__icon.mdc-chip__icon--trailing,.mdc-deprecated-chip-trailing-action__icon{height:18px;width:18px;font-size:18px}.mdc-deprecated-chip-trailing-action{margin-left:4px;margin-right:-4px}.mdc-deprecated-chip-trailing-action[dir=rtl],[dir=rtl] .mdc-deprecated-chip-trailing-action{margin-left:-4px;margin-right:4px}.mdc-chip__icon--trailing{margin-left:4px;margin-right:-4px}.mdc-chip__icon--trailing[dir=rtl],[dir=rtl] .mdc-chip__icon--trailing{margin-left:-4px;margin-right:4px}.mdc-chip{background-color:#e0e0e0;color:rgba(0,0,0,.87);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);height:32px;position:relative;display:inline-flex;align-items:center;box-sizing:border-box;padding:0 12px;border-width:0;outline:none;cursor:pointer;-webkit-appearance:none}.mdc-chip,.mdc-chip .mdc-chip__ripple{border-radius:16px}.mdc-chip:hover{color:rgba(0,0,0,.87)}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark,.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:-4px;margin-right:4px}.mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl],[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden){margin-left:4px;margin-right:-4px}.mdc-chip .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-chip::-moz-focus-inner{padding:0;border:0}.mdc-chip:hover{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-chip .mdc-chip__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-chip--exit{transition:opacity 75ms cubic-bezier(.4,0,.2,1),width .15s cubic-bezier(0,0,.2,1),padding .1s linear,margin .1s linear;opacity:0}.mdc-chip__overflow{text-overflow:ellipsis;overflow:hidden}.mdc-chip__text{white-space:nowrap}.mdc-chip__icon{border-radius:50%;outline:none;vertical-align:middle}.mdc-chip__checkmark{height:20px}.mdc-chip__checkmark-path{transition:stroke-dashoffset .15s cubic-bezier(.4,0,.6,1) 50ms;stroke-width:2px;stroke-dashoffset:29.7833385;stroke-dasharray:29.7833385}.mdc-chip__primary-action:focus{outline:none}.mdc-chip--selected .mdc-chip__checkmark-path{stroke-dashoffset:0}.mdc-chip__icon--leading,.mdc-chip__icon--trailing{position:relative}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__icon--leading{color:rgba(98,0,238,.54)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-chip-set--choice .mdc-chip .mdc-chip__checkmark-path{stroke:#6200ee;stroke:var(--mdc-theme-primary,#6200ee)}.mdc-chip-set--choice .mdc-chip--selected{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-chip__checkmark-svg{width:0;height:20px;transition:width .15s cubic-bezier(.4,0,.2,1)}.mdc-chip--selected .mdc-chip__checkmark-svg{width:20px}.mdc-chip-set--filter .mdc-chip__icon--leading{transition:opacity 75ms linear;transition-delay:-50ms;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark{transition:opacity 75ms linear;transition-delay:80ms;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading+.mdc-chip__checkmark .mdc-chip__checkmark-svg{transition:width 0ms}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading{opacity:0}.mdc-chip-set--filter .mdc-chip--selected .mdc-chip__icon--leading+.mdc-chip__checkmark{width:0;opacity:1}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading{width:0;opacity:0}.mdc-chip-set--filter .mdc-chip__icon--leading-hidden.mdc-chip__icon--leading+.mdc-chip__checkmark{width:20px}.mdc-chip{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-chip .mdc-chip__ripple:after,.mdc-chip .mdc-chip__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-chip .mdc-chip__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-chip .mdc-chip__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-chip.mdc-ripple-upgraded--unbounded .mdc-chip__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-chip.mdc-ripple-upgraded--foreground-activation .mdc-chip__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-chip.mdc-ripple-upgraded--foreground-deactivation .mdc-chip__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-chip .mdc-chip__ripple:after,.mdc-chip .mdc-chip__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-chip .mdc-chip__ripple:after,.mdc-chip .mdc-chip__ripple:before{background-color:rgba(0,0,0,.87);background-color:var(--mdc-ripple-color,rgba(0,0,0,.87))}.mdc-chip.mdc-ripple-surface--hover .mdc-chip__ripple:before,.mdc-chip:hover .mdc-chip__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-chip.mdc-ripple-upgraded--background-focused .mdc-chip__ripple:before,.mdc-chip.mdc-ripple-upgraded:focus-within .mdc-chip__ripple:before,.mdc-chip:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple:before,.mdc-chip:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-chip:not(.mdc-ripple-upgraded) .mdc-chip__ripple:after{transition:opacity .15s linear}.mdc-chip:not(.mdc-ripple-upgraded):active .mdc-chip__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-chip.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-chip .mdc-chip__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple:before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple:after,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected .mdc-chip__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-surface--hover .mdc-chip__ripple:before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:hover .mdc-chip__ripple:before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded--background-focused .mdc-chip__ripple:before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded:focus-within .mdc-chip__ripple:before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus-within .mdc-chip__ripple:before,.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):focus .mdc-chip__ripple:before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded) .mdc-chip__ripple:after{transition:opacity .15s linear}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected:not(.mdc-ripple-upgraded):active .mdc-chip__ripple:after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}.mdc-chip-set--choice .mdc-chip.mdc-chip--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.2)}@keyframes mdc-chip-entry{0%{transform:scale(.8);opacity:.4}to{transform:scale(1);opacity:1}}.mdc-chip-set{padding:4px;display:flex;flex-wrap:wrap;box-sizing:border-box}.mdc-chip-set .mdc-chip{margin:4px}.mdc-chip-set .mdc-chip--touch{margin-top:8px;margin-bottom:8px}.mdc-chip-set--input .mdc-chip{animation:mdc-chip-entry .1s cubic-bezier(0,0,.2,1)}.mdc-circular-progress__determinate-circle,.mdc-circular-progress__indeterminate-circle-graphic{stroke:#6200ee;stroke:var(--mdc-theme-primary,#6200ee)}.mdc-circular-progress__determinate-track{stroke:transparent}@keyframes mdc-circular-progress-container-rotate{to{transform:rotate(1turn)}}@keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}to{transform:rotate(3turn)}}@keyframes mdc-circular-progress-color-1-fade-in-out{0%{opacity:.99}25%{opacity:.99}26%{opacity:0}89%{opacity:0}90%{opacity:.99}to{opacity:.99}}@keyframes mdc-circular-progress-color-2-fade-in-out{0%{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-3-fade-in-out{0%{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-4-fade-in-out{0%{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@keyframes mdc-circular-progress-left-spin{0%{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes mdc-circular-progress-right-spin{0%{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}.mdc-circular-progress{display:inline-flex;position:relative;direction:ltr;line-height:0;transition:opacity .25s cubic-bezier(.4,0,.6,1) 0ms}.mdc-circular-progress__determinate-container,.mdc-circular-progress__indeterminate-circle-graphic,.mdc-circular-progress__indeterminate-container,.mdc-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.mdc-circular-progress__determinate-container{transform:rotate(-90deg)}.mdc-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.mdc-circular-progress__determinate-circle-graphic,.mdc-circular-progress__indeterminate-circle-graphic{fill:transparent}.mdc-circular-progress__determinate-circle{transition:stroke-dashoffset .5s cubic-bezier(0,0,.2,1) 0ms}.mdc-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.mdc-circular-progress__circle-clipper{position:relative;width:50%;height:100%;overflow:hidden}.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic{width:200%}.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{left:-100%}.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container{opacity:0}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{opacity:1;animation:mdc-circular-progress-container-rotate 1.5682352941176s linear infinite}.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-1{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-2{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-3{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-4{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both,mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both}.mdc-circular-progress--closed{opacity:0}.mdc-floating-label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);position:absolute;left:0;transform-origin:left top;line-height:1.15rem;text-align:left;text-overflow:ellipsis;white-space:nowrap;cursor:text;overflow:hidden;will-change:transform;transition:transform .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}.mdc-floating-label[dir=rtl],[dir=rtl] .mdc-floating-label{right:0;left:auto;transform-origin:right top;text-align:right}.mdc-floating-label--float-above{cursor:auto}.mdc-floating-label--required:after{margin-left:1px;margin-right:0;content:"*"}.mdc-floating-label--required[dir=rtl]:after,[dir=rtl] .mdc-floating-label--required:after{margin-left:0;margin-right:1px}.mdc-floating-label--float-above{transform:translateY(-106%) scale(.75)}.mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-standard .25s 1}@keyframes mdc-floating-label-shake-float-above-standard{0%{transform:translateX(0) translateY(-106%) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-106%) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-106%) scale(.75)}to{transform:translateX(0) translateY(-106%) scale(.75)}}.mdc-line-ripple:after,.mdc-line-ripple:before{position:absolute;bottom:0;left:0;width:100%;border-bottom-style:solid;content:""}.mdc-line-ripple:before{border-bottom-width:1px;z-index:1}.mdc-line-ripple:after{transform:scaleX(0);border-bottom-width:2px;opacity:0;z-index:2;transition:transform .18s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1)}.mdc-line-ripple--active:after{transform:scaleX(1);opacity:1}.mdc-line-ripple--deactivating:after{opacity:0}.mdc-notched-outline{display:flex;position:absolute;top:0;right:0;left:0;box-sizing:border-box;width:100%;max-width:100%;height:100%;text-align:left;pointer-events:none}.mdc-notched-outline[dir=rtl],[dir=rtl] .mdc-notched-outline{text-align:right}.mdc-notched-outline__leading,.mdc-notched-outline__notch,.mdc-notched-outline__trailing{box-sizing:border-box;height:100%;border-top:1px solid;border-bottom:1px solid;pointer-events:none}.mdc-notched-outline__leading{border-left:1px solid;border-right:none;width:12px}.mdc-notched-outline__leading[dir=rtl],.mdc-notched-outline__trailing,[dir=rtl] .mdc-notched-outline__leading{border-left:none;border-right:1px solid}.mdc-notched-outline__trailing{flex-grow:1}.mdc-notched-outline__trailing[dir=rtl],[dir=rtl] .mdc-notched-outline__trailing{border-left:1px solid;border-right:none}.mdc-notched-outline__notch{flex:0 0 auto;width:auto;max-width:calc(100% - 24px)}.mdc-notched-outline .mdc-floating-label{display:inline-block;position:relative;max-width:100%}.mdc-notched-outline .mdc-floating-label--float-above{text-overflow:clip}.mdc-notched-outline--upgraded .mdc-floating-label--float-above{max-width:133.33333%}.mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:0;padding-right:8px;border-top:none}.mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl],[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-left:8px;padding-right:0}.mdc-notched-outline--no-label .mdc-notched-outline__notch{display:none}.mdc-select{display:inline-flex;position:relative}.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text{color:rgba(0,0,0,.87)}.mdc-select.mdc-select--disabled .mdc-select__selected-text{color:rgba(0,0,0,.38)}.mdc-select:not(.mdc-select--disabled) .mdc-floating-label{color:rgba(0,0,0,.6)}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-select.mdc-select--disabled .mdc-floating-label{color:rgba(0,0,0,.38)}.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon{fill:rgba(0,0,0,.54)}.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon{fill:#6200ee;fill:var(--mdc-theme-primary,#6200ee)}.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon{fill:rgba(0,0,0,.38)}.mdc-select:not(.mdc-select--disabled)+.mdc-select-helper-text{color:rgba(0,0,0,.6)}.mdc-select.mdc-select--disabled+.mdc-select-helper-text{color:rgba(0,0,0,.38)}.mdc-select:not(.mdc-select--disabled) .mdc-select__icon{color:rgba(0,0,0,.54)}.mdc-select.mdc-select--disabled .mdc-select__icon{color:rgba(0,0,0,.38)}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-select.mdc-select--disabled .mdc-select__selected-text{color:GrayText}.mdc-select.mdc-select--disabled .mdc-select__dropdown-icon{fill:red}.mdc-select.mdc-select--disabled .mdc-floating-label{color:GrayText}.mdc-select.mdc-select--disabled .mdc-line-ripple:before{border-bottom-color:GrayText}.mdc-select.mdc-select--disabled .mdc-notched-outline__leading,.mdc-select.mdc-select--disabled .mdc-notched-outline__notch,.mdc-select.mdc-select--disabled .mdc-notched-outline__trailing{border-color:GrayText}.mdc-select.mdc-select--disabled+.mdc-select-helper-text,.mdc-select.mdc-select--disabled .mdc-select__icon{color:GrayText}}.mdc-select .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-select .mdc-select__anchor{padding-left:16px;padding-right:0}.mdc-select .mdc-select__anchor[dir=rtl],[dir=rtl] .mdc-select .mdc-select__anchor{padding-left:0;padding-right:16px}.mdc-select.mdc-select--with-leading-icon .mdc-select__anchor,.mdc-select.mdc-select--with-leading-icon .mdc-select__anchor[dir=rtl],[dir=rtl] .mdc-select.mdc-select--with-leading-icon .mdc-select__anchor{padding-left:0;padding-right:0}.mdc-select .mdc-select__icon{width:24px;height:24px;font-size:24px}.mdc-select .mdc-select__dropdown-icon{width:24px;height:24px}.mdc-select .mdc-select__menu .mdc-deprecated-list-item,.mdc-select .mdc-select__menu .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:12px}.mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-select .mdc-select__menu .mdc-deprecated-list-item__graphic{margin-left:12px;margin-right:0}.mdc-select__dropdown-icon{margin-left:12px;margin-right:12px;display:inline-flex;position:relative;align-self:center;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active,.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{position:absolute;top:0;left:0}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-graphic{width:41.6666666667%;height:20.8333333333%}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{opacity:1;transition:opacity 75ms linear 75ms}.mdc-select__dropdown-icon .mdc-select__dropdown-icon-active{opacity:0;transition:opacity 75ms linear}.mdc-select__dropdown-icon[dir=rtl],[dir=rtl] .mdc-select__dropdown-icon{margin-left:12px;margin-right:12px}.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-inactive{opacity:0;transition:opacity 49.5ms linear}.mdc-select--activated .mdc-select__dropdown-icon .mdc-select__dropdown-icon-active{opacity:1;transition:opacity .1005s linear 49.5ms}.mdc-select__anchor{width:200px;min-width:0;flex:1 1 auto;position:relative;box-sizing:border-box;overflow:hidden;outline:none;cursor:pointer}.mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-106%) scale(.75)}.mdc-select__selected-text-container{display:flex;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none;box-sizing:border-box;width:auto;min-width:0;flex-grow:1;height:28px;border:none;outline:none;padding:0;background-color:transparent;color:inherit}.mdc-select__selected-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;width:100%;text-align:left}.mdc-select__selected-text[dir=rtl],[dir=rtl] .mdc-select__selected-text{text-align:right}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-floating-label,.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label,.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid+.mdc-select-helper-text--validation-msg{color:#b00020;color:var(--mdc-theme-error,#b00020)}.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-select__dropdown-icon,.mdc-select--invalid:not(.mdc-select--disabled) .mdc-select__dropdown-icon{fill:#b00020;fill:var(--mdc-theme-error,#b00020)}.mdc-select--disabled{cursor:default;pointer-events:none}.mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item,.mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-select--with-leading-icon .mdc-select__menu .mdc-deprecated-list-item{padding-left:12px;padding-right:12px}.mdc-select__menu .mdc-deprecated-list .mdc-select__icon,.mdc-select__menu .mdc-deprecated-list .mdc-select__icon[dir=rtl],[dir=rtl] .mdc-select__menu .mdc-deprecated-list .mdc-select__icon{margin-left:0;margin-right:0}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-select--filled .mdc-select__anchor{height:56px;display:flex;align-items:baseline}.mdc-select--filled .mdc-select__anchor:before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text:before{content:""}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor .mdc-select__selected-text-container{height:100%;display:inline-flex;align-items:center}.mdc-select--filled.mdc-select--no-label .mdc-select__anchor:before{display:none}.mdc-select--filled .mdc-select__anchor{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:0;border-bottom-left-radius:0}.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor{background-color:#f5f5f5}.mdc-select--filled.mdc-select--disabled .mdc-select__anchor{background-color:#fafafa}.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.42)}.mdc-select--filled:not(.mdc-select--disabled):hover .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.87)}.mdc-select--filled:not(.mdc-select--disabled) .mdc-line-ripple:after{border-bottom-color:#6200ee;border-bottom-color:var(--mdc-theme-primary,#6200ee)}.mdc-select--filled.mdc-select--disabled .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.06)}.mdc-select--filled .mdc-floating-label{max-width:calc(100% - 64px)}.mdc-select--filled .mdc-floating-label--float-above{max-width:calc(133.33333% - 85.33333px)}.mdc-select--filled .mdc-menu-surface--is-open-below{border-top-left-radius:0;border-top-right-radius:0}.mdc-select--filled.mdc-select--focused.mdc-line-ripple:after{transform:scaleY(2);opacity:1}.mdc-select--filled .mdc-floating-label{left:16px;right:auto}.mdc-select--filled .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-select--filled .mdc-floating-label{left:auto;right:16px}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{left:48px;right:auto}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{left:auto;right:48px}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label{max-width:calc(100% - 96px)}.mdc-select--filled.mdc-select--with-leading-icon .mdc-floating-label--float-above{max-width:calc(133.33333% - 128px)}.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple:after,.mdc-select--invalid:not(.mdc-select--disabled) .mdc-line-ripple:before,.mdc-select--invalid:not(.mdc-select--disabled):hover .mdc-line-ripple:before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error,#b00020)}.mdc-select--outlined{border:none}.mdc-select--outlined .mdc-select__anchor{height:56px}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-56px .25s 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-56px{0%{transform:translateX(0) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-34.75px) scale(.75)}to{transform:translateX(0) translateY(-34.75px) scale(.75)}}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small,4px)}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small,4px);border-bottom-left-radius:0}@supports (top:max(0%)){.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px,var(--mdc-shape-small,4px))}}@supports (top:max(0%)){.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:calc(100% - max(12px, var(--mdc-shape-small, 4px))*2)}}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small,4px);border-bottom-left-radius:0}.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small,4px)}@supports (top:max(0%)){.mdc-select--outlined .mdc-select__anchor{padding-left:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-select--outlined .mdc-select__anchor[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-select__anchor{padding-left:0}@supports (top:max(0%)){.mdc-select--outlined .mdc-select__anchor[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-select__anchor{padding-right:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top:max(0%)){.mdc-select--outlined+.mdc-select-helper-text{margin-left:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-select--outlined+.mdc-select-helper-text[dir=rtl],[dir=rtl] .mdc-select--outlined+.mdc-select-helper-text{margin-left:0}@supports (top:max(0%)){.mdc-select--outlined+.mdc-select-helper-text[dir=rtl],[dir=rtl] .mdc-select--outlined+.mdc-select-helper-text{margin-right:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-select--outlined.mdc-select--disabled .mdc-select__anchor,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-select__anchor{background-color:transparent}.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.38)}.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.87)}.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px;border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--disabled .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.06)}.mdc-select--outlined .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-select--outlined .mdc-select__anchor{display:flex;align-items:baseline;overflow:visible}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined .25s 1}.mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1);font-size:.75rem}.mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(.75);font-size:1rem}.mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text:before{content:""}.mdc-select--outlined .mdc-select__anchor .mdc-select__selected-text-container{height:100%;display:inline-flex;align-items:center}.mdc-select--outlined .mdc-select__anchor:before{display:none}.mdc-select--outlined .mdc-select__selected-text-container{display:flex;border:none;z-index:1;background-color:transparent}.mdc-select--outlined .mdc-select__icon{z-index:2}.mdc-select--outlined .mdc-floating-label{line-height:1.15rem;left:4px;right:auto}.mdc-select--outlined .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-select--outlined .mdc-floating-label{left:auto;right:4px}.mdc-select--outlined.mdc-select--focused .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled) .mdc-notched-outline__trailing,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled):not(.mdc-select--focused) .mdc-select__anchor:hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__leading,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__notch,.mdc-select--outlined.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--focused .mdc-notched-outline .mdc-notched-outline__trailing{border-width:2px;border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:36px;right:auto}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label{left:auto;right:36px}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(-32px) scale(1)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above[dir=rtl],[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(32px) scale(1)}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above{font-size:.75rem}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(-32px) scale(.75)}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(32px) scale(.75)}.mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px .25s 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px{0%{transform:translateX(-32px) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(calc(4% - 32px)) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(calc(-4% - 32px)) translateY(-34.75px) scale(.75)}to{transform:translateX(-32px) translateY(-34.75px) scale(.75)}}.mdc-select--outlined.mdc-select--with-leading-icon[dir=rtl] .mdc-floating-label--shake,[dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px .25s 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px-rtl{0%{transform:translateX(32px) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(calc(4% + 32px)) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(calc(-4% + 32px)) translateY(-34.75px) scale(.75)}to{transform:translateX(32px) translateY(-34.75px) scale(.75)}}.mdc-select--outlined.mdc-select--with-leading-icon .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 96px)}.mdc-select--outlined .mdc-menu-surface{margin-bottom:8px}.mdc-select--outlined .mdc-menu-surface--is-open-below,.mdc-select--outlined.mdc-select--no-label .mdc-menu-surface{margin-bottom:0}.mdc-select__anchor{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-select__anchor .mdc-select__ripple:after,.mdc-select__anchor .mdc-select__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-select__anchor .mdc-select__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-select__anchor .mdc-select__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-select__anchor.mdc-ripple-upgraded--unbounded .mdc-select__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-select__anchor.mdc-ripple-upgraded--foreground-activation .mdc-select__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-select__anchor.mdc-ripple-upgraded--foreground-deactivation .mdc-select__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-select__anchor .mdc-select__ripple:after,.mdc-select__anchor .mdc-select__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-select__anchor.mdc-ripple-upgraded .mdc-select__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-select__anchor .mdc-select__ripple:after,.mdc-select__anchor .mdc-select__ripple:before{background-color:rgba(0,0,0,.87);background-color:var(--mdc-ripple-color,rgba(0,0,0,.87))}.mdc-select__anchor.mdc-ripple-surface--hover .mdc-select__ripple:before,.mdc-select__anchor:hover .mdc-select__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-select__anchor.mdc-ripple-upgraded--background-focused .mdc-select__ripple:before,.mdc-select__anchor:not(.mdc-ripple-upgraded):focus .mdc-select__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-select__anchor .mdc-select__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:after,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple:before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:hover .mdc-deprecated-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple:after{transition:opacity .15s linear}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple:after,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-list-item__ripple:before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:hover .mdc-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-select-helper-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;margin:0 16px;line-height:normal}.mdc-select-helper-text[dir=rtl],[dir=rtl] .mdc-select-helper-text{margin-left:16px;margin-right:16px}.mdc-select-helper-text:before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.mdc-select-helper-text--validation-msg{opacity:0;transition:opacity .18s cubic-bezier(.4,0,.2,1)}.mdc-select--invalid+.mdc-select-helper-text--validation-msg,.mdc-select-helper-text--validation-msg-persistent{opacity:1}.mdc-select--with-leading-icon .mdc-select__icon{display:inline-block;box-sizing:border-box;border:none;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;flex-shrink:0;align-self:center;background-color:transparent;fill:currentColor;margin-left:12px;margin-right:12px}.mdc-select--with-leading-icon .mdc-select__icon[dir=rtl],[dir=rtl] .mdc-select--with-leading-icon .mdc-select__icon{margin-left:12px;margin-right:12px}.mdc-select__icon:not([tabindex]),.mdc-select__icon[tabindex="-1"]{cursor:default;pointer-events:none}.mdc-data-table__content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-data-table{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);border:1px solid rgba(0,0,0,.12);-webkit-overflow-scrolling:touch;display:inline-flex;flex-direction:column;box-sizing:border-box;position:relative}.mdc-data-table .mdc-data-table__header-cell:first-child{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-medium,4px)}.mdc-data-table .mdc-data-table__header-cell:first-child[dir=rtl],[dir=rtl] .mdc-data-table .mdc-data-table__header-cell:first-child{border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-medium,4px);border-top-left-radius:0}.mdc-data-table .mdc-data-table__header-cell:last-child{border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-medium,4px)}.mdc-data-table .mdc-data-table__header-cell:last-child[dir=rtl],[dir=rtl] .mdc-data-table .mdc-data-table__header-cell:last-child{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-medium,4px);border-top-right-radius:0}.mdc-data-table__row{background-color:inherit}.mdc-data-table__header-cell{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-data-table__row--selected{background-color:rgba(98,0,238,.04)}.mdc-data-table__pagination-rows-per-page-select:not(.mdc-select--disabled) .mdc-notched-outline__leading,.mdc-data-table__pagination-rows-per-page-select:not(.mdc-select--disabled) .mdc-notched-outline__notch,.mdc-data-table__pagination-rows-per-page-select:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.12)}.mdc-data-table__cell,.mdc-data-table__header-cell{border-bottom-color:rgba(0,0,0,.12)}.mdc-data-table__pagination{border-top-color:rgba(0,0,0,.12)}.mdc-data-table__cell,.mdc-data-table__header-cell{border-bottom-width:1px;border-bottom-style:solid}.mdc-data-table__pagination{border-top-width:1px;border-top-style:solid}.mdc-data-table__row:last-child .mdc-data-table__cell{border-bottom:none}.mdc-data-table__row:not(.mdc-data-table__row--selected):hover{background-color:rgba(0,0,0,.04)}.mdc-data-table__cell,.mdc-data-table__header-cell,.mdc-data-table__pagination-rows-per-page-label,.mdc-data-table__pagination-total{color:rgba(0,0,0,.87)}.mdc-data-table__row{height:52px}.mdc-data-table__pagination{min-height:52px}.mdc-data-table__header-row{height:56px}.mdc-data-table__cell,.mdc-data-table__header-cell{padding:0 16px}.mdc-data-table__cell--checkbox,.mdc-data-table__header-cell--checkbox{padding-left:4px;padding-right:0}.mdc-data-table__cell--checkbox[dir=rtl],.mdc-data-table__header-cell--checkbox[dir=rtl],[dir=rtl] .mdc-data-table__cell--checkbox,[dir=rtl] .mdc-data-table__header-cell--checkbox{padding-left:0;padding-right:4px}.mdc-data-table__sort-icon-button{color:rgba(0,0,0,.6)}.mdc-data-table__sort-icon-button .mdc-icon-button__ripple:after,.mdc-data-table__sort-icon-button .mdc-icon-button__ripple:before{background-color:rgba(0,0,0,.6);background-color:var(--mdc-ripple-color,rgba(0,0,0,.6))}.mdc-data-table__sort-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-data-table__sort-icon-button:hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-data-table__sort-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-data-table__sort-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button{color:rgba(0,0,0,.87)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button .mdc-icon-button__ripple:after,.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button .mdc-icon-button__ripple:before{background-color:rgba(0,0,0,.87);background-color:var(--mdc-ripple-color,rgba(0,0,0,.87))}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button:hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-data-table__table-container{-webkit-overflow-scrolling:touch;overflow-x:auto;width:100%}.mdc-data-table__table{min-width:100%;border:0;white-space:nowrap;border-spacing:0;table-layout:fixed}.mdc-data-table__cell{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);box-sizing:border-box;overflow:hidden;text-align:left;text-overflow:ellipsis}.mdc-data-table__cell--numeric,.mdc-data-table__cell[dir=rtl],[dir=rtl] .mdc-data-table__cell{text-align:right}.mdc-data-table__cell--numeric[dir=rtl],[dir=rtl] .mdc-data-table__cell--numeric{text-align:left}.mdc-data-table__cell--checkbox{width:1px}.mdc-data-table__header-cell{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;outline:none;text-align:left}.mdc-data-table__header-cell[dir=rtl],[dir=rtl] .mdc-data-table__header-cell{text-align:right}.mdc-data-table__header-cell--checkbox{width:1px}.mdc-data-table__header-cell--numeric{text-align:right}.mdc-data-table__header-cell--numeric[dir=rtl],[dir=rtl] .mdc-data-table__header-cell--numeric{text-align:left}.mdc-data-table__sort-icon-button{width:28px;height:28px;padding:2px;transform:rotate(.0001deg);margin-left:4px;margin-right:0;transition:transform .15s cubic-bezier(.4,0,.2,1) 0ms;opacity:0}.mdc-data-table__sort-icon-button.mdc-icon-button--touch{margin-top:0;margin-bottom:0}.mdc-data-table__sort-icon-button.mdc-icon-button--touch .mdc-icon-button__touch{display:none}.mdc-data-table__header-cell--numeric .mdc-data-table__sort-icon-button,.mdc-data-table__sort-icon-button[dir=rtl],[dir=rtl] .mdc-data-table__sort-icon-button{margin-left:0;margin-right:4px}.mdc-data-table__header-cell--numeric .mdc-data-table__sort-icon-button[dir=rtl],[dir=rtl] .mdc-data-table__header-cell--numeric .mdc-data-table__sort-icon-button{margin-left:4px;margin-right:0}.mdc-data-table__header-cell--sorted-descending .mdc-data-table__sort-icon-button{transform:rotate(-180deg)}.mdc-data-table__header-cell--sorted .mdc-data-table__sort-icon-button,.mdc-data-table__header-cell:hover .mdc-data-table__sort-icon-button,.mdc-data-table__sort-icon-button:focus{opacity:1}.mdc-data-table__header-cell-wrapper{align-items:center;display:inline-flex;vertical-align:middle}.mdc-data-table__header-cell--with-sort{cursor:pointer}.mdc-data-table__sort-status-label{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.mdc-data-table__progress-indicator{display:none;position:absolute;width:100%}.mdc-data-table--in-progress .mdc-data-table__progress-indicator{display:block}.mdc-data-table__scrim{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);height:100%;opacity:.32;position:absolute;top:0;width:100%}.mdc-data-table--sticky-header .mdc-data-table__header-cell{position:sticky;top:0;z-index:1}.mdc-data-table__pagination{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);box-sizing:border-box;display:flex;justify-content:flex-end}.mdc-data-table__pagination-trailing{margin-left:4px;margin-right:0;align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-end}.mdc-data-table__pagination-trailing[dir=rtl],[dir=rtl] .mdc-data-table__pagination-trailing{margin-left:0;margin-right:4px}.mdc-data-table__pagination-navigation{align-items:center;display:flex}.mdc-data-table__pagination-button{margin-left:0;margin-right:4px}.mdc-data-table__pagination-button .mdc-button__icon[dir=rtl],[dir=rtl] .mdc-data-table__pagination-button .mdc-button__icon{transform:rotate(180deg)}.mdc-data-table__pagination-button[dir=rtl],[dir=rtl] .mdc-data-table__pagination-button{margin-left:4px;margin-right:0}.mdc-data-table__pagination-total{margin-left:14px;margin-right:36px;white-space:nowrap}.mdc-data-table__pagination-total[dir=rtl],[dir=rtl] .mdc-data-table__pagination-total{margin-left:36px;margin-right:14px}.mdc-data-table__pagination-rows-per-page{margin-left:0;margin-right:22px;align-items:center;display:inline-flex}.mdc-data-table__pagination-rows-per-page[dir=rtl],[dir=rtl] .mdc-data-table__pagination-rows-per-page{margin-left:22px;margin-right:0}.mdc-data-table__pagination-rows-per-page-label{margin-left:0;margin-right:12px;white-space:nowrap}.mdc-data-table__pagination-rows-per-page-label[dir=rtl],[dir=rtl] .mdc-data-table__pagination-rows-per-page-label{margin-left:12px;margin-right:0}.mdc-data-table__pagination-rows-per-page-select{min-width:80px;min-width:var(--mdc-menu-min-width,80px);margin:8px 0}.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor{width:100%;min-width:80px;height:36px}.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-floating-label--float-above{transform:translateY(-27.25px) scale(1);font-size:.75rem}.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-24.75px) scale(.75);font-size:1rem}.mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-select-outlined-36px .25s 1}@keyframes mdc-floating-label-shake-float-above-select-outlined-36px{0%{transform:translateX(0) translateY(-24.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-24.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-24.75px) scale(.75)}to{transform:translateX(0) translateY(-24.75px) scale(.75)}}.mdc-data-table__pagination-rows-per-page-select .mdc-select__dropdown-icon{width:20px;height:20px}.mdc-data-table__pagination-rows-per-page-select.mdc-select--outlined .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 56px)}.mdc-data-table__pagination-rows-per-page-select .mdc-deprecated-list-item{height:36px}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-data-table__header-row-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-data-table__row-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.mdc-data-table__header-row-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.mdc-data-table__header-row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after,.mdc-data-table__row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after{transition:opacity .15s linear}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after,.mdc-data-table__row-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-data-table__header-row-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded,.mdc-data-table__row-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-data-table__header-row-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-data-table__header-row-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:before,.mdc-data-table__row-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:after,.mdc-data-table__row-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{border-color:#6200ee;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee));background-color:#6200ee;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee))}@keyframes mdc-checkbox-fade-in-background-8A000000FF6200EE00000000FF6200EE{0%{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}50%{border-color:#6200ee;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee));background-color:#6200ee;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee))}}@keyframes mdc-checkbox-fade-out-background-8A000000FF6200EE00000000FF6200EE{0%,80%{border-color:#6200ee;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee));background-color:#6200ee;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#6200ee))}to{border-color:rgba(0,0,0,.54);border-color:var(--mdc-checkbox-unchecked-color,rgba(0,0,0,.54));background-color:transparent}}.mdc-data-table__header-row-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__header-row-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-in-background-8A000000FF6200EE00000000FF6200EE}.mdc-data-table__header-row-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__header-row-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.mdc-data-table__row-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-out-background-8A000000FF6200EE00000000FF6200EE}.mdc-dialog,.mdc-dialog__scrim{position:fixed;top:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%}.mdc-dialog{display:none;z-index:7;z-index:var(--mdc-dialog-z-index,7)}.mdc-dialog .mdc-dialog__surface{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-dialog .mdc-dialog__scrim,.mdc-dialog .mdc-dialog__surface-scrim{background-color:rgba(0,0,0,.32)}.mdc-dialog .mdc-dialog__title{color:rgba(0,0,0,.87)}.mdc-dialog .mdc-dialog__content{color:rgba(0,0,0,.6)}.mdc-dialog .mdc-dialog__close{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple:after,.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-surface,#000))}.mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-dialog .mdc-dialog__close:hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-dialog.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer .mdc-dialog__actions,.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__actions,.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title{border-color:rgba(0,0,0,.12)}.mdc-dialog.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:0}.mdc-dialog.mdc-dialog-scroll-divider-header.mdc-dialog--fullscreen .mdc-dialog__header{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mdc-dialog .mdc-dialog__content{padding:20px 24px}.mdc-dialog .mdc-dialog__surface{min-width:280px}@media (max-width:592px){.mdc-dialog .mdc-dialog__surface{max-width:calc(100vw - 32px)}}@media (min-width:592px){.mdc-dialog .mdc-dialog__surface{max-width:560px}}.mdc-dialog .mdc-dialog__surface{max-height:calc(100% - 32px)}.mdc-dialog .mdc-dialog__surface{border-radius:4px;border-radius:var(--mdc-shape-medium,4px)}@media (max-width:960px) and (max-height:1440px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px;max-width:560px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width:720px) and (max-height:1023px) and (max-width:672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:calc(100vw - 112px)}}@media (max-width:720px) and (max-height:1023px) and (min-width:672px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:560px}}@media (max-width:720px) and (max-height:1023px) and (max-height:720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:calc(100vh - 160px)}}@media (max-width:720px) and (max-height:1023px) and (min-height:720px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-height:560px}}@media (max-width:720px) and (max-height:1023px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}@media (max-width:720px) and (max-height:400px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100%;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:-8px}}@media (max-width:600px) and (max-height:960px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{height:100%;max-height:100vh;max-width:100vw;width:100vw;border-radius:0}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{order:-1;left:-12px}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header{padding:0 16px 9px;justify-content:flex-start}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title{margin-left:-8px}}@media (min-width:960px) and (min-height:1440px){.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface{max-width:calc(100vw - 400px)}.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close{right:-12px}}.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim{opacity:0}.mdc-dialog__scrim{opacity:0;z-index:-1}.mdc-dialog__container{display:flex;flex-direction:row;align-items:center;justify-content:space-around;box-sizing:border-box;height:100%;transform:scale(.8);opacity:0;pointer-events:none}.mdc-dialog__surface{position:relative;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;box-sizing:border-box;max-width:100%;max-height:100%;pointer-events:auto;overflow-y:auto}.mdc-dialog__surface .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-dialog__surface[dir=rtl],[dir=rtl] .mdc-dialog__surface{text-align:right}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-dialog__surface{outline:2px solid windowText}}.mdc-dialog__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:2px solid transparent;border-radius:inherit;content:"";pointer-events:none}@media screen and (-ms-high-contrast:active),screen and (-ms-high-contrast:none){.mdc-dialog__surface:before{content:none}}.mdc-dialog__title{display:block;line-height:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit);position:relative;flex-shrink:0;box-sizing:border-box;margin:0 0 1px;padding:0 24px 9px}.mdc-dialog__title:before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}.mdc-dialog__title[dir=rtl],[dir=rtl] .mdc-dialog__title{text-align:right}.mdc-dialog--scrollable .mdc-dialog__title{margin-bottom:1px;padding-bottom:15px}.mdc-dialog--fullscreen .mdc-dialog__header{align-items:baseline;border-bottom:1px solid transparent;display:inline-flex;justify-content:space-between;padding:0 16px 9px;z-index:1}.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close{right:-12px}.mdc-dialog--fullscreen .mdc-dialog__title{margin-bottom:0;padding:0;border-bottom:0}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title{border-bottom:0;margin-bottom:0}.mdc-dialog--fullscreen .mdc-dialog__close{top:5px}.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions{border-top:1px solid transparent}.mdc-dialog__content{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size,1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height,1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing,.03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit);flex-grow:1;box-sizing:border-box;margin:0;overflow:auto;-webkit-overflow-scrolling:touch}.mdc-dialog__content>:first-child{margin-top:0}.mdc-dialog__content>:last-child{margin-bottom:0}.mdc-dialog__header+.mdc-dialog__content,.mdc-dialog__title+.mdc-dialog__content{padding-top:0}.mdc-dialog--scrollable .mdc-dialog__title+.mdc-dialog__content{padding-top:8px;padding-bottom:8px}.mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:6px 0 0}.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child{padding:0}.mdc-dialog__actions{display:flex;position:relative;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;box-sizing:border-box;min-height:52px;margin:0;padding:8px;border-top:1px solid transparent}.mdc-dialog--stacked .mdc-dialog__actions{flex-direction:column;align-items:flex-end}.mdc-dialog__button{margin-left:8px;margin-right:0;max-width:100%;text-align:right}.mdc-dialog__button[dir=rtl],[dir=rtl] .mdc-dialog__button{margin-left:0;margin-right:8px}.mdc-dialog__button:first-child,.mdc-dialog__button:first-child[dir=rtl],[dir=rtl] .mdc-dialog__button:first-child{margin-left:0;margin-right:0}.mdc-dialog__button[dir=rtl],[dir=rtl] .mdc-dialog__button{text-align:left}.mdc-dialog--stacked .mdc-dialog__button:not(:first-child){margin-top:12px}.mdc-dialog--closing,.mdc-dialog--open,.mdc-dialog--opening{display:flex}.mdc-dialog--opening .mdc-dialog__scrim{transition:opacity .15s linear}.mdc-dialog--opening .mdc-dialog__container{transition:opacity 75ms linear,transform .15s cubic-bezier(0,0,.2,1) 0ms}.mdc-dialog--closing .mdc-dialog__container,.mdc-dialog--closing .mdc-dialog__scrim{transition:opacity 75ms linear}.mdc-dialog--closing .mdc-dialog__container{transform:none}.mdc-dialog--open .mdc-dialog__scrim{opacity:1}.mdc-dialog--open .mdc-dialog__container{transform:none;opacity:1}.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim{opacity:1;z-index:1}.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim{transition:opacity 75ms linear}.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim{transition:opacity .15s linear}.mdc-dialog__surface-scrim{display:none;opacity:0;position:absolute;width:100%;height:100%}.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim,.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim{display:block}.mdc-dialog-scroll-lock,.mdc-drawer{overflow:hidden}.mdc-drawer{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-top-left-radius:0;border-top-right-radius:0;border-top-right-radius:var(--mdc-shape-large,0);border-bottom-right-radius:0;border-bottom-right-radius:var(--mdc-shape-large,0);border-bottom-left-radius:0;z-index:6;width:256px;display:flex;flex-direction:column;flex-shrink:0;box-sizing:border-box;height:100%;border-right:1px solid;border-color:rgba(0,0,0,.12);transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.mdc-drawer .mdc-drawer__title{color:rgba(0,0,0,.87)}.mdc-drawer .mdc-deprecated-list-group__subheader,.mdc-drawer .mdc-deprecated-list-item__graphic,.mdc-drawer .mdc-drawer__subtitle{color:rgba(0,0,0,.6)}.mdc-drawer .mdc-deprecated-list-item{color:rgba(0,0,0,.87)}.mdc-drawer .mdc-deprecated-list-item--activated{color:rgba(98,0,238,.87)}.mdc-drawer[dir=rtl],[dir=rtl] .mdc-drawer{border-top-left-radius:0;border-top-left-radius:var(--mdc-shape-large,0);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-left-radius:var(--mdc-shape-large,0)}.mdc-drawer .mdc-deprecated-list-item{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content{margin-left:256px;margin-right:0}.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content[dir=rtl],[dir=rtl] .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content{margin-left:0;margin-right:256px}.mdc-drawer[dir=rtl],[dir=rtl] .mdc-drawer{border-right-width:0;border-left-width:1px;border-right-style:none;border-left-style:solid}.mdc-drawer .mdc-deprecated-list-item{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);height:40px;margin:8px;padding:0 8px}.mdc-drawer .mdc-deprecated-list-item:first-child{margin-top:2px}.mdc-drawer .mdc-deprecated-list-item:last-child{margin-bottom:0}.mdc-drawer .mdc-deprecated-list-group__subheader{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);display:block;line-height:normal;margin:0;padding:0 16px}.mdc-drawer .mdc-deprecated-list-group__subheader:before{display:inline-block;width:0;height:24px;content:"";vertical-align:0}.mdc-drawer .mdc-deprecated-list-divider{margin:3px 0 4px}.mdc-drawer .mdc-deprecated-list-item__graphic,.mdc-drawer .mdc-deprecated-list-item__text{pointer-events:none}.mdc-drawer--animate{transform:translateX(-100%)}.mdc-drawer--animate[dir=rtl],[dir=rtl] .mdc-drawer--animate{transform:translateX(100%)}.mdc-drawer--opening{transition-duration:.25s}.mdc-drawer--opening,.mdc-drawer--opening[dir=rtl],[dir=rtl] .mdc-drawer--opening{transform:translateX(0)}.mdc-drawer--closing{transform:translateX(-100%);transition-duration:.2s}.mdc-drawer--closing[dir=rtl],[dir=rtl] .mdc-drawer--closing{transform:translateX(100%)}.mdc-drawer__header{flex-shrink:0;box-sizing:border-box;min-height:64px;padding:0 16px 4px}.mdc-drawer__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit);display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-drawer__title:before{display:inline-block;width:0;height:36px;content:"";vertical-align:0}.mdc-drawer__title:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-drawer__subtitle{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);display:block;margin-top:0;line-height:normal;margin-bottom:0}.mdc-drawer__subtitle:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-drawer__content{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}.mdc-drawer--dismissible{left:0;right:auto;display:none;position:absolute}.mdc-drawer--dismissible[dir=rtl],[dir=rtl] .mdc-drawer--dismissible{left:auto;right:0}.mdc-drawer--dismissible.mdc-drawer--open{display:flex}.mdc-drawer-app-content{position:relative}.mdc-drawer-app-content,.mdc-drawer-app-content[dir=rtl],[dir=rtl] .mdc-drawer-app-content{margin-left:0;margin-right:0}.mdc-drawer--modal{box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);left:0;right:auto;display:none;position:fixed}.mdc-drawer--modal+.mdc-drawer-scrim{background-color:rgba(0,0,0,.32)}.mdc-drawer--modal[dir=rtl],[dir=rtl] .mdc-drawer--modal{left:auto;right:0}.mdc-drawer--modal.mdc-drawer--open{display:flex}.mdc-drawer-scrim{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:5;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.mdc-drawer--open+.mdc-drawer-scrim{display:block}.mdc-drawer--animate+.mdc-drawer-scrim{opacity:0}.mdc-drawer--opening+.mdc-drawer-scrim{transition-duration:.25s;opacity:1}.mdc-drawer--closing+.mdc-drawer-scrim{transition-duration:.2s;opacity:0}.mdc-elevation--z0{box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.mdc-elevation--z1{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12)}.mdc-elevation--z2{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12)}.mdc-elevation--z3{box-shadow:0 3px 3px -2px rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12)}.mdc-elevation--z4{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-elevation--z5{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)}.mdc-elevation--z6{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.mdc-elevation--z7{box-shadow:0 4px 5px -2px rgba(0,0,0,.2),0 7px 10px 1px rgba(0,0,0,.14),0 2px 16px 1px rgba(0,0,0,.12)}.mdc-elevation--z8{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.mdc-elevation--z9{box-shadow:0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12)}.mdc-elevation--z10{box-shadow:0 6px 6px -3px rgba(0,0,0,.2),0 10px 14px 1px rgba(0,0,0,.14),0 4px 18px 3px rgba(0,0,0,.12)}.mdc-elevation--z11{box-shadow:0 6px 7px -4px rgba(0,0,0,.2),0 11px 15px 1px rgba(0,0,0,.14),0 4px 20px 3px rgba(0,0,0,.12)}.mdc-elevation--z12{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mdc-elevation--z13{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 13px 19px 2px rgba(0,0,0,.14),0 5px 24px 4px rgba(0,0,0,.12)}.mdc-elevation--z14{box-shadow:0 7px 9px -4px rgba(0,0,0,.2),0 14px 21px 2px rgba(0,0,0,.14),0 5px 26px 4px rgba(0,0,0,.12)}.mdc-elevation--z15{box-shadow:0 8px 9px -5px rgba(0,0,0,.2),0 15px 22px 2px rgba(0,0,0,.14),0 6px 28px 5px rgba(0,0,0,.12)}.mdc-elevation--z16{box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12)}.mdc-elevation--z17{box-shadow:0 8px 11px -5px rgba(0,0,0,.2),0 17px 26px 2px rgba(0,0,0,.14),0 6px 32px 5px rgba(0,0,0,.12)}.mdc-elevation--z18{box-shadow:0 9px 11px -5px rgba(0,0,0,.2),0 18px 28px 2px rgba(0,0,0,.14),0 7px 34px 6px rgba(0,0,0,.12)}.mdc-elevation--z19{box-shadow:0 9px 12px -6px rgba(0,0,0,.2),0 19px 29px 2px rgba(0,0,0,.14),0 7px 36px 6px rgba(0,0,0,.12)}.mdc-elevation--z20{box-shadow:0 10px 13px -6px rgba(0,0,0,.2),0 20px 31px 3px rgba(0,0,0,.14),0 8px 38px 7px rgba(0,0,0,.12)}.mdc-elevation--z21{box-shadow:0 10px 13px -6px rgba(0,0,0,.2),0 21px 33px 3px rgba(0,0,0,.14),0 8px 40px 7px rgba(0,0,0,.12)}.mdc-elevation--z22{box-shadow:0 10px 14px -6px rgba(0,0,0,.2),0 22px 35px 3px rgba(0,0,0,.14),0 8px 42px 7px rgba(0,0,0,.12)}.mdc-elevation--z23{box-shadow:0 11px 14px -7px rgba(0,0,0,.2),0 23px 36px 3px rgba(0,0,0,.14),0 9px 44px 8px rgba(0,0,0,.12)}.mdc-elevation--z24{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.mdc-elevation-transition{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);will-change:box-shadow}.mdc-fab{display:inline-flex;position:relative;align-items:center;justify-content:center;box-sizing:border-box;width:56px;height:56px;padding:0;border:none;fill:currentColor;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-moz-appearance:none;-webkit-appearance:none;overflow:visible;transition:box-shadow .28s cubic-bezier(.4,0,.2,1),opacity 15ms linear 30ms,transform .27s cubic-bezier(0,0,.2,1) 0ms}.mdc-fab .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-fab::-moz-focus-inner{padding:0;border:0}.mdc-fab.mdc-ripple-upgraded--background-focused,.mdc-fab:hover,.mdc-fab:not(.mdc-ripple-upgraded):focus{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.mdc-fab:active,.mdc-fab:focus:active{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mdc-fab:active,.mdc-fab:focus{outline:none}.mdc-fab:hover{cursor:pointer}.mdc-fab>svg{width:100%}.mdc-fab--mini{width:40px;height:40px}.mdc-fab--extended{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height,2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);border-radius:24px;padding-left:20px;padding-right:20px;width:auto;max-width:100%;height:48px;line-height:normal}.mdc-fab--extended .mdc-fab__ripple{border-radius:24px}.mdc-fab--extended .mdc-fab__icon{margin-left:-8px;margin-right:12px}.mdc-fab--extended .mdc-fab__icon[dir=rtl],.mdc-fab--extended .mdc-fab__label+.mdc-fab__icon,[dir=rtl] .mdc-fab--extended .mdc-fab__icon{margin-left:12px;margin-right:-8px}.mdc-fab--extended .mdc-fab__label+.mdc-fab__icon[dir=rtl],[dir=rtl] .mdc-fab--extended .mdc-fab__label+.mdc-fab__icon{margin-left:-8px;margin-right:12px}.mdc-fab--touch{margin:4px}.mdc-fab--touch .mdc-fab__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}.mdc-fab:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-fab__label{justify-content:flex-start;text-overflow:ellipsis;white-space:nowrap;overflow-x:hidden;overflow-y:visible}.mdc-fab__icon{transition:transform .18s cubic-bezier(0,0,.2,1) 90ms;fill:currentColor;will-change:transform}.mdc-fab .mdc-fab__icon{display:inline-flex;align-items:center;justify-content:center}.mdc-fab--exited{transform:scale(0);opacity:0;transition:opacity 15ms linear .15s,transform .18s cubic-bezier(.4,0,1,1) 0ms}.mdc-fab--exited .mdc-fab__icon{transform:scale(0);transition:transform 135ms cubic-bezier(.4,0,1,1) 0ms}.mdc-fab{background-color:#018786;background-color:var(--mdc-theme-secondary,#018786);box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)}.mdc-fab .mdc-fab__icon{width:24px;height:24px;font-size:24px}.mdc-fab,.mdc-fab:disabled .mdc-fab__icon,.mdc-fab:disabled .mdc-fab__label,.mdc-fab:not(:disabled) .mdc-fab__icon,.mdc-fab:not(:disabled) .mdc-fab__label{color:#fff;color:var(--mdc-theme-on-secondary,#fff)}.mdc-fab:not(.mdc-fab--extended),.mdc-fab:not(.mdc-fab--extended) .mdc-fab__ripple{border-radius:50%}.mdc-fab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-fab .mdc-fab__ripple:after,.mdc-fab .mdc-fab__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-fab .mdc-fab__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-fab .mdc-fab__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-fab.mdc-ripple-upgraded--unbounded .mdc-fab__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-fab.mdc-ripple-upgraded--foreground-activation .mdc-fab__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-fab.mdc-ripple-upgraded--foreground-deactivation .mdc-fab__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-fab .mdc-fab__ripple:after,.mdc-fab .mdc-fab__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-fab.mdc-ripple-upgraded .mdc-fab__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-fab .mdc-fab__ripple:after,.mdc-fab .mdc-fab__ripple:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-secondary,#fff))}.mdc-fab.mdc-ripple-surface--hover .mdc-fab__ripple:before,.mdc-fab:hover .mdc-fab__ripple:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__ripple:before,.mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-fab:not(.mdc-ripple-upgraded) .mdc-fab__ripple:after{transition:opacity .15s linear}.mdc-fab:not(.mdc-ripple-upgraded):active .mdc-fab__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-fab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-fab .mdc-fab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.mdc-fab{z-index:0}.mdc-fab .mdc-fab__ripple:after,.mdc-fab .mdc-fab__ripple:before{z-index:-1;z-index:var(--mdc-ripple-z-index,-1)}.mdc-form-field{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:inline-flex;align-items:center;vertical-align:middle}.mdc-form-field>label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0;order:0}.mdc-form-field>label[dir=rtl],[dir=rtl] .mdc-form-field>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px}.mdc-form-field--nowrap>label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mdc-form-field--align-end>label{margin-left:auto;margin-right:0;padding-left:0;padding-right:4px;order:-1}.mdc-form-field--align-end>label[dir=rtl],[dir=rtl] .mdc-form-field--align-end>label{margin-left:0;margin-right:auto;padding-left:4px;padding-right:0}.mdc-form-field--space-between{justify-content:space-between}.mdc-form-field--space-between>label,.mdc-form-field--space-between>label[dir=rtl],[dir=rtl] .mdc-form-field--space-between>label{margin:0}.mdc-icon-button{display:inline-block;position:relative;box-sizing:border-box;border:none;outline:none;background-color:transparent;fill:currentColor;color:inherit;font-size:24px;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:48px;height:48px;padding:12px}.mdc-icon-button img,.mdc-icon-button svg{width:24px;height:24px}.mdc-icon-button:disabled{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38));cursor:default;pointer-events:none}.mdc-icon-button .mdc-icon-button__touch{position:absolute;top:50%;height:48px;left:50%;width:48px;transform:translate(-50%,-50%)}.mdc-icon-button__icon{display:inline-block}.mdc-icon-button--on .mdc-icon-button__icon,.mdc-icon-button__icon.mdc-icon-button__icon--on{display:none}.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on{display:inline-block}.mdc-icon-button--touch{margin-top:0;margin-bottom:0}.mdc-icon-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-icon-button .mdc-icon-button__ripple:after,.mdc-icon-button .mdc-icon-button__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-icon-button .mdc-icon-button__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-icon-button .mdc-icon-button__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-icon-button.mdc-ripple-upgraded--unbounded .mdc-icon-button__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-icon-button.mdc-ripple-upgraded--foreground-activation .mdc-icon-button__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation .mdc-icon-button__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-icon-button .mdc-icon-button__ripple:after,.mdc-icon-button .mdc-icon-button__ripple:before{top:0;left:0;width:100%;height:100%}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:after,.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-icon-button.mdc-ripple-upgraded .mdc-icon-button__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-icon-button .mdc-icon-button__ripple:after,.mdc-icon-button .mdc-icon-button__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-icon-button.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-icon-button:hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-icon-button:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-icon-button:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-icon-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-icon-button .mdc-icon-button__ripple{pointer-events:none;z-index:1}.mdc-image-list{display:flex;flex-wrap:wrap;margin:0 auto;padding:0}.mdc-image-list__image-aspect-container,.mdc-image-list__item{position:relative;box-sizing:border-box}.mdc-image-list__item{list-style-type:none}.mdc-image-list__image{width:100%}.mdc-image-list__image-aspect-container .mdc-image-list__image{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;background-repeat:no-repeat;background-position:50%;background-size:cover}.mdc-image-list__image-aspect-container{padding-bottom:100%}.mdc-image-list__image{border-radius:0}.mdc-image-list--with-text-protection .mdc-image-list__supporting{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.mdc-image-list__supporting{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87));display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;padding:8px 0;line-height:24px}.mdc-image-list__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-image-list--with-text-protection .mdc-image-list__supporting{position:absolute;bottom:0;width:100%;height:48px;padding:0 16px;background:rgba(0,0,0,.6);color:#fff}.mdc-image-list--masonry{display:block}.mdc-image-list--masonry .mdc-image-list__item{-moz-column-break-inside:avoid;break-inside:avoid-column}.mdc-image-list--masonry .mdc-image-list__image{display:block;height:auto}:root{--mdc-layout-grid-margin-desktop:24px;--mdc-layout-grid-gutter-desktop:24px;--mdc-layout-grid-column-width-desktop:72px;--mdc-layout-grid-margin-tablet:16px;--mdc-layout-grid-gutter-tablet:16px;--mdc-layout-grid-column-width-tablet:72px;--mdc-layout-grid-margin-phone:16px;--mdc-layout-grid-gutter-phone:16px;--mdc-layout-grid-column-width-phone:72px}@media (min-width:840px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:24px;padding:var(--mdc-layout-grid-margin-desktop,24px)}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:16px;padding:var(--mdc-layout-grid-margin-tablet,16px)}}@media (max-width:599px){.mdc-layout-grid{box-sizing:border-box;margin:0 auto;padding:16px;padding:var(--mdc-layout-grid-margin-phone,16px)}}@media (min-width:840px){.mdc-layout-grid__inner{display:flex;flex-flow:row wrap;align-items:stretch;margin:-12px;margin:calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{display:grid;margin:0;grid-gap:24px;grid-gap:var(--mdc-layout-grid-gutter-desktop,24px);grid-template-columns:repeat(12,minmax(0,1fr))}}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid__inner{display:flex;flex-flow:row wrap;align-items:stretch;margin:-8px;margin:calc(var(--mdc-layout-grid-gutter-tablet, 16px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{display:grid;margin:0;grid-gap:16px;grid-gap:var(--mdc-layout-grid-gutter-tablet,16px);grid-template-columns:repeat(8,minmax(0,1fr))}}}@media (max-width:599px){.mdc-layout-grid__inner{display:flex;flex-flow:row wrap;align-items:stretch;margin:-8px;margin:calc(var(--mdc-layout-grid-gutter-phone, 16px)/2*-1)}@supports (display:grid){.mdc-layout-grid__inner{display:grid;margin:0;grid-gap:16px;grid-gap:var(--mdc-layout-grid-gutter-phone,16px);grid-template-columns:repeat(4,minmax(0,1fr))}}}@media (min-width:840px){.mdc-layout-grid__cell{width:calc(33.33333% - 24px);width:calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px));box-sizing:border-box;margin:12px;margin:calc(var(--mdc-layout-grid-gutter-desktop, 24px)/2)}@supports (display:grid){.mdc-layout-grid__cell{width:auto;grid-column-end:span 4;margin:0}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-desktop{width:calc(8.33333% - 24px);width:calc(8.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-desktop{width:auto;grid-column-end:span 1}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-desktop{width:calc(16.66667% - 24px);width:calc(16.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-desktop{width:auto;grid-column-end:span 2}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-desktop{width:calc(25% - 24px);width:calc(25% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-desktop{width:auto;grid-column-end:span 3}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-desktop{width:calc(33.33333% - 24px);width:calc(33.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-desktop{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-desktop{width:calc(41.66667% - 24px);width:calc(41.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-desktop{width:auto;grid-column-end:span 5}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-desktop{width:calc(50% - 24px);width:calc(50% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-desktop{width:auto;grid-column-end:span 6}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-desktop{width:calc(58.33333% - 24px);width:calc(58.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-desktop{width:auto;grid-column-end:span 7}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-desktop{width:calc(66.66667% - 24px);width:calc(66.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-desktop{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-desktop{width:calc(75% - 24px);width:calc(75% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-desktop{width:auto;grid-column-end:span 9}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-desktop{width:calc(83.33333% - 24px);width:calc(83.33333% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-desktop{width:auto;grid-column-end:span 10}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-desktop{width:calc(91.66667% - 24px);width:calc(91.66667% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-desktop{width:auto;grid-column-end:span 11}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-desktop{width:calc(100% - 24px);width:calc(100% - var(--mdc-layout-grid-gutter-desktop, 24px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-desktop{width:auto;grid-column-end:span 12}}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid__cell{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px));box-sizing:border-box;margin:8px;margin:calc(var(--mdc-layout-grid-gutter-tablet, 16px)/2)}@supports (display:grid){.mdc-layout-grid__cell{width:auto;grid-column-end:span 4;margin:0}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-tablet{width:calc(12.5% - 16px);width:calc(12.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-tablet{width:auto;grid-column-end:span 1}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-tablet{width:calc(25% - 16px);width:calc(25% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-tablet{width:auto;grid-column-end:span 2}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-tablet{width:calc(37.5% - 16px);width:calc(37.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-tablet{width:auto;grid-column-end:span 3}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-tablet{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-tablet{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-tablet{width:calc(62.5% - 16px);width:calc(62.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-tablet{width:auto;grid-column-end:span 5}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-tablet{width:calc(75% - 16px);width:calc(75% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-tablet{width:auto;grid-column-end:span 6}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-tablet{width:calc(87.5% - 16px);width:calc(87.5% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-tablet{width:auto;grid-column-end:span 7}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-tablet{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-tablet{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-tablet{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-tablet{width:auto;grid-column-end:span 8}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-tablet{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-tablet, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-tablet{width:auto;grid-column-end:span 8}}}@media (max-width:599px){.mdc-layout-grid__cell{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px));box-sizing:border-box;margin:8px;margin:calc(var(--mdc-layout-grid-gutter-phone, 16px)/2)}@supports (display:grid){.mdc-layout-grid__cell{width:auto;grid-column-end:span 4;margin:0}}.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-phone{width:calc(25% - 16px);width:calc(25% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-1,.mdc-layout-grid__cell--span-1-phone{width:auto;grid-column-end:span 1}}.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-phone{width:calc(50% - 16px);width:calc(50% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-2,.mdc-layout-grid__cell--span-2-phone{width:auto;grid-column-end:span 2}}.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-phone{width:calc(75% - 16px);width:calc(75% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-3,.mdc-layout-grid__cell--span-3-phone{width:auto;grid-column-end:span 3}}.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-4,.mdc-layout-grid__cell--span-4-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-5,.mdc-layout-grid__cell--span-5-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-6,.mdc-layout-grid__cell--span-6-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-7,.mdc-layout-grid__cell--span-7-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-8,.mdc-layout-grid__cell--span-8-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-9,.mdc-layout-grid__cell--span-9-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-10,.mdc-layout-grid__cell--span-10-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-11,.mdc-layout-grid__cell--span-11-phone{width:auto;grid-column-end:span 4}}.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-phone{width:calc(100% - 16px);width:calc(100% - var(--mdc-layout-grid-gutter-phone, 16px))}@supports (display:grid){.mdc-layout-grid__cell--span-12,.mdc-layout-grid__cell--span-12-phone{width:auto;grid-column-end:span 4}}}.mdc-layout-grid__cell--order-1{order:1}.mdc-layout-grid__cell--order-2{order:2}.mdc-layout-grid__cell--order-3{order:3}.mdc-layout-grid__cell--order-4{order:4}.mdc-layout-grid__cell--order-5{order:5}.mdc-layout-grid__cell--order-6{order:6}.mdc-layout-grid__cell--order-7{order:7}.mdc-layout-grid__cell--order-8{order:8}.mdc-layout-grid__cell--order-9{order:9}.mdc-layout-grid__cell--order-10{order:10}.mdc-layout-grid__cell--order-11{order:11}.mdc-layout-grid__cell--order-12{order:12}.mdc-layout-grid__cell--align-top{align-self:flex-start}@supports (display:grid){.mdc-layout-grid__cell--align-top{align-self:start}}.mdc-layout-grid__cell--align-middle{align-self:center}.mdc-layout-grid__cell--align-bottom{align-self:flex-end}@supports (display:grid){.mdc-layout-grid__cell--align-bottom{align-self:end}}@media (min-width:840px){.mdc-layout-grid--fixed-column-width{width:1176px;width:calc(var(--mdc-layout-grid-column-width-desktop, 72px)*12 + var(--mdc-layout-grid-gutter-desktop, 24px)*11 + var(--mdc-layout-grid-margin-desktop, 24px)*2)}}@media (min-width:600px) and (max-width:839px){.mdc-layout-grid--fixed-column-width{width:720px;width:calc(var(--mdc-layout-grid-column-width-tablet, 72px)*8 + var(--mdc-layout-grid-gutter-tablet, 16px)*7 + var(--mdc-layout-grid-margin-tablet, 16px)*2)}}@media (max-width:599px){.mdc-layout-grid--fixed-column-width{width:368px;width:calc(var(--mdc-layout-grid-column-width-phone, 72px)*4 + var(--mdc-layout-grid-gutter-phone, 16px)*3 + var(--mdc-layout-grid-margin-phone, 16px)*2)}}.mdc-layout-grid--align-left{margin-right:auto;margin-left:0}.mdc-layout-grid--align-right{margin-right:0;margin-left:auto}@keyframes mdc-linear-progress-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%);transform:translateX(var(--mdc-linear-progress-primary-half,83.67142%))}to{transform:translateX(200.611057%);transform:translateX(var(--mdc-linear-progress-primary-full,200.611057%))}}@keyframes mdc-linear-progress-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}to{transform:scaleX(.08)}}@keyframes mdc-linear-progress-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%);transform:translateX(var(--mdc-linear-progress-secondary-quarter,37.651913%))}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%);transform:translateX(var(--mdc-linear-progress-secondary-half,84.386165%))}to{transform:translateX(160.277782%);transform:translateX(var(--mdc-linear-progress-secondary-full,160.277782%))}}@keyframes mdc-linear-progress-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.205028,.057051,.57661,.453971);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.152313,.196432,.648374,1.004315);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.257759,-.003163,.211762,1.38179);transform:scaleX(.72796)}to{transform:scaleX(.08)}}@keyframes mdc-linear-progress-buffering{0%{transform:rotate(180deg) translateX(-10px)}}@keyframes mdc-linear-progress-primary-indeterminate-translate-reverse{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-83.67142%);transform:translateX(var(--mdc-linear-progress-primary-half-neg,-83.67142%))}to{transform:translateX(-200.611057%);transform:translateX(var(--mdc-linear-progress-primary-full-neg,-200.611057%))}}@keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(-37.651913%);transform:translateX(var(--mdc-linear-progress-secondary-quarter-neg,-37.651913%))}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(-84.386165%);transform:translateX(var(--mdc-linear-progress-secondary-half-neg,-84.386165%))}to{transform:translateX(-160.277782%);transform:translateX(var(--mdc-linear-progress-secondary-full-neg,-160.277782%))}}@keyframes mdc-linear-progress-buffering-reverse{0%{transform:translateX(-10px)}}.mdc-linear-progress{position:relative;width:100%;height:4px;transform:translateZ(0);outline:1px solid transparent;overflow:hidden;transition:opacity .25s cubic-bezier(.4,0,.6,1) 0ms}.mdc-linear-progress__bar{position:absolute;width:100%;height:100%;animation:none;transform-origin:top left;transition:transform .25s cubic-bezier(.4,0,.6,1) 0ms}.mdc-linear-progress__bar-inner{display:inline-block;position:absolute;width:100%;animation:none;border-top:4px solid}.mdc-linear-progress__buffer{display:flex;position:absolute;width:100%;height:100%}.mdc-linear-progress__buffer-dots{background-repeat:repeat-x;background-size:10px 4px;flex:auto;transform:rotate(180deg);animation:mdc-linear-progress-buffering .25s linear infinite}.mdc-linear-progress__buffer-bar{flex:0 1 100%;transition:flex-basis .25s cubic-bezier(.4,0,.6,1) 0ms}.mdc-linear-progress__primary-bar{transform:scaleX(0)}.mdc-linear-progress__secondary-bar{display:none}.mdc-linear-progress--indeterminate .mdc-linear-progress__bar{transition:none}.mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar{left:-145.166611%}.mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar{left:-54.888891%;display:block}.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar{animation:mdc-linear-progress-primary-indeterminate-translate 2s linear infinite}.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar>.mdc-linear-progress__bar-inner{animation:mdc-linear-progress-primary-indeterminate-scale 2s linear infinite}.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar{animation:mdc-linear-progress-secondary-indeterminate-translate 2s linear infinite}.mdc-linear-progress--indeterminate.mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar>.mdc-linear-progress__bar-inner{animation:mdc-linear-progress-secondary-indeterminate-scale 2s linear infinite}.mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__bar{right:0;transform-origin:center right}.mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__primary-bar{animation-name:mdc-linear-progress-primary-indeterminate-translate-reverse}.mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--animation-ready .mdc-linear-progress__secondary-bar{animation-name:mdc-linear-progress-secondary-indeterminate-translate-reverse}.mdc-linear-progress[dir=rtl]:not([dir=ltr]) .mdc-linear-progress__buffer-dots,[dir=rtl] .mdc-linear-progress:not([dir=ltr]) .mdc-linear-progress__buffer-dots{animation:mdc-linear-progress-buffering-reverse .25s linear infinite;transform:rotate(0)}.mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__primary-bar{right:-145.166611%;left:auto}.mdc-linear-progress[dir=rtl]:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar,[dir=rtl] .mdc-linear-progress:not([dir=ltr]).mdc-linear-progress--indeterminate .mdc-linear-progress__secondary-bar{right:-54.888891%;left:auto}.mdc-linear-progress--closed{opacity:0}.mdc-linear-progress--closed-animation-off.mdc-linear-progress--indeterminate .mdc-linear-progress__bar,.mdc-linear-progress--closed-animation-off.mdc-linear-progress--indeterminate .mdc-linear-progress__bar .mdc-linear-progress__bar-inner,.mdc-linear-progress--closed-animation-off .mdc-linear-progress__buffer-dots{animation:none}.mdc-linear-progress__bar-inner{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-linear-progress__buffer-dots{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23e6e6e6'/%3E%3C/svg%3E")}.mdc-linear-progress__buffer-bar{background-color:#e6e6e6}.mdc-deprecated-list{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);line-height:1.5rem;margin:0;padding:8px 0;list-style-type:none;color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.mdc-deprecated-list:focus{outline:none}.mdc-deprecated-list-item__secondary-text{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.mdc-deprecated-list-item__graphic{background-color:transparent;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.mdc-deprecated-list-item__meta{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38))}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__text{opacity:.38}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__secondary-text,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__text{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-deprecated-list-item--activated,.mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic,.mdc-deprecated-list-item--selected,.mdc-deprecated-list-item--selected .mdc-deprecated-list-item__graphic{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-deprecated-list--dense{padding-top:4px;padding-bottom:4px;font-size:.812rem}.mdc-deprecated-list-item{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;padding:0 16px;height:48px}.mdc-deprecated-list-item:focus{outline:none}.mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused:before,.mdc-deprecated-list-item:not(.mdc-deprecated-list-item--selected):focus:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-deprecated-list-item.mdc-deprecated-list-item--selected:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:3px double transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px;height:56px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px;height:56px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px;height:56px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--image-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px;height:72px}.mdc-deprecated-list--image-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-item{padding-left:16px;padding-right:16px}.mdc-deprecated-list--video-list .mdc-deprecated-list-item{padding-left:0;padding-right:16px;height:72px}.mdc-deprecated-list--video-list .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-item{padding-left:16px;padding-right:0}.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:20px;height:20px}.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list-item__graphic{flex-shrink:0;align-items:center;justify-content:center;fill:currentColor;-o-object-fit:cover;object-fit:cover;margin-left:0;margin-right:32px;width:24px;height:24px}.mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list-item__graphic{margin-left:32px;margin-right:0}.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:32px;width:24px;height:24px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic{margin-left:32px;margin-right:0}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:40px;height:40px;border-radius:50%}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:40px;height:40px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list--image-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:56px;height:56px}.mdc-deprecated-list--image-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list--video-list .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:100px;height:56px}.mdc-deprecated-list--video-list .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}.mdc-deprecated-list .mdc-deprecated-list-item__graphic{display:inline-flex}.mdc-deprecated-list-item__meta{margin-left:auto;margin-right:0}.mdc-deprecated-list-item__meta:not(.material-icons){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.mdc-deprecated-list-item[dir=rtl] .mdc-deprecated-list-item__meta,[dir=rtl] .mdc-deprecated-list-item .mdc-deprecated-list-item__meta{margin-left:0;margin-right:auto}.mdc-deprecated-list-item__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-deprecated-list-item__text[for]{pointer-events:none}.mdc-deprecated-list-item__primary-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-deprecated-list-item__primary-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-deprecated-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list--image-list .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__primary-text,.mdc-deprecated-list--video-list .mdc-deprecated-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__primary-text:before,.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__primary-text:before,.mdc-deprecated-list--image-list .mdc-deprecated-list-item__primary-text:before,.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__primary-text:before,.mdc-deprecated-list--video-list .mdc-deprecated-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item__primary-text:after,.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__primary-text:after,.mdc-deprecated-list--image-list .mdc-deprecated-list-item__primary-text:after,.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item__primary-text:after,.mdc-deprecated-list--video-list .mdc-deprecated-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-deprecated-list--dense .mdc-deprecated-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-deprecated-list--dense .mdc-deprecated-list-item__primary-text:before{display:inline-block;width:0;height:24px;content:"";vertical-align:0}.mdc-deprecated-list--dense .mdc-deprecated-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-deprecated-list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal}.mdc-deprecated-list-item__secondary-text:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-deprecated-list--dense .mdc-deprecated-list-item__secondary-text{font-size:inherit}.mdc-deprecated-list--dense .mdc-deprecated-list-item{height:40px}.mdc-deprecated-list--two-line .mdc-deprecated-list-item__text{align-self:flex-start}.mdc-deprecated-list--two-line .mdc-deprecated-list-item{height:64px}.mdc-deprecated-list--two-line.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--icon-list .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--image-list .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--video-list .mdc-deprecated-list-item{height:72px}.mdc-deprecated-list--two-line.mdc-deprecated-list--icon-list .mdc-deprecated-list-item__graphic{align-self:flex-start;margin-top:16px}.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense .mdc-deprecated-list-item,.mdc-deprecated-list--two-line.mdc-deprecated-list--dense .mdc-deprecated-list-item{height:60px}.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic{margin-left:0;margin-right:16px;width:36px;height:36px}.mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list.mdc-deprecated-list--dense .mdc-deprecated-list-item__graphic{margin-left:16px;margin-right:0}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item{cursor:pointer}a.mdc-deprecated-list-item{color:inherit;text-decoration:none}.mdc-deprecated-list-divider{height:0;margin:0;border:none;border-bottom:1px solid;border-bottom-color:rgba(0,0,0,.12)}.mdc-deprecated-list-divider--padded{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list-divider--padded[dir=rtl],[dir=rtl] .mdc-deprecated-list-divider--padded{margin-left:0;margin-right:16px}.mdc-deprecated-list-divider--inset{margin-left:72px;margin-right:0;width:calc(100% - 72px)}.mdc-deprecated-list-divider--inset[dir=rtl],[dir=rtl] .mdc-deprecated-list-divider--inset{margin-left:0;margin-right:72px}.mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded{margin-left:72px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded[dir=rtl],[dir=rtl] .mdc-deprecated-list-divider--inset.mdc-deprecated-list-divider--padded{margin-left:0;margin-right:72px}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:16px}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:16px}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading{margin-left:72px;margin-right:0;width:calc(100% - 72px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:72px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:72px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:72px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--icon-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading{margin-left:72px;margin-right:0;width:calc(100% - 72px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:72px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:72px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:72px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--avatar-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading{margin-left:72px;margin-right:0;width:calc(100% - 72px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:72px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:72px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:72px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--thumbnail-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading{margin-left:88px;margin-right:0;width:calc(100% - 88px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:88px}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:88px;margin-right:0;width:calc(100% - 104px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:88px}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:16px;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:16px;margin-right:0;width:calc(100% - 32px)}.mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--image-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:16px}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading{margin-left:116px;margin-right:0;width:calc(100% - 116px)}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading{margin-left:0;margin-right:116px}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-trailing{width:calc(100% - 16px)}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:116px;margin-right:0;width:calc(100% - 132px)}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing{margin-left:0;margin-right:116px}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:0;width:100%}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--padding{margin-left:0;margin-right:0}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:0;width:calc(100% - 16px)}.mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding[dir=rtl],[dir=rtl] .mdc-deprecated-list--video-list .mdc-deprecated-list-divider--inset-leading.mdc-deprecated-list-divider--inset-trailing.mdc-deprecated-list-divider--inset-padding{margin-left:0;margin-right:0}.mdc-deprecated-list-group .mdc-deprecated-list{padding:0}.mdc-deprecated-list-group__subheader{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);margin:.75rem 16px}.mdc-list-item__primary-text{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}.mdc-list-item__secondary-text{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.mdc-list-item__overline-text{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38))}.mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-list-item--with-trailing-icon .mdc-list-item__end{background-color:transparent;color:rgba(0,0,0,.38);color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))}.mdc-list-item__end{color:rgba(0,0,0,.38);color:var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38))}.mdc-list-item--disabled .mdc-list-item__content,.mdc-list-item--disabled .mdc-list-item__end,.mdc-list-item--disabled .mdc-list-item__start{opacity:.38}.mdc-list-item--disabled.mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-list-item--disabled.mdc-list-item--with-trailing-icon .mdc-list-item__end,.mdc-list-item--disabled.mdc-list-item--with-trailing-meta .mdc-list-item__end,.mdc-list-item--disabled .mdc-list-item__overline-text,.mdc-list-item--disabled .mdc-list-item__primary-text,.mdc-list-item--disabled .mdc-list-item__secondary-text{color:#000;color:var(--mdc-theme-on-surface,#000)}.mdc-list-item--activated.mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-list-item--activated .mdc-list-item__primary-text,.mdc-list-item--selected.mdc-list-item--with-leading-icon .mdc-list-item__start,.mdc-list-item--selected .mdc-list-item__primary-text{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-deprecated-list-group__subheader{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-list-divider:after{content:"";display:block;border-bottom:1px solid #fff}}.mdc-list{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);line-height:1.5rem;margin:0;padding:8px 0;list-style-type:none}.mdc-list:focus{outline:none}.mdc-list-item{display:flex;position:relative;align-items:center;justify-content:flex-start;overflow:hidden;padding:0;align-items:stretch;cursor:pointer}.mdc-list-item:focus{outline:none}.mdc-list-item.mdc-list-item--with-one-line{height:48px}.mdc-list-item.mdc-list-item--with-two-lines{height:64px}.mdc-list-item.mdc-list-item--with-three-lines{height:88px}.mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__start{align-self:center;margin-top:0}.mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__start,.mdc-list-item.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:16px}.mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__end,.mdc-list-item.mdc-list-item--with-two-lines .mdc-list-item__end{align-self:center;margin-top:0}.mdc-list-item.mdc-list-item--with-three-lines .mdc-list-item__end{align-self:flex-start;margin-top:16px}.mdc-list-item.mdc-list-item--disabled,.mdc-list-item.mdc-list-item--non-interactive{cursor:auto}.mdc-list-item.mdc-ripple-upgraded--background-focused:before,.mdc-list-item:not(.mdc-list-item--selected):focus:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-list-item.mdc-list-item--selected:before{border:3px double transparent;border-radius:inherit}.mdc-list-item.mdc-list-item--selected:before,.mdc-list-item.mdc-list-item--selected:focus:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;content:"";pointer-events:none}.mdc-list-item.mdc-list-item--selected:focus:before{border:3px solid transparent;border-radius:inherit}a.mdc-list-item{color:inherit;text-decoration:none}.mdc-list-item__start{fill:currentColor}.mdc-list-item__end,.mdc-list-item__start{flex-shrink:0;pointer-events:none}.mdc-list-item__content{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;align-self:center;flex:1;pointer-events:none}.mdc-list-item--with-three-lines .mdc-list-item__content,.mdc-list-item--with-two-lines .mdc-list-item__content{align-self:stretch}.mdc-list-item__content[for]{pointer-events:none}.mdc-list-item__primary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-list-item--with-three-lines .mdc-list-item__primary-text,.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-three-lines .mdc-list-item__primary-text:before,.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-three-lines .mdc-list-item__primary-text:after,.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item__secondary-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;margin-top:0;line-height:normal}.mdc-list-item__secondary-text:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list-item--with-three-lines .mdc-list-item__secondary-text{white-space:normal;line-height:20px}.mdc-list-item--with-overline .mdc-list-item__secondary-text{white-space:nowrap;line-height:auto}.mdc-list-item__overline-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-overline-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-overline-font-size,.75rem);line-height:2rem;line-height:var(--mdc-typography-overline-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-overline-font-weight,500);letter-spacing:.1666666667em;letter-spacing:var(--mdc-typography-overline-letter-spacing,.1666666667em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-overline-text-decoration,none);text-decoration:var(--mdc-typography-overline-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-overline-text-transform,uppercase);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:24px;content:"";vertical-align:0}.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-three-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-three-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-three-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-avatar.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-avatar.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-avatar .mdc-list-item__start,.mdc-list-item--with-leading-avatar .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-avatar .mdc-list-item__start{margin-left:16px;margin-right:16px}.mdc-list-item--with-leading-avatar .mdc-list-item__start{width:40px;height:40px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-avatar .mdc-list-item__start{border-radius:50%}.mdc-list-item--with-leading-icon .mdc-list-item__start{width:24px;height:24px}.mdc-list-item--with-leading-icon.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-icon.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-icon.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-icon .mdc-list-item__start{margin-left:16px;margin-right:32px}.mdc-list-item--with-leading-icon .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-icon .mdc-list-item__start{margin-left:32px;margin-right:16px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-thumbnail.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-thumbnail.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-thumbnail.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-thumbnail .mdc-list-item__start,.mdc-list-item--with-leading-thumbnail .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-thumbnail .mdc-list-item__start{margin-left:16px;margin-right:16px}.mdc-list-item--with-leading-thumbnail .mdc-list-item__start{width:40px;height:40px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-thumbnail.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-image.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-image.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-image.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-image .mdc-list-item__start,.mdc-list-item--with-leading-image .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-image .mdc-list-item__start{margin-left:16px;margin-right:16px}.mdc-list-item--with-leading-image .mdc-list-item__start{width:56px;height:56px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-image.mdc-list-item--with-one-line,.mdc-list-item--with-leading-image.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:8px}.mdc-list-item--with-leading-video.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-video.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-video.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-video .mdc-list-item__start{margin-left:0;margin-right:16px}.mdc-list-item--with-leading-video .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-video .mdc-list-item__start{margin-left:16px;margin-right:0}.mdc-list-item--with-leading-video .mdc-list-item__start{width:100px;height:56px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-video.mdc-list-item--with-one-line,.mdc-list-item--with-leading-video.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-checkbox.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-checkbox.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-checkbox.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-checkbox .mdc-list-item__start{margin-left:8px;margin-right:24px}.mdc-list-item--with-leading-checkbox .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-checkbox .mdc-list-item__start{margin-left:24px;margin-right:8px}.mdc-list-item--with-leading-checkbox .mdc-list-item__start{width:40px;height:40px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:8px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-radio.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-radio.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-radio.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-radio .mdc-list-item__start{margin-left:8px;margin-right:24px}.mdc-list-item--with-leading-radio .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-radio .mdc-list-item__start{margin-left:24px;margin-right:8px}.mdc-list-item--with-leading-radio .mdc-list-item__start{width:40px;height:40px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:8px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-radio.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-leading-switch.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-leading-switch.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-switch.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-leading-switch .mdc-list-item__start,.mdc-list-item--with-leading-switch .mdc-list-item__start[dir=rtl],[dir=rtl] .mdc-list-item--with-leading-switch .mdc-list-item__start{margin-left:16px;margin-right:16px}.mdc-list-item--with-leading-switch .mdc-list-item__start{width:36px;height:20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__start{align-self:flex-start;margin-top:16px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__primary-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__overline-text{display:block;margin-top:0;line-height:normal;margin-bottom:-20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__overline-text:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines .mdc-list-item__overline-text:after{display:inline-block;width:0;height:20px;content:"";vertical-align:-20px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end:before{display:inline-block;width:0;height:32px;content:"";vertical-align:0}.mdc-list-item--with-leading-switch.mdc-list-item--with-one-line{height:56px}.mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines{height:72px}.mdc-list-item--with-trailing-icon.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-icon.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-icon.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-icon .mdc-list-item__end,.mdc-list-item--with-trailing-icon .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-icon .mdc-list-item__end{margin-left:16px;margin-right:16px}.mdc-list-item--with-trailing-icon .mdc-list-item__end{width:24px;height:24px}.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end,.mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end{align-self:flex-start}.mdc-list-item--with-trailing-meta.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-meta.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-meta.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-meta .mdc-list-item__end{margin-left:28px;margin-right:16px}.mdc-list-item--with-trailing-meta .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-meta .mdc-list-item__end{margin-left:16px;margin-right:28px}.mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-trailing-meta.mdc-list-item--with-two-lines .mdc-list-item__end:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-trailing-meta.mdc-list-item--with-three-lines .mdc-list-item__end:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-list-item--with-trailing-meta .mdc-list-item__end{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.mdc-list-item--with-trailing-checkbox.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-checkbox.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-checkbox.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-checkbox .mdc-list-item__end{margin-left:24px;margin-right:8px}.mdc-list-item--with-trailing-checkbox .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-checkbox .mdc-list-item__end{margin-left:8px;margin-right:24px}.mdc-list-item--with-trailing-checkbox .mdc-list-item__end{width:40px;height:40px}.mdc-list-item--with-trailing-checkbox.mdc-list-item--with-three-lines .mdc-list-item__end{align-self:flex-start;margin-top:8px}.mdc-list-item--with-trailing-radio.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-radio.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-radio.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-radio .mdc-list-item__end{margin-left:24px;margin-right:8px}.mdc-list-item--with-trailing-radio .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-radio .mdc-list-item__end{margin-left:8px;margin-right:24px}.mdc-list-item--with-trailing-radio .mdc-list-item__end{width:40px;height:40px}.mdc-list-item--with-trailing-radio.mdc-list-item--with-three-lines .mdc-list-item__end{align-self:flex-start;margin-top:8px}.mdc-list-item--with-trailing-switch.mdc-list-item{padding-left:auto;padding-right:0}.mdc-list-item--with-trailing-switch.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-switch.mdc-list-item{padding-left:0;padding-right:auto}.mdc-list-item--with-trailing-switch .mdc-list-item__end,.mdc-list-item--with-trailing-switch .mdc-list-item__end[dir=rtl],[dir=rtl] .mdc-list-item--with-trailing-switch .mdc-list-item__end{margin-left:16px;margin-right:16px}.mdc-list-item--with-trailing-switch .mdc-list-item__end{width:36px;height:20px}.mdc-list-item--with-trailing-switch.mdc-list-item--with-three-lines .mdc-list-item__end{align-self:flex-start;margin-top:16px}.mdc-list-item--with-overline.mdc-list-item--with-two-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-overline.mdc-list-item--with-two-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list-item--with-overline.mdc-list-item--with-three-lines .mdc-list-item__primary-text{display:block;margin-top:0;line-height:normal}.mdc-list-item--with-overline.mdc-list-item--with-three-lines .mdc-list-item__primary-text:before{display:inline-block;width:0;height:20px;content:"";vertical-align:0}.mdc-list-item,.mdc-list-item[dir=rtl],[dir=rtl] .mdc-list-item{padding-left:16px;padding-right:16px}.mdc-list-group .mdc-deprecated-list{padding:0}.mdc-list-group__subheader{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);margin:.75rem 16px}.mdc-list-divider{background-color:rgba(0,0,0,.12);height:1px;padding:0;background-clip:content-box}.mdc-list-divider--with-leading-avatar.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-icon.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-image.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-radio.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-switch.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-text.mdc-list-divider--with-leading-inset,.mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-leading-inset,.mdc-list-divider.mdc-list-divider--with-leading-inset{padding-left:16px;padding-right:auto}.mdc-list-divider--with-leading-avatar.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-avatar.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-icon.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-icon.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-image.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-image.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-radio.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-radio.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-switch.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-switch.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-text.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-text.mdc-list-divider--with-trailing-inset,.mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-trailing-inset,.mdc-list-divider.mdc-list-divider--with-leading-inset[dir=rtl],.mdc-list-divider.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-avatar.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-icon.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-image.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-radio.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-switch.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-text.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-leading-inset,[dir=rtl] .mdc-list-divider.mdc-list-divider--with-leading-inset{padding-left:auto;padding-right:16px}.mdc-list-divider--with-leading-avatar.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-icon.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-image.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-radio.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-switch.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-text.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-trailing-inset[dir=rtl],.mdc-list-divider.mdc-list-divider--with-trailing-inset[dir=rtl],[dir=rtl] .mdc-list-divider--with-leading-avatar.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-checkbox.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-icon.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-image.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-radio.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-switch.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-text.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider--with-leading-thumbnail.mdc-list-divider--with-trailing-inset,[dir=rtl] .mdc-list-divider.mdc-list-divider--with-trailing-inset{padding-left:16px;padding-right:auto}.mdc-list-divider--with-leading-video.mdc-list-divider--with-leading-inset{padding-left:0;padding-right:auto}.mdc-list-divider--with-leading-video.mdc-list-divider--with-leading-inset[dir=rtl],[dir=rtl] .mdc-list-divider--with-leading-video.mdc-list-divider--with-leading-inset{padding-left:auto;padding-right:0}.mdc-list-divider[dir=rtl],[dir=rtl] .mdc-list-divider{padding:0}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--unbounded .mdc-deprecated-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--unbounded .mdc-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--foreground-activation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--foreground-deactivation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:hover .mdc-deprecated-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:hover .mdc-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-deprecated-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-deprecated-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:hover .mdc-deprecated-list-item__ripple:before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity,.16)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated .mdc-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:hover .mdc-list-item__ripple:before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity,.16)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-deprecated-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:hover .mdc-deprecated-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-deprecated-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-deprecated-list-item__ripple:after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-list-item__ripple:before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-list-item__ripple:after,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected .mdc-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:hover .mdc-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.2)}:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple,:not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-list-item__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-deprecated-list-item--disabled{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--unbounded .mdc-deprecated-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--foreground-deactivation .mdc-deprecated-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--unbounded .mdc-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--foreground-activation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--foreground-deactivation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-deprecated-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple:before,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:after,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--background-focused .mdc-deprecated-list-item__ripple:before,.mdc-deprecated-list-item--disabled.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,.mdc-deprecated-list-item--disabled:not(.mdc-ripple-upgraded):focus .mdc-deprecated-list-item__ripple:before,.mdc-deprecated-list-item--disabled:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-deprecated-list-item--disabled .mdc-deprecated-list-item__ripple,.mdc-deprecated-list-item--disabled .mdc-list-item__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}:not(.mdc-list-item--disabled).mdc-list-item{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded--unbounded .mdc-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded--foreground-activation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded--foreground-deactivation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded .mdc-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item:hover .mdc-list-item__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}:not(.mdc-list-item--disabled).mdc-list-item:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-list-item--disabled).mdc-list-item:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}:not(.mdc-list-item--disabled).mdc-list-item.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}:not(.mdc-list-item--disabled).mdc-list-item--activated .mdc-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity,.12)}:not(.mdc-list-item--disabled).mdc-list-item--activated .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item--activated .mdc-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-list-item--disabled).mdc-list-item--activated.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item--activated:hover .mdc-list-item__ripple:before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity,.16)}:not(.mdc-list-item--disabled).mdc-list-item--activated.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item--activated:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}:not(.mdc-list-item--disabled).mdc-list-item--activated:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-list-item--disabled).mdc-list-item--activated:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}:not(.mdc-list-item--disabled).mdc-list-item--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}:not(.mdc-list-item--disabled).mdc-list-item--selected .mdc-list-item__ripple:before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity,.08)}:not(.mdc-list-item--disabled).mdc-list-item--selected .mdc-list-item__ripple:after,:not(.mdc-list-item--disabled).mdc-list-item--selected .mdc-list-item__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}:not(.mdc-list-item--disabled).mdc-list-item--selected.mdc-ripple-surface--hover .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item--selected:hover .mdc-list-item__ripple:before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity,.12)}:not(.mdc-list-item--disabled).mdc-list-item--selected.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,:not(.mdc-list-item--disabled).mdc-list-item--selected:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity,.2)}:not(.mdc-list-item--disabled).mdc-list-item--selected:not(.mdc-ripple-upgraded) .mdc-list-item__ripple:after{transition:opacity .15s linear}:not(.mdc-list-item--disabled).mdc-list-item--selected:not(.mdc-ripple-upgraded):active .mdc-list-item__ripple:after{transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity,.2)}:not(.mdc-list-item--disabled).mdc-list-item--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.2)}:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-list-item--disabled{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-list-item--disabled .mdc-list-item__ripple:after,.mdc-list-item--disabled .mdc-list-item__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-list-item--disabled .mdc-list-item__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-list-item--disabled .mdc-list-item__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-list-item--disabled.mdc-ripple-upgraded--unbounded .mdc-list-item__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-list-item--disabled.mdc-ripple-upgraded--foreground-activation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-list-item--disabled.mdc-ripple-upgraded--foreground-deactivation .mdc-list-item__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-list-item--disabled .mdc-list-item__ripple:after,.mdc-list-item--disabled .mdc-list-item__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-list-item--disabled.mdc-ripple-upgraded .mdc-list-item__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-list-item--disabled .mdc-list-item__ripple:after,.mdc-list-item--disabled .mdc-list-item__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-list-item--disabled.mdc-ripple-upgraded--background-focused .mdc-list-item__ripple:before,.mdc-list-item--disabled:not(.mdc-ripple-upgraded):focus .mdc-list-item__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-list-item--disabled .mdc-list-item__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-menu{min-width:112px;min-width:var(--mdc-menu-min-width,112px)}.mdc-menu .mdc-deprecated-list-item__graphic,.mdc-menu .mdc-deprecated-list-item__meta{color:rgba(0,0,0,.87)}.mdc-menu .mdc-deprecated-list{color:rgba(0,0,0,.87);position:relative}.mdc-menu .mdc-deprecated-list .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-menu .mdc-deprecated-list-divider{margin:8px 0}.mdc-menu .mdc-deprecated-list-item{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mdc-menu .mdc-deprecated-list-item--disabled{cursor:auto}.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__graphic,.mdc-menu a.mdc-deprecated-list-item .mdc-deprecated-list-item__text{pointer-events:none}.mdc-menu__selection-group{padding:0;fill:currentColor}.mdc-menu__selection-group .mdc-deprecated-list-item{padding-left:56px;padding-right:16px}.mdc-menu__selection-group .mdc-deprecated-list-item[dir=rtl],[dir=rtl] .mdc-menu__selection-group .mdc-deprecated-list-item{padding-left:16px;padding-right:56px}.mdc-menu__selection-group .mdc-menu__selection-group-icon{left:16px;right:auto;display:none;position:absolute;top:50%;transform:translateY(-50%)}.mdc-menu__selection-group .mdc-menu__selection-group-icon[dir=rtl],[dir=rtl] .mdc-menu__selection-group .mdc-menu__selection-group-icon{left:auto;right:16px}.mdc-menu-item--selected .mdc-menu__selection-group-icon{display:inline}.mdc-menu-surface{display:none;position:absolute;box-sizing:border-box;max-width:calc(100vw - 32px);max-width:var(--mdc-menu-max-width,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:var(--mdc-menu-max-height,calc(100vh - 32px));margin:0;padding:0;transform:scale(1);transform-origin:top left;opacity:0;overflow:auto;will-change:transform,opacity;z-index:8;transition:opacity .03s linear,transform .12s cubic-bezier(0,0,.2,1),height .25s cubic-bezier(0,0,.2,1);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);transform-origin-left:top left;transform-origin-right:top right}.mdc-menu-surface:focus{outline:none}.mdc-menu-surface--animating-open{display:inline-block;transform:scale(.8);opacity:0}.mdc-menu-surface--open{display:inline-block;transform:scale(1);opacity:1}.mdc-menu-surface--animating-closed{display:inline-block;opacity:0;transition:opacity 75ms linear}.mdc-menu-surface[dir=rtl],[dir=rtl] .mdc-menu-surface{transform-origin-left:top right;transform-origin-right:top left}.mdc-menu-surface--anchor{position:relative;overflow:visible}.mdc-menu-surface--fixed{position:fixed}.mdc-menu-surface--fullwidth{width:100%}.mdc-radio{padding:10px}.mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:rgba(0,0,0,.54)}.mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:#018786;border-color:var(--mdc-theme-secondary,#018786)}.mdc-radio .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:rgba(0,0,0,.38)}.mdc-radio .mdc-radio__background:before{background-color:#018786;background-color:var(--mdc-theme-secondary,#018786);top:-10px;left:-10px;width:40px;height:40px}.mdc-radio .mdc-radio__native-control{top:0;right:0;left:0;width:40px;height:40px}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-radio .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:GrayText}}.mdc-radio{flex:0 0 auto;box-sizing:content-box;cursor:pointer;will-change:opacity,transform,border-color,color}.mdc-radio,.mdc-radio__background{display:inline-block;position:relative;width:20px;height:20px}.mdc-radio__background{box-sizing:border-box}.mdc-radio__background:before{position:absolute;transform:scale(0);border-radius:50%;opacity:0;pointer-events:none;content:"";transition:opacity .12s cubic-bezier(.4,0,.6,1) 0ms,transform .12s cubic-bezier(.4,0,.6,1) 0ms}.mdc-radio__outer-circle{border-width:2px;transition:border-color .12s cubic-bezier(.4,0,.6,1) 0ms}.mdc-radio__inner-circle,.mdc-radio__outer-circle{position:absolute;top:0;left:0;box-sizing:border-box;width:100%;height:100%;border-style:solid;border-radius:50%}.mdc-radio__inner-circle{transform:scale(0);border-width:10px;transition:transform .12s cubic-bezier(.4,0,.6,1) 0ms,border-color .12s cubic-bezier(.4,0,.6,1) 0ms}.mdc-radio__native-control{position:absolute;margin:0;padding:0;opacity:0;cursor:inherit;z-index:1}.mdc-radio--touch{margin:4px}.mdc-radio--touch .mdc-radio__native-control{top:-4px;right:-4px;left:-4px;width:48px;height:48px}.mdc-radio__native-control:checked+.mdc-radio__background,.mdc-radio__native-control:disabled+.mdc-radio__background{transition:opacity .12s cubic-bezier(0,0,.2,1) 0ms,transform .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{transition:border-color .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle{transition:transform .12s cubic-bezier(0,0,.2,1) 0ms,border-color .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio--disabled{cursor:default;pointer-events:none}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.5);transition:transform .12s cubic-bezier(0,0,.2,1) 0ms,border-color .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio__native-control:disabled+.mdc-radio__background,[aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background{cursor:default}.mdc-radio__native-control:focus+.mdc-radio__background:before{transform:scale(1);opacity:.12;transition:opacity .12s cubic-bezier(0,0,.2,1) 0ms,transform .12s cubic-bezier(0,0,.2,1) 0ms}.mdc-radio{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-radio .mdc-radio__ripple:after,.mdc-radio .mdc-radio__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-radio .mdc-radio__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-radio .mdc-radio__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-radio.mdc-ripple-upgraded--unbounded .mdc-radio__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-radio.mdc-ripple-upgraded--foreground-activation .mdc-radio__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-radio.mdc-ripple-upgraded--foreground-deactivation .mdc-radio__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-radio .mdc-radio__ripple:after,.mdc-radio .mdc-radio__ripple:before{top:0;left:0;width:100%;height:100%}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:after,.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-radio .mdc-radio__ripple:after,.mdc-radio .mdc-radio__ripple:before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-radio.mdc-ripple-surface--hover .mdc-radio__ripple:before,.mdc-radio:hover .mdc-radio__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__ripple:before,.mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-radio:not(.mdc-ripple-upgraded) .mdc-radio__ripple:after{transition:opacity .15s linear}.mdc-radio:not(.mdc-ripple-upgraded):active .mdc-radio__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-radio.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__background:before,.mdc-radio.mdc-ripple-upgraded .mdc-radio__background:before{content:none}.mdc-radio__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface:after,.mdc-ripple-surface:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-ripple-surface:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface:after,.mdc-ripple-surface:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]:after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]:before,.mdc-ripple-upgraded--unbounded:after,.mdc-ripple-upgraded--unbounded:before{top:0;left:0;width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded:after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded:before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded:after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded:after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface:after,.mdc-ripple-surface:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover:before,.mdc-ripple-surface:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused:before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-segmented-button{display:inline-block;font-size:0}.mdc-segmented-button__segment{border-color:rgba(0,0,0,.12);border-color:var(--mdc-segmented-button-outline-color,rgba(0,0,0,.12));color:rgba(0,0,0,.6);color:var(--mdc-segmented-button-unselected-ink-color,rgba(0,0,0,.6));background-color:#fff;background-color:var(--mdc-segmented-button-unselected-container-fill-color,#fff)}.mdc-segmented-button__segment--selected{color:#6200ee;color:var(--mdc-segmented-button-selected-ink-color,#6200ee);background-color:rgba(98,0,238,.08);background-color:var(--mdc-segmented-button-selected-container-fill-color,rgba(98,0,238,.08))}.mdc-segmented-button__segment{position:relative;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height,2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);display:inline-flex;vertical-align:top;align-items:center;height:36px;min-width:48px;padding:0 12px;border-width:1px 0 1px 1px}.mdc-segmented-button__segment .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-segmented-button__segment:hover{cursor:pointer}.mdc-segmented-button__segment:focus{outline-width:0}.mdc-segmented-button__segment:first-child{border-radius:4px 0 0 4px}.mdc-segmented-button__segment:last-child{border-right-width:1px;border-radius:0 4px 4px 0}.mdc-segmented-button__segment .mdc-segmented-button__segment__touch{position:absolute;top:50%;height:48px;left:0;right:0;transform:translateY(-50%)}.mdc-segmented-button__segment .mdc-segmented-button__segment--touch{margin-top:0;margin-bottom:0}.mdc-touch-target-wrapper .mdc-segmented-button__segment{border-radius:0;border-right-width:0}.mdc-touch-target-wrapper:first-child .mdc-segmented-button__segment{border-radius:4px 0 0 4px}.mdc-touch-target-wrapper:last-child .mdc-segmented-button__segment{border-right-width:1px;border-radius:0 4px 4px 0}.mdc-segmented-button__icon{width:24px;font-size:18px}.mdc-segmented-button__icon+.mdc-segmented-button__label{padding-left:6px}.mdc-segmented-button__segment{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity;overflow:hidden}.mdc-segmented-button__segment .mdc-segmented-button__ripple:after,.mdc-segmented-button__segment .mdc-segmented-button__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-segmented-button__segment .mdc-segmented-button__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-segmented-button__segment .mdc-segmented-button__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-segmented-button__segment.mdc-ripple-upgraded .mdc-segmented-button__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-segmented-button__segment.mdc-ripple-upgraded .mdc-segmented-button__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-segmented-button__segment.mdc-ripple-upgraded--unbounded .mdc-segmented-button__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-segmented-button__segment.mdc-ripple-upgraded--foreground-activation .mdc-segmented-button__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-segmented-button__segment.mdc-ripple-upgraded--foreground-deactivation .mdc-segmented-button__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-segmented-button__segment .mdc-segmented-button__ripple:after,.mdc-segmented-button__segment .mdc-segmented-button__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-segmented-button__segment.mdc-ripple-upgraded .mdc-segmented-button__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-segmented-button__segment .mdc-segmented-button__ripple:after,.mdc-segmented-button__segment .mdc-segmented-button__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,#6200ee)}.mdc-segmented-button__segment.mdc-ripple-surface--hover .mdc-segmented-button__ripple:before,.mdc-segmented-button__segment:hover .mdc-segmented-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-segmented-button__segment.mdc-ripple-upgraded--background-focused .mdc-segmented-button__ripple:before,.mdc-segmented-button__segment.mdc-ripple-upgraded:focus-within .mdc-segmented-button__ripple:before,.mdc-segmented-button__segment:not(.mdc-ripple-upgraded):focus-within .mdc-segmented-button__ripple:before,.mdc-segmented-button__segment:not(.mdc-ripple-upgraded):focus .mdc-segmented-button__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-segmented-button__segment:not(.mdc-ripple-upgraded) .mdc-segmented-button__ripple:after{transition:opacity .15s linear}.mdc-segmented-button__segment:not(.mdc-ripple-upgraded):active .mdc-segmented-button__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-segmented-button__segment.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-segmented-button__segment .mdc-segmented-button__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-slider__thumb{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-slider__thumb:after,.mdc-slider__thumb:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-slider__thumb:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-slider__thumb:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-slider__thumb.mdc-ripple-upgraded:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb.mdc-ripple-upgraded:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-slider__thumb.mdc-ripple-upgraded--unbounded:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-slider__thumb.mdc-ripple-upgraded--foreground-deactivation:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-slider__thumb:after,.mdc-slider__thumb:before{top:0;left:0;width:100%;height:100%}.mdc-slider__thumb.mdc-ripple-upgraded:after,.mdc-slider__thumb.mdc-ripple-upgraded:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-slider__thumb:after,.mdc-slider__thumb:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider__thumb.mdc-ripple-surface--hover:before,.mdc-slider__thumb:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-slider__thumb.mdc-ripple-upgraded--background-focused:before,.mdc-slider__thumb:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-slider__thumb:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-slider__thumb:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-slider{cursor:pointer;height:48px;margin:0 24px;position:relative;touch-action:pan-y}.mdc-slider .mdc-slider__track{height:4px;position:absolute;top:50%;transform:translateY(-50%);width:100%}.mdc-slider .mdc-slider__track--active,.mdc-slider .mdc-slider__track--inactive{display:flex;height:100%;position:absolute;width:100%}.mdc-slider .mdc-slider__track--active{border-radius:3px;height:6px;overflow:hidden;top:-1px}.mdc-slider .mdc-slider__track--active_fill{border-top:6px solid;box-sizing:border-box;height:100%;width:100%;position:relative;transform-origin:left}.mdc-slider .mdc-slider__track--active_fill[dir=rtl],[dir=rtl] .mdc-slider .mdc-slider__track--active_fill{transform-origin:right}.mdc-slider .mdc-slider__track--inactive{border-radius:2px;height:4px;left:0;top:0}.mdc-slider .mdc-slider__track--inactive:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-slider .mdc-slider__track--active_fill{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill{border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider .mdc-slider__track--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.24}.mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.24}.mdc-slider .mdc-slider__value-indicator-container{bottom:44px;left:50%;pointer-events:none;position:absolute;transform:translateX(-50%)}.mdc-slider .mdc-slider__value-indicator{transition:transform .1s cubic-bezier(.4,0,1,1) 0ms;align-items:center;border-radius:4px;display:flex;height:32px;padding:0 12px;transform:scale(0);transform-origin:bottom}.mdc-slider .mdc-slider__value-indicator:before{border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid;bottom:-5px;content:"";height:0;left:50%;position:absolute;transform:translateX(-50%);width:0}.mdc-slider .mdc-slider__value-indicator:after{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator-container{pointer-events:auto}.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator{transition:transform .1s cubic-bezier(0,0,.2,1) 0ms;transform:scale(1)}@media (prefers-reduced-motion){.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator,.mdc-slider .mdc-slider__value-indicator{transition:none}}.mdc-slider .mdc-slider__value-indicator-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-slider .mdc-slider__value-indicator{background-color:#000;opacity:.6}.mdc-slider .mdc-slider__value-indicator:before{border-top-color:#000}.mdc-slider .mdc-slider__value-indicator{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-slider .mdc-slider__thumb{display:flex;height:48px;left:-24px;outline:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:48px}.mdc-slider .mdc-slider__thumb--top{z-index:1}.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-style:solid;border-width:1px;box-sizing:content-box}.mdc-slider .mdc-slider__thumb-knob{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);border:10px solid;border-radius:50%;box-sizing:border-box;height:20px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);border-color:#000;border-color:var(--mdc-theme-on-surface,#000)}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb--focused .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top .mdc-slider__thumb-knob,.mdc-slider.mdc-slider--disabled .mdc-slider__thumb--top.mdc-slider__thumb:hover .mdc-slider__thumb-knob{border-color:#fff}.mdc-slider .mdc-slider__thumb:after,.mdc-slider .mdc-slider__thumb:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-slider .mdc-slider__thumb.mdc-ripple-surface--hover:before,.mdc-slider .mdc-slider__thumb:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded--background-focused:before,.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-slider .mdc-slider__thumb:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-slider .mdc-slider__thumb.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-slider .mdc-slider__tick-marks{align-items:center;box-sizing:border-box;display:flex;height:100%;justify-content:space-between;padding:0 1px;position:absolute;width:100%}.mdc-slider .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--inactive{border-radius:50%;height:2px;width:2px}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--active,.mdc-slider .mdc-slider__tick-mark--active{background-color:#fff;background-color:var(--mdc-theme-on-primary,#fff);opacity:.6}.mdc-slider .mdc-slider__tick-mark--inactive{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);opacity:.6}.mdc-slider.mdc-slider--disabled .mdc-slider__tick-mark--inactive{background-color:#000;background-color:var(--mdc-theme-on-surface,#000);opacity:.6}.mdc-slider.mdc-slider--disabled{opacity:.38;cursor:auto}.mdc-slider.mdc-slider--disabled .mdc-slider__thumb{pointer-events:none}.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:transform 80ms ease}@media (prefers-reduced-motion){.mdc-slider--discrete .mdc-slider__thumb,.mdc-slider--discrete .mdc-slider__track--active_fill{transition:none}}.mdc-slider__input{cursor:pointer;left:0;margin:0;height:100%;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mdc-snackbar{z-index:8;margin:8px;display:none;position:fixed;right:0;bottom:0;left:0;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-snackbar__surface{background-color:#333}.mdc-snackbar__label{color:hsla(0,0%,100%,.87)}.mdc-snackbar__surface{min-width:344px}@media (max-width:344px),(max-width:480px){.mdc-snackbar__surface{min-width:100%}}.mdc-snackbar__surface{max-width:672px;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-snackbar--closing,.mdc-snackbar--open,.mdc-snackbar--opening{display:flex}.mdc-snackbar--open .mdc-snackbar__actions,.mdc-snackbar--open .mdc-snackbar__label{visibility:visible}.mdc-snackbar--leading{justify-content:flex-start}.mdc-snackbar--stacked .mdc-snackbar__label{padding-left:16px;padding-right:8px;padding-bottom:12px}.mdc-snackbar--stacked .mdc-snackbar__label[dir=rtl],[dir=rtl] .mdc-snackbar--stacked .mdc-snackbar__label{padding-left:8px;padding-right:16px}.mdc-snackbar--stacked .mdc-snackbar__surface{flex-direction:column;align-items:flex-start}.mdc-snackbar--stacked .mdc-snackbar__actions{align-self:flex-end;margin-bottom:8px}.mdc-snackbar__surface{padding-left:0;padding-right:8px;display:flex;align-items:center;justify-content:flex-start;box-sizing:border-box;transform:scale(.8);opacity:0}.mdc-snackbar__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-snackbar__surface[dir=rtl],[dir=rtl] .mdc-snackbar__surface{padding-left:8px;padding-right:0}.mdc-snackbar--open .mdc-snackbar__surface{transform:scale(1);opacity:1;pointer-events:auto;transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.mdc-snackbar--closing .mdc-snackbar__surface{transform:scale(1);transition:opacity 75ms cubic-bezier(.4,0,1,1) 0ms}.mdc-snackbar__label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);width:100%;flex-grow:1;box-sizing:border-box;margin:0;visibility:hidden;padding:14px 8px 14px 16px}.mdc-snackbar__label[dir=rtl],[dir=rtl] .mdc-snackbar__label{padding-left:8px;padding-right:16px}.mdc-snackbar__label:before{display:inline;content:attr(data-mdc-snackbar-label-text)}.mdc-snackbar__actions{display:flex;flex-shrink:0;align-items:center;box-sizing:border-box;visibility:hidden}.mdc-snackbar__action:not(:disabled){color:#bb86fc}.mdc-snackbar__action:after,.mdc-snackbar__action:before{background-color:#bb86fc;background-color:var(--mdc-ripple-color,#bb86fc)}.mdc-snackbar__action.mdc-ripple-surface--hover:before,.mdc-snackbar__action:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-snackbar__action.mdc-ripple-upgraded--background-focused:before,.mdc-snackbar__action:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-snackbar__action:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-snackbar__action:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-snackbar__action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-snackbar__dismiss{color:hsla(0,0%,100%,.87)}.mdc-snackbar__dismiss .mdc-icon-button__ripple:after,.mdc-snackbar__dismiss .mdc-icon-button__ripple:before{background-color:hsla(0,0%,100%,.87);background-color:var(--mdc-ripple-color,hsla(0,0%,100%,.87))}.mdc-snackbar__dismiss.mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-snackbar__dismiss:hover .mdc-icon-button__ripple:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-snackbar__dismiss.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-snackbar__dismiss:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-snackbar__dismiss.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-snackbar__dismiss.mdc-snackbar__dismiss{width:36px;height:36px;padding:6px;font-size:18px}.mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:8px;margin-right:0}.mdc-snackbar__action+.mdc-snackbar__dismiss[dir=rtl],[dir=rtl] .mdc-snackbar__action+.mdc-snackbar__dismiss{margin-left:0;margin-right:8px}.mdc-switch__thumb-underlay{left:-14px;right:auto;top:-17px;width:48px;height:48px}.mdc-switch__thumb-underlay[dir=rtl],[dir=rtl] .mdc-switch__thumb-underlay{left:auto;right:-14px}.mdc-switch__native-control{width:64px;height:48px}.mdc-switch{display:inline-block;position:relative;outline:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mdc-switch.mdc-switch--checked .mdc-switch__thumb,.mdc-switch.mdc-switch--checked .mdc-switch__track{background-color:#018786;background-color:var(--mdc-theme-secondary,#018786)}.mdc-switch.mdc-switch--checked .mdc-switch__thumb{border-color:#018786;border-color:var(--mdc-theme-secondary,#018786)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track{background-color:#000;background-color:var(--mdc-theme-on-surface,#000)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-color:#fff;border-color:var(--mdc-theme-surface,#fff)}.mdc-switch__native-control{left:0;right:auto;position:absolute;top:0;margin:0;opacity:0;cursor:pointer;pointer-events:auto;transition:transform 90ms cubic-bezier(.4,0,.2,1)}.mdc-switch__native-control[dir=rtl],[dir=rtl] .mdc-switch__native-control{left:auto;right:0}.mdc-switch__track{box-sizing:border-box;width:36px;height:14px;border:1px solid transparent;border-radius:7px;opacity:.38;transition:opacity 90ms cubic-bezier(.4,0,.2,1),background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1)}.mdc-switch__thumb-underlay{display:flex;position:absolute;align-items:center;justify-content:center;transform:translateX(0);transition:transform 90ms cubic-bezier(.4,0,.2,1),background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1)}.mdc-switch__thumb{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);box-sizing:border-box;width:20px;height:20px;border:10px solid;border-radius:50%;pointer-events:none;z-index:1}.mdc-switch--checked .mdc-switch__track{opacity:.54}.mdc-switch--checked .mdc-switch__thumb-underlay{transform:translateX(16px)}.mdc-switch--checked .mdc-switch__native-control,.mdc-switch--checked .mdc-switch__thumb-underlay[dir=rtl],[dir=rtl] .mdc-switch--checked .mdc-switch__thumb-underlay{transform:translateX(-16px)}.mdc-switch--checked .mdc-switch__native-control[dir=rtl],[dir=rtl] .mdc-switch--checked .mdc-switch__native-control{transform:translateX(16px)}.mdc-switch--disabled{opacity:.38;pointer-events:none}.mdc-switch--disabled .mdc-switch__thumb{border-width:1px}.mdc-switch--disabled .mdc-switch__native-control{cursor:default;pointer-events:none}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:after,.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:before{background-color:#9e9e9e;background-color:var(--mdc-ripple-color,#9e9e9e)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-surface--hover:before,.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused:before,.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb-underlay.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-switch__thumb-underlay{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-switch__thumb-underlay:after,.mdc-switch__thumb-underlay:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-switch__thumb-underlay:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-switch__thumb-underlay:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-switch__thumb-underlay.mdc-ripple-upgraded:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--unbounded:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-activation:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--foreground-deactivation:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-switch__thumb-underlay:after,.mdc-switch__thumb-underlay:before{top:0;left:0;width:100%;height:100%}.mdc-switch__thumb-underlay.mdc-ripple-upgraded:after,.mdc-switch__thumb-underlay.mdc-ripple-upgraded:before{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0);width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-switch__thumb-underlay:after,.mdc-switch__thumb-underlay:before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-switch__thumb-underlay.mdc-ripple-surface--hover:before,.mdc-switch__thumb-underlay:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused:before,.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-switch__thumb-underlay.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height,2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase);position:relative}.mdc-tab .mdc-tab__text-label{color:rgba(0,0,0,.6)}.mdc-tab .mdc-tab__icon{color:rgba(0,0,0,.54);fill:currentColor}.mdc-tab__content{position:relative}.mdc-tab__icon{width:24px;height:24px;font-size:24px}.mdc-tab--active .mdc-tab__icon,.mdc-tab--active .mdc-tab__text-label{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-tab--active .mdc-tab__icon{fill:currentColor}.mdc-tab{background:none;min-width:90px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;margin:0;padding:0 24px;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1}.mdc-tab::-moz-focus-inner{padding:0;border:0}.mdc-tab--min-width{flex:0 1 auto}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{display:inline-block;line-height:1}.mdc-tab__icon,.mdc-tab__text-label{transition:color .15s linear;z-index:2}.mdc-tab--stacked .mdc-tab__content{flex-direction:column;align-items:center;justify-content:center}.mdc-tab--stacked .mdc-tab__text-label{padding-top:6px;padding-bottom:4px}.mdc-tab--active .mdc-tab__icon,.mdc-tab--active .mdc-tab__text-label{transition-delay:.1s}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:8px;padding-right:0}.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl],[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label{padding-left:0;padding-right:8px}.mdc-tab{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mdc-tab .mdc-tab__ripple:after,.mdc-tab .mdc-tab__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-tab .mdc-tab__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-tab .mdc-tab__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-tab .mdc-tab__ripple:after,.mdc-tab .mdc-tab__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-tab .mdc-tab__ripple:after,.mdc-tab .mdc-tab__ripple:before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple:before,.mdc-tab:hover .mdc-tab__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple:before,.mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple:after{transition:opacity .15s linear}.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.mdc-tab.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-tab__ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;will-change:transform,opacity}.mdc-tab-bar{width:100%}.mdc-tab{height:48px}.mdc-tab--stacked{height:72px}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-tab-indicator .mdc-tab-indicator__content--icon{color:#018786;color:var(--mdc-theme-secondary,#018786)}.mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:2px}.mdc-tab-indicator .mdc-tab-indicator__content--icon{height:34px;font-size:34px}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator__content--icon{align-self:center;margin:0 auto}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}.mdc-tab-indicator .mdc-tab-indicator__content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition:opacity .15s linear}.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content{transition-delay:.1s}.mdc-tab-scroller{overflow-y:hidden}.mdc-tab-scroller.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-content{transition:transform .25s cubic-bezier(.4,0,.2,1)}.mdc-tab-scroller__test{position:absolute;top:-9999px;width:100px;height:100px;overflow-x:scroll}.mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:touch;display:flex;overflow-x:hidden}.mdc-tab-scroller__scroll-area::-webkit-scrollbar,.mdc-tab-scroller__test::-webkit-scrollbar{display:none}.mdc-tab-scroller__scroll-area--scroll{overflow-x:scroll}.mdc-tab-scroller__scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform}.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content{justify-content:flex-start}.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content{justify-content:flex-end}.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content{justify-content:center}.mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area{-webkit-overflow-scrolling:auto}.mdc-text-field--filled{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-text-field--filled .mdc-text-field__ripple:after,.mdc-text-field--filled .mdc-text-field__ripple:before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:""}.mdc-text-field--filled .mdc-text-field__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-text-field--filled .mdc-text-field__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple:after{top:0;left:0;transform:scale(0);transform-origin:center center}.mdc-text-field--filled.mdc-ripple-upgraded--unbounded .mdc-text-field__ripple:after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-activation .mdc-text-field__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-text-field--filled.mdc-ripple-upgraded--foreground-deactivation .mdc-text-field__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-text-field--filled .mdc-text-field__ripple:after,.mdc-text-field--filled .mdc-text-field__ripple:before{top:-50%;left:-50%;width:200%;height:200%}.mdc-text-field--filled.mdc-ripple-upgraded .mdc-text-field__ripple:after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-text-field__ripple{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.mdc-text-field{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:0;border-bottom-left-radius:0;display:inline-flex;align-items:baseline;padding:0 16px;position:relative;box-sizing:border-box;overflow:hidden;will-change:opacity,transform,color}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,0,.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:rgba(0,0,0,.87)}@media{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::-moz-placeholder{color:rgba(0,0,0,.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder{color:rgba(0,0,0,.54)}}@media{.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder{color:rgba(0,0,0,.54)}}.mdc-text-field .mdc-text-field__input{caret-color:#6200ee;caret-color:var(--mdc-theme-primary,#6200ee)}.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-character-counter,.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter{color:rgba(0,0,0,.6)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:rgba(0,0,0,.54)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix,.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix{color:rgba(0,0,0,.6)}.mdc-text-field .mdc-floating-label{top:50%;transform:translateY(-50%);pointer-events:none}.mdc-text-field__input{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);height:28px;transition:opacity .15s cubic-bezier(.4,0,.2,1) 0ms;width:100%;min-width:0;border:none;border-radius:0;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0}.mdc-text-field__input::-ms-clear{display:none}.mdc-text-field__input::-webkit-calendar-picker-indicator{display:none}.mdc-text-field__input:focus{outline:none}.mdc-text-field__input:invalid{box-shadow:none}@media{.mdc-text-field__input::-moz-placeholder{-moz-transition:opacity 67ms 0ms cubic-bezier(.4,0,.2,1);transition:opacity 67ms cubic-bezier(.4,0,.2,1) 0ms;opacity:0}.mdc-text-field__input::placeholder{transition:opacity 67ms cubic-bezier(.4,0,.2,1) 0ms;opacity:0}}@media{.mdc-text-field__input:-ms-input-placeholder{-ms-transition:opacity 67ms 0ms cubic-bezier(.4,0,.2,1);transition:opacity 67ms cubic-bezier(.4,0,.2,1) 0ms;opacity:0}}@media{.mdc-text-field--focused .mdc-text-field__input::-moz-placeholder,.mdc-text-field--no-label .mdc-text-field__input::-moz-placeholder{transition-delay:40ms;transition-duration:.11s;opacity:1}.mdc-text-field--focused .mdc-text-field__input::placeholder,.mdc-text-field--no-label .mdc-text-field__input::placeholder{transition-delay:40ms;transition-duration:.11s;opacity:1}}@media{.mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder,.mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder{transition-delay:40ms;transition-duration:.11s;opacity:1}}.mdc-text-field__affix{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);height:28px;transition:opacity .15s cubic-bezier(.4,0,.2,1) 0ms;opacity:0;white-space:nowrap}.mdc-text-field--label-floating .mdc-text-field__affix,.mdc-text-field--no-label .mdc-text-field__affix{opacity:1}@supports (-webkit-hyphens:none){.mdc-text-field--outlined .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}.mdc-text-field__affix--prefix[dir=rtl],[dir=rtl] .mdc-text-field__affix--prefix{padding-left:2px;padding-right:0}.mdc-text-field--end-aligned .mdc-text-field__affix--prefix{padding-left:0;padding-right:12px}.mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl],.mdc-text-field__affix--suffix,[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix{padding-left:12px;padding-right:0}.mdc-text-field__affix--suffix[dir=rtl],[dir=rtl] .mdc-text-field__affix--suffix{padding-left:0;padding-right:12px}.mdc-text-field--end-aligned .mdc-text-field__affix--suffix{padding-left:2px;padding-right:0}.mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl],[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix{padding-left:0;padding-right:2px}.mdc-text-field--filled{height:56px}.mdc-text-field--filled .mdc-text-field__ripple:after,.mdc-text-field--filled .mdc-text-field__ripple:before{background-color:rgba(0,0,0,.87);background-color:var(--mdc-ripple-color,rgba(0,0,0,.87))}.mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple:before,.mdc-text-field--filled:hover .mdc-text-field__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple:before,.mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.mdc-text-field--filled:before{display:inline-block;width:0;height:40px;content:"";vertical-align:0}.mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#f5f5f5}.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.42)}.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.87)}.mdc-text-field--filled .mdc-line-ripple:after{border-bottom-color:#6200ee;border-bottom-color:var(--mdc-theme-primary,#6200ee)}.mdc-text-field--filled .mdc-floating-label{left:16px;right:auto}.mdc-text-field--filled .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-text-field--filled .mdc-floating-label{left:auto;right:16px}.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-106%) scale(.75)}.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{height:100%}.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label,.mdc-text-field--filled.mdc-text-field--no-label:before{display:none}@supports (-webkit-hyphens:none){.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix{align-items:center;align-self:center;display:inline-flex;height:100%}}.mdc-text-field--outlined{height:56px;overflow:visible}.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) scale(1);font-size:.75rem}.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) scale(.75);font-size:1rem}.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined .25s 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined{0%{transform:translateX(0) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-34.75px) scale(.75)}to{transform:translateX(0) translateY(-34.75px) scale(.75)}}.mdc-text-field--outlined .mdc-text-field__input{height:100%}.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.38)}.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.87)}.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small,4px)}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small,4px);border-bottom-left-radius:0}@supports (top:max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading{width:max(12px,var(--mdc-shape-small,4px))}}@supports (top:max(0%)){.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch{max-width:calc(100% - max(12px, var(--mdc-shape-small, 4px))*2)}}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:4px;border-top-right-radius:var(--mdc-shape-small,4px);border-bottom-right-radius:4px;border-bottom-right-radius:var(--mdc-shape-small,4px);border-bottom-left-radius:0}.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:4px;border-top-left-radius:var(--mdc-shape-small,4px);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px;border-bottom-left-radius:var(--mdc-shape-small,4px)}@supports (top:max(0%)){.mdc-text-field--outlined{padding-right:max(16px,var(--mdc-shape-small,4px))}}@supports (top:max(0%)){.mdc-text-field--outlined,.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-left:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}@supports (top:max(0%)){.mdc-text-field--outlined+.mdc-text-field-helper-line{padding-right:max(16px,var(--mdc-shape-small,4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-left:0}@supports (top:max(0%)){.mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-right:max(16px,var(--mdc-shape-small,4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl],[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-right:0}@supports (top:max(0%)){.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl],[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon{padding-left:max(16px,var(--mdc-shape-small,4px))}}.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-right:0}@supports (top:max(0%)){.mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-left:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl],[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-left:0}@supports (top:max(0%)){.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl],[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon{padding-right:max(16px,calc(var(--mdc-shape-small, 4px) + 4px))}}.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:1px}.mdc-text-field--outlined .mdc-text-field__ripple:after,.mdc-text-field--outlined .mdc-text-field__ripple:before{content:none}.mdc-text-field--outlined .mdc-floating-label{left:4px;right:auto}.mdc-text-field--outlined .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-floating-label{left:auto;right:4px}.mdc-text-field--outlined .mdc-text-field__input{display:flex;border:none!important;background-color:transparent}.mdc-text-field--outlined .mdc-notched-outline{z-index:1}.mdc-text-field--textarea{flex-direction:column;align-items:center;width:auto;height:auto;padding:0;transition:none}.mdc-text-field--textarea .mdc-floating-label{top:19px}.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above){transform:none}.mdc-text-field--textarea .mdc-text-field__input{flex-grow:1;height:auto;min-height:1.5rem;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;resize:none;padding:0 16px;line-height:1.5rem}.mdc-text-field--textarea.mdc-text-field--filled:before{display:none}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above{transform:translateY(-10.25px) scale(.75)}.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-filled .25s 1}@keyframes mdc-floating-label-shake-float-above-textarea-filled{0%{transform:translateX(0) translateY(-10.25px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-10.25px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-10.25px) scale(.75)}to{transform:translateX(0) translateY(-10.25px) scale(.75)}}.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input{margin-top:23px;margin-bottom:9px}.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-27.25px) scale(1);font-size:.75rem}.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-24.75px) scale(.75);font-size:1rem}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-textarea-outlined .25s 1}@keyframes mdc-floating-label-shake-float-above-textarea-outlined{0%{transform:translateX(0) translateY(-24.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(4%) translateY(-24.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(-4%) translateY(-24.75px) scale(.75)}to{transform:translateX(0) translateY(-24.75px) scale(.75)}}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input{margin-top:16px;margin-bottom:16px}.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label{top:18px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input{margin-bottom:2px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter{align-self:flex-end;padding:0 16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter:after{display:inline-block;width:0;height:16px;content:"";vertical-align:-16px}.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter:before{display:none}.mdc-text-field__resizer{align-self:stretch;display:inline-flex;flex-direction:column;flex-grow:1;max-height:100%;max-width:100%;min-height:56px;min-width:-moz-fit-content;min-width:fit-content;min-width:-moz-available;min-width:-webkit-fill-available;overflow:hidden;resize:both}.mdc-text-field--filled .mdc-text-field__resizer{transform:translateY(-1px)}.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter,.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input{transform:translateY(1px)}.mdc-text-field--outlined .mdc-text-field__resizer{transform:translateX(-1px) translateY(-1px)}.mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer{transform:translateX(1px) translateY(-1px)}.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input{transform:translateX(1px) translateY(1px)}.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl],.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl],[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input{transform:translateX(-1px) translateY(1px)}.mdc-text-field--with-leading-icon{padding-left:0;padding-right:16px}.mdc-text-field--with-leading-icon[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon{padding-left:16px;padding-right:0}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 48px);left:48px;right:auto}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label{left:auto;right:48px}.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(133.33333% - 85.33333px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:36px;right:auto}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label{left:auto;right:36px}.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(-32px) scale(1)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{transform:translateY(-37.25px) translateX(32px) scale(1)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above{font-size:.75rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(-32px) scale(.75)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{transform:translateY(-34.75px) translateX(32px) scale(.75)}.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{font-size:1rem}.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon .25s 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon{0%{transform:translateX(-32px) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(calc(4% - 32px)) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(calc(-4% - 32px)) translateY(-34.75px) scale(.75)}to{transform:translateX(-32px) translateY(-34.75px) scale(.75)}}.mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake,[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake{animation:mdc-floating-label-shake-float-above-text-field-outlined-leading-icon .25s 1}@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl{0%{transform:translateX(32px) translateY(-34.75px) scale(.75)}33%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(calc(4% + 32px)) translateY(-34.75px) scale(.75)}66%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(calc(-4% + 32px)) translateY(-34.75px) scale(.75)}to{transform:translateX(32px) translateY(-34.75px) scale(.75)}}.mdc-text-field--with-trailing-icon{padding-left:16px;padding-right:0}.mdc-text-field--with-trailing-icon[dir=rtl],[dir=rtl] .mdc-text-field--with-trailing-icon{padding-left:0;padding-right:16px}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 64px)}.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(133.33333% - 85.33333px)}.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch{max-width:calc(100% - 60px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon{padding-left:0;padding-right:0}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label{max-width:calc(100% - 96px)}.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above{max-width:calc(133.33333% - 128px)}.mdc-text-field-helper-line{display:flex;justify-content:space-between;box-sizing:border-box}.mdc-text-field+.mdc-text-field-helper-line{padding-right:16px;padding-left:16px}.mdc-form-field>.mdc-text-field+label{align-self:flex-start}.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--focused .mdc-notched-outline__trailing{border-width:2px}.mdc-text-field--focused+.mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg){opacity:1}.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:2px}.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch{padding-top:0}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after,.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{color:#b00020;color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid .mdc-text-field__input{caret-color:#b00020;caret-color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing{color:#b00020;color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border-bottom-color:#b00020;border-bottom-color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#b00020;border-color:var(--mdc-theme-error,#b00020)}.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{opacity:1}.mdc-text-field--disabled{pointer-events:none}.mdc-text-field--disabled .mdc-text-field__input{color:rgba(0,0,0,.38)}@media{.mdc-text-field--disabled .mdc-text-field__input::-moz-placeholder{color:rgba(0,0,0,.38)}.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:rgba(0,0,0,.38)}}@media{.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:rgba(0,0,0,.38)}}.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text,.mdc-text-field--disabled .mdc-floating-label,.mdc-text-field--disabled .mdc-text-field-character-counter{color:rgba(0,0,0,.38)}.mdc-text-field--disabled .mdc-text-field__icon--leading,.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:rgba(0,0,0,.3)}.mdc-text-field--disabled .mdc-text-field__affix--prefix,.mdc-text-field--disabled .mdc-text-field__affix--suffix{color:rgba(0,0,0,.38)}.mdc-text-field--disabled .mdc-line-ripple:before{border-bottom-color:rgba(0,0,0,.06)}.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:rgba(0,0,0,.06)}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled .mdc-text-field__input::-moz-placeholder{color:GrayText}.mdc-text-field--disabled .mdc-text-field__input::placeholder{color:GrayText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder{color:GrayText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter,.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text,.mdc-text-field--disabled .mdc-floating-label,.mdc-text-field--disabled .mdc-text-field-character-counter,.mdc-text-field--disabled .mdc-text-field__affix--prefix,.mdc-text-field--disabled .mdc-text-field__affix--suffix,.mdc-text-field--disabled .mdc-text-field__icon--leading,.mdc-text-field--disabled .mdc-text-field__icon--trailing{color:GrayText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled .mdc-line-ripple:before{border-bottom-color:GrayText}}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-text-field--disabled .mdc-notched-outline__leading,.mdc-text-field--disabled .mdc-notched-outline__notch,.mdc-text-field--disabled .mdc-notched-outline__trailing{border-color:GrayText}}@media screen and (forced-colors:active){.mdc-text-field--disabled .mdc-text-field__input{background-color:Window}.mdc-text-field--disabled .mdc-floating-label{z-index:1}}.mdc-text-field--disabled .mdc-floating-label{cursor:default}.mdc-text-field--disabled.mdc-text-field--filled{background-color:#fafafa}.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple{display:none}.mdc-text-field--disabled .mdc-text-field__input{pointer-events:auto}.mdc-text-field--end-aligned .mdc-text-field__input{text-align:right}.mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl],[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input{text-align:left}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix,.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input{direction:ltr}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix{padding-left:0;padding-right:2px}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix{padding-left:12px;padding-right:0}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading{order:1}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix{order:2}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input{order:3}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix{order:4}.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing,[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing{order:5}.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input,[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input{text-align:right}.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix,[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix{padding-right:12px}.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix,[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix{padding-left:2px}.mdc-text-field-helper-text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;line-height:normal;margin:0;opacity:0;will-change:opacity;transition:opacity .15s cubic-bezier(.4,0,.2,1) 0ms}.mdc-text-field-helper-text:before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.mdc-text-field-helper-text--persistent{transition:none;opacity:1;will-change:auto}.mdc-text-field-character-counter{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);display:block;margin-top:0;line-height:normal;margin-left:auto;margin-right:0;padding-left:16px;padding-right:0;white-space:nowrap}.mdc-text-field-character-counter:before{display:inline-block;width:0;height:16px;content:"";vertical-align:0}.mdc-text-field-character-counter[dir=rtl],[dir=rtl] .mdc-text-field-character-counter{margin-left:0;margin-right:auto;padding-left:0;padding-right:16px}.mdc-text-field__icon{align-self:center;cursor:pointer}.mdc-text-field__icon:not([tabindex]),.mdc-text-field__icon[tabindex="-1"]{cursor:default;pointer-events:none}.mdc-text-field__icon svg{display:block}.mdc-text-field__icon--leading{margin-left:16px;margin-right:8px}.mdc-text-field__icon--leading[dir=rtl],[dir=rtl] .mdc-text-field__icon--leading{margin-left:8px;margin-right:16px}.mdc-text-field__icon--trailing{padding:12px;margin-left:0;margin-right:0}.mdc-text-field__icon--trailing[dir=rtl],[dir=rtl] .mdc-text-field__icon--trailing{margin-left:0;margin-right:0}:root{--mdc-theme-primary:#6200ee;--mdc-theme-secondary:#018786;--mdc-theme-background:#fff;--mdc-theme-surface:#fff;--mdc-theme-error:#b00020;--mdc-theme-on-primary:#fff;--mdc-theme-on-secondary:#fff;--mdc-theme-on-surface:#000;--mdc-theme-on-error:#fff;--mdc-theme-text-primary-on-background:rgba(0,0,0,0.87);--mdc-theme-text-secondary-on-background:rgba(0,0,0,0.54);--mdc-theme-text-hint-on-background:rgba(0,0,0,0.38);--mdc-theme-text-disabled-on-background:rgba(0,0,0,0.38);--mdc-theme-text-icon-on-background:rgba(0,0,0,0.38);--mdc-theme-text-primary-on-light:rgba(0,0,0,0.87);--mdc-theme-text-secondary-on-light:rgba(0,0,0,0.54);--mdc-theme-text-hint-on-light:rgba(0,0,0,0.38);--mdc-theme-text-disabled-on-light:rgba(0,0,0,0.38);--mdc-theme-text-icon-on-light:rgba(0,0,0,0.38);--mdc-theme-text-primary-on-dark:#fff;--mdc-theme-text-secondary-on-dark:hsla(0,0%,100%,0.7);--mdc-theme-text-hint-on-dark:hsla(0,0%,100%,0.5);--mdc-theme-text-disabled-on-dark:hsla(0,0%,100%,0.5);--mdc-theme-text-icon-on-dark:hsla(0,0%,100%,0.5)}.mdc-theme--primary{color:#6200ee!important;color:var(--mdc-theme-primary,#6200ee)!important}.mdc-theme--secondary{color:#018786!important;color:var(--mdc-theme-secondary,#018786)!important}.mdc-theme--background{background-color:#fff;background-color:var(--mdc-theme-background,#fff)}.mdc-theme--surface{background-color:#fff;background-color:var(--mdc-theme-surface,#fff)}.mdc-theme--error{color:#b00020!important;color:var(--mdc-theme-error,#b00020)!important}.mdc-theme--on-primary{color:#fff!important;color:var(--mdc-theme-on-primary,#fff)!important}.mdc-theme--on-secondary{color:#fff!important;color:var(--mdc-theme-on-secondary,#fff)!important}.mdc-theme--on-surface{color:#000!important;color:var(--mdc-theme-on-surface,#000)!important}.mdc-theme--on-error{color:#fff!important;color:var(--mdc-theme-on-error,#fff)!important}.mdc-theme--text-primary-on-background{color:rgba(0,0,0,.87)!important;color:var(--mdc-theme-text-primary-on-background,rgba(0,0,0,.87))!important}.mdc-theme--text-secondary-on-background{color:rgba(0,0,0,.54)!important;color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))!important}.mdc-theme--text-hint-on-background{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-hint-on-background,rgba(0,0,0,.38))!important}.mdc-theme--text-disabled-on-background{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-disabled-on-background,rgba(0,0,0,.38))!important}.mdc-theme--text-icon-on-background{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-icon-on-background,rgba(0,0,0,.38))!important}.mdc-theme--text-primary-on-light{color:rgba(0,0,0,.87)!important;color:var(--mdc-theme-text-primary-on-light,rgba(0,0,0,.87))!important}.mdc-theme--text-secondary-on-light{color:rgba(0,0,0,.54)!important;color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54))!important}.mdc-theme--text-hint-on-light{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-hint-on-light,rgba(0,0,0,.38))!important}.mdc-theme--text-disabled-on-light{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-disabled-on-light,rgba(0,0,0,.38))!important}.mdc-theme--text-icon-on-light{color:rgba(0,0,0,.38)!important;color:var(--mdc-theme-text-icon-on-light,rgba(0,0,0,.38))!important}.mdc-theme--text-primary-on-dark{color:#fff!important;color:var(--mdc-theme-text-primary-on-dark,#fff)!important}.mdc-theme--text-secondary-on-dark{color:hsla(0,0%,100%,.7)!important;color:var(--mdc-theme-text-secondary-on-dark,hsla(0,0%,100%,.7))!important}.mdc-theme--text-hint-on-dark{color:hsla(0,0%,100%,.5)!important;color:var(--mdc-theme-text-hint-on-dark,hsla(0,0%,100%,.5))!important}.mdc-theme--text-disabled-on-dark{color:hsla(0,0%,100%,.5)!important;color:var(--mdc-theme-text-disabled-on-dark,hsla(0,0%,100%,.5))!important}.mdc-theme--text-icon-on-dark{color:hsla(0,0%,100%,.5)!important;color:var(--mdc-theme-text-icon-on-dark,hsla(0,0%,100%,.5))!important}.mdc-theme--primary-bg{background-color:#6200ee!important;background-color:var(--mdc-theme-primary,#6200ee)!important}.mdc-theme--secondary-bg{background-color:#018786!important;background-color:var(--mdc-theme-secondary,#018786)!important}.mdc-tooltip__caret-surface-bottom,.mdc-tooltip__caret-surface-top,.mdc-tooltip__surface{border-radius:4px;border-radius:var(--mdc-shape-small,4px)}.mdc-tooltip__surface{color:#fff;color:var(--mdc-theme-text-primary-on-dark,#fff);background-color:rgba(0,0,0,.6);word-break:break-all;word-break:var(--mdc-tooltip-word-break,normal);overflow-wrap:anywhere}.mdc-tooltip{z-index:9}.mdc-tooltip--showing-transition .mdc-tooltip__surface-animation{transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.mdc-tooltip--hide-transition .mdc-tooltip__surface-animation{transition:opacity 75ms cubic-bezier(.4,0,1,1) 0ms}.mdc-tooltip__title{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-light,rgba(0,0,0,.87))}.mdc-tooltip__content{color:rgba(0,0,0,.6)}.mdc-tooltip__content-link{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-tooltip{position:fixed;display:none}.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__caret-surface-bottom,.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__caret-surface-top,.mdc-tooltip.mdc-tooltip--rich .mdc-tooltip__surface{background-color:#fff}.mdc-tooltip-wrapper--rich{position:relative}.mdc-tooltip--hide,.mdc-tooltip--showing,.mdc-tooltip--shown{display:inline-flex}.mdc-tooltip--hide.mdc-tooltip--rich,.mdc-tooltip--showing.mdc-tooltip--rich,.mdc-tooltip--shown.mdc-tooltip--rich{display:inline-block;left:-320px;position:absolute}.mdc-tooltip__surface{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit);line-height:16px;padding:4px 8px;min-width:40px;max-width:200px;min-height:24px;max-height:40vh;box-sizing:border-box;overflow:hidden;text-align:center}.mdc-tooltip__surface:before{position:absolute;box-sizing:border-box;width:100%;height:100%;top:0;left:0;border:1px solid transparent;border-radius:inherit;content:"";pointer-events:none}.mdc-tooltip--rich .mdc-tooltip__surface{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);align-items:flex-start;border-radius:4px;display:flex;flex-direction:column;line-height:20px;min-height:24px;min-width:40px;max-width:320px;position:relative}.mdc-tooltip--rich .mdc-tooltip__surface .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-tooltip--multiline .mdc-tooltip__surface{text-align:left}.mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl],[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface{text-align:right}.mdc-tooltip__surface .mdc-tooltip__title{display:block;line-height:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit);margin:0 8px}.mdc-tooltip__surface .mdc-tooltip__title:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.mdc-tooltip__surface .mdc-tooltip__content{display:block;line-height:normal;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit);max-width:calc(100% - 16px);margin:0 8px 16px;text-align:left}.mdc-tooltip__surface .mdc-tooltip__content:before{display:inline-block;width:0;height:24px;content:"";vertical-align:0}.mdc-tooltip__surface .mdc-tooltip__content[dir=rtl],[dir=rtl] .mdc-tooltip__surface .mdc-tooltip__content{text-align:right}.mdc-tooltip__surface .mdc-tooltip__content-link{text-decoration:none}.mdc-tooltip__surface-animation{opacity:0;transform:scale(.8);will-change:transform,opacity}.mdc-tooltip--shown .mdc-tooltip__surface-animation{transform:scale(1);opacity:1}.mdc-tooltip--hide .mdc-tooltip__surface-animation{transform:scale(1)}.mdc-tooltip__caret-surface-bottom,.mdc-tooltip__caret-surface-top{position:absolute;height:24px;width:24px;transform:rotate(35deg) skewY(20deg) scaleX(.9396926208)}.mdc-tooltip__caret-surface-bottom .mdc-elevation-overlay,.mdc-tooltip__caret-surface-top .mdc-elevation-overlay{width:100%;height:100%;top:0;left:0}.mdc-tooltip__caret-surface-bottom{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);outline:1px solid transparent;z-index:-1}.mdc-top-app-bar{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);display:flex;position:fixed;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:100%;z-index:4}.mdc-top-app-bar .mdc-top-app-bar__action-item,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-top-app-bar .mdc-top-app-bar__action-item:after,.mdc-top-app-bar .mdc-top-app-bar__action-item:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:after,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-surface--hover:before,.mdc-top-app-bar .mdc-top-app-bar__action-item:hover:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-surface--hover:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded--background-focused:before,.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):focus:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded--background-focused:before,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):after,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.mdc-top-app-bar .mdc-top-app-bar__action-item:not(.mdc-ripple-upgraded):active:after,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.mdc-top-app-bar .mdc-top-app-bar__action-item.mdc-ripple-upgraded,.mdc-top-app-bar .mdc-top-app-bar__navigation-icon.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.mdc-top-app-bar__row{display:flex;position:relative;box-sizing:border-box;width:100%;height:64px}.mdc-top-app-bar__section{display:inline-flex;flex:1 1 auto;align-items:center;min-width:0;padding:8px 12px;z-index:1}.mdc-top-app-bar__section--align-start{justify-content:flex-start;order:-1}.mdc-top-app-bar__section--align-end{justify-content:flex-end;order:1}.mdc-top-app-bar__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit);padding-left:20px;padding-right:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;z-index:1}.mdc-top-app-bar__title[dir=rtl],[dir=rtl] .mdc-top-app-bar__title{padding-left:0;padding-right:20px}.mdc-top-app-bar--short-collapsed{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:24px;border-bottom-left-radius:0}.mdc-top-app-bar--short-collapsed[dir=rtl],[dir=rtl] .mdc-top-app-bar--short-collapsed{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:24px}.mdc-top-app-bar--short{top:0;right:auto;left:0;width:100%;transition:width .25s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short[dir=rtl],[dir=rtl] .mdc-top-app-bar--short{right:0;left:auto}.mdc-top-app-bar--short .mdc-top-app-bar__row{height:56px}.mdc-top-app-bar--short .mdc-top-app-bar__section{padding:4px}.mdc-top-app-bar--short .mdc-top-app-bar__title{transition:opacity .2s cubic-bezier(.4,0,.2,1);opacity:1}.mdc-top-app-bar--short-collapsed{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);width:56px;transition:width .3s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__title{display:none}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__action-item{transition:padding .15s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item{width:112px}.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end{padding-left:0;padding-right:12px}.mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end[dir=rtl],[dir=rtl] .mdc-top-app-bar--short-collapsed.mdc-top-app-bar--short-has-action-item .mdc-top-app-bar__section--align-end{padding-left:12px;padding-right:0}.mdc-top-app-bar--dense .mdc-top-app-bar__row{height:48px}.mdc-top-app-bar--dense .mdc-top-app-bar__section{padding:0 4px}.mdc-top-app-bar--dense .mdc-top-app-bar__title{padding-left:12px;padding-right:0}.mdc-top-app-bar--dense .mdc-top-app-bar__title[dir=rtl],[dir=rtl] .mdc-top-app-bar--dense .mdc-top-app-bar__title{padding-left:0;padding-right:12px}.mdc-top-app-bar--prominent .mdc-top-app-bar__row{height:128px}.mdc-top-app-bar--prominent .mdc-top-app-bar__title{align-self:flex-end;padding-bottom:2px}.mdc-top-app-bar--prominent .mdc-top-app-bar__action-item,.mdc-top-app-bar--prominent .mdc-top-app-bar__navigation-icon{align-self:flex-start}.mdc-top-app-bar--fixed{transition:box-shadow .2s linear}.mdc-top-app-bar--fixed-scrolled{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);transition:box-shadow .2s linear}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__row{height:96px}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__section{padding:0 12px}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title{padding-left:20px;padding-right:0;padding-bottom:9px}.mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title[dir=rtl],[dir=rtl] .mdc-top-app-bar--dense.mdc-top-app-bar--prominent .mdc-top-app-bar__title{padding-left:0;padding-right:20px}.mdc-top-app-bar--fixed-adjust{padding-top:64px}.mdc-top-app-bar--dense-fixed-adjust{padding-top:48px}.mdc-top-app-bar--short-fixed-adjust{padding-top:56px}.mdc-top-app-bar--prominent-fixed-adjust{padding-top:128px}.mdc-top-app-bar--dense-prominent-fixed-adjust{padding-top:96px}@media (max-width:599px){.mdc-top-app-bar__row{height:56px}.mdc-top-app-bar__section{padding:4px}.mdc-top-app-bar--short{transition:width .2s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short-collapsed{transition:width .25s cubic-bezier(.4,0,.2,1)}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end{padding-left:0;padding-right:12px}.mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end[dir=rtl],[dir=rtl] .mdc-top-app-bar--short-collapsed .mdc-top-app-bar__section--align-end{padding-left:12px;padding-right:0}.mdc-top-app-bar--prominent .mdc-top-app-bar__title{padding-bottom:6px}.mdc-top-app-bar--fixed-adjust{padding-top:56px}}.mdc-typography{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-font-family,Roboto,sans-serif)}.mdc-typography--headline1{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:6rem;font-size:var(--mdc-typography-headline1-font-size,6rem);line-height:6rem;line-height:var(--mdc-typography-headline1-line-height,6rem);font-weight:300;font-weight:var(--mdc-typography-headline1-font-weight,300);letter-spacing:-.015625em;letter-spacing:var(--mdc-typography-headline1-letter-spacing,-.015625em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline1-text-decoration,inherit);text-decoration:var(--mdc-typography-headline1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline1-text-transform,inherit)}.mdc-typography--headline1,.mdc-typography--headline2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--headline2{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:3.75rem;font-size:var(--mdc-typography-headline2-font-size,3.75rem);line-height:3.75rem;line-height:var(--mdc-typography-headline2-line-height,3.75rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight,300);letter-spacing:-.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing,-.0083333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline2-text-decoration,inherit);text-decoration:var(--mdc-typography-headline2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform,inherit)}.mdc-typography--headline3{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline3-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:3rem;font-size:var(--mdc-typography-headline3-font-size,3rem);line-height:3.125rem;line-height:var(--mdc-typography-headline3-line-height,3.125rem);font-weight:400;font-weight:var(--mdc-typography-headline3-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline3-letter-spacing,normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline3-text-decoration,inherit);text-decoration:var(--mdc-typography-headline3-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline3-text-transform,inherit)}.mdc-typography--headline3,.mdc-typography--headline4{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--headline4{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline4-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:2.125rem;font-size:var(--mdc-typography-headline4-font-size,2.125rem);line-height:2.5rem;line-height:var(--mdc-typography-headline4-line-height,2.5rem);font-weight:400;font-weight:var(--mdc-typography-headline4-font-weight,400);letter-spacing:.0073529412em;letter-spacing:var(--mdc-typography-headline4-letter-spacing,.0073529412em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline4-text-decoration,inherit);text-decoration:var(--mdc-typography-headline4-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline4-text-transform,inherit)}.mdc-typography--headline5{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline5-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.5rem;font-size:var(--mdc-typography-headline5-font-size,1.5rem);line-height:2rem;line-height:var(--mdc-typography-headline5-line-height,2rem);font-weight:400;font-weight:var(--mdc-typography-headline5-font-weight,400);letter-spacing:normal;letter-spacing:var(--mdc-typography-headline5-letter-spacing,normal);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-decoration:var(--mdc-typography-headline5-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline5-text-transform,inherit)}.mdc-typography--headline5,.mdc-typography--headline6{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--headline6{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit)}.mdc-typography--subtitle1{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit)}.mdc-typography--subtitle1,.mdc-typography--subtitle2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--subtitle2{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-subtitle2-font-size,.875rem);line-height:1.375rem;line-height:var(--mdc-typography-subtitle2-line-height,1.375rem);font-weight:500;font-weight:var(--mdc-typography-subtitle2-font-weight,500);letter-spacing:.0071428571em;letter-spacing:var(--mdc-typography-subtitle2-letter-spacing,.0071428571em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle2-text-transform,inherit)}.mdc-typography--body1{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-body1-font-size,1rem);line-height:1.5rem;line-height:var(--mdc-typography-body1-line-height,1.5rem);font-weight:400;font-weight:var(--mdc-typography-body1-font-weight,400);letter-spacing:.03125em;letter-spacing:var(--mdc-typography-body1-letter-spacing,.03125em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-decoration:var(--mdc-typography-body1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body1-text-transform,inherit)}.mdc-typography--body1,.mdc-typography--body2{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--body2{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-typography--caption{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-caption-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-caption-font-size,.75rem);line-height:1.25rem;line-height:var(--mdc-typography-caption-line-height,1.25rem);font-weight:400;font-weight:var(--mdc-typography-caption-font-weight,400);letter-spacing:.0333333333em;letter-spacing:var(--mdc-typography-caption-letter-spacing,.0333333333em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-decoration:var(--mdc-typography-caption-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-caption-text-transform,inherit)}.mdc-typography--button{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-button-font-size,.875rem);line-height:2.25rem;line-height:var(--mdc-typography-button-line-height,2.25rem);font-weight:500;font-weight:var(--mdc-typography-button-font-weight,500);letter-spacing:.0892857143em;letter-spacing:var(--mdc-typography-button-letter-spacing,.0892857143em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-button-text-decoration,none);text-decoration:var(--mdc-typography-button-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-button-text-transform,uppercase)}.mdc-typography--button,.mdc-typography--overline{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.mdc-typography--overline{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-overline-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-overline-font-size,.75rem);line-height:2rem;line-height:var(--mdc-typography-overline-line-height,2rem);font-weight:500;font-weight:var(--mdc-typography-overline-font-weight,500);letter-spacing:.1666666667em;letter-spacing:var(--mdc-typography-overline-letter-spacing,.1666666667em);text-decoration:none;-webkit-text-decoration:var(--mdc-typography-overline-text-decoration,none);text-decoration:var(--mdc-typography-overline-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-overline-text-transform,uppercase)}.mdc-drawer-root{display:flex;height:100vh}.mdc-top-app-bar{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-text-field--fullwidth,.mdc-top-app-bar__section--align-end>.mdc-deprecated-list{display:flex}.mdc-form-field .mdc-text-field--fullwidth{width:100%}.mdc-autocomplete{display:inline-flex;position:relative}.mdc-autocomplete .mdc-text-field__ripple:after,.mdc-autocomplete .mdc-text-field__ripple:before{top:0;left:0;width:100%;height:100%;border-radius:4px 4px 0 0}.mdc-autocomplete--fullwidth{display:flex;width:100%}.mdc-autocomplete__menu{position:absolute;top:54px;left:0;max-height:calc(50vh - 32px)}.mdc-autocomplete__menu.mdc-menu-surface--open{display:block}.mdc-autocomplete__menu .mdc-deprecated-list{width:100%}.mdc-autocomplete__menu .mdc-deprecated-list-item{height:30px;line-height:30px;padding:0 10px}.mdc-autocomplete__menu .mdc-deprecated-list-item strong{font-weight:700}.mdc-autocomplete__menu .mdc-deprecated-list-item.selected{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu{position:fixed!important;top:0!important;right:0;bottom:0!important;left:0!important;flex-direction:row;align-items:center;justify-content:space-around;max-width:100vw!important;max-height:100vh!important;background-color:transparent;box-shadow:none}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu .mdc-deprecated-list{z-index:6;width:560px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px)}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu.mdc-menu-surface--open{display:flex}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu.mdc-menu-surface--open .mdc-drawer-scrim{display:block;background-color:rgba(0,0,0,.32)}.mdc-autocomplete--in-dialog .mdc-autocomplete__menu.mdc-menu-surface--open .mdc-deprecated-list{max-height:100%;overflow-y:scroll}@media (max-width:599px){.mdc-autocomplete--in-dialog .mdc-autocomplete__menu .mdc-deprecated-list{width:100%}}.mdc-card__text{padding:16px}.mdc-card__text+.mdc-card__text{padding-top:0}.mdc-card__media+.mdc-card__text{padding-top:16px}.mdc-file{display:inline-block}.mdc-form{margin:0;padding:0;border:0}.mdc-form__item{display:flex;align-items:center;margin-bottom:0}.mdc-form__item:last-child{margin-bottom:0}.mdc-form__item>label{margin:0;padding:0}.mdc-form__item.required>label:before{content:"*";color:red}.mdc-form--nowrap .mdc-form__item>label{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mdc-form--horizontal .mdc-form__item>label{flex:0 0 auto;margin-right:0}.mdc-form--horizontal .mdc-form__actions{padding-left:auto0}.mdc-form--horizontal .mdc-form__actions .mdc-button{margin-right:8px}.mdc-form--horizontal .mdc-form__actions .mdc-button:last-child{margin-right:0}.mdc-form--horizontal.mdc-form--label-top-aligned .mdc-form__item{align-items:flex-start}.mdc-form--horizontal.mdc-form--label-right-aligned .mdc-form__item>label{text-align:right}.mdc-form--horizontal.mdc-form--label-top-right-aligned .mdc-form__item{align-items:flex-start}.mdc-form--horizontal.mdc-form--label-top-right-aligned .mdc-form__item>label{text-align:right}.mdc-form--horizontal .mdc-checkbox+label,.mdc-form--horizontal .mdc-radio+label{flex-basis:auto}.mdc-form--vertical .mdc-form__item{flex-direction:column;align-items:flex-start}.mdc-form--vertical .mdc-form__item>label{margin-bottom:0}.mdc-form--vertical .mdc-form__actions{flex-direction:row}.mdc-form--vertical .mdc-form__actions .mdc-button{margin-right:8px}.mdc-form--vertical .mdc-form__actions .mdc-button:last-child,.mdc-form__item>.mdc-form-field{margin-right:0}.mdc-form--actions-center .mdc-form__actions{justify-content:center;padding-left:0}.mdc-form--actions-right .mdc-form__actions{justify-content:flex-end}.mdc-icon-button img,.mdc-icon-button svg{vertical-align:initial}.mdc-pagination .material-icons{font-size:18px}.mdc-pagination .mdc-button{min-width:32px;height:32px}.mdc-pagination .mdc-button.mdc-pagination__button--ellipsis{cursor:default;color:rgba(0,0,0,.38)}.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis){color:rgba(0,0,0,.87);border:1px solid rgba(0,0,0,.87)}.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis):hover{color:#6200ee;color:var(--mdc-theme-primary,#6200ee);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis).mdc-pagination__button--active{cursor:default}.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis).mdc-pagination__button--active,.mdc-pagination .mdc-data-table__pagination-button:not(.mdc-pagination__button--ellipsis).mdc-pagination__button--active:hover{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-pagination .mdc-data-table__pagination-button:disabled{color:rgba(0,0,0,.38);border-color:rgba(0,0,0,.38);cursor:not-allowed}.mdc-pagination.mdc-pagination--left{justify-content:flex-start}.mdc-pagination.mdc-pagination--center{justify-content:center}.mdc-pagination.mdc-pagination--right{justify-content:flex-end}.mdc-pagination.mdc-pagination--mini .mdc-data-table__pagination-trailing{justify-content:center;width:100%;margin:0}.mdc-pagination.mdc-pagination--mini .mdc-data-table__pagination-navigation{justify-content:space-between;width:100%}.mdc-pagination.mdc-pagination--mini .mdc-data-table__pagination-total{margin:0}.mdc-pagination.mdc-pagination--mini .mdc-data-table__pagination-prev-button{order:-1}.mdc-data-table__pagination-rows-per-page select{width:48px;height:24px;border:1px solid #d9d9d9;text-indent:4px;outline:0;transition:all .3s}.mdc-data-table__pagination-rows-per-page select:focus,.mdc-data-table__pagination-rows-per-page select:hover{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-data-table__pagination-jumper{display:inline-flex;align-items:center;margin-left:22px}.mdc-data-table__pagination-jumper .mdc-data-table__pagination-jumper-label{margin-right:12px}.mdc-data-table__pagination-jumper input{width:48px;height:24px;border:1px solid #d9d9d9;text-indent:4px;outline:0;transition:all .3s}.mdc-data-table__pagination-jumper input:focus,.mdc-data-table__pagination-jumper input:hover{border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-data-table__pagination-jumper button{height:24px;line-height:22px;border:1px solid #d9d9d9}@keyframes mdc-skeleton-loading{0%{background-position:100% 50%}to{background-position:0 50%}}.mdc-skeleton{display:flex;align-items:flex-start;width:100%}.mdc-skeleton-avatar{display:block;margin-left:0;margin-right:16px;background:#f2f2f2;width:36px;height:36px;line-height:36px}.mdc-skeleton-avatar.mdc-skeleton-avatar--circle{border-radius:50%}.mdc-skeleton-avatar.mdc-skeleton-avatar--large{width:40px;height:40px;line-height:40px}.mdc-skeleton-avatar.mdc-skeleton-avatar--small{width:24px;height:24px;line-height:24px}.mdc-skeleton__content{width:100%}.mdc-skeleton-paragraph{margin:0;padding:0}.mdc-skeleton-paragraph>li{width:100%;height:16px;list-style:none;background:#f2f2f2}.mdc-skeleton-paragraph>li+li{margin-top:16px}.mdc-skeleton-paragraph>li:last-child:not(:first-child):not(:nth-child(2)){width:61%}.mdc-skeleton-title{width:100%;height:16px;margin:16px 0 0;background:#f2f2f2}.mdc-skeleton-title+.mdc-skeleton-paragraph{margin-top:24px}.mdc-skeleton--with-avatar .mdc-skeleton-title{margin-top:12px}.mdc-skeleton--with-avatar .mdc-skeleton-title+.mdc-skeleton-paragraph{margin-top:28px}.mdc-skeleton--active .mdc-skeleton-avatar,.mdc-skeleton--active .mdc-skeleton-paragraph>li,.mdc-skeleton--active .mdc-skeleton-title{background:linear-gradient(90deg,#f2f2f2 25%,#dadada 37%,#f2f2f2 63%);background-size:400% 100%;animation:mdc-skeleton-loading 1.4s ease infinite}.mdc-data-table__header-row-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background,.mdc-data-table__row-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{background-color:#fff;background-color:var(--mdc-theme-background,#fff)}.mdc-data-table--fullwidth{display:flex;width:100%}.mdc-data-table__cell--left{text-align:left}.mdc-data-table__cell--center{text-align:center}.mdc-data-table__cell--right{text-align:right}.mdc-data-table__footer-row{border-top:1px solid rgba(0,0,0,.12)}.mdc-data-table__footer-row .mdc-data-table__cell{font-weight:700}.mdc-data-table__header-cell-label{align-items:center;display:inline-flex;vertical-align:middle}@media (max-width:599px){.mdc-data-table{width:100%}}.mdc-data-table__header-cell--scrollbar{position:sticky;right:0;width:0;border-right-color:transparent}.mdc-data-table--fixed{width:100%}.mdc-data-table--fixed .mdc-data-table__cell{background-color:#fff;z-index:1}.mdc-data-table__fixed-footer,.mdc-data-table__fixed-header{overflow:hidden}.mdc-data-table__fixed-footer table,.mdc-data-table__fixed-header table{position:relative;width:100%}.mdc-data-table__fixed-body{overflow:auto}.mdc-data-table__fixed-body table{min-width:100%}.mdc-panels .mdc-panel{display:none}.mdc-panels .mdc-panel.active{display:block}.mdc-divider{display:flex;justify-content:space-around;align-items:center}.mdc-divider__text{display:inline-flex;justify-content:space-between;align-items:center}.mdc-divider__text:after,.mdc-divider__text:before{display:block;content:""}.mdc-divider__text span{display:inline-block;flex-shrink:0;font-size:inherit;text-transform:uppercase}.mdc-divider--horizontal{width:100%}.mdc-divider--horizontal.mdc-divider--no-text{height:2px;background-color:rgba(0,0,0,.12)}.mdc-divider--horizontal .mdc-divider__text{width:100%}.mdc-divider--horizontal .mdc-divider__text:after,.mdc-divider--horizontal .mdc-divider__text:before{width:50%;height:2px;background-color:rgba(0,0,0,.12)}.mdc-divider--horizontal .mdc-divider__text>span{padding:8px 16px}.mdc-divider--vertical{height:100%}.mdc-divider--vertical .mdc-divider__text{height:100%;flex-direction:column}.mdc-divider--vertical .mdc-divider__text:after,.mdc-divider--vertical .mdc-divider__text:before{width:2px;height:50%;background-color:rgba(0,0,0,.12)}.mdc-divider--vertical .mdc-divider__text>span{padding:16px 8px}.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;box-sizing:border-box;touch-action:manipulation;background:#fff;box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,.08)}.flatpickr-calendar.inline,.flatpickr-calendar.open{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{animation:fpFadeInDown .3s cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasTime .dayContainer,.flatpickr-calendar .hasWeeks .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:after,.flatpickr-calendar:before{position:absolute;display:block;pointer-events:none;border:solid transparent;content:"";height:0;width:0;left:22px}.flatpickr-calendar.arrowRight:after,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.rightMost:before{left:auto;right:22px}.flatpickr-calendar.arrowCenter:after,.flatpickr-calendar.arrowCenter:before{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowTop:before{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:after,.flatpickr-calendar.arrowBottom:before{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:transparent;line-height:1;text-align:center;position:relative;overflow:hidden;flex:1}.flatpickr-months .flatpickr-month,.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{color:rgba(0,0,0,.9);fill:rgba(0,0,0,.9);height:34px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{text-decoration:none;cursor:pointer;position:absolute;top:0;padding:10px;z-index:3}.flatpickr-months .flatpickr-next-month.flatpickr-disabled,.flatpickr-months .flatpickr-prev-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-next-month i,.flatpickr-months .flatpickr-prev-month i{position:relative}.flatpickr-months .flatpickr-next-month.flatpickr-prev-month,.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month{left:0}.flatpickr-months .flatpickr-next-month.flatpickr-next-month,.flatpickr-months .flatpickr-prev-month.flatpickr-next-month{right:0}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:#959ea9}.flatpickr-months .flatpickr-next-month:hover svg,.flatpickr-months .flatpickr-prev-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-next-month svg path,.flatpickr-months .flatpickr-prev-month svg path{transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-inner-spin-button,.numInputWrapper input::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,.15);box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,.1)}.numInputWrapper span:active{background:rgba(0,0,0,.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,.5)}.numInputWrapper:hover{background:rgba(0,0,0,.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0;line-height:1;height:34px;display:inline-block;text-align:center;transform:translateZ(0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0 ;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,.9)}.flatpickr-current-month input.cur-year{background:transparent;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:active,.flatpickr-current-month .flatpickr-monthDropdown-months:focus{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,.54);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0}.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;-ms-flex-wrap:wrap;justify-content:space-around;transform:translateZ(0);opacity:1}.dayContainer+.dayContainer{box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus,.flatpickr-day:hover{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:focus,.flatpickr-day.today:hover{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover{background:#569ff7;box-shadow:none;border-color:#569ff7}.flatpickr-day.endRange.startRange,.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.endRange.endRange,.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)){box-shadow:-10px 0 0 #569ff7}.flatpickr-day.endRange.startRange.endRange,.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:rgba(57,57,57,.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,.1)}.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:700}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-am-pm,.flatpickr-time .flatpickr-time-separator{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:700;width:2%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time .flatpickr-am-pm:focus,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time input:hover{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@keyframes fpFadeInDown{0%{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translateZ(0)}}.flatpickr-monthSelect-months{margin:10px 1px 3px;flex-wrap:wrap}.flatpickr-monthSelect-month{background:none;border:1px solid transparent;border-radius:4px;box-sizing:border-box;color:#393939;cursor:pointer;display:inline-block;font-weight:400;margin:.5px;justify-content:center;padding:10px;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;text-align:center;width:33%}.flatpickr-monthSelect-month.flatpickr-disabled{color:#eee}.flatpickr-monthSelect-month.flatpickr-disabled:focus,.flatpickr-monthSelect-month.flatpickr-disabled:hover{cursor:not-allowed;background:none!important}.flatpickr-monthSelect-theme-dark{background:#3f4458}.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year{color:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month,.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month{color:#fff;fill:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month{color:hsla(0,0%,100%,.95)}.flatpickr-monthSelect-month.today{border-color:#959ea9}.flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-month.inRange.today,.flatpickr-monthSelect-month:focus,.flatpickr-monthSelect-month:hover{background:#e6e6e6;cursor:pointer;outline:0;border-color:#e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover{background:#646c8c;border-color:#646c8c}.flatpickr-monthSelect-month.today:focus,.flatpickr-monthSelect-month.today:hover{background:#959ea9;border-color:#959ea9;color:#fff}.flatpickr-monthSelect-month.endRange,.flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-month.startRange{background-color:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-monthSelect-month.startRange{border-radius:50px 0 0 50px}.flatpickr-monthSelect-month.endRange{border-radius:0 50px 50px 0}.flatpickr-monthSelect-month.startRange.endRange{border-radius:50px}.flatpickr-monthSelect-month.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange{background:#80cbc4;box-shadow:none;color:#fff;border-color:#80cbc4}.flatpickr-calendar.open{box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover,.flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff);border-color:#6200ee;border-color:var(--mdc-theme-primary,#6200ee)}.mdc-datepicker .mdc-datepicker__icon{display:inline-flex;justify-content:space-around;align-items:center;width:48px;pointer-events:auto}.mdc-datepicker .mdc-datepicker__icon>span{cursor:pointer}.mdc-datepicker .mdc-datepicker__icon>span svg{width:16px;height:16px}.mdc-datepicker .flatpickr-mobile{min-width:180px}.mdc-rangepicker,.mdc-rangepicker__separator{display:inline-flex;align-items:center}.mdc-rangepicker__separator{justify-content:center;height:56px;padding:8px}.mdc-rangepicker__end .mdc-text-field__input{cursor:pointer}.mdc-bottom-navigation--fixed-adjust{padding-bottom:48px}.mdc-bottom-navigation--stacked-fixed-adjust{padding-bottom:72px}.mdc-bottom-navigation{position:fixed;right:0;bottom:0;left:0;z-index:4;height:48px;background-color:#fff;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-bottom-navigation.mdc-bottom-navigation--stacked{height:72px}.mdc-bottom-navigation .mdc-tab__content,.mdc-bottom-navigation .mdc-tab__text-label{color:#6200ee}.mdc-bottom-navigation .mdc-tab--active{color:rgba(98,0,238,.87)}.mdc-bottom-navigation .mdc-tab-scroller__scroll-content{width:100%}.mdc-bottom-navigation--dest-33 .mdc-tab{width:33%}.mdc-bottom-navigation--dest-25 .mdc-tab{width:25%}.mdc-bottom-navigation--dest-20 .mdc-tab{width:20%}.mdc-circular-progress__spinner-layer{display:flex}.mdc-circular-progress__circle-clipper{display:inline-flex}.mdc-circular-progress__color-1 .mdc-circular-progress__indeterminate-circle-graphic{stroke:#4285f4}.mdc-circular-progress__color-2 .mdc-circular-progress__indeterminate-circle-graphic{stroke:#db4437}.mdc-circular-progress__color-3 .mdc-circular-progress__indeterminate-circle-graphic{stroke:#f4b400}.mdc-circular-progress__color-4 .mdc-circular-progress__indeterminate-circle-graphic{stroke:#0f9d58}.mdc-circular-progress--large{width:48px;height:48px}.mdc-circular-progress--medium{width:36px;height:36px}.mdc-circular-progress--small{width:24px;height:24px}.mdc-menu .mdc-deprecated-list{color:inherit}.mdc-menu :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:after,.mdc-menu :not(.mdc-deprecated-list-item--disabled).mdc-deprecated-list-item .mdc-deprecated-list-item__ripple:before{background-color:currentColor}.mdc-menu-surface--absolute{position:absolute}.mdc-menu-surface :not(.mdc-deprecated-list-item--disabled).mdc-menu-item--selected{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-menu-surface :not(.mdc-deprecated-list-item--disabled).mdc-menu-item--selected .mdc-deprecated-list-item__graphic{color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-select--fullwidth{display:flex;width:100%}.mdc-select__menu .mdc-deprecated-list .mdc-deprecated-list-item--selected{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee);color:#fff;color:var(--mdc-theme-on-primary,#fff)}.mdc-select--in-dialog .mdc-select__menu{position:fixed!important;top:0!important;right:0;bottom:0!important;left:0!important;flex-direction:row;align-items:center;justify-content:space-around;max-width:100vw!important;max-height:100vh!important;background-color:transparent;box-shadow:none}.mdc-select--in-dialog .mdc-select__menu .mdc-deprecated-list{z-index:6;width:560px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);background-color:#fff;background-color:var(--mdc-theme-surface,#fff);color:#000;color:var(--mdc-theme-on-surface,#000);border-radius:4px;border-radius:var(--mdc-shape-medium,4px)}.mdc-select--in-dialog .mdc-select__menu.mdc-menu-surface--open{display:flex}.mdc-select--in-dialog .mdc-select__menu.mdc-menu-surface--open .mdc-drawer-scrim{display:block;background-color:rgba(0,0,0,.32)}.mdc-select--in-dialog .mdc-select__menu.mdc-menu-surface--open .mdc-deprecated-list{max-height:100%;overflow-y:scroll}@media (max-width:599px){.mdc-select--in-dialog .mdc-select__menu .mdc-deprecated-list{width:100%}}.mdc-alert{display:flex;align-items:center;margin-bottom:16px;padding:8px 16px;border-radius:2px;transition:opacity .15s linear}.mdc-alert .mdc-alert__icon{margin-right:8px}.mdc-alert.mdc-alert--success{background-color:rgba(15,157,88,.12);border:1px solid rgba(15,157,88,.5)}.mdc-alert.mdc-alert--info{background-color:rgba(66,133,244,.12);border:1px solid rgba(66,133,244,.5)}.mdc-alert.mdc-alert--warning{background-color:rgba(244,180,0,.12);border:1px solid rgba(244,180,0,.5)}.mdc-alert.mdc-alert--error{background-color:rgba(219,68,55,.12);border:1px solid rgba(219,68,55,.5)}.mdc-alert.mdc-alert--closed{opacity:0}.mdc-alert__content{flex:1}.mdc-alert__close-button{font-size:18px;color:rgba(0,0,0,.45);transition:color .3s}.mdc-alert__close-button:hover{color:rgba(0,0,0,.75)}.mdc-collapse{display:flex;flex-direction:column;margin-bottom:0}.mdc-collapse__header{display:flex;align-items:center;align-self:flex-start;margin-bottom:0}.mdc-collapse__icon{margin-right:8px}.mdc-collapse__content,.mdc-collapse__title{padding:8px 0}.mdc-collapse--with-icon .mdc-collapse__header{align-self:auto}.mdc-collapse--with-icon .mdc-collapse__content{padding-left:32px}.mdc-collapse--icon-end-aligned .mdc-collapse__header{justify-content:space-between}.mdc-collapse--icon-end-aligned .mdc-collapse__title{order:-1}.mdc-badge{position:relative;display:inline-flex;align-items:center}.mdc-badge__sup{overflow:hidden;height:20px;line-height:20px;padding:0 6px;border-radius:10px;white-space:nowrap;font-size:12px;background-color:#db4437;color:#fff}.mdc-badge__sup.mdc-badge__sup--dot{height:auto;line-height:normal;padding:6px;border-radius:50%}.mdc-badge__sup.mdc-badge__sup--success{background-color:#0f9d58;color:#fff}.mdc-badge__sup.mdc-badge__sup--info{background-color:#4285f4;color:#fff}.mdc-badge__sup.mdc-badge__sup--warning{background-color:#f4b400;color:#fff}.mdc-badge__sup.mdc-badge__sup--error{background-color:#db4437;color:#fff}.mdc-badge__sup.mdc-badge__sup--hide{display:none}.mdc-badge--overlap .mdc-badge__sup{position:absolute;top:0;right:0;transform:translate(50%,-50%)}.mdc-layout-grid__inner{height:100%}.mdc-drawer .mdc-deprecated-list-item--activated,.mdc-drawer .mdc-deprecated-list-item--activated .mdc-deprecated-list-item__graphic{color:#6200ee;color:var(--mdc-theme-primary,#6200ee)}.mdc-drawer .mdc-deprecated-list-item--activated[class*=mdc-theme--text-],.mdc-drawer .mdc-deprecated-list-item--activated [class*=mdc-theme--text-]{color:#6200ee!important;color:var(--mdc-theme-primary,#6200ee)!important}.mdc-deprecated-list--non-interactive .mdc-deprecated-list-item{cursor:default} /*! * Quill Editor v1.3.7 @@ -12,9 +12,9 @@ * https://quilljs.com/ * Copyright (c) 2014, Jason Chen * Copyright (c) 2013, salesforce.com - */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;-o-tab-size:4;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6,.ql-editor ol,.ql-editor p,.ql-editor pre,.ql-editor ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:"•"}.ql-editor ul[data-checked=false],.ql-editor ul[data-checked=true]{pointer-events:none}.ql-editor ul[data-checked=false]>li *,.ql-editor ul[data-checked=true]>li *{pointer-events:all}.ql-editor ul[data-checked=false]>li:before,.ql-editor ul[data-checked=true]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:"☑"}.ql-editor ul[data-checked=false]>li:before{content:"☐"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) ". "}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) ". "}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) ". "}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) ". "}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) ". "}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) ". "}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) ". "}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) ". "}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) ". "}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) ". "}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:rgba(0,0,0,.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-bubble.ql-toolbar:after,.ql-bubble .ql-toolbar:after{clear:both;content:"";display:table}.ql-bubble.ql-toolbar button,.ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-bubble.ql-toolbar button svg,.ql-bubble .ql-toolbar button svg{float:left;height:100%}.ql-bubble.ql-toolbar button:active:hover,.ql-bubble .ql-toolbar button:active:hover{outline:none}.ql-bubble.ql-toolbar input.ql-image[type=file],.ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected,.ql-bubble.ql-toolbar .ql-picker-item:hover,.ql-bubble .ql-toolbar .ql-picker-item:hover,.ql-bubble.ql-toolbar .ql-picker-label.ql-active,.ql-bubble .ql-toolbar .ql-picker-label.ql-active,.ql-bubble.ql-toolbar .ql-picker-label:hover,.ql-bubble .ql-toolbar .ql-picker-label:hover,.ql-bubble.ql-toolbar button.ql-active,.ql-bubble .ql-toolbar button.ql-active,.ql-bubble.ql-toolbar button:focus,.ql-bubble .ql-toolbar button:focus,.ql-bubble.ql-toolbar button:hover,.ql-bubble .ql-toolbar button:hover{color:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:focus .ql-fill,.ql-bubble .ql-toolbar button:focus .ql-fill,.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:hover .ql-fill,.ql-bubble .ql-toolbar button:hover .ql-fill,.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill{fill:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble.ql-toolbar button.ql-active .ql-stroke,.ql-bubble .ql-toolbar button.ql-active .ql-stroke,.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar button:focus .ql-stroke,.ql-bubble .ql-toolbar button:focus .ql-stroke,.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,.ql-bubble.ql-toolbar button:hover .ql-stroke,.ql-bubble .ql-toolbar button:hover .ql-stroke,.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover .ql-stroke-miter{stroke:#fff}@media (pointer:coarse){.ql-bubble.ql-toolbar button:hover:not(.ql-active),.ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}.ql-bubble,.ql-bubble *{box-sizing:border-box}.ql-bubble .ql-hidden{display:none}.ql-bubble .ql-out-bottom,.ql-bubble .ql-out-top{visibility:hidden}.ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-bubble .ql-formats{display:inline-block;vertical-align:middle}.ql-bubble .ql-formats:after{clear:both;content:"";display:table}.ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}.ql-bubble .ql-fill,.ql-bubble .ql-stroke.ql-fill{fill:#ccc}.ql-bubble .ql-empty{fill:none}.ql-bubble .ql-even{fill-rule:evenodd}.ql-bubble .ql-stroke.ql-thin,.ql-bubble .ql-thin{stroke-width:1}.ql-bubble .ql-transparent{opacity:.4}.ql-bubble .ql-direction svg:last-child{display:none}.ql-bubble .ql-direction.ql-active svg:last-child{display:inline}.ql-bubble .ql-direction.ql-active svg:first-child{display:none}.ql-bubble .ql-editor h1{font-size:2em}.ql-bubble .ql-editor h2{font-size:1.5em}.ql-bubble .ql-editor h3{font-size:1.17em}.ql-bubble .ql-editor h4{font-size:1em}.ql-bubble .ql-editor h5{font-size:.83em}.ql-bubble .ql-editor h6{font-size:.67em}.ql-bubble .ql-editor a{text-decoration:underline}.ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-bubble .ql-editor code,.ql-bubble .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-bubble .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}.ql-bubble .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-bubble .ql-editor img{max-width:100%}.ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-bubble .ql-picker-label:before{display:inline-block;line-height:22px}.ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-bubble .ql-color-picker,.ql-bubble .ql-icon-picker{width:28px}.ql-bubble .ql-color-picker .ql-picker-label,.ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-label svg,.ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}.ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""]):before{content:attr(data-label)}.ql-bubble .ql-picker.ql-header{width:98px}.ql-bubble .ql-picker.ql-header .ql-picker-item:before,.ql-bubble .ql-picker.ql-header .ql-picker-label:before{content:"Normal"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]:before{content:"Heading 1"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]:before{content:"Heading 2"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]:before{content:"Heading 3"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]:before{content:"Heading 4"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]:before{content:"Heading 5"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]:before{content:"Heading 6"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before{font-size:2em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before{font-size:1.5em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before{font-size:1.17em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before{font-size:1em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before{font-size:.83em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before{font-size:.67em}.ql-bubble .ql-picker.ql-font{width:108px}.ql-bubble .ql-picker.ql-font .ql-picker-item:before,.ql-bubble .ql-picker.ql-font .ql-picker-label:before{content:"Sans Serif"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before{content:"Serif"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before{content:"Monospace"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-bubble .ql-picker.ql-size{width:98px}.ql-bubble .ql-picker.ql-size .ql-picker-item:before,.ql-bubble .ql-picker.ql-size .ql-picker-label:before{content:"Normal"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before{content:"Small"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before{content:"Large"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before{content:"Huge"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}.ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}.ql-bubble .ql-color-picker svg{margin:1px}.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,.ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}.ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}.ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:" ";display:block;left:50%;margin-left:-6px;position:absolute}.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}.ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}.ql-bubble .ql-tooltip-editor{display:none}.ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}.ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}.ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:"×";font-size:16px;font-weight:700}.ql-container.ql-bubble:not(.ql-disabled) a{position:relative;white-space:nowrap}.ql-container.ql-bubble:not(.ql-disabled) a:before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:400;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}.ql-container.ql-bubble:not(.ql-disabled) a:after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:" ";height:0;width:0}.ql-container.ql-bubble:not(.ql-disabled) a:after,.ql-container.ql-bubble:not(.ql-disabled) a:before{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease .2s;visibility:hidden}.ql-container.ql-bubble:not(.ql-disabled) a:hover:after,.ql-container.ql-bubble:not(.ql-disabled) a:hover:before{visibility:visible}.ql-snow .ql-picker.ql-font .ql-picker-label:before{content:"Font Famliy"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value]:before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-value]:before{content:attr(data-value)}.ql-snow .ql-picker.ql-font .ql-picker-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ql-picker-item[data-value=Arial]:before{font-family:Arial}.ql-picker-item[data-value="Arial Black"]:before{font-family:Arial Black}.ql-picker-item[data-value="Comic Sans MS"]:before{font-family:Comic Sans MS}.ql-picker-item[data-value="Courier New"]:before{font-family:Courier New}.ql-picker-item[data-value=Tahoma]:before{font-family:Tahoma}.ql-picker-item[data-value=Georgia]:before{font-family:Georgia}.ql-picker-item[data-value=Helvetica]:before{font-family:Helvetica}.ql-picker-item[data-value="Segoe UI"]:before{font-family:Segoe UI}.ql-picker-item[data-value=Sans-Serif]:before{font-family:"Sans-Serif"}.ql-picker-item[data-value=Impact]:before{font-family:Impact}.ql-picker-item[data-value="Times New Roman"]:before{font-family:Times New Roman}.ql-picker-item[data-value=Verdana]:before{font-family:Verdana}.ql-snow .ql-picker.ql-size .ql-picker-label:before{content:"Font Size"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]:before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]:before{content:attr(data-value)}.ql-snow .ql-picker.ql-lineheight{width:98px}.ql-snow .ql-picker.ql-lineheight .ql-picker-label:before{content:"Line Height"}.ql-snow .ql-picker.ql-lineheight .ql-picker-item:before{content:"Normal"}.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value]:before,.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value]:before{content:attr(data-value)}.mdc-editor-counter{border:1px solid #ccc;border-top:0 solid #ccc;color:#aaa;padding:5px 15px;text-align:right}#ql-emoji-toolbar{display:flex;flex-direction:column;position:absolute;z-index:4;width:280px;height:220px;border:1px solid rgba(0,0,0,.15);border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,.12);background-color:#fff}#ql-emoji-toolbar-close{position:absolute;top:0;right:0;font-size:18px;cursor:pointer}.ql-emoji-tab-bar{width:100%;overflow-y:hidden;background-color:#f7f7f7;border-bottom:1px solid rgba(0,0,0,.15)}.ql-emoji-tab-scroller{display:flex;overflow-x:auto;padding-right:18px}.ql-emoji-tab-content{display:flex;margin:0;padding:4px 4px 0}.ql-emoji-tab{list-style:none;padding:0 8px;text-transform:uppercase}.ql-emoji-tab.ql-emoji-tab--active{border-bottom:2px solid #6200ee}.ql-emoji-panel{display:flex;flex-wrap:wrap;flex:1;align-content:flex-start;overflow-y:scroll;padding:8px;background-color:#fff}.ql-emoji-panel .ql-emoji{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px}.ql-emoji-panel .ql-emoji em,.ql-emoji-panel .ql-emoji img{width:20px;height:20px}.ql-emoji-panel .ql-emoji em{font-style:normal;font-size:18px}.mdc-editor.ql-snow .ql-editor{height:100%}.mdc-editor.ql-bubble .ql-editor{height:100px}.ql-bubble .ql-editor{border:1px solid #ccc}.ql-toolbar .material-icons{font-size:18px}.ql-bubble.ql-toolbar button,.ql-bubble .ql-toolbar button{color:#ccc}.mdc-tooltip__surface{display:inline-flex;align-items:center}.mdc-slider{width:100%}.mdc-dialog__title--closable{position:relative}.mdc-dialog__title--closable .mdc-icon-button{position:absolute;top:0;right:0;width:36px;height:36px;padding:9px;font-size:18px}.mdc-dialog__content .mdc-select__menu .mdc-deprecated-list:first-child:last-child{padding:8px 0}.mdc-tree{display:flex;flex-direction:column;width:100%}.mdc-tree ul{margin:0;padding:0}.mdc-tree-node{display:flex;flex-direction:column}.mdc-tree-node__content{display:flex;align-items:center;margin-bottom:4px}.mdc-tree-node__content:not(.mdc-tree-node--selected):hover{background:rgba(0,0,0,.04)}.mdc-tree-node__content.mdc-tree-node--selected{background-color:rgba(98,0,238,.12);color:#000}.mdc-tree-node__indent{align-self:stretch;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mdc-tree-node__indent-unit{display:inline-block;width:24px}.mdc-tree-node__icon{width:24px;cursor:pointer}.mdc-tree-node__label{flex:1;padding:8px 0}.mdc-snackbar--center{top:50%;right:auto;bottom:auto;left:50%;transform:translateX(-50%) translateY(-50%)}.mdc-snackbar--top{top:0;bottom:auto}@keyframes slideInDown{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.mdc-bottom-sheet,.mdc-bottom-sheet__scrim{position:fixed;top:0;left:0;box-sizing:border-box;width:100%;height:100%}.mdc-bottom-sheet{display:none;z-index:7}.mdc-bottom-sheet.mdc-bottom-sheet--open{display:block}.mdc-bottom-sheet__scrim{opacity:0;z-index:-1;background-color:rgba(0,0,0,.32)}.mdc-bottom-sheet__content{position:fixed;bottom:0;left:0;backface-visibility:hidden;width:100%;background-color:#fff;border-top-left-radius:0;border-top-right-radius:0;overflow:hidden;animation-duration:.3s;animation-fill-mode:both;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-bottom-sheet--open .mdc-bottom-sheet__scrim{opacity:1}.mdc-bottom-sheet--open .mdc-bottom-sheet__content{animation-name:slideInDown}.mdc-bottom-sheet--closing .mdc-bottom-sheet__content{animation-name:slideOutDown}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateX(0)}}@keyframes slideOutRight{0%{transform:translateX(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.mdc-side-sheet,.mdc-side-sheet__scrim{position:fixed;top:0;right:0;box-sizing:border-box;width:100%;height:100%}.mdc-side-sheet{display:none;z-index:7}.mdc-side-sheet.mdc-side-sheet--open{display:block}.mdc-side-sheet__scrim{opacity:0;z-index:-1;background-color:rgba(0,0,0,.32)}.mdc-side-sheet__container{position:fixed;top:0;right:0;backface-visibility:hidden;display:flex;flex-direction:column;width:40%;height:100%;background-color:#fff;border-top-left-radius:0;border-bottom-left-radius:0;overflow:hidden;animation-duration:.3s;animation-fill-mode:both;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-side-sheet--open .mdc-side-sheet__scrim{opacity:1}.mdc-side-sheet--open .mdc-side-sheet__container{animation-name:slideInRight}.mdc-side-sheet--closing .mdc-side-sheet__container{animation-name:slideOutRight}@media (max-width:599px){.mdc-side-sheet__container{width:80%}}.mdc-side-sheet__wrapper{flex:1;padding:24px 24px 0 16px}.mdc-side-sheet__header{display:flex;justify-content:space-between;align-items:center}.mdc-side-sheet__title{margin:0}.mdc-side-sheet__actions{border-top:1px solid rgba(0,0,0,.12);padding:12px 24px}.mdc-alert-dialog .mdc-dialog__surface{width:450px}.mdc-alert-dialog .mdc-dialog__content{display:flex}.mdc-alert-dialog .mdc-alert-dialog__icon{margin-right:8px}.mdc-alert-dialog .mdc-dialog__actions{justify-content:center}.mdc-confirm-dialog .mdc-dialog__surface{width:450px}.mdc-confirm-dialog .mdc-dialog__content{display:flex}.mdc-confirm-dialog .mdc-confirm-dialog__icon{margin-right:8px}.mdc-confirm-dialog .mdc-dialog__actions{justify-content:center}.mdc-confirm-dialog .mdc-button{margin:0 8px}.mdc-toast--center{top:50%;right:auto;bottom:auto;left:50%;transform:translateX(-50%) translateY(-50%)}.mdc-toast--top{top:0;bottom:auto}.mdc-ripple-surface.material-icons{box-sizing:content-box}.mdc-ripple-surface.mdc-ripple-surface--primary:after,.mdc-ripple-surface.mdc-ripple-surface--primary:before{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.mdc-ripple-surface.mdc-ripple-surface--secondary:after,.mdc-ripple-surface.mdc-ripple-surface--secondary:before{background-color:#018786;background-color:var(--mdc-theme-secondary,#018786)}.mdc-shape--rounded.mdc-shape--medium,.mdc-shape--rounded.mdc-shape--small{border-radius:4px}.mdc-shape--rounded.mdc-shape--large{border-radius:0}.mdc-shape--cut.mdc-shape--medium,.mdc-shape--cut.mdc-shape--small{-webkit-clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px));clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px))}.mdc-shape--cut.mdc-shape--large{-webkit-clip-path:polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%);clip-path:polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%)} + */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;-o-tab-size:4;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6,.ql-editor ol,.ql-editor p,.ql-editor pre,.ql-editor ul{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:"•"}.ql-editor ul[data-checked=false],.ql-editor ul[data-checked=true]{pointer-events:none}.ql-editor ul[data-checked=false]>li *,.ql-editor ul[data-checked=true]>li *{pointer-events:all}.ql-editor ul[data-checked=false]>li:before,.ql-editor ul[data-checked=true]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:"☑"}.ql-editor ul[data-checked=false]>li:before{content:"☐"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) ". "}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) ". "}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) ". "}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) ". "}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) ". "}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) ". "}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) ". "}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) ". "}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) ". "}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) ". "}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:rgba(0,0,0,.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-bubble.ql-toolbar:after,.ql-bubble .ql-toolbar:after{clear:both;content:"";display:table}.ql-bubble.ql-toolbar button,.ql-bubble .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-bubble.ql-toolbar button svg,.ql-bubble .ql-toolbar button svg{float:left;height:100%}.ql-bubble.ql-toolbar button:active:hover,.ql-bubble .ql-toolbar button:active:hover{outline:none}.ql-bubble.ql-toolbar input.ql-image[type=file],.ql-bubble .ql-toolbar input.ql-image[type=file]{display:none}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected,.ql-bubble.ql-toolbar .ql-picker-item:hover,.ql-bubble .ql-toolbar .ql-picker-item:hover,.ql-bubble.ql-toolbar .ql-picker-label.ql-active,.ql-bubble .ql-toolbar .ql-picker-label.ql-active,.ql-bubble.ql-toolbar .ql-picker-label:hover,.ql-bubble .ql-toolbar .ql-picker-label:hover,.ql-bubble.ql-toolbar button.ql-active,.ql-bubble .ql-toolbar button.ql-active,.ql-bubble.ql-toolbar button:focus,.ql-bubble .ql-toolbar button:focus,.ql-bubble.ql-toolbar button:hover,.ql-bubble .ql-toolbar button:hover{color:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-fill,.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:focus .ql-fill,.ql-bubble .ql-toolbar button:focus .ql-fill,.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-bubble.ql-toolbar button:hover .ql-fill,.ql-bubble .ql-toolbar button:hover .ql-fill,.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill{fill:#fff}.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-bubble.ql-toolbar button.ql-active .ql-stroke,.ql-bubble .ql-toolbar button.ql-active .ql-stroke,.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,.ql-bubble.ql-toolbar button:focus .ql-stroke,.ql-bubble .ql-toolbar button:focus .ql-stroke,.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,.ql-bubble.ql-toolbar button:hover .ql-stroke,.ql-bubble .ql-toolbar button:hover .ql-stroke,.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover .ql-stroke-miter{stroke:#fff}@media (pointer:coarse){.ql-bubble.ql-toolbar button:hover:not(.ql-active),.ql-bubble .ql-toolbar button:hover:not(.ql-active){color:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#ccc}.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#ccc}}.ql-bubble,.ql-bubble *{box-sizing:border-box}.ql-bubble .ql-hidden{display:none}.ql-bubble .ql-out-bottom,.ql-bubble .ql-out-top{visibility:hidden}.ql-bubble .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-bubble .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-bubble .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-bubble .ql-formats{display:inline-block;vertical-align:middle}.ql-bubble .ql-formats:after{clear:both;content:"";display:table}.ql-bubble .ql-stroke{fill:none;stroke:#ccc;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-bubble .ql-stroke-miter{fill:none;stroke:#ccc;stroke-miterlimit:10;stroke-width:2}.ql-bubble .ql-fill,.ql-bubble .ql-stroke.ql-fill{fill:#ccc}.ql-bubble .ql-empty{fill:none}.ql-bubble .ql-even{fill-rule:evenodd}.ql-bubble .ql-stroke.ql-thin,.ql-bubble .ql-thin{stroke-width:1}.ql-bubble .ql-transparent{opacity:.4}.ql-bubble .ql-direction svg:last-child{display:none}.ql-bubble .ql-direction.ql-active svg:last-child{display:inline}.ql-bubble .ql-direction.ql-active svg:first-child{display:none}.ql-bubble .ql-editor h1{font-size:2em}.ql-bubble .ql-editor h2{font-size:1.5em}.ql-bubble .ql-editor h3{font-size:1.17em}.ql-bubble .ql-editor h4{font-size:1em}.ql-bubble .ql-editor h5{font-size:.83em}.ql-bubble .ql-editor h6{font-size:.67em}.ql-bubble .ql-editor a{text-decoration:underline}.ql-bubble .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-bubble .ql-editor code,.ql-bubble .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-bubble .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-bubble .ql-editor code{font-size:85%;padding:2px 4px}.ql-bubble .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-bubble .ql-editor img{max-width:100%}.ql-bubble .ql-picker{color:#ccc;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-bubble .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-bubble .ql-picker-label:before{display:inline-block;line-height:22px}.ql-bubble .ql-picker-options{background-color:#444;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-bubble .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-bubble .ql-picker.ql-expanded .ql-picker-label{color:#777;z-index:2}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#777}.ql-bubble .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-bubble .ql-color-picker,.ql-bubble .ql-icon-picker{width:28px}.ql-bubble .ql-color-picker .ql-picker-label,.ql-bubble .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-label svg,.ql-bubble .ql-icon-picker .ql-picker-label svg{right:4px}.ql-bubble .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-bubble .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-bubble .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-bubble .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""]):before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""]):before{content:attr(data-label)}.ql-bubble .ql-picker.ql-header{width:98px}.ql-bubble .ql-picker.ql-header .ql-picker-item:before,.ql-bubble .ql-picker.ql-header .ql-picker-label:before{content:"Normal"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]:before{content:"Heading 1"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]:before{content:"Heading 2"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]:before{content:"Heading 3"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]:before{content:"Heading 4"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]:before{content:"Heading 5"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before,.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]:before{content:"Heading 6"}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]:before{font-size:2em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]:before{font-size:1.5em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]:before{font-size:1.17em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]:before{font-size:1em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]:before{font-size:.83em}.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]:before{font-size:.67em}.ql-bubble .ql-picker.ql-font{width:108px}.ql-bubble .ql-picker.ql-font .ql-picker-item:before,.ql-bubble .ql-picker.ql-font .ql-picker-label:before{content:"Sans Serif"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]:before{content:"Serif"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before,.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before{content:"Monospace"}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-bubble .ql-picker.ql-size{width:98px}.ql-bubble .ql-picker.ql-size .ql-picker-item:before,.ql-bubble .ql-picker.ql-size .ql-picker-label:before{content:"Normal"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]:before{content:"Small"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]:before{content:"Large"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before,.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]:before{content:"Huge"}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-bubble .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-bubble .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-bubble .ql-toolbar .ql-formats{margin:8px 12px 8px 0}.ql-bubble .ql-toolbar .ql-formats:first-child{margin-left:12px}.ql-bubble .ql-color-picker svg{margin:1px}.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,.ql-bubble .ql-color-picker .ql-picker-item:hover{border-color:#fff}.ql-bubble .ql-tooltip{background-color:#444;border-radius:25px;color:#fff}.ql-bubble .ql-tooltip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;content:" ";display:block;left:50%;margin-left:-6px;position:absolute}.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow{border-bottom:6px solid #444;top:-6px}.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow{border-top:6px solid #444;bottom:-6px}.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor{display:block}.ql-bubble .ql-tooltip.ql-editing .ql-formats{visibility:hidden}.ql-bubble .ql-tooltip-editor{display:none}.ql-bubble .ql-tooltip-editor input[type=text]{background:transparent;border:none;color:#fff;font-size:13px;height:100%;outline:none;padding:10px 20px;position:absolute;width:100%}.ql-bubble .ql-tooltip-editor a{top:10px;position:absolute;right:20px}.ql-bubble .ql-tooltip-editor a:before{color:#ccc;content:"×";font-size:16px;font-weight:700}.ql-container.ql-bubble:not(.ql-disabled) a{position:relative;white-space:nowrap}.ql-container.ql-bubble:not(.ql-disabled) a:before{background-color:#444;border-radius:15px;top:-5px;font-size:12px;color:#fff;content:attr(href);font-weight:400;overflow:hidden;padding:5px 15px;text-decoration:none;z-index:1}.ql-container.ql-bubble:not(.ql-disabled) a:after{border-top:6px solid #444;border-left:6px solid transparent;border-right:6px solid transparent;top:0;content:" ";height:0;width:0}.ql-container.ql-bubble:not(.ql-disabled) a:after,.ql-container.ql-bubble:not(.ql-disabled) a:before{left:0;margin-left:50%;position:absolute;transform:translate(-50%,-100%);transition:visibility 0s ease .2s;visibility:hidden}.ql-container.ql-bubble:not(.ql-disabled) a:hover:after,.ql-container.ql-bubble:not(.ql-disabled) a:hover:before{visibility:visible}.ql-snow .ql-picker.ql-font .ql-picker-label:before{content:"Font Famliy"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value]:before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-value]:before{content:attr(data-value)}.ql-snow .ql-picker.ql-font .ql-picker-label{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.ql-picker-item[data-value=Arial]:before{font-family:Arial}.ql-picker-item[data-value="Arial Black"]:before{font-family:Arial Black}.ql-picker-item[data-value="Comic Sans MS"]:before{font-family:Comic Sans MS}.ql-picker-item[data-value="Courier New"]:before{font-family:Courier New}.ql-picker-item[data-value=Tahoma]:before{font-family:Tahoma}.ql-picker-item[data-value=Georgia]:before{font-family:Georgia}.ql-picker-item[data-value=Helvetica]:before{font-family:Helvetica}.ql-picker-item[data-value="Segoe UI"]:before{font-family:Segoe UI}.ql-picker-item[data-value=Sans-Serif]:before{font-family:"Sans-Serif"}.ql-picker-item[data-value=Impact]:before{font-family:Impact}.ql-picker-item[data-value="Times New Roman"]:before{font-family:Times New Roman}.ql-picker-item[data-value=Verdana]:before{font-family:Verdana}.ql-snow .ql-picker.ql-size .ql-picker-label:before{content:"Font Size"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]:before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]:before{content:attr(data-value)}.ql-snow .ql-picker.ql-lineheight{width:98px}.ql-snow .ql-picker.ql-lineheight .ql-picker-label:before{content:"Line Height"}.ql-snow .ql-picker.ql-lineheight .ql-picker-item:before{content:"Normal"}.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value]:before,.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value]:before{content:attr(data-value)}.mdc-editor-counter{border:1px solid #ccc;border-top:0 solid #ccc;color:#aaa;padding:5px 15px;text-align:right}#ql-emoji-toolbar{display:flex;flex-direction:column;position:absolute;z-index:4;width:280px;height:220px;border:1px solid rgba(0,0,0,.15);border-radius:3px;box-shadow:0 5px 10px rgba(0,0,0,.12);background-color:#fff}#ql-emoji-toolbar-close{position:absolute;top:0;right:0;font-size:18px;cursor:pointer}.ql-emoji-tab-bar{width:100%;overflow-y:hidden;background-color:#f7f7f7;border-bottom:1px solid rgba(0,0,0,.15)}.ql-emoji-tab-scroller{display:flex;overflow-x:auto;padding-right:18px}.ql-emoji-tab-content{display:flex;margin:0;padding:4px 4px 0}.ql-emoji-tab{list-style:none;padding:0 8px;text-transform:uppercase}.ql-emoji-tab.ql-emoji-tab--active{border-bottom:2px solid #6200ee}.ql-emoji-panel{display:flex;flex-wrap:wrap;flex:1;align-content:flex-start;overflow-y:scroll;padding:8px;background-color:#fff}.ql-emoji-panel .ql-emoji{display:inline-flex;justify-content:center;align-items:center;width:24px;height:24px}.ql-emoji-panel .ql-emoji em,.ql-emoji-panel .ql-emoji img{width:20px;height:20px}.ql-emoji-panel .ql-emoji em{font-style:normal;font-size:18px}.mdc-editor.ql-snow .ql-editor{height:100%}.mdc-editor.ql-bubble .ql-editor{height:100px}.ql-bubble .ql-editor{border:1px solid #ccc}.ql-toolbar .material-icons{font-size:18px}.ql-bubble.ql-toolbar button,.ql-bubble .ql-toolbar button{color:#ccc}.mdc-tooltip__surface{display:inline-flex;align-items:center}.mdc-slider{width:100%}.mdc-dialog__title--closable{position:relative}.mdc-dialog__title--closable .mdc-icon-button{position:absolute;top:0;right:0;width:36px;height:36px;padding:9px;font-size:18px}.mdc-dialog__content .mdc-select__menu .mdc-deprecated-list:first-child:last-child{padding:8px 0}.mdc-tree{display:flex;flex-direction:column;width:100%}.mdc-tree ul{margin:0;padding:0}.mdc-tree-node{display:flex;flex-direction:column}.mdc-tree-node__content{display:flex;align-items:center;margin-bottom:4px}.mdc-tree-node__content:not(.mdc-tree-node--selected):hover{background:rgba(0,0,0,.04)}.mdc-tree-node__content.mdc-tree-node--selected{background-color:rgba(98,0,238,.12);color:#000}.mdc-tree-node__indent{align-self:stretch;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mdc-tree-node__indent-unit{display:inline-block;width:24px}.mdc-tree-node__icon{width:24px;cursor:pointer}.mdc-tree-node__label{flex:1;padding:8px 0}.mdc-tree-node__label:hover{cursor:pointer}.mdc-tree-node__label--disabled{color:rgba(0,0,0,.38)}.mdc-tree-node__label--disabled:hover{cursor:default}.mdc-snackbar--center{top:50%;right:auto;bottom:auto;left:50%;transform:translateX(-50%) translateY(-50%)}.mdc-snackbar--top{top:0;bottom:auto}@keyframes slideInDown{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.mdc-bottom-sheet,.mdc-bottom-sheet__scrim{position:fixed;top:0;left:0;box-sizing:border-box;width:100%;height:100%}.mdc-bottom-sheet{display:none;z-index:7}.mdc-bottom-sheet.mdc-bottom-sheet--open{display:block}.mdc-bottom-sheet__scrim{opacity:0;z-index:-1;background-color:rgba(0,0,0,.32)}.mdc-bottom-sheet__content{position:fixed;bottom:0;left:0;backface-visibility:hidden;width:100%;background-color:#fff;border-top-left-radius:0;border-top-right-radius:0;overflow:hidden;animation-duration:.3s;animation-fill-mode:both;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-bottom-sheet--open .mdc-bottom-sheet__scrim{opacity:1}.mdc-bottom-sheet--open .mdc-bottom-sheet__content{animation-name:slideInDown}.mdc-bottom-sheet--closing .mdc-bottom-sheet__content{animation-name:slideOutDown}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateX(0)}}@keyframes slideOutRight{0%{transform:translateX(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.mdc-side-sheet,.mdc-side-sheet__scrim{position:fixed;top:0;right:0;box-sizing:border-box;width:100%;height:100%}.mdc-side-sheet{display:none;z-index:7}.mdc-side-sheet.mdc-side-sheet--open{display:block}.mdc-side-sheet__scrim{opacity:0;z-index:-1;background-color:rgba(0,0,0,.32)}.mdc-side-sheet__container{position:fixed;top:0;right:0;backface-visibility:hidden;display:flex;flex-direction:column;width:40%;height:100%;background-color:#fff;border-top-left-radius:0;border-bottom-left-radius:0;overflow:hidden;animation-duration:.3s;animation-fill-mode:both;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mdc-side-sheet--open .mdc-side-sheet__scrim{opacity:1}.mdc-side-sheet--open .mdc-side-sheet__container{animation-name:slideInRight}.mdc-side-sheet--closing .mdc-side-sheet__container{animation-name:slideOutRight}@media (max-width:599px){.mdc-side-sheet__container{width:80%}}.mdc-side-sheet__wrapper{flex:1;padding:24px 24px 0 16px}.mdc-side-sheet__header{display:flex;justify-content:space-between;align-items:center}.mdc-side-sheet__title{margin:0}.mdc-side-sheet__actions{border-top:1px solid rgba(0,0,0,.12);padding:12px 24px}.mdc-alert-dialog .mdc-dialog__surface{width:450px}.mdc-alert-dialog .mdc-dialog__content{display:flex}.mdc-alert-dialog .mdc-alert-dialog__icon{margin-right:8px}.mdc-alert-dialog .mdc-dialog__actions{justify-content:center}.mdc-confirm-dialog .mdc-dialog__surface{width:450px}.mdc-confirm-dialog .mdc-dialog__content{display:flex}.mdc-confirm-dialog .mdc-confirm-dialog__icon{margin-right:8px}.mdc-confirm-dialog .mdc-dialog__actions{justify-content:center}.mdc-confirm-dialog .mdc-button{margin:0 8px}.mdc-toast--center{top:50%;right:auto;bottom:auto;left:50%;transform:translateX(-50%) translateY(-50%)}.mdc-toast--top{top:0;bottom:auto}.mdc-ripple-surface.material-icons{box-sizing:content-box}.mdc-ripple-surface.mdc-ripple-surface--primary:after,.mdc-ripple-surface.mdc-ripple-surface--primary:before{background-color:#6200ee;background-color:var(--mdc-theme-primary,#6200ee)}.mdc-ripple-surface.mdc-ripple-surface--secondary:after,.mdc-ripple-surface.mdc-ripple-surface--secondary:before{background-color:#018786;background-color:var(--mdc-theme-secondary,#018786)}.mdc-shape--rounded.mdc-shape--medium,.mdc-shape--rounded.mdc-shape--small{border-radius:4px}.mdc-shape--rounded.mdc-shape--large{border-radius:0}.mdc-shape--cut.mdc-shape--medium,.mdc-shape--cut.mdc-shape--small{-webkit-clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px));clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px))}.mdc-shape--cut.mdc-shape--large{-webkit-clip-path:polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%);clip-path:polygon(0 0,0 0,100% 0,100% 0,100% 100%,100% 100%,0 100%,0 100%)} /*! * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) - */@font-face{font-family:FontAwesome;src:url(../font/fontawesome-webfont.674f50d2.eot?v=4.7.0);src:url(../font/fontawesome-webfont.674f50d2.eot?#iefix&v=4.7.0) format("embedded-opentype"),url(../font/fontawesome-webfont.af7ae505.woff2?v=4.7.0) format("woff2"),url(../font/fontawesome-webfont.fee66e71.woff?v=4.7.0) format("woff"),url(../font/fontawesome-webfont.b06871f2.ttf?v=4.7.0) format("truetype"),url(../font/fontawesome-webfont.912ec66d.svg?v=4.7.0#fontawesomeregular) format("svg");font-weight:400;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.3333333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.2857142857em;text-align:center}.fa-ul{padding-left:0;margin-left:2.1428571429em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.1428571429em;width:2.1428571429em;top:.1428571429em;text-align:center}.fa-li.fa-lg{left:-1.8571428571em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{animation:fa-spin 2s linear infinite}.fa-pulse{animation:fa-spin 1s steps(8) infinite}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";transform:scaleY(-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-close:before,.fa-remove:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-repeat:before,.fa-rotate-right:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-image:before,.fa-photo:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-exclamation-triangle:before,.fa-warning:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-floppy-o:before,.fa-save:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-bars:before,.fa-navicon:before,.fa-reorder:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-bolt:before,.fa-flash:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-chain-broken:before,.fa-unlink:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-caret-square-o-down:before,.fa-toggle-down:before{content:"\f150"}.fa-caret-square-o-up:before,.fa-toggle-up:before{content:"\f151"}.fa-caret-square-o-right:before,.fa-toggle-right:before{content:"\f152"}.fa-eur:before,.fa-euro:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-inr:before,.fa-rupee:before{content:"\f156"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble:before{content:"\f158"}.fa-krw:before,.fa-won:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-caret-square-o-left:before,.fa-toggle-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-try:before,.fa-turkish-lira:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-bank:before,.fa-institution:before,.fa-university:before{content:"\f19c"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-image-o:before,.fa-file-photo-o:before,.fa-file-picture-o:before{content:"\f1c5"}.fa-file-archive-o:before,.fa-file-zip-o:before{content:"\f1c6"}.fa-file-audio-o:before,.fa-file-sound-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-ring:before,.fa-life-saver:before,.fa-support:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before,.fa-resistance:before{content:"\f1d0"}.fa-empire:before,.fa-ge:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before,.fa-y-combinator-square:before,.fa-yc-square:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-paper-plane:before,.fa-send:before{content:"\f1d8"}.fa-paper-plane-o:before,.fa-send-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-futbol-o:before,.fa-soccer-ball-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-ils:before,.fa-shekel:before,.fa-sheqel:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-bed:before,.fa-hotel:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-y-combinator:before,.fa-yc:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-paper-o:before,.fa-hand-stop-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-television:before,.fa-tv:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before{content:"\f2a3"}.fa-deaf:before,.fa-deafness:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-address-card:before,.fa-vcard:before{content:"\f2bb"}.fa-address-card-o:before,.fa-vcard-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer-full:before,.fa-thermometer:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bath:before,.fa-bathtub:before,.fa-s15:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:hsla(0,0%,87.8%,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}.red-50{background-color:#ffebee}.red-100{background-color:#ffcdd2}.red-200{background-color:#ef9a9a}.red-300{background-color:#e57373}.red-400{background-color:#ef5350}.red-500{background-color:#f44336}.red-600{background-color:#e53935}.red-700{background-color:#d32f2f}.red-800{background-color:#c62828}.red-900{background-color:#b71c1c}.red-a100{background-color:#ff8a80}.red-a200{background-color:#ff5252}.red-a400{background-color:#ff1744}.red-a700{background-color:#d50000}.pink-50{background-color:#fce4ec}.pink-100{background-color:#f8bbd0}.pink-200{background-color:#f48fb1}.pink-300{background-color:#f06292}.pink-400{background-color:#ec407a}.pink-500{background-color:#e91e63}.pink-600{background-color:#d81b60}.pink-700{background-color:#c2185b}.pink-800{background-color:#ad1457}.pink-900{background-color:#880e4f}.pink-a100{background-color:#ff80ab}.pink-a200{background-color:#ff4081}.pink-a400{background-color:#f50057}.pink-a700{background-color:#c51162}.purple-50{background-color:#f3e5f5}.purple-100{background-color:#e1bee7}.purple-200{background-color:#ce93d8}.purple-300{background-color:#ba68c8}.purple-400{background-color:#ab47bc}.purple-500{background-color:#9c27b0}.purple-600{background-color:#8e24aa}.purple-700{background-color:#7b1fa2}.purple-800{background-color:#6a1b9a}.purple-900{background-color:#4a148c}.purple-a100{background-color:#ea80fc}.purple-a200{background-color:#e040fb}.purple-a400{background-color:#d500f9}.purple-a700{background-color:#a0f}.deep-purple-50{background-color:#ede7f6}.deep-purple-100{background-color:#d1c4e9}.deep-purple-200{background-color:#b39ddb}.deep-purple-300{background-color:#9575cd}.deep-purple-400{background-color:#7e57c2}.deep-purple-500{background-color:#673ab7}.deep-purple-600{background-color:#5e35b1}.deep-purple-700{background-color:#512da8}.deep-purple-800{background-color:#4527a0}.deep-purple-900{background-color:#311b92}.deep-purple-a100{background-color:#b388ff}.deep-purple-a200{background-color:#7c4dff}.deep-purple-a400{background-color:#651fff}.deep-purple-a700{background-color:#6200ea}.indigo-50{background-color:#e8eaf6}.indigo-100{background-color:#c5cae9}.indigo-200{background-color:#9fa8da}.indigo-300{background-color:#7986cb}.indigo-400{background-color:#5c6bc0}.indigo-500{background-color:#3f51b5}.indigo-600{background-color:#3949ab}.indigo-700{background-color:#303f9f}.indigo-800{background-color:#283593}.indigo-900{background-color:#1a237e}.indigo-a100{background-color:#8c9eff}.indigo-a200{background-color:#536dfe}.indigo-a400{background-color:#3d5afe}.indigo-a700{background-color:#304ffe}.blue-50{background-color:#e3f2fd}.blue-100{background-color:#bbdefb}.blue-200{background-color:#90caf9}.blue-300{background-color:#64b5f6}.blue-400{background-color:#42a5f5}.blue-500{background-color:#2196f3}.blue-600{background-color:#1e88e5}.blue-700{background-color:#1976d2}.blue-800{background-color:#1565c0}.blue-900{background-color:#0d47a1}.blue-a100{background-color:#82b1ff}.blue-a200{background-color:#448aff}.blue-a400{background-color:#2979ff}.blue-a700{background-color:#2962ff}.light-blue-50{background-color:#e1f5fe}.light-blue-100{background-color:#b3e5fc}.light-blue-200{background-color:#81d4fa}.light-blue-300{background-color:#4fc3f7}.light-blue-400{background-color:#29b6f6}.light-blue-500{background-color:#03a9f4}.light-blue-600{background-color:#039be5}.light-blue-700{background-color:#0288d1}.light-blue-800{background-color:#0277bd}.light-blue-900{background-color:#01579b}.light-blue-a100{background-color:#80d8ff}.light-blue-a200{background-color:#40c4ff}.light-blue-a400{background-color:#00b0ff}.light-blue-a700{background-color:#0091ea}.cyan-50{background-color:#e0f7fa}.cyan-100{background-color:#b2ebf2}.cyan-200{background-color:#80deea}.cyan-300{background-color:#4dd0e1}.cyan-400{background-color:#26c6da}.cyan-500{background-color:#00bcd4}.cyan-600{background-color:#00acc1}.cyan-700{background-color:#0097a7}.cyan-800{background-color:#00838f}.cyan-900{background-color:#006064}.cyan-a100{background-color:#84ffff}.cyan-a200{background-color:#18ffff}.cyan-a400{background-color:#00e5ff}.cyan-a700{background-color:#00b8d4}.teal-50{background-color:#e0f2f1}.teal-100{background-color:#b2dfdb}.teal-200{background-color:#80cbc4}.teal-300{background-color:#4db6ac}.teal-400{background-color:#26a69a}.teal-500{background-color:#009688}.teal-600{background-color:#00897b}.teal-700{background-color:#00796b}.teal-800{background-color:#00695c}.teal-900{background-color:#004d40}.teal-a100{background-color:#a7ffeb}.teal-a200{background-color:#64ffda}.teal-a400{background-color:#1de9b6}.teal-a700{background-color:#00bfa5}.green-50{background-color:#e8f5e9}.green-100{background-color:#c8e6c9}.green-200{background-color:#a5d6a7}.green-300{background-color:#81c784}.green-400{background-color:#66bb6a}.green-500{background-color:#4caf50}.green-600{background-color:#43a047}.green-700{background-color:#388e3c}.green-800{background-color:#2e7d32}.green-900{background-color:#1b5e20}.green-a100{background-color:#b9f6ca}.green-a200{background-color:#69f0ae}.green-a400{background-color:#00e676}.green-a700{background-color:#00c853}.light-green-50{background-color:#f1f8e9}.light-green-100{background-color:#dcedc8}.light-green-200{background-color:#c5e1a5}.light-green-300{background-color:#aed581}.light-green-400{background-color:#9ccc65}.light-green-500{background-color:#8bc34a}.light-green-600{background-color:#7cb342}.light-green-700{background-color:#689f38}.light-green-800{background-color:#558b2f}.light-green-900{background-color:#33691e}.light-green-a100{background-color:#ccff90}.light-green-a200{background-color:#b2ff59}.light-green-a400{background-color:#76ff03}.light-green-a700{background-color:#64dd17}.lime-50{background-color:#f9fbe7}.lime-100{background-color:#f0f4c3}.lime-200{background-color:#e6ee9c}.lime-300{background-color:#dce775}.lime-400{background-color:#d4e157}.lime-500{background-color:#cddc39}.lime-600{background-color:#c0ca33}.lime-700{background-color:#afb42b}.lime-800{background-color:#9e9d24}.lime-900{background-color:#827717}.lime-a100{background-color:#f4ff81}.lime-a200{background-color:#eeff41}.lime-a400{background-color:#c6ff00}.lime-a700{background-color:#aeea00}.yellow-50{background-color:#fffde7}.yellow-100{background-color:#fff9c4}.yellow-200{background-color:#fff59d}.yellow-300{background-color:#fff176}.yellow-400{background-color:#ffee58}.yellow-500{background-color:#ffeb3b}.yellow-600{background-color:#fdd835}.yellow-700{background-color:#fbc02d}.yellow-800{background-color:#f9a825}.yellow-900{background-color:#f57f17}.yellow-a100{background-color:#ffff8d}.yellow-a200{background-color:#ff0}.yellow-a400{background-color:#ffea00}.yellow-a700{background-color:#ffd600}.amber-50{background-color:#fff8e1}.amber-100{background-color:#ffecb3}.amber-200{background-color:#ffe082}.amber-300{background-color:#ffd54f}.amber-400{background-color:#ffca28}.amber-500{background-color:#ffc107}.amber-600{background-color:#ffb300}.amber-700{background-color:#ffa000}.amber-800{background-color:#ff8f00}.amber-900{background-color:#ff6f00}.amber-a100{background-color:#ffe57f}.amber-a200{background-color:#ffd740}.amber-a400{background-color:#ffc400}.amber-a700{background-color:#ffab00}.orange-50{background-color:#fff3e0}.orange-100{background-color:#ffe0b2}.orange-200{background-color:#ffcc80}.orange-300{background-color:#ffb74d}.orange-400{background-color:#ffa726}.orange-500{background-color:#ff9800}.orange-600{background-color:#fb8c00}.orange-700{background-color:#f57c00}.orange-800{background-color:#ef6c00}.orange-900{background-color:#e65100}.orange-a100{background-color:#ffd180}.orange-a200{background-color:#ffab40}.orange-a400{background-color:#ff9100}.orange-a700{background-color:#ff6d00}.deep-orange-50{background-color:#fbe9e7}.deep-orange-100{background-color:#ffccbc}.deep-orange-200{background-color:#ffab91}.deep-orange-300{background-color:#ff8a65}.deep-orange-400{background-color:#ff7043}.deep-orange-500{background-color:#ff5722}.deep-orange-600{background-color:#f4511e}.deep-orange-700{background-color:#e64a19}.deep-orange-800{background-color:#d84315}.deep-orange-900{background-color:#bf360c}.deep-orange-a100{background-color:#ff9e80}.deep-orange-a200{background-color:#ff6e40}.deep-orange-a400{background-color:#ff3d00}.deep-orange-a700{background-color:#dd2c00}.brown-50{background-color:#efebe9}.brown-100{background-color:#d7ccc8}.brown-200{background-color:#bcaaa4}.brown-300{background-color:#a1887f}.brown-400{background-color:#8d6e63}.brown-500{background-color:#795548}.brown-600{background-color:#6d4c41}.brown-700{background-color:#5d4037}.brown-800{background-color:#4e342e}.brown-900{background-color:#3e2723}.grey-50{background-color:#fafafa}.grey-100{background-color:#f5f5f5}.grey-200{background-color:#eee}.grey-300{background-color:#e0e0e0}.grey-400{background-color:#bdbdbd}.grey-500{background-color:#9e9e9e}.grey-600{background-color:#757575}.grey-700{background-color:#616161}.grey-800{background-color:#424242}.grey-900{background-color:#212121}.blue-grey-50{background-color:#eceff1}.blue-grey-100{background-color:#cfd8dc}.blue-grey-200{background-color:#b0bec5}.blue-grey-300{background-color:#90a4ae}.blue-grey-400{background-color:#78909c}.blue-grey-500{background-color:#607d8b}.blue-grey-600{background-color:#546e7a}.blue-grey-700{background-color:#455a64}.blue-grey-800{background-color:#37474f}.blue-grey-900{background-color:#263238}.color-palette .mdc-typography--headline6{margin:0}.color-palette .mdc-deprecated-list-item{display:flex;justify-content:space-between}.color-palette .mdc-deprecated-list-item .hex{text-transform:uppercase;opacity:0}.color-palette .mdc-deprecated-list-item:hover .hex{opacity:1}h1{font-size:38px;line-height:46px}h2{font-size:30px;line-height:38px}h3{font-size:24px;line-height:32px}h4{font-size:20px;line-height:28px}h5{font-size:16px;line-height:24px}h6{font-size:14px;line-height:22px}.octicon{display:inline-block;vertical-align:text-top;vertical-align:text-bottom;fill:currentColor}.red{color:red}.green{color:green}.language-sh{color:#17ff0b!important}.balmui-placeholder{display:table;width:100%;height:100%}.balmui-placeholder .container{display:table-cell;text-align:center;vertical-align:middle}.balmui-placeholder h1{width:100%;font:italic 68px/76px Times New Roman,Georgia,Arial,sans-serif;text-align:center}.balmui-placeholder b{color:orange}.balmui-placeholder strong{color:#6200ee}.balmui-placeholder p{font-size:24px}a{color:#6200ee}.mdc-theme--text-primary-on-dark a{color:#ce93d8}.balmui-container{display:flex;flex-direction:column;min-height:100%}.balmui-test .balmui-container{display:block;min-height:auto}.balmui-head .github{line-height:1}.balmui-head .github>span{display:none}.top-app-toolbar{display:flex;align-items:center}.top-app-toolbar .pro{display:inline-block;width:48px;text-align:center;color:#fff}.global-message-banner{position:fixed;z-index:3;top:64px}.global-message-banner .mdc-banner__graphic{padding:8px 0}.global-message-banner a{font-weight:700}.balmui-body{display:flex;justify-content:flex-start;flex:1;max-width:100%}.balmui-drawer-container{min-width:280px}.balmui-drawer-container.balmui-drawer--mobile{min-width:auto}.balmui-drawer-container.balmui-drawer--mobile .balmui-menu{z-index:9}.balmui-menu{position:fixed;z-index:2;width:280px}.balmui-menu .mdc-drawer__header{border-bottom:1px solid rgba(0,0,0,.12)}.balmui-menu .balmui-version{font-weight:400}.balmui-menu .balmui-version .version{color:#e65100}.balmui-content{position:relative;display:block;width:100%}.catalog-list .mdc-deprecated-list-group__subheader{font-size:18px}.catalog-list .no-icon{padding-left:28px}.catalog-list .next,.catalog-list .plus{margin-left:5px}.catalog-list-icon{width:24px;height:24px;margin:0 24px 0 12px;background-repeat:no-repeat;background-size:100%}@media screen and (min-width:1241px){.balmui-content{width:calc(100% - 280px)}#balmui-menu{display:none}}@media (max-width:599px){.global-message-banner{top:56px}.global-message-banner .mdc-banner__content{width:auto}.global-message-banner .mdc-banner__text{margin-right:24px}}.hero{position:relative}.hero:after,.hero:before{position:absolute;padding:4px;color:#fff}.hero:before{top:0;left:0}.hero:after{right:0;bottom:0}.hero.component:after,.hero.component:before{content:"component";background-color:#2979ff}.hero.plugin:after,.hero.plugin:before{content:"plugin";background-color:#ff1744}.hero.directive:after,.hero.directive:before{content:"directive";background-color:#00bfa5}.ui-intro{padding:40px 0}.component-docs{margin-bottom:80px}.markdown-body table td:first-child{white-space:nowrap;font-weight:700}.markdown-body table td:nth-child(2){color:#c41d7f;font-size:13px}.component--typography table:nth-of-type(2) td:nth-child(2),.component--ui-card table td:nth-child(2),.component--ui-dialog table td:nth-child(2),.component--ui-drawer table td:nth-child(2),.component--ui-image-list table td:nth-child(2),.component--ui-list table td:nth-child(2),.component--ui-menu table td:nth-child(2),.component--ui-tabs table td:nth-child(2),.component--ui-textfield table td:nth-child(2){color:inherit;font-size:inherit}.supported-lang{margin:0;cursor:pointer}.supported-lang a.active{font-weight:bolder;color:#fff}.mdc-typography--body1>.mdc-typography--body2{padding:0 20px 40px}.mdc-typography--body1>.mdc-typography--body2.pure-docs{padding-top:20px}.mdc-typography--body1>.mdc-typography--body2>footer{display:flex;justify-content:space-between;margin-top:20px}@media (max-width:640px){.mdc-typography--body1>.mdc-typography--body2{padding:0 12px 24px}}.markdown-body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body kbd{display:inline-block;padding:3px 5px;font:11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;line-height:10px;color:#444d56;vertical-align:middle;background-color:#fafbfc;border:1px solid #d1d5da;border-radius:3px;box-shadow:inset 0 -1px 0 #d1d5da}.markdown-body:after,.markdown-body:before{display:table;content:""}.markdown-body:after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#cb2431}.markdown-body .anchor{float:left;padding-right:4px;margin-left:-20px;line-height:1}.markdown-body .anchor:focus{outline:none}.markdown-body blockquote,.markdown-body details,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body hr{height:.25em;padding:0;margin:24px 0;background-color:#e1e4e8;border:0}.markdown-body blockquote{padding:0 1em;color:#6a737d;border-left:.25em solid #1976d2;background:rgba(25,118,210,.05)}.markdown-body blockquote:after,.markdown-body blockquote:before{content:""}.markdown-body blockquote p{display:block;padding:14px 0}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#1b1f23;vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 code,.markdown-body h1 tt,.markdown-body h2 code,.markdown-body h2 tt,.markdown-body h3 code,.markdown-body h3 tt,.markdown-body h4 code,.markdown-body h4 tt,.markdown-body h5 code,.markdown-body h5 tt,.markdown-body h6 code,.markdown-body h6 tt{font-size:inherit}.markdown-body h1{font-size:2em}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eaecef}.markdown-body h2{font-size:1.5em}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1em}.markdown-body h5{font-size:.875em}.markdown-body h6{font-size:.85em;color:#6a737d}.markdown-body ol,.markdown-body ul{padding-left:2em}.markdown-body ol.no-list,.markdown-body ul.no-list{padding:0;list-style-type:none}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body li{word-wrap:break-all}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:600}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body table{display:block;width:100%;overflow:auto}.markdown-body table th{font-weight:600}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #dfe2e5}.markdown-body table tr{background-color:#fff;border-top:1px solid #c6cbd1}.markdown-body table tr:nth-child(2n){background-color:#f6f8fa}.markdown-body table img{background-color:initial}.markdown-body img{max-width:100%;box-sizing:initial;background-color:#fff}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none;vertical-align:text-top;background-color:initial}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #dfe2e5}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:#24292e}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:.2em .4em;margin:0;font-size:85%;background-color:rgba(27,31,35,.05);border-radius:3px}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body pre{word-wrap:normal}.markdown-body pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{padding:16px;overflow:auto;font-size:14px;line-height:1.45;border-radius:3px}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:initial;border:0}.markdown-body .csv-data td,.markdown-body .csv-data th{padding:5px;overflow:hidden;font-size:12px;line-height:1;text-align:left;white-space:nowrap}.markdown-body .csv-data .blob-num{padding:10px 8px 9px;text-align:right;background:#fff;border:0}.markdown-body .csv-data tr{border-top:0}.markdown-body .csv-data th{font-weight:600;background:#f6f8fa;border-top:0}.page-loading,.top-loading{position:fixed;z-index:5}.top-loading{top:0;right:0;left:0}.page-loading{top:80px;right:16px}.loading-enter-active,.loading-leave-active{transition:opacity .4s}.loading-enter,.loading-leave-to{opacity:0}.loading-leave-active{position:absolute;width:100%;top:0;left:0}.toc-affix{position:sticky;top:64px;right:0;left:0;z-index:2;background:#fff}.toc-affix .mdc-deprecated-list{display:flex}.toc-affix .mdc-deprecated-list-item{cursor:pointer}.toc-affix.toc-affix--bottom{position:fixed;top:auto;bottom:0}@media (max-width:599px){.toc-affix{top:56px}}.demo-ready-detect{position:relative}.catalog-title{font-family:Roboto Mono,monospace}.hero{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;min-height:360px;padding:40px 0;background-color:#f7f7f7}.hero>h1{font-size:3.14rem;font-weight:300}.hero .mdc-drawer--permanent{display:inherit;height:inherit}.hero .mdc-drawer--permanent .mdc-drawer__title{text-align:left}.hero .hero-demo,.hero .hero-demos{margin-bottom:20px}.hero .hero-demos,.hero .hero-options{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}.hero .hero-option{margin:0 32px}.hero h3{text-align:center}.demo-wrapper{margin-bottom:32px}@media (max-width:599px){.hero .hero-option{margin:0}.hero .hero-options{flex-direction:column}.hero .hero-options .hero-options{flex-direction:row}.hero .hero-options .hero-option{margin-bottom:10px}.page--card .hero .hero-options .hero-options{flex-direction:column;align-items:flex-start}}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(0,0,255,.38)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled):hover .mdc-line-ripple:before{border-bottom-color:rgba(0,0,255,.6)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-line-ripple:after{border-bottom-color:#00f}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-text-field__input{color:#000}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.5)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,255,.38)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0,0,255,.6)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#00f}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0,0,255,.38)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid) .mdc-text-field__input{caret-color:#00f}.demo-text-field-custom-colors:not(.mdc-text-field--invalid).mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.87)}.demo-textarea:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-text-field__input{color:#000}.demo-textarea:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.5)}.demo-textarea:not(.mdc-text-field--invalid) .mdc-text-field__input{caret-color:#00f}.demo-textarea:not(.mdc-text-field--invalid).mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.87)}.demo-textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{color:orange}.demo-textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.5)}.demo-textarea.mdc-text-field--invalid .mdc-text-field__input{caret-color:orange}.demo-textarea.mdc-text-field--invalid.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.87)}.demo-fullwidth-input:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-text-field__input{color:#000}.demo-fullwidth-input:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.5)}.demo-fullwidth-input:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-line-ripple:after{border-bottom-color:#00f}.demo-fullwidth-input:not(.mdc-text-field--invalid) .mdc-text-field__input{caret-color:#00f}.demo-fullwidth-input:not(.mdc-text-field--invalid).mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.87)}.demo-fullwidth-input.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{color:orange}.demo-fullwidth-input.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.5)}.demo-fullwidth-input.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after{border-bottom-color:orange}.demo-fullwidth-input.mdc-text-field--invalid .mdc-text-field__input{caret-color:orange}.demo-fullwidth-input.mdc-text-field--invalid.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.87)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(255,165,0,.38)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before{border-bottom-color:rgba(255,165,0,.6)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after{border-bottom-color:orange}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{color:orange}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.87)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:rgba(255,165,0,.38)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(255,165,0,.6)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:orange}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{color:rgba(255,165,0,.6)}.demo-text-field-custom-error-colors.mdc-text-field--invalid .mdc-text-field__input{caret-color:orange}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0,0,255,.6)}.demo-text-field-wrapper{margin-bottom:8px}.demo-tf-add-space{margin:10px 0}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:after,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#f44336;background-color:var(--mdc-ripple-color,#f44336)}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after{transition:opacity .15s linear}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:after,.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:before,.demo-checkbox--custom-all .mdc-checkbox:after,.demo-checkbox--custom-all .mdc-checkbox:before{background-color:#f44336;background-color:var(--mdc-ripple-color,#f44336)}.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-surface--hover:before,.demo-checkbox--custom-all .mdc-checkbox:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-upgraded--background-focused:before,.demo-checkbox--custom-all .mdc-checkbox:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.demo-checkbox--custom-all .mdc-checkbox:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.demo-checkbox--custom-all .mdc-checkbox:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.demo-checkbox--custom-all .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#f44336;border-color:var(--mdc-checkbox-unchecked-color,#f44336);background-color:rgba(244,67,54,.25)}.demo-checkbox--custom-all .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.demo-checkbox--custom-all .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.demo-checkbox--custom-all .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#f44336;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#f44336))}@keyframes mdc-checkbox-fade-in-background-FFF44336FF01878640F44336FFF44336{0%{border-color:#f44336;border-color:var(--mdc-checkbox-unchecked-color,#f44336);background-color:rgba(244,67,54,.25)}50%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#f44336;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#f44336))}}@keyframes mdc-checkbox-fade-out-background-FFF44336FF01878640F44336FFF44336{0%,80%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#f44336;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#f44336))}to{border-color:#f44336;border-color:var(--mdc-checkbox-unchecked-color,#f44336);background-color:rgba(244,67,54,.25)}}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-in-background-FFF44336FF01878640F44336FFF44336}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-out-background-FFF44336FF01878640F44336FFF44336}.demo-checkbox--custom-stroke-and-fill .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#2196f3;border-color:var(--mdc-checkbox-unchecked-color,#2196f3);background-color:transparent}.demo-checkbox--custom-stroke-and-fill .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.demo-checkbox--custom-stroke-and-fill .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.demo-checkbox--custom-stroke-and-fill .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#9c27b0;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#9c27b0))}@keyframes mdc-checkbox-fade-in-background-FF2196F3FF01878600000000FF9C27B0{0%{border-color:#2196f3;border-color:var(--mdc-checkbox-unchecked-color,#2196f3);background-color:transparent}50%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#9c27b0;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#9c27b0))}}@keyframes mdc-checkbox-fade-out-background-FF2196F3FF01878600000000FF9C27B0{0%,80%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#9c27b0;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#9c27b0))}to{border-color:#2196f3;border-color:var(--mdc-checkbox-unchecked-color,#2196f3);background-color:transparent}}.demo-checkbox--custom-stroke-and-fill .mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.demo-checkbox--custom-stroke-and-fill .mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-in-background-FF2196F3FF01878600000000FF9C27B0}.demo-checkbox--custom-stroke-and-fill .mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.demo-checkbox--custom-stroke-and-fill .mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-out-background-FF2196F3FF01878600000000FF9C27B0}.demo-radio--custom .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,.demo-radio--custom .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:#f44336}.demo-radio--custom .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle{border-color:#ff9800}.demo-radio--custom .mdc-radio .mdc-radio__background:before{background-color:#f44336}.demo-radio--custom .mdc-radio:after,.demo-radio--custom .mdc-radio:before{background-color:#f44336;background-color:var(--mdc-ripple-color,#f44336)}.demo-radio--custom .mdc-radio.mdc-ripple-surface--hover:before,.demo-radio--custom .mdc-radio:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.demo-radio--custom .mdc-radio.mdc-ripple-upgraded--background-focused:before,.demo-radio--custom .mdc-radio:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.demo-radio--custom .mdc-radio:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.demo-radio--custom .mdc-radio:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.demo-radio--custom .mdc-radio.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.demo-select-custom-colors:not(.mdc-select--disabled) .mdc-select__selected-text{color:#00f}.demo-select-custom-colors:not(.mdc-select--disabled) .mdc-floating-label{color:rgba(0,0,255,.6)}.demo-select-custom-colors:not(.mdc-select--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(0,0,255,.5)}.demo-select-custom-colors.mdc-select--box:not(.mdc-select--disabled) .mdc-select__anchor{background-color:rgba(0,0,255,.1)}.demo-select-custom-colors.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading,.demo-select-custom-colors.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch,.demo-select-custom-colors.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,255,.6)}.button-container{margin:8px 0}.demo-switch-wrapper{display:inline-block;margin-right:16px}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__track{background-color:#f44336}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb{background-color:#f44336;border-color:#f44336}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:after,.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:before{background-color:#f44336;background-color:var(--mdc-ripple-color,#f44336)}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-surface--hover:before,.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused:before,.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.rtl-toggle{margin:16px}.demo-elevation--custom-color{box-shadow:0 8px 10px -5px rgba(1,135,134,.3),0 16px 24px 2px rgba(1,135,134,.24),0 6px 30px 5px rgba(1,135,134,.22)}.demo-linear-progress--custom .mdc-linear-progress__bar-inner{border-color:#f44336}.demo-linear-progress--custom .mdc-linear-progress__buffer-dots{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffcdd2'/%3E%3C/svg%3E")}.demo-linear-progress--custom .mdc-linear-progress__buffer-bar{background-color:#ffcdd2}.demo-typography--section-baseline{position:relative;margin:24px;padding:0 24px 24px;border:1px solid #ddd;max-width:350px}.demo-typography__title:before{display:inline-block;width:0;height:34px;content:"";vertical-align:0}.demo-typography__title:after{display:inline-block;width:0;height:22px;content:"";vertical-align:-22px}.demo-typography__subtitle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.demo-typography__subtitle:before{display:inline-block;width:0;height:22px;content:"";vertical-align:0}.demo-typography__subtitle:after{display:inline-block;width:0;height:28px;content:"";vertical-align:-28px}.demo-typography__body{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.demo-typography__body:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.demo-typography-line-1,.demo-typography-line-2,.demo-typography-line-3{position:absolute;border-top:1px solid #fd2549;width:100%;left:0;right:0;color:#fd2549;font-size:10px;text-align:right}.demo-typography-line-1{top:34px}.demo-typography-line-2{top:56px}.demo-typography-line-3{top:84px}.page--not-found{text-align:center}.page--home .hero{overflow:hidden}.page--home .pure-docs{text-align:center}.page--button .demo-controls{margin-bottom:16px}.page--button .demo .mdc-button{margin:0 16px 16px 0}.page--card .hero{height:auto;padding:24px}.page--card .demo{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.page--card .demo-card-toggles{margin:24px;padding:24px;text-align:center}.page--card .demo-card{width:320px}.page--card .demo-card--photo{width:200px}.page--card .demo-card__media{background-image:url(../img/1-1.dfff3193.jpg)}.page--card .demo-card__media--16-9{background-image:url(../img/16-9.058d7ce0.jpg)}.page--card .demo-card__media-content--with-title{display:flex;flex-direction:column;justify-content:flex-end}.page--card .demo-card__media-title{padding:8px 16px;background-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5));color:#fff}.page--card .demo-card__primary{padding:1rem}.page--card .demo-card__title{margin:0}.page--card .demo-card__subtitle{margin:0}.page--card .demo-card__secondary,.page--card .demo-card__subtitle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.page--card .demo-card__secondary{padding:0 1rem 8px}.page--card .demo-card-article-group-heading{padding:8px 16px}.page--card .demo-card-article{padding:16px;text-decoration:none;color:inherit}.page--card .demo-card-article__title{margin:0 0 4px}.page--card .demo-card-article__snippet{margin:0}.page--card .demo-card--music{border-top-left-radius:24px;border-top-right-radius:4px;border-bottom-right-radius:24px;border-bottom-left-radius:4px}.page--card .demo-card--music[dir=rtl],[dir=rtl] .page--card .demo-card--music{border-top-left-radius:4px;border-top-right-radius:24px;border-bottom-right-radius:4px;border-bottom-left-radius:24px}.page--card .demo-card__music-row{display:flex;border-top-left-radius:inherit}.page--card .demo-card__music-row[dir=rtl],[dir=rtl] .page--card .demo-card__music-row{border-top-left-radius:0;border-top-right-radius:inherit}.page--card .demo-card__media--music{width:110px;border-top-left-radius:inherit}.page--card .demo-card__media--music[dir=rtl],[dir=rtl] .page--card .demo-card__media--music{border-top-left-radius:0;border-top-right-radius:inherit}.page--card .demo-card__music-info{display:flex;flex-direction:column;padding:8px 16px}.page--card .demo-card__action-buttons--text-only{margin-left:8px}.page--card .demo-card__action-icon--star{margin-left:4px;margin-right:4px;cursor:pointer}.page--checkbox .demo{margin-bottom:5px}.page--checkbox .mdc-button code{text-transform:none}.page--dialog .hero-dialog{position:relative;z-index:auto}.demo-confirmation-dialog .mdc-dialog__surface{max-height:268px}.balmui-navigation_dismissible-drawer-full-height-drawer .balmui-container,.balmui-navigation_permanent-drawer-above-toolbar .balmui-container,.balmui-navigation_permanent-drawer-below-toolbar .balmui-container{display:block;min-height:auto}.page--drawer .hero-demo h3{text-align:left}.page--drawer .demo-app-content{overflow:auto;height:100%;padding-left:18px;padding-right:18px}.page--permanent-drawer-above-toolbar .demo-content{position:relative}.page--permanent-drawer-above-toolbar .demo-app-bar{position:absolute}.page--dismissible-drawer-below-top-app-bar .demo-app-content,.page--dismissible-drawer-full-height-drawer .demo-content,.page--permanent-drawer-above-toolbar .demo-content,.page--permanent-drawer-below-toolbar .demo-app-content{width:100%}.page--dismissible-drawer-below-top-app-bar .demo-app-bar{z-index:7}.page--elevation .demo{display:flex;flex-direction:row;flex-wrap:wrap}.page--elevation .demo-surface{display:flex;align-items:center;justify-content:center;width:160px;height:80px;border-radius:3px;font-size:.8em;color:#9e9e9e;background:#fff}.page--elevation .hero .demo-surface{width:120px;height:48px;margin:24px;background-color:#212121;color:#f0f0f0}.page--elevation #hover-el{display:flex;align-items:center;justify-content:center;padding:2rem;border-radius:4px}.page--fab .demo{display:flex;flex-wrap:wrap}.page--fab figcaption>div{margin:8px}.page--fab .mdc-fab{margin:16px}.page--fab .demo-absolute-fab,.page--fab .demo-fixed-fab{position:absolute;bottom:1rem;right:1rem;z-index:1}.page--fab .demo-fixed-fab{position:fixed}@media (min-width:1024px){.page--fab .demo-fixed-fab{bottom:1.5rem;right:1.5rem}}.page--fab .fab-motion-container{position:relative;width:300px;height:150px;overflow:hidden;padding:0 10px;border:1px solid #ccc}.page--fab .fab-motion-container__view{background-color:#fff;box-sizing:border-box;position:absolute;transition:transform 375ms cubic-bezier(0,0,.2,1);height:100%;width:100%;will-change:transform}.page--fab .fab-motion-container__view--exited{transition-timing-function:cubic-bezier(.4,0,1,1);transform:translateY(100%)}.page--icon-button .demo{display:flex;flex-wrap:wrap}.page--icon-button .toggle-example{margin:0 24px 24px 0}.page--icon-button .example{display:flex;justify-content:center}.page--grid{width:100%}.page--grid .demo-grid{background-color:#ddd;margin-bottom:32px}.page--grid .demo-cell{box-sizing:border-box;background-color:#666;height:200px;padding:8px;color:#fff;font-size:1.5em}.page--grid .demo-parent-cell{position:relative;background-color:#aaa}.page--grid .demo-child-cell{position:relative}.page--grid .demo-child-cell>span{position:absolute;bottom:8px;right:8px;color:#ddd}.page--grid .demo-grid.max-width{max-width:1280px}.page--grid .demo-grid-legend{margin:16px 0 8px}.page--grid .demo-ruler{position:fixed;z-index:1;display:flex;align-items:center;justify-content:center;bottom:0;left:0;height:20px;width:100%;margin:0;background:#000;color:#fff}.page--grid .demo-controls{display:none;margin-bottom:8px}.page--grid .demo-warning:after{content:"This browser does not support custom properties, so margins and gutters cannot be changed at runtime."}@supports (--foo:green){.page--grid .demo-controls{display:block}.page--grid .demo-warning:after{content:""}}.page--grid .hero .demo-grid{min-width:320px}.page--grid .hero .demo-cell{height:60px}.page--grid .demo-parent-cell .mdc-layout-grid__inner>span{position:absolute;top:8px;left:8px;font-size:1.5em;color:#fff}.page--progress .example{margin-bottom:64px}.page--list .mdc-deprecated-list,.page--list .mdc-deprecated-list-group{max-width:600px}.page--list .demo-wrapper .mdc-deprecated-list,.page--list .demo-wrapper .mdc-deprecated-list-group{border:1px solid rgba(0,0,0,.1)}.page--list .demo-wrapper .mdc-deprecated-list-group .mdc-deprecated-list{border:none}.page--list .demo-wrapper h2{margin-bottom:.8em;margin-left:24px}.page--list .demo-wrapper h3{margin-bottom:.8em}.page--list .hero-demo .mdc-deprecated-list{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);min-width:320px;background-color:#fff}.page--menu>.mdc-typography--body2{overflow-x:hidden}.page--menu .hero .mdc-menu-surface{position:static;z-index:1}.page--menu .demo-content{position:relative;border:1px solid}.page--menu .demo-controls{padding:40px 20px}.page--menu .mdc-text-field input{width:3em}.page--menu .demo-button__long-text,.page--menu .demo-button__normal-text{display:none}.page--menu .demo-button--long .demo-button__long-text,.page--menu .demo-button--long .demo-button__normal-text,.page--menu .demo-button--normal .demo-button__normal-text{display:inline}.page--menu .standard-image-list{width:200px}.page--menu .standard-image-list .mdc-image-list__image-aspect-container{padding-bottom:66.66667%}.page--menu .standard-image-list .mdc-image-list__item{width:calc(100% - 5px);margin:2px}.page--menu #demo-menu{width:336px}.page--menu #demo-menu-2{width:280px}.page--menu #demo-menu-3{width:224px}.page--slider .hero .mdc-form{width:100%}.page--slider #hero-slider-wrapper{margin:0 auto;width:100%;max-width:600px;--mdc-slider-bg-color-behind-component:#f2f2f2}.page--slider .custom-bg{background-color:#eee;--mdc-slider-bg-color-behind-component:#eee}.page--slider .mdc-typography--headline6{margin:0}.page--slider .demo-param-field-group+.demo-param-field-group{margin-top:16px}.page--slider .demo-param-field{display:block}.page--slider .demo-param-input-label{display:inline-block;min-width:2.5em}.page--slider .example-slider-wrapper{padding:0 16px}.page--snackbar .loading .example .mdc-snackbar{transform:translateY(200%)}.page--snackbar .hero .mdc-snackbar{position:relative;left:auto;z-index:0}.page--snackbar .hero .mdc-snackbar--active{transform:none}.page--switch .demo .mdc-form-field{margin-right:20px}.page--tabs .hero-demo .mdc-tab-bar.long{width:450px}.page--tabs .demo{display:flex;align-items:center}.page--tabs .demo-tab{flex:0 1 auto}.page--tabs .custom-tab .mdc-tab__text-label{color:#64b5f6}.page--tabs .custom-tab .mdc-tab__icon{color:#ffb74d;fill:currentColor}.page--tabs .custom-tab .custom-tab-indicator .mdc-tab-indicator__content--underline{border-color:#c51162;border-top-width:5px;border-top-left-radius:5px;border-top-right-radius:5px}.page--tabs .custom-tab .mdc-tab__ripple:after,.page--tabs .custom-tab .mdc-tab__ripple:before{background-color:#f8bbd0;background-color:var(--mdc-ripple-color,#f8bbd0)}.page--tabs .custom-tab .mdc-tab__ripple.mdc-ripple-surface--hover:before,.page--tabs .custom-tab .mdc-tab__ripple:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.page--tabs .custom-tab .mdc-tab__ripple.mdc-ripple-upgraded--background-focused:before,.page--tabs .custom-tab .mdc-tab__ripple:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.page--tabs .custom-tab .mdc-tab__ripple:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.page--tabs .custom-tab .mdc-tab__ripple:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.page--tabs .custom-tab .mdc-tab__ripple.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.page--tabs .custom-tab.mdc-tab--active .mdc-tab__text-label{color:#0d47a1}.page--tabs .custom-tab.mdc-tab--active .mdc-tab__icon{color:#e65100;fill:currentColor}.page--tabs .hero-demo-tab-bar{background-color:#f2f2f2;max-width:420px}.page--tabs .custom-demo-tab-bar .mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);flex:0 1 120px}.page--tabs .custom-demo-tab-bar .mdc-tab .mdc-tab__text-label{color:#1e88e5}.page--tabs .custom-demo-tab-bar .mdc-tab .mdc-tab__icon{color:#1e88e5;fill:currentColor}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:after,.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:before{background-color:#fbc02d;background-color:var(--mdc-ripple-color,#fbc02d)}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple.mdc-ripple-surface--hover:before,.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple.mdc-ripple-upgraded--background-focused:before,.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.page--tabs .custom-demo-tab-bar .mdc-tab--active .mdc-tab__text-label{color:#0d47a1}.page--tabs .custom-demo-tab-bar .mdc-tab--active .mdc-tab__icon{color:#0d47a1;fill:currentColor}.page--tabs .custom-demo-tab-bar .mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:5px;border-color:#fbc02d}.page--tabs .demo-scroller{width:360px;outline:1px solid #bdbdbd}.page--tabs .demo-cube{width:43px;height:43px;margin:10px}.page--tabs .demo-cube:first-child{background-color:#8c81de}.page--tabs .demo-cube:nth-child(2){background-color:#8aa7ee}.page--tabs .demo-cube:nth-child(3){background-color:#7488b7}.page--tabs .demo-cube:nth-child(4){background-color:#d874d6}.page--tabs .demo-cube:nth-child(5){background-color:#847028}.page--tabs .demo-cube:nth-child(6){background-color:#e5d787}.page--tabs .demo-cube:nth-child(7){background-color:#834760}.page--tabs .demo-cube:nth-child(8){background-color:#2f7ac9}.page--tabs .demo-cube:nth-child(9){background-color:#24e871}.page--tabs .demo-cube:nth-child(10){background-color:#a8ce76}.page--tabs .demo-cube:nth-child(11){background-color:#8f9de4}.page--tabs .demo-cube:nth-child(12){background-color:#ece51f}.page--tabs .demo-cube:nth-child(13){background-color:#ef1a63}.page--tabs .demo-cube:nth-child(14){background-color:#27e151}.page--tabs .demo-cube:nth-child(15){background-color:#9c24cb}.page--tabs .demo-cube:nth-child(16){background-color:#eb10c3}.page--tabs .demo-cube:nth-child(17){background-color:#591b39}.page--tabs .demo-cube:nth-child(18){background-color:#b8a576}.page--tabs .demo-cube:nth-child(19){background-color:#2a772a}.page--tabs .demo-cube:nth-child(20){background-color:#e08237}.page--tabs .demo-cube:nth-child(21){background-color:#7c9a44}.page--tabs .demo-cube:nth-child(22){background-color:#d88da3}.page--tabs .demo-cube:nth-child(23){background-color:#36743b}.page--tabs .demo-cube:nth-child(24){background-color:#cb6a79}.page--tabs .demo-cube:nth-child(25){background-color:#98954b}.page--tabs .demo-cube:nth-child(26){background-color:#412330}.page--tabs .demo-cube:nth-child(27){background-color:#0c974d}.page--tabs .demo-cube:nth-child(28){background-color:#dd9343}.page--tabs .demo-cube:nth-child(29){background-color:#2e4a41}.page--tabs .demo-cube:nth-child(30){background-color:#7c1059}.page--tabs .demo-cube:nth-child(31){background-color:#3b6950}.page--tabs .demo-cube:nth-child(32){background-color:#b1a3de}.page--tabs .demo-cube:nth-child(33){background-color:#8db612}.page--tabs .demo-cube:nth-child(34){background-color:#b515d7}.page--tabs .demo-controller{padding:10px 0}.page--tabs .demo-controller-row{padding:5px 0}@media (max-width:599px){.page--tabs .hero-demo .mdc-tab-bar{max-width:320px}}.page--textfield .hero .mdc-text-field{min-width:240px}.page--textfield .hero-demo .mdc-text-field-character-counter{display:none}.page--textfield .hero-demo .show-counter .mdc-text-field-character-counter{display:block}.page--textfield .demo-with-icon{margin-bottom:16px}.page--textfield .full-width-textarea-example{margin-top:16px}.demo-theme{display:flex;flex-wrap:wrap;padding:8px;background-color:grey}.demo-theme dd,.demo-theme dt{height:80px;padding:8px;margin-bottom:1px}.demo-theme dt{width:100%}.demo-theme dd{width:50%;margin-left:0}.demo-text-theme{padding:2px;background-color:grey}.demo-text-theme ul{display:flex;margin:0;padding:0}.demo-text-theme li{list-style:none;width:20%;height:40px;line-height:40px;border-right:1px solid;text-align:center}.demo-text-theme li:last-child{margin:0}.page--theme figure{margin-left:0;margin-right:0}.page--theme .hero button{margin:24px}.page--theme .demo-fixed-theme{position:fixed;top:70px;right:0;z-index:3}@media (max-width:599px){.page--theme .demo-fixed-theme{top:110px}}.page--theme .demo-main{display:flex;flex-wrap:wrap}.page--theme .demo-component-section{position:relative}.page--theme .demo-component-section+.demo-component-section{margin-top:48px}.page--theme .demo-component-section:before{content:"";display:block;position:absolute;top:-16px;left:-16px;right:-16px;bottom:-16px;z-index:-1;background:#fbc02d;opacity:0;transition:opacity 1s}.page--theme .demo-component-section--flash:before{opacity:.5;transition:none}.page--theme .demo-component-section__permalink{color:inherit;opacity:0}.demo-component-section:hover .page--theme .demo-component-section__permalink,.demo-component-section__heading--focus-within .page--theme .demo-component-section__permalink{opacity:1}.page--theme .demo-theme-color-section+.demo-theme-color-section{margin-top:36px}.page--theme .demo-theme-color-section__row{display:flex;flex-wrap:wrap}.page--theme .demo-fieldset--color{margin-right:36px}.page--theme .demo-theme-color-group{padding:16px 0}.page--theme .demo-theme-color-swatches{display:inline-flex;flex-direction:column;margin-right:16px}.page--theme .demo-theme-color-swatch{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);display:inline-block;box-sizing:border-box;width:150px;height:50px;line-height:50px;text-align:center;margin-bottom:8px;border-radius:4px}.page--theme .demo-theme-bg--low-luminance{background-color:#3e2723}.page--theme .demo-theme-bg--high-luminance{background-color:#fff8e1}.page--theme .demo-theme-bg--custom-light{background-color:#ddd}.page--theme .demo-theme-bg--custom-dark{background-color:#1d1d1d}.page--theme .demo-theme-text-row{display:inline-flex;box-sizing:border-box;padding:16px;border:1px solid #f0f0f0;align-items:center;flex-direction:column}@media (min-width:768px){.page--theme .demo-theme-text-row{flex-direction:row}}.page--theme .demo-theme-text-style{padding:0 16px}.page--theme .demo-fieldset--button+.demo-fieldset--button{margin-top:16px}.page--theme .demo-button__code{font-size:smaller;text-transform:none}.page--theme .demo-card-wrapper{display:inline-block;margin:0 24px 24px 0;vertical-align:top}.page--theme .demo-card__media{background-image:url(../img/1-1.dfff3193.jpg)}.page--theme .demo-card__media--16-9{background-image:url(../img/16-9.058d7ce0.jpg)}.page--theme .demo-checkbox-row{display:flex;flex-wrap:wrap;align-items:center}.page--theme .demo-checkbox-toggle-button,.page--theme .demo-checkbox-wrapper{margin-right:10px}.page--theme .demo-checkbox-wrapper+.demo-checkbox-toggle-button{margin-left:20px}.page--theme .demo-dialog{position:relative;justify-content:flex-start;z-index:auto}.page--theme .demo-drawer-toggle{vertical-align:middle;cursor:pointer}.page--theme .demo-drawer-toggle:after,.page--theme .demo-drawer-toggle:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.page--theme .demo-drawer-toggle.mdc-ripple-surface--hover:before,.page--theme .demo-drawer-toggle:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.page--theme .demo-drawer-toggle.mdc-ripple-upgraded--background-focused:before,.page--theme .demo-drawer-toggle:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.page--theme .demo-drawer-toggle:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.page--theme .demo-drawer-toggle:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.page--theme .demo-drawer-toggle.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.page--theme .demo-fab-row{display:flex;flex-wrap:wrap}.page--theme .demo-fab{margin:16px 0 0}.page--theme .demo-fab-tile{margin:0 48px 1em 0}.page--theme .demo-fab-tile__title{font-weight:500}.page--theme .demo-fab-tile__snippet{height:2em}.page--theme .mdc-icon-button{display:inline-flex}.page--theme .demo-icon-toggle-row{display:flex;flex-wrap:wrap}.page--theme .demo-icon-toggle-tile{width:200px;margin:0 10px 10px 0;padding:20px;border-radius:5px;text-align:center}.page--theme .demo-progress-row{margin:32px 0}.page--theme .demo-progress-row+.demo-progress-row{margin-top:64px}.page--theme .demo-radio-group{display:inline-block;margin:0 24px 24px 0}.page--theme .demo-radio-form-field{margin-right:8px}.page--theme .demo-switch-wrapper{display:inline-block;margin:16px 16px 0 0}.page--theme .demo-figure--tab-bar+.demo-figure--tab-bar{margin-top:36px}.page--theme .demo-tab-bar{margin:0}.page--theme .demo-text-field-wrapper{display:inline-block;margin:16px 16px 0 0}.page--theme .demo-text-field{margin-top:0!important}.component-section{width:90%;min-height:240px;margin:10px 5% 40px}.component-section .mdc-typography--headline6{margin-top:0}.component-section .component-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.component-section .component-wrapper.space-around{justify-content:space-around}.component-section .component-wrapper.no-flex{display:block}.component-section .component-wrapper .mdc-drawer,.component-section .component-wrapper .mdc-top-app-bar{position:static;top:auto!important;z-index:0;display:block}.component-section .component-wrapper .mdc-drawer{border-width:1px;border-style:solid}.component-section .component-wrapper .mdc-menu-surface{z-index:1}.component-section .component-wrapper .mdc-image-list__item{margin-bottom:16px}.component-section .list-component,.component-section .select-component,.component-section .textfield-component{display:block}.component-section .list-component .mdc-form-field,.component-section .select-component .mdc-form-field,.component-section .textfield-component .mdc-form-field{margin-bottom:16px}.component-section .list-component .mdc-deprecated-list,.component-section .select-component .mdc-deprecated-list,.component-section .textfield-component .mdc-deprecated-list{border:1px solid rgba(0,0,0,.1);background:#fff}.component-section .menu-component .mdc-menu-surface{top:0}.component-section .mdc-image-list{-moz-column-count:2;column-count:2;-moz-column-gap:16px;column-gap:16px;max-width:400px;max-height:600px}@media screen and (min-width:1241px){.component-section{width:40%;margin:10px 5% 20px}}.switch-theme .demo-theme-color-radio{display:block;border:1px solid #9e9e9e;border-radius:50%}.switch-theme .demo-theme-color-radio__inner{display:block;border:11px solid;border-radius:50%}.switch-theme [data-theme=baseline] .demo-theme-color-radio__inner{border-color:#6200ea #1de9b6 #1de9b6 #6200ea}.switch-theme [data-theme=black] .demo-theme-color-radio__inner{border-color:#212121 #64dd17 #64dd17 #212121}.switch-theme [data-theme=dark] .demo-theme-color-radio__inner{border-color:#ffd54f #ec407a #ec407a #ffd54f}.switch-theme [data-theme=shrine] .demo-theme-color-radio__inner{border-color:#442b2d #fcb8ab #fcb8ab #442b2d}.switch-theme .demo-theme-menu{min-width:320px}.switch-theme .demo-theme-menu__list-item--selected{background-color:#bdbdbd}.switch-theme .demo-theme-list{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-light,rgba(0,0,0,.87))}.mdc-typography--custom-style-1{color:red}.mdc-typography--custom-style-2{color:#00f}.page--typography .demo-typography--section{margin:24px;padding:24px;border:1px solid #ddd}.page--typography .demo-typography--section>div{margin-bottom:20px}.page--typography .demo-typography--headline>*{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.page--typography .demo-typography--heading-baseline{margin-left:24px}.page--typography .markdown-body table td:nth-child(2){color:currentColor;font-size:16px}.page--icon .icons-preview-code{display:flex;text-align:center}.page--icon .search-area{position:sticky;top:112px;z-index:1;background-color:#fff;margin:0}.page--icon .search-area-inner{display:flex}.page--icon .search-area-inner .mdc-text-field{flex:1}.page--icon .search-area-inner .mdc-select__anchor{width:auto}.page--icon #search{flex:1;text-indent:14px}.page--icon .search-helper{padding:10px 16px;font-size:14px}.page--icon .search-helper b{color:#6200ee}.page--icon .material-icons{overflow:hidden}.page--icon .mdc-deprecated-list-group__subheader{text-transform:capitalize}.page--icon .mdc-image-list__item{display:flex;flex-direction:column;align-items:center;width:120px;height:120px;padding:8px;transition:all .4s;color:#757575;background:transparent}.page--icon .mdc-image-list__item:hover{background-color:#e0e0e0}.page--icon .mdc-image-list__image-aspect-container{flex:1;display:flex;align-items:center;padding:0;position:static}.page--icon .mdc-image-list__image-aspect-container i{cursor:pointer}.page--icon .mdc-image-list__supporting{font-size:12px;display:inline-block;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.page--icon .new-badge{font-size:10px;font-weight:500;position:absolute;top:5px;right:0;padding:2px 3px;color:#fff;border-radius:2px;background:#fe6363}@media (max-width:599px){.page--icon .search-area{top:104px}.page--icon #icon-type{min-width:auto}.page--icon .coloring-example .icons-preview-code{flex-wrap:wrap;align-items:center;justify-content:center}.page--icon .mdc-image-list__item{width:88px;height:88px}.page--icon .mdc-image-list__item .md-48{font-size:24px;width:24px;height:24px}.page--icon .mdc-image-list__item .mdc-image-list__supporting{display:none}}.page--icon .category-affix{position:fixed;right:0;bottom:0;width:auto;height:200px;overflow-y:auto;background:#fff;z-index:11;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.page--icon .category-affix .mdc-tab{width:100%;justify-content:start}.icons-preview{display:flex;flex-flow:column;align-items:center;background-color:#f9f9f9;width:128px;padding:16px}.icons-preview .icon-caption{font-size:13px;margin-top:8px}.icons-preview.icons-dark-bg{background-color:#333}.icons-preview.icons-dark-bg .icon-caption{color:#fff}.icons-preview .orange600{color:#fb8c00}.page--top-app-bar{width:100%}.page--top-app-bar .demo-paragraph{margin:0;padding:20px 28px}@media (max-width:599px){.page--top-app-bar .demo-paragraph{padding:16px}}.page--top-app-bar .demo-body{padding:0;margin:0;box-sizing:border-box}.page--image-list .hero-image-list{width:300px;margin:0}.page--image-list .hero-image-list .mdc-image-list__item{width:calc(20% - 4.2px);margin:2px}.page--image-list .hero-image-list .mdc-image-list__image{background-color:#000}.page--image-list .standard-image-list{max-width:1000px}.page--image-list .standard-image-list .mdc-image-list__image-aspect-container{padding-bottom:66.66667%}.page--image-list .standard-image-list .mdc-image-list__item{width:calc(20% - 4.2px);margin:2px}.page--image-list .masonry-image-list{-moz-column-count:5;column-count:5;-moz-column-gap:16px;column-gap:16px;max-width:1000px}.page--image-list .masonry-image-list .mdc-image-list__item{margin-bottom:16px}.page--image-list .hide-supporting .mdc-image-list__supporting{display:none}.page--image-list .rounded-corners .mdc-image-list__image{border-radius:8px}.page--image-list .rounded-corners.mdc-image-list--with-text-protection .mdc-image-list__supporting{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}@media (max-width:599px){.page--image-list .standard-image-list .mdc-image-list__item{width:calc(33.33333% - 4.33333px);margin:2px}.page--image-list .masonry-image-list{-moz-column-count:3;column-count:3;-moz-column-gap:16px;column-gap:16px}.page--image-list .masonry-image-list .mdc-image-list__item{margin-bottom:16px}}.page--ripple .hero{padding:0;display:block;height:360px}.page--ripple .hero>div{width:100%;height:100%}.page--ripple .demo-surface{display:flex;align-items:center;justify-content:center;width:200px;height:100px;padding:1rem;cursor:pointer;-moz-user-select:none;user-select:none;-webkit-user-select:none}.page--ripple .demo-surface[data-mdc-ripple-is-unbounded]{width:24px;height:24px;padding:12px}.page--ripple button.demo-surface{display:inline-block;background:none;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.page--ripple .demo{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-around}.page--ripple .mdc-typography--headline6{margin:10px 0}@media (max-width:599px){.page--ripple .demo{flex-direction:column;width:100%}.page--ripple .demo-surface{margin:0 auto}}.page--anchor .anchor-example-inner{display:flex;flex-direction:column;justify-content:space-around;height:1000px}.page--file .list-enter,.page--file .list-leave-to{opacity:0;transform:translateY(100%)}.page--file .list-leave-active{position:absolute}.page--file .preview-list{display:flex;flex-wrap:wrap;padding:1em 0 0 1em;position:relative}.page--file .preview-list>.item{width:12.5%;padding-right:1em;margin-bottom:1em;list-style:none;transition:all 1s}.page--file .preview-list>.item .inner{width:100%}.page--file .preview-list>.item .preview{display:block;width:100%;height:0;padding-bottom:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;border:1px solid #ddd;border-radius:3px}.page--file .preview-list>.item .name{display:block;width:100%;line-height:1.8em;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.page--file .preview-list>.item .actions{display:flex;align-items:center;justify-content:space-around;height:48px}.page--file .preview-list>.item.add-btn .mdc-file{position:relative;width:100%;height:0;padding-bottom:100%;border:1px solid #ddd;border-radius:3px;cursor:pointer;background-color:#fff}.page--file .preview-list>.item.add-btn .add-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:48px}@media (max-width:640px){.page--file .preview-list>.item{width:33.333%}}.page--divider .hero-demo{display:flex;justify-content:center;align-items:center;width:50%;height:128px}.page--divider .vertical-divider-demo{width:300px;height:120px;padding:10px;border:1px solid}.page--divider .vertical-divider-demo .block{width:80px;height:80px}.page--divider .vertical-divider-demo .red{background-color:red}.page--divider .vertical-divider-demo .blue{background-color:#00f}.page--validator .form-item{margin-bottom:10px}.page--skeleton .demo{max-width:600px}.page--badge .demo{display:flex;flex-flow:wrap;justify-content:space-around}.page--badge .demo .mdc-badge{margin-bottom:10px}.page--form .mdc-form{padding:10px;border:1px solid}.page--form .conditions-form .mdc-form__item>label{flex-basis:80px;margin-right:10px;text-align:right}.page--form .conditions-form .mdc-select,.page--form .conditions-form .mdc-text-field{min-width:200px}.page--banner .hero-demo{width:100%}.page--banner .hero-banner{position:relative;z-index:auto;height:52px}.page--banner .hero-banner.mdc-banner--with-image{height:72px}.page--shape .demos{display:flex;flex-wrap:wrap}.page--shape .demo{display:flex;justify-content:center;align-items:center;width:128px;height:128px;margin:0 10px 10px 0;background:#e5e5e5}.page--shape .mdc-shape--rounded.mdc-shape--medium{border-radius:16px}.page--shape .mdc-shape--rounded.mdc-shape--large{border-radius:24px}.page--shape .mdc-shape--cut.mdc-shape--small{-webkit-clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px));clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px))}.page--shape .mdc-shape--cut.mdc-shape--medium{-webkit-clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px));clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px))}.page--shape .mdc-shape--cut.mdc-shape--large{-webkit-clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px))}.ql-bubble .ql-tooltip,.ql-snow .ql-tooltip{z-index:2}.preview-dialog .mdc-dialog__title .close{position:absolute;top:0;right:0}.preview-dialog .mdc-dialog__surface{max-width:1024px}.preview-dialog .preview-content{min-width:280px;min-height:320px;margin:0 auto;padding:20px}.preview-code{word-wrap:break-word;overflow-wrap:break-word}.page--donate .hero{overflow:hidden}.page--donate .donate-method{list-style:none;width:256px;height:300px;margin:0 auto;background:none 50% no-repeat;background-size:contain}.page--donate .donate-method.alipay{background-image:url(../img/alipay.c0897c3c.png)}.page--donate .donate-method.wechatpay{background-image:url(../img/wechatpay.a1551a21.png)}.laravel-admin{display:block;width:320px;height:73px;background:url(../img/support/laravel-admin.85ddd851.png) 50% no-repeat;background-size:contain;text-indent:100%;white-space:nowrap;overflow:hidden}.page--lazyload .masonry-image-list{-moz-column-count:5;column-count:5;-moz-column-gap:16px;column-gap:16px;max-width:1000px}.page--lazyload .masonry-image-list .mdc-image-list__item{margin-bottom:16px} \ No newline at end of file + */@font-face{font-family:FontAwesome;src:url(../font/fontawesome-webfont.674f50d2.eot?v=4.7.0);src:url(../font/fontawesome-webfont.674f50d2.eot?#iefix&v=4.7.0) format("embedded-opentype"),url(../font/fontawesome-webfont.af7ae505.woff2?v=4.7.0) format("woff2"),url(../font/fontawesome-webfont.fee66e71.woff?v=4.7.0) format("woff"),url(../font/fontawesome-webfont.b06871f2.ttf?v=4.7.0) format("truetype"),url(../font/fontawesome-webfont.912ec66d.svg?v=4.7.0#fontawesomeregular) format("svg");font-weight:400;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.3333333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.2857142857em;text-align:center}.fa-ul{padding-left:0;margin-left:2.1428571429em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.1428571429em;width:2.1428571429em;top:.1428571429em;text-align:center}.fa-li.fa-lg{left:-1.8571428571em}.fa-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{animation:fa-spin 2s linear infinite}.fa-pulse{animation:fa-spin 1s steps(8) infinite}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";transform:scaleY(-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-close:before,.fa-remove:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-repeat:before,.fa-rotate-right:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-image:before,.fa-photo:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-exclamation-triangle:before,.fa-warning:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-floppy-o:before,.fa-save:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-bars:before,.fa-navicon:before,.fa-reorder:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-bolt:before,.fa-flash:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-chain-broken:before,.fa-unlink:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-caret-square-o-down:before,.fa-toggle-down:before{content:"\f150"}.fa-caret-square-o-up:before,.fa-toggle-up:before{content:"\f151"}.fa-caret-square-o-right:before,.fa-toggle-right:before{content:"\f152"}.fa-eur:before,.fa-euro:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-inr:before,.fa-rupee:before{content:"\f156"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble:before{content:"\f158"}.fa-krw:before,.fa-won:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-caret-square-o-left:before,.fa-toggle-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-try:before,.fa-turkish-lira:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-bank:before,.fa-institution:before,.fa-university:before{content:"\f19c"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-image-o:before,.fa-file-photo-o:before,.fa-file-picture-o:before{content:"\f1c5"}.fa-file-archive-o:before,.fa-file-zip-o:before{content:"\f1c6"}.fa-file-audio-o:before,.fa-file-sound-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-ring:before,.fa-life-saver:before,.fa-support:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before,.fa-resistance:before{content:"\f1d0"}.fa-empire:before,.fa-ge:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before,.fa-y-combinator-square:before,.fa-yc-square:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-paper-plane:before,.fa-send:before{content:"\f1d8"}.fa-paper-plane-o:before,.fa-send-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-futbol-o:before,.fa-soccer-ball-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-ils:before,.fa-shekel:before,.fa-sheqel:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-bed:before,.fa-hotel:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-y-combinator:before,.fa-yc:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-paper-o:before,.fa-hand-stop-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-television:before,.fa-tv:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before{content:"\f2a3"}.fa-deaf:before,.fa-deafness:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-address-card:before,.fa-vcard:before{content:"\f2bb"}.fa-address-card-o:before,.fa-vcard-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer-full:before,.fa-thermometer:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bath:before,.fa-bathtub:before,.fa-s15:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}div.code-toolbar{position:relative}div.code-toolbar>.toolbar{position:absolute;z-index:10;top:.3em;right:.2em;transition:opacity .3s ease-in-out;opacity:0}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar:focus-within>.toolbar{opacity:1}div.code-toolbar>.toolbar>.toolbar-item{display:inline-block}div.code-toolbar>.toolbar>.toolbar-item>a{cursor:pointer}div.code-toolbar>.toolbar>.toolbar-item>button{background:none;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}div.code-toolbar>.toolbar>.toolbar-item>a,div.code-toolbar>.toolbar>.toolbar-item>button,div.code-toolbar>.toolbar>.toolbar-item>span{color:#bbb;font-size:.8em;padding:0 .5em;background:#f5f2f0;background:hsla(0,0%,87.8%,.2);box-shadow:0 2px 0 0 rgba(0,0,0,.2);border-radius:.5em}div.code-toolbar>.toolbar>.toolbar-item>a:focus,div.code-toolbar>.toolbar>.toolbar-item>a:hover,div.code-toolbar>.toolbar>.toolbar-item>button:focus,div.code-toolbar>.toolbar>.toolbar-item>button:hover,div.code-toolbar>.toolbar>.toolbar-item>span:focus,div.code-toolbar>.toolbar>.toolbar-item>span:hover{color:inherit;text-decoration:none}.red-50{background-color:#ffebee}.red-100{background-color:#ffcdd2}.red-200{background-color:#ef9a9a}.red-300{background-color:#e57373}.red-400{background-color:#ef5350}.red-500{background-color:#f44336}.red-600{background-color:#e53935}.red-700{background-color:#d32f2f}.red-800{background-color:#c62828}.red-900{background-color:#b71c1c}.red-a100{background-color:#ff8a80}.red-a200{background-color:#ff5252}.red-a400{background-color:#ff1744}.red-a700{background-color:#d50000}.pink-50{background-color:#fce4ec}.pink-100{background-color:#f8bbd0}.pink-200{background-color:#f48fb1}.pink-300{background-color:#f06292}.pink-400{background-color:#ec407a}.pink-500{background-color:#e91e63}.pink-600{background-color:#d81b60}.pink-700{background-color:#c2185b}.pink-800{background-color:#ad1457}.pink-900{background-color:#880e4f}.pink-a100{background-color:#ff80ab}.pink-a200{background-color:#ff4081}.pink-a400{background-color:#f50057}.pink-a700{background-color:#c51162}.purple-50{background-color:#f3e5f5}.purple-100{background-color:#e1bee7}.purple-200{background-color:#ce93d8}.purple-300{background-color:#ba68c8}.purple-400{background-color:#ab47bc}.purple-500{background-color:#9c27b0}.purple-600{background-color:#8e24aa}.purple-700{background-color:#7b1fa2}.purple-800{background-color:#6a1b9a}.purple-900{background-color:#4a148c}.purple-a100{background-color:#ea80fc}.purple-a200{background-color:#e040fb}.purple-a400{background-color:#d500f9}.purple-a700{background-color:#a0f}.deep-purple-50{background-color:#ede7f6}.deep-purple-100{background-color:#d1c4e9}.deep-purple-200{background-color:#b39ddb}.deep-purple-300{background-color:#9575cd}.deep-purple-400{background-color:#7e57c2}.deep-purple-500{background-color:#673ab7}.deep-purple-600{background-color:#5e35b1}.deep-purple-700{background-color:#512da8}.deep-purple-800{background-color:#4527a0}.deep-purple-900{background-color:#311b92}.deep-purple-a100{background-color:#b388ff}.deep-purple-a200{background-color:#7c4dff}.deep-purple-a400{background-color:#651fff}.deep-purple-a700{background-color:#6200ea}.indigo-50{background-color:#e8eaf6}.indigo-100{background-color:#c5cae9}.indigo-200{background-color:#9fa8da}.indigo-300{background-color:#7986cb}.indigo-400{background-color:#5c6bc0}.indigo-500{background-color:#3f51b5}.indigo-600{background-color:#3949ab}.indigo-700{background-color:#303f9f}.indigo-800{background-color:#283593}.indigo-900{background-color:#1a237e}.indigo-a100{background-color:#8c9eff}.indigo-a200{background-color:#536dfe}.indigo-a400{background-color:#3d5afe}.indigo-a700{background-color:#304ffe}.blue-50{background-color:#e3f2fd}.blue-100{background-color:#bbdefb}.blue-200{background-color:#90caf9}.blue-300{background-color:#64b5f6}.blue-400{background-color:#42a5f5}.blue-500{background-color:#2196f3}.blue-600{background-color:#1e88e5}.blue-700{background-color:#1976d2}.blue-800{background-color:#1565c0}.blue-900{background-color:#0d47a1}.blue-a100{background-color:#82b1ff}.blue-a200{background-color:#448aff}.blue-a400{background-color:#2979ff}.blue-a700{background-color:#2962ff}.light-blue-50{background-color:#e1f5fe}.light-blue-100{background-color:#b3e5fc}.light-blue-200{background-color:#81d4fa}.light-blue-300{background-color:#4fc3f7}.light-blue-400{background-color:#29b6f6}.light-blue-500{background-color:#03a9f4}.light-blue-600{background-color:#039be5}.light-blue-700{background-color:#0288d1}.light-blue-800{background-color:#0277bd}.light-blue-900{background-color:#01579b}.light-blue-a100{background-color:#80d8ff}.light-blue-a200{background-color:#40c4ff}.light-blue-a400{background-color:#00b0ff}.light-blue-a700{background-color:#0091ea}.cyan-50{background-color:#e0f7fa}.cyan-100{background-color:#b2ebf2}.cyan-200{background-color:#80deea}.cyan-300{background-color:#4dd0e1}.cyan-400{background-color:#26c6da}.cyan-500{background-color:#00bcd4}.cyan-600{background-color:#00acc1}.cyan-700{background-color:#0097a7}.cyan-800{background-color:#00838f}.cyan-900{background-color:#006064}.cyan-a100{background-color:#84ffff}.cyan-a200{background-color:#18ffff}.cyan-a400{background-color:#00e5ff}.cyan-a700{background-color:#00b8d4}.teal-50{background-color:#e0f2f1}.teal-100{background-color:#b2dfdb}.teal-200{background-color:#80cbc4}.teal-300{background-color:#4db6ac}.teal-400{background-color:#26a69a}.teal-500{background-color:#009688}.teal-600{background-color:#00897b}.teal-700{background-color:#00796b}.teal-800{background-color:#00695c}.teal-900{background-color:#004d40}.teal-a100{background-color:#a7ffeb}.teal-a200{background-color:#64ffda}.teal-a400{background-color:#1de9b6}.teal-a700{background-color:#00bfa5}.green-50{background-color:#e8f5e9}.green-100{background-color:#c8e6c9}.green-200{background-color:#a5d6a7}.green-300{background-color:#81c784}.green-400{background-color:#66bb6a}.green-500{background-color:#4caf50}.green-600{background-color:#43a047}.green-700{background-color:#388e3c}.green-800{background-color:#2e7d32}.green-900{background-color:#1b5e20}.green-a100{background-color:#b9f6ca}.green-a200{background-color:#69f0ae}.green-a400{background-color:#00e676}.green-a700{background-color:#00c853}.light-green-50{background-color:#f1f8e9}.light-green-100{background-color:#dcedc8}.light-green-200{background-color:#c5e1a5}.light-green-300{background-color:#aed581}.light-green-400{background-color:#9ccc65}.light-green-500{background-color:#8bc34a}.light-green-600{background-color:#7cb342}.light-green-700{background-color:#689f38}.light-green-800{background-color:#558b2f}.light-green-900{background-color:#33691e}.light-green-a100{background-color:#ccff90}.light-green-a200{background-color:#b2ff59}.light-green-a400{background-color:#76ff03}.light-green-a700{background-color:#64dd17}.lime-50{background-color:#f9fbe7}.lime-100{background-color:#f0f4c3}.lime-200{background-color:#e6ee9c}.lime-300{background-color:#dce775}.lime-400{background-color:#d4e157}.lime-500{background-color:#cddc39}.lime-600{background-color:#c0ca33}.lime-700{background-color:#afb42b}.lime-800{background-color:#9e9d24}.lime-900{background-color:#827717}.lime-a100{background-color:#f4ff81}.lime-a200{background-color:#eeff41}.lime-a400{background-color:#c6ff00}.lime-a700{background-color:#aeea00}.yellow-50{background-color:#fffde7}.yellow-100{background-color:#fff9c4}.yellow-200{background-color:#fff59d}.yellow-300{background-color:#fff176}.yellow-400{background-color:#ffee58}.yellow-500{background-color:#ffeb3b}.yellow-600{background-color:#fdd835}.yellow-700{background-color:#fbc02d}.yellow-800{background-color:#f9a825}.yellow-900{background-color:#f57f17}.yellow-a100{background-color:#ffff8d}.yellow-a200{background-color:#ff0}.yellow-a400{background-color:#ffea00}.yellow-a700{background-color:#ffd600}.amber-50{background-color:#fff8e1}.amber-100{background-color:#ffecb3}.amber-200{background-color:#ffe082}.amber-300{background-color:#ffd54f}.amber-400{background-color:#ffca28}.amber-500{background-color:#ffc107}.amber-600{background-color:#ffb300}.amber-700{background-color:#ffa000}.amber-800{background-color:#ff8f00}.amber-900{background-color:#ff6f00}.amber-a100{background-color:#ffe57f}.amber-a200{background-color:#ffd740}.amber-a400{background-color:#ffc400}.amber-a700{background-color:#ffab00}.orange-50{background-color:#fff3e0}.orange-100{background-color:#ffe0b2}.orange-200{background-color:#ffcc80}.orange-300{background-color:#ffb74d}.orange-400{background-color:#ffa726}.orange-500{background-color:#ff9800}.orange-600{background-color:#fb8c00}.orange-700{background-color:#f57c00}.orange-800{background-color:#ef6c00}.orange-900{background-color:#e65100}.orange-a100{background-color:#ffd180}.orange-a200{background-color:#ffab40}.orange-a400{background-color:#ff9100}.orange-a700{background-color:#ff6d00}.deep-orange-50{background-color:#fbe9e7}.deep-orange-100{background-color:#ffccbc}.deep-orange-200{background-color:#ffab91}.deep-orange-300{background-color:#ff8a65}.deep-orange-400{background-color:#ff7043}.deep-orange-500{background-color:#ff5722}.deep-orange-600{background-color:#f4511e}.deep-orange-700{background-color:#e64a19}.deep-orange-800{background-color:#d84315}.deep-orange-900{background-color:#bf360c}.deep-orange-a100{background-color:#ff9e80}.deep-orange-a200{background-color:#ff6e40}.deep-orange-a400{background-color:#ff3d00}.deep-orange-a700{background-color:#dd2c00}.brown-50{background-color:#efebe9}.brown-100{background-color:#d7ccc8}.brown-200{background-color:#bcaaa4}.brown-300{background-color:#a1887f}.brown-400{background-color:#8d6e63}.brown-500{background-color:#795548}.brown-600{background-color:#6d4c41}.brown-700{background-color:#5d4037}.brown-800{background-color:#4e342e}.brown-900{background-color:#3e2723}.grey-50{background-color:#fafafa}.grey-100{background-color:#f5f5f5}.grey-200{background-color:#eee}.grey-300{background-color:#e0e0e0}.grey-400{background-color:#bdbdbd}.grey-500{background-color:#9e9e9e}.grey-600{background-color:#757575}.grey-700{background-color:#616161}.grey-800{background-color:#424242}.grey-900{background-color:#212121}.blue-grey-50{background-color:#eceff1}.blue-grey-100{background-color:#cfd8dc}.blue-grey-200{background-color:#b0bec5}.blue-grey-300{background-color:#90a4ae}.blue-grey-400{background-color:#78909c}.blue-grey-500{background-color:#607d8b}.blue-grey-600{background-color:#546e7a}.blue-grey-700{background-color:#455a64}.blue-grey-800{background-color:#37474f}.blue-grey-900{background-color:#263238}.color-palette .mdc-typography--headline6{margin:0}.color-palette .mdc-deprecated-list-item{display:flex;justify-content:space-between}.color-palette .mdc-deprecated-list-item .hex{text-transform:uppercase;opacity:0}.color-palette .mdc-deprecated-list-item:hover .hex{opacity:1}h1{font-size:38px;line-height:46px}h2{font-size:30px;line-height:38px}h3{font-size:24px;line-height:32px}h4{font-size:20px;line-height:28px}h5{font-size:16px;line-height:24px}h6{font-size:14px;line-height:22px}.octicon{display:inline-block;vertical-align:text-top;vertical-align:text-bottom;fill:currentColor}.red{color:red}.green{color:green}.language-sh{color:#17ff0b!important}.balmui-placeholder{display:table;width:100%;height:100%}.balmui-placeholder .container{display:table-cell;text-align:center;vertical-align:middle}.balmui-placeholder h1{width:100%;font:italic 68px/76px Times New Roman,Georgia,Arial,sans-serif;text-align:center}.balmui-placeholder b{color:orange}.balmui-placeholder strong{color:#6200ee}.balmui-placeholder p{font-size:24px}a{color:#6200ee}.mdc-theme--text-primary-on-dark a{color:#ce93d8}.balmui-container{display:flex;flex-direction:column;min-height:100%}.balmui-test .balmui-container{display:block;min-height:auto}.balmui-head .github{line-height:1}.balmui-head .github>span{display:none}.top-app-toolbar{display:flex;align-items:center}.top-app-toolbar .pro{display:inline-block;width:48px;text-align:center;color:#fff}.global-message-banner{position:fixed;z-index:3;top:64px}.global-message-banner .mdc-banner__graphic{padding:8px 0}.global-message-banner a{font-weight:700}.balmui-body{display:flex;justify-content:flex-start;flex:1;max-width:100%}.balmui-drawer-container{min-width:280px}.balmui-drawer-container.balmui-drawer--mobile{min-width:auto}.balmui-drawer-container.balmui-drawer--mobile .balmui-menu{z-index:9}.balmui-menu{position:fixed;z-index:2;width:280px}.balmui-menu .mdc-drawer__header{border-bottom:1px solid rgba(0,0,0,.12)}.balmui-menu .balmui-version{font-weight:400}.balmui-menu .balmui-version .version{color:#e65100}.balmui-content{position:relative;display:block;width:100%}.catalog-list .mdc-deprecated-list-group__subheader{font-size:18px}.catalog-list .no-icon{padding-left:28px}.catalog-list .next,.catalog-list .plus{margin-left:5px}.catalog-list-icon{width:24px;height:24px;margin:0 24px 0 12px;background-repeat:no-repeat;background-size:100%}@media screen and (min-width:1241px){.balmui-content{width:calc(100% - 280px)}#balmui-menu{display:none}}@media (max-width:599px){.global-message-banner{top:56px}.global-message-banner .mdc-banner__content{width:auto}.global-message-banner .mdc-banner__text{margin-right:24px}}.hero{position:relative}.hero:after,.hero:before{position:absolute;padding:4px;color:#fff}.hero:before{top:0;left:0}.hero:after{right:0;bottom:0}.hero.component:after,.hero.component:before{content:"component";background-color:#2979ff}.hero.plugin:after,.hero.plugin:before{content:"plugin";background-color:#ff1744}.hero.directive:after,.hero.directive:before{content:"directive";background-color:#00bfa5}.ui-intro{padding:40px 0}.component-docs{margin-bottom:80px}.markdown-body table td:first-child{white-space:nowrap;font-weight:700}.markdown-body table td:nth-child(2){color:#c41d7f;font-size:13px}.component--typography table:nth-of-type(2) td:nth-child(2),.component--ui-card table td:nth-child(2),.component--ui-dialog table td:nth-child(2),.component--ui-drawer table td:nth-child(2),.component--ui-image-list table td:nth-child(2),.component--ui-list table td:nth-child(2),.component--ui-menu table td:nth-child(2),.component--ui-tabs table td:nth-child(2),.component--ui-textfield table td:nth-child(2){color:inherit;font-size:inherit}.supported-lang{margin:0;cursor:pointer}.supported-lang a.active{font-weight:bolder;color:#fff}.mdc-typography--body1>.mdc-typography--body2{padding:0 20px 40px}.mdc-typography--body1>.mdc-typography--body2.pure-docs{padding-top:20px}.mdc-typography--body1>.mdc-typography--body2>footer{display:flex;justify-content:space-between;margin-top:20px}@media (max-width:640px){.mdc-typography--body1>.mdc-typography--body2{padding:0 12px 24px}}.markdown-body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:16px;line-height:1.5;word-wrap:break-word}.markdown-body kbd{display:inline-block;padding:3px 5px;font:11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;line-height:10px;color:#444d56;vertical-align:middle;background-color:#fafbfc;border:1px solid #d1d5da;border-radius:3px;box-shadow:inset 0 -1px 0 #d1d5da}.markdown-body:after,.markdown-body:before{display:table;content:""}.markdown-body:after{clear:both}.markdown-body>:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdown-body a:not([href]){color:inherit;text-decoration:none}.markdown-body .absent{color:#cb2431}.markdown-body .anchor{float:left;padding-right:4px;margin-left:-20px;line-height:1}.markdown-body .anchor:focus{outline:none}.markdown-body blockquote,.markdown-body details,.markdown-body dl,.markdown-body ol,.markdown-body p,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-top:0;margin-bottom:16px}.markdown-body hr{height:.25em;padding:0;margin:24px 0;background-color:#e1e4e8;border:0}.markdown-body blockquote{padding:0 1em;color:#6a737d;border-left:.25em solid #1976d2;background:rgba(25,118,210,.05)}.markdown-body blockquote:after,.markdown-body blockquote:before{content:""}.markdown-body blockquote p{display:block;padding:14px 0}.markdown-body blockquote>:first-child{margin-top:0}.markdown-body blockquote>:last-child{margin-bottom:0}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin-top:24px;margin-bottom:16px;font-weight:600;line-height:1.25}.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#1b1f23;vertical-align:middle;visibility:hidden}.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}.markdown-body h1 code,.markdown-body h1 tt,.markdown-body h2 code,.markdown-body h2 tt,.markdown-body h3 code,.markdown-body h3 tt,.markdown-body h4 code,.markdown-body h4 tt,.markdown-body h5 code,.markdown-body h5 tt,.markdown-body h6 code,.markdown-body h6 tt{font-size:inherit}.markdown-body h1{font-size:2em}.markdown-body h1,.markdown-body h2{padding-bottom:.3em;border-bottom:1px solid #eaecef}.markdown-body h2{font-size:1.5em}.markdown-body h3{font-size:1.25em}.markdown-body h4{font-size:1em}.markdown-body h5{font-size:.875em}.markdown-body h6{font-size:.85em;color:#6a737d}.markdown-body ol,.markdown-body ul{padding-left:2em}.markdown-body ol.no-list,.markdown-body ul.no-list{padding:0;list-style-type:none}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:0;margin-bottom:0}.markdown-body li{word-wrap:break-all}.markdown-body li>p{margin-top:16px}.markdown-body li+li{margin-top:.25em}.markdown-body dl{padding:0}.markdown-body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:600}.markdown-body dl dd{padding:0 16px;margin-bottom:16px}.markdown-body table{display:block;width:100%;overflow:auto}.markdown-body table th{font-weight:600}.markdown-body table td,.markdown-body table th{padding:6px 13px;border:1px solid #dfe2e5}.markdown-body table tr{background-color:#fff;border-top:1px solid #c6cbd1}.markdown-body table tr:nth-child(2n){background-color:#f6f8fa}.markdown-body table img{background-color:initial}.markdown-body img{max-width:100%;box-sizing:initial;background-color:#fff}.markdown-body img[align=right]{padding-left:20px}.markdown-body img[align=left]{padding-right:20px}.markdown-body .emoji{max-width:none;vertical-align:text-top;background-color:initial}.markdown-body span.frame{display:block;overflow:hidden}.markdown-body span.frame>span{display:block;float:left;width:auto;padding:7px;margin:13px 0 0;overflow:hidden;border:1px solid #dfe2e5}.markdown-body span.frame span img{display:block;float:left}.markdown-body span.frame span span{display:block;padding:5px 0 0;clear:both;color:#24292e}.markdown-body span.align-center{display:block;overflow:hidden;clear:both}.markdown-body span.align-center>span{display:block;margin:13px auto 0;overflow:hidden;text-align:center}.markdown-body span.align-center span img{margin:0 auto;text-align:center}.markdown-body span.align-right{display:block;overflow:hidden;clear:both}.markdown-body span.align-right>span{display:block;margin:13px 0 0;overflow:hidden;text-align:right}.markdown-body span.align-right span img{margin:0;text-align:right}.markdown-body span.float-left{display:block;float:left;margin-right:13px;overflow:hidden}.markdown-body span.float-left span{margin:13px 0 0}.markdown-body span.float-right{display:block;float:right;margin-left:13px;overflow:hidden}.markdown-body span.float-right>span{display:block;margin:13px auto 0;overflow:hidden;text-align:right}.markdown-body code,.markdown-body tt{padding:.2em .4em;margin:0;font-size:85%;background-color:rgba(27,31,35,.05);border-radius:3px}.markdown-body code br,.markdown-body tt br{display:none}.markdown-body del code{text-decoration:inherit}.markdown-body pre{word-wrap:normal}.markdown-body pre>code{padding:0;margin:0;font-size:100%;word-break:normal;white-space:pre;background:transparent;border:0}.markdown-body .highlight{margin-bottom:16px}.markdown-body .highlight pre{margin-bottom:0;word-break:normal}.markdown-body .highlight pre,.markdown-body pre{padding:16px;overflow:auto;font-size:14px;line-height:1.45;border-radius:3px}.markdown-body pre code,.markdown-body pre tt{display:inline;max-width:auto;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:initial;border:0}.markdown-body .csv-data td,.markdown-body .csv-data th{padding:5px;overflow:hidden;font-size:12px;line-height:1;text-align:left;white-space:nowrap}.markdown-body .csv-data .blob-num{padding:10px 8px 9px;text-align:right;background:#fff;border:0}.markdown-body .csv-data tr{border-top:0}.markdown-body .csv-data th{font-weight:600;background:#f6f8fa;border-top:0}.page-loading,.top-loading{position:fixed;z-index:5}.top-loading{top:0;right:0;left:0}.page-loading{top:80px;right:16px}.loading-enter-active,.loading-leave-active{transition:opacity .4s}.loading-enter,.loading-leave-to{opacity:0}.loading-leave-active{position:absolute;width:100%;top:0;left:0}.toc-affix{position:sticky;top:64px;right:0;left:0;z-index:2;background:#fff}.toc-affix .mdc-deprecated-list{display:flex}.toc-affix .mdc-deprecated-list-item{cursor:pointer}.toc-affix.toc-affix--bottom{position:fixed;top:auto;bottom:0}@media (max-width:599px){.toc-affix{top:56px}}.demo-ready-detect{position:relative}.catalog-title{font-family:Roboto Mono,monospace}.hero{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;min-height:360px;padding:40px 0;background-color:#f7f7f7}.hero>h1{font-size:3.14rem;font-weight:300}.hero .mdc-drawer--permanent{display:inherit;height:inherit}.hero .mdc-drawer--permanent .mdc-drawer__title{text-align:left}.hero .hero-demo,.hero .hero-demos{margin-bottom:20px}.hero .hero-demos,.hero .hero-options{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}.hero .hero-option{margin:0 32px}.hero h3{text-align:center}.demo-wrapper{margin-bottom:32px}@media (max-width:599px){.hero .hero-option{margin:0}.hero .hero-options{flex-direction:column}.hero .hero-options .hero-options{flex-direction:row}.hero .hero-options .hero-option{margin-bottom:10px}.page--card .hero .hero-options .hero-options{flex-direction:column;align-items:flex-start}}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(0,0,255,.38)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled):hover .mdc-line-ripple:before{border-bottom-color:rgba(0,0,255,.6)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-line-ripple:after{border-bottom-color:#00f}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-text-field__input{color:#000}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.5)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,255,.38)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(0,0,255,.6)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#00f}.demo-text-field-custom-colors:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0,0,255,.38)}.demo-text-field-custom-colors:not(.mdc-text-field--invalid) .mdc-text-field__input{caret-color:#00f}.demo-text-field-custom-colors:not(.mdc-text-field--invalid).mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.87)}.demo-textarea:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-text-field__input{color:#000}.demo-textarea:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.5)}.demo-textarea:not(.mdc-text-field--invalid) .mdc-text-field__input{caret-color:#00f}.demo-textarea:not(.mdc-text-field--invalid).mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.87)}.demo-textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{color:orange}.demo-textarea.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.5)}.demo-textarea.mdc-text-field--invalid .mdc-text-field__input{caret-color:orange}.demo-textarea.mdc-text-field--invalid.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.87)}.demo-fullwidth-input:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-text-field__input{color:#000}.demo-fullwidth-input:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.5)}.demo-fullwidth-input:not(.mdc-text-field--invalid):not(.mdc-text-field--disabled) .mdc-line-ripple:after{border-bottom-color:#00f}.demo-fullwidth-input:not(.mdc-text-field--invalid) .mdc-text-field__input{caret-color:#00f}.demo-fullwidth-input:not(.mdc-text-field--invalid).mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(0,0,255,.87)}.demo-fullwidth-input.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{color:orange}.demo-fullwidth-input.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.5)}.demo-fullwidth-input.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after{border-bottom-color:orange}.demo-fullwidth-input.mdc-text-field--invalid .mdc-text-field__input{caret-color:orange}.demo-fullwidth-input.mdc-text-field--invalid.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.87)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(255,165,0,.38)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before{border-bottom-color:rgba(255,165,0,.6)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after{border-bottom-color:orange}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input{color:orange}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label{color:rgba(255,165,0,.87)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:rgba(255,165,0,.38)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:rgba(255,165,0,.6)}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:orange}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg{color:rgba(255,165,0,.6)}.demo-text-field-custom-error-colors.mdc-text-field--invalid .mdc-text-field__input{caret-color:orange}.demo-text-field-custom-error-colors.mdc-text-field--invalid:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text{color:rgba(0,0,255,.6)}.demo-text-field-wrapper{margin-bottom:8px}.demo-tf-add-space{margin:10px 0}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:after,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected .mdc-checkbox__ripple:before{background-color:#f44336;background-color:var(--mdc-ripple-color,#f44336)}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected.mdc-ripple-surface--hover .mdc-checkbox__ripple:before,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected:hover .mdc-checkbox__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded--background-focused .mdc-checkbox__ripple:before,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):focus .mdc-checkbox__ripple:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded) .mdc-checkbox__ripple:after{transition:opacity .15s linear}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected:not(.mdc-ripple-upgraded):active .mdc-checkbox__ripple:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:after,.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-upgraded--background-focused.mdc-checkbox--selected .mdc-checkbox__ripple:before,.demo-checkbox--custom-all .mdc-checkbox:after,.demo-checkbox--custom-all .mdc-checkbox:before{background-color:#f44336;background-color:var(--mdc-ripple-color,#f44336)}.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-surface--hover:before,.demo-checkbox--custom-all .mdc-checkbox:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-upgraded--background-focused:before,.demo-checkbox--custom-all .mdc-checkbox:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.demo-checkbox--custom-all .mdc-checkbox:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.demo-checkbox--custom-all .mdc-checkbox:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.demo-checkbox--custom-all .mdc-checkbox.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.demo-checkbox--custom-all .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#f44336;border-color:var(--mdc-checkbox-unchecked-color,#f44336);background-color:rgba(244,67,54,.25)}.demo-checkbox--custom-all .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.demo-checkbox--custom-all .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.demo-checkbox--custom-all .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#f44336;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#f44336))}@keyframes mdc-checkbox-fade-in-background-FFF44336FF01878640F44336FFF44336{0%{border-color:#f44336;border-color:var(--mdc-checkbox-unchecked-color,#f44336);background-color:rgba(244,67,54,.25)}50%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#f44336;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#f44336))}}@keyframes mdc-checkbox-fade-out-background-FFF44336FF01878640F44336FFF44336{0%,80%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#f44336;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#f44336))}to{border-color:#f44336;border-color:var(--mdc-checkbox-unchecked-color,#f44336);background-color:rgba(244,67,54,.25)}}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-in-background-FFF44336FF01878640F44336FFF44336}.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.demo-checkbox--custom-all .mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-out-background-FFF44336FF01878640F44336FFF44336}.demo-checkbox--custom-stroke-and-fill .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#2196f3;border-color:var(--mdc-checkbox-unchecked-color,#2196f3);background-color:transparent}.demo-checkbox--custom-stroke-and-fill .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.demo-checkbox--custom-stroke-and-fill .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,.demo-checkbox--custom-stroke-and-fill .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#9c27b0;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#9c27b0))}@keyframes mdc-checkbox-fade-in-background-FF2196F3FF01878600000000FF9C27B0{0%{border-color:#2196f3;border-color:var(--mdc-checkbox-unchecked-color,#2196f3);background-color:transparent}50%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#9c27b0;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#9c27b0))}}@keyframes mdc-checkbox-fade-out-background-FF2196F3FF01878600000000FF9C27B0{0%,80%{border-color:#018786;border-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#018786));background-color:#9c27b0;background-color:var(--mdc-checkbox-checked-color,var(--mdc-theme-secondary,#9c27b0))}to{border-color:#2196f3;border-color:var(--mdc-checkbox-unchecked-color,#2196f3);background-color:transparent}}.demo-checkbox--custom-stroke-and-fill .mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.demo-checkbox--custom-stroke-and-fill .mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-in-background-FF2196F3FF01878600000000FF9C27B0}.demo-checkbox--custom-stroke-and-fill .mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,.demo-checkbox--custom-stroke-and-fill .mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background{animation-name:mdc-checkbox-fade-out-background-FF2196F3FF01878600000000FF9C27B0}.demo-radio--custom .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,.demo-radio--custom .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:#f44336}.demo-radio--custom .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle{border-color:#ff9800}.demo-radio--custom .mdc-radio .mdc-radio__background:before{background-color:#f44336}.demo-radio--custom .mdc-radio:after,.demo-radio--custom .mdc-radio:before{background-color:#f44336;background-color:var(--mdc-ripple-color,#f44336)}.demo-radio--custom .mdc-radio.mdc-ripple-surface--hover:before,.demo-radio--custom .mdc-radio:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.demo-radio--custom .mdc-radio.mdc-ripple-upgraded--background-focused:before,.demo-radio--custom .mdc-radio:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.demo-radio--custom .mdc-radio:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.demo-radio--custom .mdc-radio:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.demo-radio--custom .mdc-radio.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.demo-select-custom-colors:not(.mdc-select--disabled) .mdc-select__selected-text{color:#00f}.demo-select-custom-colors:not(.mdc-select--disabled) .mdc-floating-label{color:rgba(0,0,255,.6)}.demo-select-custom-colors:not(.mdc-select--disabled) .mdc-line-ripple:before{border-bottom-color:rgba(0,0,255,.5)}.demo-select-custom-colors.mdc-select--box:not(.mdc-select--disabled) .mdc-select__anchor{background-color:rgba(0,0,255,.1)}.demo-select-custom-colors.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading,.demo-select-custom-colors.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch,.demo-select-custom-colors.mdc-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing{border-color:rgba(0,0,255,.6)}.button-container{margin:8px 0}.demo-switch-wrapper{display:inline-block;margin-right:16px}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__track{background-color:#f44336}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb{background-color:#f44336;border-color:#f44336}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:after,.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:before{background-color:#f44336;background-color:var(--mdc-ripple-color,#f44336)}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-surface--hover:before,.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:hover:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-upgraded--background-focused:before,.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12)}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12)}.demo-switch--custom .mdc-switch.mdc-switch--checked .mdc-switch__thumb-underlay.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.rtl-toggle{margin:16px}.demo-elevation--custom-color{box-shadow:0 8px 10px -5px rgba(1,135,134,.3),0 16px 24px 2px rgba(1,135,134,.24),0 6px 30px 5px rgba(1,135,134,.22)}.demo-linear-progress--custom .mdc-linear-progress__bar-inner{border-color:#f44336}.demo-linear-progress--custom .mdc-linear-progress__buffer-dots{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffcdd2'/%3E%3C/svg%3E")}.demo-linear-progress--custom .mdc-linear-progress__buffer-bar{background-color:#ffcdd2}.demo-typography--section-baseline{position:relative;margin:24px;padding:0 24px 24px;border:1px solid #ddd;max-width:350px}.demo-typography__title:before{display:inline-block;width:0;height:34px;content:"";vertical-align:0}.demo-typography__title:after{display:inline-block;width:0;height:22px;content:"";vertical-align:-22px}.demo-typography__subtitle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.demo-typography__subtitle:before{display:inline-block;width:0;height:22px;content:"";vertical-align:0}.demo-typography__subtitle:after{display:inline-block;width:0;height:28px;content:"";vertical-align:-28px}.demo-typography__body{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.demo-typography__body:before{display:inline-block;width:0;height:28px;content:"";vertical-align:0}.demo-typography-line-1,.demo-typography-line-2,.demo-typography-line-3{position:absolute;border-top:1px solid #fd2549;width:100%;left:0;right:0;color:#fd2549;font-size:10px;text-align:right}.demo-typography-line-1{top:34px}.demo-typography-line-2{top:56px}.demo-typography-line-3{top:84px}.page--not-found{text-align:center}.page--home .hero{overflow:hidden}.page--home .pure-docs{text-align:center}.page--button .demo-controls{margin-bottom:16px}.page--button .demo .mdc-button{margin:0 16px 16px 0}.page--card .hero{height:auto;padding:24px}.page--card .demo{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center}.page--card .demo-card-toggles{margin:24px;padding:24px;text-align:center}.page--card .demo-card{width:320px}.page--card .demo-card--photo{width:200px}.page--card .demo-card__media{background-image:url(../img/1-1.dfff3193.jpg)}.page--card .demo-card__media--16-9{background-image:url(../img/16-9.058d7ce0.jpg)}.page--card .demo-card__media-content--with-title{display:flex;flex-direction:column;justify-content:flex-end}.page--card .demo-card__media-title{padding:8px 16px;background-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.5));color:#fff}.page--card .demo-card__primary{padding:1rem}.page--card .demo-card__title{margin:0}.page--card .demo-card__subtitle{margin:0}.page--card .demo-card__secondary,.page--card .demo-card__subtitle{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-background,rgba(0,0,0,.54))}.page--card .demo-card__secondary{padding:0 1rem 8px}.page--card .demo-card-article-group-heading{padding:8px 16px}.page--card .demo-card-article{padding:16px;text-decoration:none;color:inherit}.page--card .demo-card-article__title{margin:0 0 4px}.page--card .demo-card-article__snippet{margin:0}.page--card .demo-card--music{border-top-left-radius:24px;border-top-right-radius:4px;border-bottom-right-radius:24px;border-bottom-left-radius:4px}.page--card .demo-card--music[dir=rtl],[dir=rtl] .page--card .demo-card--music{border-top-left-radius:4px;border-top-right-radius:24px;border-bottom-right-radius:4px;border-bottom-left-radius:24px}.page--card .demo-card__music-row{display:flex;border-top-left-radius:inherit}.page--card .demo-card__music-row[dir=rtl],[dir=rtl] .page--card .demo-card__music-row{border-top-left-radius:0;border-top-right-radius:inherit}.page--card .demo-card__media--music{width:110px;border-top-left-radius:inherit}.page--card .demo-card__media--music[dir=rtl],[dir=rtl] .page--card .demo-card__media--music{border-top-left-radius:0;border-top-right-radius:inherit}.page--card .demo-card__music-info{display:flex;flex-direction:column;padding:8px 16px}.page--card .demo-card__action-buttons--text-only{margin-left:8px}.page--card .demo-card__action-icon--star{margin-left:4px;margin-right:4px;cursor:pointer}.page--checkbox .demo{margin-bottom:5px}.page--checkbox .mdc-button code{text-transform:none}.page--dialog .hero-dialog{position:relative;z-index:auto}.demo-confirmation-dialog .mdc-dialog__surface{max-height:268px}.balmui-navigation_dismissible-drawer-full-height-drawer .balmui-container,.balmui-navigation_permanent-drawer-above-toolbar .balmui-container,.balmui-navigation_permanent-drawer-below-toolbar .balmui-container{display:block;min-height:auto}.page--drawer .hero-demo h3{text-align:left}.page--drawer .demo-app-content{overflow:auto;height:100%;padding-left:18px;padding-right:18px}.page--permanent-drawer-above-toolbar .demo-content{position:relative}.page--permanent-drawer-above-toolbar .demo-app-bar{position:absolute}.page--dismissible-drawer-below-top-app-bar .demo-app-content,.page--dismissible-drawer-full-height-drawer .demo-content,.page--permanent-drawer-above-toolbar .demo-content,.page--permanent-drawer-below-toolbar .demo-app-content{width:100%}.page--dismissible-drawer-below-top-app-bar .demo-app-bar{z-index:7}.page--elevation .demo{display:flex;flex-direction:row;flex-wrap:wrap}.page--elevation .demo-surface{display:flex;align-items:center;justify-content:center;width:160px;height:80px;border-radius:3px;font-size:.8em;color:#9e9e9e;background:#fff}.page--elevation .hero .demo-surface{width:120px;height:48px;margin:24px;background-color:#212121;color:#f0f0f0}.page--elevation #hover-el{display:flex;align-items:center;justify-content:center;padding:2rem;border-radius:4px}.page--fab .demo{display:flex;flex-wrap:wrap}.page--fab figcaption>div{margin:8px}.page--fab .mdc-fab{margin:16px}.page--fab .demo-absolute-fab,.page--fab .demo-fixed-fab{position:absolute;bottom:1rem;right:1rem;z-index:1}.page--fab .demo-fixed-fab{position:fixed}@media (min-width:1024px){.page--fab .demo-fixed-fab{bottom:1.5rem;right:1.5rem}}.page--fab .fab-motion-container{position:relative;width:300px;height:150px;overflow:hidden;padding:0 10px;border:1px solid #ccc}.page--fab .fab-motion-container__view{background-color:#fff;box-sizing:border-box;position:absolute;transition:transform 375ms cubic-bezier(0,0,.2,1);height:100%;width:100%;will-change:transform}.page--fab .fab-motion-container__view--exited{transition-timing-function:cubic-bezier(.4,0,1,1);transform:translateY(100%)}.page--icon-button .demo{display:flex;flex-wrap:wrap}.page--icon-button .toggle-example{margin:0 24px 24px 0}.page--icon-button .example{display:flex;justify-content:center}.page--grid{width:100%}.page--grid .demo-grid{background-color:#ddd;margin-bottom:32px}.page--grid .demo-cell{box-sizing:border-box;background-color:#666;height:200px;padding:8px;color:#fff;font-size:1.5em}.page--grid .demo-parent-cell{position:relative;background-color:#aaa}.page--grid .demo-child-cell{position:relative}.page--grid .demo-child-cell>span{position:absolute;bottom:8px;right:8px;color:#ddd}.page--grid .demo-grid.max-width{max-width:1280px}.page--grid .demo-grid-legend{margin:16px 0 8px}.page--grid .demo-ruler{position:fixed;z-index:1;display:flex;align-items:center;justify-content:center;bottom:0;left:0;height:20px;width:100%;margin:0;background:#000;color:#fff}.page--grid .demo-controls{display:none;margin-bottom:8px}.page--grid .demo-warning:after{content:"This browser does not support custom properties, so margins and gutters cannot be changed at runtime."}@supports (--foo:green){.page--grid .demo-controls{display:block}.page--grid .demo-warning:after{content:""}}.page--grid .hero .demo-grid{min-width:320px}.page--grid .hero .demo-cell{height:60px}.page--grid .demo-parent-cell .mdc-layout-grid__inner>span{position:absolute;top:8px;left:8px;font-size:1.5em;color:#fff}.page--progress .example{margin-bottom:64px}.page--list .mdc-deprecated-list,.page--list .mdc-deprecated-list-group{max-width:600px}.page--list .demo-wrapper .mdc-deprecated-list,.page--list .demo-wrapper .mdc-deprecated-list-group{border:1px solid rgba(0,0,0,.1)}.page--list .demo-wrapper .mdc-deprecated-list-group .mdc-deprecated-list{border:none}.page--list .demo-wrapper h2{margin-bottom:.8em;margin-left:24px}.page--list .demo-wrapper h3{margin-bottom:.8em}.page--list .hero-demo .mdc-deprecated-list{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);min-width:320px;background-color:#fff}.page--menu>.mdc-typography--body2{overflow-x:hidden}.page--menu .hero .mdc-menu-surface{position:static;z-index:1}.page--menu .demo-content{position:relative;border:1px solid}.page--menu .demo-controls{padding:40px 20px}.page--menu .mdc-text-field input{width:3em}.page--menu .demo-button__long-text,.page--menu .demo-button__normal-text{display:none}.page--menu .demo-button--long .demo-button__long-text,.page--menu .demo-button--long .demo-button__normal-text,.page--menu .demo-button--normal .demo-button__normal-text{display:inline}.page--menu .standard-image-list{width:200px}.page--menu .standard-image-list .mdc-image-list__image-aspect-container{padding-bottom:66.66667%}.page--menu .standard-image-list .mdc-image-list__item{width:calc(100% - 5px);margin:2px}.page--menu #demo-menu{width:336px}.page--menu #demo-menu-2{width:280px}.page--menu #demo-menu-3{width:224px}.page--slider .hero .mdc-form{width:100%}.page--slider #hero-slider-wrapper{margin:0 auto;width:100%;max-width:600px;--mdc-slider-bg-color-behind-component:#f2f2f2}.page--slider .custom-bg{background-color:#eee;--mdc-slider-bg-color-behind-component:#eee}.page--slider .mdc-typography--headline6{margin:0}.page--slider .demo-param-field-group+.demo-param-field-group{margin-top:16px}.page--slider .demo-param-field{display:block}.page--slider .demo-param-input-label{display:inline-block;min-width:2.5em}.page--slider .example-slider-wrapper{padding:0 16px}.page--snackbar .loading .example .mdc-snackbar{transform:translateY(200%)}.page--snackbar .hero .mdc-snackbar{position:relative;left:auto;z-index:0}.page--snackbar .hero .mdc-snackbar--active{transform:none}.page--switch .demo .mdc-form-field{margin-right:20px}.page--tabs .hero-demo .mdc-tab-bar.long{width:450px}.page--tabs .demo{display:flex;align-items:center}.page--tabs .demo-tab{flex:0 1 auto}.page--tabs .custom-tab .mdc-tab__text-label{color:#64b5f6}.page--tabs .custom-tab .mdc-tab__icon{color:#ffb74d;fill:currentColor}.page--tabs .custom-tab .custom-tab-indicator .mdc-tab-indicator__content--underline{border-color:#c51162;border-top-width:5px;border-top-left-radius:5px;border-top-right-radius:5px}.page--tabs .custom-tab .mdc-tab__ripple:after,.page--tabs .custom-tab .mdc-tab__ripple:before{background-color:#f8bbd0;background-color:var(--mdc-ripple-color,#f8bbd0)}.page--tabs .custom-tab .mdc-tab__ripple.mdc-ripple-surface--hover:before,.page--tabs .custom-tab .mdc-tab__ripple:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.page--tabs .custom-tab .mdc-tab__ripple.mdc-ripple-upgraded--background-focused:before,.page--tabs .custom-tab .mdc-tab__ripple:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.page--tabs .custom-tab .mdc-tab__ripple:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.page--tabs .custom-tab .mdc-tab__ripple:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.page--tabs .custom-tab .mdc-tab__ripple.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.page--tabs .custom-tab.mdc-tab--active .mdc-tab__text-label{color:#0d47a1}.page--tabs .custom-tab.mdc-tab--active .mdc-tab__icon{color:#e65100;fill:currentColor}.page--tabs .hero-demo-tab-bar{background-color:#f2f2f2;max-width:420px}.page--tabs .custom-demo-tab-bar .mdc-tab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-subtitle1-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1rem;font-size:var(--mdc-typography-subtitle1-font-size,1rem);line-height:1.75rem;line-height:var(--mdc-typography-subtitle1-line-height,1.75rem);font-weight:400;font-weight:var(--mdc-typography-subtitle1-font-weight,400);letter-spacing:.009375em;letter-spacing:var(--mdc-typography-subtitle1-letter-spacing,.009375em);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-decoration:var(--mdc-typography-subtitle1-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-subtitle1-text-transform,inherit);flex:0 1 120px}.page--tabs .custom-demo-tab-bar .mdc-tab .mdc-tab__text-label{color:#1e88e5}.page--tabs .custom-demo-tab-bar .mdc-tab .mdc-tab__icon{color:#1e88e5;fill:currentColor}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:after,.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:before{background-color:#fbc02d;background-color:var(--mdc-ripple-color,#fbc02d)}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple.mdc-ripple-surface--hover:before,.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple.mdc-ripple-upgraded--background-focused:before,.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.page--tabs .custom-demo-tab-bar .mdc-tab__ripple.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.page--tabs .custom-demo-tab-bar .mdc-tab--active .mdc-tab__text-label{color:#0d47a1}.page--tabs .custom-demo-tab-bar .mdc-tab--active .mdc-tab__icon{color:#0d47a1;fill:currentColor}.page--tabs .custom-demo-tab-bar .mdc-tab-indicator .mdc-tab-indicator__content--underline{border-top-width:5px;border-color:#fbc02d}.page--tabs .demo-scroller{width:360px;outline:1px solid #bdbdbd}.page--tabs .demo-cube{width:43px;height:43px;margin:10px}.page--tabs .demo-cube:first-child{background-color:#0d31a5}.page--tabs .demo-cube:nth-child(2){background-color:#5165cd}.page--tabs .demo-cube:nth-child(3){background-color:#984e47}.page--tabs .demo-cube:nth-child(4){background-color:#da5b7e}.page--tabs .demo-cube:nth-child(5){background-color:#3c7de8}.page--tabs .demo-cube:nth-child(6){background-color:#c27655}.page--tabs .demo-cube:nth-child(7){background-color:#9e52a2}.page--tabs .demo-cube:nth-child(8){background-color:#129b86}.page--tabs .demo-cube:nth-child(9){background-color:#0fe6d2}.page--tabs .demo-cube:nth-child(10){background-color:#66672f}.page--tabs .demo-cube:nth-child(11){background-color:#61b88d}.page--tabs .demo-cube:nth-child(12){background-color:#d27f6c}.page--tabs .demo-cube:nth-child(13){background-color:#52d5bb}.page--tabs .demo-cube:nth-child(14){background-color:#aa87b0}.page--tabs .demo-cube:nth-child(15){background-color:#e6a0a5}.page--tabs .demo-cube:nth-child(16){background-color:#de4b4f}.page--tabs .demo-cube:nth-child(17){background-color:#2cc92f}.page--tabs .demo-cube:nth-child(18){background-color:#2255a1}.page--tabs .demo-cube:nth-child(19){background-color:#535f4f}.page--tabs .demo-cube:nth-child(20){background-color:#83820f}.page--tabs .demo-cube:nth-child(21){background-color:#71c065}.page--tabs .demo-cube:nth-child(22){background-color:#4052db}.page--tabs .demo-cube:nth-child(23){background-color:#d55544}.page--tabs .demo-cube:nth-child(24){background-color:#e6dee8}.page--tabs .demo-cube:nth-child(25){background-color:#5d5ac3}.page--tabs .demo-cube:nth-child(26){background-color:#1d8aa6}.page--tabs .demo-cube:nth-child(27){background-color:#ec6a98}.page--tabs .demo-cube:nth-child(28){background-color:#62c62f}.page--tabs .demo-cube:nth-child(29){background-color:#6150f0}.page--tabs .demo-cube:nth-child(30){background-color:#709e34}.page--tabs .demo-cube:nth-child(31){background-color:#5c8c69}.page--tabs .demo-cube:nth-child(32){background-color:#b02c50}.page--tabs .demo-cube:nth-child(33){background-color:#ef891f}.page--tabs .demo-cube:nth-child(34){background-color:#0db68a}.page--tabs .demo-controller{padding:10px 0}.page--tabs .demo-controller-row{padding:5px 0}@media (max-width:599px){.page--tabs .hero-demo .mdc-tab-bar{max-width:320px}}.page--textfield .hero .mdc-text-field{min-width:240px}.page--textfield .hero-demo .mdc-text-field-character-counter{display:none}.page--textfield .hero-demo .show-counter .mdc-text-field-character-counter{display:block}.page--textfield .demo-with-icon{margin-bottom:16px}.page--textfield .full-width-textarea-example{margin-top:16px}.demo-theme{display:flex;flex-wrap:wrap;padding:8px;background-color:grey}.demo-theme dd,.demo-theme dt{height:80px;padding:8px;margin-bottom:1px}.demo-theme dt{width:100%}.demo-theme dd{width:50%;margin-left:0}.demo-text-theme{padding:2px;background-color:grey}.demo-text-theme ul{display:flex;margin:0;padding:0}.demo-text-theme li{list-style:none;width:20%;height:40px;line-height:40px;border-right:1px solid;text-align:center}.demo-text-theme li:last-child{margin:0}.page--theme figure{margin-left:0;margin-right:0}.page--theme .hero button{margin:24px}.page--theme .demo-fixed-theme{position:fixed;top:70px;right:0;z-index:3}@media (max-width:599px){.page--theme .demo-fixed-theme{top:110px}}.page--theme .demo-main{display:flex;flex-wrap:wrap}.page--theme .demo-component-section{position:relative}.page--theme .demo-component-section+.demo-component-section{margin-top:48px}.page--theme .demo-component-section:before{content:"";display:block;position:absolute;top:-16px;left:-16px;right:-16px;bottom:-16px;z-index:-1;background:#fbc02d;opacity:0;transition:opacity 1s}.page--theme .demo-component-section--flash:before{opacity:.5;transition:none}.page--theme .demo-component-section__permalink{color:inherit;opacity:0}.demo-component-section:hover .page--theme .demo-component-section__permalink,.demo-component-section__heading--focus-within .page--theme .demo-component-section__permalink{opacity:1}.page--theme .demo-theme-color-section+.demo-theme-color-section{margin-top:36px}.page--theme .demo-theme-color-section__row{display:flex;flex-wrap:wrap}.page--theme .demo-fieldset--color{margin-right:36px}.page--theme .demo-theme-color-group{padding:16px 0}.page--theme .demo-theme-color-swatches{display:inline-flex;flex-direction:column;margin-right:16px}.page--theme .demo-theme-color-swatch{box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);display:inline-block;box-sizing:border-box;width:150px;height:50px;line-height:50px;text-align:center;margin-bottom:8px;border-radius:4px}.page--theme .demo-theme-bg--low-luminance{background-color:#3e2723}.page--theme .demo-theme-bg--high-luminance{background-color:#fff8e1}.page--theme .demo-theme-bg--custom-light{background-color:#ddd}.page--theme .demo-theme-bg--custom-dark{background-color:#1d1d1d}.page--theme .demo-theme-text-row{display:inline-flex;box-sizing:border-box;padding:16px;border:1px solid #f0f0f0;align-items:center;flex-direction:column}@media (min-width:768px){.page--theme .demo-theme-text-row{flex-direction:row}}.page--theme .demo-theme-text-style{padding:0 16px}.page--theme .demo-fieldset--button+.demo-fieldset--button{margin-top:16px}.page--theme .demo-button__code{font-size:smaller;text-transform:none}.page--theme .demo-card-wrapper{display:inline-block;margin:0 24px 24px 0;vertical-align:top}.page--theme .demo-card__media{background-image:url(../img/1-1.dfff3193.jpg)}.page--theme .demo-card__media--16-9{background-image:url(../img/16-9.058d7ce0.jpg)}.page--theme .demo-checkbox-row{display:flex;flex-wrap:wrap;align-items:center}.page--theme .demo-checkbox-toggle-button,.page--theme .demo-checkbox-wrapper{margin-right:10px}.page--theme .demo-checkbox-wrapper+.demo-checkbox-toggle-button{margin-left:20px}.page--theme .demo-dialog{position:relative;justify-content:flex-start;z-index:auto}.page--theme .demo-drawer-toggle{vertical-align:middle;cursor:pointer}.page--theme .demo-drawer-toggle:after,.page--theme .demo-drawer-toggle:before{background-color:#fff;background-color:var(--mdc-ripple-color,var(--mdc-theme-on-primary,#fff))}.page--theme .demo-drawer-toggle.mdc-ripple-surface--hover:before,.page--theme .demo-drawer-toggle:hover:before{opacity:.08;opacity:var(--mdc-ripple-hover-opacity,.08)}.page--theme .demo-drawer-toggle.mdc-ripple-upgraded--background-focused:before,.page--theme .demo-drawer-toggle:not(.mdc-ripple-upgraded):focus:before{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity,.24)}.page--theme .demo-drawer-toggle:not(.mdc-ripple-upgraded):after{transition:opacity .15s linear}.page--theme .demo-drawer-toggle:not(.mdc-ripple-upgraded):active:after{transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity,.24)}.page--theme .demo-drawer-toggle.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.24)}.page--theme .demo-fab-row{display:flex;flex-wrap:wrap}.page--theme .demo-fab{margin:16px 0 0}.page--theme .demo-fab-tile{margin:0 48px 1em 0}.page--theme .demo-fab-tile__title{font-weight:500}.page--theme .demo-fab-tile__snippet{height:2em}.page--theme .mdc-icon-button{display:inline-flex}.page--theme .demo-icon-toggle-row{display:flex;flex-wrap:wrap}.page--theme .demo-icon-toggle-tile{width:200px;margin:0 10px 10px 0;padding:20px;border-radius:5px;text-align:center}.page--theme .demo-progress-row{margin:32px 0}.page--theme .demo-progress-row+.demo-progress-row{margin-top:64px}.page--theme .demo-radio-group{display:inline-block;margin:0 24px 24px 0}.page--theme .demo-radio-form-field{margin-right:8px}.page--theme .demo-switch-wrapper{display:inline-block;margin:16px 16px 0 0}.page--theme .demo-figure--tab-bar+.demo-figure--tab-bar{margin-top:36px}.page--theme .demo-tab-bar{margin:0}.page--theme .demo-text-field-wrapper{display:inline-block;margin:16px 16px 0 0}.page--theme .demo-text-field{margin-top:0!important}.component-section{width:90%;min-height:240px;margin:10px 5% 40px}.component-section .mdc-typography--headline6{margin-top:0}.component-section .component-wrapper{position:relative;display:flex;justify-content:center;align-items:center}.component-section .component-wrapper.space-around{justify-content:space-around}.component-section .component-wrapper.no-flex{display:block}.component-section .component-wrapper .mdc-drawer,.component-section .component-wrapper .mdc-top-app-bar{position:static;top:auto!important;z-index:0;display:block}.component-section .component-wrapper .mdc-drawer{border-width:1px;border-style:solid}.component-section .component-wrapper .mdc-menu-surface{z-index:1}.component-section .component-wrapper .mdc-image-list__item{margin-bottom:16px}.component-section .list-component,.component-section .select-component,.component-section .textfield-component{display:block}.component-section .list-component .mdc-form-field,.component-section .select-component .mdc-form-field,.component-section .textfield-component .mdc-form-field{margin-bottom:16px}.component-section .list-component .mdc-deprecated-list,.component-section .select-component .mdc-deprecated-list,.component-section .textfield-component .mdc-deprecated-list{border:1px solid rgba(0,0,0,.1);background:#fff}.component-section .menu-component .mdc-menu-surface{top:0}.component-section .mdc-image-list{-moz-column-count:2;column-count:2;-moz-column-gap:16px;column-gap:16px;max-width:400px;max-height:600px}@media screen and (min-width:1241px){.component-section{width:40%;margin:10px 5% 20px}}.switch-theme .demo-theme-color-radio{display:block;border:1px solid #9e9e9e;border-radius:50%}.switch-theme .demo-theme-color-radio__inner{display:block;border:11px solid;border-radius:50%}.switch-theme [data-theme=baseline] .demo-theme-color-radio__inner{border-color:#6200ea #1de9b6 #1de9b6 #6200ea}.switch-theme [data-theme=black] .demo-theme-color-radio__inner{border-color:#212121 #64dd17 #64dd17 #212121}.switch-theme [data-theme=dark] .demo-theme-color-radio__inner{border-color:#ffd54f #ec407a #ec407a #ffd54f}.switch-theme [data-theme=shrine] .demo-theme-color-radio__inner{border-color:#442b2d #fcb8ab #fcb8ab #442b2d}.switch-theme .demo-theme-menu{min-width:320px}.switch-theme .demo-theme-menu__list-item--selected{background-color:#bdbdbd}.switch-theme .demo-theme-list{color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-light,rgba(0,0,0,.87))}.mdc-typography--custom-style-1{color:red}.mdc-typography--custom-style-2{color:#00f}.page--typography .demo-typography--section{margin:24px;padding:24px;border:1px solid #ddd}.page--typography .demo-typography--section>div{margin-bottom:20px}.page--typography .demo-typography--headline>*{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.page--typography .demo-typography--heading-baseline{margin-left:24px}.page--typography .markdown-body table td:nth-child(2){color:currentColor;font-size:16px}.page--icon .icons-preview-code{display:flex;text-align:center}.page--icon .search-area{position:sticky;top:112px;z-index:1;background-color:#fff;margin:0}.page--icon .search-area-inner{display:flex}.page--icon .search-area-inner .mdc-text-field{flex:1}.page--icon .search-area-inner .mdc-select__anchor{width:auto}.page--icon #search{flex:1;text-indent:14px}.page--icon .search-helper{padding:10px 16px;font-size:14px}.page--icon .search-helper b{color:#6200ee}.page--icon .material-icons{overflow:hidden}.page--icon .mdc-deprecated-list-group__subheader{text-transform:capitalize}.page--icon .mdc-image-list__item{display:flex;flex-direction:column;align-items:center;width:120px;height:120px;padding:8px;transition:all .4s;color:#757575;background:transparent}.page--icon .mdc-image-list__item:hover{background-color:#e0e0e0}.page--icon .mdc-image-list__image-aspect-container{flex:1;display:flex;align-items:center;padding:0;position:static}.page--icon .mdc-image-list__image-aspect-container i{cursor:pointer}.page--icon .mdc-image-list__supporting{font-size:12px;display:inline-block;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.page--icon .new-badge{font-size:10px;font-weight:500;position:absolute;top:5px;right:0;padding:2px 3px;color:#fff;border-radius:2px;background:#fe6363}@media (max-width:599px){.page--icon .search-area{top:104px}.page--icon #icon-type{min-width:auto}.page--icon .coloring-example .icons-preview-code{flex-wrap:wrap;align-items:center;justify-content:center}.page--icon .mdc-image-list__item{width:88px;height:88px}.page--icon .mdc-image-list__item .md-48{font-size:24px;width:24px;height:24px}.page--icon .mdc-image-list__item .mdc-image-list__supporting{display:none}}.page--icon .category-affix{position:fixed;right:0;bottom:0;width:auto;height:200px;overflow-y:auto;background:#fff;z-index:11;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.page--icon .category-affix .mdc-tab{width:100%;justify-content:start}.icons-preview{display:flex;flex-flow:column;align-items:center;background-color:#f9f9f9;width:128px;padding:16px}.icons-preview .icon-caption{font-size:13px;margin-top:8px}.icons-preview.icons-dark-bg{background-color:#333}.icons-preview.icons-dark-bg .icon-caption{color:#fff}.icons-preview .orange600{color:#fb8c00}.page--top-app-bar{width:100%}.page--top-app-bar .demo-paragraph{margin:0;padding:20px 28px}@media (max-width:599px){.page--top-app-bar .demo-paragraph{padding:16px}}.page--top-app-bar .demo-body{padding:0;margin:0;box-sizing:border-box}.page--image-list .hero-image-list{width:300px;margin:0}.page--image-list .hero-image-list .mdc-image-list__item{width:calc(20% - 4.2px);margin:2px}.page--image-list .hero-image-list .mdc-image-list__image{background-color:#000}.page--image-list .standard-image-list{max-width:1000px}.page--image-list .standard-image-list .mdc-image-list__image-aspect-container{padding-bottom:66.66667%}.page--image-list .standard-image-list .mdc-image-list__item{width:calc(20% - 4.2px);margin:2px}.page--image-list .masonry-image-list{-moz-column-count:5;column-count:5;-moz-column-gap:16px;column-gap:16px;max-width:1000px}.page--image-list .masonry-image-list .mdc-image-list__item{margin-bottom:16px}.page--image-list .hide-supporting .mdc-image-list__supporting{display:none}.page--image-list .rounded-corners .mdc-image-list__image{border-radius:8px}.page--image-list .rounded-corners.mdc-image-list--with-text-protection .mdc-image-list__supporting{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px}@media (max-width:599px){.page--image-list .standard-image-list .mdc-image-list__item{width:calc(33.33333% - 4.33333px);margin:2px}.page--image-list .masonry-image-list{-moz-column-count:3;column-count:3;-moz-column-gap:16px;column-gap:16px}.page--image-list .masonry-image-list .mdc-image-list__item{margin-bottom:16px}}.page--ripple .hero{padding:0;display:block;height:360px}.page--ripple .hero>div{width:100%;height:100%}.page--ripple .demo-surface{display:flex;align-items:center;justify-content:center;width:200px;height:100px;padding:1rem;cursor:pointer;-moz-user-select:none;user-select:none;-webkit-user-select:none}.page--ripple .demo-surface[data-mdc-ripple-is-unbounded]{width:24px;height:24px;padding:12px}.page--ripple button.demo-surface{display:inline-block;background:none;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.page--ripple .demo{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-around}.page--ripple .mdc-typography--headline6{margin:10px 0}@media (max-width:599px){.page--ripple .demo{flex-direction:column;width:100%}.page--ripple .demo-surface{margin:0 auto}}.page--anchor .anchor-example-inner{display:flex;flex-direction:column;justify-content:space-around;height:1000px}.page--file .list-enter,.page--file .list-leave-to{opacity:0;transform:translateY(100%)}.page--file .list-leave-active{position:absolute}.page--file .preview-list{display:flex;flex-wrap:wrap;padding:1em 0 0 1em;position:relative}.page--file .preview-list>.item{width:12.5%;padding-right:1em;margin-bottom:1em;list-style:none;transition:all 1s}.page--file .preview-list>.item .inner{width:100%}.page--file .preview-list>.item .preview{display:block;width:100%;height:0;padding-bottom:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;border:1px solid #ddd;border-radius:3px}.page--file .preview-list>.item .name{display:block;width:100%;line-height:1.8em;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.page--file .preview-list>.item .actions{display:flex;align-items:center;justify-content:space-around;height:48px}.page--file .preview-list>.item.add-btn .mdc-file{position:relative;width:100%;height:0;padding-bottom:100%;border:1px solid #ddd;border-radius:3px;cursor:pointer;background-color:#fff}.page--file .preview-list>.item.add-btn .add-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:48px}@media (max-width:640px){.page--file .preview-list>.item{width:33.333%}}.page--divider .hero-demo{display:flex;justify-content:center;align-items:center;width:50%;height:128px}.page--divider .vertical-divider-demo{width:300px;height:120px;padding:10px;border:1px solid}.page--divider .vertical-divider-demo .block{width:80px;height:80px}.page--divider .vertical-divider-demo .red{background-color:red}.page--divider .vertical-divider-demo .blue{background-color:#00f}.page--validator .form-item{margin-bottom:10px}.page--skeleton .demo{max-width:600px}.page--badge .demo{display:flex;flex-flow:wrap;justify-content:space-around}.page--badge .demo .mdc-badge{margin-bottom:10px}.page--form .mdc-form{padding:10px;border:1px solid}.page--form .conditions-form .mdc-form__item>label{flex-basis:80px;margin-right:10px;text-align:right}.page--form .conditions-form .mdc-select,.page--form .conditions-form .mdc-text-field{min-width:200px}.page--banner .hero-demo{width:100%}.page--banner .hero-banner{position:relative;z-index:auto;height:52px}.page--banner .hero-banner.mdc-banner--with-image{height:72px}.page--shape .demos{display:flex;flex-wrap:wrap}.page--shape .demo{display:flex;justify-content:center;align-items:center;width:128px;height:128px;margin:0 10px 10px 0;background:#e5e5e5}.page--shape .mdc-shape--rounded.mdc-shape--medium{border-radius:16px}.page--shape .mdc-shape--rounded.mdc-shape--large{border-radius:24px}.page--shape .mdc-shape--cut.mdc-shape--small{-webkit-clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px));clip-path:polygon(0 4px,4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px))}.page--shape .mdc-shape--cut.mdc-shape--medium{-webkit-clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px));clip-path:polygon(0 8px,8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px))}.page--shape .mdc-shape--cut.mdc-shape--large{-webkit-clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));clip-path:polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px))}.ql-bubble .ql-tooltip,.ql-snow .ql-tooltip{z-index:2}.preview-dialog .mdc-dialog__title .close{position:absolute;top:0;right:0}.preview-dialog .mdc-dialog__surface{max-width:1024px}.preview-dialog .preview-content{min-width:280px;min-height:320px;margin:0 auto;padding:20px}.preview-code{word-wrap:break-word;overflow-wrap:break-word}.page--donate .hero{overflow:hidden}.page--donate .donate-method{list-style:none;width:256px;height:300px;margin:0 auto;background:none 50% no-repeat;background-size:contain}.page--donate .donate-method.alipay{background-image:url(../img/alipay.c0897c3c.png)}.page--donate .donate-method.wechatpay{background-image:url(../img/wechatpay.a1551a21.png)}.laravel-admin{display:block;width:320px;height:73px;background:url(../img/support/laravel-admin.85ddd851.png) 50% no-repeat;background-size:contain;text-indent:100%;white-space:nowrap;overflow:hidden}.page--lazyload .masonry-image-list{-moz-column-count:5;column-count:5;-moz-column-gap:16px;column-gap:16px;max-width:1000px}.page--lazyload .masonry-image-list .mdc-image-list__item{margin-bottom:16px} \ No newline at end of file diff --git a/index.html b/index.html index f96b3001..b1ad3d9b 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -
$theme
interface VueInstance {\n $theme: BalmUITheme;\n}\n
$theme.primary
$theme.secondary
$theme.background
$theme.surface
$theme.error
$theme.onPrimary
$theme.onSecondary
$theme.onSurface
$theme.onError
interface BalmUITheme {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n error: string;\n onPrimary: string;\n onSecondary: string;\n onSurface: string;\n onError: string;\n}\n
$theme.colors
type ThemeColor = {\n primary?: string;\n secondary?: string;\n background?: string;\n surface?: string;\n error?: string;\n on-primary?: string;\n on-secondary?: string;\n on-surface?: string;\n on-error?: string;\n}\n\ninterface BalmUITheme {\n colors: ThemeColor;\n}\n
$theme.getThemeColor(style)
type ThemeColorStyle =\n | 'primary'\n | 'secondary'\n | 'background'\n | 'surface'\n | 'error'\n | 'on-primary'\n | 'on-secondary'\n | 'on-surface'\n | 'on-error';\n\ninterface BalmUITheme {\n getThemeColor(style: ThemeColorStyle): string;\n}\n
$theme.getThemeClass(style)
type ThemeClassStyle = ThemeColorStyle | 'primary-bg' | 'secondary-bg';\n\ninterface BalmUITheme {\n getThemeClass(style: ThemeClassStyle): string;\n}\n
type TextStyle = 'primary' | 'secondary' | 'hint' | 'disabled' | 'icon';\n\ntype ThemeTone = 'background' | 'light' | 'dark';\n
Get text color/class
interface BalmUITheme {\n getTextColor(style: TextStyle, tone: ThemeTone): string;\n getTextClass(style: TextStyle, tone: ThemeTone): string;\n}\n
Set text color
interface BalmUITheme {\n setTextColor(style: TextStyle, value: string): void;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | Text style name. |
tone | string | 'background' | Theme tone name. |
value | string | '' | Text color value. |
Get text color/class
interface BalmUITheme {\n getTextColorOnLight(style: TextStyle): string;\n getTextClassOnLight(style: TextStyle): string;\n\n getTextColorOnDark(style: TextStyle): string;\n getTextClassOnDark(style: TextStyle): string;\n}\n
Set text color
interface BalmUITheme {\n setTextColorOnLight(style: TextStyle, value: string): void;\n setTextColorOnDark(style: TextStyle, value: string): void;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | Text style name. |
value | string | '' | Text color value. |
$theme
without .vue
componentNew in 8.1.0
import { useTheme } from 'balm-ui';\n// OR\n// import { useTheme } from 'balm-ui/plugins/theme';\n\nconst $theme = useTheme();\n
'},"+4iP":function(t,e){t.exports='<ui-form class="conditions-form" nowrap action-align="center">\n <template #default="{ itemClass, actionClass }">\n <ui-grid>\n <ui-grid-cell>\n <ui-form-field :class="[itemClass, 'required']">\n <label>Label1</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n </ui-grid-cell>\n <ui-grid-cell>\n <ui-form-field :class="itemClass">\n <label>Label2</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n </ui-grid-cell>\n <ui-grid-cell>\n <ui-form-field :class="itemClass">\n <label>Label3</label>\n <ui-select></ui-select>\n </ui-form-field>\n </ui-grid-cell>\n <ui-grid-cell>\n <ui-form-field :class="itemClass">\n <label>Label4</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n </ui-grid-cell>\n <ui-grid-cell>\n <ui-form-field :class="itemClass">\n <label>Label5</label>\n <ui-select></ui-select>\n </ui-form-field>\n </ui-grid-cell>\n </ui-grid>\n <ui-form-field :class="actionClass">\n <ui-button raised>Search</ui-button>\n <ui-button outlined>Reset</ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
.conditions-form {\n .mdc-form__item > label {\n flex-basis: 80px;\n margin-right: 10px;\n text-align: right;\n }\n\n .mdc-text-field,\n .mdc-select {\n min-width: 200px;\n }\n}\n
'},"+6Y1":function(t,e){t.exports='<ui-divider></ui-divider>\n
<ui-divider>
\u7c7b\u578b
0
: 'horizontal'
1
: 'vertical'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u5206\u5272\u7ebf\u7c7b\u578b |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5206\u5272\u7ebf\u6587\u672c\u53ca HTML | |
left | \u4ec5\u9002\u7528\u4e8e\u5782\u76f4\u5206\u9694\u7b26\u7684\u5de6\u8fb9\u6587\u672c | |
right | \u4ec5\u9002\u7528\u4e8e\u5782\u76f4\u5206\u9694\u7b26\u7684\u53f3\u8fb9\u6587\u672c |
$grid
interface VueInstance {\n set: BalmUIGrid;\n}\n
type GridProperty = 'margin' | 'gutter' | 'column-width';\ntype GridSize = 'desktop' | 'tablet' | 'phone';\n\ninterface BalmUIGrid {\n set(property: GridProperty, size: GridSize, value: string): void;\n}\n
\u63d0\u793a\uff1a\u5982\u679c
balm-ui < 8.27.0
\uff0c\u8bf7\u4f7f\u7528$setGrid
\u4ee3\u66ff$grid.set
\u3002
Param | Type | Default | Description |
---|---|---|---|
property | string | '' | \u6805\u683c\u5c5e\u6027\uff1amargin , gutter \u6216 column-width |
size | string | '' | \u76ee\u6807\u5e73\u53f0\uff1adesktop , tablet \u6216 phone |
value | string | '' | \u81ea\u5b9a\u4e49\u6805\u683c\u503c |
margin
: \u6805\u683c\u8fb9\u8ddd\u7684\u5927\u5c0fgutter
: \u5355\u5143\u4e4b\u95f4\u7684\u88c5\u8ba2\u7ebf\u7684\u5927\u5c0fcolumn-width
: \u6805\u683c\u5185\u5217\u7684\u5bbd\u5ea6.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $grid
New in 8.1.0
import { useGrid } from 'balm-ui';\n// \u6216\n// import { useGrid } from 'balm-ui/plugins/grid';\n\nconst $grid = useGrid();\n
'},"+J09":function(t,e){t.exports='<ui-pagination v-model="page" :total="total" show-total mini></ui-pagination>\n
export default {\n data() {\n return {\n page: 1,\n total: 100\n };\n }\n};\n
'},"+Lqg":function(t,e){t.exports='<figure v-for="i in 25" :key="i" v-shadow="i - 1" class="demo-surface">\n <figcaption>{{ i - 1 }}dp ( <code>v-shadow="{{ i - 1 }}"</code>)</figcaption>\n</figure>\n
'},"+LzF":function(t,e){t.exports='<ui-list>\n <ui-item v-for="i in 3" :key="i">\n <ui-item-text-content>Line item</ui-item-text-content>\n </ui-item>\n</ui-list>\n
'},"+NNH":function(t,e){t.exports='You need to set up your development environment before you can do anything.
Install Node.js\xae and npm if they are not already on your machine.
Verify that you are running at least Node.js version 10.13.0 or greater and npm version 5.2.0 or greater by running
node -v
andnpm -v
in a terminal/console window. Older versions produce errors, but newer versions are fine.
Good tools make application development quicker and easier to maintain than if you did everything by hand.
The Balm CLI is a command line interface tool that scaffolds out a BalmJS project.
Balm CLI(Recommended) or Vue CLI or other toolchains \ud83d\ude80
First install the Balm Core and Balm CLI globally for Balm CLI.
yarn global add balm-core balm-cli\n# OR\nnpm install -g balm-core balm-cli\n
\u26a0\ufe0f NOTE: If you are using pnpm, please configure the
.npmrc
file for BalmUI
Hoisting everything to the the root of node_modules:
shamefully-hoist=true\n
Or, hoisting only packages that match a pattern:
public-hoist-pattern[]="*balm*"\npublic-hoist-pattern[]="*deepmerge*"\npublic-hoist-pattern[]="*flatpickr*"\npublic-hoist-pattern[]="*material-components-web*"\npublic-hoist-pattern[]="@material*"\npublic-hoist-pattern[]="*quill*"\n
Open a terminal window.
Generate a new project and default app by running the following command:
balm init vue#legacy my-project\ncd my-project # Go to the project directory\n
Install dependencies
yarn\n# OR\nnpm install\n
Installs the necessary npm packages, This can take some time.
(China Only) \u5982\u679c\u201c\u7f51\u7edc\u201d\u4e0d\u79d1\u5b66\uff0c\u8bf7\u8bbe\u7f6e\u6dd8\u5b9d\u6e90
balm-ui
yarn add balm-ui@8\n# OR\nnpm install --save balm-ui@8\n
update balm.config.js
get Material Icons without downloading (or, download and extract to my-project/app/fonts
)
const api = (mix) => {\n if (mix.env.isDev) {\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n
edit my-project/config/balmrc.js
for using Dart Sass
module.exports = {\n styles: {\n extname: 'scss'\n }\n // Other Options...\n};\n
edit my-project/app/styles/global/_vendor.scss
/* import BalmUI styles */\n@use 'balm-ui/dist/balm-ui';\n
Recommend to use Sass in
/path/to/project-name/styles/_vendor.scss
, and you can use more advanced style usage of the BalmUI.
edit my-project/app/scripts/main.js
import Vue from 'vue';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n
edit my-project/app/styles/global/_vendor.scss
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n
edit my-project/app/scripts/main.js
import Vue from 'vue';\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\nVue.use(UiButton);\nVue.use($alert);\n
npm run dev\n
edit a vue component: my-project/app/scripts/views/components/hello.vue
<template>\n <div class="hello">\n ...\n <!-- Add a test button -->\n <ui-button icon="add" @click="$alert('Hello BalmUI')">Click Me</ui-button>\n </div>\n</template>\n
npm run prod\n
vue create my-project\ncd my-project\n
balm-ui
yarn add balm-ui@8\n# OR\nnpm install --save balm-ui@8\n
edit my-project/vue.config.js
module.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')\n // .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');\n // }\n};\n
edit my-project/src/main.js
import Vue from 'vue';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\nimport 'balm-ui-css';\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n
<script>
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Hello BalmUI</title>\n <link\n rel="stylesheet"\n href="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui.css"\n />\n </head>\n <body>\n <div id="app">\n <ui-button @click="$alert(message)" icon="add">SayHi</ui-button>\n </div>\n <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>\n <script src="https://cdn.jsdelivr.net/npm/balm-ui"></script>\n <script src="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui-plus.js"></script>\n <script>\n new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
Enjoy \ud83d\udc7b
'},"+S6J":function(t,e){t.exports='The following configuration is still the Vue scaffold built based on Balm CLI.
Edit /path/to/my-project/config/balmrc.js
module.exports = {\n styles: {\n extname: 'scss'\n },\n scripts: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n // Other Options...\n};\n
Edit /path/to/my-project/app/styles/global/_vendor.scss
SASS
/CSS
Management by BalmJS: the entry files of the vendors
@use '@material/theme' as theme-variables with (\n $primary: #6200ee,\n $secondary: #018786\n);\n\n@use 'balm-ui/dist/balm-ui';\n
Then, you can overwrite or redefine UI styles by sass variables. (See components SASS docs)
The template standard format:
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\n
If the third-party provides sass/css file, recommended to manage in
/path/to/my-project/app/styles/global/_vendor.scss
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <link rel="stylesheet" href="/node_modules/path/to/some-plugin.css" />\n <!-- endbuild -->\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\n
css/vendors.css
: The file path after building all third-party style files in BalmJS workflow.main.css
: The css entry file of the project.Recommended to use for desktop
2.1.1 Import in JS (Recommended)
Edit /path/to/my-project/app/scripts/main.js
import Vue from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\n\n// Import BalmUI styles (Not recommend usage, and see above "SASS/CSS Management" for recommended usage)\nimport 'balm-ui-css';\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n\nnew Vue({\n el: '#app',\n components: { App },\n template: '<app/>'\n});\n
2.1.2 Import in Browser
Edit /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui-plus.js"></script>\n <!-- endbuild -->\n <script>\n var app = new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
Recommended to use for mobile, because the building volume is relatively small.
2.2.1 Import in JS
Edit /path/to/my-project/app/scripts/main.js
import Vue from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\n// Import BalmUI styles (Not recommend usage, and see below "SASS/CSS management" for recommended usage)\nimport 'balm-ui/components/core.css';\nimport 'balm-ui/components/button/button.css';\nimport 'balm-ui/components/icon/icon.css';\nimport 'balm-ui/components/dialog/dialog.css';\nimport 'balm-ui/plugins/alert/alert.css';\n\n// Install components or plugins\nVue.use(UiButton);\nVue.use($alert);\n\nnew Vue({\n el: '#app',\n components: { App },\n template: '<app/>'\n});\n
With regard to CSSinJS, styles can be extracted through BalmJS configuration, but the idea of BalmJS is more recommended to separate and manage styles and scripts to achieve more flexible module configuration and management.
SASS management (/path/to/my-project/app/styles/global/_vendor.scss
)
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n
CSS management (/path/to/my-project/app/index.html
)
<head>\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n</head>\n
2.2.2 Import in Browser
Edit /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/components/button/button.js"></script>\n <script src="/node_modules/balm-ui/plugins/alert/alert.js"></script>\n <!-- endbuild -->\n <script>\n var app = new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
For the optimal code building solution, the usage is the same as the built versions.
2.3.1 For Balm CLI
Edit /path/to/my-project/config/balmrc.js
, and add the following lines of code:
const path = require('path');\n\nfunction resolve(dir) {\n return path.join(__dirname, '..', dir);\n}\n\nmodule.exports = {\n ...\n scripts: {\n // To explicitly transpile a dependency with Babel\n includeJsResource: [\n resolve('node_modules/balm-ui/src/scripts')\n ],\n // Reassign the entry file\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n }\n },\n ...\n};\n
2.3.2 For Vue CLI
Edit /path/to/my-project/vue.config.js
, and add the following lines of code:
module.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-source', resolve('node_modules/balm-ui/src/scripts'))\n // .set('balm-ui-plus-source', resolve('node_modules/balm-ui/src/scripts/plus.js'));\n // }\n};\n
Now, the
balm-ui
referenced in the code points directly to the source code, which can be used to develop or debug BalmUI.
Edit /path/to/my-project/balm.config.js
const config = require('./config/balmrc');\n\nconst api = (mix) => {\n if (mix.env.isProd) {\n // ...\n } else {\n // Use BalmJS `copy` api\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n\nmodule.exports = (balm) => {\n return {\n config,\n api\n };\n};\n
@use 'balm-ui/components/core';\n@use 'balm-ui/components/form-field/form-field'; // NOTE: It must be loaded before form styles\n@use 'balm-ui/components/form/form';\n
import Vue from 'vue';\nimport UiForm from 'balm-ui/components/form';\nimport UiFormField from 'balm-ui/components/form-field';\n\nVue.use(UiForm);\nVue.use(UiFormField);\n
'},"+eER":function(t,e){t.exports='<div class="icons-preview-code">\n <div v-for="i in [18, 24, 36, 48]" :key="i" class="icons-preview">\n <ui-icon :size="i">face</ui-icon>\n <div class="icon-caption">{{ i }}px</div>\n </div>\n</div>\n
'},"+eH4":function(t,e){t.exports='<ui-badge></ui-badge>\n
Name | Type | Default | Description |
---|---|---|---|
count | number | 0 | \u5fbd\u7ae0\u4e2d\u663e\u793a\u7684\u6570\u5b57 |
overlap | boolean | false | \u4f7f\u5fbd\u7ae0\u4e0e\u5176\u5bb9\u5668\u91cd\u53e0 |
maxCount | number | 99 | \u53ef\u663e\u793a\u7684\u6700\u5927\u6570 |
dot | boolean | false | \u4f7f\u7528\u5c0f\u5706\u70b9\u4ee3\u66ff\u6570\u5b57\u663e\u793a |
state | string | '' | \u5fbd\u7ae0\u7684\u72b6\u6001\u7c7b\u578b |
interface Badge {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5fbd\u7ae0\u6587\u5b57\u5185\u5bb9\u53ca HTML | |
badge | \u81ea\u5b9a\u4e49\u5fbd\u7ae0\u5185\u5bb9 |
<ui-form-field>\n <ui-radio v-model="gender" input-id="male" value="M"></ui-radio>\n <label for="male">Male</label>\n</ui-form-field>\n<ui-form-field>\n <ui-radio v-model="gender" input-id="female" value="F"></ui-radio>\n <label for="female">Female</label>\n</ui-form-field>\n
export default {\n data() {\n return {\n gender: ''\n };\n }\n};\n
'},"+mhb":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/alert/alert';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiAlert from 'balm-ui/components/alert';\n\nVue.use(UiAlert);\n
'},"+sQ8":function(t,e){t.exports='Icon buttons (Toggle buttons) allow users to take actions, and make choices, with a single tap.
'},"/5LR":function(t,e){t.exports='<ui-divider type="|" class="vertical-divider-demo">\n <template #left>\n <div class="block red"></div>\n </template>\n or\n <template #right>\n <div class="block blue"></div>\n </template>\n</ui-divider>\n
.vertical-divider-demo {\n width: 300px;\n height: 120px;\n padding: 10px;\n border: 1px solid currentColor;\n\n .block {\n width: 80px;\n height: 80px;\n }\n .red {\n background-color: red;\n }\n .blue {\n background-color: blue;\n }\n}\n
'},"/5Yq":function(t,e){t.exports='<ui-tab>
@use '@material/tab' as tab-variables with (\n $icon-size: 24px,\n $height: 48px,\n $stacked-height: 72px,\n $min-width: 90px, // New in 8.14.0\n $horizontal-padding: 24px,\n $text-label-opacity: 0.6,\n $icon-opacity: 0.54,\n $text-label-color-default: rgba(\n theme-color.prop-value(on-surface),\n $text-label-opacity\n ),\n $icon-color-default: rgba(\n theme-color.prop-value(on-surface),\n $icon-opacity\n ),\n $text-label-color-active: primary,\n $icon-color-active: primary\n);\n
<ui-tab-scroller>
@use '@material/tab-scroller' with (\n $transition-duration: 250ms\n);\n
<ui-tab-bar>
@use '@material/tab-bar' with (\n $height: tab-variables.$height,\n $minimum-height: 30px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n $stacked-height: tab-variables.$stacked-height,\n $stacked-minimum-height: 56px,\n $stacked-maximum-height: $stacked-height,\n $stacked-density-scale: density-variables.$default-scale,\n $stacked-density-config: (\n height: (\n default: $stacked-height,\n maximum: $stacked-maximum-height,\n minimum: $stacked-minimum-height,\n ),\n )\n);\n
'},"/74Q":function(t,e){t.exports='\u9a8c\u8bc1\u65b9\u6cd5
interface VueInstance {\n $validate(\n formData: { [fieldName: string]: any },\n customFieldset?: string[]\n ): BalmUIValidationResult;\n}\n
Param | Type | Default | Description |
---|---|---|---|
formData | object | {} | \u4e00\u7ec4\u8868\u5355\u6570\u636e\u5bf9\u8c61 |
customFieldset | array | [] | \u53ef\u9009\u3002\u9700\u8981\u9a8c\u8bc1\u7684\u5b57\u6bb5\u540d\u79f0\u3002 |
\u9a8c\u8bc1\u7ed3\u679c
interface BalmUIValidationResult {\n valid: boolean;\n validFields: string[];\n invalidFields: string[];\n message: string;\n messages: string[];\n validMsg: { [fieldName: string]: string };\n}\n
Result | Type | Description |
---|---|---|
valid | boolean | \u9a8c\u8bc1\u7ed3\u679c |
validFields | array | \u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5 |
invalidFields | array | \u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5 |
message | string | \u7b2c\u4e00\u4e2a\u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5\u63d0\u793a\u8bed |
messages | array | \u6240\u6709\u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5\u63d0\u793a\u8bed |
validMsg | object | \u63d0\u793a\u8bed\u5bf9\u8c61\u5316\uff08\u683c\u5f0f\u7c7b\u4f3c formData \uff09 |
\u63d0\u793a\uff1a
validMsg
\u53ef\u4ee5\u548c<ui-textfield-helper>
/<ui-select-helper>
\u4e00\u8d77\u4f7f\u7528\u6765\u89e6\u53d1<ui-textfield>
/<ui-select>
\u7684\u65e0\u6548\u8f93\u5165\u6837\u5f0f
\u9a8c\u8bc1\u89c4\u5219
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n
// \u81ea\u5b9a\u4e49\u5c40\u90e8\u9a8c\u8bc1\u89c4\u5219\nconst validations = [\n {\n key: 'fieldName1',\n label: 'Field Label',\n validator: 'required, customRule1',\n customRule1: {\n validate(fieldValue, formData) {\n // \u9a8c\u8bc1\u65b9\u6cd5\n return true;\n },\n message: '%s is required' // '%s' \u7b26\u53f7\u5c06\u81ea\u52a8\u66ff\u6362 label \u7684\u6587\u672c\n }\n // \u66f4\u591a\u81ea\u5b9a\u4e49\u89c4\u5219\n // customRule2: { ... }\n }\n // \u66f4\u591a\u8868\u5355\u5b57\u6bb5\n // {\n // key: 'fieldName2',\n // validator: 'required'\n // }\n];\n\nexport default {\n validations,\n data() {\n return {\n formData: {\n fieldName1: '',\n fieldName2: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let { valid, validFields, invalidFields, message, messages, validMsg } =\n this.$validate(this.formData);\n }\n }\n};\n
// New in 8.23.0\ninterface BalmUIValidations {\n clear(): void;\n get(fieldName?: string): BalmUIValidationRule[] | BalmUIValidationRule; // \u663e\u793a\u5f53\u524d\u5df2\u8bbe\u7f6e\u7684\u9a8c\u8bc1\u89c4\u5219\n set(fieldName: string, validationRule: BalmUIValidationRule): void;\n set(validations: BalmUIValidationRule[]): void;\n}\n\ninterface VueInstance {\n $validations: BalmUIValidations;\n}\n
is deprecated in 8.17.0$resetValidations()
is deprecated in 8.23.0$setValidations()
Param | Type | Default | Description |
---|---|---|---|
fieldName | string | '' | formData \u7684\u4e00\u4e2a\u5b57\u6bb5\u540d\u79f0\uff08BalmUI \u9a8c\u8bc1\u5668\u89c4\u5219\u7684 key\uff09 |
validation | object | {} | \u4e00\u4e2a\u9a8c\u8bc1\u89c4\u5219\uff08BalmUI \u9a8c\u8bc1\u5668\u89c4\u5219\u7684 value\uff09 |
validations | object | {} | \u8be6\u89c1\u4e0a\u65b9 BalmUI \u9a8c\u8bc1\u5668\u89c4\u5219 |
computed
export default {\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n computed: {\n validations() {\n return this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n }\n },\n methods: {\n onSubmit() {\n let result = this.$validate(this.formData);\n // ...\n }\n }\n};\n
customFieldset
export default {\n validations: [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ],\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let customFieldset = this.step === 1 ? ['username'] : ['password'];\n let result = this.$validate(this.formData, customFieldset);\n // ...\n }\n }\n};\n
$validations.set
\u8bbe\u7f6e\u81ea\u5b9a\u4e49\u9a8c\u8bc1\u89c4\u5219export default {\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n }\n },\n beforeDestroy() {\n this.$validations.clear(); // \u975e\u5e38\u91cd\u8981\n },\n methods: {\n onSubmit() {\n let customValidations =\n this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n this.$validations.set(customValidations);\n\n let result = this.$validate(this.formData);\n // ...\n }\n};\n
\u5f00\u5173\u5c06\u5355\u4e2a\u8bbe\u7f6e\u7684\u72b6\u6001\u5207\u6362\u4e3a\u6253\u5f00\u6216\u5173\u95ed\u3002\u5b83\u4eec\u662f\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u8c03\u6574\u8bbe\u7f6e\u7684\u9996\u9009\u65b9\u6cd5\u3002
'},"/Zlj":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/grid/grid';\n
import Vue from 'vue';\nimport UiGridComponents from 'balm-ui/components/grid';\nimport $grid from 'balm-ui/plugins/grid'; // Optional\n\nVue.use(UiGridComponents, {\n // Optional. Overwrite `<ui-grid>` props with default value.\n UiGrid: {\n // some props\n }\n});\nVue.use($grid); // Optional\n
'},"/c09":function(t,e){t.exports='Material design\u2019s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.
'},"/epX":function(t,e){t.exports='<h1 :class="$tt('headline1')">Headline 1</h1>\n<h2 :class="$tt('headline2')">Headline 2</h2>\n<h3 :class="$tt('headline3')">Headline 3</h3>\n<h4 :class="$tt('headline4')">Headline 4</h4>\n<h5 :class="$tt('headline5')">Headline 5</h5>\n<h6 :class="$tt('headline6')">Headline 6</h6>\n\n<div :class="$tt('subtitle1')">Subtitle 1</div>\n<div :class="$tt('subtitle2')">Subtitle 2</div>\n\n<div :class="$tt('body1')">\n Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur.\n</div>\n<div :class="$tt('body2')">\n Body 2 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur.\n</div>\n\n<div :class="$tt('button')">Button text</div>\n<div :class="$tt('caption')">Caption text</div>\n<div :class="$tt('overline')">Overline text</div>\n\n<div :class="$tt('custom-style-1')">Custom style 1</div>\n<div :class="$tt('custom-style-2')">Custom style 2</div>\n
.mdc-typography--custom-style-1 {\n color: red;\n}\n\n.mdc-typography--custom-style-2 {\n color: blue;\n}\n
// main.js\nVue.use(BalmUI, {\n $typography: ['custom-style-1', 'custom-style-2']\n});\n
'},"/hMY":function(t,e){t.exports='The top app bar displays information and actions relating to the current screen.
'},"/pZ6":function(t,e){t.exports='<ui-dialog-actions><!-- the dialog actions --></ui-dialog-actions>\n
Name | Type | Default | Description |
---|---|---|---|
acceptText | string | 'OK' | The accept button text. |
cancelText | string | 'Cancel' | The cancel button text. |
Name | Props | Description |
---|---|---|
default | buttonClass | The default slot holds the dialog actions and can contain HTML. |
<template #default="{ buttonClass }">\n <ui-button :class="buttonClass">BUTTON</ui-button>\n</template>\n
Other customizations
data-mdc-dialog-button-default
: Optional. Add to a button to indicate that it is the default action button.data-mdc-dialog-initial-focus
: Optional. Add to an element to indicate that it is the element to initially focus on after the dialog has opened.<section :dir="controls.rtl ? 'rtl' : null">\n <ui-select\n id="full-func-js-select"\n v-model="selected"\n :options="options"\n :class="{ 'demo-select-custom-colors': controls.customColor }"\n :disabled="controls.disabled"\n @selected="onSelected($event)"\n >\n Food Group\n </ui-select>\n</section>\n
const options = [\n {\n label: 'Bread, Cereal, Rice, and Pasta',\n value: 'grains'\n },\n {\n label: 'Vegetables',\n value: 'vegetables',\n disabled: true\n },\n {\n label: 'Fruit',\n value: 'fruit'\n },\n {\n label: 'Milk, Yogurt, and Cheese',\n value: 'dairy'\n },\n {\n label: 'Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts',\n value: 'meat'\n },\n {\n label: 'Fats, Oils, and Sweets',\n value: 'fats'\n }\n];\n\nexport default {\n data() {\n return {\n options,\n selected: '',\n controls: {\n rtl: false,\n customColor: false,\n disabled: false\n }\n };\n },\n methods: {\n onSelected(selected) {\n this.selected = selected.value;\n }\n }\n};\n
'},"0/Jz":function(t,e){t.exports=""},"03rS":function(t,e){t.exports='<ui-collapse>\n <template #toggle>\n <ui-button>Button</ui-button>\n </template>\n Show Content\n</ui-collapse>\n
'},"0HsE":function(t,e){t.exports='<ui-switch\n v-model="toggle1"\n input-id="basic-switch"\n :true-value="1"\n :false-value="0"\n @selected="$balmUI.onChange('toggle1Label', $event)"\n>\n {{ toggle1 }}\n</ui-switch>\n<label for="basic-switch">{{ toggle1Label }}</label>\n\n<ui-switch\n v-model="toggle2"\n input-id="basic-switch-custom"\n class="demo-switch--custom"\n true-value="on"\n false-value="off"\n @selected="$balmUI.onChange('toggle2Label', $event)"\n>\n {{ toggle2Label }} (custom color)\n</ui-switch>\n<label for="basic-switch-custom">{{ toggle2 }} (custom color)</label>\n
export default {\n data() {\n return {\n toggle1: false,\n toggle1Label: 0,\n toggle2: true,\n toggle2Label: 'on'\n };\n }\n};\n
/* Sass code */\n.demo-switch--custom {\n $color: $material-color-red-500;\n\n @include mdc-switch-track-color($color);\n @include mdc-switch-knob-color($color);\n @include mdc-switch-focus-indicator-color($color);\n}\n
'},"0Sf5":function(t,e){t.exports='\u26a0\ufe0f The
deprecated
path is required inbalm-ui
>= 8.33.0
@use '@material/chips/deprecated/variables' with (\n $fill-color-default: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 12%\n ),\n $ink-color-default: rgba(theme-color.prop-value(on-surface), 0.87),\n $horizontal-padding: 12px,\n $height: 32px,\n $shape-radius: 50%,\n\n $minimum-height: 24px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n\n $icon-color: theme-color.prop-value(on-surface),\n $icon-opacity: 0.54,\n $trailing-icon-hover-opacity: 0.62,\n $trailing-icon-focus-opacity: 0.87,\n $leading-icon-size: 20px,\n $trailing-icon-size: 18px,\n // Speed up delay to bridge gap between leading icon and checkmark transition.\n $leading-icon-delay: -50ms,\n $checkmark-with-leading-icon-delay: 80ms,\n\n $checkmark-animation-delay: 50ms,\n $checkmark-animation-duration: 150ms,\n $width-animation-duration: 150ms,\n $opacity-animation-duration: 75ms,\n\n $leading-icon-margin-right: 4px,\n $leading-icon-margin-left: -4px,\n\n $trailing-icon-margin-right: -4px,\n $trailing-icon-margin-left: 4px,\n\n $exit-transition: opacity 75ms\n animation-variables.$standard-curve-timing-function,\n width 150ms animation-variables.$deceleration-curve-timing-function,\n padding 100ms linear, margin 100ms linear\n);\n
'},"0TwB":function(t,e){t.exports='// my-project/app/styles/global/_vendor.scss\n@use 'font-awesome/scss/font-awesome';\n
<ui-fab>\n <i class="fa fa-flag fa-lg"></i>\n</ui-fab>\n<ui-fab>\n <i class="fa fa-smile-o fa-lg"></i>\n</ui-fab>\n<ui-fab>\n <i class="fa fa-camera-retro fa-lg"></i>\n</ui-fab>\n<ui-fab>\n <i class="fa fa-spinner fa-pulse fa-lg fa-fw"></i>\n</ui-fab>\n
'},"0m6t":function(t,e){t.exports='<ui-card-media>\n <!-- <ui-card-media-content> -->\n</ui-card-media>\n
Name | Type | Default | Description |
---|---|---|---|
square | boolean | false | Optional. Automatically scales the media area's height to equal its width. |
rectangle | boolean | false | Optional. Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio. |
Name | Props | Description |
---|---|---|
default | The default slot holds the card media content component and can contain HTML. |
Child components:
<ui-card-media-content>
@use 'balm-ui/components/core';\n@use 'balm-ui/components/switch/switch';\n
import Vue from 'vue';\nimport UiSwitch from 'balm-ui/components/switch';\n\n// Optional. Overwrite `<ui-switch>` props with default value.\nVue.use(UiSwitch, {\n // some props\n});\n
'},"0ujp":function(t,e){t.exports='@use '@material/button/button-shared-theme' with (\n $height: 36px,\n $horizontal-padding: 8px,\n $contained-horizontal-padding: 16px,\n // For a contained button with an icon, the padding on the side of the\n // button with the icon.\n $contained-horizontal-padding-icon: 12px,\n\n $minimum-height: 24px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n\n $shape-radius: small,\n\n $disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38),\n $disabled-container-color: rgba(\n theme-color.prop-value(on-surface),\n 0.12\n ),\n);\n
@use '@material/button/button-outlined-theme' with (\n $outlined-border-width: 1px,\n $outline-color: rgba(theme-color.prop-value(on-surface), 0.12)\n);\n
'},"10PY":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-skeleton>` props with default value.\n UiSkeleton: {\n // some props\n }\n});\n
'},"14XR":function(t,e){t.exports=''},"18fs":function(t,e){t.exports='New in 4.3.0
@use 'balm-ui/components/core';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiDialogComponents from 'balm-ui/components/dialog';\n\nVue.use(UiDialogComponents, {\n // Optional. Overwrite `<ui-dialog>` props with default value.\n UiDialog: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-title>` props with default value.\n UiDialogTitle: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-actions>` props with default value.\n UiDialogActions: {\n // some props\n }\n});\n
'},"1Ewl":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/badge/badge';\n@use 'balm-ui/components/icon/icon'; // Recommended\n
import Vue from 'vue';\nimport UiBadge from 'balm-ui/components/badge';\nimport vBadge from 'balm-ui/directives/badge'; // Optional\n\nVue.use(UiBadge);\nVue.directive(vBadge.name, vBadge); // Optional\n
'},"1HwK":function(t,e){t.exports='Material icons \u662f\u4e00\u7ec4\u5e38\u89c1\u52a8\u4f5c\u548c\u7269\u54c1\u7684\u7b26\u53f7\u56fe\u6807\u96c6\u5408\u3002
'},"1Iom":function(t,e){t.exports='\u26a0\ufe0f IE11 \u4ec5\u652f\u6301
filled
\u6a21\u5f0f
<ui-dialog><!-- the dialog child components --></ui-dialog>\n
NOTE:
<ui-dialog>
must be including a<ui-button>
or<ui-icon-button>
for actions.
Name | Type | Default | Description | Version |
---|---|---|---|---|
open (v-model ) | boolean | false | Mandatory. | |
escapeKey | boolean | true | Sets the action reflected when the Escape key is pressed. Setting to false disables closing the dialog via Escape key. | 8.22.0 |
closable | boolean | true | Closes the dialog, when a user actions on the accept or cancel button. | |
maskClosable | boolean | false | Closes the dialog, when the dialog scrim is clicked. | |
noScrim | boolean | false | Hides the dialog scrim. | |
resetScroll | boolean | false | Reset scroll bar, when the dialog is closed. | |
scrollable | boolean | false | Optional. Applied automatically when the dialog has overflowing content to warrant scrolling. | |
stacked | boolean | false | Optional. Applied automatically when the dialog's action buttons can't fit on a single line and must be stacked. |
NOTE: The
noBackdrop
prop rename tonoScrim
in 8.35.0
Name | Props | Description |
---|---|---|
default | The default slot holds the dialog child components. |
Child components:
<ui-dialog-title>
<ui-dialog-content>
<ui-dialog-actions>
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the dialog is changed. |
close | function() | Emits when the dialog is closed. |
confirm | function(result: boolean) | Emits when the action buttons is clicked. |
accept | function() | Emits when the accept button is clicked. |
cancel | function() | Emits when the cancel button is clicked. |
NOTE: If you are not using
v-model
, you should listen for the dialog using@change
and update theopen
prop.
Automatic
<ui-dialog v-model="open"></ui-dialog>\n
Manual
<ui-dialog\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-dialog>\n
@use '@material/elevation/variables' with (\n $baseline-color: black,\n $umbra-opacity: 0.2,\n $penumbra-opacity: 0.14,\n $ambient-opacity: 0.12,\n\n // The default duration value for elevation transitions.\n $transition-duration: 280ms\n);\n
'},"1Pfi":function(t,e){t.exports='<ui-grid class="demo-grid">\n <ui-grid-cell v-for="i in 12" :key="i" class="demo-cell" columns="1">\n 1\n </ui-grid-cell>\n</ui-grid>\n
'},"1ROX":function(t,e){t.exports='<ui-file></ui-file>\n
Name | Type | Default | Description |
---|---|---|---|
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
accept | string | '' | File types that can be accepted. |
multiple | boolean | false | Whether to support selected multiple file. |
disabled | boolean | false | To disable a upload button. |
outlined | boolean | false | Optional. Styles an outlined upload button that is flush with the surface. |
text | string | 'Upload' | Text for the default upload button. |
preview | boolean | false | Optional. Enabled preview file data. |
Name | Props | Description |
---|---|---|
default | The default slot holds the file button content and can contain HTML. |
Name | Type | Description |
---|---|---|
change | function(files: array) | Emits when the file is changed. |
file
props in files
Name | Type | Description |
---|---|---|
tmpId | string | Temporary unique ID. |
lastModified | number | Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight). |
name | string | Returns the name of the file referenced by the File object. |
size | number | Returns the size of the file in bytes. |
type | string | Returns the MIME type of the file. |
sourceFile | file | Returns a new Blob object containing the data in the specified range of bytes of the source Blob. |
previewSrc | string | The src data for preview. Applicable only for preview status. |
previewError | number | Preview error code: {0: 'OK', 1: 'Not image type', 2: 'Unsupported'} . |
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-chips>` props with default value.\n UiChips: {\n // some props\n }\n});\n
'},"1fpl":function(t,e){t.exports='<fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Theme colors as text</legend>\n\n <div class="demo-theme-color-group">\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass('primary')]"\n >\n Primary\n </div>\n </div>\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass('secondary')]"\n >\n Secondary\n </div>\n </div>\n </div>\n</fieldset>\n\n<fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Theme colors as background</legend>\n\n <div class="demo-theme-color-group">\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass(['primary-bg', 'on-primary'])\n ]"\n >\n Primary\n </div>\n </div>\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass(['secondary-bg', 'on-secondary'])\n ]"\n >\n Secondary\n </div>\n </div>\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass('background'),\n $theme.getTextClass('primary')]"\n >\n Background\n </div>\n </div>\n </div>\n</fieldset>\n
'},"1hI5":function(t,e){t.exports='<ui-form-field>\n <ui-switch></ui-switch>\n <label>Switch</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean | false | Mandatory. |
trueValue | boolean, number, string | true | |
falseValue | boolean, number, string | false | |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
disabled | boolean | false | Styles the switch as a disabled switch. |
attrs | object | {} | Other attributes for <input> . |
Name | Type | Description | Version |
---|---|---|---|
change | function(value: boolean) | Emits when the switch is changed. | |
selected | function(value: boolean|string|number) | Emits when the switch is selected. | 8.46.0 |
NOTE: If you are not using
v-model
, you should listen for the switch using@change
and update themodel
prop.
Automatic
<ui-switch v-model="value"></ui-switch>\n
Manual
<ui-switch\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-switch>\n
\u65e5\u671f\u9009\u62e9\u5668\u4f7f\u7528\u6237\u53ef\u4ee5\u9009\u62e9\u65e5\u671f\u6216\u65e5\u671f\u8303\u56f4\u3002
'},"2+jW":function(t,e){t.exports='New in 4.2.0
<ui-top-app-bar><!-- the application title --></ui-top-app-bar>\n
<ui-top-app-bar>
\u7c7b\u578b
0
: 'standard'
1
: 'fixed'
2
: 'dense'
3
: 'prominent'
4
: 'prominentDense'
5
: 'short'
6
: 'shortCollapsed'
-1
: 'nonRegular'
Name | Type | Default | Description |
---|---|---|---|
contentSelector | string | (required) | \u9009\u62e9\u5668\u7528\u4e8e\u8bbe\u7f6e\u9876\u90e8\u5bfc\u822a\u680f\u4e0b\u65b9\u5185\u5bb9\u7684\u6837\u5f0f\uff0c\u4ee5\u9632\u6b62\u9876\u90e8\u5bfc\u822a\u680f\u8986\u76d6\u5185\u5bb9\u3002 |
type | string, number | 0 | \u9876\u90e8\u5bfc\u822a\u680f\u7c7b\u578b |
fixed | boolean | false | \u56fa\u5b9a\u7684\u9876\u90e8\u5bfc\u822a\u680f\u4f4d\u4e8e\u9875\u9762\u9876\u90e8\uff0c\u5e76\u4e14\u5728\u6eda\u52a8\u65f6\u4f4d\u4e8e\u5185\u5bb9\u4e0a\u65b9\u3002 |
dense | boolean | false | \u5bc6\u96c6\u7684\u9876\u90e8\u5bfc\u822a\u680f\u8f83\u77ed\u3002 |
prominent | boolean | false | \u7a81\u51fa\u7684\u9876\u90e8\u5bfc\u822a\u680f\u8f83\u9ad8\u3002 |
prominentDense | boolean | false | \u7a81\u51fa\u4e14\u5bc6\u96c6\u7684\u9876\u90e8\u5bfc\u822a\u680f |
short | boolean | false | \u9876\u90e8\u77ed\u5bfc\u822a\uff0c\u6eda\u52a8\u65f6\u53ef\u4ee5\u6298\u53e0\u5230\u5bfc\u822a\u56fe\u6807\u7684\u4e00\u4fa7\u3002 |
shortCollapsed | boolean | false | \u8bbe\u7f6e\u9876\u90e8\u77ed\u5bfc\u822a\u59cb\u7ec8\u663e\u793a\u6298\u53e0\u72b6\u6001\u3002 |
title | string | '' | \u8bbe\u7f6e\u5bfc\u822a\u6807\u9898 |
navIcon | string, boolean | 'menu' | \u8bbe\u7f6e\u5bfc\u822a\u56fe\u6807 |
navId | string | null | \u4fa7\u8fb9\u5bfc\u822a\u680f\u7684\u5143\u7d20 ID\uff08\u8bf7\u53c2\u8003 drawer \u7684 navId \u5c5e\u6027\uff09 |
\u9876\u90e8\u77ed\u5bfc\u822a\u5e94\u4e0e\u6700\u591a 1 \u4e2a\u52a8\u4f5c\u9879\u4e00\u8d77\u4f7f\u7528\u3002
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bfc\u822a\u6807\u9898\u53ca HTML | |
nav-icon | navIconClass | \u81ea\u5b9a\u4e49\u5bfc\u822a\u56fe\u6807 |
toolbar | toolbarItemClass | toolbar \u63d2\u69fd\u5305\u542b\u52a8\u4f5c\u9879\u76ee\u53ca HTML |
<template #toolbar="{ toolbarItemClass }">\n <ui-icon-button :class="toolbarItemClass" icon="ICON"></ui-icon-button>\n</template>\n
Name | Type | Description |
---|---|---|
nav | function() | \u70b9\u51fb\u5bfc\u822a\u9ed8\u8ba4\u56fe\u6807\u65f6\u89e6\u53d1 |
close | function() | \u70b9\u51fb\u5bfc\u822a\u5173\u95ed\u56fe\u6807\u65f6\u89e6\u53d1\uff08\u4ec5\u9650 navIcon \u8bbe\u7f6e\u4e3a close \u65f6\uff09 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u6ca1\u6709\u8054\u5408\u4f7f\u7528\u9876\u90e8\u5bfc\u822a\u680f\u548c\u4fa7\u8fb9\u5bfc\u822a\u680f\u7684
navId
\u5c5e\u6027\u7ed1\u5b9a\u4e24\u8005\u5173\u7cfb\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@nav
\u76d1\u542c\u9876\u90e8\u5bfc\u822a\u680f\u5e76\u66f4\u65b0\u4fa7\u8fb9\u5bfc\u822a\u680f\u7684v-model
\u5c5e\u6027
\u81ea\u52a8
<ui-top-app-bar nav-id="demo-menu"></ui-top-app-bar>\n<ui-drawer nav-id="demo-menu" type="modal"></ui-drawer>\n
\u624b\u52a8
<ui-top-app-bar @nav="$balmUI.onChange('open', !open)"></ui-top-app-bar>\n<ui-drawer v-model="open" type="modal"></ui-drawer>\n
<ui-button @click="$balmUI.onShow('show')">Show action sheet</ui-button>\n<ui-bottom-sheet v-model="show">\n <ui-list>\n <ui-item v-for="i in 3" :key="i">Action {{ i }}</ui-item>\n </ui-list>\n</ui-bottom-sheet>\n
export default {\n data() {\n return {\n show: false\n };\n }\n};\n
'},"2Esg":function(t,e){t.exports='<ui-table :data="data" :thead="thead" :tbody="tbody"></ui-table>\n
export default {\n data() {\n return {\n data: [\n {\n id: 1,\n dessert: 'Frozen yogurt',\n calories: 159,\n fat: 6,\n carbs: 24,\n protein: 4\n },\n {\n id: 2,\n dessert: 'Ice cream sandwich',\n calories: 237,\n fat: 9,\n carbs: 37,\n protein: 4.3\n },\n {\n id: 3,\n dessert: 'Eclair',\n calories: 262,\n fat: 16,\n carbs: 24,\n protein: 6\n }\n ],\n thead: [\n 'ID',\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n ],\n tbody: ['id', 'dessert', 'calories', 'fat', 'carbs', 'protein']\n };\n }\n};\n
'},"2HHK":function(t,e){t.exports='<ui-menu><!-- the menuitem components --></ui-menu>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | \u83dc\u5355\u72b6\u6001 |
items | array | [] | \u8bbe\u7f6e\u83dc\u5355\u9879\u5bf9\u8c61\u5217\u8868 |
quickOpen | boolean | false | \u5173\u95ed\u83dc\u5355\u6253\u5f00\u7684\u52a8\u753b |
position | string | 'TOP_LEFT' | \u8bbe\u7f6e\u83dc\u5355\u951a\u89d2\u4f4d\u7f6e\uff08\u76f8\u5bf9\u4e8e\u83dc\u5355\u6309\u94ae\uff09 |
distance | object | false | \u951a\u8fb9\u8ddd\u3002\u683c\u5f0f\uff1a{ top, right, bottom, left } |
fixed | boolean | false | \u7528\u4e8e\u6307\u5b9a\u83dc\u5355\u4f7f\u7528\u56fa\u5b9a\u4f4d\u7f6e |
fullwidth | boolean | false | \u8bbe\u7f6e\u83dc\u5355\u7684\u5bbd\u5ea6\u4ee5\u5339\u914d\u5176\u7236\u951a\u7684\u5bbd\u5ea6\uff08fixed \u6a21\u5f0f\u65e0\u6548\uff09 |
cssOnly | boolean | false | \u663e\u793a\u9759\u6001\u83dc\u5355 |
\u83dc\u5355\u9879\u5bf9\u8c61\u7684 keys:
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface Menu {\n items: Item[];\n position:\n | 'TOP_LEFT'\n | 'TOP_RIGHT'\n | 'BOTTOM_LEFT'\n | 'BOTTOM_RIGHT'\n | 'TOP_START'\n | 'TOP_END'\n | 'BOTTOM_START'\n | 'BOTTOM_END';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u83dc\u5355\u9879\u7ec4\u4ef6\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u83dc\u5355\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(menuitem: SelectedItem) | \u83dc\u5355\u9879\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 |
closed | function() | \u83dc\u5355\u5173\u95ed\u65f6\u89e6\u53d1 |
opened | function() | \u83dc\u5355\u6253\u5f00\u65f6\u89e6\u53d1 |
selected
\u4e8b\u4ef6\u8fd4\u56de\u6570\u636e\uff1a
interface SelectedItem {\n index: number; // \u83dc\u5355\u9879\u7d22\u5f15\n text: string; // \u83dc\u5355\u9879\u6587\u672c\n value: string; // \u9009\u4e2d\u503c\n}\n
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u83dc\u5355\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-menu v-model="open"></ui-menu>\n
\u624b\u52a8
<ui-menu :open="open" @change="$balmUI.onChange('open', $event)"></ui-menu>\n
Sliders allow users to make selections from a range of values.
'},"2W5T":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},"2X+7":function(t,e){t.exports='<ui-drawer-header><!-- the drawer header child components --></ui-drawer-header>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the drawer header child components and can contain HTML. |
Child components:
<ui-drawer-title>
<ui-drawer-subtitle>
@use 'balm-ui/components/form' with (\n $form-margin: 0,\n $form-padding: 0,\n $form-border: 0,\n\n $form-item-margin-bottom: 0,\n $horizontal-form-item-label-width: auto,\n $horizontal-form-item-label-margin-right: 0,\n $vertical-form-item-label-margin-bottom: 0,\n\n $form-subitem-margin-right: 0 // New in 8.18.0\n);\n
'},"2Zkp":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/autocomplete/autocomplete';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiAutocomplete from 'balm-ui/components/autocomplete';\n\n// Optional. Overwrite `<ui-autocomplete>` props with default value.\nVue.use(UiAutocomplete, {\n // some props\n});\n
'},"2k+C":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUI);\nVue.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-bottom-navigation>` props with default value.\n UiBottomNavigation: {\n // some props\n }\n});\n
'},"2qo9":function(t,e){t.exports='<ui-chips\n v-model="selectedValue"\n type="filter"\n :options="filterList"\n></ui-chips>\n\n<ui-chips v-model="selectedValue2" type="filter">\n <ui-chip\n v-for="(item, index) in filterList2"\n :key="index"\n icon="face"\n :hidden="selectedValue2.includes(index)"\n >\n {{ item }}\n </ui-chip>\n</ui-chips>\n
export default {\n data() {\n return {\n selectedValue: ['a', 'b'],\n filterList: [\n {\n label: 'Tops',\n value: 'a'\n },\n {\n label: 'Bottoms',\n value: 'b'\n },\n {\n label: 'Shoes',\n value: 'c'\n },\n {\n label: 'Accessories',\n value: 'd'\n }\n ],\n selectedValue2: [0],\n filterList2: ['Alice', 'Bob', 'Charlie', 'David']\n };\n }\n};\n
'},"2z5r":function(t,e){t.exports='<ui-tree\n v-model="selectedValue"\n :data="treeData"\n :data-format="dataFormat"\n multiple\n :load-data="loadData"\n>\n <p>selectedValue: {{ selectedValue }}</p>\n <template #title="{ data }"> {{ data.title }} </template>\n</ui-tree>\n
export default {\n data() {\n return {\n dataFormat: { label: 'title', value: 'key' },\n treeData: [],\n selectedValue: []\n };\n },\n async mounted() {\n this.treeData = await this.$http.get('/api/treeData');\n },\n methods: {\n async loadData(key) {\n return await this.$http.get('/api/treeData', {\n params: {\n key\n }\n });\n }\n }\n};\n
'},"33rG":function(t,e){t.exports='<ui-button raised @click="showConfrim">Show Confrim</ui-button>\n
export default {\n methods: {\n showConfrim() {\n this.$confirm({\n message: 'Do you like BalmJS?',\n state: 'help',\n acceptText: 'Cool',\n cancelText: 'Good'\n }).then((result) => {\n if (result) {\n this.$alert('Thanks :)');\n }\n });\n }\n }\n};\n
'},"3Wx3":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-select>` props with default value.\n UiSelect: {\n // some props\n }\n});\n
'},"3fdD":function(t,e){t.exports='<ui-tab-indicator></ui-tab-indicator>\n
Name | Type | Default | Description |
---|---|---|---|
type | string | 'underline' | \u6807\u7b7e\u9875\u6307\u793a\u5668\u7c7b\u578b ['underline', 'icon'] |
fade | boolean | false | \u6de1\u5165\u6de1\u51fa\u6548\u679c |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6307\u793a\u5668\u81ea\u5b9a\u4e49\u56fe\u6807 \u53ca HTML |
'},"3uza":function(t,e){t.exports='\u63d0\u793a\uff1a
underline
\u7c7b\u578b\u6ca1\u6709 slot
@use 'balm-ui/components/core';\n@use 'balm-ui/components/top-app-bar/top-app-bar';\n@use 'balm-ui/components/icon-button/icon-button';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiTopAppBar from 'balm-ui/components/top-app-bar';\n\n// Optional. Overwrite `<ui-top-app-bar>` props with default value.\nVue.use(UiTopAppBar, {\n // some props\n});\n
'},"3yzd":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/form-field/form-field';\n@use 'balm-ui/components/radio/radio';\n
import Vue from 'vue';\nimport UiFormField from 'balm-ui/components/form-field';\nimport UiRadio from 'balm-ui/components/radio';\n\nVue.use(UiFormField);\n// Optional. Overwrite `<ui-radio>` props with default value.\nVue.use(UiRadio, {\n // some props\n});\n
'},"4E29":function(t,e){t.exports='\ud83c\udf89
balm-ui
(v9+) for Vue 3, see material.balmjs.com
balm-ui-next.js
is deprecatedUiCollapse
from balm-ui-plus.js
to balm-ui.js
libraryUiBottomNavigation
from balm-ui-next.js
to balm-ui-plus.js
libraryUiBottomSheet
from balm-ui-next.js
to balm-ui-plus.js
libraryvDebounce
from balm-ui-plus.js
to balm-ui.js
libraryUiAlert
from balm-ui-plus.js
to balm-ui.js
library$validator
: update validations
Old
interface BalmUIValidationRule {\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = {\n [key: string]: BalmUIValidationRule;\n}\n
New
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = BalmUIValidationRule[]\n
UiAutocomplete
, UiDatepicker
, UiRangepicker
from balm-ui-plus.js
to balm-ui.js
library$alert
, $confirm
, $toast
from balm-ui-plus.js
to balm-ui.js
librarynew components:
<ui-banner>
<ui-tooltip>
<ui-nav-item>
new plugins:
$bus
$store
$theme
: new theme apis
v-shape
: new shape apis
<ui-menuitem>
: add prop value
<ui-form>
: add prop itemMarginBottom
, labelWidth
, labelMarginRight
, labelMarginBottom
Sass: overwrite variables become more concise and clear
Old
@use '@material/button/variables';\n
New
@use '@material/button';\n
$themeColor
, $setTheme
, $textColor
, $setTextTheme
: deprecated. Use $theme
instead<ui-slider>
: rename prop displayMarker
to withTickMarks
<ui-pagination>
:before
, before-jumper
and after-jumper
first
and last
<ui-nav>
: remove slot prop itemClass
, activeClass
. Use <ui-nav-item>
for new<ui-table>
: thead custom item by
field rename to columnId
<ui-drawer>
: add prop viewportHeight
<ui-menu>
, <ui-select>
: both add prop fullwidth
<ui-textfield>
: add prop prefixText
, suffixText
, endAligned
, withCounter
v-anchor
: add modifier bodyElement
<ui-a>
<ui-icon-a>
<ui-nav>
: rename slot prop activatedClass
to activeClass
<ui-textfield>
: remove prop dense
<ui-textfield-helper>
: rename prop counter
to withCounter
<ui-textfield-counter>
: removed. It has been replaced with <ui-textfield-helper withCounter>
or <ui-textfield withCounter>
<ui-menu-anchor><!-- the menu component --></ui-menu-anchor>\n
Name | Type | Default | Description |
---|---|---|---|
position | string | '' | Menu button position to the menu anchor. |
absolute | boolean | false | The menu surface can use absolute positioning when being displayed. This requires that the element containing the menu has the position: relative style. |
interface MenuAnchor {\n position:\n | 'top left'\n | 'top right'\n | 'middle left'\n | 'middle right'\n | 'bottom left'\n | 'bottom right';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the menu component. |
<div class="demo-container">\n <!-- Drawer -->\n <ui-drawer viewport-height>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>Item {{ 0 }}</ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- Content -->\n <div class="demo-content">\n <!-- App bar -->\n <ui-top-app-bar\n class="demo-app-bar"\n content-selector=".demo-app-content"\n :nav-icon="false"\n >\n Title\n </ui-top-app-bar>\n <!-- App content -->\n <div class="demo-app-content">\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </div>\n </div>\n</div>\n
.demo-content {\n width: 100%;\n}\n\n.demo-app-content {\n height: 100%;\n overflow: auto;\n}\n
'},"4PY/":function(t,e){t.exports='Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
'},"4RNZ":function(t,e){t.exports='<ui-list><!-- <ui-item> --></ui-list>\n\n<ui-nav><!-- <ui-nav-item> --></ui-nav>\n
<ui-list>
\u7c7b\u578b
1
: 'singleLine'
2
: 'twoLine'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u5217\u8868\u7c7b\u578b |
singleSelection | boolean | false | \u5355\u9009\u6a21\u5f0f\u3002\u8be5\u5217\u8868\u53ef\u4ee5\u5904\u7406\u57fa\u4e8e\u5355\u51fb\u6216\u952e\u76d8\u64cd\u4f5c\u6765\u9009\u4e2d\u5217\u8868\u9879\u3002 |
selectedIndex (v-model ) | number | -1 | \u5217\u8868\u9879\u7d22\u5f15\u503c\u3002\u4ec5\u9002\u7528\u4e8e\u5355\u9009\u6a21\u5f0f\u3002 |
nonInteractive | boolean | false | \u7981\u7528\u6c34\u6ce2\u7eb9\u6548\u679c |
dense | boolean | false | \u7d27\u51d1\u578b\u5217\u8868\u6837\u5f0f |
avatar | boolean | false | \u914d\u7f6e\u6bcf\u884c\u7684\u524d\u5bfc\u56fe\u5757\u4ee5\u663e\u793a\u56fe\u50cf\u800c\u4e0d\u662f\u56fe\u6807\u3002\u8fd9\u5c06\u4f7f\u5217\u8868\u9879\u76ee\u7684\u56fe\u5f62\u66f4\u5927\u3002 |
Name | Slots | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5217\u8868\u9879\u7ec4\u4ef6\u53ca HTML |
Name | Type | Description |
---|---|---|
action | function(index: number) | \u5217\u8868\u9879\u7d22\u5f15\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@action
\u76d1\u542c\u5217\u8868\u9879\u7d22\u5f15\u503c\u5e76\u66f4\u65b0selectedIndex
\u5c5e\u6027
\u81ea\u52a8
<ui-list v-model="selectedIndex" single-selection></ui-list>\n
\u624b\u52a8
<ui-list\n :selected-index="selectedIndex"\n single-selection\n @action="$balmUI.onChange('selectedIndex', $event)"\n></ui-list>\n
<ui-snackbar><!-- the message text --></ui-snackbar>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
actionType | number | 0 | Mandatory. Sets action button or dismiss icon for the snackbar. (0 : action button, 1 : dismiss icon) | |
open (v-model ) | boolean | false | Mandatory. | |
timeoutMs | number | 5000 | Optional. The automatic dismiss timeout in milliseconds. Value must be between 4000 and 10000 (or -1 to disable the timeout completely). | |
message | string | '' | Mandatory. Message text. | |
actionButtonText | string | '' | Optional. The action button/icon elements, if present. | |
stacked | boolean | false | Optional. Positions the action button/icon below the message instead of alongside it. | |
leading | boolean | false | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered. (tablet and desktop only) | |
position | string | 'bottom' | Snackbar position. | 8.30.0 |
interface Snackbar {\n position: 'bottom' | 'center' | 'top';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the message text for the snackbar. | |
action | actionClass | The custom action button. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the snackbar is hidden. |
closed | function() | Emits when the snackbar is closed. |
NOTE: If you are not using
v-model
, you should listen for the snackbar using@change
and update theopen
prop.
Automatic
<ui-snackbar v-model="open"></ui-snackbar>\n
Manual
<ui-snackbar\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-snackbar>\n
<ui-image-list>\n <ui-image-item>\n <ui-image-text></ui-image-text>\n </ui-image-item>\n</ui-image-list>\n
Component | Description |
---|---|
<ui-image-list> | \u56fe\u7247\u5217\u8868\u5143\u7d20 |
<ui-image-item> | \u56fe\u7247\u5217\u8868\u9879\u5143\u7d20 |
<ui-image-text> | \u56fe\u7247\u5217\u8868\u9879\u7684\u6587\u5b57\u6807\u7b7e\u5143\u7d20 |
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-textfield>` props with default value.\n UiTextfield: {\n // some props\n }\n});\n
'},"55dd":function(t,e){t.exports='<ui-form>\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field>\n <label></label>\n <!-- awesome form item 1 -->\n <ui-form-field></ui-form-field>\n </ui-form-field>\n <ui-form-field>\n <label></label>\n <div :class="subitemClass">\n <!-- awesome form item 2 -->\n <ui-form-field></ui-form-field>\n <ui-form-field></ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button></ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
<ui-form>
\u7c7b\u578b
0
: 'horizontal'
1
: 'vertical'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u8bbe\u7f6e\u8868\u5355\u7c7b\u578b\uff08\u6c34\u5e73\u6216\u5782\u76f4\u6a21\u5f0f\uff09 | |
itemMarginBottom | number | 0 | \u8bbe\u7f6e\u8868\u5355\u9879\u4e0b\u8fb9\u8ddd | 8.0.0 |
nowrap | boolean | false | \u56fa\u5b9a\u8868\u5355\u9879 <label> \uff0c\u8d85\u8fc7\u90e8\u5206\u7684\u6587\u5b57\u7528\u7701\u7565\u53f7\u8868\u793a | |
labelTopAligned | boolean | false | \u8bbe\u7f6e\u8868\u5355\u9879 <label> \u9876\u5bf9\u9f50 | |
labelRightAligned | boolean | false | \u8bbe\u7f6e\u8868\u5355\u9879 <label> \u53f3\u5bf9\u9f50 | |
labelTopRightAligned | boolean | false | \u8bbe\u7f6e\u8868\u5355\u9879 <label> \u9876\u5bf9\u9f50\u4e14\u53f3\u5bf9\u9f50 | 8.18.0 |
labelWidth | number | 0 | \uff08\u6c34\u5e73\u6a21\u5f0f\u8868\u5355\uff09\u8bbe\u7f6e <label> \u5bbd\u5ea6 | 8.0.0 |
labelMarginRight | number | 0 | \uff08\u6c34\u5e73\u6a21\u5f0f\u8868\u5355\uff09\u8bbe\u7f6e <label> \u53f3\u8fb9\u8ddd | 8.0.0 |
labelMarginBottom | number | 0 | \uff08\u5782\u76f4\u6a21\u5f0f\u8868\u5355\uff09\u8bbe\u7f6e <label> \u4e0b\u8fb9\u8ddd | 8.0.0 |
actionAlign | string | 'left' | \u8bbe\u7f6e\u8868\u5355\u52a8\u4f5c\u9879\u7684\u5bf9\u9f50\u65b9\u5f0f | 8.18.0 |
labelTopAligned
\uff0clabelRightAligned
\u548clabelTopRightAligned
\u53ea\u80fd\u5e94\u7528\u4e8e\u6c34\u5e73\u6a21\u5f0f\u8868\u5355\u3002
interface Form {\n actionAlign: 'left' | 'center' | 'right';\n}\n
Name | Props | Description |
---|---|---|
default | itemClass , subitemClass , actionClass | default \u63d2\u69fd\u5305\u542b\u8868\u5355\u9879\u53ca HTML |
'},"56QR":function(t,e){t.exports='
itemClass
\u548csubitemClass
\u662f 8.18.0 \u65b0\u589e prop
<ui-segmented-button></ui-segmented-button>\n
Name | Type | Default | Description |
---|---|---|---|
selected | boolean | false | Styles a selected segmented button. |
text | string | '' | Segmented button text. |
icon | string | '' | Segmented button icon. See Material Icons list. |
Name | Props | Description |
---|---|---|
default | The default slot holds the segmented button text and can contain HTML. | |
before | iconClass | Custom leading icon |
after | iconClass | Custom trailing icon |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the segmented button is clicked. |
<ui-banner><!-- the banner message --></ui-banner>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
open (v-model ) | boolean | false | Mandatory. | |
centered | boolean | false | Displayed centered. By default, banners are positioned as leading. | 8.27.0 |
fixed | boolean | false | When used below top app bars, banners should remain fixed at the top of the screen. | 8.27.0 |
withImage | boolean | false | Images can help communicate a banner\u2019s message. | 8.27.0 |
mobileStacked | boolean | false | On mobile view, banners with long text should have their action(s) be positioned below the text instead of alongside it. | 8.27.0 |
primaryButtonText | boolean | 'OK' | The primary action text. | |
secondaryButtonText | boolean | '' | The secondary action text. |
Name | Props | Description |
---|---|---|
default | The default slot holds the message text for the banner. | |
image | The icon slot holds the icon or image for the banner. | |
actions | The custom action buttons. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the banner is hidden. |
closed | function(reason: string) | Emits when the banner is closed. |
NOTE: If you are not using
v-model
, you should listen for the banner using@change
and update theopen
prop.
Automatic
<ui-banner v-model="open"></ui-banner>\n
Manual
<ui-banner\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-banner>\n
<ui-spinner active></ui-spinner>\n
'},"5JYn":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-list>` props with default value.\n UiList: {\n // some props\n }\n});\n
'},"5OL9":function(t,e){t.exports='<ui-spinner></ui-spinner>\n
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | \u542f\u7528\u52a0\u8f7d\u4e2d\u72b6\u6001 |
progress | number | 0 | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u7684\u503c\u3002\u503c\u5e94\u4ecb\u4e8e [0, 1] \u4e4b\u95f4\u3002 |
size | string | 'large' | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u5c3a\u5bf8 |
fourColored | boolean | false | \u542f\u7528 4 \u79cd\u989c\u8272\u5faa\u73af |
label | string | '' | \u8fdb\u5ea6\u6761\u7684\u6807\u7b7e |
closed | boolean | false | \u9690\u85cf\u8fdb\u5ea6\u6761 |
\u5c3a\u5bf8\u503c\uff1a
interface Spinner {\n size: 'large' | 'L' | 'medium' | 'M' | 'small' | 'S';\n}\n
@use 'balm-ui/components/core';\n@use 'balm-ui/components/skeleton/skeleton';\n
import Vue from 'vue';\nimport UiSkeleton from 'balm-ui/components/skeleton';\n\n// Optional. Overwrite `<ui-skeleton>` props with default value.\nVue.use(UiSkeleton, {\n // some props\n});\n
'},"5VFu":function(t,e){t.exports='<div class="demo">\n <ui-tab-scroller\n ref="scroller"\n v-model="value"\n class="demo-scroller"\n @change="$balmUI.onChange('scrollValue', $event)"\n >\n <span v-for="i in 32" :key="i" class="demo-cube"></span>\n </ui-tab-scroller>\n</div>\n\n<div class="demo-controller">\n <div class="demo-controller-row">\n <label for="id0">Scroll to</label>\n <input\n id="id0"\n v-model="scrollValue"\n class="demo-scroll-value"\n type="number"\n />\n <button type="submit" @click="$balmUI.onChange('value', +scrollValue)">\n Scroll\n </button>\n </div>\n <div class="demo-controller-row">\n <button\n type="button"\n class="demo-decrement"\n @click="$refs.scroller.increment(-50)"\n >\n -50\n </button>\n <button\n type="button"\n class="demo-increment"\n @click="$refs.scroller.increment(+50)"\n >\n +50\n </button>\n </div>\n</div>\n
export default {\n data() {\n return {\n value: 0,\n scrollValue: 0\n };\n }\n};\n
'},"5kZB":function(t,e){t.exports='Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.
'},"5kxR":function(t,e){t.exports='A banner displays a prominent message and related optional actions.
'},"5qvK":function(t,e){t.exports='New in 8.0.0
<div v-shape.cut.small class="demo">4dp</div>\n<div v-shape.cut class="demo">8dp</div>\n<div v-shape.cut.large class="demo">12dp</div>\n
'},"5tLy":function(t,e){t.exports='<ui-skeleton><!-- (the loaded data) --></ui-skeleton>\n
Name | Type | Default | Description |
---|---|---|---|
loading | boolean | true | Display the skeleton. |
active | boolean | false | Show animation effect. |
avatar | boolean, object | false | Show avatar placeholder. |
title | boolean, object | true | Show title placeholder. |
paragraph | boolean, object | true | Show paragraph placeholder. |
interface Skeleton {\n avatar: {\n size: 'large' | 'small' | number; // Set the size of avatar\n shape: 'circle' | 'square'; // Set the shape of avatar\n };\n title: {\n width: string; // Set the width of title\n };\n paragraph: {\n width: string; // Set the width of paragraph\n rows: number; // Set the row count of paragraph\n };\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the any components and can contain HTML. |
Shadows provide important visual cues about objects\u2019 depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object\u2019s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 0
to 24
.
<ui-button @click="$balmUI.onShow('show')">Show action sheet</ui-button>\n<ui-side-sheet v-model="show" closable>\n <template #title>Title</template>\n <ui-list>\n <ui-item v-for="i in 3" :key="i">Action {{ i }}</ui-item>\n </ui-list>\n <template #actions>\n <ui-button raised>Save</ui-button>\n <ui-button outlined>Cancel</ui-button>\n </template>\n</ui-side-sheet>\n
export default {\n data() {\n return {\n show: false\n };\n }\n};\n
'},"6iKR":function(t,e){t.exports='<ui-button raised @click="$balmUI.onOpen('open')">Show Snackbar</ui-button>\n\n<ui-snackbar\n v-model="open"\n :timeout-ms="timeout"\n :message="message"\n :action-button-text="actionText"\n :action-type="actionType ? 1 : 0"\n></ui-snackbar>\n
export default {\n data() {\n return {\n open: false,\n timeout: 5000,\n message: 'Hello Snackbar',\n actionText: 'close',\n actionType: false\n };\n }\n};\n
'},"6t/a":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-table>` props with default value.\n UiTable: {\n // some props\n }\n});\n
'},"6uRm":function(t,e){t.exports='<ui-bottom-navigation>\n <!-- <ui-tabs> or <ui-tab-bar> component -->\n</ui-bottom-navigation>\n
Name | Type | Default | Description |
---|---|---|---|
contentSelector | string | (required) | \u9009\u62e9\u5668\u7528\u4e8e\u5bf9\u5e95\u90e8\u5bfc\u822a\u680f\u4e0a\u65b9\u7684\u5185\u5bb9\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\uff0c\u4ee5\u9632\u6b62\u5e95\u90e8\u5bfc\u822a\u680f\u8986\u76d6\u5176\u5185\u5bb9\u3002 |
stacked | boolean | false | \u8bbe\u7f6e\u5e95\u90e8\u5bfc\u822a\u680f\u6807\u7b7e\u9875\u56fe\u6807\u548c\u6807\u7b7e\u4e3a\u5782\u76f4\u6a21\u5f0f\uff08\u9ed8\u8ba4\u4e3a\u6c34\u5e73\u6a21\u5f0f\uff09 |
min | boolean | false | \u663e\u793a 3 \u4e2a\u5bfc\u822a\u6807\u7b7e\u9875 |
max | boolean | false | \u663e\u793a 5 \u4e2a\u5bfc\u822a\u6807\u7b7e\u9875 |
<ui-card-buttons><!-- the button components --></ui-card-buttons>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u7ec4\u4ef6\u53ca HTML |
<ui-list>\n <ui-item v-for="(item, index) in items" :key="index">\n <ui-item-first-content>\n <ui-icon>{{ item.icon }}</ui-icon>\n </ui-item-first-content>\n <ui-item-text-content>{{ item.text }}</ui-item-text-content>\n </ui-item>\n</ui-list>\n
'},"71xe":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui/dist/balm-ui';\n\nVue.use(BalmUI);\n
'},"7DMP":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-icon>` props with default value.\n UiIcon: {\n // some props\n }\n});\n
'},"7LLX":function(t,e){t.exports='Cards contain content and actions about a single subject.
'},"7Qy4":function(t,e){t.exports='<div v-shadow="4"></div>\n
v-shadow="z"
Value | Type | Default | Description |
---|---|---|---|
z | number | 0 | Sets the elevation to the (N)dp, where 1 <= N <= 24 |
v-shadow.transition="[z1, z2]"
Applies the correct css rules to transition an element between elevations:
z1
: default classz2
: hover class<ui-fab><!-- Icon --></ui-fab>\n\n<ui-fab extended><!-- Text label --></ui-fab>\n
<ui-fab>
Types
0
: 'regular'
1
: 'extended'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. FAB types. |
extended | boolean | false | Optional. modifies the FAB to wider size which includes a text label. |
icon | string | '' | Optional. for the icon element. See Material Icons list. |
mini | boolean | false | Optional. modifies the FAB to a smaller size. |
exited | boolean | false | Optional. animates the FAB out of view. When this class is removed, the FAB will return to view. |
Name | Props | Description |
---|---|---|
default | iconClass | The default slot holds the floating action button icon or text label. |
before | iconClass | Custom leading icon for the extended FAB |
after | iconClass | Custom trailing icon for the extended FAB |
NOTE: the default slot of the extended FAB has not
slot-scope
.
<ui-fab>\n <template #default="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-fab>\n\n<ui-fab extended>\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n Text label\n</ui-fab>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the floating action button is clicked. |
<ui-slider></ui-slider>\n
<ui-slider>
Types
0
: 'continuous'
1
: 'discrete'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Slider types. |
discrete | boolean | false | Styles the slider as a discrete slider. |
withTickMarks | boolean | false | Discrete sliders support display markers on their tracks. |
model (v-model ) | number, array | 0 | The current value of the slider. (array value for range slider) |
min | number | 0 | The minimum value a slider can have. |
max | number | 100 | The maximum value a slider can have. |
step | number | 1 | Specifies the increments at which a slider value can be set. |
disabled | boolean | false | Whether or not the slider is disabled. |
Name | Type | Description |
---|---|---|
change | function(value: number|array) | Emits when a user stops dragging the slider or changes the value. |
NOTE: If you are not using
v-model
, you should listen for the slider using@change
and update themodel
prop.
Automatic
<ui-slider v-model="value"></ui-slider>\n
Manual
<ui-slider\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-slider>\n
'},"7hry":function(t,e){t.exports='New in 6.0.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-top-app-bar>` props with default value.\n UiTopAppBar: {\n // some props\n }\n});\n
'},"7mYG":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-rangepicker>` props with default value.\n UiRangepicker: {\n // some props\n }\n});\n
'},"7x8A":function(t,e){t.exports=''},"80T5":function(t,e){t.exports='New in 8.29.0
Set global validation rules
import { helpers } from 'balm-ui'; // Default Usage\n// OR\n// import helpers from 'balm-ui/utils/helpers'; // ### Individual Usage\n\nexport default {\n required: {\n validate(value) {\n return !helpers.isEmpty(value);\n },\n message: '%s is required'\n },\n mobile: {\n validate(value) {\n return /^1[0-9]\\d{9}$/.test(value);\n },\n message: 'Invalid phone number'\n },\n password: {\n validate(value) {\n return /^\\w+$/.test(value);\n },\n message: '%s must be a letter, digit or underline'\n }\n};\n
@use 'balm-ui/components/rangepicker' with (\n $separator-padding: 8px\n);\n
'},"84ZZ":function(t,e){t.exports='\u56fe\u7247\u5217\u8868\u5728\u6709\u7ec4\u7ec7\u7684\u7f51\u683c\u4e2d\u663e\u793a\u56fe\u7247\u7684\u96c6\u5408\u3002
'},"87Sa":function(t,e){t.exports='<div v-longpress></div>\n
type LongpressConfig =\n | Function // New in 8.52.0\n | {\n callback: Function;\n delay?: number;\n };\n
'},"87TQ":function(t,e){t.exports='@use '@material/ripple/ripple-theme' with (\n $fade-in-duration: 75ms,\n $fade-out-duration: 150ms,\n $translate-duration: 225ms,\n $states-wash-duration: 15ms,\n\n // Notes on states:\n // * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n // * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n // * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n $dark-ink-opacities: (\n hover: 0.04,\n focus: 0.12,\n press: 0.12,\n selected: 0.08,\n activated: 0.12,\n ),\n\n $light-ink-opacities: (\n hover: 0.08,\n focus: 0.24,\n press: 0.24,\n selected: 0.16,\n activated: 0.24,\n ),\n\n // Legacy\n\n $pressed-dark-ink-opacity: 0.16,\n $pressed-light-ink-opacity: 0.32,\n);\n
'},"8IRu":function(t,e){t.exports='/* Included `typography.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/plugins/typography/typography';\n
import Vue from 'vue';\nimport $typography from 'balm-ui/plugins/typography';\n\n// Optional. Overwrite the param of `$tt()`.\nVue.use($typography, ['custom-style-1', 'custom-style-2']);\n
'},"8PKc":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-tabs>` props with default value.\n UiTabs: {\n // some props\n }\n});\n
'},"8W4R":function(t,e){t.exports='<ui-select-icon><!-- the material design icon name --></ui-select-icon>\n
Name | Type | Default | Description |
---|---|---|---|
unclickable | boolean | false | \u5c55\u793a\u4e0d\u53ef\u70b9\u51fb\u7684\u6837\u5f0f |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u6807\u7ec4\u4ef6\u53ca HTML\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u9009\u62e9\u5668\u56fe\u6807\u65f6\u89e6\u53d1 |
<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Multi Date.."\n></ui-datepicker>\n
export default {\n data() {\n return {\n config: {\n mode: 'multiple'\n },\n date: ['2017-11-05', '2017-11-15', '2017-11-25']\n };\n }\n};\n
'},"8rxI":function(t,e){t.exports='import Vue from 'vue';\nimport $store from 'balm-ui/plugins/store';\nimport myStore from './store';\n\nVue.use($store, myStore);\n
'},"8v/M":function(t,e){t.exports='<ui-segmented-buttons :items="buttonGroupItems"></ui-segmented-buttons>\n
<ui-segmented-buttons>\n <ui-segmented-button></ui-segmented-button>\n</ui-segmented-buttons>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | array, number | [] | Mandatory. |
items | array | [] | Segmented button items. |
singleSelect | boolean | false | To make the segmented button single select. |
The keys of a segmented button item object:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the segmented button. |
Name | Type | Description |
---|---|---|
change | function(selectedIndex: array | number) | Emits when the segmented buttons is changed. |
selected | function(index: number) | Emits when the segmented button is clicked. |
NOTE: If you are not using
v-model
, you should listen for the segmented buttons using@change
and update themodel
prop.
Automatic
<ui-segmented-buttons v-model="selectedIndex"></ui-segmented-buttons>\n
Manual
<ui-segmented-buttons\n :model="selectedIndex"\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-segmented-buttons>\n
/* Included `theme.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/plugins/theme/theme';\n
import Vue from 'vue';\nimport $theme from 'balm-ui/plugins/theme';\n\nVue.use($theme, {\n // (Optional) New in 8.38.0, See ThemeColor type in APIs.\n});\n
'},"97Hy":function(t,e){t.exports='Shapes direct attention, identify components, communicate state, and express brand.
'},"9G71":function(t,e){t.exports='<ui-dialog-content><!-- the dialog content --></ui-dialog-content>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the dialog content and can contain HTML. |
<ui-select-icon><!-- the material design icon name --></ui-select-icon>\n
Name | Type | Default | Description |
---|---|---|---|
unclickable | boolean | false | Display un-clickable icons. |
Name | Props | Description |
---|---|---|
default | The default slot holds the select icon and can contain HTML. See Material Icons list. |
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the select icon is clicked. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport $alert from 'balm-ui/plugins/alert';\n\n// Optional. Overwrite `$alert` options.\nVue.use($alert, {\n // some options\n});\n
'},"9p9y":function(t,e){t.exports='Please
Copy
+Paste
or customize yours, if your need
File: /path/to/app/scripts/kill-ie.js
import { detectIE } from 'balm-ui'; // Default Usage\n// OR\n// import detectIE from 'balm-ui/utils/ie'; // Individual Usage\n\nconst IE = detectIE();\n\nconst isIE = IE && IE < 11; // Browser support IE 11+\n\nconst killIE = () => {\n let body = document.getElementsByTagName('body')[0];\n let template = `<div class="kill-ie">\n <h1>Your browser is out-of-date. Please <a href="https://browsehappy.com/">download</a> one of the up-to-date, free and excellent browsers for better security, speed and comfort.</h1>\n <p>Recommended Choice\uff1a<a href="https://www.google.com/chrome/">Chrome</a></p>\n </div>`;\n\n body.innerHTML = template;\n};\n\nexport { isIE, killIE };\n
File: /path/to/app/scripts/main.js
import { isIE, killIE } from './kill-ie';\n\nif (isIE) {\n killIE();\n} else {\n // your code\n}\n
File: /path/to/app/styles/_kill-ie.scss
.kill-ie {\n position: absolute;\n text-align: center;\n background-color: #bdbdbd;\n\n h1 {\n font-size: 36px;\n }\n\n p {\n font-size: 24px;\n }\n\n a {\n text-decoration: underline;\n color: red;\n font-weight: bold;\n }\n}\n
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-checkbox>` props with default value.\n UiCheckbox: {\n // some props\n }\n});\n
'},ARno:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},AT5t:function(t,e){t.exports='<ui-item><!-- the item child components --></ui-item>\n\n<ui-nav-item><!-- the link item child components --></ui-nav-item>\n
<ui-item>
PropsName | Type | Default | Description |
---|---|---|---|
selected | boolean | false | \u9009\u4e2d\u72b6\u6001 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
<ui-nav-item>
Props (New in 8.0.0)Name | Type | Default | Description |
---|---|---|---|
href | string | (required) | \u89e3\u6790\u7684\u7f51\u5740\u3002\u8fd9\u5c06\u662f\u4e00\u4e2a a \u5143\u7d20\u7684 href \u5c5e\u6027\u3002 |
active | boolean | false | \u6fc0\u6d3b\u72b6\u6001 |
\u4e0e <router-link>
\u4e00\u8d77\u4f7f\u7528\uff08\u9700\u8981 vue-router@3.1.0+
\uff09
<router-link v-slot="{ href, navigate, isActive }">\n <ui-nav-item\n :href="href"\n :active="isActive"\n @click="navigate"\n ></ui-nav-item>\n</router-link>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5217\u8868\u9879\u5b50\u7ec4\u4ef6\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49 <ui-item-first-content> \u7684\u5185\u5bb9\u3002\u901a\u5e38\u662f\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
after | iconClass | \u81ea\u5b9a\u4e49 <ui-item-last-content> \u7684\u5185\u5bb9\u3002\u901a\u5e38\u4e3a\u5c0f\u6587\u5b57\uff0c\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-item-text-content>
<ui-item-text1>
<ui-item-text2>
<ui-item-first-content>
<ui-item-last-content>
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u5217\u8868\u9879\u65f6\u89e6\u53d1 |
<ui-select><!-- the label text --></ui-select>\n
<ui-select>
\u7c7b\u578b
0
: 'filled'
1
: 'outlined'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u9009\u62e9\u5668\u7c7b\u578b | |
outlined | boolean | false | \u8f6e\u5ed3\u9009\u62e9\u5668 | |
model (v-model ) | string, number | '' | \u9009\u62e9\u5668\u503c | |
options | array | [] | \u8bbe\u7f6e\u9009\u9879\u5217\u8868\uff08\u9ed8\u8ba4\u9009\u9879\u683c\u5f0f\uff1a{ label, value } \uff09 | |
optionFormat | object | { label: 'label', value: 'value' } | \u5b9a\u4e49\u9009\u9879\u5361\u9009\u9879\u6570\u636e\u683c\u5f0f | 8.42.0 |
defaultLabel | string | '' | \u9009\u9879\u5360\u4f4d\u7b26 label \u7684\u503c | |
defaultValue | string, number | '' | \u9009\u9879\u5360\u4f4d\u7b26 value \u7684\u503c | |
label | string | '' | \u9009\u62e9\u5668\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837\u5f0f | |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
withLeadingIcon | boolean | false | \u542f\u7528\u9996\u56fe\u6807\u6837\u5f0f | |
helperTextId | string | null | \u5339\u914d <ui-select-helper> \u7684 id \u5c5e\u6027 | |
inside | boolean | false | \u9002\u914d\u6837\u5f0f\uff0c\u53ef\u7528\u4e8e\u67d0\u4e9b\u7ec4\u4ef6\u5185\u90e8\u7684\u6ea2\u51fa (\u5982\uff1a\u7528\u5728 <ui-dialog> \u4e2d) | 8.53.0 |
\u63d0\u793a\uff1a
withLeadingIcon
\u548cwithTrailingIcon
\u4ec5\u7528\u4e8e (\u975e<ui-select-icon>
) \u81ea\u5b9a\u4e49\u9996/\u5c3e\u56fe\u6807\uff0c\u901a\u5e38\u65e0\u9700\u914d\u7f6e
\u26a0\ufe0f
8.42.0
\u4e2doptionLabel
\u548coptionValue
\u5c5e\u6027\u5df2\u5f03\u7528\uff0c\u8bf7\u4f7f\u7528optionFormat
\u4ee3\u66ff\u3002
Name | Props | Description | Version |
---|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u62e9\u5668\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | ||
icon | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 | |
dropdown-icon | \u81ea\u5b9a\u4e49\u4e0b\u62c9\u56fe\u6807 | 6.9.0 |
Name | Type | Description |
---|---|---|
change | function(value: string|number) | \u9009\u62e9\u5668\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(option: object) | \u9009\u62e9\u5668\u9009\u9879\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u9009\u62e9\u5668\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-select v-model="value"></ui-select>\n
\u624b\u52a8
<ui-select\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-select>\n
<ui-badge></ui-badge>\n
Name | Type | Default | Description |
---|---|---|---|
count | number | 0 | Number to show in badge. |
overlap | boolean | false | Make the badge overlap with its container. |
maxCount | number | 99 | Max count to show. |
dot | boolean | false | Whether to display a dot instead of count . |
state | string | '' | State type for text badge. |
interface Badge {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the text content and can contain HTML. | |
badge | The badge slot holds the custom badge content. |
<ui-form-field>\n <ui-checkbox\n v-model="checkedNames"\n input-id="jack"\n value="Jack"\n ></ui-checkbox>\n <label for="jack">Jack</label>\n</ui-form-field>\n<ui-form-field>\n <ui-checkbox\n v-model="checkedNames"\n input-id="john"\n value="John"\n ></ui-checkbox>\n <label for="john">John</label>\n</ui-form-field>\n<ui-form-field>\n <ui-checkbox\n v-model="checkedNames"\n input-id="mike"\n value="Mike"\n ></ui-checkbox>\n <label for="mike">Mike</label>\n</ui-form-field>\n
export default {\n data() {\n return {\n checkedNames: []\n };\n }\n};\n
'},AdaL:function(t,e){t.exports='@use 'balm-ui/components/tree' with (\n $node-hover-color: rgba(theme-color.prop-value(on-surface), 0.04),\n\n $indent-width: 24px,\n $icon-width: 24px,\n $label-padding: 8px 0,\n\n $selected-background-color: rgba(\n theme-color.prop-value(primary),\n 0.12\n ),\n $selected-color: theme-color.prop-value(on-surface)\n);\n
'},Amxa:function(t,e){t.exports='<ui-image-text><!-- Text labels --></ui-image-text>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u7247\u76f8\u5173\u7684\u4e00\u884c\u6587\u672c\u6807\u7b7e | |
action | action \u63d2\u69fd\u5305\u542b\u56fe\u7247\u76f8\u5173\u52a8\u4f5c\u5185\u5bb9 |
<ui-tab-scroller><!-- the tab components --></ui-tab-scroller>\n
Name | Type | Default | Description |
---|---|---|---|
scrollX | number | 0 | The current scroll value. |
align | string | '' | <ui-tabs> common prop. Tab alignment. |
interface TabScroller {\n align: 'start' | 'center' | 'end';\n}\n
Name | Slots | Description |
---|---|---|
default | The default slot holds the tab components and can contain HTML. |
\u5c42\u7ea7\u9634\u5f71\u4e3a\u7269\u4f53\u7684\u6df1\u5ea6\u548c\u65b9\u5411\u8fd0\u52a8\u63d0\u4f9b\u4e86\u91cd\u8981\u7684\u89c6\u89c9\u7ebf\u7d22\u3002\u5b83\u4eec\u662f\u6307\u793a\u8868\u9762\u4e4b\u95f4\u5206\u79bb\u7a0b\u5ea6\u7684\u552f\u4e00\u89c6\u89c9\u63d0\u793a\u3002 \u5bf9\u8c61\u7684\u9ad8\u7a0b\u786e\u5b9a\u5176\u9634\u5f71\u7684\u5916\u89c2\u3002 \u9ad8\u7a0b\u503c\u6620\u5c04\u5230\u201c z \u7a7a\u95f4\u201d\u4e2d\uff0c\u8303\u56f4\u4ece 0
\u5230 24
\u3002
<ui-card-media-content><!-- rich media content --></ui-card-media-content>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the card media content and can contain HTML. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/slider/slider';\n
import Vue from 'vue';\nimport UiSlider from 'balm-ui/components/slider';\n\n// Optional. Overwrite `<ui-slider>` props with default value.\nVue.use(UiSlider, {\n // some props\n});\n
'},BbKN:function(t,e){t.exports='Buttons allow users to take actions, and make choices, with a single tap.
'},BbN2:function(t,e){t.exports='<ui-form-field>\n <ui-radio></ui-radio>\n <label>Radio</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | string, number | '' | \u5355\u9009\u6309\u94ae\u503c |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
value | string, number | '' | \u539f\u751f <input> \u7684 value \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
attrs | object | {} | <input> \u7684\u5176\u4ed6\u5c5e\u6027 |
Name | Type | Description |
---|---|---|
change | function(value: string|number) | \u5355\u9009\u6309\u94ae\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5355\u9009\u6309\u94ae\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-radio v-model="value"></ui-radio>\n
\u624b\u52a8
<ui-radio\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-radio>\n
<ui-datepicker></ui-datepicker>\n
<ui-datepicker>
\u5728 config.mode
\u5c5e\u6027\u4e2d\u7684\u7c7b\u578b
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder \uff09 | |
model (v-model ) | string, number, array | '' | \u65e5\u671f\u9009\u62e9\u5668\u503c | |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 | |
label | string | '' | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff | |
placeholder | string | null | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837 | |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
endAligned | boolean | false | \u8f93\u5165\u6587\u672c\u53f3\u5bf9\u9f50 | |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
withLeadingIcon | boolean, string | false | \u542f\u7528\u9996\u56fe\u6807\u6837\uff08\u9700\u4f7f\u7528 before \u63d2\u69fd\uff09 | |
withTrailingIcon | boolean, string | false | \u542f\u7528\u5c3e\u56fe\u6807\u6837\u5f0f\uff08\u9700\u4f7f\u7528 after \u63d2\u69fd\uff09 | |
config | object | {} | \u8be6\u89c1 Flatpickr configuration | |
toggle | boolean | false | \u663e\u793a\u65e5\u5386\u56fe\u6807\u6309\u94ae | |
clear | boolean | false | \u663e\u793a\u6e05\u9664\u56fe\u6807\u6309\u94ae | |
monthOptions | object | {} | \u8be6\u89c1 Flatpickr month select options | 7.4.2 |
<ui-datepicker :config="config"></ui-datepicker>\n
import lang from 'flatpickr/dist/l10n/zh.js';\n\nexport default {\n data() {\n return {\n config: {\n locale: lang.zh\n }\n };\n }\n};\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807\uff08withTrailingIcon = true \uff09 |
toggle | \u81ea\u5b9a\u4e49\u65e5\u5386\u56fe\u6807\u6309\u94ae\uff08withTrailingIcon = false \uff09 | |
clear | \u81ea\u5b9a\u4e49\u6e05\u9664\u56fe\u6807\u6309\u94ae\uff08withTrailingIcon = false \uff09 |
Name | Type | Description |
---|---|---|
change | function(value: string|array) | \u65e5\u671f\u9009\u62e9\u5668\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u65e5\u671f\u9009\u62e9\u5668\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-datepicker v-model="value"></ui-datepicker>\n
\u624b\u52a8
<ui-datepicker\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-datepicker>\n
<div class="container">\n <!-- Content -->\n\n <ui-bottom-navigation content-selector=".container" stacked>\n <ui-tabs\n v-model="active"\n type="textWithIcon"\n :items="items"\n stacked\n @change="onChange"\n ></ui-tabs>\n </ui-bottom-navigation>\n</div>\n
export default {\n data() {\n return {\n items: [\n {\n text: 'Favorites',\n icon: 'favorite',\n url: 'url 1'\n },\n {\n text: 'Music',\n icon: 'music_note',\n url: 'url 2'\n },\n {\n text: 'Places',\n icon: 'place'\n },\n {\n text: 'News',\n icon: 'fiber_new'\n }\n ],\n active: 1\n };\n },\n methods: {\n onChange(active) {\n console.log(active);\n }\n }\n};\n
'},BnzD:function(t,e){t.exports='<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Date.."\n toggle\n clear\n></ui-datepicker>\n
export default {\n data() {\n return {\n config: {\n defaultDate: 'today'\n },\n date: ''\n };\n }\n};\n
'},BpPC:function(t,e){t.exports='<ui-card-text><!-- additional text content --></ui-card-text>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the card text content and can contain HTML. |
'},Bwh6:function(t,e){t.exports='New in 8.29.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-dialog>` props with default value.\n UiDialog: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-title>` props with default value.\n UiDialogTitle: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-actions>` props with default value.\n UiDialogActions: {\n // some props\n }\n});\n
'},BzGL:function(t,e){t.exports='<ui-list-group>\n <ui-list-group-subheader>1. Single-line list</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-text-content></ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>2. Two-line list</ui-list-group-subheader>\n <ui-list type="twoLine">\n <ui-item>\n <ui-item-text-content>\n <ui-item-text1></ui-item-text1>\n <ui-item-text2></ui-item-text2>\n </ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>3. Rich List</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-first-content></ui-item-first-content>\n <ui-item-text-content></ui-item-text-content>\n <ui-item-last-content></ui-item-last-content>\n </ui-item>\n </ui-list>\n</ui-list-group>\n
<ui-nav>\n <ui-nav-item active>Activated item</ui-nav-item>\n <ui-nav-item>Unactivated item</ui-nav-item>\n</ui-nav>\n
Component | Description |
---|---|
<ui-list> /<ui-nav> | \u5217\u8868\u5143\u7d20 |
<ui-item> /<ui-nav-item> | \u5217\u8868\u9879\u5143\u7d20 |
<ui-item-text-content> | \u5217\u8868\u9879\u6587\u672c\u5185\u5bb9\u5bb9\u5668\uff08\u663e\u793a\u4e3a\u5217\u8868\u9879\u7684\u4e2d\u95f4\u5217\uff09 |
<ui-item-text1> | \u5217\u8868\u9879\u7684\u4e3b\u8981\u6587\u5b57\u3002\u5e94\u8be5\u662f <ui-item-text-content> \u7684\u5b50\u5143\u7d20\u3002 |
<ui-item-text2> | \u5217\u8868\u9879\u7684\u6b21\u8981\u6587\u5b57\u3002\u663e\u793a\u5728\u4e3b\u8981\u6587\u5b57\u4e0b\u65b9\u3002\u5e94\u8be5\u662f <ui-item-text-content> \u7684\u5b50\u5143\u7d20\u3002 |
<ui-item-first-content> | \u5217\u8868\u9879\u6bcf\u884c\u7684\u7b2c\u4e00\u4e2a\u533a\u5757\u3002\u901a\u5e38\u662f\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
<ui-item-last-content> | \u5217\u8868\u9879\u6bcf\u884c\u7684\u6700\u540e\u4e00\u4e2a\u533a\u5757\u3002\u901a\u5e38\u4e3a\u5c0f\u6587\u5b57\uff0c\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
<ui-list-group> | \u5206\u7ec4\u5217\u8868\u5bb9\u5668\u3002\u4e24\u4e2a\u6216\u591a\u4e2a\u8981\u5206\u7ec4\u5728\u4e00\u8d77\u7684 <ui-list> \u5143\u7d20\u7684\u5bb9\u5668 |
<ui-list-group-subheader> | \u5206\u7ec4\u5217\u8868\u6807\u9898\u3002\u6807\u9898\u6587\u672c\u663e\u793a\u5728\u7ec4\u4e2d\u6bcf\u4e2a\u5217\u8868\u4e0a\u65b9\u3002 |
<ui-list-divider> | \u5217\u8868\u5206\u5272\u7ebf |
<ui-item-divider> | \u5217\u8868\u9879\u5206\u5272\u7ebf |
<ui-icon v-ripple.unbounded class="demo-surface" data-mdc-ripple-is-unbounded>\n favorite\n</ui-icon>\n
<ui-icon\n v-ripple:cssOnly.unbounded\n class="demo-surface"\n data-mdc-ripple-is-unbounded\n>\n favorite\n</ui-icon>\n
.demo-surface[data-mdc-ripple-is-unbounded] {\n /* Override width/height from above to match icon size, and adjust padding for hitbox */\n width: 24px;\n height: 24px;\n padding: 12px;\n}\n
'},C1m5:function(t,e){t.exports='<ui-form item-margin-bottom="10">\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.mobile">Mobile</ui-textfield>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.password" input-type="password">\n Password\n </ui-textfield>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.repassword" input-type="password">\n Repeat Password\n </ui-textfield>\n </ui-form-field>\n <ui-form-field>\n <ui-select\n v-model="formData.gender"\n :options="genderOptions"\n default-label="Unknown"\n >\n Gender\n </ui-select>\n </ui-form-field>\n\n <ui-alert v-if="messages.length" state="error">\n <ul>\n <li v-for="(message, index) in messages" :key="index">{{ message }}</li>\n </ul>\n </ui-alert>\n\n <ui-form-field class="form-item form-actions">\n <ui-button raised @click="submit">Submit</ui-button>\n </ui-form-field>\n</ui-form>\n
const validations = [\n {\n key: 'mobile',\n label: 'Mobile',\n validator: 'required, mobile'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required, password, minRule, maxRule',\n minRule: {\n validate(value) {\n return value.trim().length >= 6;\n },\n message: '%s minLength >= 6'\n },\n maxRule: {\n validate(value) {\n return value.trim().length <= 8;\n },\n message: '%s maxLength <= 8'\n }\n },\n {\n key: 'repassword',\n label: 'Repeat Password',\n validator: 'required, password, repasswordRule',\n repasswordRule: {\n validate(value, data) {\n return value === data.password;\n },\n message: 'repassword !== password'\n }\n },\n {\n key: 'gender',\n label: 'Gender',\n validator: 'required'\n }\n];\n\nconst genderOptions = [\n {\n label: 'Male',\n value: 'M'\n },\n {\n label: 'Female',\n value: 'F'\n }\n];\n\nexport default {\n validations,\n data() {\n return {\n genderOptions,\n formData: {\n mobile: '',\n password: '',\n repassword: '',\n gender: ''\n },\n messages: []\n };\n },\n methods: {\n submit() {\n let result = this.$validate(this.formData);\n let { valid, messages } = result;\n this.messages = messages;\n\n if (valid) {\n console.log('gg');\n }\n }\n }\n};\n
'},C2TI:function(t,e){t.exports='Tabs organize content across different screens, data sets, and other interactions.
'},C32w:function(t,e){t.exports='A modern WYSIWYG editor (based on Quill with built-in extension features).
'},CBoC:function(t,e){t.exports='New in 6.7.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-banner>` props with default value.\n UiBanner: {\n // some props\n }\n});\n
'},CREV:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUI from 'balm-ui';\nimport validatorRules from './config/validator-rules';\n\nVue.use(BalmUI, {\n // Optional. Set global validator rules.\n $validator: validatorRules\n});\n
'},CVcI:function(t,e){t.exports='Image lists display a collection of images in an organized grid.
'},Cb0M:function(t,e){t.exports='<ui-menu-anchor>\n <ui-menu :items="menuItems"></ui-menu>\n</ui-menu-anchor>\n
<ui-menu-anchor>\n <ui-menu>\n <ui-menuitem>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n\n <ui-item-divider></ui-item-divider>\n\n <ui-menuitem nested>\n <ui-menuitem>\n <ui-menuitem-icon>Icon</ui-menuitem-icon>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n </ui-menuitem>\n </ui-menu>\n</ui-menu-anchor>\n
Component | Description |
---|---|
<ui-menu-anchor> | Used to indicate which element the menu should be anchored to. |
<ui-menu> | Required on the root element. |
<ui-menuitem> | A menu item. |
<ui-menuitem-text> | A menu item text. |
<ui-menuitem-icon> | Required when using a <ui-menuitem nested> to indicate which item is selected. Should contain an icon or svg that indicates the selected state of the <ui-menuitem> . |
@use '@material/image-list' with (\n $standard-gutter-size: 4px,\n $masonry-gutter-size: 16px,\n $icon-size: 24px,\n $text-protection-background-color: rgba(0, 0, 0, 0.6),\n $text-protection-height: 48px,\n $text-protection-horizontal-padding: 16px,\n $shape-radius: 0\n);\n
'},CrVF:function(t,e){t.exports='<ui-drawer><!-- the drawer child components --></ui-drawer>\n
<ui-drawer>
\u7c7b\u578b
0
: 'permanent'
1
: 'dismissible'
2
: 'modal'
\u63d0\u793a\uff1a
<ui-drawer>
(type="permanent"
) \u6ca1\u6709\u5c5e\u6027\u548c\u4e8b\u4ef6<ui-drawer type="dismissible">
\u548c <ui-drawer type="modal">
\u5fc5\u987b\u5305\u542b\u4e00\u4e2a <ui-nav>
\u3002\u800c\u4e14\u5bfc\u822a\u4e2d\u7684\u7b2c\u4e00\u4e2a <ui-nav-item>
\u9ed8\u8ba4\u5fc5\u987b\u4e3a\u6fc0\u6d3b\u72b6\u6001\u3002Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u4fa7\u8fb9\u5bfc\u822a\u680f\u7c7b\u578b |
navId | string | null | \u5916\u90e8\u83dc\u5355\u6309\u94ae\u9009\u62e9\u5668\uff08\u8bf7\u53c2\u8003 top app bar \u7684 navId \u5c5e\u6027\uff09 |
open (v-model ) | boolean | false | \u5bfc\u822a\u5207\u6362\u7684\u72b6\u6001 |
viewportHeight | boolean | false | \u8bbe\u7f6e\u89c6\u7a97\u5168\u9ad8\u5ea6\uff08100vh \uff09 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bfc\u822a\u7684\u5b50\u7ec4\u4ef6 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-drawer-header>
<ui-drawer-content>
Name | Type | Description |
---|---|---|
nav | function(open: boolean) | \u5bfc\u822a\u5f00\u5173\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@nav
\u76d1\u542c\u4fa7\u8fb9\u5bfc\u822a\u680f\u5207\u6362\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-drawer v-model="open" type="modal"></ui-drawer>\n
\u624b\u52a8
<ui-drawer\n :open="open"\n type="modal"\n @nav="$balmUI.onChange('open', $event)"\n></ui-drawer>\n
@use 'balm-ui/directives/shape/shape';\n
import Vue from 'vue';\nimport vShape from 'balm-ui/directives/shape';\n\nVue.directive(vShape.name, vShape);\n
'},DD5m:function(t,e){t.exports='<div v-anchor></div>\n
v-anchor.bodyElement
: \u81ea\u5b9a\u4e49 HTML \u5bb9\u5668\uff08\u9ed8\u8ba4\u5bb9\u5668\u4e3a <html>
\uff09v-anchor.html
: \u542f\u7528 HTML \u951a\u70b9\uff08\u4f8b\u5982 markdown\uff09v-anchor.offset="offsetValue"
: \u4e3a\u9875\u9762\u6eda\u52a8\u8bbe\u7f6e\u504f\u79fb\u91cf\uff08\u5728 <html>
\u6216\u81ea\u5b9a\u4e49\u5bb9\u5668\u4e0a\u4f7f\u7528 data-vanchor-offset
\u5c5e\u6027\u8bbe\u7f6e\u5168\u5c40\u504f\u79fb\u91cf\uff09offsetValue \u503c\u4e3a\u6570\u5b57
<html data-vanchor-offset="64">\n <!-- Anchors & Targets -->\n</html>\n\n<!-- \u6216 -->\n\n<div class="container" v-anchor.offset="64">\n <!-- Anchors & Targets -->\n</div>\n
v-anchor:href
v-anchor:id
<div v-anchor:href="'#target1'">Anchor 1</div>\n<div v-anchor:href="'#target2'">Anchor 2</div>\n\n<div v-anchor:id="'target1'">Target 1</div>\n<div v-anchor:id="'target2'">Target 2</div>\n
class="v-anchor" data-href="selector"
id
\u6216\u552f\u4e00\u7684 class
<div v-anchor.html>\n <div class="v-anchor" data-href="#target1">Anchor 1</div>\n <div class="v-anchor" data-href="#target2">Anchor 2</div>\n\n <div id="target1">Target 3</div>\n <div id="target2">Target 4</div>\n</div>\n
'},DFaq:function(t,e){t.exports='<ui-grid><!-- the grid cell --></ui-grid>\n
Name | Type | Default | Description |
---|---|---|---|
fixedColumnWidth | boolean | false | \u6307\u5b9a\u6805\u683c\u5e94\u5177\u6709\u56fa\u5b9a\u7684\u5217\u5bbd |
position | string | '' | \u6307\u5b9a\u6574\u4e2a\u6805\u683c\u7684\u5bf9\u9f50\u65b9\u5f0f\uff08'left' \u6216 'right' \uff09 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b <ui-grid-cell> \u53ca HTML |
Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
'},DJqZ:function(t,e,o){"use strict";var d={name:"SvgGithub"},n=o("KHd+"),l=Object(n.a)(d,(function(){var t=this._self._c;return t("svg",{staticClass:"octicon octicon-mark-github",attrs:{width:"32",height:"32",viewBox:"0 0 16 16","aria-hidden":"true"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"}})])}),[],!1,null,null,null).exports,a=o("l0Zm"),i={name:"TopAppToolbar",components:{SvgGithub:l},props:{itemClass:{type:String,required:!0}},data:()=>({translations:a.i,showTranslations:!1})},c=Object(n.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"top-app-toolbar"},[e("a",{directives:[{name:"tooltip",rawName:"v-tooltip",value:"BalmUI Pro is now released",expression:"'BalmUI Pro is now released'"}],staticClass:"pro",attrs:{href:"https://legacy.pro.balmjs.com/",target:"_blank",rel:"noopener","aria-describedby":"balm-ui-pro"}},[t._v("\n PRO\n ")]),t._v(" "),e("ui-menu-anchor",[e("ui-icon-button",{attrs:{icon:"language"},on:{click:function(e){return t.$balmUI.onShow("showTranslations")}}}),t._v(" "),e("ui-menu",{on:{selected:t.$store.setLang},model:{value:t.showTranslations,callback:function(e){t.showTranslations=e},expression:"showTranslations"}},t._l(t.translations,(function(o){return e("ui-menuitem",{key:o.value,attrs:{item:o,selected:o.value===t.$store.lang}})})),1)],1),t._v(" "),e("ui-icon-button",{directives:[{name:"tooltip",rawName:"v-tooltip",value:"Support BalmUI",expression:"'Support BalmUI'"}],class:[t.itemClass,"donate"],attrs:{icon:"support","aria-describedby":"donate"},on:{click:function(e){t.$router.push({name:"donate"}).catch((()=>{}))}}}),t._v(" "),e("a",{attrs:{href:"https://github.com/balmjs/balm-ui/tree/8.x",target:"_blank",rel:"noopener"}},[e("ui-icon-button",{class:[t.itemClass,"github"],attrs:{"aria-describedby":"github"}},[e("svg-github")],1)],1)],1)}),[],!1,null,null,null);e.a=c.exports},DOtE:function(t,e){t.exports='<ui-file></ui-file>\n
Name | Type | Default | Description |
---|---|---|---|
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
accept | string | '' | \u53ef\u4ee5\u63a5\u53d7\u7684\u6587\u4ef6\u7c7b\u578b |
multiple | boolean | false | \u652f\u6301\u591a\u6587\u4ef6\u4e0a\u4f20 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
outlined | boolean | false | \u4e0a\u4f20\u6309\u94ae\u663e\u793a\u4e3a\u8f6e\u5ed3\u6309\u94ae\u6837\u5f0f |
text | string | 'Upload' | \u4e0a\u4f20\u6309\u94ae\u7684\u6587\u672c |
preview | boolean | false | \u542f\u7528\u53ef\u9884\u89c8\u6a21\u5f0f |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u4e0a\u4f20\u6309\u94ae\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(files: array) | \u6587\u4ef6\u53d8\u5316\u65f6\u89e6\u53d1 |
files
\u4e2d\u6bcf\u4e2a file
\u7684\u5c5e\u6027Name | Type | Description |
---|---|---|
tmpId | string | \u4e34\u65f6\u552f\u4e00 ID |
lastModified | number | \u8fd4\u56de\u6587\u4ef6\u7684\u4e0a\u6b21\u4fee\u6539\u65f6\u95f4\uff0c\u4ee5 UNIX \u7eaa\u5143\u4ee5\u6765\u7684\u6beb\u79d2\u6570\u4e3a\u5355\u4f4d (January 1st, 1970 at Midnight) |
name | string | \u8fd4\u56de File \u5bf9\u8c61\u5f15\u7528\u7684\u6587\u4ef6\u7684\u540d\u79f0 |
size | number | \u8fd4\u56de\u6587\u4ef6\u7684\u5927\u5c0f\uff08\u4ee5\u5b57\u8282\u4e3a\u5355\u4f4d\uff09 |
type | string | \u8fd4\u56de\u6587\u4ef6\u7684 MIME \u7c7b\u578b |
sourceFile | file | \u8fd4\u56de\u4e00\u4e2a\u65b0\u7684 Blob \u5bf9\u8c61\uff0c\u5176\u4e2d\u5305\u542b\u6e90 Blob \u7684\u6307\u5b9a\u5b57\u8282\u8303\u56f4\u5185\u7684\u6570\u636e |
previewSrc | string | \u7528\u4e8e\u9884\u89c8\u7684 src \u6570\u636e\u3002 \u4ec5\u9002\u7528\u4e8e\u53ef\u9884\u89c8\u6a21\u5f0f |
previewError | number | \u9884\u89c8\u9519\u8bef\u4ee3\u7801\uff1a{0: 'OK', 1: 'Not image type', 2: 'Unsupported'} |
<ui-table></ui-table>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
data | array | [] | Data source. | |
thead | array | [] | Table header renderer. | |
tbody | array | [] | Table content renderer. | |
tfoot | array | [] | Table footer renderer. | |
fullwidth | boolean | false | Styles the table as a full width table. | |
rowCheckbox | boolean | false | Data table with row selection. | |
selectedRows (v-model ) | array | [] | Selected row indexes/ids. (Required: rowCheckbox: true ) | |
rowCheckboxDisabled | function, boolean | false | Exclude row selections. | 8.52.0 |
selectedKey | boolean, string | false | selectedRows use custom key field, default use row index. | |
rowIdPrefix | string | '' | The prefix of data-row-id attribute value on row element tr . | |
sortIconAlignEnd | boolean | false | The sort icon will be positioned after the label. | |
showProgress | boolean | false | Styles the table with progress indicator for data loading. | 8.16.0 |
fixedHeader | boolean | false | Styles the table as a fixed header. | 8.16.0 |
defaultColWidth | number | 0 | Set the default column width for the fixed table. | 8.16.0 |
scroll | object | { x: false, y: false } | Set the table container size for the fixed table. | 8.16.0 |
thead
& tbody
& tfoot
props common format
interface TableCell {\n value: string; // Cell content\n numeric: boolean; // Numeric cell is displayed right (Equivalent to `align: 'right'`)\n align: 'left' | 'center' | 'right'; // Text alignment\n class: string; // Custom classname\n slot: string; // Custom slot for cell\n}\n
thead
format
default items (string[]
)
[\n 'ID',\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n];\n
custom items (object[]
or object[][]
)
interface Thead {\n sort: 'none' | 'asc' | 'desc'; // Sorting\n columnId: string; // sort field, e.g. 'id'\n rowspan: number;\n colspan: number;\n}\n
columnId
field: New in7.0.0
; ifbalm-ui < 7.0.0
please useby
field
[\n [\n {\n value: 'ID',\n rowspan: 2,\n sort: 'asc',\n columnId: 'id'\n },\n {\n value: 'Type1',\n colspan: 2,\n align: 'center'\n },\n {\n value: 'Type2',\n colspan: 3,\n align: 'center'\n },\n {\n value: 'Actions',\n rowspan: 2\n }\n ],\n [\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n ]\n];\n
tbody
format
default fields (string[]
)
['id', 'dessert', 'calories', 'fat', 'carbs', 'protein'];\n
custom fields (object[]
)
interface Tbody {\n field: string; // Data field name\n fn: function; // Simple data processing\n colClass: string; // The class name of the <col> element (New in 8.16.0)\n fixed: 'left' \uff5c 'right'; // Set column position for fixed cell (New in 8.16.0)\n width: number; // Set column width for fixed cell (New in 8.16.0)\n}\n
[\n 'id',\n 'dessert',\n {\n field: 'calories',\n numeric: true,\n class: 'my-data'\n },\n {\n field: 'fat',\n fn: (data) => {\n return data.fat.toFixed(1);\n }\n },\n 'carbs',\n {\n field: 'protein',\n class: (data) => {\n return data.protein > 5 ? 'red' : 'green';\n }\n },\n {\n slot: 'actions'\n }\n];\n
<ui-table>\n <template #actions="{ data }">\n <ui-icon @click="show(data)">description</ui-icon>\n <ui-icon @click="edit(data)">edit</ui-icon>\n <ui-icon @click="remove(data)">delete</ui-icon>\n </template>\n</ui-table>\n
tfoot
format (object[]
)
interface Tfoot {\n fnName: 'count' | 'sum' | 'avg' | 'max' | 'min'; // Frequently-used statistical method\n fn: function; // Simple data processing for result\n slot: string; // Custom slot for footer cell\n}\n
fnName
methods: count
, sum
, avg
, max
, min
[\n {\n field: 'id',\n fnName: 'count'\n },\n null,\n {\n field: 'calories',\n fnName: 'sum'\n },\n {\n field: 'fat',\n fnName: 'avg'\n },\n {\n field: 'carbs',\n fnName: 'max'\n },\n {\n field: 'protein',\n fnName: 'min'\n }\n];\n
Name | Props | Description |
---|---|---|
default | The default slot holds the pagination component and can contain HTML. | |
(custom-name) | Custom slot for cell |
Name | Type | Description | Version |
---|---|---|---|
selected | function(selectedRows: array) | Emits when row checkbox is changed. | |
sorted | function(detail: object) | Emits when clicked on sortable header cell. | 8.58.0 |
NOTE: If you are not using
v-model
, you should listen for the table using@selected
and update theselectedRows
prop.
Automatic
<ui-table v-model="selectedRows" row-checkbox></ui-table>\n
Manual
<ui-table\n :selectedRows="selectedRows"\n row-checkbox\n @selected="$balmUI.onChange('selectedRows', $event)"\n></ui-table>\n
<ui-dialog>\n <ui-dialog-title></ui-dialog-title>\n <ui-dialog-content></ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n
Component | Description |
---|---|
<ui-dialog> | \u5bf9\u8bdd\u6846\u5bb9\u5668\u5143\u7d20 |
<ui-dialog-title> | \u5bf9\u8bdd\u6846\u6807\u9898\u5143\u7d20 |
<ui-dialog-content> | \u5bf9\u8bdd\u6846\u4e3b\u8981\u5185\u5bb9\u533a\u57df\u3002\u53ef\u80fd\u5305\u542b\u5217\u8868\uff0c\u8868\u5355\u6216\u6587\u7ae0\u3002 |
<ui-dialog-actions> | \u5bf9\u8bdd\u6846\u5e95\u90e8\u533a\u57df\uff0c\u5305\u542b\u5bf9\u8bdd\u6846\u7684\u64cd\u4f5c\u6309\u94ae\u3002 |
\u5e95\u90e8\u6d88\u606f\u6846\u5728\u5c4f\u5e55\u5e95\u90e8\u63d0\u4f9b\u6709\u5173\u5e94\u7528\u7a0b\u5e8f\u8fc7\u7a0b\u7684\u7b80\u77ed\u6d88\u606f\u3002
'},DlJ9:function(t,e){t.exports='<ui-card-buttons><!-- the button components --></ui-card-buttons>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the button components and can contain HTML. |
<div v-anchor class="container">\n <ui-button v-anchor:href="'#target1'" raised>Anchor 1</ui-button>\n <ui-button v-anchor:href="'#target2'" outlined>Anchor 2</ui-button>\n\n <div v-anchor:id="'target1'">Target 1</div>\n <div v-anchor:id="'target2'">Target 2</div>\n</div>\n
'},E67T:function(t,e){t.exports='\u5982\u679c\u9700\u8981\u8bf7\u76f4\u63a5 \u590d\u5236\u7c98\u8d34 \u6216 \u81ea\u5b9a\u4e49
\u6587\u4ef6\uff1a/path/to/app/scripts/kill-ie.js
import { detectIE } from 'balm-ui'; // \u9ed8\u8ba4\u7528\u6cd5\n// \u6216\n// import detectIE from 'balm-ui/utils/ie'; // \u72ec\u7acb\u7528\u6cd5\n\nconst IE = detectIE();\n\nconst isIE = IE && IE < 11; // Browser support IE 11+\n\nconst killIE = () => {\n let body = document.getElementsByTagName('body')[0];\n let template = `<div class="kill-ie">\n <h1>\u60a8\u5f53\u524d\u4f7f\u7528\u7684\u6d4f\u89c8\u5668\u7248\u672c\u8fc7\u4f4e\uff0c\u53ef\u80fd\u5b58\u5728\u5b89\u5168\u98ce\u9669\uff0c\u8bf7\u70b9\u51fb<a href="https://browsehappy.com/">\u8fd9\u91cc</a>\u9009\u62e9\u4e00\u6b3e\u65b0\u7248\u6d4f\u89c8\u5668\u3002</h1>\n <p>\u5efa\u8bae\u5347\u7ea7\uff1a<a href="https://www.google.cn/intl/zh-CN/chrome/">\u8c37\u6b4c\u6d4f\u89c8\u5668</a></p>\n </div>`;\n\n body.innerHTML = template;\n};\n\nexport { isIE, killIE };\n
\u6587\u4ef6\uff1a/path/to/app/scripts/main.js
import { isIE, killIE } from './kill-ie';\n\nif (isIE) {\n killIE();\n} else {\n // your code\n}\n
\u6587\u4ef6\uff1a/path/to/app/styles/_kill-ie.scss
.kill-ie {\n position: absolute;\n text-align: center;\n background-color: #bdbdbd;\n\n h1 {\n font-size: 36px;\n }\n\n p {\n font-size: 24px;\n }\n\n a {\n text-decoration: underline;\n color: red;\n font-weight: bold;\n }\n}\n
<ui-image-list><!-- the image item components --></ui-image-list>\n
<ui-image-list>
\u7c7b\u578b
0
: 'standard'
1
: 'masonry'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u56fe\u7247\u5217\u8868\u7c7b\u578b |
masonry | boolean | false | \u7011\u5e03\u6d41\u6837\u5f0f |
textProtection | boolean | false | \u56fe\u7247\u5217\u8868\u9879\u7684\u6587\u5b57\u6807\u7b7e\u653e\u7f6e\u4e8e\u56fe\u7247\u4e2d\uff08\u800c\u975e\u56fe\u7247\u4e0b\u65b9\uff09 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u7247\u5217\u8868\u9879\u5185\u5bb9\u53ca HTML |
<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Date Range.."\n></ui-datepicker>\n
export default {\n data() {\n return {\n config: {\n mode: 'range'\n },\n date: ['2017-11-10', '2017-11-20']\n };\n }\n};\n
'},ENZn:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},EPuy:function(t,e){t.exports='<ui-textfield-icon><!-- the material design icon name --></ui-textfield-icon>\n
Name | Type | Default | Description |
---|---|---|---|
trailing | boolean | false | Display trailing icon. |
unclickable | boolean | false | Display un-clickable icon. |
Name | Props | Description |
---|---|---|
default | The default slot holds the text field icon and can contain HTML. See Material Icons list. |
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the text field icon is clicked. |
<h6 :class="$tt('headline6')">Start Alignment</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" align="start">\n <ui-tab v-for="(tab, index) in tabs" :key="index" min-width>\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">Center Alignment</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" align="center">\n <ui-tab v-for="(tab, index) in tabs" :key="index" min-width>\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">End Alignment</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" align="end">\n <ui-tab v-for="(tab, index) in tabs" :key="index" min-width>\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n
'},EYGw:function(t,e){t.exports='<div v-debounce></div>\n
interface Debounce {\n callback: Function;\n delay?: number; // defaults: 250 ms\n}\n
'},Ea3x:function(t,e){t.exports='@use '@material/theme/theme-color' with (\n $primary: #6200ee, // baseline purple, 500 tone\n $on-primary: if(contrast-tone($primary) == 'dark', #000, #fff),\n\n $secondary: #018786, // baseline teal, 600 tone\n $on-secondary: if(contrast-tone($secondary) == 'dark', #000, #fff),\n $background: #fff, // White\n\n $surface: #fff,\n $on-surface: if(contrast-tone($surface) == 'dark', #000, #fff),\n\n $error: #b00020,\n $on-error: if(contrast-tone($error) == 'dark', #000, #fff),\n\n $text-colors: (\n dark: (\n primary: rgba(black, 0.87),\n secondary: rgba(black, 0.54),\n hint: rgba(black, 0.38),\n disabled: rgba(black, 0.38),\n icon: rgba(black, 0.38),\n ),\n light: (\n primary: white,\n secondary: rgba(white, 0.7),\n hint: rgba(white, 0.5),\n disabled: rgba(white, 0.5),\n icon: rgba(white, 0.5),\n ),\n ),\n\n $text-emphasis: (\n high: 0.87,\n medium: 0.6,\n disabled: 0.38,\n )\n);\n
Material Color System Usage (See below color palette)
@use '@material/theme' as color;\n\n.test {\n color: color.$red-800;\n}\n
<ui-segmented-buttons :items="buttonGroupItems"></ui-segmented-buttons>\n
<ui-segmented-buttons>\n <ui-segmented-button></ui-segmented-button>\n</ui-segmented-buttons>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | array, number | [] | \u9009\u4e2d\u72b6\u6001 |
items | array | [] | \u6309\u94ae\u7ec4\u5143\u7d20\u5bf9\u8c61 |
singleSelect | boolean | false | \u5355\u9009\u6a21\u5f0f |
\u6309\u94ae\u7ec4\u5143\u7d20\u5bf9\u8c61\u7684\u5173\u952e keys:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u7ec4\u7ec4\u4ef6 <ui-segmented-button> |
Name | Type | Description |
---|---|---|
change | function(selectedIndex: array | number) | \u6309\u94ae\u7ec4\u72b6\u6001\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(index: number) | \u70b9\u51fb\u6309\u94ae\u7ec4\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6309\u94ae\u7ec4\u72b6\u6001\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-segmented-buttons v-model="selectedIndex"></ui-segmented-buttons>\n
\u624b\u52a8
<ui-segmented-buttons\n :model="selectedIndex"\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-segmented-buttons>\n
<ui-fab><!-- Icon --></ui-fab>\n\n<ui-fab extended><!-- Text label --></ui-fab>\n
<ui-fab>
\u7c7b\u578b
0
: 'regular'
1
: 'extended'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u6d6e\u52a8\u6309\u94ae\u7c7b\u578b |
extended | boolean | false | \u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u3002\u5c06\u6d6e\u52a8\u6309\u94ae\u4fee\u6539\u4e3a\u66f4\u5927\u7684\u5c3a\u5bf8\uff0c\u5305\u62ec\u6587\u672c\u6807\u7b7e\u3002 |
icon | string | '' | \u8bbe\u7f6e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
mini | boolean | false | \u8ff7\u4f60\u6d6e\u52a8\u6309\u94ae |
exited | boolean | false | \u5bf9\u6d6e\u52a8\u6309\u94ae\u8fdb\u884c\u52a8\u753b\u5904\u7406 |
Name | Props | Description |
---|---|---|
default | iconClass | default \u63d2\u69fd\u5305\u542b\u6d6e\u52a8\u6309\u94ae\u6587\u5b57\u6216\u56fe\u6807 |
before | iconClass | \u81ea\u5b9a\u4e49\u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u7684\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u7684\u5c3e\u56fe\u6807 |
\u63d0\u793a\uff1a\u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u7684 default \u63d2\u69fd\u6ca1\u6709
slot-scope
<ui-fab>\n <template #default="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-fab>\n\n<ui-fab extended>\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n Text label\n</ui-fab>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u6d6e\u52a8\u6309\u94ae\u65f6\u89e6\u53d1 |
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-switch>` props with default value.\n UiSwitch: {\n // some props\n }\n});\n
'},FArz:function(t,e){t.exports='<ui-list :type="2" avatar>\n <template v-for="(item, index) in items">\n <ui-item-divider v-if="item === '-'" :key="index"></ui-item-divider>\n <ui-item v-else :key="index">\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">folder</ui-icon>\n </template>\n <ui-item-text-content>\n <ui-item-text1>{{ item.text }}</ui-item-text1>\n <ui-item-text2>{{ item.subtext }}</ui-item-text2>\n </ui-item-text-content>\n <ui-item-last-content>\n <ui-icon>info</ui-icon>\n </ui-item-last-content>\n </ui-item>\n </template>\n</ui-list>\n
'},"FCS/":function(t,e){t.exports='/* Included `elevation.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/directives/elevation/elevation';\n
import Vue from 'vue';\nimport vElevation from 'balm-ui/directives/elevation';\n\nVue.directive(vElevation.name, vElevation);\n
'},FKpq:function(t,e){t.exports='<ui-form-field>\n <ui-checkbox v-model="checked" input-id="checkbox"></ui-checkbox>\n <label for="checkbox">{{checked}}</label>\n</ui-form-field>\n
export default {\n data() {\n return {\n checked: false\n };\n }\n};\n
'},FME5:function(t,e){t.exports='<section>\n <ui-select v-model="selected">\n Food Group\n </ui-select>\n</section>\n
export default {\n data() {\n return {\n selected: 'fruit-roll-ups'\n };\n }\n};\n
'},FQyl:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-spinner>` props with default value.\n UiSpinner: {\n // some props\n }\n});\n
'},FUGW:function(t,e){t.exports='<ui-card class="demo-card demo-card--photo">\n <ui-card-content class="demo-card__primary-action">\n <ui-card-media square class="demo-card__media">\n <ui-card-media-content class="demo-card__media-content--with-title">\n <div :class="[$tt('subtitle2'), 'demo-card__media-title']">\n Vacation Photos\n </div>\n </ui-card-media-content>\n </ui-card-media>\n </ui-card-content>\n <ui-card-actions>\n <ui-card-icons>\n <ui-icon-button :toggle="icon1"></ui-icon-button>\n <ui-icon-button :toggle="icon2"></ui-icon-button>\n <ui-icon-button icon="share"></ui-icon-button>\n </ui-card-icons>\n </ui-card-actions>\n</ui-card>\n
export default {\n data() {\n return {\n icon1: {\n on: 'favorite',\n off: 'favorite_border'\n },\n icon2: {\n on: 'bookmark',\n off: 'bookmark_border'\n }\n };\n }\n};\n
.demo-card {\n width: 350px;\n margin: 48px;\n}\n\n.demo-card--photo {\n width: 200px;\n}\n\n.demo-card__media {\n background-image: url('../images/1-1.jpg');\n}\n\n.demo-card__media-content--with-title {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n}\n\n.demo-card__media-title {\n padding: 8px 16px;\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 0, 0, 0.5) 100%\n );\n color: white;\n}\n
'},Fd0s:function(t,e){t.exports='<ui-button raised @click="$toast('gg')">Show Toast</ui-button>\n
'},"Fl+1":function(t,e){t.exports='A divider is a thin line that groups content in lists and layouts.
'},FlZy:function(t,e){t.exports='<ui-chips v-model="selectedValue" type="choice" :options="options"></ui-chips>\n
export default {\n data() {\n return {\n selectedValue: 3,\n options: [\n {\n label: 'Extra Small',\n value: 1\n },\n {\n label: 'Small',\n value: 2\n },\n {\n label: 'Medium',\n value: 3\n },\n {\n label: 'Large',\n value: 4\n },\n {\n label: 'Extra Large',\n value: 5\n }\n ]\n };\n }\n};\n
'},Floz:function(t,e){t.exports='<ui-form-field>\n <ui-checkbox></ui-checkbox>\n <label>Checkbox</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean, array | false | \u590d\u9009\u6846\u503c |
indeterminate | boolean | false | \u4e0d\u786e\u5b9a\u72b6\u6001 |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
value | string, number | '' | \u539f\u751f <input> \u7684 value \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
attrs | object | {} | <input> \u7684\u5176\u4ed6\u5c5e\u6027 |
Name | Type | Description |
---|---|---|
change | function(value: boolean|array) | \u590d\u9009\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u590d\u9009\u6846\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-checkbox v-model="value"></ui-checkbox>\n
\u624b\u52a8
<ui-checkbox\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-checkbox>\n
<div v-tooltip="'Tips text'" aria-describedby="tooltip-id">Text</div>\n
'},Fxvw:function(t,e){t.exports='<ui-card-actions><!-- card actions area --></ui-card-actions>\n
Name | Type | Default | Description |
---|---|---|---|
fullBleed | boolean | false | Removes the action area's padding and causes its only child (a mdc-card__action element) to consume 100% of the action area's width |
Name | Props | Description |
---|---|---|
default | The default slot holds the card actions parent components. |
Child components:
<ui-card-buttons>
<ui-card-icons>
<ui-rangepicker></ui-rangepicker>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | Styles the rangepicker as an outlined text field. (labels or placeholders required) | |
model (v-model ) | array | '' | Mandatory. | |
disabled | boolean | false | Styles the rangepicker as a disabled text field. | |
labels | array | [] | A text caption or description for the rangepicker, which use the start and end input's placeholder attribute instead. | |
placeholders | array | [] | The placeholder attribute of the start and end <input> . | |
config | object | {} | See Flatpickr configuration. | |
disableRangePlugin | boolean | false | Disables the flatpickr rangePlugin and use two <ui-datepicker> instead. | 8.58.0 |
Name | Props | Description |
---|---|---|
separator | The custom separator. |
Name | Type | Description |
---|---|---|
change | function(value: array) | Emits when the rangepicker value is changed. |
NOTE: If you are not using
v-model
, you should listen for the rangepicker using@change
and update themodel
prop.
Automatic
<ui-rangepicker v-model="value"></ui-rangepicker>\n
Manual
<ui-rangepicker\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-rangepicker>\n
// `/path/to/app/scripts/store/index.js`\nimport demo from './demo';\n\nexport default {\n mixins: [demo]\n};\n
// `/path/to/app/scripts/store/demo.js`\nexport default {\n data() {\n return {\n demoMenu: []\n };\n },\n methods: {\n async getDemoMenu() {\n this.demoMenu = await this.$http.get('/api/get-menu');\n }\n }\n};\n
// `/path/to/awesome.vue`\n\nexport default {\n async created() {\n await this.$store.getDemoMenu();\n console.log(this.$store.demoMenu);\n }\n};\n
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $store
New in 8.19.0
// `/path/to/awesome.js`\n\nimport { useStore } from 'balm-ui';\n// OR\n// import { useStore } from 'balm-ui/plugins/store';\n\nconst $store = useStore();\nconsole.log($store.demoMenu);\n
'},GHv9:function(t,e){t.exports='<ui-segmented-button></ui-segmented-button>\n
Name | Type | Default | Description |
---|---|---|---|
selected | boolean | false | \u8bbe\u7f6e\u9009\u4e2d\u72b6\u6001\u6837\u5f0f |
text | string | '' | \u6309\u94ae\u6587\u5b57 |
icon | string | '' | \u6309\u94ae\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u6587\u5b57\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u6309\u94ae\u65f6\u89e6\u53d1 |
<div v-anchor></div>\n
v-anchor.bodyElement
: custom html contianer (Default contianer is <html>
)v-anchor.html
: for html (e.g. markdown)v-anchor.offset="offsetValue"
: set offset for scrollTop (Use data-vanchor-offset
in <html>
or custom contianer)offsetValue is a number
<html data-vanchor-offset="64">\n <!-- Anchors & Targets -->\n</html>\n\n<!-- OR -->\n\n<div class="container" v-anchor.offset="64">\n <!-- Anchors & Targets -->\n</div>\n
v-anchor:href
v-anchor:id
<div v-anchor:href="'#target1'">Anchor 1</div>\n<div v-anchor:href="'#target2'">Anchor 2</div>\n\n<div v-anchor:id="'target1'">Target 1</div>\n<div v-anchor:id="'target2'">Target 2</div>\n
class="v-anchor" data-href="selector"
id
or unique class
attribute<div v-anchor.html>\n <div class="v-anchor" data-href="#target1">Anchor 1</div>\n <div class="v-anchor" data-href="#target2">Anchor 2</div>\n\n <div id="target1">Target 3</div>\n <div id="target2">Target 4</div>\n</div>\n
'},GLjc:function(t,e){t.exports='\u9ed8\u8ba4\u7528\u6cd5
import { types } from 'balm-ui';\n
\u72ec\u7acb\u7528\u6cd5
import types from 'balm-ui/utils/types';\n
\u65b9\u6cd5
types.getType(any): string;\n\ntypes.isUndefined(value): boolean;\ntypes.isNull(value): boolean;\ntypes.isBoolean(value): boolean;\ntypes.isNumber(value): boolean;\ntypes.isString(value): boolean;\ntypes.isSymbol(value): boolean;\ntypes.isObject(value): boolean;\ntypes.isArray(value): boolean;\ntypes.isFunction(value): boolean;\n
\u9ed8\u8ba4\u7528\u6cd5
import { helpers } from 'balm-ui';\n
\u72ec\u7acb\u7528\u6cd5
import helpers from 'balm-ui/utils/helpers';\n
\u65b9\u6cd5
helpers.isEmpty(value): boolean;\n\nhelpers.jsonEqual(jsonA, jsonB): boolean; // \u5c5e\u6027\u7684\u987a\u5e8f\u5f88\u91cd\u8981\nhelpers.isDeepEqual(obj1, obj2): boolean;\n\n// New in 6.7.0\nhelpers.merge(target: object, source: object): object;\nhelpers.merge.all(arrayOfObjects: object[]): object;\n\n// New in 8.38.0\nhelpers.toCamelCase(str: string): string;\nhelpers.toCapitalize(str: string): string;\n
isEmpty
\u4ee5\u4e0b\u503c\u88ab\u8ba4\u4e3a\u662f\u7a7a\u503c\uff1aundefined
null
false
0
''
'0'
{}
[]
map
or set
\u9ed8\u8ba4\u7528\u6cd5
import { detectIE } from 'balm-ui';\n
\u72ec\u7acb\u7528\u6cd5
import detectIE from 'balm-ui/utils/ie';\n
\u65b9\u6cd5
detectIE(): string | false;\n
IE \u6d4f\u89c8\u5668\u8fd4\u56de\u7248\u672c\u53f7\uff0c\u5176\u4ed6\u6d4f\u89c8\u5668\u8fd4\u56de
false
New in 8.62.0
\u9ed8\u8ba4\u7528\u6cd5
import { ban } from 'balm-ui';\n
\u72ec\u7acb\u7528\u6cd5
import ban from 'balm-ui/utils/ban';\n
\u65b9\u6cd5
ban(): void;\n
'},GMD9:function(t,e){t.exports='import Vue from 'vue';\nimport $event from 'balm-ui/plugins/event';\n\nVue.use($event);\n
'},GNMz:function(t,e){t.exports='\u26a0\ufe0f The
deprecated
path is required inbalm-ui
>= 8.42.0
@use '@material/switch/deprecated/variables' with (\n $track-width: 36px,\n $track-height: 14px,\n $thumb-diameter: 20px,\n $ripple-size: 48px,\n\n $minimum-size: 28px,\n $maximum-size: $ripple-size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n minimum: $minimum-size,\n default: $maximum-size,\n maximum: $maximum-size,\n ),\n ),\n\n $thumb-active-margin: $track-width - $thumb-diameter,\n\n $toggled-off-thumb-color: surface,\n $toggled-off-track-color: on-surface,\n $toggled-off-ripple-color: #9e9e9e,\n $disabled-thumb-color: surface,\n $disabled-track-color: on-surface,\n\n $baseline-theme-color: secondary\n);\n
'},GcAE:function(t,e){t.exports='<ui-bottom-navigation>\n <!-- <ui-tabs> or <ui-tab-bar> component -->\n</ui-bottom-navigation>\n
Name | Type | Default | Description |
---|---|---|---|
contentSelector | string | (required) | Mandatory. Selector used to style the content above the bottom navigation, to prevent the bottom navigation from covering it. |
stacked | boolean | false | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally. |
min | boolean | false | Show 3 navigation items. |
max | boolean | false | Show 5 navigation items. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/picker/picker';\n@use 'balm-ui/components/datepicker/datepicker';\n
import Vue from 'vue';\nimport UiDatepicker from 'balm-ui/components/datepicker';\n\n// Optional. Overwrite `<ui-datepicker>` props with default value.\nVue.use(UiDatepicker, {\n // some props\n});\n
'},Gktk:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-snackbar>` props with default value.\n UiSnackbar: {\n // some props\n }\n});\n
'},GkzM:function(t,e){t.exports='<ui-icon-button></ui-icon-button>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean | false | Sets the toggle state. |
icon | string | '' | A material icon of the icon button. See Material Icons list. |
toggle | object | {} | Two material icons of the toggle button. See Material Icons list. |
Configuring the toggle button states by toggle.on
and toggle.off
props
interface IconButton {\n toggle: {\n on: string;\n off: string;\n };\n}\n
Name | Props | Description |
---|---|---|
default | onClass , offClass | The default slot holds the toggle or link custom icons and can contain HTML. |
<template #default="{ onClass, offClass }">\n <i :class="onClass">ON</i>\n <i :class="offClass">OFF</i>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the icon button is clicked. |
change | function(value: boolean) | Emits when the icon button is toggled. |
NOTE: If you are not using
v-model
, you should listen for the icon button using@change
and update themodel
prop.
Automatic
<ui-icon-button v-model="value"></ui-icon-button>\n
Manual
<ui-icon-button\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-icon-button>\n
<ui-button raised @click="$balmUI.onShow('open')">Open dialog</ui-button>\n\n<ui-dialog v-model="open">\n <ui-dialog-content>\n Dialog content\n </ui-dialog-content>\n <ui-dialog-actions>\n <ui-button @click="$balmUI.onHide('open')">Close dialog</ui-button>\n </ui-dialog-actions>\n</ui-dialog>\n
export default {\n data() {\n return {\n open: false\n };\n }\n};\n
'},H8iH:function(t,e){t.exports='<ui-skeleton><!-- (the loaded data) --></ui-skeleton>\n
Name | Type | Default | Description |
---|---|---|---|
loading | boolean | true | \u663e\u793a\u9aa8\u67b6\u5c4f |
active | boolean | false | \u663e\u793a\u52a8\u753b\u6548\u679c |
avatar | boolean, object | false | \u663e\u793a\u5934\u50cf\u5360\u4f4d\u7b26 |
title | boolean, object | true | \u663e\u793a\u6807\u9898\u5360\u4f4d\u7b26 |
paragraph | boolean, object | true | \u663e\u793a\u5185\u5bb9\u5360\u4f4d\u7b26 |
interface Skeleton {\n avatar: {\n size: 'large' | 'small' | number; // \u8bbe\u7f6e\u5934\u50cf\u5c3a\u5bf8\n shape: 'circle' | 'square'; // \u8bbe\u7f6e\u5934\u50cf\u5f62\u72b6\n };\n title: {\n width: string; // \u8bbe\u7f6e\u6807\u9898\u5bbd\u5ea6\n };\n paragraph: {\n width: string; // \u8bbe\u7f6e\u5185\u5bb9\u5bbd\u5ea6\n rows: number; // \u8bbe\u7f6e\u5185\u5bb9\u884c\u6570\n };\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u4efb\u610f\u7ec4\u4ef6\u53ca HTML |
'},Hf7S:function(t,e){t.exports='New in 8.29.0
<ui-textfield-helper><!-- the helper text --></ui-textfield-helper>\n
Name | Type | Default | Description |
---|---|---|---|
validMsg (v-model ) | string, boolean | false | \u9a8c\u8bc1\u6d88\u606f\u6587\u672c |
id | string | null | \u5fc5\u586b\uff08\u53ef\u5bf9\u5e94\u5339\u914d <ui-textfield> \u7684 helperTextId \u5c5e\u6027\uff09 |
visible | boolean | false | \u4f7f\u5e2e\u52a9\u6587\u672c\u6c38\u8fdc\u53ef\u89c1 |
withCounter | boolean | false | \u542f\u7528\u8ba1\u6570\u5668\uff08\u9700\u8981\u914d\u7f6e <ui-textfield> \u7684 maxlength \u5c5e\u6027\uff09 |
\u63d0\u793a\uff1a\u8bf7\u4e0d\u8981\u5728
<ui-textfield>
\u548c\u542f\u7528\u8ba1\u6570\u5668\u7684<ui-textfield-helper>
\u4e4b\u524d\u63d2\u5165\u4efb\u4f55\u6807\u7b7e
<!-- Single line text field -->\n<ui-form-field>\n <ui-textfield maxlength="40"></ui-textfield>\n <ui-textfield-helper with-counter></ui-textfield-helper>\n</ui-form-field>\n\n<!-- Single line text field with an internal character counter -->\n<ui-form-field>\n <ui-textfield maxlength="40" with-counter></ui-textfield>\n</ui-form-field>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u5e2e\u52a9\u6587\u5b57\u53ca HTML |
<ui-list-group>\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n</ui-list-group>\n
'},Hjc5:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-radio>` props with default value.\n UiRadio: {\n // some props\n }\n});\n
'},Hn1h:function(t,e){t.exports='<ui-drawer-content><!-- the list of items --></ui-drawer-content>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b router link \u5217\u8868\u53ca HTML |
<ui-tab-bar v-model="active" class="custom-demo">\n <ui-tab\n v-for="(tab, index) in tabs"\n :key="index"\n class="demo-tab custom-tab"\n type="textWithIcon"\n :icon="tab.icon"\n stacked\n content-indicator\n >\n {{ tab.text }}\n <template #indicator>\n <ui-tab-indicator class="custom-tab-indicator"></ui-tab-indicator>\n </template>\n </ui-tab>\n</ui-tab-bar>\n
/* Sass code */\n.demo-tab {\n flex: 0 1 auto;\n}\n\n.custom-tab {\n @include mdc-tab-text-label-color($material-color-blue-300);\n @include mdc-tab-icon-color($material-color-orange-300);\n .custom-tab-indicator {\n @include mdc-tab-indicator-underline-color($material-color-pink-a700);\n @include mdc-tab-indicator-underline-height(5px);\n @include mdc-tab-indicator-underline-top-corner-radius(5px);\n }\n .mdc-tab__ripple {\n @include mdc-states($material-color-pink-100);\n }\n &.mdc-tab--active {\n @include mdc-tab-text-label-color($material-color-blue-900);\n @include mdc-tab-icon-color($material-color-orange-900);\n }\n}\n
'},"Hs+w":function(t,e){t.exports='<ui-fab extended>\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">add</ui-icon>\n </template>\n <span>Create</span>\n</ui-fab>\n\n<ui-fab extended>\n <span>Create</span>\n <template #after="{ iconClass }">\n <ui-icon :class="iconClass">add</ui-icon>\n </template>\n</ui-fab>\n\n<ui-fab extended>Create</ui-fab>\n
'},"I+0z":function(t,e){t.exports='\u6c34\u6ce2\u7eb9\u6548\u679c\u5411\u7ec4\u4ef6\uff08\u6216\u4efb\u4f55\u5143\u7d20\uff09\u63d0\u4f9b\u5b9e\u8d28\u6027\u201c\u58a8\u6c34\u6ce2\u7eb9\u201d\u4ea4\u4e92\u6548\u679c\u3002 \u5b83\u88ab\u8bbe\u8ba1\u4e3a\u9ad8\u6548\uff0c\u65e0\u521b\u4e14\u53ef\u7528\u7684\uff0c\u800c\u65e0\u9700\u5411\u60a8\u7684\u5143\u7d20\u4e2d\u6dfb\u52a0\u4efb\u4f55\u989d\u5916\u7684 DOM\u3002
'},I9yt:function(t,e){t.exports='<h6 :class="$tt('headline6')">Text Label Width-Matching Indicator</h6>\n<div class="example">\n <ui-tab-bar v-model="active">\n <ui-tab v-for="(tab, index) in tabs" :key="index" content-indicator>\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">Text Label with Icon Indicator</h6>\n<div class="example">\n <ui-tab-bar v-model="active">\n <ui-tab v-for="(tab, index) in tabs" :key="index">\n {{ tab.text }}\n <template #indicator>\n <ui-tab-indicator type="icon">{{ tab.indicator }}</ui-tab-indicator>\n </template>\n </ui-tab>\n </ui-tab-bar>\n</div>\n
export default {\n data() {\n return {\n active: 0,\n tabs: [\n {\n text: 'Favorites',\n icon: 'favorite',\n indicator: 'crop_square'\n },\n {\n text: 'Recents',\n icon: 'phone',\n indicator: 'panorama_fish_eye'\n },\n {\n text: 'Nearby',\n icon: 'near_me',\n indicator: 'change_history'\n }\n ]\n };\n }\n};\n
'},IFD9:function(t,e){var o;o=function(){return this}();try{o=o||new Function("return this")()}catch(d){"object"===typeof window&&(o=window)}t.exports=o},IHaU:function(t,e){t.exports='@use '@material/radio/radio-theme' with (\n $ripple-size: 40px,\n $icon-size: 20px,\n $transition-duration: 120ms,\n $ripple-opacity: 0.14,\n $baseline-theme-color: secondary,\n $unchecked-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $disabled-circle-color: rgba(theme-color.prop-value(on-surface), 0.38),\n\n $minimum-size: 28px,\n $maximum-size: $ripple-size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n minimum: $minimum-size,\n default: $ripple-size,\n maximum: $maximum-size,\n ),\n )\n);\n
'},INJ5:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},ISn7:function(t,e){t.exports='<ui-drawer>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item active>Activated link</ui-nav-item>\n <ui-nav-item>Unactivated link</ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n</ui-drawer>\n
Component | Description |
---|---|
<ui-drawer> | Mandatory. |
<ui-drawer-header> | Non-scrollable element that exists at the top of the drawer. |
<ui-drawer-title> | Title text element of the drawer. |
<ui-drawer-subtitle> | Subtitle text element of the drawer. |
<ui-drawer-content> | Scrollable content area of the drawer. |
<ui-drawer-app-content> | Mandatory for <ui-drawer type="dismissible"> only. Sibling element that is resized when the drawer opens/closes. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/spinner/spinner';\n
import Vue from 'vue';\nimport UiSpinner from 'balm-ui/components/spinner';\n\n// Optional. Overwrite `<ui-spinner>` props with default value.\nVue.use(UiSpinner, {\n // some props\n});\n
'},Iz8e:function(t,e){t.exports='Custom global store
// `/path/to/app/scripts/store/index.js`\nexport default {\n // name: 'Store',\n mixins: []\n};\n
<ui-textfield-icon>
@use '@material/textfield/icon' with (\n $icon-size: 24px,\n $dense-icon-size: 20px,\n $touch-target-size: 48px,\n\n $leading-icon-padding-left: 16px,\n $leading-icon-padding-right: 8px,\n $trailing-icon-padding-left: 12px,\n $trailing-icon-padding-right: 12px\n);\n
<ui-textfield>
@use '@material/textfield' with (\n $error: error,\n $disabled-border: rgba(theme-color.prop-value(on-surface), 0.06),\n $disabled-icon: rgba(theme-color.prop-value(on-surface), 0.3),\n $bottom-line-hover: rgba(theme-color.prop-value(on-surface), 0.87),\n $bottom-line-idle: rgba(theme-color.prop-value(on-surface), 0.42),\n $label: rgba(theme-color.prop-value(on-surface), 0.6),\n\n $ink-color: rgba(theme-color.prop-value(on-surface), 0.87),\n $helper-text-color: rgba(theme-color.prop-value(on-surface), 0.6),\n $icon-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $focused-label-color: rgba(theme-color.prop-value(primary), 0.87),\n $placeholder-ink-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $affix-color: rgba(theme-color.prop-value(on-surface), 0.6),\n\n $disabled-label-color: rgba(theme-color.prop-value(on-surface), 0.38),\n $disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38),\n $disabled-placeholder-ink-color: rgba(\n theme-color.prop-value(on-surface),\n 0.38\n ),\n $disabled-helper-text-color: rgba(\n theme-color.prop-value(on-surface),\n 0.38\n ),\n $disabled-affix-color: rgba(theme-color.prop-value(on-surface), 0.38),\n\n $background: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 4%\n ),\n $disabled-background: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 2%\n ),\n $secondary-text: rgba(theme-color.prop-value(on-surface), 0.6),\n\n $outlined-idle-border: rgba(theme-color.prop-value(on-surface), 0.38),\n $outlined-disabled-border: rgba(\n theme-color.prop-value(on-surface),\n 0.06\n ),\n $outlined-hover-border: rgba(theme-color.prop-value(on-surface), 0.87),\n\n $textarea-border: rgba(theme-color.prop-value(on-surface), 0.73),\n $textarea-background: rgba(theme-color.prop-value(surface), 1),\n $textarea-disabled-border-color: rgba(\n theme-color.prop-value(on-surface),\n 0.26\n ),\n // cannot be transparent because multiline textarea input\n // will make text unreadable\n $textarea-disabled-background: rgba(249, 249, 249, 1),\n\n $outlined-stroke-width: 2px,\n $height: 56px,\n $minimum-height: 40px,\n $minimum-height-for-filled-label: 52px,\n $maximum-height: $height,\n $padding-horizontal: 16px,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n $shape-radius: small,\n $label-position-y: floating-label-variables.$position-y,\n $label-offset: 16px,\n $outlined-with-leading-icon-label-position-x: 32px,\n $textarea-outlined-label-position-y: 24.75px, // visually ~4dp from top to baseline\n $textarea-filled-label-position-y: 10.25px, // visually ~20dp from top to label baseline\n $helper-line-padding: 16px,\n $filled-baseline-top: 40px,\n $input-height: 28px,\n $textarea-label-top: 19px, // visually ~32dp from top to label baseline\n $textarea-outlined-label-top: $textarea-label-top -\n notched-outline-variables.$border-width,\n $textarea-line-height: 1.5rem, // 24dp from baseline to baseline\n $textarea-input-handle-margin: 1px,\n // Outlined textarea's first line should be placed at the same position as\n // outlined textfield, and should look identical if it is 1 row. Since textfield\n // is centered and font metrics vary for where the baseline is, the best way to\n // ensure textarea and textfield align is with padding. At 56px height with a\n // 24px line-height, a centered textfield has 16px of top and bottom padding.\n // Textarea should use this to position itself.\n $textarea-outlined-input-margin-top: 16px,\n $textarea-outlined-input-margin-bottom: 16px,\n $textarea-outlined-density-config: (\n margin-top: (\n default: $textarea-outlined-input-margin-top,\n maximum: $textarea-outlined-input-margin-top,\n minimum: $textarea-outlined-input-margin-top - 8,\n ),\n margin-bottom: (\n default: $textarea-outlined-input-margin-bottom,\n maximum: $textarea-outlined-input-margin-bottom,\n minimum: $textarea-outlined-input-margin-bottom - 8,\n ),\n ), // remove 1/2 of scale to -4 for minimum\n $textarea-outlined-label-density-config: (\n top: (\n default: $textarea-outlined-label-top,\n maximum: $textarea-outlined-label-top,\n minimum: $textarea-outlined-label-top - 8,\n ),\n ), // remove 1/2 of scale to -4 for minimum\n $textarea-filled-input-margin-top: 23px, // visually ~40dp from top to baseline\n $textarea-filled-input-margin-bottom: 9px, // visually ~16dp from baseline to bottom\n $textarea-filled-density-config: (\n margin-bottom: (\n default: $textarea-filled-input-margin-bottom,\n maximum: $textarea-filled-input-margin-bottom,\n minimum: $textarea-filled-input-margin-bottom - 4,\n ),\n ), // scale to -1 for minimum\n $textarea-filled-label-density-config: (\n top: (\n default: $textarea-label-top,\n maximum: $textarea-label-top,\n minimum: $textarea-label-top - 2,\n ),\n ), // remove 1/2 of scale to -1 for minimm\n $textarea-filled-no-label-input-margin-top: 16px, // see above explanation for outlined textarea margin\n $textarea-filled-no-label-input-margin-bottom: 16px, // see above explanation for outlined textarea margin\n $textarea-filled-no-label-density-config: (\n margin-top: (\n default: $textarea-filled-no-label-input-margin-top,\n maximum: $textarea-filled-no-label-input-margin-top,\n minimum: $textarea-filled-no-label-input-margin-top - 8,\n ),\n margin-bottom: (\n default: $textarea-filled-no-label-input-margin-bottom,\n maximum: $textarea-filled-no-label-input-margin-bottom,\n minimum: $textarea-filled-no-label-input-margin-bottom - 8,\n ),\n ), // remove 1/2 of scale to -4 for minimum\n $textarea-internal-counter-input-margin-bottom: 2px, // visually ~20dp from baseline to counter baseline\n $textarea-internal-counter-baseline-bottom: 16px,\n // Note that the scale factor is an eyeballed approximation of what's shown in the mocks.\n\n $prefix-padding: 2px,\n $prefix-end-aligned-padding: 12px,\n $suffix-padding: 12px,\n $suffix-end-aligned-padding: 2px\n);\n
'},JRIu:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/confirm/confirm';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport $confirm from 'balm-ui/plugins/confirm';\n\n// Optional. Overwrite `$confirm` options.\nVue.use($confirm, {\n // some options\n});\n
'},"JT/l":function(t,e){t.exports='@use '@material/shape/shape' with (\n // Shape categories\n $small-component-radius: 4px,\n $medium-component-radius: 4px,\n $large-component-radius: 0\n);\n
'},JXzD:function(t,e){t.exports='\u53ef\u4ee5\u6298\u53e0\u548c\u6269\u5c55\u7684\u5185\u5bb9\u533a\u57df\u3002
'},JjHA:function(t,e){t.exports='New in 6.3.0
@use 'balm-ui/components/icon' with (\n $font-path: '../fonts',\n $with-subdir: 0,\n\n $sizes: 18 24 36 48,\n $dark: rgba(0, 0, 0, 0.54),\n $dark-focused: rgba(0, 0, 0, 0.87), // New in 8.26.0\n $dark-inactive: rgba(0, 0, 0, 0.38),\n $light: rgba(255, 255, 255, 0.7),\n $light-focused: rgba(255, 255, 255, 1), // New in 8.26.0\n $light-inactive: rgba(255, 255, 255, 0.5),\n\n $success: #0f9d58,\n $info: #4285f4,\n $warning: #f4b400,\n $error: #db4437\n);\n
'},JlNl:function(t,e){t.exports='// `/path/to/app/scripts/store/index.js`\nimport demo from './demo';\n\nexport default {\n mixins: [demo]\n};\n
// `/path/to/app/scripts/store/demo.js`\nexport default {\n data() {\n return {\n demoMenu: []\n };\n },\n methods: {\n async getDemoMenu() {\n this.demoMenu = await this.$http.get('/api/get-menu');\n }\n }\n};\n
// `/path/to/awesome.vue`\n\nexport default {\n async created() {\n await this.$store.getDemoMenu();\n console.log(this.$store.demoMenu);\n }\n};\n
$store
without .vue
componentNew in 8.19.0
// `/path/to/awesome.js`\n\nimport { useStore } from 'balm-ui';\n// OR\n// import { useStore } from 'balm-ui/plugins/store';\n\nconst $store = useStore();\nconsole.log($store.demoMenu);\n
'},JqhC:function(t,e){t.exports='<ui-chips>\n <ui-chip></ui-chip>\n <!-- more chip -->\n</ui-chips>\n
<ui-chips>
Types
0
: 'action'
1
: 'input'
2
: 'choice'
3
: 'filter'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Chips types. | |
model (v-model ) | string, number, array | '' | Mandatory. Single or multiple selection from a set of options. | |
options | array | [] | An array of options to show to the user. Applicable only for choice or filter chips. | 7.2.0 |
optionFormat | object | { label: 'label', value: 'value' } | Defines the option data format. | 8.42.0 |
chips | array | [] | A set of chips. Applicable only for updating the input chips. |
\u26a0\ufe0f The prop
optionLabel
andoptionValue
is deprecated, useoptionFormat
instead in8.42.0
.
Name | Props | Description |
---|---|---|
default | The default slot holds the chip components and can contain HTML. |
Name | Type | Description |
---|---|---|
change | function(selectedIndex: number|array) | Emits when the chips is changed. |
NOTE: If you are not using
v-model
, you should listen for the chips using@change
and update themodel
prop.
Automatic
<ui-chips v-model="selectedIndex"></ui-chips>\n
Manual
<ui-chips\n :model="selectedIndex"\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-chips>\n
<ui-fab icon="favorite_border"></ui-fab>\n<ui-fab icon="favorite_border" mini></ui-fab>\n\n<ui-fab>\n <template #default="{ iconClass }">\n <svg-logo :class="iconClass"></svg-logo>\n </template>\n</ui-fab>\n<ui-fab mini>\n <template #default="{ iconClass }">\n <svg-logo :class="iconClass"></svg-logo>\n </template>\n</ui-fab>\n
'},JvQi:function(t,e){t.exports='$tt(style)
type TypographyStyle =\n | 'headline1'\n | 'headline2'\n | 'headline3'\n | 'headline4'\n | 'headline5'\n | 'headline6'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption'\n | 'button'\n | 'overline'\n | string;\n\ninterface VueInstance {\n $tt(style: TypographyStyle): string;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | \u6392\u7248\u6837\u5f0f\u540d\u6216\u81ea\u5b9a\u4e49\u6837\u5f0f class |
MDC Web \u9ed8\u8ba4\u63d0\u4f9b\u4e86 13 \u79cd\u6837\u5f0f\uff1a
Style | Description |
---|---|
headline1 | \u6807\u9898 1\uff0c\u5c4f\u5e55\u4e0a\u6700\u5927\u7684\u6587\u672c\uff0c\u4fdd\u7559\u7b80\u77ed\uff0c\u91cd\u8981\u7684\u6587\u672c\u6216\u6570\u5b57 |
headline2 | \u6807\u9898 2 |
headline3 | \u6807\u9898 3 |
headline4 | \u6807\u9898 4 |
headline5 | \u6807\u9898 5 |
headline6 | \u6807\u9898 6 |
subtitle1 | \u526f\u6807\u9898 1\uff0c\u6bd4\u6807\u9898\u5c0f\uff0c\u4fdd\u7559\u7ed9\u957f\u5ea6\u8f83\u77ed\u7684\u4e2d\u5f3a\u8c03\u6587\u5b57 |
subtitle2 | \u526f\u6807\u9898 2 |
body1 | \u4e3b\u4f53\u5185\u5bb9 1\uff0c\u7528\u4e8e\u957f\u7bc7\u5199\u4f5c |
body2 | \u4e3b\u4f53\u5185\u5bb9 2 |
caption | \u6ce8\u91ca\u6587\u5b57 |
button | \u6309\u94ae\u6587\u5b57 |
overline | \u8bf4\u660e\u6587\u5b57 |
\u4f60\u53ef\u4ee5\u5f88\u5bb9\u6613\u4e3a\u4f60\u7684\u9879\u76ee\u91cd\u5199\u6392\u7248\u6837\u5f0f\uff08CSS Classes\uff09
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $tt
New in 8.1.0
import { useTypography } from 'balm-ui';\n// \u6216\n// import { useTypography } from 'balm-ui/plugins/typography';\n\nconst $tt = useTypography();\nconsole.log($tt('custom-style-1'));\n
'},K3Ls:function(t,e){t.exports='<ui-grid><!-- the grid cell --></ui-grid>\n
Name | Type | Default | Description |
---|---|---|---|
fixedColumnWidth | boolean | false | Optional, specifies the grid should have fixed column width. |
position | string | '' | Optional, specifies the alignment of the whole grid. (Grid position: 'left' or 'right' ) |
Name | Props | Description |
---|---|---|
default | The default slot holds <ui-grid-cell> and can contain HTML. |
\u5728\u5f00\u59cb\u4e4b\u524d\uff0c\u60a8\u9700\u8981\u5148\u8bbe\u7f6e\u5f00\u53d1\u73af\u5883\u3002
\u5982\u679c\u60a8\u7684\u8ba1\u7b97\u673a\u4e0a\u5c1a\u672a\u5b89\u88c5 Node.js\xae and npm\uff0c\u8bf7\u5b89\u88c5\u5b83\u4eec\u3002
\u901a\u8fc7\u5728\u7ec8\u7aef/\u63a7\u5236\u53f0\u7a97\u53e3\u4e2d\u8fd0\u884c
node -v
\u548cnpm -v
\u6765\u9a8c\u8bc1\u60a8\u81f3\u5c11\u5728\u8fd0\u884c Node.js 10.13.0 \u6216\u66f4\u9ad8\u7248\u672c\u4ee5\u53ca npm 5.2.0 \u6216\u66f4\u9ad8\u7248\u672c\u3002\u8f83\u65e7\u7684\u7248\u672c\u53ef\u80fd\u4f1a\u4ea7\u751f\u9519\u8bef\uff0c\u6240\u4ee5\u63a8\u8350\u4f7f\u7528\u8f83\u65b0\u7684\u7248\u672c\u3002
\u5de5\u6b32\u5584\u5176\u4e8b\uff0c\u5fc5\u5148\u5229\u5176\u5668\u3002\u597d\u7684\u5de5\u5177\u53ef\u4ee5\u4f7f\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u66f4\u5feb\uff0c\u66f4\u5bb9\u6613\u7ef4\u62a4\u3002
Balm CLI \u662f\u4e00\u4e2a\u547d\u4ee4\u884c\u754c\u9762\u5de5\u5177\uff0c\u7528\u4e8e\u6784\u5efa BalmJS \u9879\u76ee\u3002
**Balm CLI**\uff08BalmJS \u5b98\u65b9\u63a8\u8350\uff09 \u6216 Vue CLI \u6216 \u5176\u4ed6\u5de5\u5177\u94fe \ud83d\ude80
\u4f7f\u7528 Balm CLI \u524d\u9996\u5148\u9700\u8981\u5168\u5c40\u5b89\u88c5 Balm Core \u548c Balm CLI\u3002
yarn global add balm-core balm-cli\n# OR\nnpm install -g balm-core balm-cli\n
\u26a0\ufe0f \u63d0\u793a\uff1a\u5982\u679c\u4f60\u4f7f\u7528 pnpm\uff0c\u8bf7\u4e3a BalmUI \u914d\u7f6e
.npmrc
\u6587\u4ef6
\u628a\u6240\u6709\u4f9d\u8d56\u90fd\u63d0\u5347\u5230 node_modules \u7684\u6839\u76ee\u5f55\uff1a
shamefully-hoist=true\n
\u6216\u8005\u53ea\u63d0\u5347\u5339\u914d\u7684\u4f9d\u8d56\u5305\uff1a
public-hoist-pattern[]="*balm*"\npublic-hoist-pattern[]="*deepmerge*"\npublic-hoist-pattern[]="*flatpickr*"\npublic-hoist-pattern[]="*material-components-web*"\npublic-hoist-pattern[]="@material*"\npublic-hoist-pattern[]="*quill*"\n
\u6253\u5f00\u4e00\u4e2a\u547d\u4ee4\u884c\u7a97\u53e3\u3002
\u6839\u636e\u4ee5\u4e0b\u547d\u4ee4\u751f\u6210\u4e00\u4e2a\u65b0\u9879\u76ee\uff1a
balm init vue#legacy my-project\ncd my-project # Go to the project directory\n
\u5b89\u88c5\u4f9d\u8d56
yarn\n# OR\nnpm install\n
\u5b89\u88c5\u5fc5\u987b\u8981\u7684 npm \u5305\uff0c\u8fd9\u91cc\u53ef\u80fd\u9700\u8981\u4e00\u4e9b\u65f6\u95f4\u3002
\uff08China Only\uff09\u5982\u679c\u201c\u7f51\u7edc\u201d\u4e0d\u79d1\u5b66\uff0c\u8bf7\u8bbe\u7f6e\u6dd8\u5b9d\u6e90
balm-ui
yarn add balm-ui@8\n# OR\nnpm install --save balm-ui@8\n
\u66f4\u65b0 balm.config.js
\u83b7\u53d6 Material Icons \u65e0\u9700\u4e0b\u8f7d\uff08\u6216\u8005\u4e0b\u8f7d\u540e\u89e3\u538b\u81f3 my-project/app/fonts
\uff09
const api = (mix) => {\n if (mix.env.isDev) {\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n
\u7f16\u8f91 my-project/config/balmrc.js
\uff0c\u914d\u7f6e\u4f7f\u7528 Dart Sass
module.exports = {\n styles: {\n extname: 'scss'\n }\n // Other Options...\n};\n
\u7f16\u8f91 my-project/app/styles/global/_vendor.scss
/* import BalmUI styles */\n@use 'balm-ui/dist/balm-ui';\n
\u63a8\u8350\u5728
/path/to/project-name/styles/_vendor.scss
\u4e2d\u4f7f\u7528 Sass\uff0c\u8fd9\u6837\u4f60\u5c06\u80fd\u4f7f\u7528\u5230\u66f4\u591a BalmUI \u7684\u9ad8\u7ea7\u7b80\u4fbf\u7684\u6837\u5f0f\u7ba1\u7406\u65b9\u6848\u3002
\u7f16\u8f91 my-project/app/scripts/main.js
import Vue from 'vue';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n
\u7f16\u8f91 my-project/app/styles/global/_vendor.scss
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n
\u7f16\u8f91 my-project/app/scripts/main.js
import Vue from 'vue';\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\nVue.use(UiButton);\nVue.use($alert);\n
npm run dev\n
\u7f16\u8f91\u4e00\u4e2a vue \u7ec4\u4ef6\uff1amy-project/app/scripts/views/components/hello.vue
<template>\n <div class="hello">\n ...\n <!-- Add a test button -->\n <ui-button icon="add" @click="$alert('Hello BalmUI')">Click Me</ui-button>\n </div>\n</template>\n
npm run prod\n
vue create my-project\ncd my-project\n
balm-ui
yarn add balm-ui@8\n# OR\nnpm install --save balm-ui@8\n
\u7f16\u8f91 my-project/vue.config.js
module.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')\n // .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');\n // }\n};\n
\u7f16\u8f91 my-project/src/main.js
import Vue from 'vue';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\nimport 'balm-ui-css';\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n
<script>
\u5f15\u7528<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Hello BalmUI</title>\n <link\n rel="stylesheet"\n href="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui.css"\n />\n </head>\n <body>\n <div id="app">\n <ui-button @click="$alert(message)" icon="add">SayHi</ui-button>\n </div>\n <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>\n <script src="https://cdn.jsdelivr.net/npm/balm-ui"></script>\n <script src="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui-plus.js"></script>\n <script>\n new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
\u6109\u5feb\u7684\u201c\u7801\u201d\u8d77\u6765 \ud83d\udc7b
'},"KHd+":function(t,e,o){"use strict";function d(t,e,o,d,n,l,a,i){var c,r="function"===typeof t?t.options:t;if(e&&(r.render=e,r.staticRenderFns=o,r._compiled=!0),d&&(r.functional=!0),l&&(r._scopeId="data-v-"+l),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},r._ssrRegister=c):n&&(c=i?function(){n.call(this,(r.functional?this.parent:this).$root.$options.shadowRoot)}:n),c)if(r.functional){r._injectStyles=c;var s=r.render;r.render=function(t,e){return c.call(e),s(t,e)}}else{var u=r.beforeCreate;r.beforeCreate=u?[].concat(u,c):[c]}return{exports:t,options:r}}o.d(e,"a",(function(){return d}))},KMbe:function(t,e){t.exports='<div class="demo-container">\n <!-- App bar -->\n <ui-top-app-bar\n class="demo-app-bar"\n content-selector=".demo-content"\n :nav-icon="false"\n >\n Title\n </ui-top-app-bar>\n <!-- Content -->\n <div class="demo-content">\n <!-- Drawer -->\n <ui-drawer viewport-height>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>\n Item {{ 0 }}\n </ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- App content -->\n <div class="demo-app-content">\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </div>\n </div>\n</div>\n
.demo-app-content {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n
'},KPZJ:function(t,e){t.exports='<div class="demo-container">\n <!-- Drawer -->\n <ui-drawer type="modal" nav-id="demo-menu">\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>Item {{ 0 }}</ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- Content -->\n <div class="demo-content">\n <!-- App bar -->\n <ui-top-app-bar\n fixed\n class="demo-app-bar"\n content-selector=".demo-app-content"\n nav-id="demo-menu"\n >\n Title\n </ui-top-app-bar>\n <!-- App content -->\n <div class="demo-app-content">\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </div>\n </div>\n</div>\n
'},KVc9:function(t,e){t.exports='<ui-tree></ui-tree>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
selectedNodes (v-model ) | string, number, array | '' | \u9009\u4e2d\u7684\u6811\u8282\u70b9\u952e\u503c | |
filterParentNode | boolean | false | \u9009\u4e2d\u7684\u6811\u8282\u70b9\u952e\u503c\u6392\u9664\u6240\u6709\u7236\u8282\u70b9 | 8.60.0 |
data | array | [] | \u6e90\u6570\u636e | |
dataFormat | object | {} | \u5b9a\u4e49\u6e90\u6570\u636e\u7684\u683c\u5f0f | |
maxLevel | number | 0 | \u8bbe\u7f6e\u52a0\u8f7d\u6811\u8282\u70b9\u7684\u6700\u5927\u5c42\u7ea7 | |
multiple | boolean | false | \u662f\u5426\u652f\u6301\u9009\u5b9a\u7684\u591a\u4e2a\u6811\u8282\u70b9 | |
singleChecked | boolean | false | \u542f\u7528\u6811\u8282\u70b9\u5355\u8282\u70b9\u9009\u62e9\u3002\u4ec5\u9488\u5bf9 multiple \u6811\u8282\u70b9\u6709\u6548\u3002 | 8.42.0 |
loadData | function | null | \u542f\u7528\u5f02\u6b65\u52a0\u8f7d\u6570\u636e | |
autoExpandParent | boolean | false | \u662f\u5426\u81ea\u52a8\u5c55\u5f00\u6839\u7236\u7ea7\u6811\u8282\u70b9 | 8.25.0 |
defaultExpandedKeys | array | [] | \u6307\u5b9a\u9ed8\u8ba4\u5c55\u5f00\u7684\u6811\u8282\u70b9\u7684\u8282\u70b9\u503c | 8.25.0 |
\u9ed8\u8ba4\u6570\u636e\u683c\u5f0f
{\n label: 'label',\n value: 'value', // nodeKey\n children: 'children',\n hasChildren: 'hasChildren',\n isLeaf: 'isLeaf',\n disabled: 'disabled', // New in 8.43.0\n parentKey: 'parentKey' // New in 8.67.0\n}\n
\u5f02\u6b65\u52a0\u8f7d\u6570\u636e
type TreeNodes = { [key: string]: any }[];\n\ninterface Tree {\n loadData(nodeKey: string | number): TreeNodes;\n}\n
\u64cd\u4f5c\u6811\u8282\u70b9 (New in 8.40.0)
<ui-tree ref="tree"></ui-tree>\n
this.$refs.tree.updateNode(type: 'create' | 'update' | 'delete', parentKey: string | number, nodeData: object)\n
Name | Props | Description | Version |
---|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6811\u9876\u90e8\u680f\u5185\u5bb9\u53ca HTML | ||
expand-more-icon | \u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807 | ||
expand-less-icon | \u81ea\u5b9a\u4e49\u6536\u8d77\u56fe\u6807 | ||
before | data | before \u63d2\u69fd\u5305\u542b\u6811\u8282\u70b9\u7684\u81ea\u5b9a\u4e49\u4fe1\u606f\u53ca HTML | 8.41.0 |
title | data | title \u63d2\u69fd\u5305\u542b\u6811\u8282\u70b9\u7684\u6807\u9898\u53ca HTML | |
after | data | after \u63d2\u69fd\u5305\u542b\u6811\u8282\u70b9\u7684\u81ea\u5b9a\u4e49\u52a8\u4f5c\u53ca HTML |
Rename slot
toaction
after
in8.41.0
Name | Type | Description | Version |
---|---|---|---|
change | function(selectedNodes: string | array, selectedEvent: object) | \u6811\u8282\u70b9\u503c\u53d8\u5316\u65f6\u89e6\u53d1 | |
selected | function(selectedNodesData: string | array) | \u6811\u8282\u70b9\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 | 8.42.0 |
8.43.0 \u4e2d
@change
\u4e8b\u4ef6\u65b0\u589eselectedEvent
\u53c2\u6570
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6811\u8282\u70b9\u503c\u5e76\u66f4\u65b0selectedNodes
\u5c5e\u6027
\u81ea\u52a8
<ui-tree v-model="selectedValue"></ui-tree>\n
\u624b\u52a8
<ui-tree\n :selected-nodes="selectedValue"\n @change="$balmUI.onChange('selectedValue', $event)"\n></ui-tree>\n
<ui-form>\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field>\n <label></label>\n <!-- awesome form item 1 -->\n <ui-form-field></ui-form-field>\n </ui-form-field>\n <ui-form-field>\n <label></label>\n <div :class="subitemClass">\n <!-- awesome form item 2 -->\n <ui-form-field></ui-form-field>\n <ui-form-field></ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button></ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
<ui-form>
Types
0
: 'horizontal'
1
: 'vertical'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Form types. | |
itemMarginBottom | number | 0 | Sets the form items margin bottom. | 8.0.0 |
nowrap | boolean | false | Force the <label> text to stay on a single line and ellipse the overflow text. | |
labelTopAligned | boolean | false | Styles the form item with a top vertical-aligned label. | |
labelRightAligned | boolean | false | Styles the form item with a right text-aligned label. | |
labelTopRightAligned | boolean | false | Styles the form item with a top vertical-aligned and right text-aligned label. | 8.18.0 |
labelWidth | number | 0 | Sets the horizontal form items' label width. | 8.0.0 |
labelMarginRight | number | 0 | Sets the horizontal form items' label margin right. | 8.0.0 |
labelMarginBottom | number | 0 | Sets the vertical form items' label margin bottom. | 8.0.0 |
actionAlign | string | 'left' | Sets the form actions align. | 8.18.0 |
labelTopAligned
,labelRightAligned
andlabelTopRightAligned
are applicable only forhorizontal
type form.
interface Form {\n actionAlign: 'left' | 'center' | 'right';\n}\n
Name | Props | Description |
---|---|---|
default | itemClass , subitemClass , actionClass | The default slot holds the form items and can contain HTML. |
'},KbIh:function(t,e,o){"use strict";o.d(e,"b",(function(){return n})),o.d(e,"d",(function(){return l})),o.d(e,"c",(function(){return a})),o.d(e,"a",(function(){return i}));const d=`${o("l0Zm").c}/images/demo/emoji`,n=[[{header:[!1,1,2,3,4,5,6]},{font:[]},{size:[]},{lineheight:[]}],["bold","italic","underline",{color:[]},{background:[]}],[{align:""},{align:"center"},{align:"right"},{align:"justify"}],[{list:"ordered"},{list:"bullet"},{indent:"+1"},{indent:"-1"},"blockquote","emoji"],["link","image","video"],["strike",{script:"super"},{script:"sub"},"divider"],["clean","undo","redo"],["preview"]],l={header:"Headline",font:"Font Famliy",size:"Font Size",lineheight:"Line Height",bold:"Bold",italic:"Italic",underline:"Underline",color:"Text Color",background:"Background Color",align:{default:"Left Align",center:"Center Align",right:"Right Align",justify:"Justify Align"},list:{ordered:"Ordered List",bullet:"Bullet List"},indent:{"+1":"Increase Indent","-1":"Decrease Indent"},blockquote:"Blockquote",emoji:"Emoji"},a={font:["Arial","Arial Black","Comic Sans MS","Courier New","Tahoma","Georgia","Helvetica","Segoe UI","Impact","Times New Roman","Verdana"],size:["8px","9px","10px","11px","12px","13px","14px","16px","18px","24px","36px","48px","60px","72px","96px"],lineheight:["1","1.2","1.5","1.6","1.8","2","2.4","2.8","3","4","5"]},i=[{type:"image",title:"Default",content:[{name:"oo",alt:"\u574f\u7b11",src:`${d}/p_huaixiao.png`},{name:"xx",alt:"\u8214\u5c4f",src:`${d}/p_tian.png`}]},{type:"emoji",title:"Emoji",content:[{name:"smile",value:"\ud83d\ude00"},{name:"cry",value:"\ud83d\ude06"}]},{type:"image",title:"Custom",content:[{name:"yy",alt:"\u795e\u517d",src:`${d}/g_shenshou.gif`},{name:"zz",alt:"\u6d6e\u4e91",src:`${d}/g_fuyun.gif`}]}]},KiVv:function(t,e){t.exports='
itemClass
andsubitemClass
is new in 8.18.0
'},KoAI:function(t,e){t.exports='New in 8.34.0
<ui-icon\n v-tooltip="'Share your content via social media'"\n aria-describedby="tooltip-demo-1"\n>\n share\n</ui-icon>\n
'},KvBT:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-file>` props with default value.\n UiFile: {\n // some props\n }\n});\n
'},KxBV:function(t,e){t.exports='Small status descriptors for UI components.
'},KyaV:function(t,e){t.exports='New in 6.4.1
<ui-tabs :items="tabItems"></ui-tabs>\n
<ui-tab-bar>\n <ui-tab>\n Tab Text\n <template #indicator>\n <ui-tab-indicator></ui-tab-indicator>\n </template>\n </ui-tab>\n</ui-tab-bar>\n\n<ui-panels>\n <ui-panel></ui-panel>\n</ui-panels>\n
Component | Description |
---|---|
<ui-tabs> | The shorthand for <ui-tab-bar> + <ui-tab> . |
<ui-tab-bar> | Tab items container. |
<ui-tab> | Tab item. |
<ui-panels> | Tab panels container. |
<ui-panel> | Tab panel. |
<ui-tab-indicator> | Contains the custom tab indicator content. |
<ui-tab-scroller> | Contains the custom tab scroller content. |
New in 8.1.0
A simpler state management pattern.
'},L3xh:function(t,e){t.exports='@use '@material/card' as card-variables with (\n $action-icon-color: rgba(\n theme-color.prop-value(on-surface),\n theme-color.text-emphasis(medium)\n ),\n $outline-color: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 12%\n ),\n $outline-width: 1px,\n $shape-radius: medium\n);\n
@use 'balm-ui/components/card' with (\n $text-wrapper-padding: 16px\n);\n
'},L4Av:function(t,e){t.exports='<ui-collapse></ui-collapse>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
expanded (v-model ) | boolean | false | \u5c55\u5f00\u72b6\u6001 | |
withIcon | boolean | false | \u542f\u7528\u9ed8\u8ba4\u56fe\u6807 | |
iconEndAligned | boolean | false | \u56fe\u6807\u540e\u7f6e | 8.39.0 |
ripple | boolean, number | false | \u8bbe\u7f6e\u6c34\u6ce2\u7eb9\u6548\u679c |
ripple
\u503c\uff1atrue
: \u9ed8\u8ba4\u989c\u82721
: \u4e3b\u82722
: \u8f85\u8272Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6298\u53e0\u9762\u677f\u5185\u5bb9\u53ca HTML | |
expand-more-icon | \u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807 | |
expand-less-icon | \u81ea\u5b9a\u4e49\u6536\u8d77\u56fe\u6807 |
<ui-button @click="$balmUI.onChange('message', 'Hello BalmUI')">Show message</ui-button>\n<ui-button @click="$balmUI.onChange('message', '')">Clear</ui-button>\n\n<p>{{ message }}</p>\n
export default {\n data() {\n return {\n message: 'No message'\n };\n }\n};\n
'},LJxH:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUI from 'balm-ui';\nimport myStore from './store';\n\nVue.use(BalmUI, {\n $store: myStore\n});\n
'},LREm:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/progress/progress';\n
import Vue from 'vue';\nimport UiProgress from 'balm-ui/components/progress';\n\n// Optional. Overwrite `<ui-progress>` props with default value.\nVue.use(UiProgress, {\n // some props\n});\n
'},LZfM:function(t,e){t.exports='\u6570\u636e\u8868\u663e\u793a\u884c\u548c\u5217\u4e4b\u95f4\u7684\u6570\u636e\u96c6\u3002
'},LiDr:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},Lihi:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-card>` props with default value.\n UiCard: {\n // some props\n },\n // Optional. Overwrite `<ui-card-media>` props with default value.\n UiCardMedia: {\n // some props\n },\n // Optional. Overwrite `<ui-card-actions>` props with default value.\n UiCardActions: {\n // some props\n }\n});\n
'},Lkt4:function(t,e){t.exports='\u6807\u7b7e\u9875\u8de8\u4e0d\u540c\u7684\u5c4f\u5e55\uff0c\u6570\u636e\u96c6\u548c\u5176\u4ed6\u4ea4\u4e92\u6765\u7ec4\u7ec7\u5185\u5bb9\u3002
'},Lr2C:function(t,e){t.exports='@use '@material/icon-button' with (\n $icon-size: 24px,\n\n $size: 48px,\n $minimum-height: 28px,\n $maximum-height: $size,\n $density-scale: variables.$default-scale,\n $density-config: (\n size: (\n default: $size,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n )\n);\n
'},Lrjv:function(t,e){t.exports='Material icons are delightful, beautifully crafted symbols for common actions and items.
'},M42H:function(t,e){t.exports='\u26a0\ufe0f IE11 only supports
filled
mode
Switches toggle the state of a single item on or off. They are the preferred way to adjust settings on mobile.
'},M4qZ:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-menu>` props with default value.\n UiMenu: {\n // some props\n }\n});\n
'},MDzQ:function(t,e){t.exports='<ui-list-group>\n <ui-list-group-subheader>1. Single-line list</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-text-content></ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>2. Two-line list</ui-list-group-subheader>\n <ui-list type="twoLine">\n <ui-item>\n <ui-item-text-content>\n <ui-item-text1></ui-item-text1>\n <ui-item-text2></ui-item-text2>\n </ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>3. Rich List</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-first-content></ui-item-first-content>\n <ui-item-text-content></ui-item-text-content>\n <ui-item-last-content></ui-item-last-content>\n </ui-item>\n </ui-list>\n</ui-list-group>\n
<ui-nav>\n <ui-nav-item active>Activated item</ui-nav-item>\n <ui-nav-item>Unactivated item</ui-nav-item>\n</ui-nav>\n
Component | Description |
---|---|
<ui-list> /<ui-nav> | Mandatory, for the list element. |
<ui-item> /<ui-nav-item> | Mandatory, for the list item element. |
<ui-item-text-content> | Mandatory. Wrapper for list item text content (displayed as middle column of the list item). |
<ui-item-text1> | Optional, primary text for the list item. Should be the child of <ui-item-text-content> . |
<ui-item-text2> | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of <ui-item-text-content> . |
<ui-item-first-content> | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image. |
<ui-item-last-content> | Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image. |
<ui-list-group> | Optional, wrapper around two or more <ui-list> elements to be grouped together. |
<ui-list-group-subheader> | Optional, heading text displayed above each list in a group. |
<ui-list-divider> | Optional, for list divider element. |
<ui-item-divider> | Optional, for list item divider element. |
@use 'balm-ui/components/collapse' with (\n $collapse-margin-bottom: 0,\n $header-margin-bottom: 0,\n $title-padding: 8px 0,\n $icon-width: 24px,\n $icon-margin-right: 8px,\n $content-padding: 8px 0\n);\n
'},MOmG:function(t,e){t.exports='<div v-copy></div>\n
interface Copy {\n text: string;\n success: Function;\n error?: Function;\n}\n
'},MWjS:function(t,e){t.exports='<ui-segmented-buttons\n v-model="checkedValue"\n :items="items"\n></ui-segmented-buttons>\n
const items = [\n {\n icon: 'favorite'\n },\n {\n text: 'Sample Text'\n },\n {\n icon: 'favorite',\n text: 'Sample Text'\n }\n];\n\nexport default {\n data() {\n return {\n items,\n checkedValue: []\n };\n }\n};\n
'},MXKf:function(t,e){t.exports='<ui-collapse v-for="i in 3" :key="i" with-icon ripple>\n <template #toggle>\n <div>Heading {{ i }}</div>\n </template>\n <div>Content {{ i }}</div>\n</ui-collapse>\n
'},MiMs:function(t,e){t.exports='<ui-collapse></ui-collapse>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
expanded (v-model ) | boolean | false | Default expanded state. | |
withIcon | boolean | false | Default icons. | |
iconEndAligned | boolean | false | Styles icon end aligned. | 8.39.0 |
ripple | boolean, number | false | Sets the ripple color. |
ripple
value:true
: default color1
: primary color2
: secondary colorName | Props | Description |
---|---|---|
default | The default slot holds the collapse content and can contain HTML. | |
expand-more-icon | Custom expand more icon. | |
expand-less-icon | Custom expand less icon. |
$confirm(message)
$confirm(options)
interface VueInstance {\n $confirm(options: string | object): Promise<boolean>;\n}\n
Option | Type | Default | Description |
---|---|---|---|
className | string | '' | \u81ea\u5b9a\u4e49\u786e\u8ba4\u6846\u7684 class |
title | string | '' | \u8bbe\u7f6e\u786e\u8ba4\u6846\u7684\u6807\u9898 |
state | string | '' | \u786e\u8ba4\u6846\u72b6\u6001\u56fe\u6807\u7c7b\u578b |
stateOutlined | boolean | false | \u663e\u793a\u8f6e\u5ed3\u72b6\u6001\u56fe\u6807 |
message | string | '' | \u8bbe\u7f6e\u786e\u8ba4\u6846\u7684\u5185\u5bb9 |
raw | boolean | false | \u6e32\u67d3 HTML |
acceptText | string | 'OK' | \u786e\u5b9a\u6309\u94ae\u6587\u672c |
cancelText | string | 'Cancel' | \u53d6\u6d88\u6309\u94ae\u6587\u672c |
callback | function | false | \u70b9\u51fb\u6309\u94ae\u540e\u7684\u4e8b\u4ef6\u5904\u7406 |
interface ConfirmDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
\u7528\u6cd5 1
$confirm({\n message,\n callback(result) {\n // ...\n }\n});\n
\u7528\u6cd5 2\uff08\u63a8\u8350\uff09
$confirm(message).then((result) => {\n // ...\n});\n
result
\u662f\u4e00\u4e2a\u5e03\u5c14\u503c\uff0c\u6307\u793a\u662f\u5426\u9009\u62e9\u4e86\u201c\u786e\u5b9a\u201d\u6216\u201c\u53d6\u6d88\u201d\uff08true
\u8868\u793a\u786e\u5b9a\uff09
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $confirm
New in 8.1.0
import { useConfirm } from 'balm-ui';\n// \u6216\n// import { useConfirm } from 'balm-ui/plugins/confirm';\n\nconst $confirm = useConfirm();\n$confirm('Hello BalmUI');\n
'},Ms13:function(t,e){t.exports='$grid
interface VueInstance {\n set: BalmUIGrid;\n}\n
type GridProperty = 'margin' | 'gutter' | 'column-width';\ntype GridSize = 'desktop' | 'tablet' | 'phone';\n\ninterface BalmUIGrid {\n set(property: GridProperty, size: GridSize, value: string): void;\n}\n
NOTE: If
balm-ui < 8.27.0
, please use$setGrid
instead of$grid.set
.
Param | Type | Default | Description |
---|---|---|---|
property | string | '' | Grid custom property: margin , gutter or column-width . |
size | string | '' | The target platform: desktop , tablet or phone . |
value | string | '' | Grid custom value. |
margin
: the size of the grid margin.gutter
: the size of the gutter between cells.column-width
: the width of the column within the grid.$grid
without .vue
componentNew in 8.1.0
import { useGrid } from 'balm-ui';\n// OR\n// import { useGrid } from 'balm-ui/plugins/grid';\n\nconst $grid = useGrid();\n
'},"MzO+":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/segmented-button/segmented-button';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiSegmentedButtonComponents from 'balm-ui/components/segmented-button';\n\nVue.use(UiSegmentedButtonComponents, {\n // Optional. Overwrite `<ui-segmented-buttons>` props with default value.\n UiSegmentedButtons: {\n // some props\n }\n});\n
'},"N+FQ":function(t,e){t.exports='\u4fa7\u8fb9\u5bfc\u822a\u680f\u63d0\u4f9b\u5bf9\u5e94\u7528\u7a0b\u5e8f\u4e2d\u76ee\u6807\u4f4d\u7f6e\u7684\u8bbf\u95ee\u3002
'},NBsI:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-editor>` props with default value.\n UiEditor: {\n // some props\n }\n});\n
'},NDOf:function(t,e){t.exports='<ui-textfield v-model="value">Label floating above</ui-textfield>\n
export default {\n data() {\n return {\n value: 'Pre-filled value'\n };\n }\n};\n
'},NEef:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-segmented-buttons>` props with default value.\n UiSegmentedButtons: {\n // some props\n }\n});\n
'},NEwY:function(t,e){t.exports='<ui-button @click="showMessage">Show message</ui-button>\n<ui-button @click="clearMessage">Clear</ui-button>\n\n<p>{{ message }}</p>\n
export default {\n data() {\n return {\n message: 'No message'\n };\n },\n methods: {\n showMessage() {\n this.message = 'Hello BalmUI';\n },\n clearMessage() {\n this.message = '';\n }\n }\n};\n
'},NYHy:function(t,e){t.exports='<ui-tab-bar><!-- the tab components --></ui-tab-bar>\n
<ui-tab-bar>
& <ui-tabs>
common PropsName | Type | Default | Description |
---|---|---|---|
active (v-model ) | number | 0 | Mandatory. |
<ui-tab-bar>
SlotsName | Slots | Description |
---|---|---|
default | The default slot holds the tab scroller and tab components and can contain HTML. |
<ui-tab-bar>
& <ui-tabs>
common EventsName | Type | Description |
---|---|---|
change | function(activeIndex: number) | Emits when the tab is changed. |
NOTE: If you are not using
v-model
, you should listen for the tabs using@change
and update theactive
prop.
Automatic
<ui-tab-bar v-model="activeIndex"></ui-tab-bar>\n<!-- OR -->\n<ui-tabs v-model="activeIndex"></ui-tabs>\n
Manual
<ui-tab-bar\n :active="activeIndex"\n @change="$balmUI.onChange('activeIndex', $event)"\n></ui-tab-bar>\n<!-- OR -->\n<ui-tabs\n :active="activeIndex"\n @change="$balmUI.onChange('activeIndex', $event)"\n></ui-tabs>\n
<ui-button raised @click="openDialog">Open dialog</ui-button>\n\n<ui-dialog v-model="open">\n <ui-dialog-content>\n Dialog content\n </ui-dialog-content>\n <ui-dialog-actions>\n <ui-button @click="closeDialog">Close dialog</ui-button>\n </ui-dialog-actions>\n</ui-dialog>\n
export default {\n data() {\n return {\n open: false\n };\n },\n methods: {\n openDialog() {\n this.open = true;\n },\n closeDialog() {\n this.open = false;\n }\n }\n};\n
'},"Np/8":function(t,e){t.exports='<div class="demo-theme-color-section_row">\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Text on background</legend>\n\n <div class="demo-theme-color-group">\n <div :class="['demo-theme-text-row', $theme.getThemeClass('background')]">\n <span\n :class="['demo-theme-text-style', $theme.getTextClass('primary')]"\n >\n Primary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClass('secondary')]"\n >\n Secondary\n </span>\n <span :class="['demo-theme-text-style', $theme.getTextClass('hint')]">\n Hint\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClass('disabled')]"\n >\n Disabled\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClass('icon'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n</div>\n
'},NpoD:function(t,e){t.exports='import Vue from 'vue';\nimport vLongpress from 'balm-ui/directives/longpress';\n\nVue.directive(vLongpress.name, vLongpress);\n
'},Nt5s:function(t,e){t.exports='<ui-bottom-sheet></ui-bottom-sheet>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | Mandatory. |
Name | Props | Description |
---|---|---|
default | The default slot holds the content for the bottom sheet. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the bottom sheet is hidden. |
NOTE: If you are not using
v-model
, you should listen for the bottom sheet using@change
and update theopen
prop.
Automatic
<ui-bottom-sheet v-model="open"></ui-bottom-sheet>\n
Manual
<ui-bottom-sheet\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-bottom-sheet>\n
<ui-autocomplete\n v-model="keywords"\n :source="source"\n placeholder="Try to type"\n></ui-autocomplete>\n
export default {\n data() {\n return {\n keywords: '',\n source: [\n 'ActionScript',\n 'AppleScript',\n 'Asp',\n 'BASIC',\n 'C',\n 'C++',\n 'Clojure',\n 'COBOL',\n 'ColdFusion',\n 'Erlang',\n 'Fortran',\n 'Groovy',\n 'Haskell',\n 'Java',\n 'JavaScript',\n 'Lisp',\n 'Perl',\n 'PHP',\n 'Python',\n 'Ruby',\n 'Scala',\n 'Scheme'\n ]\n };\n }\n};\n
'},NwEw:function(t,e){t.exports='<ui-pagination></ui-pagination>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
page | number | 1 | Current page number. | |
total | number | 0 | The total number of data items. | |
pageSpan | number, boolean | 3 | Display the first N pages of the current page. (MIN VALUE: 3 ) | |
showTotal | boolean | false | Display total info. | |
pageSize | number, array | 10 | The number of data items per page. | |
pageSizeText | string, array | 'Rows per page' | The page size before/after text. | |
ofText | string | 'of' | The page total of text. | 8.47.0 |
unitText | string | '' | The page total unit text. | 8.56.0 |
showJumper | boolean | false | Determine whether you can jump to pages directly. | |
jumperText | string, array | 'Goto' | The jumper before/after text. | |
jumperButtonOutlined | boolean | false | Styles an outlined jumper button. | 8.20.0 |
jumperButtonText | string | '' | The jumper button text. | |
position | string | '' | The pagination position. | |
mini | boolean | false | Whether to use simple mode. |
interface Pagination {\n position: 'left' | 'center' | 'right';\n}\n
Name | Props | Description | Version |
---|---|---|---|
default | currentMinRow , currentMaxRow | The custom page size area. | 8.11.0 |
first | The custom first button icon. | ||
prev | The custom previous button icon. | ||
next | The custom next button icon. | ||
last | The custom last button icon. |
Name | Type | Description |
---|---|---|
change | function(page: number) | Emits when the pagination page is changed. |
NOTE: If you are not using
v-model
, you should listen for the pagination using@change
and update thepage
prop.
Automatic
<ui-pagination v-model="page"></ui-pagination>\n
Manual
<ui-pagination\n :page="page"\n @change="$balmUI.onChange('page', $event)"\n></ui-pagination>\n
<ui-tree></ui-tree>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
selectedNodes (v-model ) | string, number, array | '' | Selected node keys. | |
filterParentNode | boolean | false | Selected node keys excludes all parent nodes. | 8.60.0 |
data | array | [] | The tree data source. | |
dataFormat | object | {} | Defines the tree data source format. | |
maxLevel | number | 0 | Set max level for tree nodes. | |
multiple | boolean | false | Whether to support selected multiple tree nodes. | |
singleChecked | boolean | false | Set single checked. Applicable only for the multiple tree. | 8.42.0 |
loadData | function | null | Load data asynchronously. | |
autoExpandParent | boolean | false | Whether to automatically expand root parent(s) treeNode. | 8.25.0 |
defaultExpandedKeys | array | [] | Specify the node keys of the default expanded treeNodes. | 8.25.0 |
Default data format
{\n label: 'label',\n value: 'value', // nodeKey\n children: 'children',\n hasChildren: 'hasChildren',\n isLeaf: 'isLeaf',\n disabled: 'disabled', // New in 8.43.0\n parentKey: 'parentKey' // New in 8.67.0\n}\n
Load data asynchronously
type TreeNodes = { [key: string]: any }[];\n\ninterface Tree {\n loadData(nodeKey: string | number): TreeNodes;\n}\n
Tree node operations (New in 8.40.0)
<ui-tree ref="tree"></ui-tree>\n
this.$refs.tree.updateNode(type: 'create' | 'update' | 'delete', parentKey: string | number, nodeData: object)\n
Name | Props | Description | Version |
---|---|---|---|
default | The default slot holds the tree top bar content and can contain HTML. | ||
expand-more-icon | The custom expand more icon. | ||
expand-less-icon | The custom expand less icon. | ||
before | data | The before slot holds the tree node custom info and can contain HTML. | 8.41.0 |
title | data | The title slot holds the tree node title and can contain HTML. | |
after | data | The after slot holds the tree node custom actions and can contain HTML. |
Rename slot
toaction
after
in8.41.0
Name | Type | Description | Version |
---|---|---|---|
change | function(selectedNodes: string | array, selectedEvent: object) | Emits when tree node is changed. | |
selected | function(selectedNodesData: string | array) | Emits when tree node is selected. | 8.42.0 |
The
selectedEvent
parameter of@change
event is new in 8.43.0
NOTE: If you are not using
v-model
, you should listen for the tree using@change
and update theselectedNodes
prop.
Automatic
<ui-tree v-model="selectedValue"></ui-tree>\n
Manual
<ui-tree\n :selected-nodes="selectedValue"\n @change="$balmUI.onChange('selectedValue', $event)"\n></ui-tree>\n
Tooltips display informative text when users hover over, focus on, or tap an element.
'},OJ0n:function(t,e){t.exports='New in 8.0.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n $theme: {\n // (Optional) New in 8.38.0, See ThemeColor type in APIs.\n }\n});\n
'},OSKY:function(t,e){t.exports='<ui-table\n v-model="selectedRows"\n fullwidth\n :data="data"\n :thead="thead"\n :tbody="tbody"\n :tfoot="tfoot"\n row-checkbox\n selected-key="id"\n>\n <template #th-dessert>\n Dessert\n <ui-icon v-tooltip="'100g serving'" aria-describedby="th-cell-1">\n error_outline\n </ui-icon>\n </template>\n <template #dessert="{ data }">\n <div class="dessert">{{ data.dessert }}</div>\n </template>\n <template #actions="{ data }">\n <ui-icon @click="show(data)">description</ui-icon>\n <ui-icon @click="show(data)">edit</ui-icon>\n <ui-icon @click="show(data)">delete</ui-icon>\n </template>\n\n <ui-pagination\n v-model="page"\n :total="total"\n show-total\n @change="onPage"\n ></ui-pagination>\n</ui-table>\n
export default {\n data() {\n return {\n data: [],\n thead: [\n {\n value: 'ID',\n sort: 'asc',\n columnId: 'id'\n },\n {\n slot: 'th-dessert',\n class: 'gg',\n sort: 'none',\n columnId: 'dessert'\n },\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)',\n 'Actions',\n ],\n tbody: [\n 'id',\n {\n slot: 'dessert'\n },\n {\n field: 'calories',\n numeric: true,\n class: 'test'\n },\n {\n field: 'fat',\n fn: data => {\n return data.fat.toFixed(1);\n }\n },\n 'carbs',\n {\n field: 'protein',\n class: data => {\n return data.protein > 5 ? 'red' : 'green';\n }\n },\n {\n slot: 'actions'\n }\n ],\n tfoot: [\n {\n field: 'id',\n fnName: 'count'\n },\n null,\n {\n field: 'calories',\n fnName: 'sum',\n align: 'right',\n class: 'test'\n },\n {\n field: 'fat',\n fnName: 'avg'\n },\n {\n field: 'carbs',\n fnName: 'max'\n },\n {\n field: 'protein',\n fnName: 'min'\n }\n ],\n selectedRows: [1, 2, 4],\n page: 1,\n total: 12\n };\n },\n created() {\n let { data } = await this.$http.get('/api/getData');\n this.data = data;\n },\n methods: {\n show(data) {\n console.log(data);\n },\n onPage(page) {\n // your code\n }\n }\n};\n
'},OuUj:function(t,e){t.exports='$toast(message)
$toast(options)
type ToastMessage = string;\n\ninterface ToastOptions {\n className?: string;\n timeoutMs?: number;\n message: ToastMessage;\n position?: 'bottom' | 'center' | 'top';\n}\n\ninterface VueInstance {\n $toast(options: ToastMessage | ToastOptions): Promise<void>;\n}\n
Option | Type | Default | Description | Version |
---|---|---|---|---|
className | string | '' | \u81ea\u5b9a\u4e49\u77ed\u6d88\u606f\u63d0\u793a\u7684 class | |
timeoutMs | number | 2750 | \u81ea\u52a8\u5173\u95ed\u7684\u8d85\u65f6\u65f6\u95f4\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u503c\u5fc5\u987b\u5728 2000 \u548c 3500 \u4e4b\u95f4\uff0c\u5426\u5219\u4f1a\u5f15\u53d1\u9519\u8bef\u3002 | |
message | string | '' | \u77ed\u6d88\u606f\u6587\u672c | |
position | string | 'bottom' | \u77ed\u6d88\u606f\u63d0\u793a\u7684\u4f4d\u7f6e | 8.30.0 |
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $toast
New in 8.1.0
import { useToast } from 'balm-ui';\n// \u6216\n// import { useToast } from 'balm-ui/plugins/toast';\n\nconst $toast = useToast();\n$toast('Hello BalmUI');\n
'},OvnO:function(t,e){t.exports='<ui-menuitem><!-- the menu item child components --></ui-menuitem>\n
Name | Type | Default | Description |
---|---|---|---|
nested | boolean | false | Used to wrap a group of <ui-menuitem> that will represent a selection group. |
item | object | {} | A menu item. |
value | string | null | The menu selected value. |
disabled | boolean | false | To disable an item. |
selected | boolean | false | Used to indicate which element in an item group is selected. |
The keys of a menu item object:
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface MenuItem {\n item: Item;\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the menu item icon component or label text and can contain HTML. |
Child components:
<ui-menuitem-text>
<ui-menuitem-icon>
\u56fe\u6807\u6309\u94ae\uff08\u5207\u6362\u6309\u94ae\uff09\u4f7f\u7528\u6237\u53ea\u9700\u5355\u51fb\u4e00\u4e0b\u5373\u53ef\u6267\u884c\u64cd\u4f5c\u5e76\u505a\u51fa\u9009\u62e9\u3002
'},P3jt:function(t,e){t.exports='<ui-select><!-- the label text --></ui-select>\n
<ui-select>
Types
0
: 'filled'
1
: 'outlined'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Enhanced select types. | |
outlined | boolean | false | Styles the select as an outlined select. (Equivalent to type=1 ) | |
model (v-model ) | string, number | '' | The value of the currently selected option. | |
options | array | [] | An array of options to show to the user. | |
optionFormat | object | { label: 'label', value: 'value' } | Defines the option data format. | 8.42.0 |
defaultLabel | string | '' | Placeholder item label. | |
defaultValue | string, number | '' | Placeholder item value. | |
label | string | '' | A text caption or description for the select. | |
disabled | boolean | false | Styles the select as disabled. | |
required | boolean | false | Styles the select as required. | |
fullwidth | boolean | false | Optional. Styles the select as full width select. | |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. | |
withLeadingIcon | boolean | false | Styles the select as a select with a leading icon. | |
helperTextId | string | null | Required for the id attribute of the <ui-select-helper> . | |
inside | boolean | false | Styles for the overflow inside component (e.g. in <ui-dialog> ) | 8.53.0 |
NOTE:
withLeadingIcon
is only used for (non<ui-select-icon>
) custom leading icon, and generally do not need to be configured.
\u26a0\ufe0f The prop
optionLabel
andoptionValue
is deprecated, useoptionFormat
instead in8.42.0
.
Name | Props | Description | Version |
---|---|---|---|
default | The default slot holds the label for the select. | ||
icon | iconClass | The icon slot holds a custom leading icon. | |
dropdown-icon | Custom dropdown icon. | 6.9.0 |
Name | Type | Description |
---|---|---|
change | function(value: string|number) | Emits when the select value is changed. |
selected | function(option: object) | Emits when an option item is selected. |
NOTE: If you are not using
v-model
, you should listen for the select using@change
and update themodel
prop.
Automatic
<ui-select v-model="value"></ui-select>\n
Manual
<ui-select\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-select>\n
<div v-shadow.transition="[2, 8]">\n <p>Hover over or tap me for a transition</p>\n</div>\n
'},PCa1:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/tree/tree';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/checkbox/checkbox'; // Optional\n
import Vue from 'vue';\nimport UiTree from 'balm-ui/components/tree';\n\n// Optional. Overwrite `<ui-tree>` props with default value.\nVue.use(UiTree, {\n // some props\n});\n
'},PEJA:function(t,e){t.exports='<ui-alert><!-- message --></ui-alert>\n
Name | Type | Default | Description |
---|---|---|---|
state | string | '' | State type. |
stateOutlined | boolean | false | Show outlined state. |
closable | boolean | false | Whether alert can be closed. |
interface Alert {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the message content and can contain HTML. |
<ui-slider v-model="value1"></ui-slider>\n<ui-slider v-model="value2"></ui-slider>\n
export default {\n data() {\n return {\n value1: 50,\n value2: [30, 70]\n };\n }\n};\n
'},PLch:function(t,e){t.exports='<ui-form-field>\n <ui-textfield maxlength="20">\n <template #before>\n <ui-textfield-icon>event</ui-textfield-icon>\n </template>\n Floating Label Text\n <template #after>\n <ui-textfield-icon trailing>delete</ui-textfield-icon>\n </template>\n </ui-textfield>\n <ui-textfield-helper with-counter> Helper message </ui-textfield-helper>\n</ui-form-field>\n
Component | Description |
---|---|
<ui-textfield> | Mandatory. |
<ui-textfield-icon> | Mandatory for leading/trailing icons. |
<ui-textfield-helper> | Styles the container of helper text and character counter elements. |
<ui-table\n :data="data"\n :thead="thead"\n :tbody="tbody"\n :tfoot="tfoot"\n :default-col-width="200"\n :scroll="{ y: 300 }"\n></ui-table>\n
export default {\n data() {\n return {\n thead: [\n 'title1',\n 'title2',\n 'title3',\n 'title4',\n 'title5',\n 'title6',\n 'title7',\n 'title8',\n 'title9',\n 'title10',\n 'title11',\n 'title12'\n ],\n tbody: [\n {\n field: 'a',\n width: 80,\n fixed: 'left'\n },\n {\n field: 'b',\n width: 100\n // fixed: 'left'\n },\n {\n field: 'c',\n width: 100\n },\n {\n field: 'c',\n width: 100\n },\n {\n field: 'c',\n width: 100\n },\n {\n field: 'c'\n },\n {\n field: 'c'\n },\n {\n field: 'c'\n },\n {\n field: 'c'\n },\n {\n field: 'c',\n width: 100\n },\n {\n field: 'b',\n width: 100\n // fixed: 'right'\n },\n {\n field: 'b',\n width: 80,\n fixed: 'right'\n }\n ],\n tfoot: [\n { value: 1 },\n { value: 2 },\n { value: 3 },\n { value: 4 },\n { value: 5 },\n { value: 6 },\n { value: 7 },\n { value: 8 },\n { value: 9 },\n { value: 10 },\n { value: 11 },\n { value: 12 }\n ],\n data: []\n };\n },\n created() {\n this.data = [\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '1' },\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '2' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '3' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '4' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '5' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '6' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '7' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '8' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '9' },\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '10' },\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '11' },\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '12' }\n ];\n }\n};\n
'},PktF:function(t,e){t.exports='<ui-pagination\n v-model="page"\n :total="total"\n show-total\n show-jumper\n></ui-pagination>\n
export default {\n data() {\n return {\n page: 1,\n total: 100\n };\n }\n};\n
'},PlXN:function(t,e){t.exports='@use '@material/top-app-bar' with (\n // Default styles\n $row-height: 64px,\n $title-left-padding: 20px,\n $section-vertical-padding: 8px,\n $section-horizontal-padding: 12px,\n\n $mobile-breakpoint: 599px,\n\n // Default mobile styles\n $mobile-row-height: 56px,\n $mobile-section-padding: 4px,\n\n // Short top app bar\n $short-collapsed-border-radius: 4px,\n $short-collapsed-width: 56px,\n $short-collapsed-right-icon-padding: 12px,\n\n // Prominent styles\n $prominent-row-height: 128px,\n $prominent-title-bottom-padding: 2px,\n\n // Prominent mobile styles\n $prominent-mobile-title-bottom-padding: 6px,\n\n // Dense styles\n $dense-row-height: 48px,\n $dense-section-horizontal-padding: 4px,\n $dense-title-left-padding: 12px,\n\n // Dense & Prominent styles\n $dense-prominent-title-bottom-padding: 9px\n);\n
'},Po75:function(t,e){t.exports='<section :dir="controls.rtl ? 'rtl' : null">\n <ui-textfield\n v-model="value"\n :disabled="controls.disabled"\n :dense="controls.dense"\n :required="controls.required"\n :class="{'demo-text-field-custom-colors': controls.customColor}"\n helper-text-id="my-text-field-helper-text"\n >\n Email Address\n </ui-textfield>\n <ui-textfield-helper\n v-if="controls.helperText"\n id="my-text-field-helper-text"\n :visible="controls.isVisible"\n :valid-msg="controls.isValidMsg"\n >\n Helper Text (possibly validation message)\n </ui-textfield-helper>\n</section>\n
export default {\n data() {\n return {\n value: '',\n controls: {\n disabled: false,\n rtl: false,\n dense: false,\n required: false,\n customColor: false,\n helperText: false,\n isVisible: false,\n isValidMsg: false\n }\n };\n }\n};\n
'},PvR7:function(t,e){t.exports='<ui-grid class="demo-grid max-width">\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n</ui-grid>\n
.demo-grid.max-width {\n max-width: 1280px;\n}\n
'},"Q/ll":function(t,e){t.exports='<ui-card-content>\n <!-- content within actionable area: rich media + additional text content -->\n</ui-card-content>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5185\u5bb9\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-media>
<ui-card-text>
<div>\n <ui-textfield\n v-model="title"\n fullwidth\n placeholder="Subject"\n maxlength="40"\n with-counter\n ></ui-textfield>\n\n <ui-textfield\n v-model="content"\n input-type="textarea"\n fullwidth\n placeholder="Content"\n maxlength="140"\n rows="8"\n ></ui-textfield>\n</div>\n
export default {\n data() {\n return {\n title: '',\n content: ''\n };\n }\n};\n
'},Q9WI:function(t,e){t.exports='<ui-list>\n <ui-item v-for="i in 3" :key="i">\n <ui-item-text-content>Line item</ui-item-text-content>\n <ui-item-last-content>\n <ui-icon>info</ui-icon>\n </ui-item-last-content>\n </ui-item>\n</ui-list>\n
'},QABY:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/side-sheet/side-sheet';\n
import Vue from 'vue';\nimport UiSideSheet from 'balm-ui/components/side-sheet';\n\nVue.use(UiSideSheet);\n
'},"QGU/":function(t,e){t.exports='@use '@material/snackbar' with (\n $fill-color: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 80%\n ),\n $label-ink-color: rgba(\n theme-color.prop-value(surface),\n theme-color.text-emphasis(high)\n ),\n $action-ink-color: #bb86fc,\n $dismiss-ink-color: rgba(\n theme-color.prop-value(surface),\n theme-color.text-emphasis(high)\n ),\n\n $label-type-scale: body2,\n $dismiss-icon-size: 18px,\n $dismiss-button-size: 36px, // New in 8.42.0\n $min-width: 344px,\n $max-width: 672px,\n $mobile-breakpoint: 480px,\n $viewport-margin-narrow: 8px,\n $viewport-margin-wide: 24px,\n $padding: 8px,\n\n $elevation: 6,\n $shape-radius: small, // Key from shape.$category-keywords or CSS length value (e.g., 4px)\n $z-index: 8, // One above `<ui-dialog>`\n\n // These variables need to be kept in sync with the values in constants.js.\n $enter-duration: 150ms,\n $exit-duration: 75ms\n);\n
'},QHM2:function(t,e){t.exports='<ui-textfield v-model="repository.text" outlined :attrs="{ readonly: true }">\n <template #after>\n <ui-textfield-icon v-copy="repository">content_copy</ui-textfield-icon>\n </template>\n</ui-textfield>\n
export default {\n data() {\n return {\n repository: {\n text: 'https://github.com/balmjs/balm-ui',\n success: () => {\n this.$toast('Copied!');\n }\n }\n };\n }\n};\n
'},QKCd:function(t,e){t.exports='$theme
interface VueInstance {\n $theme: BalmUITheme;\n}\n
$theme.primary
$theme.secondary
$theme.background
$theme.surface
$theme.error
$theme.onPrimary
$theme.onSecondary
$theme.onSurface
$theme.onError
interface BalmUITheme {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n error: string;\n onPrimary: string;\n onSecondary: string;\n onSurface: string;\n onError: string;\n}\n
$theme.colors
type ThemeColor = {\n primary?: string;\n secondary?: string;\n background?: string;\n surface?: string;\n error?: string;\n on-primary?: string;\n on-secondary?: string;\n on-surface?: string;\n on-error?: string;\n}\n\ninterface BalmUITheme {\n colors: ThemeColor;\n}\n
$theme.getThemeColor(style)
type ThemeColorStyle =\n | 'primary'\n | 'secondary'\n | 'background'\n | 'surface'\n | 'error'\n | 'on-primary'\n | 'on-secondary'\n | 'on-surface'\n | 'on-error';\n\ninterface BalmUITheme {\n getThemeColor(style: ThemeColorStyle): string;\n}\n
$theme.getThemeClass(style)
type ThemeClassStyle = ThemeColorStyle | 'primary-bg' | 'secondary-bg';\n\ninterface BalmUITheme {\n getThemeClass(style: ThemeClassStyle): string;\n}\n
type TextStyle = 'primary' | 'secondary' | 'hint' | 'disabled' | 'icon';\n\ntype ThemeTone = 'background' | 'light' | 'dark';\n
\u83b7\u53d6\u6587\u5b57\u989c\u8272\u503c/class
interface BalmUITheme {\n getTextColor(style: TextStyle, tone: ThemeTone): string;\n getTextClass(style: TextStyle, tone: ThemeTone): string;\n}\n
\u8bbe\u7f6e\u6587\u5b57\u989c\u8272
interface BalmUITheme {\n setTextColor(style: TextStyle, value: string): void;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | \u6587\u5b57\u6837\u5f0f\u540d |
tone | string | 'background' | \u4e3b\u9898\u8272\u8c03\u540d |
value | string | '' | \u6587\u5b57\u989c\u8272\u503c |
\u83b7\u53d6\u6587\u5b57\u989c\u8272\u503c/class
interface BalmUITheme {\n getTextColorOnLight(style: TextStyle): string;\n getTextClassOnLight(style: TextStyle): string;\n\n getTextColorOnDark(style: TextStyle): string;\n getTextClassOnDark(style: TextStyle): string;\n}\n
\u8bbe\u7f6e\u6587\u5b57\u989c\u8272
interface BalmUITheme {\n setTextColorOnLight(style: TextStyle, value: string): void;\n setTextColorOnDark(style: TextStyle, value: string): void;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | \u6587\u5b57\u6837\u5f0f\u540d |
value | string | '' | \u6587\u5b57\u989c\u8272\u503c |
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $theme
New in 8.1.0
import { useTheme } from 'balm-ui';\n// \u6216\n// import { useTheme } from 'balm-ui/plugins/theme';\n\nconst $theme = useTheme();\n
'},QM0m:function(t,e){t.exports='<ui-rangepicker v-model="date" outlined :labels="['Start Date', 'End Date']">\n <template #separator>-</template>\n</ui-rangepicker>\n
export default {\n data() {\n return {\n date: ['2020-02-12', '2020-03-24']\n };\n }\n};\n
'},QYUg:function(t,e){t.exports='<ui-drawer><!-- the drawer child components --></ui-drawer>\n
<ui-drawer>
Types
0
: 'permanent'
1
: 'dismissible'
2
: 'modal'
NOTE:
<ui-drawer>
(type="permanent"
) has not props and events.<ui-drawer type="dismissible">
and <ui-drawer type="modal">
must be including a <ui-nav>
. And the first <ui-nav-item>
needs to apply activated state in the drawer.Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Drawer types. |
navId | string | null | The external menu button selector. (Please refer to the navId prop of the top app bar) |
open (v-model ) | boolean | false | The drawer toggle state. |
viewportHeight | boolean | false | Viewport full height(100vh ) . |
Name | Props | Description |
---|---|---|
default | The default slot holds the drawer child components. |
Child components:
<ui-drawer-header>
<ui-drawer-content>
Name | Type | Description |
---|---|---|
nav | function(open: boolean) | Emits when the drawer is opened or closed. |
NOTE: If you are not using
v-model
, you should listen for the drawer using@nav
and update theopen
prop.
Automatic
<ui-drawer v-model="open" type="modal"></ui-drawer>\n
Manual
<ui-drawer\n :open="open"\n type="modal"\n @nav="$balmUI.onChange('open', $event)"\n></ui-drawer>\n
NOTE: You can customize the style for your scale classname (mdc-typography--<STYLE>
)
.mdc-typography--custom-style-1 {\n // ...\n}\n\n.mdc-typography--custom-style-2 {\n // ...\n}\n
<ui-grid class="demo-grid">\n <ui-grid-cell class="demo-cell" columns="6">6</ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4">4</ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="2">2</ui-grid-cell>\n</ui-grid>\n
'},QwAn:function(t,e){t.exports='<ui-form item-margin-bottom="10">\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.mobile">Mobile</ui-textfield>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.password" input-type="password">\n Password\n </ui-textfield>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.repassword" input-type="password">\n Repeat Password\n </ui-textfield>\n </ui-form-field>\n <ui-form-field>\n <ui-select\n v-model="formData.gender"\n :options="genderOptions"\n default-label="Unknown"\n >\n Gender\n </ui-select>\n </ui-form-field>\n\n <ui-alert v-if="message" state="error">{{ message }}</ui-alert>\n\n <ui-form-field class="form-item form-actions">\n <ui-button raised @click="submit">Submit</ui-button>\n </ui-form-field>\n</ui-form>\n
const validations = [\n {\n key: 'mobile',\n label: 'Mobile',\n validator: 'required, mobile'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required, password, minRule, maxRule',\n minRule: {\n validate(value) {\n return value.trim().length >= 6;\n },\n message: '%s minLength >= 6'\n },\n maxRule: {\n validate(value) {\n return value.trim().length <= 8;\n },\n message: '%s maxLength <= 8'\n }\n },\n {\n key: 'repassword',\n label: 'Repeat Password',\n validator: 'required, password, repasswordRule',\n repasswordRule: {\n validate(value, data) {\n return value === data.password;\n },\n message: 'repassword !== password'\n }\n },\n {\n key: 'gender',\n label: 'Gender',\n validator: 'required'\n }\n];\n\nconst genderOptions = [\n {\n label: 'Male',\n value: 'M'\n },\n {\n label: 'Female',\n value: 'F'\n }\n];\n\nexport default {\n validations,\n data() {\n return {\n genderOptions,\n formData: {\n mobile: '',\n password: '',\n repassword: '',\n gender: ''\n },\n message: ''\n };\n },\n methods: {\n submit() {\n let result = this.$validate(this.formData);\n let { valid, message } = result;\n this.message = message;\n\n if (valid) {\n console.log('gg');\n }\n }\n }\n};\n
'},QzXa:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},RMlw:function(t,e){t.exports='<ui-textfield-helper><!-- the helper text --></ui-textfield-helper>\n
Name | Type | Default | Description |
---|---|---|---|
validMsg (v-model ) | string, boolean | false | Indicates the helper text is a validation message. |
id | string | null | Mandatory. (Corresponding to the helperTextId prop matching <ui-textfield> ) |
visible | boolean | false | Makes the helper text permanently visible. |
withCounter | boolean | false | Show character counter. (The maxlength prop of <ui-textfield> is required) |
NOTE: Do not insert any tags between
<ui-textfield>
and<ui-textfield-helper>
with counter
<!-- Single line text field -->\n<ui-form-field>\n <ui-textfield maxlength="40"></ui-textfield>\n <ui-textfield-helper with-counter></ui-textfield-helper>\n</ui-form-field>\n\n<!-- Single line text field with an internal character counter -->\n<ui-form-field>\n <ui-textfield maxlength="40" with-counter></ui-textfield>\n</ui-form-field>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the text field helper text and can contain HTML. |
<ui-textfield\n input-type="password"\n required\n pattern=".{8,}"\n helper-text-id="pw-validation-msg"\n :attrs="{autocomplete: 'current-password'}"\n>\n Choose password\n</ui-textfield>\n<ui-textfield-helper id="pw-validation-msg" visible validMsg>\n Must be at least 8 characters long\n</ui-textfield-helper>\n
'},Rfpz:function(t,e){t.exports='<ui-form type="|" item-margin-bottom="16" action-align="center">\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field class="required">\n <label>Input:</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n <ui-form-field>\n <label>Select:</label>\n <ui-select></ui-select>\n </ui-form-field>\n <ui-form-field>\n <label>Checkbox:</label>\n <div :class="subitemClass">\n <ui-form-field v-for="i in 3" :key="i">\n <ui-checkbox :value="i" :input-id="`checkbox-${i}`"></ui-checkbox>\n <label :for="`checkbox-${i}`">Checkbox {{ i }}</label>\n </ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field>\n <label>Radio:</label>\n <div :class="subitemClass">\n <ui-form-field v-for="i in 3" :key="i">\n <ui-radio\n v-model="checkedValue"\n :value="i"\n :input-id="`radio-${i}`"\n ></ui-radio>\n <label :for="`radio-${i}`">Radio {{ i }}</label>\n </ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button raised>Submit</ui-button>\n <ui-button outlined>Cancel</ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
'},Romc:function(t,e){t.exports='<ui-tabs v-model="active">\n <ui-tab>Tab One</ui-tab>\n <ui-tab>Tab Two</ui-tab>\n <ui-tab>Tab Three</ui-tab>\n</ui-tabs>\n\n<ui-panels v-model="active">\n <ui-panel>Panel One</ui-panel>\n <ui-panel>Panel Two</ui-panel>\n <ui-panel>Panel Three</ui-panel>\n</ui-panels>\n
'},RqgS:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/tabs/tabs';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiTabsComponents from 'balm-ui/components/tabs';\n\nVue.use(UiTabsComponents, {\n // Optional. Overwrite `<ui-tabs>` props with default value.\n UiTabs: {\n // some props\n }\n});\n
'},"RvX+":function(t,e){t.exports='<ui-tab-indicator></ui-tab-indicator>\n
Name | Type | Default | Description |
---|---|---|---|
type | string | 'underline' | Mandatory. Indicator type. ['underline', 'icon'] |
fade | boolean | false | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation. |
Name | Props | Description |
---|---|---|
default | The default slot holds the tab indicator icon and can contain HTML. |
'},"S06+":function(t,e){t.exports='NOTE:
underline
type has not slot.
@use '@material/circular-progress' with (\n $color: primary,\n $track-color: transparent,\n\n /// The rotation position of the arcs that corresponds to their fully contracted state\n $base-angle: 135deg,\n /// Amount of circle the arc takes up\n $arc-size: 270deg,\n /// Time it takes to expand and contract arc\n $arc-time: 1333ms,\n /// Time for inactive indicator to disappear\n $shrink-time: 400ms,\n /// How much the start location of the arc should rotate each time; 216 gives\n /// us a 5 pointed star shape (it's 360/5 * 3)\n $arc-start-rotation-interval: 216deg,\n /// The timing function used for the core spinner animations.\n $timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n);\n
@use 'balm-ui/components/spinner' with (\n $fourColors: $blue $red $yellow $green\n);\n
'},S5mR:function(t,e){t.exports='@use 'balm-ui/components/bottom-navigation' with (\n $height: 48px,\n $stacked-height: 72px,\n $color: theme-variables.$primary,\n $fill-color: white,\n $active-fill-color: rgba($color, 0.87),\n);\n
'},S7Po:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-pagination>` props with default value.\n UiPagination: {\n // some props\n }\n});\n
'},S93G:function(t,e){t.exports='\u6309\u94ae\u4f7f\u7528\u6237\u53ea\u9700\u5355\u51fb\u4e00\u4e0b\u5373\u53ef\u6267\u884c\u64cd\u4f5c\u5e76\u505a\u51fa\u9009\u62e9\u3002
'},SBcc:function(t,e){t.exports='<ui-pagination\n v-model="page"\n :total="total"\n show-total\n :page-size="[10, 25, 100]"\n position="left"\n>\n <template #default="{ currentMinRow, currentMaxRow }">\n {{ currentMinRow }} - {{ currentMaxRow }} / {{ total }}\n </template>\n</ui-pagination>\n
export default {\n data() {\n return {\n page: 1,\n total: 500\n };\n }\n};\n
'},SDHC:function(t,e){t.exports='Text fields let users enter and edit text.
'},"SP+S":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/icon-button/icon-button';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiIconButton from 'balm-ui/components/icon-button';\n\n// Optional. Overwrite `<ui-icon-button>` props with default value.\nVue.use(UiIconButton, {\n // some props\n});\n
'},ST7x:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/file/file';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiFile from 'balm-ui/components/file';\n\n// Optional. Overwrite `<ui-file>` props with default value.\nVue.use(UiFile, {\n // some props\n});\n
'},SWCM:function(t,e){t.exports='<ui-editor v-model="content"></ui-editor>\n
'},ScBg:function(t,e){t.exports='Snackbars provide brief messages about app processes at the bottom of the screen.
'},ShmW:function(t,e){t.exports='<ui-card-text><!-- additional text content --></ui-card-text>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u6587\u5b57\u5185\u5bb9\u53ca HTML |
<ui-card><!-- Card contents --></ui-card>\n
Name | Type | Default | Description |
---|---|---|---|
outlined | boolean | false | \u53bb\u9664\u9634\u5f71\u5e76\u663e\u793a\u7ec6\u7ebf\u8f6e\u5ed3 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-content>
<ui-card-actions>
<ui-panels>\n <!-- the panel components -->\n <ui-panel><!-- the panel content --></ui-panel>\n</ui-panels>\n
Name | Type | Default | Description |
---|---|---|---|
active (v-model ) | number | 0 | Mandatory. |
Name | Props | Description |
---|---|---|
default | The default slot holds the panel components and can contain HTML. |
<ui-tabs v-model="active">\n <ui-tab>Tab One</ui-tab>\n <ui-tab>Tab Two</ui-tab>\n <ui-tab>Tab Three</ui-tab>\n</ui-tabs>\n\n<ui-panels v-model="active">\n <ui-panel>Panel One</ui-panel>\n <ui-panel>Panel Two</ui-panel>\n <ui-panel>Panel Three</ui-panel>\n</ui-panels>\n
'},So25:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-slider>` props with default value.\n UiSlider: {\n // some props\n }\n});\n
'},Stad:function(t,e){t.exports='Navigation drawers provide access to destinations in your app.
'},"SvF+":function(t,e){t.exports='BalmUI is a modular and customizable Material Design UI library for Vue.js.
\ud83c\udf89
balm-ui
(v9+) for Vue 3, see material.balmjs.com
We'd love for you to contribute and make BalmUI even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.
We officially support the last two versions of every major browser. Specifically, we test on the following browsers:
<ui-select-helper><!-- the helper text --></ui-select-helper>\n
Name | Type | Default | Description |
---|---|---|---|
validMsg (v-model ) | string, boolean | false | \u9a8c\u8bc1\u6d88\u606f\u6587\u672c |
id | string | null | \u5fc5\u586b\uff08\u53ef\u5bf9\u5e94\u5339\u914d <ui-select> \u7684 helperTextId \u5c5e\u6027\uff09 |
visible | boolean | false | \u4f7f\u5e2e\u52a9\u6587\u672c\u6c38\u8fdc\u53ef\u89c1 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u62e9\u5668\u5e2e\u52a9\u6587\u5b57\u53ca HTML |
<ui-image-item><!-- image and text --></ui-image-item>\n
Name | Type | Default | Description |
---|---|---|---|
image | string | null | Add the src attribute directly to the <img> in the image container. |
bgImage | string | null | Use a <div> instead of <img> element. |
Name | Props | Description |
---|---|---|
default | Optional. Indicates the area within each item containing the supporting text label, if the Image List contains text labels. | |
image | Optional. The image container displays an image list item\u2019s image or illustration. |
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the item is clicked. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/fab/fab';\n@use 'balm-ui/components/icon/icon'; // Recommended\n
import Vue from 'vue';\nimport UiFab from 'balm-ui/components/fab';\n\n// Optional. Overwrite `<ui-fab>` props with default value.\nVue.use(UiFab, {\n // some props\n});\n
'},TEp9:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},Tbpc:function(t,e){t.exports='<ui-tooltip>
\u7c7b\u578b
0
: 'plain'
<div aria-describedby="tooltip-id">Text</div>\n<ui-tooltip id="tooltip-id">Tips content</ui-tooltip>\n
1
: 'rich'
(New in 8.33.0)
<ui-tooltip-anchor>\n <div data-tooltip-id="tooltip-id">Text</div>\n <ui-tooltip id="tooltip-id" rich>Tips content</ui-tooltip>\n</ui-tooltip-anchor>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u6587\u5b57\u63d0\u793a\u7684\u7c7b\u578b | 8.33.0 |
rich | boolean | false | \u53ef\u9009\u3002\u542f\u7528\u5bcc\u6587\u5b57\u63d0\u793a | 8.33.0 |
width | number | 0 | \u81ea\u5b9a\u4e49\u6587\u5b57\u63d0\u793a\u7684\u6700\u5927\u5bbd\u5ea6 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u5b57\u63d0\u793a\u7684\u5185\u5bb9\uff08\u53ef\u5305\u542b HTML\uff09 |
Name | Props | Description |
---|---|---|
title | title \u63d2\u69fd\u5305\u542b\u6587\u5b57\u63d0\u793a\u7684\u6807\u9898\uff08\u53ef\u5305\u542b HTML\uff09 | |
default | linkClass | default \u63d2\u69fd\u5305\u542b\u6587\u5b57\u63d0\u793a\u7684\u5185\u5bb9\uff08\u53ef\u5305\u542b HTML\uff09 |
<ui-grid-cell><!-- the grid cell content --></ui-grid-cell>\n
Name | Type | Default | Description |
---|---|---|---|
nested | boolean | false | \u5f00\u542f\u5d4c\u5957\u6805\u683c\u5e03\u5c40 |
columns | number, object | 4 | \u6307\u5b9a\u5355\u5143\u683c\u8de8\u8d8a\u7684\u5217\u6570 |
order | number | 0 | \u6307\u5b9a\u5355\u5143\u683c\u7684\u987a\u5e8f |
align | string | '' | \u6307\u5b9a\u5355\u5143\u683c\u7684\u5bf9\u9f50\u65b9\u5f0f |
interface GridCell {\n columns: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n order: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n align: 'top' | 'middle' | 'bottom';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5355\u5143\u683c\u5185\u5bb9\u53ca HTML |
\u5f53\u4f60\u7684\u5185\u5bb9\u9700\u8981\u989d\u5916\u7ed3\u6784\u4e14\u5355\u4e2a\u6805\u683c\u5e03\u5c40\u65e0\u6cd5\u652f\u6301\u65f6\uff0c\u53ef\u4ee5\u5c06\u6805\u683c\u5e03\u5c40\u5f7c\u6b64\u5d4c\u5957\u3002 \u5f00\u542f\u5d4c\u5957\u6805\u683c\u5e03\u5c40\uff0c\u8bf7\u4f7f\u7528
<ui-grid-cell nested>
<ui-grid>\n <ui-grid-cell nested>\n <!-- Parent 1 -->\n <ui-grid-cell>Child 1</ui-grid-cell>\n <ui-grid-cell>Child 2</ui-grid-cell>\n <ui-grid-cell>Child 3</ui-grid-cell>\n </ui-grid-cell>\n <ui-grid-cell>Parent 2</ui-grid-cell>\n <ui-grid-cell>Parent 3</ui-grid-cell>\n</ui-grid>\n
'},U2rC:function(t,e){t.exports='<ui-form-field>\n <ui-radio></ui-radio>\n <label>Radio</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | string, number | '' | Mandatory. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
value | string, number | '' | The value attribute of the <input> . |
disabled | boolean | false | Styles the radio button as a disabled radio button. |
attrs | object | {} | Other attributes for <input> . |
Name | Type | Description |
---|---|---|
change | function(value: string|number) | Emits when the radio button is changed. |
NOTE: If you are not using
v-model
, you should listen for the radio using@change
and update themodel
prop.
Automatic
<ui-radio v-model="value"></ui-radio>\n
Manual
<ui-radio\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-radio>\n
\u6d6e\u52a8\u52a8\u4f5c\u6309\u94ae\uff08FAB\uff09\u8868\u793a\u5c4f\u5e55\u7684\u4e3b\u8981\u52a8\u4f5c\u3002
'},U78a:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-progress>` props with default value.\n UiProgress: {\n // some props\n }\n});\n
'},U8ai:function(t,e){t.exports='<ui-form-field>\n <ui-switch></ui-switch>\n <label>Switch</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean | false | \u5f00\u5173\u72b6\u6001 |
trueValue | boolean, number, string | true | \u5f00\u5173\u5f00\u542f\u65f6\u7684\u8fd4\u56de\u503c |
falseValue | boolean, number, string | false | \u5f00\u5173\u5173\u95ed\u65f6\u7684\u8fd4\u56de\u503c |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
attrs | object | {} | <input> \u7684\u5176\u4ed6\u5c5e\u6027 |
Name | Type | Description | Version |
---|---|---|---|
change | function(value: boolean) | \u5f00\u5173\u72b6\u6001\u53d8\u5316\u65f6\u89e6\u53d1 | |
selected | function(value: boolean|string|number) | \u5f00\u5173\u503c\u9009\u4e2d\u65f6\u89e6\u53d1 | 8.46.0 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5f00\u5173\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-switch v-model="value"></ui-switch>\n
\u624b\u52a8
<ui-switch\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-switch>\n
<ui-grid class="demo-grid" fixed-column-width>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n</ui-grid>\n
'},UBkE:function(t,e){t.exports='<ui-editor></ui-editor>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
model (v-model ) | string | '' | \u5bcc\u6587\u672c\u503c | |
options | object | {} | \u8be6\u89c1 Quill options | |
toolbar | array, string | null | \u5bcc\u6587\u672c\u5de5\u5177\u680f\u914d\u7f6e\uff08\u81ea\u5b9a\u4e49\u6216 'full' ) | |
placeholder | string | null | \u5f53\u7f16\u8f91\u5668\u4e3a\u7a7a\u65f6\u663e\u793a\u7684\u5360\u4f4d\u7b26\u6587\u672c | |
readonly | boolean | false | \u53ea\u8bfb\u6a21\u5f0f | |
theme | string | 'snow' | \u4e3b\u9898\u6837\u5f0f | |
toolbarIcons | object | {} | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u56fe\u6807 | 8.6.0 |
toolbarTips | object | {} | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u56fe\u6807\u63d0\u793a\u6587\u672c | 8.8.0 |
toolbarOptions | object | { font: [], size: [], lineheight:[] } | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u7684\u5b57\u4f53\uff0c\u6587\u5b57\u5927\u5c0f\u548c\u884c\u9ad8 | 8.6.0 |
toolbarHandlers | object | {} | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u4e8b\u4ef6\u5904\u7406 | |
customImageHandler | boolean | false | \u542f\u7528\u81ea\u5b9a\u4e49\u56fe\u7247\u4e8b\u4ef6\u5904\u7406 | |
emotions | array | [] | \u8868\u60c5\u6269\u5c55\u3002\u652f\u6301 emoji \u548c image | |
withCounter | boolean | false | \u542f\u7528\u5185\u90e8\u8ba1\u6570\u5668 | 8.6.0 |
extension | false , object | false | \u81ea\u5b9a\u4e49 Quill \u6269\u5c55 |
interface Editor {\n theme: 'bubble' | 'snow';\n}\n
toolbar
\u5c5e\u6027align
/direction
/indent
background
/color
/font
/size
blockquote
/code-block
/header
/list
bold
/italic
/link
/script
/strike
/underline
image
/video
font
/size
/lineheight
: \u81ea\u5b9a\u4e49\u5b57\u4f53\uff0c\u6587\u5b57\u5927\u5c0f\u548c\u884c\u9ad8image
: \u81ea\u5b9a\u4e49\u56fe\u7247\u4e0a\u4f20\u5904\u7406emoji
: \u8868\u60c5\u6a21\u5757divider
: \u6c34\u5e73\u5206\u5272\u7ebftextindent
: \u5185\u8054\u7684\u6587\u672c\u7f29\u8fdb\uff08\u7c7b\u4f3c indent
\uff09linkoff
: \u6e05\u9664\u6240\u6709\u94fe\u63a5counter
: \u8ba1\u6570\u5668\u6a21\u5757undo
/redo
: \u5185\u7f6e\u7684\u64a4\u9500\u548c\u91cd\u505a\u5904\u7406selectall
: \u9009\u4e2d\u5168\u90e8\u5185\u5bb9toolbarOptions
\u548c emotions
\u5168\u5c40\u914d\u7f6e/path/to/app/scripts/config/editor.js
const toolbarTips = {\n header: 'Headline',\n font: 'Font Famliy',\n size: 'Font Size',\n lineheight: 'Line Height',\n bold: 'Bold',\n italic: 'Italic',\n underline: 'Underline',\n color: 'Text Color',\n background: 'Background Color',\n align: {\n default: 'Left Align',\n center: 'Center Align',\n right: 'Right Align',\n justify: 'Justify Align'\n },\n list: {\n ordered: 'Ordered List',\n bullet: 'Bullet List'\n },\n indent: {\n '+1': 'Increase Indent',\n '-1': 'Decrease Indent'\n },\n blockquote: 'Blockquote',\n emoji: 'Emoji'\n};\n\nconst toolbarOptions = {\n // \u81ea\u5b9a\u4e49 Font Family \u9700\u5bf9\u5e94\u914d\u7f6e Sass \u53d8\u91cf `$font-family`\n font: [\n 'Arial',\n 'Arial Black',\n 'Comic Sans MS',\n 'Courier New',\n 'Tahoma',\n 'Georgia',\n 'Helvetica',\n 'Segoe UI',\n 'Impact',\n 'Times New Roman',\n 'Verdana'\n ],\n size: [\n '8px',\n '9px',\n '10px',\n '11px',\n '12px',\n '13px',\n '14px',\n '16px',\n '18px',\n '24px',\n '36px',\n '48px',\n '60px',\n '72px',\n '96px'\n ],\n lineheight: [\n '1',\n '1.2',\n '1.5',\n '1.6',\n '1.8',\n '2',\n '2.4',\n '2.8',\n '3',\n '4',\n '5'\n ]\n};\n\nconst emotions = [\n {\n type: 'image',\n title: 'Default',\n content: [\n {\n name: 'oo',\n alt: '\u574f\u7b11',\n src: 'https://v8.material.balmjs.com/images/emoji/p_huaixiao.png'\n },\n {\n name: 'xx',\n alt: '\u8214\u5c4f',\n src: 'https://v8.material.balmjs.com/images/emoji/p_tian.png'\n }\n ]\n },\n {\n type: 'emoji',\n title: 'emoji',\n content: [\n {\n name: 'smile',\n value: '\ud83d\ude00'\n },\n {\n name: 'cry',\n value: '\ud83d\ude06'\n }\n ]\n },\n {\n type: 'image',\n title: 'Custom',\n content: [\n {\n name: 'yy',\n alt: '\u795e\u517d',\n src: 'https://v8.material.balmjs.com/images/emoji/g_shenshou.gif'\n },\n {\n name: 'zz',\n alt: '\u6d6e\u4e91',\n src: 'https://v8.material.balmjs.com/images/emoji/g_fuyun.gif'\n }\n ]\n }\n];\n\nexport { toolbarTips, toolbarOptions, emotions };\n
/path/to/app/scripts/main.js
import Vue from 'vue';\nimport { toolbarTips, toolbarOptions, emotions } from '@/config/editor';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n UiEditor: {\n toolbarTips,\n toolbarOptions,\n emotions\n }\n});\n
toolbarHandlers
\u5c5e\u6027{\n toolbar: ['customFormat'],\n toolbarHandlers: {\n customFormat: (quill, value) => {};\n }\n}\n
quill.insert(customFormat, value) => {}
: \u5411\u5bcc\u6587\u672c\u63d2\u5165\u5185\u5bb9quill.insert('html', content)
: \u5411\u5bcc\u6587\u672c HTML (New in 8.9.0)<ui-editor ref="editor" v-model="content"></ui-editor>\n
this.$refs.editor.decodeEmoji(content)
: \u83b7\u53d6\u670d\u52a1\u7aef\u6570\u636e \u2192 \u8bbe\u7f6e\u5ba2\u6237\u7aef\u5c55\u793athis.$refs.editor.encodeEmoji(html)
: \u63d0\u4ea4\u5ba2\u6237\u7aef\u6570\u636e \u2192 \u4fdd\u5b58\u670d\u52a1\u7aef\u6570\u636eName | Props | Description |
---|---|---|
toolbar | toolbar \u63d2\u69fd\u5305\u542b\u81ea\u5b9a\u4e49\u5de5\u5177\u6309\u94ae\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(content: string) | \u5bcc\u6587\u672c\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
file-change | function(file, insert) | \u9700\u8981\u914d\u7f6e customImageHandler \uff08\u901a\u8fc7 insert(url) \u65b9\u6cd5\u5411\u5bcc\u6587\u672c\u63d2\u5165\u4e0a\u4f20\u56fe\u7247\uff09 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5bcc\u6587\u672c\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-editor v-model="content"></ui-editor>\n
\u624b\u52a8
<ui-editor\n :model="content"\n @change="$balmUI.onChange('content', $event)"\n></ui-editor>\n
<ui-rangepicker></ui-rangepicker>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder \uff09 | |
model (v-model ) | array | '' | \u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\u503c | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
labels | array | [] | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff | |
placeholders | array | [] | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 | |
config | object | {} | \u8be6\u89c1 Flatpickr configuration | |
disableRangePlugin | boolean | false | \u7981\u7528 flatpickr rangePlugin\uff0c\u4f7f\u7528\u4e24\u4e2a <ui-datepicker> \u4ee3\u66ff | 8.58.0 |
Name | Props | Description |
---|---|---|
separator | \u81ea\u5b9a\u4e49\u5206\u9694\u7b26 |
Name | Type | Description |
---|---|---|
change | function(value: array) | \u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-rangepicker v-model="value"></ui-rangepicker>\n
\u624b\u52a8
<ui-rangepicker\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-rangepicker>\n
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-fab>` props with default value.\n UiFab: {\n // some props\n }\n});\n
'},UJv8:function(t,e){t.exports='<ui-skeleton></ui-skeleton>\n
'},UMkk:function(t,e){t.exports='<ui-button data-tooltip-id="tooltip-demo-2">Hello</ui-button>\n<ui-tooltip-anchor>\n <ui-tooltip id="tooltip-demo-2" rich>\n <template #title>Lorem Ipsum</template>\n <template #default="{ linkClass }">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium\n vitae est et dapibus. Aenean sit amet felis eu lorem fermentum aliquam sit\n amet sit amet eros.\n <a :class="linkClass">link</a>\n </template>\n </ui-tooltip>\n</ui-tooltip-anchor>\n
'},"URY+":function(t,e){t.exports='<div v-shape></div>\n
v-shape="corner"
(medium)v-shape.small="corner"
v-shape.large="corner"
v-shape.cut="corner"
(medium)v-shape.cut.small="corner"
v-shape.cut.large="corner"
Value | Type | Default | Description |
---|---|---|---|
corner | string | '' | \u7528\u4e8e\u906e\u76d6\u7279\u5b9a\u89d2\u843d\u7684\u5143\u7d20\uff1b\u6700\u591a\u53ef\u80fd\u6709 4 \u4e2a\u3002\uff08\u503c\u4e3a\u7a7a\u65f6\u4f7f\u7528 shape sass radius variable\uff09 |
\u8bed\u6cd5\u7c7b\u4f3c CSS
border-radius
\u5c5e\u6027
<!-- The syntax of the first corner allows one to four values -->\n<!-- Radius is set for all 4 sides -->\n<div v-shape="'4px'"></div>\n\n<!-- top-left | bottom-right -->\n<div v-shape="'4px 0'"></div>\n\n<!-- top-right | bottom-left -->\n<div v-shape="'0 4px'"></div>\n\n<!-- top-left -->\n<div v-shape="'4px 0 0'"></div>\n\n<!-- top-left | top-right | bottom-left -->\n<div v-shape="'4px 4px 0'"></div>\n\n<!-- top-left | top-right | bottom-right | bottom-left -->\n<div v-shape="'4px 4px 4px 4px'"></div>\n
'},US97:function(t,e){t.exports='<ui-drawer-content><!-- the list of items --></ui-drawer-content>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the list of items (router link list) and can contain HTML. |
@use '@material/dialog' with (\n $scrim-color: on-surface,\n $title-ink-color: on-surface,\n $content-ink-color: on-surface,\n $scroll-divider-color: on-surface,\n\n $scrim-opacity: 0.32,\n $title-ink-opacity: 0.87,\n $content-ink-opacity: 0.6,\n $scroll-divider-opacity: 0.12,\n\n $min-width: 280px,\n $max-width: 560px,\n $margin: 16px,\n $shape-radius: medium,\n $title-bottom-padding: 9px,\n $actions-padding: 8px,\n $header-side-padding: 16px, // New in 8.21.0\n\n $z-index: 7\n);\n
'},UWRe:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `$alert` options.\n $alert: {\n // some options\n }\n});\n
'},UeG5:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},Ukfz:function(t,e){t.exports='<ui-button raised @click="showAlert">Show Alert</ui-button>\n
export default {\n methods: {\n showAlert() {\n this.$alert({\n message: 'Hello BalmJS',\n state: 'success',\n stateOutlined: true\n });\n }\n }\n};\n
'},Ulpg:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-button>` props with default value.\n UiButton: {\n // some props\n }\n});\n
'},UsKU:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},Ut3z:function(t,e){t.exports='A floating action button (FAB) represents the primary action of a screen.
'},"V/mi":function(t,e){t.exports='<ui-menu-anchor>\n <ui-menu :items="menuItems"></ui-menu>\n</ui-menu-anchor>\n
<ui-menu-anchor>\n <ui-menu>\n <ui-menuitem>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n\n <ui-item-divider></ui-item-divider>\n\n <ui-menuitem nested>\n <ui-menuitem>\n <ui-menuitem-icon>Icon</ui-menuitem-icon>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n </ui-menuitem>\n </ui-menu>\n</ui-menu-anchor>\n
Component | Description |
---|---|
<ui-menu-anchor> | \u83dc\u5355\u951a\u5b9a\u5bb9\u5668\u5143\u7d20 |
<ui-menu> | \u83dc\u5355\u5bb9\u5668\u5143\u7d20 |
<ui-menuitem> | \u83dc\u5355\u9879 |
<ui-menuitem-text> | \u83dc\u5355\u6587\u672c |
<ui-menuitem-icon> | \u83dc\u5355\u56fe\u6807 |
\u9009\u9879\u5361\u662f\u8868\u793a\u8f93\u5165\uff0c\u5c5e\u6027\u6216\u52a8\u4f5c\u7684\u7d27\u51d1\u5143\u7d20\u3002
'},V3IR:function(t,e){t.exports='<div class="fab-motion-container">\n <div class="fab-motion-container__view">\n <p>View one (with FAB)</p>\n </div>\n <div\n class="fab-motion-container__view"\n :class="{'fab-motion-container__view--exited': !exited}"\n >\n <p>View two (without FAB)</p>\n <p>\n <ui-button\n id="enter-exit-back"\n :disabled="!exited"\n @click="$balmUI.onHide('exited')"\n >\n Go back\n </ui-button>\n </p>\n </div>\n <ui-fab\n id="enter-exit-add"\n class="demo-absolute-fab"\n icon="add"\n :exited="exited"\n @click="$balmUI.onShow('exited')"\n >\n add\n </ui-fab>\n</div>\n
export default {\n data() {\n return {\n exited: false\n };\n }\n};\n
.demo-absolute-fab {\n position: absolute;\n z-index: 1;\n right: 1rem;\n bottom: 1rem;\n}\n\n.fab-motion-container {\n position: relative;\n overflow: hidden;\n width: 20rem;\n height: 10rem;\n margin: 1rem;\n padding: 0 1rem;\n border: 1px solid #ccc;\n}\n\n.fab-motion-container__view {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n transition: transform 375ms cubic-bezier(0, 0, 0.2, 1);\n background-color: #fff;\n will-change: transform;\n}\n\n.fab-motion-container__view--exited {\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n transform: translateY(100%);\n}\n
'},"VA/f":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},VAeK:function(t,e){t.exports='<ui-tabs></ui-tabs>\n
<ui-tabs>
PropsName | Type | Default | Description |
---|---|---|---|
items | array | [] | \u8bbe\u7f6e\u6807\u7b7e\u9875\u5bf9\u8c61\u5217\u8868 |
\u6807\u7b7e\u9875\u5bf9\u8c61\u7684 keys:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n
<ui-tabs>
SlotsName | Slots | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u7ec4\u4ef6\u53ca HTML |
<!-- Full syntax -->\n<ui-tab-bar v-model="active">\n <ui-tab\n v-for="(tabItem, tabIndex) in items"\n :key="tabIndex"\n :icon="tabItem.icon"\n >\n {{ tabItem.text }}\n </ui-tab>\n</ui-tab-bar>\n\n<!-- Shorthand -->\n<ui-tabs v-model="active" :items="items"></ui-tabs>\n
'},VBQN:function(t,e){t.exports='<ui-list><!-- <ui-item> --></ui-list>\n\n<ui-nav><!-- <ui-nav-item> --></ui-nav>\n
<ui-list>
Types
1
: 'singleLine'
2
: 'twoLine'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. List types. |
singleSelection | boolean | false | The list can handle selecting/deselecting list elements based on click or keyboard action. |
selectedIndex (v-model ) | number | -1 | The index of the selected list item. Applicable only for the single selection list. |
nonInteractive | boolean | false | Optional, disables interactivity affordances. |
dense | boolean | false | Optional, styles the density of the list, making it appear more compact. |
avatar | boolean | false | Optional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger. |
Name | Slots | Description |
---|---|---|
default | The default slot holds the item components and can contain HTML. |
Name | Type | Description |
---|---|---|
action | function(index: number) | Indicates that a list item with the specified index has been activated. |
NOTE: If you are not using
v-model
, you should listen for the list using@action
and update theselectedIndex
prop.
Automatic
<ui-list v-model="selectedIndex" single-selection></ui-list>\n
Manual
<ui-list\n :selected-index="selectedIndex"\n single-selection\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-list>\n
'},Vo8n:function(t){t.exports=JSON.parse('{"home":{"slogan":"\u66f4\u9ad8\u6548\u5730\u751f\u4ea7\u51fa\u7cbe\u7f8e\u7684\u4ea7\u54c1","title":"BalmUI \u662f\u57fa\u4e8e\u8c37\u6b4c Material Design \u7cfb\u7edf\u4e3a Vue.js \u91cf\u8eab\u5b9a\u5236\u7684 UI \u6846\u67b6\u3002","get-started":"\u8d77\u6b65"},"menu":{"guide":"\u6307\u5357","intro":"\u4ecb\u7ecd","quickstart":"\u5feb\u901f\u5165\u95e8","advanced":"\u8fdb\u9636\u7528\u6cd5","kill-ie":"\u4e07\u6076\u7684 IE","upgrade":"\u5347\u7ea7\u5411\u5bfc","general":"\u901a\u7528","button":"\u6309\u94ae","fab":"\u6d6e\u52a8\u6309\u94ae","icon-button":"\u56fe\u6807\u6309\u94ae","segmented-button":"\u6309\u94ae\u7ec4","layout":"\u5e03\u5c40","top-app-bar":"\u9876\u90e8\u5bfc\u822a\u680f","grid":"\u6805\u683c","form":"\u8868\u5355","divider":"\u5206\u5272\u7ebf","navigation":"\u5bfc\u822a","drawer":"\u4fa7\u8fb9\u5bfc\u822a\u680f","tabs":"\u6807\u7b7e\u9875","menu":"\u83dc\u5355","pagination":"\u5206\u9875","bottom-navigation":"\u5e95\u90e8\u5bfc\u822a\u680f","theme":"\u4e3b\u9898","color":"\u8272\u5f69","typography":"\u6392\u7248","icons":"\u56fe\u6807","shape":"\u5f62\u72b6","data-input":"\u6570\u636e\u5f55\u5165","textfield":"\u6587\u672c\u6846","autocomplete":"\u81ea\u52a8\u5b8c\u6210","editor":"\u5bcc\u6587\u672c","select":"\u9009\u62e9\u5668","checkbox":"\u590d\u9009\u6846","radio":"\u5355\u9009\u6309\u94ae","chips":"\u9009\u9879\u5361","file":"\u6587\u4ef6\u4e0a\u4f20","datepicker":"\u65e5\u671f\u9009\u62e9\u5668","rangepicker":"\u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668","switch":"\u5f00\u5173","slider":"\u6ed1\u52a8\u6761","validator":"\u9a8c\u8bc1\u5668","data-display":"\u6570\u636e\u5c55\u793a","list":"\u5217\u8868","image-list":"\u56fe\u7247\u5217\u8868","lazyload":"\u56fe\u7247\u61d2\u52a0\u8f7d","card":"\u5361\u7247","table":"\u6570\u636e\u8868","collapse":"\u6298\u53e0\u9762\u677f","badge":"\u5fbd\u7ae0","tree":"\u6811","feedback":"\u53cd\u9988","alert":"\u8b66\u544a\u63d0\u793a","dialog":"\u5bf9\u8bdd\u6846","alert-dialog":"\u8b66\u544a\u6846","confirm-dialog":"\u786e\u8ba4\u6846","snackbar":"\u5e95\u90e8\u6d88\u606f\u6846","toast":"\u77ed\u6d88\u606f\u63d0\u793a","banner":"\u6a2a\u5e45","progress":"\u8fdb\u5ea6\u6761","spinner":"\u52a0\u8f7d\u4e2d","skeleton":"\u9aa8\u67b6\u5c4f","tooltip":"\u6587\u5b57\u63d0\u793a","bottom-sheet":"\u5e95\u90e8\u52a8\u4f5c\u8868","side-sheet":"\u4fa7\u8fb9\u52a8\u4f5c\u8868","misc":"\u5176\u4ed6","event":"UI \u5168\u5c40\u4e8b\u4ef6","debounce":"\u9632\u6296","ripple":"\u6c34\u6ce2\u7eb9\u6548\u679c","elevation":"\u5c42\u7ea7\u9634\u5f71","anchor":"\u951a\u70b9","copy":"\u62f7\u8d1d","longpress":"\u957f\u6309","store":"\u72b6\u6001\u7ba1\u7406","utils":"\u5e38\u7528\u5de5\u5177\u5e93"},"page":{"usage":"\u7528\u6cd5","default-usage":"\u9ed8\u8ba4\u7528\u6cd5","individual-usage":"\u72ec\u7acb\u7528\u6cd5","demo":"\u4f8b\u5b50","apis":"APIs","sass":"Sass\u53d8\u91cf","icons":"\u56fe\u6807\u96c6","colors":"\u8c03\u8272\u677f","icon-list":"Material \u56fe\u6807\u96c6","color-palette":"Material \u8c03\u8272\u677f"}}')},VrLe:function(t,e){t.exports='New in 8.24.0
<ui-pagination\n v-model="page"\n :total="total"\n show-total\n position="center"\n></ui-pagination>\n
export default {\n data() {\n return {\n page: 1,\n total: 100\n };\n }\n};\n
'},Vt7N:function(t,e,o){(function(t){var d="undefined"!==typeof t&&t||"undefined"!==typeof self&&self||window,n=Function.prototype.apply;function l(t,e){this._id=t,this._clearFn=e}e.setTimeout=function(){return new l(n.call(setTimeout,d,arguments),clearTimeout)},e.setInterval=function(){return new l(n.call(setInterval,d,arguments),clearInterval)},e.clearTimeout=e.clearInterval=function(t){t&&t.close()},l.prototype.unref=l.prototype.ref=function(){},l.prototype.close=function(){this._clearFn.call(d,this._id)},e.enroll=function(t,e){clearTimeout(t._idleTimeoutId),t._idleTimeout=e},e.unenroll=function(t){clearTimeout(t._idleTimeoutId),t._idleTimeout=-1},e._unrefActive=e.active=function(t){clearTimeout(t._idleTimeoutId);var e=t._idleTimeout;e>=0&&(t._idleTimeoutId=setTimeout((function(){t._onTimeout&&t._onTimeout()}),e))},o("dAAR"),e.setImmediate="undefined"!==typeof self&&self.setImmediate||"undefined"!==typeof t&&t.setImmediate||this&&this.setImmediate,e.clearImmediate="undefined"!==typeof self&&self.clearImmediate||"undefined"!==typeof t&&t.clearImmediate||this&&this.clearImmediate}).call(this,o("IFD9"))},VyjJ:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-grid>` props with default value.\n UiGrid: {\n // some props\n }\n});\n
'},"W0l+":function(t,e){t.exports='<ui-image-list :text-protection="labelsType === 2">\n <ui-image-item\n v-for="i in 15"\n :key="i"\n :bg-image="`@/assets/photos/3x2/${i}.jpg`"\n >\n <ui-image-text v-if="labelsType">Text label</ui-image-text>\n </ui-image-item>\n</ui-image-list>\n
export default {\n data() {\n return {\n labelsType: 1\n };\n }\n};\n
'},W4Tv:function(t,e){t.exports='<ui-tree\n v-model="selectedValue"\n :data="treeData"\n :data-format="dataFormat"\n :max-level="2"\n multiple\n>\n <p>selectedValue: {{ selectedValue }}</p>\n</ui-tree>\n
export default {\n data() {\n return {\n dataFormat: { label: 'title', value: 'key' },\n treeData: [],\n selectedValue: []\n };\n }\n};\n
'},W5QU:function(t,e){t.exports='Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.
'},WA2x:function(t,e){t.exports='@use 'balm-ui/components/side-sheet' with (\n $width: 40%,\n $mobile-width: 80%,\n $background: white,\n $border-left-radius: 0,\n\n $scrim-color: on-surface,\n $scrim-opacity: 0.32\n);\n
'},WIne:function(t,e){t.exports='<ui-textfield>\n Your name\n <template #before>\n <ui-textfield-icon>event</ui-textfield-icon>\n </template>\n</ui-textfield>\n<ui-textfield>\n Your name\n <template #after>\n <ui-textfield-icon>delete</ui-textfield-icon>\n </template>\n</ui-textfield>\n\n<!-- Custom leading/trailing icon -->\n<ui-textfield outlined with-leading-icon>\n Your other name\n <template #before="{ iconClass }">\n <span :class="iconClass">\n <i class="fa fa-smile-o fa-lg"></i>\n </span>\n </template>\n</ui-textfield>\n<ui-textfield outlined with-trailing-icon>\n Your other name\n <template #after="{ iconClass }">\n <span :class="iconClass">\n <i class="fa fa-close fa-lg"></i>\n </span>\n </template>\n</ui-textfield>\n
'},WV8m:function(t,e){t.exports='<ui-editor></ui-editor>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
model (v-model ) | string | '' | Mandatory. | |
options | object | {} | See Quill options. | |
toolbar | array, string | null | Custom or 'full' editor toolbar. | |
placeholder | string | null | Placeholder text to show when editor is empty. | |
readonly | boolean | false | Whether to instantiate the editor to read-only mode. | |
theme | string | 'snow' | Name of theme to use. | |
toolbarIcons | object | {} | Custom toolbar icons. | 8.6.0 |
toolbarTips | object | {} | Custom toolbar tooltips. | 8.8.0 |
toolbarOptions | object | { font: [], size: [], lineheight:[] } | Custom toolbar options of the Font Famliy, Font Size and Line Height. | 8.6.0 |
toolbarHandlers | object | {} | Custom toolbar handlers. | |
customImageHandler | boolean | false | Enable custom image handler. | |
emotions | array | [] | The emoticon extension. Supports emoji and image . | |
withCounter | boolean | false | Styles the editor with an internal character counter. | 8.6.0 |
extension | false , object | false | Custom extension for Quill. |
interface Editor {\n theme: 'bubble' | 'snow';\n}\n
toolbar
propalign
/direction
/indent
background
/color
/font
/size
blockquote
/code-block
/header
/list
bold
/italic
/link
/script
/strike
/underline
image
/video
font
/size
/lineheight
: custom Font Famliy, Font Size and Line Heightimage
: custom image upload handleremoji
: emoji moduledivider
: horizontal ruletextindent
: like indent
, but for inlinelinkoff
: remove all links in editorcounter
: character counter moduleundo
/redo
: built-in undo/redo handlingselectall
: select all content in editortoolbarOptions
& emotions
format for global/path/to/app/scripts/config/editor.js
const toolbarTips = {\n header: 'Headline',\n font: 'Font Famliy',\n size: 'Font Size',\n lineheight: 'Line Height',\n bold: 'Bold',\n italic: 'Italic',\n underline: 'Underline',\n color: 'Text Color',\n background: 'Background Color',\n align: {\n default: 'Left Align',\n center: 'Center Align',\n right: 'Right Align',\n justify: 'Justify Align'\n },\n list: {\n ordered: 'Ordered List',\n bullet: 'Bullet List'\n },\n indent: {\n '+1': 'Increase Indent',\n '-1': 'Decrease Indent'\n },\n blockquote: 'Blockquote',\n emoji: 'Emoji'\n};\n\nconst toolbarOptions = {\n // To customize Font Family, you need to configure the Sass variable `$font-family`\n font: [\n 'Arial',\n 'Arial Black',\n 'Comic Sans MS',\n 'Courier New',\n 'Tahoma',\n 'Georgia',\n 'Helvetica',\n 'Segoe UI',\n 'Impact',\n 'Times New Roman',\n 'Verdana'\n ],\n size: [\n '8px',\n '9px',\n '10px',\n '11px',\n '12px',\n '13px',\n '14px',\n '16px',\n '18px',\n '24px',\n '36px',\n '48px',\n '60px',\n '72px',\n '96px'\n ],\n lineheight: [\n '1',\n '1.2',\n '1.5',\n '1.6',\n '1.8',\n '2',\n '2.4',\n '2.8',\n '3',\n '4',\n '5'\n ]\n};\n\nconst emotions = [\n {\n type: 'image',\n title: 'Default',\n content: [\n {\n name: 'oo',\n alt: '\u574f\u7b11',\n src: 'https://v8.material.balmjs.com/images/emoji/p_huaixiao.png'\n },\n {\n name: 'xx',\n alt: '\u8214\u5c4f',\n src: 'https://v8.material.balmjs.com/images/emoji/p_tian.png'\n }\n ]\n },\n {\n type: 'emoji',\n title: 'emoji',\n content: [\n {\n name: 'smile',\n value: '\ud83d\ude00'\n },\n {\n name: 'cry',\n value: '\ud83d\ude06'\n }\n ]\n },\n {\n type: 'image',\n title: 'Custom',\n content: [\n {\n name: 'yy',\n alt: '\u795e\u517d',\n src: 'https://v8.material.balmjs.com/images/emoji/g_shenshou.gif'\n },\n {\n name: 'zz',\n alt: '\u6d6e\u4e91',\n src: 'https://v8.material.balmjs.com/images/emoji/g_fuyun.gif'\n }\n ]\n }\n];\n\nexport { toolbarTips, toolbarOptions, emotions };\n
/path/to/app/scripts/main.js
import Vue from 'vue';\nimport { toolbarTips, toolbarOptions, emotions } from '@/config/editor';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n UiEditor: {\n toolbarTips,\n toolbarOptions,\n emotions\n }\n});\n
toolbarHandlers
prop{\n toolbar: ['customFormat'],\n toolbarHandlers: {\n customFormat: (quill, value) => {};\n }\n}\n
quill.insert(customFormat, value) => {}
: insert content into the editorquill.insert('html', content)
: insert html into the editor (New in 8.9.0)<ui-editor ref="editor" v-model="content"></ui-editor>\n
this.$refs.editor.decodeEmoji(content)
: get back-end data \u2192 set front-end viewthis.$refs.editor.encodeEmoji(html)
: submit front-end data \u2192 save back-end dataName | Props | Description |
---|---|---|
toolbar | The toolbar slot holds the custom format buttons and can contain HTML. |
Name | Type | Description |
---|---|---|
change | function(content: string) | Emits when the editor text content is changed. |
file-change | function(file, insert) | customImageHandler required. (Insert uploaded image content into the editor by insert(url) function) |
NOTE: If you are not using
v-model
, you should listen for the editor using@change
and update themodel
prop.
Automatic
<ui-editor v-model="content"></ui-editor>\n
Manual
<ui-editor\n :model="content"\n @change="$balmUI.onChange('content', $event)"\n></ui-editor>\n
@use 'balm-ui/components/core';\n@use 'balm-ui/components/bottom-sheet/bottom-sheet';\n
import Vue from 'vue';\nimport UiBottomSheet from 'balm-ui/components/bottom-sheet';\n\nVue.use(UiBottomSheet);\n
'},WprK:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},WynS:function(t,e){t.exports='<p>\n <ui-switch v-model="loading"></ui-switch>\n</p>\n\n<ui-skeleton\n :loading="loading"\n active\n :avatar="{ size: 'large', shape: 'square' }"\n>\n <ui-list>\n <ui-item v-for="i in 3" :key="i">Hello BalmJS {{ i }}</ui-item>\n </ui-list>\n</ui-skeleton>\n
export default {\n data() {\n return {\n loading: true\n };\n }\n};\n
'},X9hg:function(t,e){t.exports='<ui-button v-debounce="config" raised>Click</ui-button>\n
export default {\n data() {\n return {\n config: {\n callback: () => {\n this.onClick();\n }\n }\n };\n },\n methods: {\n onClick() {\n console.log('clicked');\n }\n }\n};\n
'},XAZC:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite the param of `$tt()`.\n $typography: ['custom-style-1', 'custom-style-2']\n});\n
'},XBzc:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiButton from 'balm-ui/components/button';\nimport vButton from 'balm-ui/directives/button'; // Optional\n\n// Optional. Overwrite `<ui-button>` props with default value.\nVue.use(UiButton, {\n // some props\n});\nVue.directive(vButton.name, vButton); // Optional\n
'},XIHF:function(t,e){t.exports=''},XXab:function(t,e){t.exports='New in 8.61.0
<ui-alert state="success">Success Message</ui-alert>\n<ui-alert state="info">Info Message</ui-alert>\n<ui-alert state="warning" closable>Warning Message</ui-alert>\n<ui-alert state="error">Error Message</ui-alert>\n
'},XaOO:function(t,e){t.exports='Validation Method
interface VueInstance {\n $validate(\n formData: { [fieldName: string]: any },\n customFieldset?: string[]\n ): BalmUIValidationResult;\n}\n
Param | Type | Default | Description |
---|---|---|---|
formData | object | {} | Mandatory. A form data object. |
customFieldset | array | [] | Optional. The field names of the validations. |
Validation Result
interface BalmUIValidationResult {\n valid: boolean;\n validFields: string[];\n invalidFields: string[];\n message: string;\n messages: string[];\n validMsg: { [fieldName: string]: string };\n}\n
Result | Type | Description |
---|---|---|
valid | boolean | The validator result. |
validFields | array | Valid fields. |
invalidFields | array | Invalid fields. |
message | string | The message of the first invalid field. |
messages | array | The messages of all invalid fields. |
validMsg | object | The messages as an object. (Same format as formData ) |
NOTE:
validMsg
can be used with<ui-textfield-helper>
/<ui-select-helper>
to trigger the<ui-textfield>
/<ui-select>
invalid styling
Validation Rule
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n
// Custom local validation rules\nconst validations = [\n {\n key: 'fieldName1',\n label: 'Field Label',\n validator: 'required, customRule1',\n customRule1: {\n validate(fieldValue, formData) {\n // Validation method\n return true;\n },\n message: '%s is required' // The '%s' symbol will automatically replace the label text\n }\n // More custom rules\n // customRule2: { ... }\n }\n // More form fields\n // {\n // key: 'fieldName2',\n // validator: 'required'\n // }\n];\n\nexport default {\n validations,\n data() {\n return {\n formData: {\n fieldName1: '',\n fieldName2: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let { valid, validFields, invalidFields, message, messages, validMsg } =\n this.$validate(this.formData);\n }\n }\n};\n
// New in 8.23.0\ninterface BalmUIValidations {\n clear(): void;\n get(fieldName?: string): BalmUIValidationRule[] | BalmUIValidationRule; // show current validation rule(s)\n set(fieldName: string, validationRule: BalmUIValidationRule): void;\n set(validations: BalmUIValidationRule[]): void;\n}\n\ninterface VueInstance {\n $validations: BalmUIValidations;\n}\n
is deprecated in 8.17.0$resetValidations()
is deprecated in 8.23.0$setValidations()
Param | Type | Default | Description |
---|---|---|---|
fieldName | string | '' | A field name of the formData . (BalmUI validator rule key) |
validation | object | {} | A validation. (BalmUI validator rule value) |
validations | object | {} | (See) BalmUI validator rules. |
computed
export default {\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n computed: {\n validations() {\n return this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n }\n },\n methods: {\n onSubmit() {\n let result = this.$validate(this.formData);\n // ...\n }\n }\n};\n
customFieldset
export default {\n validations: [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ],\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let customFieldset = this.step === 1 ? ['username'] : ['password'];\n let result = this.$validate(this.formData, customFieldset);\n // ...\n }\n }\n};\n
$validations.set
for validationsexport default {\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n }\n },\n beforeDestroy() {\n this.$validations.clear(); // IMPORTANT!!!\n },\n methods: {\n onSubmit() {\n let customValidations =\n this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n this.$validations.set(customValidations);\n\n let result = this.$validate(this.formData);\n // ...\n }\n};\n
$alert(message)
$alert(options)
interface VueInstance {\n $alert(options: string | object): Promise<void>;\n}\n
Option | Type | Default | Description |
---|---|---|---|
className | string | '' | The custom class name for the alert dialog. |
title | string | '' | The title of the alert dialog. |
state | string | '' | State type. |
stateOutlined | boolean | false | Show outlined state. |
message | string | '' | The content to be displayed in the alert dialog. |
raw | boolean | false | Rendered plain HTML. |
buttonText | string | 'OK' | Alert button content. |
callback | function | false | Handle some event when the alert button is clicked. |
interface AlertDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Usage 1
$alert({\n message,\n callback() {\n // ...\n }\n});\n
Usage 2 (Recommended)
$alert(message).then(() => {\n // ...\n});\n
$alert
without .vue
componentNew in 8.1.0
import { useAlert } from 'balm-ui';\n// OR\n// import { useAlert } from 'balm-ui/plugins/alert';\n\nconst $alert = useAlert();\n$alert('Hello BalmUI');\n
'},XfPe:function(t,e){t.exports='<ui-card outlined class="demo-card">\n <div :class="[$tt('subtitle2'), 'demo-card-article-group-heading']">\n Headlines\n </div>\n <ui-list-divider></ui-list-divider>\n\n <template v-for="(item, index) in list">\n <a v-ripple :key="`item${index}`" class="demo-card-article">\n <h2 :class="[$tt('headline5'), 'demo-card-article__title']">\n {{ item.title }}\n </h2>\n <p class="demo-card-article__snippet">{{ item.content }}</p>\n </a>\n <ui-list-divider :key="`divider${index}`"></ui-list-divider>\n </template>\n\n <ui-card-actions full-bleed>\n <ui-button class="demo-card-action">\n All Business Headlines\n <template #after>\n <ui-icon>arrow_forward</ui-icon>\n </template>\n </ui-button>\n </ui-card-actions>\n</ui-card>\n
export default {\n data() {\n return {\n list: [\n {\n title: 'Copper on the rise',\n content:\n 'Copper price soars amid global market optimism and increased demand.'\n },\n {\n title: 'U.S. tech startups rebound',\n content:\n 'Favorable business conditions have allowed startups to secure more fundraising deals compared to last year.'\n },\n {\n title: `Asia's clean energy ambitions`,\n content:\n 'China plans to invest billions of dollars for the development of over 300 clean energy projects in Southeast Asia.'\n }\n ]\n };\n }\n};\n
/* Sass code */\n.demo-card {\n width: 350px;\n margin: 48px;\n}\n\n.demo-card-article-group-heading {\n @include mdc-theme-prop(color, text-secondary-on-light);\n\n padding: 8px 16px;\n}\n\n.demo-card-article {\n padding: 16px;\n text-decoration: none;\n color: inherit;\n}\n\n.demo-card-article__title {\n margin: 0 0 4px 0;\n}\n\n.demo-card-article__snippet {\n @include mdc-theme-prop(color, text-secondary-on-light);\n\n margin: 0;\n}\n
'},Xgyy:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/bottom-navigation/bottom-navigation';\n@use 'balm-ui/components/tabs/tabs';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiBottomNavigation from 'balm-ui/components/bottom-navigation';\nimport UiTabsComponents from 'balm-ui/components/tabs';\n\n// Optional. Overwrite `<ui-bottom-navigation>` props with default value.\nVue.use(UiBottomNavigation, {\n // some props\n});\nVue.use(UiTabsComponents);\n
'},Xl1O:function(t,e){t.exports='<ui-datepicker></ui-datepicker>\n
<ui-datepicker>
type in config.mode
prop
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | Styles the datepicker as an outlined text field. (label or placeholder required) | |
model (v-model ) | string, number, array | '' | Mandatory. | |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . | |
label | string | '' | A text caption or description for the datepicker, which use the input's placeholder attribute instead. | |
placeholder | string | null | The placeholder attribute of the <input> . | |
disabled | boolean | false | Styles the datepicker as a disabled text field. | |
required | boolean | false | Styles the datepicker as a required text field. | |
fullwidth | boolean | false | Styles the datepicker as a full width text field. | |
endAligned | boolean | false | Styles the datepicker with an end-aligned input. | |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. | |
withLeadingIcon | boolean, string | false | Styles the datepicker as a text field with a leading icon. (Use with before slot) | |
withTrailingIcon | boolean, string | false | Styles the datepicker as a text field with a trailing icon. (Use with after slot) | |
config | object | {} | See Flatpickr configuration. | |
toggle | boolean | false | Show calendar icon button. | |
clear | boolean | false | Show clear icon button. | |
monthOptions | object | {} | See Flatpickr month select options. | 7.4.2 |
<ui-datepicker :config="config"></ui-datepicker>\n
import lang from 'flatpickr/dist/l10n/zh.js';\n\nexport default {\n data() {\n return {\n config: {\n locale: lang.zh\n }\n };\n }\n};\n
Name | Props | Description |
---|---|---|
default | The default slot holds the label for the datepicker. | |
before | iconClass | The before slot holds a custom leading icon. |
after | iconClass | The before slot holds a custom trailing icon. (When withTrailingIcon = true ) |
toggle | The custom toggle icon button. (When withTrailingIcon = false ) | |
clear | The custom clear icon button. (When withTrailingIcon = false ) |
Name | Type | Description |
---|---|---|
change | function(value: string|array) | Emits when the datepicker value is changed. |
NOTE: If you are not using
v-model
, you should listen for the datepicker using@change
and update themodel
prop.
Automatic
<ui-datepicker v-model="value"></ui-datepicker>\n
Manual
<ui-datepicker\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-datepicker>\n
<div class="page--top-app-bar">\n <ui-top-app-bar\n content-selector="#content-main"\n :type="type"\n :title="title"\n @nav="$balmUI.onShow('openDrawer')"\n >\n <template #toolbar="{ toolbarItemClass }">\n <ui-icon-button\n :class="toolbarItemClass"\n icon="file_download"\n ></ui-icon-button>\n <ui-icon-button :class="toolbarItemClass" icon="print"></ui-icon-button>\n <ui-icon-button\n :class="toolbarItemClass"\n icon="bookmark"\n ></ui-icon-button>\n </template>\n </ui-top-app-bar>\n\n <ui-drawer v-model="openDrawer" type="modal">\n <ui-drawer-header>\n <ui-drawer-title>Header here</ui-drawer-title>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-list>\n <ui-item active>\n <ui-item-first-content>\n <ui-icon>arrow_back</ui-icon>\n </ui-item-first-content>\n <ui-item-text-content>Back</ui-item-text-content>\n </ui-item>\n <ui-list-divider></ui-list-divider>\n </ui-list>\n </ui-drawer-content>\n </ui-drawer>\n\n <div id="content-main">\n <p v-for="i in 36" :key="i">Content {{ i }}</p>\n </div>\n</div>\n
export default {\n data() {\n return {\n type: 0,\n title: 'Hello BalmUI',\n openDrawer: false\n };\n }\n};\n
'},YC43:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},YFMG:function(t,e){t.exports='\u5217\u8868\u662f\u6587\u672c\u6216\u56fe\u50cf\u7684\u8fde\u7eed\u5782\u76f4\u7d22\u5f15\u3002
'},YFsW:function(t,e){t.exports='\u26a0\ufe0f The
deprecated-
prefix is required inbalm-ui
>= 8.33.0
@use '@material/list' with (\n $deprecated-divider-color-on-light-bg: rgba(0, 0, 0, 0.12),\n $deprecated-divider-color-on-dark-bg: rgba(255, 255, 255, 0.2),\n $deprecated-side-padding: 16px,\n $deprecated-trailing-padding: 16px,\n $deprecated-text-offset: 72px,\n $deprecated-text-disabled-opacity: theme-color.text-emphasis(disabled),\n $deprecated-text-disabled-color: on-surface,\n $deprecated-text-selected-color: primary,\n\n $deprecated-single-line-height: 48px,\n $deprecated-single-line-minimum-height: 24px,\n $deprecated-single-line-maximum-height: $deprecated-single-line-height,\n $deprecated-single-line-density-scale: density-variables.$default-scale,\n $deprecated-single-line-density-config: (\n height: (\n default: $deprecated-single-line-height,\n maximum: $deprecated-single-line-maximum-height,\n minimum: $deprecated-single-line-minimum-height,\n ),\n ),\n\n $deprecated-item-primary-text-baseline-height: 28px,\n $deprecated-item-primary-text-baseline-height-with-graphic: 32px,\n $deprecated-item-secondary-text-baseline-height: 20px,\n $deprecated-dense-item-primary-text-baseline-height: 24px,\n\n $deprecated-two-line-height: 64px,\n $deprecated-two-line-graphic-height: 72px,\n $deprecated-two-line-icon-top-margin: 16px,\n\n $deprecated-deprecated-graphic-config: (\n graphic-size: (\n width: 24px,\n height: 24px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-textual-variant-config: (\n single-line-height: $deprecated-single-line-height,\n graphic-size: (\n width: 24px,\n height: 24px,\n ),\n leading-padding: 16px,\n text-offset: 16px,\n ),\n\n $deprecated-icon-variant-config: (\n single-line-height: 56px,\n graphic-size: (\n width: 24px,\n height: 24px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-avatar-variant-config: (\n single-line-height: 56px,\n graphic-size: (\n width: 40px,\n height: 40px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-thumbnail-variant-config: (\n single-line-height: 56px,\n graphic-size: (\n width: 40px,\n height: 40px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-image-variant-config: (\n single-line-height: 72px,\n graphic-size: (\n width: 56px,\n height: 56px,\n ),\n leading-padding: 16px,\n text-offset: 88px,\n ),\n\n $deprecated-video-variant-config: (\n single-line-height: 72px,\n graphic-size: (\n width: 100px,\n height: 56px,\n ),\n leading-padding: 0px,\n text-offset: 116px,\n )\n);\n
'},"Z+sm":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/chips/chips';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiChipsComponents from 'balm-ui/components/chips';\n\nVue.use(UiChipsComponents, {\n // Optional. Overwrite `<ui-chips>` props with default value.\n UiChips: {\n // some props\n }\n});\n
'},"Z/7x":function(t,e){t.exports='<ui-autocomplete\n v-model="keywords"\n outlined\n :source="source"\n placeholder="Type 'a', then 'b'"\n delay="500"\n remote\n auto-focus\n @search="onSearch"\n></ui-autocomplete>\n
export default {\n data() {\n return {\n keywords: '',\n source: []\n };\n },\n methods: {\n async onSearch(keywords) {\n let response = await this.$http.get('/api/search', {\n params: {\n text: keywords\n }\n });\n let { data } = response;\n // mock data\n this.source = data[keywords] ? data[keywords] : [];\n }\n }\n};\n
'},Z6Yw:function(t,e){t.exports='<ui-tab-bar><!-- the tab components --></ui-tab-bar>\n
<ui-tab-bar>
& <ui-tabs>
\u5171\u7528 PropsName | Type | Default | Description |
---|---|---|---|
active (v-model ) | number | 0 | \u6807\u7b7e\u9875\u7d22\u5f15\u503c |
<ui-tab-bar>
SlotsName | Slots | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u7ec4\u4ef6\u53ca HTML |
<ui-tab-bar>
& <ui-tabs>
\u5171\u7528 EventsName | Type | Description |
---|---|---|
change | function(activeIndex: number) | \u6807\u7b7e\u9875\u7d22\u5f15\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6807\u7b7e\u9875\u7d22\u5f15\u5e76\u66f4\u65b0active
\u5c5e\u6027
\u81ea\u52a8
<ui-tab-bar v-model="activeIndex"></ui-tab-bar>\n<!-- \u6216 -->\n<ui-tabs v-model="activeIndex"></ui-tabs>\n
\u624b\u52a8
<ui-tab-bar\n :active="activeIndex"\n @change="$balmUI.onChange('activeIndex', $event)"\n></ui-tab-bar>\n<!-- \u6216 -->\n<ui-tabs\n :active="activeIndex"\n @change="$balmUI.onChange('activeIndex', $event)"\n></ui-tabs>\n
<ui-textfield><!-- the label text --></ui-textfield>\n
<ui-textfield>
Types
0
: 'filled'
1
: 'outlined'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Text field types. |
outlined | boolean | false | Styles the text field as an outlined text field. (label or placeholder required) |
model (v-model ) | string, number | '' | Mandatory. |
inputType | string | 'text' | Native <input> types: text , number , password , etc. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
label | string | '' | A text caption or description for the text field, which use the input's placeholder attribute instead. |
placeholder | string | null | The placeholder attribute of the <input> . |
disabled | boolean | false | Styles the text field as a disabled text field. |
required | boolean | false | Styles the text field as a required text field. |
fullwidth | boolean | false | Styles the text field as a full width text field. |
endAligned | boolean | false | Styles the text field with an end-aligned input. |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. |
withLeadingIcon | boolean | false | Styles the text field as a text field with a leading icon. |
withTrailingIcon | boolean | false | Styles the text field as a text field with a trailing icon. |
prefixText | string | '' | Sets the text content of the prefix. |
suffixText | string | '' | Sets the text content of the suffix. |
withCounter | boolean | false | Styles the text area as a text area with an internal character counter. |
helperTextId | string | null | Required for the id attribute of the <ui-textfield-helper> . |
attrs | object | {} | Other attributes for <input> or <textarea> . |
NOTE:
withLeadingIcon
andwithTrailingIcon
are only used for (non<ui-textfield-icon>
) custom leading/trailing icons, and generally do not need to be configured.
In addition to the above, the following properties proxy to the input or textarea elements' properties of the same name:
pattern
minlength
maxlength
: Required for character countermin
max
step
rows
cols
Name | Props | Description |
---|---|---|
default | The default slot holds the label for the text field. | |
before | iconClass | The before slot holds a custom leading icon. |
after | iconClass | The before slot holds a custom trailing icon. |
Name | Type | Description |
---|---|---|
focus | function(event: object) | Emits when the text field is focused. |
keydown | function(event: object) | Emits when a key is pressed in the text field. |
input | function(value: string) | Emits when the text field value is changed. |
change | function(event: object) | Emits when a change in the text field value is committed. |
enter | function(value: string) | Emits when the Enter key is pressed in the input. |
blur | function(event: object) | Emits when the text field loses focus. |
NOTE: If you are not using
v-model
, you should listen for the text field using@input
and update themodel
prop.
Automatic
<ui-textfield v-model="value"></ui-textfield>\n
Manual
<ui-textfield\n :model="value"\n @input="$balmUI.onChange('value', $event)"\n></ui-textfield>\n
<ui-spinner></ui-spinner>\n
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Puts the circular progress indicator in an indeterminate state. |
progress | number | 0 | Sets the progress bar to this value. Value should be between [0, 1] . |
size | string | 'large' | To set the circular progress size. |
fourColored | boolean | false | You may choose to have the indicator in inderminate state animate through 4 colors. |
label | string | '' | Label indicating how the progress bar should be announced to the user. |
closed | boolean | false | Hides the circular progress indicator. |
Size value:
interface Spinner {\n size: 'large' | 'L' | 'medium' | 'M' | 'small' | 'S';\n}\n
@use 'balm-ui/components/core';\n@use 'balm-ui/components/drawer/drawer';\n@use 'balm-ui/components/list/list';\n
import Vue from 'vue';\nimport UiDrawerComponents from 'balm-ui/components/drawer';\nimport UiListComponents from 'balm-ui/components/list';\n\nVue.use(UiDrawerComponents);\nVue.use(UiListComponents);\n
'},ZqYw:function(t,e){t.exports='<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Time.."\n></ui-datepicker>\n
export default {\n data() {\n return {\n date: '13:20',\n config: {\n mode: 'time'\n // time_24hr: true\n }\n };\n }\n};\n
'},"ZsM+":function(t,e){t.exports='<div v-ripple></div>\n
\u6ce8\u610f\uff1a\u4e0d\u652f\u6301\u52a8\u6001 class
v-ripple="color"
v-ripple:cssOnly="color"
Value | Type | Default | Description |
---|---|---|---|
color | number, string | undefined | \u8bbe\u7f6e\u6ce2\u7eb9\u989c\u8272 |
1
\u6216 'primary'
2
\u6216 'secondary'
v-ripple.unbounded="color"
v-ripple:cssOnly.unbounded="color"
<ui-snackbar><!-- the message text --></ui-snackbar>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
actionType | number | 0 | \u8bbe\u7f6e\u5e95\u90e8\u6d88\u606f\u6846\u7684\u52a8\u4f5c\u7c7b\u578b\uff080 : \u52a8\u4f5c\u6309\u94ae, 1 : \u5173\u95ed\u56fe\u6807\uff09 | |
open (v-model ) | boolean | false | \u5e95\u90e8\u6d88\u606f\u6846\u663e\u793a\u72b6\u6001 | |
timeoutMs | number | 5000 | \u81ea\u52a8\u5173\u95ed\u7684\u8d85\u65f6\u65f6\u95f4\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u503c\u5fc5\u987b\u5728 4000 \u548c 10000 \uff08\u6216 -1 \u7528\u4e8e\u7981\u6b62\u81ea\u52a8\u5173\u95ed) | |
message | string | '' | \u6d88\u606f\u6587\u672c | |
actionButtonText | string | '' | \u64cd\u4f5c\u6309\u94ae/\u56fe\u6807\u5143\u7d20\uff08\u5982\u679c\u5b58\u5728\uff09 | |
stacked | boolean | false | \u5c06\u64cd\u4f5c\u6309\u94ae/\u56fe\u6807\u653e\u5728\u6d88\u606f\u4e0b\u65b9\u800c\u4e0d\u662f\u65c1\u8fb9 | |
leading | boolean | false | \u5c06\u5e95\u90e8\u6d88\u606f\u6846\u653e\u7f6e\u5728\u5c4f\u5e55\u7684\u524d\u7aef\uff08\u5728 LTR \u4e2d\u4e3a\u5de6\uff0c\u5728 RTL \u4e2d\u4e3a\u53f3\uff09\uff0c\u800c\u4e0d\u662f\u5c45\u4e2d\u3002\uff08\u4ec5\u9650\u5e73\u677f\u7535\u8111\u548c\u53f0\u5f0f\u673a\uff09 | |
position | string | 'bottom' | \u8bbe\u7f6e\u5e95\u90e8\u6d88\u606f\u6846\u7684\u4f4d\u7f6e | 8.30.0 |
interface Snackbar {\n position: 'bottom' | 'center' | 'top';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6d88\u606f\u6587\u672c\u53ca HTML | |
action | actionClass | \u81ea\u5b9a\u4e49\u52a8\u4f5c\u6309\u94ae |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u5e95\u90e8\u6d88\u606f\u6846\u9690\u85cf\u65f6\u89e6\u53d1 |
closed | function() | \u5e95\u90e8\u6d88\u606f\u6846\u5173\u95ed\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5e95\u90e8\u6d88\u606f\u6846\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-snackbar v-model="open"></ui-snackbar>\n
\u624b\u52a8
<ui-snackbar\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-snackbar>\n
\u590d\u9009\u6846\u5141\u8bb8\u7528\u6237\u4ece\u4e00\u7ec4\u4e2d\u9009\u62e9\u4e00\u4e2a\u6216\u591a\u4e2a\u9009\u9879\u3002\u590d\u9009\u6846\u53ef\u7528\u4e8e\u6253\u5f00\u6216\u5173\u95ed\u9009\u9879\u3002
'},aCdw:function(t,e){t.exports='New in 8.31.0
<a v-button></a>\n
v-button
v-button.outlined
v-button.raised
v-button.unelevated
<ui-card class="demo-card demo-card--music">\n <ui-card-content class="demo-card__primary-action">\n <div class="demo-card__music-row">\n <ui-card-media\n square\n class="demo-card__media demo-card__media--music"\n ></ui-card-media>\n <div class="demo-card__music-info">\n <div :class="[$tt('headline5'), 'demo-card__music-title']">Rozes</div>\n <div class="demo-card__music-artist">Under the Grave</div>\n <div class="demo-card__music-year">(2016)</div>\n </div>\n </div>\n </ui-card-content>\n <ui-list-divider></ui-list-divider>\n <ui-card-actions>\n <ui-card-buttons class="demo-card__action-buttons--text-only">\n Rate this album\n </ui-card-buttons>\n <ui-card-icons>\n <ui-icon\n v-for="i in 5"\n :key="i"\n class="demo-card__action-icon--star"\n :title="`${i} star${i > 1 ? 's' : ''}`"\n >\n star_border\n </ui-icon>\n </ui-card-icons>\n </ui-card-actions>\n</ui-card>\n
/* Sass code */\n.demo-card {\n width: 350px;\n margin: 48px;\n}\n\n.demo-card__media {\n background-image: url('../images/1-1.jpg');\n}\n\n.demo-card--music {\n @include mdc-card-corner-radius(24px 4px);\n\n @include mdc-rtl {\n @include mdc-card-corner-radius(4px 24px);\n }\n}\n\n.demo-card__music-row {\n display: flex;\n border-top-left-radius: inherit;\n\n @include mdc-rtl {\n border-top-left-radius: 0;\n border-top-right-radius: inherit;\n }\n}\n\n.demo-card__media--music {\n width: 110px;\n border-top-left-radius: inherit;\n\n @include mdc-rtl {\n border-top-left-radius: 0;\n border-top-right-radius: inherit;\n }\n}\n\n.demo-card__music-info {\n display: flex;\n flex-direction: column;\n padding: 8px 16px;\n}\n\n.demo-card__action-buttons--text-only {\n margin-left: 8px;\n}\n\n.demo-card__action-icon--star {\n margin-left: 4px;\n margin-right: 4px;\n cursor: pointer;\n}\n
'},aGWL:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},aKLO:function(t,e){t.exports='SASS
@use 'balm-ui/dist/balm-ui';\n
CSS
<!-- build:css css/vendors.css -->\n<link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n<!-- endbuild -->\n
'},anwz:function(t,e){t.exports='New in 4.3.0
<ui-form-field>\n <ui-checkbox></ui-checkbox>\n <label>Checkbox</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean, array | false | Mandatory. |
indeterminate | boolean | false | Styles the checkbox as an indeterminate checkbox. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
value | string, number | '' | The value attribute of the <input> . |
disabled | boolean | false | Styles the checkbox as a disabled checkbox. |
attrs | object | {} | Other attributes for <input> . |
Name | Type | Description |
---|---|---|
change | function(value: boolean|array) | Emits when the checkbox is changed. |
NOTE: If you are not using
v-model
, you should listen for the checkbox using@change
and update themodel
prop.
Automatic
<ui-checkbox v-model="value"></ui-checkbox>\n
Manual
<ui-checkbox\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-checkbox>\n
<ui-dialog-content><!-- the dialog content --></ui-dialog-content>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u5185\u5bb9\u53ca HTML |
<ui-card-icons><!-- the icon button components --></ui-card-icons>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the icon components and can contain HTML. |
<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Month.."\n :month-options="monthOptions"\n></ui-datepicker>\n
export default {\n data() {\n return {\n date: '',\n config: {\n mode: 'month' // New in `7.4.2`\n },\n monthOptions: {\n shorthand: true, // defaults to false\n dateFormat: 'm.y', // defaults to "F Y"\n altFormat: 'F Y' // defaults to "F Y"\n }\n };\n }\n};\n
'},"b/0I":function(t,e){t.exports='<ui-tab-scroller><!-- the tab components --></ui-tab-scroller>\n
Name | Type | Default | Description |
---|---|---|---|
scrollX | number | 0 | \u5f53\u524d\u7684\u6eda\u52a8\u503c |
align | string | '' | <ui-tabs> \u5171\u7528\u5c5e\u6027\u3002\u6807\u7b7e\u9875\u5bf9\u9f50\u65b9\u5f0f\u3002 |
interface TabScroller {\n align: 'start' | 'center' | 'end';\n}\n
Name | Slots | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u7ec4\u4ef6\u53ca HTML |
<ui-table></ui-table>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
data | array | [] | \u6570\u636e\u6e90 | |
thead | array | [] | \u6570\u636e\u8868\u5934\u90e8\u6e32\u67d3\u683c\u5f0f | |
tbody | array | [] | \u6570\u636e\u8868\u5185\u5bb9\u6e32\u67d3\u683c\u5f0f | |
tfoot | array | [] | \u6570\u636e\u8868\u5e95\u90e8\u6e32\u67d3\u683c\u5f0f | |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
rowCheckbox | boolean | false | \u5e26\u6709\u884c\u9009\u62e9\u7684\u6570\u636e\u8868 | |
rowCheckboxDisabled | function, boolean | false | \u6392\u9664\u9009\u4e2d\u884c\u7684\u6570\u636e | 8.52.0 |
selectedRows (v-model ) | array | [] | \u9009\u62e9\u884c\u7684\u7d22\u5f15\u6216 IDs\uff08\u5fc5\u987b\u8bbe\u7f6e rowCheckbox: true \uff09 | |
selectedKey | boolean, string | false | selectedRows \u4f7f\u7528\u81ea\u5b9a\u4e49\u952e\u5b57\u6bb5\uff0c\u9ed8\u8ba4\u4f7f\u7528\u884c\u7d22\u5f15\u3002 | |
rowIdPrefix | string | '' | \u5728\u884c\u5143\u7d20 <tr> \u4e0a\u7684 data-row-id \u5c5e\u6027\u503c\u7684\u524d\u7f00 | |
sortIconAlignEnd | boolean | false | \u8bbe\u7f6e\u6392\u5e8f\u56fe\u6807\u4f4d\u4e8e\u6807\u7b7e\u4e4b\u540e | |
showProgress | boolean | false | \u542f\u7528\u6570\u636e\u8868\u8fdb\u5ea6\u6307\u793a\u5668\u8868\u793a\u52a0\u8f7d\u6570\u636e\u4e2d | 8.16.0 |
fixedHeader | boolean | false | \u6570\u636e\u8868\u5934\u90e8\u56fa\u5b9a\u6a21\u5f0f | 8.16.0 |
defaultColWidth | number | 0 | \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u6bcf\u5217\u7684\u9ed8\u8ba4\u5bbd\u5ea6 | 8.16.0 |
scroll | object | { x: false, y: false } | \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u5bb9\u5668\u7684\u5927\u5c0f | 8.16.0 |
thead
& tbody
& tfoot
\u5c5e\u6027\u901a\u7528\u683c\u5f0f
interface TableCell {\n value: string; // \u5355\u5143\u683c\u5185\u5bb9\n numeric: boolean; // \u6570\u5b57\u5355\u5143\u683c\u5c45\u53f3\u663e\u793a\uff08\u76f8\u5f53\u4e8e `align: 'right'`\uff09\n align: 'left' | 'center' | 'right';\n class: string; // \u81ea\u5b9a\u4e49 class\n slot: string; // \u81ea\u5b9a\u4e49\u63d2\u69fd\n}\n
thead
\u683c\u5f0f
\u9ed8\u8ba4\uff08string[]
\uff09
[\n 'ID',\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n];\n
\u81ea\u5b9a\u4e49\uff08object[]
\u6216 object[][]
\uff09
interface Thead {\n sort: 'none' | 'asc' | 'desc'; // \u6392\u5e8f\n columnId: string; // \u6392\u5e8f\u5b57\u6bb5\uff1a\u4f8b\u5982 'id'\n rowspan: number;\n colspan: number;\n}\n
columnId
\u5b57\u6bb5\u662f7.0.0
\u65b0\u589e\u5b57\u6bb5\uff1b\u5982\u679cbalm-ui < 7.0.0
\uff0c\u8bf7\u4f7f\u7528by
\u5b57\u6bb5
[\n [\n {\n value: 'ID',\n rowspan: 2,\n sort: 'asc',\n columnId: 'id'\n },\n {\n value: 'Type1',\n colspan: 2,\n align: 'center'\n },\n {\n value: 'Type2',\n colspan: 3,\n align: 'center'\n },\n {\n value: 'Actions',\n rowspan: 2\n }\n ],\n [\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n ]\n];\n
tbody
\u683c\u5f0f
\u9ed8\u8ba4\uff08string[]
\uff09
['id', 'dessert', 'calories', 'fat', 'carbs', 'protein'];\n
\u81ea\u5b9a\u4e49\uff08object[]
\uff09
interface Tbody {\n field: string; // \u6570\u636e\u5b57\u6bb5\u540d\n fn: function; // \u7b80\u5355\u7684\u6570\u636e\u5904\u7406\n colClass: string; // <col> \u5143\u7d20\u7684 class (New in 8.16.0)\n fixed: 'left' \uff5c 'right'; // \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u4e2d\u5355\u5143\u683c\u7684\u4f4d\u7f6e (New in 8.16.0)\n width: number; // \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u4e2d\u5355\u5143\u683c\u7684\u5bbd\u5ea6 (New in 8.16.0)\n}\n
[\n 'id',\n 'dessert',\n {\n field: 'calories',\n numeric: true,\n class: 'my-data'\n },\n {\n field: 'fat',\n fn: (data) => {\n return data.fat.toFixed(1);\n }\n },\n 'carbs',\n {\n field: 'protein',\n class: (data) => {\n return data.protein > 5 ? 'red' : 'green';\n }\n },\n {\n slot: 'actions'\n }\n];\n
<ui-table>\n <template #actions="{ data }">\n <ui-icon @click="show(data)">description</ui-icon>\n <ui-icon @click="edit(data)">edit</ui-icon>\n <ui-icon @click="remove(data)">delete</ui-icon>\n </template>\n</ui-table>\n
tfoot
\u683c\u5f0f\uff08object[]
\uff09
interface Tfoot {\n fnName: 'count' | 'sum' | 'avg' | 'max' | 'min'; // \u5e38\u7528\u7edf\u8ba1\u65b9\u6cd5\n fn: function; // \u7b80\u5355\u7684\u6570\u636e\u7ed3\u679c\u5904\u7406\n slot: string; // \u81ea\u5b9a\u4e49\u63d2\u69fd\n}\n
fnName
\u65b9\u6cd5\uff1acount
, sum
, avg
, max
, min
[\n {\n field: 'id',\n fnName: 'count'\n },\n null,\n {\n field: 'calories',\n fnName: 'sum'\n },\n {\n field: 'fat',\n fnName: 'avg'\n },\n {\n field: 'carbs',\n fnName: 'max'\n },\n {\n field: 'protein',\n fnName: 'min'\n }\n];\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5206\u9875\u7ec4\u4ef6\u53ca HTML | |
(custom-name) | \u5355\u5143\u683c\u81ea\u5b9a\u4e49\u63d2\u69fd |
Name | Type | Description | Version |
---|---|---|---|
selected | function(selectedRows: array) | \u9009\u62e9\u884c\u53d8\u5316\u65f6\u89e6\u53d1 | |
sorted | function(detail: object) | \u70b9\u51fb\u53ef\u6392\u5e8f\u8868\u5934\u65f6\u89e6\u53d1 | 8.58.0 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@selected
\u76d1\u542c\u6570\u636e\u8868\u9009\u62e9\u884c\u5e76\u66f4\u65b0selectedRows
\u5c5e\u6027
\u81ea\u52a8
<ui-table v-model="selectedRows" row-checkbox></ui-table>\n
\u624b\u52a8
<ui-table\n :selectedRows="selectedRows"\n row-checkbox\n @selected="$balmUI.onChange('selectedRows', $event)"\n></ui-table>\n
<ui-card-icons><!-- the icon button components --></ui-card-icons>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u6807\u6309\u94ae\u7ec4\u4ef6\u53ca HTML |
<ui-icon><!-- the material design icon name --></ui-icon>\n
<ui-icon>
\u7c7b\u578b
0: 'filled'
1: 'outlined'
2: 'round'
3: 'twoTone'
4: 'sharp'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u56fe\u6807\u7c7b\u578b |
outlined | boolean | false | \u8f6e\u5ed3\u56fe\u6807\u53ef\u81ea\u5b9a\u4e49\u7b14\u89e6\u548c\u586b\u5145\u5c5e\u6027\uff0c\u4ee5\u63d0\u4f9b\u4e00\u79cd\u8f7b\u5de7\uff0c\u5e72\u51c0\u7684\u6837\u5f0f\uff0c\u8be5\u6837\u5f0f\u5728\u5bc6\u96c6\u7684 UI \u4e2d\u6548\u679c\u5f88\u597d\u3002 \u53ef\u4ee5\u8c03\u6574\u8f6e\u5ed3\u56fe\u6807\u7684\u7b14\u5212\u7c97\u7ec6\uff0c\u4ee5\u8865\u5145\u6216\u5bf9\u6bd4\u5b57\u4f53\u7684\u7c97\u7ec6\u3002 |
round | boolean | false | \u5706\u5f62\u56fe\u6807\u4f7f\u7528\u7684\u8f6c\u89d2\u534a\u5f84\u4e0e\u4f7f\u7528\u8f83\u91cd\u7684\u5b57\u4f53\uff0c\u5f2f\u66f2\u7684\u5fbd\u6807\u6216\u5706\u5f62\u5143\u7d20\u6765\u8868\u8fbe\u5176\u98ce\u683c\u7684\u54c1\u724c\u642d\u914d\u5f97\u5f88\u597d\u3002 |
twoTone | boolean | false | \u53cc\u8272\u56fe\u6807\u4f7f\u7528\u7b14\u89e6\uff0c\u586b\u5145\u548c\u989c\u8272\u7684\u5c5e\u6027\u6dfb\u52a0\u4e86\u5c3a\u5bf8\u3002 \u7b14\u89e6\u548c\u586b\u5145\u8272\u7684\u5bf9\u6bd4\u4f7f\u60a8\u53ef\u4ee5\u4f7f\u7528\u591a\u79cd\u54c1\u724c\u989c\u8272\uff0c\u5e76\u53ef\u4ee5\u63d0\u9ad8\u6e05\u6670\u5ea6\u3002 |
sharp | boolean | false | \u5c16\u9510\u56fe\u6807\u663e\u793a\u5e26\u6709\u76f4\u8fb9\u7684\u89d2\uff0c\u4ee5\u786e\u4fdd\u5373\u4f7f\u5728\u8f83\u5c0f\u7684\u6bd4\u4f8b\u4e0b\u4e5f\u6e05\u6670\u53ef\u8fa8\u7684\u6837\u5f0f\u3002 \u8fd9\u4e9b\u77e9\u5f62\u53ef\u4ee5\u652f\u6301\u54c1\u724c\u98ce\u683c\uff0c\u800c\u5706\u5f62\u4e0d\u80fd\u5f88\u597d\u5730\u4f53\u73b0\u8fd9\u79cd\u98ce\u683c\u3002 |
size | number | 24 | \u56fe\u6807\u5c3a\u5bf8 |
dark | boolean | false | \u6df1\u8272\u56fe\u6807\uff08\u7528\u4e8e\u6d45\u8272\u80cc\u666f\u4e0a\uff09 |
light | boolean | false | \u6d45\u8272\u56fe\u6807\uff08\u7528\u4e8e\u6df1\u8272\u80cc\u666f\u4e0a\uff09 |
inactive | boolean | false | \u7981\u7528\u6216\u4e0d\u6d3b\u52a8\u72b6\u6001 |
\u5c3d\u7ba1\u5b57\u4f53\u4e2d\u7684\u56fe\u6807\u53ef\u4ee5\u7f29\u653e\u4e3a\u4efb\u610f\u5927\u5c0f\uff0c\u4f46\u6839\u636e Material Design Icons \u51c6\u5219\uff0c\u6211\u4eec\u5efa\u8bae\u5c06\u5b83\u4eec\u663e\u793a\u4e3a
18
,24
,36
\u621648
px\u3002
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b material design \u56fe\u6807\u540d\u53ca HTML |
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u56fe\u6807\u65f6\u89e6\u53d1 |
<ui-tab-bar v-model="active" class="hero-demo-tab-bar">\n <ui-tab v-for="(item, index) in list" :key="index">{{ item }}</ui-tab>\n</ui-tab-bar>\n
.hero-demo-tab-bar {\n background-color: #f2f2f2;\n max-width: 420px;\n}\n
'},bTzX:function(t,e){t.exports='<ui-dialog-actions><!-- the dialog actions --></ui-dialog-actions>\n
Name | Type | Default | Description |
---|---|---|---|
acceptText | string | 'OK' | \u786e\u5b9a\u6309\u94ae\u6587\u672c |
cancelText | string | 'Cancel' | \u53d6\u6d88\u6309\u94ae\u6587\u672c |
Name | Props | Description |
---|---|---|
default | buttonClass | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u52a8\u4f5c\u53ca HTML |
<template #default="{ buttonClass }">\n <ui-button :class="buttonClass">BUTTON</ui-button>\n</template>\n
\u5176\u4ed6\u5b9a\u5236\u5316
data-mdc-dialog-button-default
: \u6dfb\u52a0\u5230\u6309\u94ae\u4ee5\u6307\u793a\u5b83\u662f\u9ed8\u8ba4\u64cd\u4f5c\u6309\u94aedata-mdc-dialog-initial-focus
: \u6dfb\u52a0\u5230\u5143\u7d20\u4ee5\u6307\u793a\u5b83\u662f\u5bf9\u8bdd\u6846\u6253\u5f00\u540e\u6700\u521d\u8981\u5173\u6ce8\u7684\u5143\u7d20<!-- Using Material Icons -->\n<ui-icon-button v-model="value1" :toggle="icon1"> </ui-icon-button>\n\n<!-- Using Font Awesome -->\n<ui-icon-button v-model="value2">\n <template #default="{ onClass, offClass }">\n <i :class="[onClass, icon2.on]"></i>\n <i :class="[offClass, icon2.off]"></i>\n </template>\n</ui-icon-button>\n\n<!-- Using SVG Icons -->\n<ui-icon-button>\n <template #default="{ onClass, offClass }">\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n :class="onClass"\n >\n <path\n d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"\n />\n </svg>\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n :class="offClass"\n >\n <path\n d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"\n />\n </svg>\n </template>\n</ui-icon-button>\n\n<!-- Using Image Icons -->\n<ui-icon-button>\n <template #default="{ onClass, offClass }">\n <img src="/path/to/image1.png" :class="onClass" />\n <img src="/path/to/image2.png" :class="offClass" />\n </template>\n</ui-icon-button>\n\n<!-- Disabled Icons -->\n<ui-icon-button :toggle="icon1" disabled></ui-icon-button>\n
export default {\n data() {\n return {\n value1: false,\n icon1: {\n on: 'favorite',\n off: 'favorite_border'\n },\n value2: true,\n icon2: {\n on: 'fa fa-star',\n off: 'fa fa-star-o'\n }\n };\n }\n};\n
'},bgvo:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `$confirm` options.\n $confirm: {\n // some options\n }\n});\n
'},bo92:function(t,e){t.exports='<ui-list-group>\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n</ui-list-group>\n
'},"c/k8":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-icon-button>` props with default value.\n UiIconButton: {\n // some props\n }\n});\n
'},"cH/n":function(t,e){t.exports='\u5f62\u72b6\u53ef\u4ee5\u5f15\u5bfc\u6ce8\u610f\u529b\uff0c\u8bc6\u522b\u7ec4\u4ef6\uff0c\u4f20\u8fbe\u72b6\u6001\u5e76\u8868\u8fbe\u54c1\u724c\u3002
'},"cN6+":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/list/list';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiListComponents from 'balm-ui/components/list';\n\nVue.use(UiListComponents, {\n // Optional. Overwrite `<ui-list>` props with default value.\n UiList: {\n // some props\n }\n});\n
'},cO62:function(t,e){t.exports='<h6 :class="$tt('headline6')">Text Label and Icon</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" type="textWithIcon">\n <ui-tab\n v-for="(tab, index) in tabs"\n :key="index"\n type="textWithIcon"\n :icon="tab.icon"\n >\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">Stacked Text Label and Icon</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" type="textWithIcon">\n <ui-tab\n v-for="(tab, index) in tabs"\n :key="index"\n type="textWithIcon"\n :icon="tab.icon"\n stacked\n >\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n
export default {\n data() {\n return {\n active: 0,\n tabs: [\n {\n icon: 'phone',\n url: '#recents'\n },\n {\n icon: 'favorite',\n url: '#favorites'\n },\n {\n icon: 'person_pin',\n url: '#nearby'\n }\n ]\n };\n }\n};\n
'},cTen:function(t,e){t.exports=''},ca5t:function(t,e){t.exports='New in 8.61.0
@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/picker/picker';\n@use 'balm-ui/components/datepicker/datepicker';\n@use 'balm-ui/components/rangepicker/rangepicker';\n
import Vue from 'vue';\nimport UiRangepicker from 'balm-ui/components/rangepicker';\n\n// Optional. Overwrite `<ui-rangepicker>` props with default value.\nVue.use(UiRangepicker, {\n // some props\n});\n
'},cc0D:function(t,e){t.exports='<ui-chips>\n <ui-chip v-for="(item, index) in actionList" :key="index" :icon="item.icon">\n {{ item.name }}\n </ui-chip>\n</ui-chips>\n
export default {\n data() {\n return {\n actionList: [\n {\n icon: 'wb_sunny',\n name: 'Turn on lights'\n },\n {\n icon: 'bookmark',\n name: 'Bookmark'\n },\n {\n icon: 'alarm',\n name: 'Set alarm'\n },\n {\n icon: 'directions',\n name: 'Get directions'\n }\n ]\n };\n }\n};\n
'},coAf:function(t,e){t.exports='<div class="demo-content">\n <ui-menu-anchor absolute>\n <ui-button raised @click="$balmUI.onOpen('open')">Show Menu</ui-button>\n\n <ui-menu v-model="open" @selected="onSelected" @cancel="onCancel">\n <ui-menuitem nested>\n <ui-menuitem>\n <ui-menuitem-icon>\n <svg-selected></svg-selected>\n </ui-menuitem-icon>\n <ui-menuitem-text>Single</ui-menuitem-text>\n </ui-menuitem>\n <ui-menuitem disabled>\n <ui-menuitem-icon>\n <svg-selected></svg-selected>\n </ui-menuitem-icon>\n <ui-menuitem-text>1.15</ui-menuitem-text>\n </ui-menuitem>\n <ui-menuitem>\n <ui-menuitem-icon>\n <svg-selected></svg-selected>\n </ui-menuitem-icon>\n <ui-menuitem-text>Double</ui-menuitem-text>\n </ui-menuitem>\n <ui-menuitem selected>\n <ui-menuitem-icon>\n <svg-selected></svg-selected>\n </ui-menuitem-icon>\n <ui-menuitem-text>Custom: 1.2</ui-menuitem-text>\n </ui-menuitem>\n </ui-menuitem>\n <ui-item-divider></ui-item-divider>\n <ui-menuitem>\n <ui-menuitem-text>Add space before paragraph</ui-menuitem-text>\n </ui-menuitem>\n <ui-menuitem>\n <ui-menuitem-text>Add space after paragraph</ui-menuitem-text>\n </ui-menuitem>\n <ui-item-divider></ui-item-divider>\n <ui-menuitem>\n <ui-menuitem-text>Custom spacing...</ui-menuitem-text>\n </ui-menuitem>\n </ui-menu>\n </ui-menu-anchor>\n</div>\n
export default {\n data() {\n return {\n open: false\n };\n },\n methods: {\n onSelected(data) {\n console.log('onSelected', data);\n },\n onCancel() {\n console.log('onCancel');\n }\n }\n};\n
.demo-content {\n position: relative;\n}\n
'},ct3n:function(t,e){t.exports='<div class="demo-content">\n <ui-button @click="$balmUI.onOpen('open')">Open Menu</ui-button>\n <ui-menu\n v-model="open"\n :items="[\n 'Back',\n 'Forward',\n 'Reload',\n '-',\n 'Help & Feedback',\n 'Settings'\n ]"\n ></ui-menu>\n</div>\n
export default {\n data() {\n return {\n open: false\n };\n }\n};\n
.demo-content {\n position: relative;\n}\n
'},cyP6:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},d5FF:function(t,e){t.exports='Lists are continuous, vertical indexes of text or images.
'},d5wo:function(t,e){t.exports='<ui-file\n accept="image/*"\n multiple\n preview\n @change="$balmUI.onChange('files', $event)"\n></ui-file>\n<transition-group class="preview-list" name="list" tag="ul">\n <li class="item" v-for="(file, index) in files" :key="file.tmpId">\n <div class="inner">\n <span class="preview" :style="setBg(file)"></span>\n <span class="name">{{ file.name }}</span>\n </div>\n </li>\n</transition-group>\n
export default {\n data() {\n return {\n files: []\n };\n },\n methods: {\n setBg({ previewSrc }) {\n return previewSrc ? { backgroundImage: `url(${previewSrc})` } : {};\n }\n }\n};\n
/* Sass code */\n.list-enter,\n.list-leave-to {\n opacity: 0;\n transform: translateY(100%);\n}\n.list-leave-active {\n position: absolute;\n}\n\n.preview-list {\n display: flex;\n flex-wrap: wrap;\n padding: 1em 0 0 1em;\n position: relative;\n & > .item {\n width: 12.5%;\n padding-right: 1em;\n margin-bottom: 1em;\n list-style: none;\n transition: all 1s;\n .inner {\n width: 100%;\n }\n .preview {\n display: block;\n width: 100%;\n height: 0;\n padding-bottom: 100%;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n border: 1px solid #ddd;\n border-radius: 3px;\n }\n .name {\n display: block;\n width: 100%;\n line-height: 1.8em;\n text-align: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n }\n}\n
'},dAAR:function(t,e,o){(function(t,e){!function(t,o){"use strict";if(!t.setImmediate){var d,n=1,l={},a=!1,i=t.document,c=Object.getPrototypeOf&&Object.getPrototypeOf(t);c=c&&c.setTimeout?c:t,"[object process]"==={}.toString.call(t.process)?d=function(t){e.nextTick((function(){s(t)}))}:function(){if(t.postMessage&&!t.importScripts){var e=!0,o=t.onmessage;return t.onmessage=function(){e=!1},t.postMessage("","*"),t.onmessage=o,e}}()?function(){var e="setImmediate$"+Math.random()+"$",o=function(o){o.source===t&&"string"===typeof o.data&&0===o.data.indexOf(e)&&s(+o.data.slice(e.length))};t.addEventListener?t.addEventListener("message",o,!1):t.attachEvent("onmessage",o),d=function(o){t.postMessage(e+o,"*")}}():t.MessageChannel?function(){var t=new MessageChannel;t.port1.onmessage=function(t){s(t.data)},d=function(e){t.port2.postMessage(e)}}():i&&"onreadystatechange"in i.createElement("script")?function(){var t=i.documentElement;d=function(e){var o=i.createElement("script");o.onreadystatechange=function(){s(e),o.onreadystatechange=null,t.removeChild(o),o=null},t.appendChild(o)}}():d=function(t){setTimeout(s,0,t)},c.setImmediate=function(t){"function"!==typeof t&&(t=new Function(""+t));for(var e=new Array(arguments.length-1),o=0;o<ui-tab-bar v-model="active" class="custom-demo-tab-bar">\n <ui-tab\n v-for="(tab, index) in tabs"\n :key="index"\n type="textWithIcon"\n :icon="tab.icon"\n min-width\n content-indicator\n >\n {{ tab.text }}\n </ui-tab>\n</ui-tab-bar>\n
/* Sass code */\n.custom-demo-tab-bar {\n .mdc-tab {\n @include mdc-typography(subtitle1);\n @include mdc-tab-fixed-width(120px);\n @include mdc-tab-text-label-color($material-color-blue-600);\n @include mdc-tab-icon-color($material-color-blue-600);\n }\n .mdc-tab__ripple {\n @include mdc-states($material-color-yellow-700);\n }\n .mdc-tab--active {\n @include mdc-tab-text-label-color($material-color-blue-900);\n @include mdc-tab-icon-color($material-color-blue-900);\n }\n .mdc-tab-indicator {\n @include mdc-tab-indicator-underline-height(5px);\n @include mdc-tab-indicator-underline-color($material-color-yellow-700);\n }\n}\n
'},dK4b:function(t,e){t.exports=""},dL4K:function(t,e){t.exports='<ui-autocomplete></ui-autocomplete>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | Styles the autocomplete as an outlined text field. (label or placeholder required) | |
model (v-model ) | string, number | '' | Mandatory. | |
source | array | [] | Defines the data to use, must be specified. | |
sourceFormat | object | { label: 'label', value: 'value' } | Defines the data source format. | 8.10.0 |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . | |
label | string | '' | A text caption or description for the autocomplete, which use the input's placeholder attribute instead. | |
placeholder | string | null | The placeholder attribute of the <input> . | |
disabled | boolean | false | Styles the autocomplete as a disabled text field. | |
required | boolean | false | Styles the autocomplete as a required text field. | |
autofocus | boolean | false | If set to true the first item will automatically be focused when the menu is shown. | |
delay | number | 300 | The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive. | |
minlength | number | 1 | The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items. | |
remote | boolean | false | Get data by AJAX. Default usage for local data. | |
highlight | boolean | false | Styles the autocomplete suggestion value as a strong text | 8.12.0 |
filterKeywords | boolean | false | Enables the filter keywords suggestion. | 8.56.0 |
fullwidth | boolean | false | Styles the autocomplete as a full width text field. | |
endAligned | boolean | false | Styles the autocomplete with an end-aligned input. | |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. (No need to configure withLeadingIcon ) | |
withLeadingIcon | boolean, string | false | Styles the autocomplete as a text field with a leading icon. (Use with before slot) | |
withTrailingIcon | boolean, string | false | Styles the autocomplete as a text field with a trailing icon. (Use with after slot) | |
inside | boolean | false | Styles for the overflow inside component (e.g. in <ui-dialog> ) | 8.53.0 |
source
prop. There are two supported formats:[ 'Choice1', 'Choice2' ]
label
and value
key): [ { label: 'Choice1', value: 'value1' }, ... ]
You can customize your properties by
sourceFormat
prop
Name | Props | Description |
---|---|---|
default | The default slot holds the label for the autocomplete. | |
before | iconClass | The before slot holds a custom leading icon. |
after | iconClass | The before slot holds a custom trailing icon. |
Name | Type | Description |
---|---|---|
input | function(value: string|number) | Emits when the autocomplete value is changed. |
search | function(keywords: string) | Emits when the autocomplete value is changed. Applicable only for the remote autocomplete. |
selected | function(item: object) | Emits when the autocomplete item is selected. |
selected
event return data:
{\n label: 'Choice 1',\n value: 'value 1',\n // more custom fields\n}\n
NOTE: If you are not using
v-model
, you should listen for the autocomplete using@input
and update themodel
prop.
Automatic
<ui-autocomplete v-model="value"></ui-autocomplete>\n
Manual
<ui-autocomplete\n :model="value"\n @input="$balmUI.onChange('value', $event)"\n></ui-autocomplete>\n
<ui-list :type="2">\n <ui-item v-for="i in 3" :key="i">\n <ui-item-text-content>\n <ui-item-text1>Line item</ui-item-text1>\n <ui-item-text2>Secondary text</ui-item-text2>\n </ui-item-text-content>\n </ui-item>\n</ui-list>\n
'},dbRp:function(t,e){t.exports='<ui-list role="group">\n <template v-for="(item, index) in items">\n <ui-item-divider v-if="item === '-'" :key="index"></ui-item-divider>\n <ui-item v-else :key="index">\n <ui-item-text-content>{{ item.text }}</ui-item-text-content>\n <ui-item-last-content>\n <ui-checkbox\n v-model="checkedValues"\n :value="item.value"\n @click.native.stop\n ></ui-checkbox>\n </ui-item-last-content>\n </ui-item>\n </template>\n</ui-list>\n
export default {\n data() {\n return {\n checkedValues: []\n };\n }\n};\n
'},ddae:function(t,e,o){var d={"./alert-dialog/demo1.md":"vvy0","./alert-dialog/demo2.md":"Ukfz","./alert/demo1.md":"XXab","./anchor/demo1.md":"DmyQ","./anchor/demo2.md":"pHdh","./autocomplete/demo1.md":"Nu9s","./autocomplete/demo2.md":"Z/7x","./badge/demo1.md":"mzL3","./badge/demo2.md":"mWiE","./banner/demo1.md":"s3bq","./bottom-navigation/demo1.md":"BiEC","./bottom-sheet/demo1.md":"2B7b","./button/demo1.md":"sK9k","./card/demo1.md":"XfPe","./card/demo2.md":"FUGW","./card/demo3.md":"aCmL","./checkbox/demo1.md":"FKpq","./checkbox/demo2.md":"AcTu","./chips/demo1.md":"lSBW","./chips/demo2.md":"FlZy","./chips/demo3.md":"2qo9","./chips/demo4.md":"cc0D","./collapse/demo1.md":"03rS","./collapse/demo2.md":"MXKf","./collapse/demo3.md":"eVk5","./confirm-dialog/demo1.md":"vDum","./confirm-dialog/demo2.md":"33rG","./copy/demo1.md":"QHM2","./datepicker/demo1.md":"BnzD","./datepicker/demo2.md":"kvTy","./datepicker/demo3.md":"8bja","./datepicker/demo4.md":"EGEq","./datepicker/demo5.md":"b+2B","./datepicker/demo6.md":"ZqYw","./debounce/demo1.md":"X9hg","./dialog/demo1.md":"poPe","./dialog/demo2.md":"z9gS","./divider/demo1.md":"qrnz","./divider/demo2.md":"/5LR","./drawer/demo1.md":"4L9t","./drawer/demo2.md":"KMbe","./drawer/demo3.md":"llx4","./drawer/demo4.md":"mltC","./drawer/demo5.md":"KPZJ","./editor/demo1.md":"SWtR","./editor/demo2.md":"sjc1","./editor/demo3.md":"pep1","./elevation/demo1.md":"+Lqg","./elevation/demo2.md":"P8Fu","./event/demo1.md":"NEwY","./event/demo2.md":"LCqv","./event/demo3.md":"Ngmu","./event/demo4.md":"GuLE","./fab/demo1.md":"Js8M","./fab/demo2.md":"Hs+w","./fab/demo3.md":"V3IR","./fab/demo4.md":"0Uhr","./file/demo1.md":"xNpe","./file/demo2.md":"d5wo","./file/demo3.md":"uaR4","./form/demo1.md":"k3iM","./form/demo2.md":"Rfpz","./form/demo3.md":"+4iP","./grid/demo1.md":"huQ7","./grid/demo2.md":"1Pfi","./grid/demo3.md":"Qm85","./grid/demo4.md":"g+3Q","./grid/demo5.md":"ynvr","./grid/demo6.md":"PvR7","./grid/demo7.md":"eLxf","./grid/demo8.md":"U9VE","./grid/demo9.md":"v/FX","./icon-button/demo1.md":"ejpW","./icon-button/demo2.md":"bg4W","./icon-button/demo3.md":"nbki","./icon/demo1.md":"+eER","./icon/demo2.md":"kmw8","./image-list/demo1.md":"W0l+","./image-list/demo2.md":"tU+b","./lazyload/demo1.md":"lR9/","./list/demo1.md":"+LzF","./list/demo2.md":"dZxO","./list/demo3.md":"7/oN","./list/demo4.md":"mFG2","./list/demo5.md":"Q9WI","./list/demo6.md":"FArz","./list/demo7.md":"dbRp","./list/demo8.md":"keYf","./longpress/demo1.md":"dnz9","./menu/demo1.md":"ct3n","./menu/demo2.md":"coAf","./pagination/demo1.md":"VrLe","./pagination/demo2.md":"SBcc","./pagination/demo3.md":"PktF","./pagination/demo4.md":"+J09","./progress/demo1.md":"hnWv","./radio/demo1.md":"+g3H","./rangepicker/demo1.md":"QM0m","./ripple/demo1.md":"kSIg","./ripple/demo2.md":"C+ac","./ripple/demo3.md":"o6KT","./segmented-button/demo1.md":"MWjS","./segmented-button/demo2.md":"zyi9","./segmented-button/demo3.md":"h8GA","./select/demo1.md":"/tRe","./select/demo2.md":"laUp","./select/demo3.md":"FME5","./select/demo4.md":"yAg/","./shape/demo1.md":"hmYx","./shape/demo2.md":"5qvK","./side-sheet/demo1.md":"6Xxh","./skeleton/demo1.md":"UJv8","./skeleton/demo2.md":"g643","./skeleton/demo3.md":"WynS","./slider/demo1.md":"PGPd","./slider/demo2.md":"iK6+","./snackbar/demo1.md":"6iKR","./spinner/demo1.md":"5J1c","./spinner/demo2.md":"q2Q0","./styles.md":"aKLO","./switch/demo1.md":"0HsE","./table/demo1.md":"2Esg","./table/demo2.md":"OSKY","./table/demo3.md":"PWMJ","./tabs/demo1.md":"jne1","./tabs/demo2.md":"cO62","./tabs/demo3.md":"I9yt","./tabs/demo4.md":"Hpe4","./tabs/demo5.md":"bDYD","./tabs/demo6.md":"EQdG","./tabs/demo7.md":"dF2i","./tabs/demo8.md":"5VFu","./tabs/demo9.md":"Romc","./textfield/demo1.md":"Po75","./textfield/demo2.md":"RXEe","./textfield/demo3.md":"tZAW","./textfield/demo4.md":"WIne","./textfield/demo5.md":"NDOf","./textfield/demo6.md":"yUax","./textfield/demo7.md":"Q1zD","./theme/demo1.md":"1fpl","./theme/demo2.md":"Np/8","./theme/demo3.md":"fZSO","./theme/demo4.md":"p/y3","./toast/demo1.md":"Fd0s","./tooltip/demo1.md":"Kucm","./tooltip/demo2.md":"UMkk","./top-app-bar/demo1.md":"XoHX","./tree/demo1.md":"rHP+","./tree/demo2.md":"W4Tv","./tree/demo3.md":"2z5r","./typography/demo1.md":"/epX","./validator/demo1.md":"QwAn","./validator/demo2.md":"C1m5","./validator/demo3.md":"zrtu"};function n(t){var e=l(t);return o(e)}function l(t){if(!o.o(d,t)){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}return d[t]}n.keys=function(){return Object.keys(d)},n.resolve=l,t.exports=n,n.id="ddae"},dgcT:function(t,e){t.exports='<ui-side-sheet></ui-side-sheet>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | \u4fa7\u8fb9\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001 |
closable | boolean | false | \u5c55\u73b0\u5173\u95ed\u6309\u94ae |
Name | Props | Description |
---|---|---|
title | title \u63d2\u69fd\u5305\u542b\u4fa7\u8fb9\u52a8\u4f5c\u8868\u7684\u6807\u9898\u53ca HTML | |
default | default \u63d2\u69fd\u5305\u542b\u4fa7\u8fb9\u52a8\u4f5c\u8868\u7684\u5185\u5bb9\u53ca HTML | |
actions | actions \u63d2\u69fd\u5305\u542b\u4fa7\u8fb9\u52a8\u4f5c\u8868\u7684\u52a8\u4f5c\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u4fa7\u8fb9\u52a8\u4f5c\u8868\u9690\u85cf\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u4fa7\u8fb9\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-side-sheet v-model="open"></ui-side-sheet>\n
\u624b\u52a8
<ui-side-sheet\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-side-sheet>\n
<ui-button v-longpress="config" outlined>Click...</ui-button>\n
export default {\n data() {\n return {\n config: {\n callback: () => {\n this.$alert('done');\n }\n }\n };\n }\n};\n
'},ds8L:function(t,e){t.exports='@use 'balm-ui/components/pagination' with (\n $height: 32px\n);\n
'},duqc:function(t,e){t.exports='<ui-form-field>\n <ui-textfield maxlength="20">\n <template #before>\n <ui-textfield-icon>event</ui-textfield-icon>\n </template>\n Floating Label Text\n <template #after>\n <ui-textfield-icon trailing>delete</ui-textfield-icon>\n </template>\n </ui-textfield>\n <ui-textfield-helper with-counter> Helper message </ui-textfield-helper>\n</ui-form-field>\n
Component | Description |
---|---|
<ui-textfield> | \u6587\u672c\u6846\u5143\u7d20 |
<ui-textfield-icon> | \u6587\u672c\u6846\u9996/\u5c3e\u56fe\u6807\u5143\u7d20 |
<ui-textfield-helper> | \u5e2e\u52a9\u6587\u672c\u548c\u5b57\u7b26\u8ba1\u6570\u5668\u5143\u7d20 |
@use '@material/menu-surface' with (\n $fade-in-duration: 0.03s,\n $fade-out-duration: 0.075s,\n $scale-duration: 0.12s,\n $min-distance-from-edge: 32px,\n $z-index: 8, // One above `<ui-dialog>`\n $shape-radius: medium\n);\n
@use '@material/menu' with (\n $ink-color: rgba(\n theme-color.prop-value(on-surface),\n theme-color.text-emphasis(high)\n ),\n\n $width-base: 56px,\n $min-width: 2 * $width-base\n);\n
'},eACw:function(t,e){t.exports='\u6ed1\u52a8\u6761\u5141\u8bb8\u7528\u6237\u4ece\u4e00\u7cfb\u5217\u503c\u4e2d\u8fdb\u884c\u9009\u62e9\u3002
'},eLxf:function(t,e){t.exports='<ui-grid class="demo-grid max-width" position="left">\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n</ui-grid>\n
.demo-grid.max-width {\n max-width: 1280px;\n}\n
'},eS3m:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/menu/menu';\n@use 'balm-ui/components/list/list';\n
import Vue from 'vue';\nimport UiMenuComponents from 'balm-ui/components/menu';\n\nVue.use(UiMenuComponents, {\n // Optional. Overwrite `<ui-menu>` props with default value.\n UiMenu: {\n // some props\n }\n});\n
'},eVk5:function(t,e){t.exports='<ui-collapse v-for="i in 3" :key="i" with-icon :ripple="1">\n <template #expand-more-icon>\n <ui-icon>arrow_drop_down</ui-icon>\n </template>\n <template #expand-less-icon>\n <ui-icon>arrow_right</ui-icon>\n </template>\n <template #toggle>\n <div>Heading {{ i }}</div>\n </template>\n <div>Content {{ i }}</div>\n</ui-collapse>\n
'},eiR6:function(t,e){t.exports='$confirm(message)
$confirm(options)
interface VueInstance {\n $confirm(options: string | object): Promise<boolean>;\n}\n
Option | Type | Default | Description |
---|---|---|---|
className | string | '' | The custom class name for the confirm dialog. |
title | string | '' | The title of the confirm dialog. |
state | string | '' | State type. |
stateOutlined | boolean | false | Show outlined state. |
message | string | '' | The content to be displayed in the confirm dialog. |
raw | boolean | false | Rendered plain HTML. |
acceptText | string | 'OK' | Accept button content. |
cancelText | string | 'Cancel' | Cancel button content. |
callback | function | false | Handle some event when the confirm button is clicked. |
interface ConfirmDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Usage 1
$confirm({\n message,\n callback(result) {\n // ...\n }\n});\n
Usage 2 (Recommended)
$confirm(message).then((result) => {\n // ...\n});\n
result
is a boolean value indicating whether OK or Cancel was selected (true
means OK).
$confirm
without .vue
componentNew in 8.1.0
import { useConfirm } from 'balm-ui';\n// OR\n// import { useConfirm } from 'balm-ui/plugins/confirm';\n\nconst $confirm = useConfirm();\n$confirm('Hello BalmUI');\n
'},eihu:function(t,e){t.exports='\u7ebf\u6027\u8fdb\u5ea6\u6761\u901a\u8fc7\u6cbf\u56fa\u5b9a\u7684\u53ef\u89c1\u8f68\u9053\u7684\u957f\u5ea6\u8bbe\u7f6e\u6307\u793a\u5668\u52a8\u753b\u6765\u663e\u793a\u8fdb\u5ea6\u3002
'},ejpW:function(t,e){t.exports='<!-- Material Icons -->\n<ui-icon-button icon="favorite"></ui-icon-button>\n<ui-icon-button icon="airplanemode_active"></ui-icon-button>\n\n<!-- SVG Icon -->\n<ui-icon-button>\n <svg-logo></svg-logo>\n</ui-icon-button>\n\n<!-- Disabled Buttons -->\n<ui-icon-button disabled icon="airplanemode_active"></ui-icon-button>\n<ui-icon-button disabled>\n <svg-logo></svg-logo>\n</ui-icon-button>\n
'},erkp:function(t,e){t.exports='<ui-drawer type="dismissible"></ui-drawer>\n<ui-drawer-app-content><!-- Content --></ui-drawer-app-content>\n
'},"evv+":function(t,e){t.exports='
<ui-drawer type="dismissible">
only
'},"f+il":function(t,e){t.exports='New in 8.29.0
$balmUI
interface BalmUIEvent {\n onChange(property: string, value: any, fn?: Function);\n\n onOpen(property: string, fn?: Function);\n onShow(property: string, fn?: Function);\n\n onClose(property: string, fn?: Function);\n onHide(property: string, fn?: Function);\n}\n\ninterface VueInstance {\n $balmUI: BalmUIEvent;\n}\n
update the data object of the Vue instance to new value
$balmUI.onChange(property, value);\n
update the data object of the Vue instance to true
$balmUI.onOpen(property);\n$balmUI.onShow(property);\n
update the data object of the Vue instance to false
$balmUI.onClose(property);\n$balmUI.onHide(property);\n
Name | Type | Default | Description |
---|---|---|---|
property | string | '' | Update a specified Vue instance data object. |
value | any | undefined | New value of a specified Vue instance data object. Applicable only for $balmUI.onChange . |
fn | function | noop | After method to handle. |
balmResize
(better than resize
)
balmScroll
(better than scroll
)
export default {\n mounted() {\n this.init();\n window.addEventListener('balmResize', this.init);\n },\n beforeDestroy() {\n window.removeEventListener('balmResize', this.init);\n },\n methods: {\n init() {\n // ...\n }\n }\n};\n
New in 8.2.1
$bus.on(event, callback)
$bus.once(event, callback)
(New in 8.51.0)
$bus.off(event, callback)
$bus.emit(eventName, ...args)
interface BalmUIEventBus {\n on(event: string | string[], callback: Function); // Listen for a custom event on the current vm.\n once(event: string, callback: Function); // Listen for a custom event, but only once.\n off(event: string | string[], callback?: Function); // Remove custom event listener(s).\n emit(eventName: string, ...args); // Trigger an event on the current instance.\n}\n\ninterface VueInstance {\n $bus: BalmUIEventBus;\n}\n
Name | Type | Default | Description |
---|---|---|---|
event , eventName | string | Custom event name for the global communication. | |
args | any | The arguments of custom event function. | |
callback | function | Custom event function. |
// `/path/to/awesome.vue`\n\nexport default {\n mounted() {\n this.$bus.on('custom-event', (msg) => {\n console.log(msg);\n });\n },\n beforeDestroy() {\n this.$bus.off('custom-event');\n }\n};\n
$bus
without .vue
component// `/path/to/awesome.js`\n\nimport { useBus } from 'balm-ui';\n// OR\n// import { useBus } from 'balm-ui/plugins/event';\n\nconst $bus = useBus();\n$bus.emit('custom-event', 'Hello BalmUI');\n
'},"f/Dl":function(t,e){t.exports='\u4e00\u6b3e\u73b0\u4ee3\u7684\u6240\u89c1\u5373\u6240\u5f97\u7f16\u8f91\u5668\uff08\u57fa\u4e8e Quill \u4e14\u5185\u7f6e\u4e86\u4e30\u5bcc\u7684\u6269\u5c55\u529f\u80fd\uff09\u3002
'},f6Sl:function(t,e){t.exports='New in 6.7.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},fSlj:function(t,e){t.exports='Alerts provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
'},fZSO:function(t,e){t.exports='New in 6.2.1
<div class="demo-theme-color-section__row">\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Text on primary</legend>\n\n <div class="demo-theme-color-group">\n <div :class="['demo-theme-text-row', $theme.getThemeClass('primary-bg')]">\n <span\n :class="['demo-theme-text-style', $$theme.getThemeClass('on-primary')]"\n >\n Text\n </span>\n <span\n :class="['demo-theme-text-style', $$theme.getThemeClass('on-primary'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Text on secondary</legend>\n\n <div class="demo-theme-color-group">\n <div\n :class="['demo-theme-text-row', $$theme.getThemeClass('secondary-bg')]"\n >\n <span\n :class="['demo-theme-text-style', $$theme.getThemeClass('on-secondary')]"\n >\n Text\n </span>\n <span\n :class="['demo-theme-text-style', $$theme.getThemeClass('on-secondary'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n</div>\n
'},fahJ:function(t,e){t.exports='import Vue from 'vue';\nimport vAnchor from 'balm-ui/directives/anchor';\n\nVue.directive(vAnchor.name, vAnchor);\n
'},ffvu:function(t,e){t.exports='<div v-badge></div>\n
v-badge="count"
v-badge.overlap="count"
v-badge.dot
Value | Type | Default | Description |
---|---|---|---|
count | number | 0 | Number to show in badge. |
'},fkZ9:function(t,e){t.exports='maximum count:
99
<div v-debounce></div>\n
interface Debounce {\n callback: Function;\n delay?: number; // defaults: 250 ms\n}\n
'},fvS5:function(t,e){t.exports='<ui-textfield-icon><!-- the material design icon name --></ui-textfield-icon>\n
Name | Type | Default | Description |
---|---|---|---|
trailing | boolean | false | \u5c55\u793a\u4ee5\u5c3e\u56fe\u6807\u7684\u6837\u5f0f |
unclickable | boolean | false | \u5c55\u793a\u4e0d\u53ef\u70b9\u51fb\u7684\u6837\u5f0f |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u6807\u7ec4\u4ef6\u53ca HTML\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u6587\u672c\u6846\u56fe\u6807\u65f6\u89e6\u53d1 |
<ui-pagination></ui-pagination>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
page | number | 1 | \u9875\u7801 | |
total | number | 0 | \u6570\u636e\u603b\u6570 | |
pageSpan | number, boolean | 3 | \u5c55\u793a\u5f53\u524d\u9875\u7801\u7684\u524d N \u9875\uff08\u6700\u5c0f\u503c\uff1a3 \uff09 | |
showTotal | boolean | false | \u663e\u793a\u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df | |
pageSize | number, array | 10 | \u6bcf\u9875\u5c55\u793a\u7684\u6570\u636e\u91cf | |
pageSizeText | string, array | 'Rows per page' | \u6bcf\u9875\u6570\u636e\u91cf\u4fe1\u606f\u5c55\u793a\u7684\u524d/\u540e\u6587\u5b57 | |
ofText | string | 'of' | \u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df\u4e2d\u7684 of \u6587\u5b57 | 8.47.0 |
unitText | string | '' | \u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df\u4e2d\u7684 \u5355\u4f4d \u6587\u5b57 | 8.56.0 |
showJumper | boolean | false | \u663e\u793a\u8df3\u8f6c\u533a\u57df | |
jumperText | string, array | 'Goto' | \u8df3\u8f6c\u533a\u57df\u5c55\u793a\u7684\u524d/\u540e\u6587\u5b57 | |
jumperButtonOutlined | boolean | false | \u8df3\u8f6c\u6309\u94ae\u542f\u7528\u8f6e\u5ed3\u6309\u94ae\u6837\u5f0f | 8.20.0 |
jumperButtonText | string | '' | \u8df3\u8f6c\u6309\u94ae\u6587\u5b57 | |
position | string | '' | \u5206\u9875\u6392\u7248\u4f4d\u7f6e | |
mini | boolean | false | \u4f7f\u7528\u8ff7\u4f60\u6a21\u5f0f |
interface Pagination {\n position: 'left' | 'center' | 'right';\n}\n
Name | Props | Description | Version |
---|---|---|---|
default | currentMinRow , currentMaxRow | \u81ea\u5b9a\u4e49\u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df | 8.11.0 |
first | \u81ea\u5b9a\u4e49\u9996\u9875\u6309\u94ae\u56fe\u6807 | ||
prev | \u81ea\u5b9a\u4e49\u4e0a\u9875\u6309\u94ae\u56fe\u6807 | ||
next | \u81ea\u5b9a\u4e49\u4e0b\u9875\u6309\u94ae\u56fe\u6807 | ||
last | \u81ea\u5b9a\u4e49\u5c3e\u9875\u6309\u94ae\u56fe\u6807 |
Name | Type | Description |
---|---|---|
change | function(page: number) | \u9875\u7801\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5206\u9875\u9875\u7801\u72b6\u6001\u5e76\u66f4\u65b0page
\u5c5e\u6027
\u81ea\u52a8
<ui-pagination v-model="page"></ui-pagination>\n
\u624b\u52a8
<ui-pagination\n :page="page"\n @change="$balmUI.onChange('page', $event)"\n></ui-pagination>\n
<ui-grid class="demo-grid">\n <ui-grid-cell class="demo-cell" :columns="{default:6, tablet:8}">\n 6 (8 tablet)\n </ui-grid-cell>\n <ui-grid-cell class="demo-cell" :columns="{default:4, tablet:6}">\n 4 (6 tablet)\n </ui-grid-cell>\n <ui-grid-cell class="demo-cell" :columns="{default:2, phone:4}">\n 2 (4 phone)\n </ui-grid-cell>\n</ui-grid>\n
'},"g+qP":function(t,e){t.exports='@use '@material/data-table' with (\n $fill-color: surface,\n $header-row-fill-color: surface,\n $row-fill-color: inherit,\n $selected-row-fill-color: rgba(theme-color.prop-value(primary), 0.04),\n $checked-icon-color: primary,\n $divider-color: rgba(theme-color.prop-value(on-surface), 0.12),\n $divider-size: 1px,\n $row-hover-fill-color: rgba(theme-color.prop-value(on-surface), 0.04),\n\n $header-row-text-color: rgba(theme-color.prop-value(on-surface), 0.87),\n $row-text-color: rgba(theme-color.prop-value(on-surface), 0.87),\n\n $sort-icon-color: rgba(theme-color.prop-value(on-surface), 0.6),\n $sort-icon-active-color: rgba(\n theme-color.prop-value(on-surface),\n 0.87\n ),\n $sort-icon-density-scale: -5,\n\n $shape-radius: medium,\n $stroke-size: 1px,\n $stroke-color: rgba(theme-color.prop-value(on-surface), 0.12),\n\n $row-height: 52px,\n $header-row-height: get-header-row-height($row-height),\n $cell-leading-padding: 16px,\n $cell-trailing-padding: 16px,\n\n $minimum-row-height: 36px,\n $maximum-row-height: $row-height,\n $default-density-scale: density-variables.$default-scale,\n);\n
'},g5O8:function(t,e){t.exports='New in 8.42.0
- Rename variables
$cell-height
->$row-height
$header-cell-height
->$header-row-height
$minimum-cell-height
->$minimum-row-height
$maximum-cell-height
->$maximum-row-height
@use 'balm-ui/components/core';\n@use 'balm-ui/components/image-list/image-list';\n
import Vue from 'vue';\nimport UiImageListComponents from 'balm-ui/components/image-list';\n\nVue.use(UiImageListComponents, {\n // Optional. Overwrite `<ui-image-list>` props with default value.\n UiImageList: {\n // some props\n },\n // Optional. Overwrite `<ui-image-item>` props with default value.\n UiImageItem: {\n // some props\n }\n});\n
'},g643:function(t,e){t.exports='<ui-skeleton avatar :paragraph="{ rows: 4 }"></ui-skeleton>\n
'},g8Ta:function(t,e){t.exports='<ui-card>\n <ui-card-content>\n <ui-card-media>\n <ui-card-media-content></ui-card-media-content>\n </ui-card-media>\n <ui-card-text></ui-card-text>\n </ui-card-content>\n <ui-card-actions>\n <ui-card-buttons></ui-card-buttons>\n <ui-card-icons></ui-card-icons>\n </ui-card-actions>\n</ui-card>\n
Component | Description |
---|---|
<ui-card> | Mandatory. The main card element. |
<ui-card-content> | Optional. The main tappable area of the card. Typically contains most (or all) card content except <ui-card-actions> . Only applicable to cards that have a primary action that the main surface should trigger. |
<ui-card-media> | Optional. Media area that displays a custom background-image with background-size: cover . |
<ui-card-media-content> | Optional. An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image . |
<ui-card-text> | Optional. Additional text content. |
<ui-card-actions> | Optional. Row containing action buttons and/or icons. |
<ui-card-buttons> | Optional. A group of action buttons, displayed on the left side of the card (in LTR), adjacent to <ui-card-icons> . |
<ui-card-icons> | Optional. A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to <ui-card-buttons> . |
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-image-list>` props with default value.\n UiImageList: {\n // some props\n },\n // Optional. Overwrite `<ui-image-item>` props with default value.\n UiImageItem: {\n // some props\n }\n});\n
'},gT4Y:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/table/table';\n@use 'balm-ui/components/checkbox/checkbox'; // Required only for data table with row selection\n@use 'balm-ui/components/icon-button/icon-button'; // Required only for data table with column sorting\n@use 'balm-ui/components/pagination/pagination'; // Recommended\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiTable from 'balm-ui/components/table';\n\n// Optional. Overwrite `<ui-table>` props with default value.\nVue.use(UiTable, {\n // some props\n});\n
'},gak8:function(t,e){t.exports=''},"gfv+":function(t,e){t.exports='New in 8.29.0
<ui-textfield><!-- the label text --></ui-textfield>\n
<ui-textfield>
\u7c7b\u578b
0
: 'filled'
1
: 'outlined'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u6587\u672c\u6846\u7c7b\u578b |
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder \uff09 |
model (v-model ) | string, number | '' | \u6587\u672c\u6846\u503c |
inputType | string | 'text' | \u539f\u751f <input> \u7c7b\u578b\uff1atext , number , password , \u7b49 |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
label | string | '' | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff |
placeholder | string | null | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837\u5f0f |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f |
endAligned | boolean | false | \u8f93\u5165\u6587\u672c\u53f3\u5bf9\u9f50 |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
withLeadingIcon | boolean | false | \u542f\u7528\u9996\u56fe\u6807\u6837\u5f0f |
withTrailingIcon | boolean | false | \u542f\u7528\u5c3e\u56fe\u6807\u6837\u5f0f |
prefixText | string | '' | \u8bbe\u7f6e\u6587\u672c\u524d\u7f00\u5185\u5bb9 |
suffixText | string | '' | \u8bbe\u7f6e\u6587\u672c\u540e\u7f00\u5185\u5bb9 |
withCounter | boolean | false | \u542f\u7528\u5185\u90e8\u8ba1\u6570\u5668 |
helperTextId | string | null | \u5339\u914d <ui-textfield-helper> \u7684 id \u5c5e\u6027 |
attrs | object | {} | <input> \u6216 <textarea> \u7684\u5176\u4ed6\u5c5e\u6027 |
\u63d0\u793a\uff1a
withLeadingIcon
\u548cwithTrailingIcon
\u4ec5\u7528\u4e8e (\u975e<ui-textfield-icon>
) \u81ea\u5b9a\u4e49\u9996/\u5c3e\u56fe\u6807\uff0c\u901a\u5e38\u65e0\u9700\u914d\u7f6e
\u9664\u4e0a\u8ff0\u5185\u5bb9\u5916\uff0c\u4ee5\u4e0b\u5c5e\u6027\u8fd8\u53ef\u4ee5\u66ff\u4ee3\u5177\u6709\u76f8\u540c\u540d\u79f0\u7684 input \u6216 textarea \u5143\u7d20\u7684\u5c5e\u6027\uff1a
pattern
minlength
maxlength
\uff1a\u8ba1\u6570\u5668\u5fc5\u5907\u5c5e\u6027min
max
step
rows
cols
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
Name | Type | Description |
---|---|---|
focus | function(event: object) | \u6587\u672c\u6846\u805a\u7126\u65f6\u89e6\u53d1 |
keydown | function(event: object) | \u6587\u672c\u6846\u4e2d\u6309\u4e0b\u952e\u76d8\u65f6\u89e6\u53d1 |
input | function(value: string) | \u6587\u672c\u6846\u4e2d\u8f93\u5165\u5185\u5bb9\u65f6\u89e6\u53d1 |
change | function(event: object) | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
enter | function(value: string) | \u6587\u672c\u6846\u4e2d\u6309\u4e0b Enter \u952e\u76d8\u65f6\u89e6\u53d1 |
blur | function(event: object) | \u6587\u672c\u6846\u5931\u53bb\u805a\u7126\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@input
\u76d1\u542c\u6587\u672c\u6846\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-textfield v-model="value"></ui-textfield>\n
\u624b\u52a8
<ui-textfield\n :model="value"\n @input="$balmUI.onChange('value', $event)"\n></ui-textfield>\n
<div v-tooltip="'Tips text'" aria-describedby="tooltip-id">Text</div>\n
'},h5ly:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiIcon from 'balm-ui/components/icon';\n\n// Optional. Overwrite `<ui-icon>` props with default value.\nVue.use(UiIcon, {\n // some props\n});\n
'},h8GA:function(t,e){t.exports='<ui-segmented-buttons v-model="checkedValue">\n <ui-segmented-button icon="favorite"></ui-segmented-button>\n <ui-segmented-button>Sample Text</ui-segmented-button>\n <ui-segmented-button>\n Sample Text\n <template #after="{ iconClass }">\n <ui-icon :class="iconClass">favorite</ui-icon>\n </template>\n </ui-segmented-button>\n</ui-segmented-buttons>\n
export default {\n data() {\n return {\n checkedValue: []\n };\n }\n};\n
'},hVhy:function(t,e){t.exports='<ui-chip><!-- the chip text --></ui-chip>\n
Name | Type | Default | Description |
---|---|---|---|
icon | string | '' | \u8bbe\u7f6e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
selected | boolean | false | \u5f53\u9009\u9879\u5361\u9009\u9879\u88ab\u9009\u4e2d\u65f6\u9690\u85cf\u9996\u56fe\u6807 |
removable | boolean | false | \u663e\u793a\u7528\u4e8e\u5220\u9664\u9009\u9879\u5361\u9009\u9879\u7684\u5c3e\u56fe\u6807\u3002\u4ec5\u7528\u4e8e\u8f93\u5165\u7c7b\u578b(input )\u7684\u9009\u9879\u5361\u3002 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u9879\u5361\u9009\u9879\u5185\u5bb9\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49\u9009\u9879\u5361\u9009\u9879\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u8f93\u5165\u7c7b\u578b(input )\u7684\u9009\u9879\u5361\u9009\u9879\u5c3e\u56fe\u6807 |
<ui-tab><!-- The tab text label --></ui-tab>\n
<ui-tab>
& <ui-tabs>
Types
0
: 'text'
1
: 'iconOnly'
2
: 'textWithIcon'
<ui-tab>
& <ui-tabs>
common PropsName | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. The permutation of tab labels. |
stacked | boolean | false | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally. |
minWidth | boolean | false | Optional. Indicates that the tab should shrink in size to be as narrow as possible without causing text to wrap. |
contentIndicator | boolean | false | Optional. Text label width-matching indicator. |
<ui-tab>
PropsName | Type | Default | Description |
---|---|---|---|
text | string | '' | Tab text. |
icon | string | '' | Tab icon. See Material Icons list. |
Name | Props | Description |
---|---|---|
default | The default slot holds the tab labels and can contain HTML. | |
icon | iconClass | The icon slot holds the custom icon and can contain HTML. |
indicator | The indicator slot holds the tab indicator component. |
<ui-tab>\n <template #icon="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-tab>\n
'},hmYx:function(t,e){t.exports='// Edit `/path/to/project/app/styles/global/_vendor.scss`\n@use '@material/shape' with (\n $small-component-radius: 4px,\n $medium-component-radius: 16px,\n $large-component-radius: 24px\n);\n
<div v-shape.small class="demo">4dp</div>\n<div v-shape class="demo">16dp</div>\n<div v-shape.large class="demo">24dp</div>\n
'},hnWv:function(t,e){t.exports='<figure>\n <ui-progress :progress="progress"></ui-progress>\n <figcaption>Determinate (Progress: {{progress }})</figcaption>\n</figure>\n\n<figure>\n <ui-progress indeterminate></ui-progress>\n <figcaption>Indeterminate</figcaption>\n</figure>\n\n<figure>\n <ui-progress :progress="0.5" :buffer="0.75"></ui-progress>\n <figcaption>Buffer</figcaption>\n</figure>\n
'},hsqG:function(t,e){t.exports='import Vue from 'vue';\nimport vCopy from 'balm-ui/directives/copy';\n\nVue.directive(vCopy.name, vCopy);\n
'},huQ7:function(t,e){t.exports='<ui-grid class="demo-grid">\n <ui-grid-cell class="demo-cell">4</ui-grid-cell>\n <ui-grid-cell class="demo-cell">4</ui-grid-cell>\n <ui-grid-cell class="demo-cell">4</ui-grid-cell>\n</ui-grid>\n
'},hyMg:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/banner/banner';\n
import Vue from 'vue';\nimport UiBanner from 'balm-ui/components/banner';\n\n// Optional. Overwrite `<ui-banner>` props with default value.\nVue.use(UiBanner, {\n // some props\n});\n
'},i1XV:function(t,e){t.exports='<ui-select-icon>
@use '@material/select/select-icon-theme' with (\n $icon-size: 24px,\n $dense-icon-size: 20px,\n $icon-horizontal-margin: 12px,\n\n $icon-color: rgba(theme-variables.prop-value(on-surface), 0.54),\n $disabled-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n )\n);\n
<ui-select>
@use '@material/select/select-theme' with (\n $arrow-padding: 52px,\n $label-padding: 16px,\n $height: 56px,\n $filled-baseline-top: 40px,\n $selected-text-height: 28px,\n $anchor-padding-left: 16px,\n $anchor-padding-left-with-leading-icon: 0,\n $anchor-padding-right: 0,\n $outlined-stroke-width: 2px,\n $default-width: 200px,\n $shape-radius: small,\n\n $minimum-height: 40px,\n $minimum-height-for-filled-label: 52px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n\n $ink-color: rgba(theme-variables.prop-value(on-surface), 0.87),\n $dropdown-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.54\n ),\n $label-color: rgba(theme-variables.prop-value(on-surface), 0.6),\n $focused-label-color: rgba(theme-variables.prop-value(primary), 0.87),\n $bottom-line-idle-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.42\n ),\n $bottom-line-hover-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n ),\n\n $fill-color: color.mix(\n theme-variables.prop-value(on-surface),\n theme-variables.prop-value(surface),\n 4%\n ),\n\n // Disabled Styles\n $disabled-label-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $disabled-ink-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $disabled-fill-color: color.mix(\n theme-variables.prop-value(on-surface),\n theme-variables.prop-value(surface),\n 2%\n ),\n $disabled-fill-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n ),\n $disabled-bottom-line-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n ),\n $disabled-dropdown-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $disabled-outline-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n ),\n\n $outlined-idle-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $outlined-hover-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n ),\n\n $label-position-y: 106%,\n $outline-label-offset: 16px,\n $outlined-label-position-y: get-outlined-label-position-y($height),\n $outlined-with-leading-icon-label-position-x: 32px,\n\n $dropdown-transition-duration: 150ms,\n // Transition durartions to active state\n $icon-active-fade-out-duration: 0.33 * $dropdown-transition-duration,\n $icon-active-fade-in-duration: 0.67 * $dropdown-transition-duration,\n // Transition durartions to inactive state\n $icon-inactive-fade-out-duration: 0.5 * $dropdown-transition-duration,\n $icon-inactive-fade-in-duration: 0.5 * $dropdown-transition-duration,\n\n // Error colors\n $error-color: error\n);\n
'},"iK6+":function(t,e){t.exports='<ui-slider v-model="value3" type="discrete" :step="10"></ui-slider>\n<ui-slider\n v-model="value4"\n type="discrete"\n :step="10"\n with-tick-marks\n></ui-slider>\n<ui-slider v-model="value5" type="discrete" :step="10"></ui-slider>\n
export default {\n data() {\n return {\n value3: 50,\n value4: 50,\n value5: [20, 50]\n };\n }\n};\n
'},iN8N:function(t,e){t.exports='<ui-icon-button></ui-icon-button>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean | false | \u5207\u6362\u72b6\u6001 |
icon | string | '' | \u8bbe\u7f6e\u5355\u4e2a\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
toggle | object | {} | \u8bbe\u7f6e\u5207\u6362\u6309\u94ae\u4e24\u4e2a\u72b6\u6001\u7684\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
\u901a\u8fc7 toggle.on
\u548c toggle.off
\u5c5e\u6027\u914d\u7f6e\u5207\u6362\u6309\u94ae\u72b6\u6001\u7684\u56fe\u6807
interface IconButton {\n toggle: {\n on: string;\n off: string;\n };\n}\n
Name | Props | Description |
---|---|---|
default | onClass , offClass | default \u63d2\u69fd\u5305\u542b\u81ea\u5b9a\u4e49\u56fe\u6807\uff08\u7ec4\uff09\u53ca HTML |
<template #default="{ onClass, offClass }">\n <i :class="onClass">ON</i>\n <i :class="offClass">OFF</i>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u56fe\u6807\u6309\u94ae\u65f6\u89e6\u53d1 |
change | function(value: boolean) | \u5207\u6362\u56fe\u6807\u72b6\u6001\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u56fe\u6807\u6309\u94ae\u72b6\u6001\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-icon-button v-model="value"></ui-icon-button>\n
\u624b\u52a8
<ui-icon-button\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-icon-button>\n
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-tree>` props with default value.\n UiTree: {\n // some props\n }\n});\n
'},ieoR:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/divider/divider';\n
import Vue from 'vue';\nimport UiDivider from 'balm-ui/components/divider';\n\nVue.use(UiDivider);\n
'},jChz:function(t,e){t.exports='@use 'balm-ui/components/bottom-sheet' with (\n $background: white,\n $border-top-radius: 0,\n\n $scrim-color: on-surface,\n $scrim-opacity: 0.32\n);\n
'},jJUY:function(t,e){t.exports=''},jO7W:function(t,e){t.exports='New in 6.4.1
\u5361\u7247\u5305\u542b\u6709\u5173\u5355\u4e2a\u4e3b\u9898\u7684\u5185\u5bb9\u548c\u52a8\u4f5c\u3002
'},jQKu:function(t,e){t.exports='@use 'balm-ui/plugins/alert' with (\n $width: 450px\n);\n
'},jS8Y:function(t,e){t.exports=''},jTik:function(t,e){t.exports='New in 8.24.0
\u6587\u672c\u6846\u4f7f\u7528\u6237\u53ef\u4ee5\u8f93\u5165\u548c\u7f16\u8f91\u6587\u672c\u3002
'},jiXr:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/select/select';\n@use 'balm-ui/components/menu/menu';\n@use 'balm-ui/components/list/list';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiSelect from 'balm-ui/components/select';\n\n// Optional. Overwrite `<ui-select>` props with default value.\nVue.use(UiSelect, {\n // some props\n});\n
'},jne1:function(t,e){t.exports='<h6 :class="$tt('headline6')">Text Label</h6>\n<div class="demo">\n <ui-tab-bar v-model="active">\n <ui-tab v-for="(tab, index) in tabs" :key="index">\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">Icon</h6>\n<div class="demo">\n <ui-tab-bar v-model="active">\n <ui-tab v-for="(tab, index) in tabs" :key="index"\n type="iconOnly"\n :icon="tab.icon">\n </ui-tab>\n </ui-tab-bar>\n</div>\n
export default {\n data() {\n return {\n active: 0,\n tabs: [\n {\n text: 'Favorites',\n icon: 'favorite'\n },\n {\n text: 'Recents',\n icon: 'phone'\n },\n {\n text: 'Nearby',\n icon: 'near_me'\n }\n ]\n };\n }\n};\n
'},joj8:function(t,e){t.exports=''},juWp:function(t,e){t.exports='New in 8.34.0
\u9876\u90e8\u5bfc\u822a\u680f\u663e\u793a\u4e0e\u5f53\u524d\u5c4f\u5e55\u6709\u5173\u7684\u4fe1\u606f\u548c\u64cd\u4f5c\u3002
'},jzIQ:function(t,e){t.exports='<ui-drawer>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item active>Activated link</ui-nav-item>\n <ui-nav-item>Unactivated link</ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n</ui-drawer>\n
Component | Description |
---|---|
<ui-drawer> | \u5bfc\u822a\u5bb9\u5668\u5143\u7d20 |
<ui-drawer-header> | \u5bfc\u822a\u9876\u90e8\u5143\u7d20\uff08\u4e0d\u53ef\u6eda\u52a8\uff09 |
<ui-drawer-title> | \u5bfc\u822a\u4e3b\u6807\u9898\u5143\u7d20 |
<ui-drawer-subtitle> | \u5bfc\u822a\u526f\u6807\u9898\u5143\u7d20 |
<ui-drawer-content> | \u5bfc\u822a\u5185\u5bb9\u5143\u7d20\uff08\u53ef\u6eda\u52a8\uff09 |
<ui-drawer-app-content> | \u5bfc\u822a\u6253\u5f00/\u5173\u95ed\u65f6\u8c03\u6574\u5927\u5c0f\u7684\u540c\u7ea7\u5143\u7d20\u3002\u4ec5\u9650\u5e94\u7528\u4e8e <ui-drawer type="dismissible"> |
New in 8.31.0
<a v-button></a>\n
v-button
v-button.outlined
v-button.raised
v-button.unelevated
<ui-form nowrap item-margin-bottom="16" label-width="80">\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field>\n <label class="required">Input:</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n <ui-form-field>\n <label>Select:</label>\n <ui-select></ui-select>\n </ui-form-field>\n <ui-form-field>\n <label>Checkbox:</label>\n <div :class="subitemClass">\n <ui-form-field v-for="i in 3" :key="i">\n <ui-checkbox :value="i" :input-id="`checkbox-${i}`"></ui-checkbox>\n <label :for="`checkbox-${i}`">Checkbox {{ i }}</label>\n </ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field>\n <label>Radio:</label>\n <div :class="subitemClass">\n <ui-form-field v-for="i in 3" :key="i">\n <ui-radio\n v-model="checkedValue"\n :value="i"\n :input-id="`radio-${i}`"\n ></ui-radio>\n <label :for="`radio-${i}`">Radio {{ i }}</label>\n </ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button raised>Submit</ui-button>\n <ui-button outlined>Cancel</ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
'},kIGY:function(t,e){t.exports='Material design \u7684\u54cd\u5e94\u5f0f UI \u57fa\u4e8e\u5217\u53d8\u91cf\u6805\u683c\u5e03\u5c40\u3002\u5b83\u5728\u53f0\u5f0f\u673a\u4e0a\u6709 12 \u5217\uff0c\u5728\u5e73\u677f\u7535\u8111\u4e0a\u6709 8 \u5217\uff0c\u5728\u624b\u673a\u4e0a\u6709 4 \u5217\u3002
'},kSIg:function(t,e){t.exports='<div v-ripple v-shadow="2" class="demo-surface">Interact with me!</div>\n
<div v-ripple:cssOnly v-shadow="2" class="demo-surface">Interact with me!</div>\n
'},kXna:function(t,e){t.exports='<ui-tabs></ui-tabs>\n
<ui-tabs>
PropsName | Type | Default | Description |
---|---|---|---|
items | array | [] | Mandatory. Tab items. |
The keys of a tab item object:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n
<ui-tabs>
SlotsName | Slots | Description |
---|---|---|
default | The default slot holds the tab components and can contain HTML. |
<!-- Full syntax -->\n<ui-tab-bar v-model="active">\n <ui-tab\n v-for="(tabItem, tabIndex) in items"\n :key="tabIndex"\n :icon="tabItem.icon"\n >\n {{ tabItem.text }}\n </ui-tab>\n</ui-tab-bar>\n\n<!-- Shorthand -->\n<ui-tabs v-model="active" :items="items"></ui-tabs>\n
'},keYf:function(t,e){t.exports='<ui-list role="radiogroup">\n <template v-for="(item, index) in items3">\n <ui-item-divider v-if="item === '-'" :key="index"></ui-item-divider>\n <ui-item v-else :key="index">\n <ui-item-text-content>{{ item.text }}</ui-item-text-content>\n <ui-item-last-content>\n <ui-radio\n v-model="checkedValue"\n :value="item.value"\n @click.native.stop\n ></ui-radio>\n </ui-item-last-content>\n </ui-item>\n </template>\n</ui-list>\n
export default {\n data() {\n return {\n checkedValue: 'dog'\n };\n }\n};\n
'},kfYF:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/snackbar/snackbar';\n@use 'balm-ui/plugins/toast/toast'; // New in 8.28.0\n
import Vue from 'vue';\nimport $toast from 'balm-ui/plugins/toast';\n\n// Optional. Overwrite `$toast` options.\nVue.use($toast, {\n // some options\n});\n
'},kiQV:function(t){t.exports=JSON.parse('{"name":"balm-ui","version":"8.67.1","description":"Next Generation Material UI for Vue.js","keywords":["balm","material","design","vue","vue-component","component","components","ui","framework","frontend"],"homepage":"https://v8.material.balmjs.com","license":"MIT","author":{"name":"Elf-mousE","email":"ifmouz@gmail.com","url":"http://elf-mouse.me"},"files":["src","dist","fonts","components","plugins","directives","utils","vetur"],"main":"dist/balm-ui.js","scripts":{"update:mdc":"balm --mdc","update:mdi":"balm --mdi","update:mdi:json":"balm --mdi-json","update":"npm run update:mdc && npm run update:mdi","dev":"balm","prod":"cross-env NODE_ENV=production balm -p","docs":"cross-env NODE_ENV=production balm -p --docs","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/balmjs/balm-ui.git"},"bugs":{"url":"https://github.com/balmjs/balm-ui/issues"},"vetur":{"tags":"vetur/tags.json","attributes":"vetur/attributes.json"},"dependencies":{"deepmerge":"^4.3.1","flatpickr":"^4.6.13","material-components-web":"12","quill":"^1.3.7"},"devDependencies":{"@babel/eslint-parser":"7.23","@babel/plugin-proposal-optional-chaining":"7.21","@babel/register":"7.23","@babel/runtime-corejs3":"7.23","@csstools/normalize.css":"^12.0.0","@vue/test-utils":"1","@vue/vue2-jest":"^29.0.0","axios":"^1.6.0","babel-jest":"^29.0.0","babel-plugin-prismjs":"^2.1.0","balm":"^3.35.1","clipboard":"^2.0.11","core-js":"^3.30.0","cross-env":"^7.0.3","eslint":"^8.0.0","eslint-config-prettier":"^8","eslint-plugin-prettier":"^4","eslint-plugin-vue":"^9.0.0","font-awesome":"^4.7.0","gulp-replace":"^1.1.4","html-loader":"1","jest":"^29.0.0","jest-serializer-vue":"^3.0.0","markdown-loader":"7","nyc":"^15.1.0","prettier":"2","prismjs":"^1.29.0","sanitize.css":"^13.0.0","vue":"2.7","vue-i18n":"8","vue-loader":"15","vue-meta":"2","vue-router":"3","vue-template-compiler":"2.7","webpack":"4"},"peerDependencies":{"vue":">=2.1.0"},"private":false}')},kmw8:function(t,e){t.exports='<div class="icons-preview-code">\n <div class="icons-preview">\n <ui-icon dark>face</ui-icon>\n <div class="icon-caption">Normal</div>\n </div>\n <div class="icons-preview">\n <ui-icon dark inactive>face</ui-icon>\n <div class="icon-caption">Disabled</div>\n </div>\n <div class="icons-preview icons-dark-bg">\n <ui-icon light>face</ui-icon>\n <div class="icon-caption">Normal</div>\n </div>\n <div class="icons-preview icons-dark-bg">\n <ui-icon light inactive>face</ui-icon>\n <div class="icon-caption">Disabled</div>\n </div>\n <div class="icons-preview">\n <ui-icon class="orange600">face</ui-icon>\n <div class="icon-caption">orange600</div>\n </div>\n</div>\n
.orange600 {\n color: #fb8c00;\n}\n
'},kuAi:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-datepicker>` props with default value.\n UiDatepicker: {\n // some props\n }\n});\n
'},kvTy:function(t,e){t.exports='<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Datetime.."\n toggle\n clear\n>\n <template #toggle>\n <i class="fa fa-calendar"></i>\n </template>\n <template #clear>\n <i class="fa fa-close"></i>\n </template>\n</ui-datepicker>\n
export default {\n data() {\n return {\n config: {\n enableTime: true,\n dateFormat: 'Y-m-d H:i'\n },\n date: ''\n };\n }\n};\n
'},l0Zm:function(t,e,o){"use strict";o.d(e,"b",(function(){return a})),o.d(e,"d",(function(){return i})),o.d(e,"e",(function(){return c})),o.d(e,"c",(function(){return r})),o.d(e,"f",(function(){return s})),o.d(e,"a",(function(){return u})),o.d(e,"i",(function(){return p})),o.d(e,"h",(function(){return h})),o.d(e,"g",(function(){return g}));var d=o("kiQV"),n=o("jHpe"),l=o.n(n);o("bPOv"),o("vy4m"),o("ZgVT"),o("y1X9"),o("QWvX"),o("gAkk"),o("hnpa"),o("XIHC"),o("5urj"),o("45FF"),o("c2Kr");const a=d.version,i=!1,c=!0,r=c?"//v8.material.balmjs.com":"",s=1e3,u=1241,p=[{text:"English",value:"en"},{text:"\u4e2d\u6587",value:"zh"}],h={light:{primary:"#6200ee",secondary:"#018786",background:"#fff",surface:"#fff",error:"#b00020"},dark:{primary:"#ce93d8",secondary:"#80cbc4",background:"#121212",surface:"#121212",error:"#cf6679"}};function g(t){t.config.productionTip=!1,t.prototype.$domain=r,t.prototype.$prism=l.a,t.prototype.$docs={props:{thead:["Name","Type","Default","Description"],tbody:["name","type","default",{field:"description",raw:!0}]},slots:{thead:["Name","Description","Slot"],tbody:["name","description","props"]},events:{thead:["Name","Type","Description"],tbody:["name","type","description"]},sass:{thead:["Variable","Description"],tbody:["var",{field:"description",raw:!0}]}}}},l2wt:function(t,e){t.exports='<ui-image-list><!-- the image item components --></ui-image-list>\n
<ui-image-list>
Types
0
: 'standard'
1
: 'masonry'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Image list types. |
masonry | boolean | false | Optional. Indicates that this Image List should use the Masonry variant. |
textProtection | boolean | false | Optional. Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image). |
Name | Props | Description |
---|---|---|
default | The default slot holds the image item components. |
<ui-list-divider></ui-list-divider>\n\n<ui-item-divider></ui-item-divider>\n
Name | Type | Default | Description |
---|---|---|---|
padded | boolean | false | \u5728\u5206\u9694\u7ebf\u7684\u6bcf\u4e00\u4fa7\u90fd\u7559\u6709\u95f4\u9699\uff0c\u4ee5\u5339\u914d\u6700\u540e\u4e00\u4e2a\u56fe\u5757\u7684\u586b\u5145\u3002 |
inset | boolean | false | \u589e\u52a0\u5206\u9694\u7ebf\u7684\u524d\u5bfc\u8fb9\u8ddd\uff0c\u4ee5\u4f7f\u5176\u4e0d\u4e0e\u56fe\u6807\u6216\u56fe\u50cf\u5217\u76f8\u4ea4\u3002 |
<ui-textfield\n id="input-chip-set-input"\n v-model="name"\n outlined\n class="demo-tf-add-space"\n placeholder="Chip text"\n></ui-textfield>\n<br />\n<ui-button id="input-chip-set-button" raised dense @click="addOne">\n Add Input Chip\n</ui-button>\n<ui-button\n id="input-chip-set-delete-button"\n outlined\n dense\n @click="removeLastOne"\n>\n Delete Last Chip\n</ui-button>\n\n<ui-chips id="input-chip-set" type="input" :options="list">\n <ui-chip\n v-for="item in list"\n :key="item.id"\n icon="face"\n @remove="removeOneById(item.id)"\n >\n {{ item.name }}\n </ui-chip>\n</ui-chips>\n
export default {\n data() {\n return {\n lastId: 2,\n name: '',\n list: [\n {\n id: 1,\n name: 'Jane Smith'\n },\n {\n id: 2,\n name: 'John Doe'\n }\n ]\n };\n },\n methods: {\n addOne() {\n if (this.name.trim().length) {\n this.lastId++;\n this.list.push({\n id: this.lastId,\n name: this.name\n });\n this.name = '';\n }\n },\n removeLastOne() {\n this.list.pop();\n },\n removeOneById(id) {\n let index = this.list.findIndex((item) => item.id === id);\n this.list.splice(index, 1);\n }\n }\n};\n
'},lTZF:function(t,e){t.exports='<ui-drawer type="dismissible"></ui-drawer>\n<ui-drawer-app-content><!-- Content --></ui-drawer-app-content>\n
'},laUp:function(t,e){t.exports='\u4ec5\u9650\u5e94\u7528\u4e8e
<ui-drawer type="dismissible">
<ui-select outlined>\n Food Group\n</ui-select>\n
'},lfQo:function(t,e){t.exports='<ui-card-media>\n <!-- <ui-card-media-content> -->\n</ui-card-media>\n
Name | Type | Default | Description |
---|---|---|---|
square | boolean | false | \u81ea\u52a8\u7f29\u653e\u5a92\u4f53\u533a\u57df\u7684\u9ad8\u5ea6\u4ee5\u4f7f\u5176\u5bbd\u5ea6\u76f8\u7b49\u3002 |
rectangle | boolean | false | \u6839\u636e\u5176\u5bbd\u5ea6\u81ea\u52a8\u7f29\u653e\u5a92\u4f53\u533a\u57df\u7684\u9ad8\u5ea6\uff0c\u5e76\u4fdd\u6301 16:9 \u7684\u7eb5\u6a2a\u6bd4\u3002 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5a92\u4f53\u5185\u5bb9\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-media-content>
$alert(message)
$alert(options)
interface VueInstance {\n $alert(options: string | object): Promise<void>;\n}\n
Option | Type | Default | Description |
---|---|---|---|
className | string | '' | \u81ea\u5b9a\u4e49\u8b66\u544a\u6846\u7684 class |
title | string | '' | \u8bbe\u7f6e\u8b66\u544a\u6846\u7684\u6807\u9898 |
state | string | '' | \u8b66\u544a\u6846\u72b6\u6001\u56fe\u6807\u7c7b\u578b |
stateOutlined | boolean | false | \u663e\u793a\u8f6e\u5ed3\u72b6\u6001\u56fe\u6807 |
message | string | '' | \u8bbe\u7f6e\u8b66\u544a\u6846\u7684\u5185\u5bb9 |
raw | boolean | false | \u6e32\u67d3 HTML |
buttonText | string | 'OK' | \u6309\u94ae\u6587\u672c |
callback | function | false | \u70b9\u51fb\u786e\u5b9a\u6309\u94ae\u540e\u7684\u4e8b\u4ef6\u5904\u7406 |
interface AlertDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
\u7528\u6cd5 1
$alert({\n message,\n callback() {\n // ...\n }\n});\n
\u7528\u6cd5 2\uff08\u63a8\u8350\uff09
$alert(message).then(() => {\n // ...\n});\n
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $alert
New in 8.1.0
import { useAlert } from 'balm-ui';\n// \u6216\n// import { useAlert } from 'balm-ui/plugins/alert';\n\nconst $alert = useAlert();\n$alert('Hello BalmUI');\n
'},llx4:function(t,e){t.exports='<div class="demo-container">\n <!-- Drawer -->\n <ui-drawer type="dismissible" viewport-height nav-id="demo-menu">\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>Item {{ 0 }}</ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- Content -->\n <ui-drawer-app-content class="demo-content">\n <!-- App bar -->\n <ui-top-app-bar\n class="demo-app-bar"\n content-selector=".demo-app-content"\n nav-id="demo-menu"\n >\n Title\n </ui-top-app-bar>\n <!-- App content -->\n <div class="demo-app-content">\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </div>\n </ui-drawer-app-content>\n</div>\n
.demo-content {\n width: 100%;\n}\n\n.demo-app-content {\n height: 100%;\n overflow: auto;\n}\n
'},mFG2:function(t,e){t.exports='<ui-list v-model="selectedIndex" single-selection>\n <ui-item v-for="(item, index) in items2" :key="index">\n <ui-item-first-content>\n <ui-icon>{{ item.icon }}</ui-icon>\n </ui-item-first-content>\n <ui-item-text-content>{{ item.text }}</ui-item-text-content>\n </ui-item>\n</ui-list>\n
export default {\n data() {\n return {\n selectedIndex: 1\n };\n }\n};\n
'},mGuA:function(t,e){t.exports='New in 8.34.0
Bottom navigation bars allow movement between primary destinations in an app.
'},mHx5:function(t,e){t.exports='<ui-tab><!-- The tab text label --></ui-tab>\n
<ui-tab>
& <ui-tabs>
\u7c7b\u578b
0
: 'text'
1
: 'iconOnly'
2
: 'textWithIcon'
<ui-tab>
& <ui-tabs>
\u5171\u7528 PropsName | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u6807\u7b7e\u9875\u7c7b\u578b\uff08\u6392\u5217\u65b9\u5f0f\uff09 |
stacked | boolean | false | \u8bbe\u7f6e\u6807\u7b7e\u9875\u56fe\u6807\u548c\u6807\u7b7e\u4e3a\u5782\u76f4\u6a21\u5f0f\uff08\u9ed8\u8ba4\u4e3a\u6c34\u5e73\u6a21\u5f0f\uff09 |
minWidth | boolean | false | \u8bbe\u7f6e\u6807\u7b7e\u9875\u7684\u5927\u5c0f\u5e94\u7f29\u5c0f\u5230\u5c3d\u53ef\u80fd\u7a84\u800c\u4e0d\u5f15\u8d77\u6587\u672c\u6362\u884c |
contentIndicator | boolean | false | \u6807\u7b7e\u6587\u672c\u5bbd\u5ea6\u5339\u914d\u6307\u793a\u5668 |
<ui-tab>
PropsName | Type | Default | Description |
---|---|---|---|
text | string | '' | \u6807\u7b7e\u6587\u672c |
icon | string | '' | \u6807\u7b7e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u6587\u672c \u53ca HTML | |
icon | iconClass | \u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u56fe\u6807 |
indicator | \u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u6307\u793a\u5668 |
<ui-tab>\n <template #icon="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-tab>\n
'},"mK/i":function(t,e){t.exports='<ui-badge state="success">\n Text\n <template #badge>new</template>\n</ui-badge>\n\n<ui-badge state="info">\n Text\n <template #badge>new</template>\n</ui-badge>\n\n<ui-badge state="warning">\n Text\n <template #badge>new</template>\n</ui-badge>\n\n<ui-badge state="error">\n Text\n <template #badge>new</template>\n</ui-badge>\n
'},mYr6:function(t,e){t.exports='<ui-progress></ui-progress>\n
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Puts the linear progress indicator in an indeterminate state. |
progress | number | 0 | Sets the progress bar to this value. Value should be between [0, 1] . |
buffer | number | 0 | Sets the buffer bar to this value. Value should be between [0, 1] . |
label | string | '' | Label indicating how the progress bar should be announced to the user. |
closed | boolean | false | Hides the linear progress indicator. |
<ui-tabs :items="tabItems"></ui-tabs>\n
<ui-tab-bar>\n <ui-tab>\n Tab Text\n <template #indicator>\n <ui-tab-indicator></ui-tab-indicator>\n </template>\n </ui-tab>\n</ui-tab-bar>\n\n<ui-panels>\n <ui-panel></ui-panel>\n</ui-panels>\n
Component | Description |
---|---|
<ui-tabs> | <ui-tab-bar> \u548c <ui-tab> \u7684\u7f29\u5199 |
<ui-tab-bar> | \u6807\u7b7e\u9875\u5bb9\u5668 |
<ui-tab> | \u6807\u7b7e\u9875 |
<ui-panels> | \u6807\u7b7e\u9875\u9762\u677f\u5bb9\u5668 |
<ui-panel> | \u6807\u7b7e\u9875\u9762\u677f |
<ui-tab-indicator> | \u5305\u542b\u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u6307\u793a\u5668\u7684\u5185\u5bb9 |
<ui-tab-scroller> | \u5305\u542b\u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u6eda\u52a8\u5668\u7684\u5185\u5bb9 |
<ui-button><!-- the button text label --></ui-button>\n
<ui-button>
\u7c7b\u578b
0
: 'text'
1
: 'outlined'
2
: 'raised'
3
: 'unelevated'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u6309\u94ae\u7c7b\u578b | |
outlined | boolean | false | \u4f7f\u7528\u8f6e\u5ed3\u6309\u94ae\u6837\u5f0f | |
raised | boolean | false | \u4f7f\u7528\u6d6e\u96d5\u6309\u94ae\u6837\u5f0f | |
unelevated | boolean | false | \u4f7f\u7528\u6241\u5e73\u6309\u94ae\u6837\u5f0f | |
icon | string | '' | \u8bbe\u7f6e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
disabled | boolean | false | \u7981\u7528\u6309\u94ae\u3002\u540c\u539f\u751f <button> \u5c5e\u6027\u3002 | |
nativeType | string | 'button' | \u539f\u751f\u6309\u94ae\u7c7b\u578b | 8.1.1 |
interface Button {\n nativeType: 'button' | 'submit' | 'reset';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u6587\u5b57\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u6309\u94ae\u65f6\u89e6\u53d1 |
<ui-panels>\n <!-- the panel components -->\n <ui-panel><!-- the panel content --></ui-panel>\n</ui-panels>\n
Name | Type | Default | Description |
---|---|---|---|
active (v-model ) | number | 0 | \u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u7d22\u5f15 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u9762\u677f\u7ec4\u4ef6\u53ca HTML |
<ui-tabs v-model="active">\n <ui-tab>Tab One</ui-tab>\n <ui-tab>Tab Two</ui-tab>\n <ui-tab>Tab Three</ui-tab>\n</ui-tabs>\n\n<ui-panels v-model="active">\n <ui-panel>Panel One</ui-panel>\n <ui-panel>Panel Two</ui-panel>\n <ui-panel>Panel Three</ui-panel>\n</ui-panels>\n
'},mjNL:function(t,e){t.exports=""},mltC:function(t,e){t.exports='<div class="demo-container">\n <!-- App bar -->\n <ui-top-app-bar\n class="demo-app-bar"\n content-selector=".demo-app-content"\n nav-id="demo-menu"\n >\n Title\n </ui-top-app-bar>\n <!-- Drawer -->\n <ui-drawer type="dismissible" viewport-height nav-id="demo-menu">\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>Item {{ 0 }}</ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- Content -->\n <ui-drawer-app-content class="demo-app-content">\n <!-- App content -->\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </ui-drawer-app-content>\n</div>\n
/* Only apply this style if below top app bar */\n.demo-app-bar {\n z-index: 7;\n}\n\n.demo-app-content {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n
'},mly0:function(t,e){t.exports='Chips are compact elements that represent an input, attribute, or action.
'},mm4C:function(t,e){t.exports='<ui-form-field>\n <label></label>\n <!-- awesome form item -->\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
nowrap | boolean | false | \u5f3a\u5236\u6587\u672c\u663e\u793a\u4e00\u884c\uff0c\u5e76\u4f7f\u6ea2\u51fa\u7684\u6587\u672c\u663e\u793a\u7701\u7565\u53f7\u3002 |
alignEnd | boolean | false | \u5c06\u5185\u5bb9\u653e\u7f6e\u5728 <label> \u4e4b\u540e |
spaceBetween | boolean | false | \u5bf9\u9f50\u5185\u5bb9\u548c <label> \u4e4b\u95f4\u7684\u7a7a\u95f4 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u8868\u5355\u9879\u5185\u5bb9\u53ca HTML |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/collapse/collapse';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiCollapse from 'balm-ui/components/collapse';\n\nVue.use(UiCollapse);\n
'},mzL3:function(t,e){t.exports='<ui-badge overlap dot>\n <ui-icon>mail</ui-icon>\n</ui-badge>\n\n<ui-badge overlap :count="8">\n <ui-icon>mail</ui-icon>\n</ui-badge>\n\n<ui-badge overlap :count="999">\n <ui-icon>mail</ui-icon>\n</ui-badge>\n
'},n2wJ:function(t,e){t.exports='\u5355\u9009\u6309\u94ae\u5141\u8bb8\u7528\u6237\u4ece\u4e00\u7ec4\u4e2d\u9009\u62e9\u4e00\u4e2a\u9009\u9879\u3002
'},n3Mp:function(t,e){t.exports='@use 'balm-ui/components/editor' with (\n $editor-height: 100%,\n $bubble-editor-height: 100px,\n\n $font-family: (\n 'arial': 'Arial',\n 'arial-black': 'Arial Black',\n 'comic-sans-ms': 'Comic Sans MS',\n 'courier-new': 'Courier New',\n 'tahoma': 'Tahoma',\n 'georgia': 'Georgia',\n 'helvetica': 'Helvetica',\n 'segoe-ui': 'Segoe UI',\n 'sans-serif': 'Sans-Serif',\n 'impact': 'Impact',\n 'times-new-roman': 'Times New Roman',\n 'verdana': 'Verdana'\n )\n);\n
'},nBgh:function(t,e){t.exports='Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.
'},nKLF:function(t,e){t.exports='Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.
'},nOqn:function(t,e){t.exports='New in 6.0.0
<ui-dialog-title><!-- the dialog title --></ui-dialog-title>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
closable | boolean | false | \u5c55\u73b0\u5173\u95ed\u6309\u94ae | 8.10.0 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u6807\u9898\u53ca HTML |
<ui-menu><!-- the menuitem components --></ui-menu>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | Mandatory. |
items | array | [] | Menu items. |
quickOpen | boolean | false | Turn off menu open animations. |
position | string | 'TOP_LEFT' | Menu position to the menu button. |
distance | object | false | Anchor margin. Value format: { top, right, bottom, left } . |
fixed | boolean | false | Used to indicate that the menu is using fixed positioning. |
fullwidth | boolean | false | Sets the menu surface's width to match that of its parent anchor. Do not use with fixed or if hoisting to body. |
cssOnly | boolean | false | Show static menu. |
The keys of the menuitem:
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface Menu {\n items: Item[];\n position:\n | 'TOP_LEFT'\n | 'TOP_RIGHT'\n | 'BOTTOM_LEFT'\n | 'BOTTOM_RIGHT'\n | 'TOP_START'\n | 'TOP_END'\n | 'BOTTOM_START'\n | 'BOTTOM_END';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the menuitem components. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the menu is changed. |
selected | function(menuitem: SelectedItem) | Emits when an element has been selected. |
closed | function() | Emits when the menu is closed. |
opened | function() | Emits when the menu is opened. |
selected
event return data:
interface SelectedItem {\n index: number; // menuitem index\n text: string; // menuitem text\n value: string; // selected value\n}\n
NOTE: If you are not using
v-model
, you should listen for the menu using@change
and update theopen
prop.
Automatic
<ui-menu v-model="open"></ui-menu>\n
Manual
<ui-menu :open="open" @change="$balmUI.onChange('open', $event)"></ui-menu>\n
\u5bf9\u8bdd\u6846\u901a\u77e5\u7528\u6237\u6709\u5173\u4e00\u9879\u4efb\u52a1\u7684\u4fe1\u606f\uff0c\u5e76\u4e14\u53ef\u4ee5\u5305\u542b\u5173\u952e\u4fe1\u606f\uff0c\u9700\u8981\u505a\u51fa\u51b3\u5b9a\u6216\u6d89\u53ca\u591a\u4e2a\u4efb\u52a1\u3002
'},nbki:function(t,e){t.exports='<div id="light-on-bg" class="demo-color-combo">\n <div>\n <ui-icon-button\n :class="$theme.getThemeClass('on-primary')"\n :toggle="icon1"\n ></ui-icon-button>\n </div>\n <div :class="$theme.getThemeClass('on-primary')">\n Light icon on background\n </div>\n</div>\n\n<div id="dark-on-bg" class="demo-color-combo">\n <div :class="$theme.getThemeClass('primary')">\n <ui-icon-button :toggle="icon1"></ui-icon-button>\n </div>\n <div>Dark icon on background</div>\n</div>\n\n<div id="custom-color-combo" class="demo-color-combo">\n <div>\n <ui-icon-button :toggle="icon1"></ui-icon-button>\n </div>\n <div>Custom color</div>\n</div>\n
/* SASS code */\n.demo-color-combo {\n width: 250px;\n padding: 1rem;\n border-radius: 4px;\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-right: 8px;\n}\n\n#light-on-bg {\n background-color: #3e82f7;\n}\n#light-on-bg .mdc-icon-button {\n @include mdc-icon-toggle-ink-color(white);\n @include mdc-states-base-color(white);\n @include mdc-states-hover-opacity(0.1);\n @include mdc-states-focus-opacity(0.3);\n @include mdc-states-press-opacity(0.4);\n}\n\n#dark-on-bg {\n background-color: #00bcd6;\n}\n#dark-on-bg .mdc-icon-button {\n @include mdc-icon-toggle-ink-color(black);\n @include mdc-states(black);\n}\n\n#custom-color-combo .mdc-icon-button {\n @include mdc-icon-toggle-ink-color(#de442c);\n @include mdc-states-base-color(#de442c);\n @include mdc-states-hover-opacity(0.09);\n @include mdc-states-focus-opacity(0.26);\n @include mdc-states-press-opacity(0.35);\n}\n
'},ni4r:function(t,e){t.exports='import Vue from 'vue';\nimport $validator from 'balm-ui/plugins/validator';\nimport validatorRules from './config/validator-rules';\n\n// Optional. Set global validator rules.\nVue.use($validator, validatorRules);\n
'},nr38:function(t,e){t.exports='<ui-card-media-content><!-- rich media content --></ui-card-media-content>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5a92\u4f53\u5185\u5bb9\u53ca HTML |
@use '@material/layout-grid' with (\n $breakpoints: (\n desktop: 840px,\n tablet: 600px,\n phone: 0px\n ),\n\n $columns: (\n desktop: 12,\n tablet: 8,\n phone: 4\n ),\n\n $default-margin: (\n desktop: 24px,\n tablet: 16px,\n phone: 16px\n ),\n\n $default-gutter: (\n desktop: 24px,\n tablet: 16px,\n phone: 16px\n ),\n\n $column-width: (\n desktop: 72px,\n tablet: 72px,\n phone: 72px\n ),\n\n $default-column-span: 4,\n\n $max-width: null\n);\n
'},nsGg:function(t,e){t.exports='\u6309\u94ae\u7ec4\u5141\u8bb8\u7528\u6237\u5207\u6362\u5206\u7ec4\u6309\u94ae\u7684\u9009\u5b9a\u72b6\u6001\u3002
'},o1ct:function(t,e){t.exports='New in 8.14.0
New in 8.1.0
\u4e00\u79cd\u7b80\u5355\u7684\u72b6\u6001\u7ba1\u7406\u6a21\u5f0f\u3002
'},o5nD:function(t,e){t.exports='The Material Design color system can be used to create a color scheme that reflects your brand or style.
'},o69K:function(t,e){t.exports='@use '@material/fab/fab-theme' with (\n $height: 56px,\n $mini-height: 40px,\n $shape-radius: 50%\n);\n
@use '@material/fab/extended-fab-theme' with (\n $extended-icon-padding: 12px,\n $extended-label-padding: 20px,\n $extended-height: 48px\n);\n
'},o6KT:function(t,e){t.exports='<div\n v-ripple="1"\n v-shadow="1"\n :class="['demo-surface', $theme.getThemeClass('primary')]"\n>\n Primary\n</div>\n<div\n v-ripple="2"\n v-shadow="2"\n :class="['demo-surface', $theme.getThemeClass('secondary')]"\n>\n Secondary\n</div>\n
<div\n v-ripple:cssOnly="1"\n v-shadow="2"\n :class="['demo-surface', $theme.getThemeClass('primary')]"\n>\n Primary\n</div>\n<div\n v-ripple:cssOnly="2"\n v-shadow="2"\n :class="['demo-surface', $theme.getThemeClass('secondary')]"\n>\n Secondary\n</div>\n
'},o8vW:function(t,e){t.exports='<ui-image-item><!-- image and text --></ui-image-item>\n
Name | Type | Default | Description |
---|---|---|---|
image | string | null | \u4e3a\u56fe\u7247\u5217\u8868\u9879\u6dfb\u52a0\u4e00\u4e2a <img> \u5143\u7d20\u5e76\u8bbe\u7f6e src \u5c5e\u6027 |
bgImage | string | null | \u4f7f\u7528\u4e00\u4e2a <div> \u4ee3\u66ff<img> \u5143\u7d20 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u7247\u5217\u8868\u9879\u7684\u6587\u5b57\u6807\u7b7e\u5185\u5bb9\u53ca HTML | |
image | \u81ea\u5b9a\u4e49\u56fe\u7247 |
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u56fe\u7247\u5217\u8868\u9879\u65f6\u89e6\u53d1 |
<ui-item><!-- the item child components --></ui-item>\n\n<ui-nav-item><!-- the link item child components --></ui-nav-item>\n
<ui-item>
PropsName | Type | Default | Description |
---|---|---|---|
selected | boolean | false | Optional, styles the row in an selected state. |
disabled | boolean | false | Optional, styles the row in the disabled state. |
<ui-nav-item>
Props (New in 8.0.0)Name | Type | Default | Description |
---|---|---|---|
href | string | (required) | Resolved url. This would be the href attribute of an a element. |
active | boolean | false | Optional, styles the row in the activated state. |
Usage with <router-link>
(requires vue-router@3.1.0+
)
<router-link v-slot="{ href, navigate, isActive }">\n <ui-nav-item\n :href="href"\n :active="isActive"\n @click="navigate"\n ></ui-nav-item>\n</router-link>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the item child components and can contain HTML. | |
before | iconClass | Custom <ui-item-first-content> . Optional, the first tile in the row. Typically an icon or image. |
after | iconClass | Custom <ui-item-last-content> . Optional, the last tile in the row. Typically small text, icon. or image. |
Child components:
<ui-item-text-content>
<ui-item-text1>
<ui-item-text2>
<ui-item-first-content>
<ui-item-last-content>
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the list item is clicked. |
'},oVAJ:function(t,e,o){"use strict";(function(t){var d=o("59Zy"),n=o("KX7K"),l=o("QD8k");function a(){return c.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function i(t,e){if(a()New in 6.9.0
<div v-shape></div>\n
v-shape="corner"
(medium)v-shape.small="corner"
v-shape.large="corner"
v-shape.cut="corner"
(medium)v-shape.cut.small="corner"
v-shape.cut.large="corner"
Value | Type | Default | Description |
---|---|---|---|
corner | string | '' | Element for masking a specific corner; there may be up to 4. (Use shape sass radius variable when value is empty) |
Syntax is similar to CSS
border-radius
property.
<!-- The syntax of the first corner allows one to four values -->\n<!-- Radius is set for all 4 sides -->\n<div v-shape="'4px'"></div>\n\n<!-- top-left | bottom-right -->\n<div v-shape="'4px 0'"></div>\n\n<!-- top-right | bottom-left -->\n<div v-shape="'0 4px'"></div>\n\n<!-- top-left -->\n<div v-shape="'4px 0 0'"></div>\n\n<!-- top-left | top-right | bottom-left -->\n<div v-shape="'4px 4px 0'"></div>\n\n<!-- top-left | top-right | bottom-right | bottom-left -->\n<div v-shape="'4px 4px 4px 4px'"></div>\n
'},ohmo:function(t,e){t.exports='<ui-side-sheet></ui-side-sheet>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | Mandatory. |
closable | boolean | false | Displays close icon button. |
Name | Props | Description |
---|---|---|
title | The title slot holds the title for the side sheet. | |
default | The default slot holds the content for the side sheet. | |
actions | The actions slot holds the actions for the side sheet. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the side sheet is hidden. |
NOTE: If you are not using
v-model
, you should listen for the side sheet using@change
and update theopen
prop.
Automatic
<ui-side-sheet v-model="open"></ui-side-sheet>\n
Manual
<ui-side-sheet\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-side-sheet>\n
'},otXS:function(t,e){t.exports='New in 6.9.0
A content area which can be collapsed and expanded.
'},"p/y3":function(t,e){t.exports='New in 6.3.0
<div class="demo-theme-color-section__row">\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">\n Text on user-defined light background\n </legend>\n\n <div class="demo-theme-color-group">\n <div :class="['demo-theme-text-row demo-theme-bg--custom-light']">\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('primary')]"\n >\n Primary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('secondary')]"\n >\n Secondary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('hint')]"\n >\n Hint\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('disabled')]"\n >\n Disabled\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('icon'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">\n Text on user-defined dark background\n </legend>\n\n <div class="demo-theme-color-group">\n <div :class="['demo-theme-text-row demo-theme-bg--custom-dark']">\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('primary')]"\n >\n Primary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('secondary')]"\n >\n Secondary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('hint')]"\n >\n Hint\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('disabled')]"\n >\n Disabled\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('icon'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n</div>\n
'},p0DE:function(t,e,o){"use strict";o.r(e);o("FNk8"),o("BhEe"),o("jHcC"),o("PxwH"),o("PGW+"),o("y57E"),o("U3f4"),o("bOU7"),o("KDQB"),o("TqEC"),o("t+/R"),o("Ew+T"),o("rR+u"),o("oUlK"),o("VJTV");var d=o("FZBc");const n=Object(d.b)();window.IE=n;const l=n&&n<11;var a=o("oCYn"),i=o("ePgL"),c=o.n(i),r=o("cNnm"),s=o.n(r),u=o("l0Zm");const p="G-MNH519PFX9";let h=null;function g(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"Unknown";h?setTimeout((function(){h("set","page_path",t),h("event","page_view")}),200):function(){if(u.e&&!h){function t(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],t("js",new Date),t("config",p),h=t}}()}var m=o("KHd+"),b=Object(m.a)({},(function(){return(0,this._self._c)("router-view")}),[],!1,null,null,null).exports;var f=[{path:"intro",name:"guide.intro",component:()=>o.e(65).then(o.bind(null,"qy61"))},{path:"quickstart",name:"guide.quickstart",component:()=>o.e(67).then(o.bind(null,"PvZW"))},{path:"advanced",name:"guide.advanced",component:()=>o.e(64).then(o.bind(null,"X81u"))},{path:"kill-ie",name:"guide.kill-ie",component:()=>o.e(66).then(o.bind(null,"4/F1"))},{path:"upgrade",name:"guide.upgrade",component:()=>o.e(68).then(o.bind(null,"JWpO"))}];var v=[{path:"button",name:"general.button",component:()=>o.e(19).then(o.bind(null,"Xg0U"))},{path:"fab",name:"general.fab",component:()=>o.e(27).then(o.bind(null,"RjDU"))},{path:"icon-button",name:"general.icon-button",component:()=>o.e(7).then(o.bind(null,"FAGE"))},{path:"segmented-button",name:"general.segmented-button",component:()=>o.e(37).then(o.bind(null,"cYXZ"))}];var q=[{path:"top-app-bar",name:"layout.top-app-bar",component:()=>o.e(49).then(o.bind(null,"zR/0")),meta:{noLayout:!0}},{path:"grid",name:"layout.grid",component:()=>o.e(30).then(o.bind(null,"67l9")),meta:{noLayout:!0}},{path:"form",name:"layout.form",component:()=>o.e(29).then(o.bind(null,"uSaa"))},{path:"divider",name:"layout.divider",component:()=>o.e(25).then(o.bind(null,"aqUP"))}];var y=[{path:"drawer",name:"navigation.drawer",component:()=>o.e(60).then(o.bind(null,"Xm90"))},{path:"permanent-drawer-above-toolbar",name:"navigation.permanent-drawer-above-toolbar",component:()=>o.e(62).then(o.bind(null,"KpGl")),meta:{noLayout:!0}},{path:"permanent-drawer-below-toolbar",name:"navigation.permanent-drawer-below-toolbar",component:()=>o.e(63).then(o.bind(null,"qkjs")),meta:{noLayout:!0}},{path:"dismissible-drawer-full-height-drawer",name:"navigation.dismissible-drawer-full-height-drawer",component:()=>o.e(59).then(o.bind(null,"EoOT")),meta:{noLayout:!0}},{path:"dismissible-drawer-below-top-app-bar",name:"navigation.dismissible-drawer-below-top-app-bar",component:()=>o.e(58).then(o.bind(null,"iEnr")),meta:{noLayout:!0}},{path:"modal-drawer",name:"navigation.modal-drawer",component:()=>o.e(61).then(o.bind(null,"kmoq")),meta:{noLayout:!0}},{path:"tabs",name:"navigation.tabs",component:()=>o.e(46).then(o.bind(null,"faHd"))},{path:"menu",name:"navigation.menu",component:()=>o.e(32).then(o.bind(null,"OJj2"))},{path:"pagination",name:"navigation.pagination",component:()=>o.e(33).then(o.bind(null,"Kw/F"))},{path:"bottom-navigation",name:"navigation.bottom-navigation",component:()=>o.e(17).then(o.bind(null,"ss80")),meta:{noLayout:!0}}];var x=[{path:"color",name:"theme.color",component:()=>o.e(5).then(o.bind(null,"km5U"))},{path:"typography",name:"theme.typography",component:()=>o.e(75).then(o.bind(null,"0QVv"))},{path:"shape",name:"theme.shape",component:()=>o.e(57).then(o.bind(null,"srg3"))},{path:"/icons",name:"icons",component:()=>o.e(8).then(o.bind(null,"WqYz"))}];var w=[{path:"textfield",name:"data-input.textfield",component:()=>o.e(47).then(o.bind(null,"cObN"))},{path:"select",name:"data-input.select",component:()=>o.e(38).then(o.bind(null,"YVhR"))},{path:"checkbox",name:"data-input.checkbox",component:()=>o.e(20).then(o.bind(null,"mc/m"))},{path:"radio",name:"data-input.radio",component:()=>o.e(35).then(o.bind(null,"eTld"))},{path:"chips",name:"data-input.chips",component:()=>o.e(21).then(o.bind(null,"KYaq"))},{path:"switch",name:"data-input.switch",component:()=>o.e(44).then(o.bind(null,"4R7x"))},{path:"slider",name:"data-input.slider",component:()=>o.e(41).then(o.bind(null,"vyUe"))},{path:"file",name:"data-input.file",component:()=>o.e(28).then(o.bind(null,"V/ix"))},{path:"autocomplete",name:"data-input.autocomplete",component:()=>o.e(14).then(o.bind(null,"j++W"))},{path:"datepicker",name:"data-input.datepicker",component:()=>o.e(23).then(o.bind(null,"85o+"))},{path:"rangepicker",name:"data-input.rangepicker",component:()=>o.e(36).then(o.bind(null,"Lgcd"))},{path:"editor",name:"data-input.editor",component:()=>o.e(26).then(o.bind(null,"5M7V"))},{path:"validator",name:"data-input.validator",component:()=>o.e(76).then(o.bind(null,"9Wzh"))}];var k=[{path:"list",name:"data-display.list",component:()=>o.e(31).then(o.bind(null,"fX39"))},{path:"image-list",name:"data-display.image-list",component:()=>o.e(3).then(o.bind(null,"v9Vu"))},{path:"lazyload",name:"data-display.lazyload",component:()=>o.e(4).then(o.bind(null,"B0qJ"))},{path:"card",name:"data-display.card",component:()=>o.e(9).then(o.bind(null,"1rc5"))},{path:"table",name:"data-display.table",component:()=>o.e(45).then(o.bind(null,"/NPr"))},{path:"collapse",name:"data-display.collapse",component:()=>o.e(22).then(o.bind(null,"NKdk"))},{path:"badge",name:"data-display.badge",component:()=>o.e(15).then(o.bind(null,"B0FB"))},{path:"tree",name:"data-display.tree",component:()=>o.e(50).then(o.bind(null,"Z5BD"))}];var T=[{path:"alert",name:"feedback.alert",component:()=>o.e(13).then(o.bind(null,"HbX2"))},{path:"dialog",name:"feedback.dialog",component:()=>o.e(24).then(o.bind(null,"N5CE"))},{path:"alert-dialog",name:"feedback.alert-dialog",component:()=>o.e(70).then(o.bind(null,"/3bb"))},{path:"confirm-dialog",name:"feedback.confirm-dialog",component:()=>o.e(71).then(o.bind(null,"IsMX"))},{path:"snackbar",name:"feedback.snackbar",component:()=>o.e(42).then(o.bind(null,"7jU6"))},{path:"toast",name:"feedback.toast",component:()=>o.e(74).then(o.bind(null,"uHVM"))},{path:"banner",name:"feedback.banner",component:()=>o.e(16).then(o.bind(null,"0kSJ"))},{path:"progress",name:"feedback.progress",component:()=>o.e(34).then(o.bind(null,"wg+j"))},{path:"spinner",name:"feedback.spinner",component:()=>o.e(43).then(o.bind(null,"eH4y"))},{path:"skeleton",name:"feedback.skeleton",component:()=>o.e(40).then(o.bind(null,"dxdE"))},{path:"tooltip",name:"feedback.tooltip",component:()=>o.e(48).then(o.bind(null,"6pL+"))},{path:"bottom-sheet",name:"feedback.bottom-sheet",component:()=>o.e(18).then(o.bind(null,"XOQ+"))},{path:"side-sheet",name:"feedback.side-sheet",component:()=>o.e(39).then(o.bind(null,"KSDF"))}];var $=[{path:"event",name:"misc.event",component:()=>o.e(72).then(o.bind(null,"x7+/"))},{path:"debounce",name:"misc.debounce",component:()=>o.e(53).then(o.bind(null,"GvHa"))},{path:"ripple",name:"misc.ripple",component:()=>o.e(56).then(o.bind(null,"JCv0"))},{path:"elevation",name:"misc.elevation",component:()=>o.e(54).then(o.bind(null,"F4+S"))},{path:"anchor",name:"misc.anchor",component:()=>o.e(51).then(o.bind(null,"Q4UR"))},{path:"copy",name:"misc.copy",component:()=>o.e(52).then(o.bind(null,"tjhx"))},{path:"longpress",name:"misc.longpress",component:()=>o.e(55).then(o.bind(null,"HV0C"))}],I={name:"Home",metaInfo:{titleTemplate:"%s - Home"},mounted(){this.$nextTick((()=>{this.$bus.emit("global-message",!0)}))},beforeDestroy(){this.$bus.emit("global-message",!1)}},C=Object(m.a)(I,(function(){var t=this,e=t._self._c;return e("div",{class:[t.$tt("body1"),"page--home"]},[e("section",{directives:[{name:"ripple",rawName:"v-ripple.unbounded",modifiers:{unbounded:!0}}],staticClass:"hero"},[e("h1",{class:t.$tt("headline1")},[t._v("BalmUI")])]),t._v(" "),e("div",{class:[t.$tt("body2"),"pure-docs"]},[e("p",{class:t.$tt("subtitle1")},[t._v(t._s(t.$t("home.slogan")))]),t._v(" "),e("p",{class:t.$tt("subtitle2")},[t._v(t._s(t.$t("home.title")))]),t._v(" "),e("ui-button",{attrs:{raised:""},on:{click:function(e){return t.$router.push({name:"guide.intro"})}}},[t._v("\n "+t._s(t.$t("home.get-started"))+"\n ")])],1)])}),[],!1,null,null,null).exports,S={name:"Donate"},j=Object(m.a)(S,(function(){var t=this,e=t._self._c;return e("div",{class:[t.$tt("body1"),"page--donate"]},[e("section",{directives:[{name:"ripple",rawName:"v-ripple.unbounded",modifiers:{unbounded:!0}}],staticClass:"hero"},[e("h1",{class:t.$tt("headline1")},[t._v("Support BalmUI")])]),t._v(" "),e("div",{class:[t.$tt("body2"),"pure-docs"]},[e("p",[t._v("\n BalmUI is an MIT licensed open source project and completely free to\n use. However, the amount of effort needed to maintain and develop new\n features for the project is not sustainable without proper financial\n backing. You can support BalmUI development via the following methods:\n ")]),t._v(" "),e("h6",{class:t.$tt("headline6")},[t._v("One-time Donations")]),t._v(" "),e("p",[t._v("We accept donations through these channels:")]),t._v(" "),e("ui-grid",{staticClass:"donate-methods"},[e("ui-grid-cell",[e("div",{staticClass:"donate-method alipay"})]),t._v(" "),e("ui-grid-cell",[e("div",{staticClass:"donate-method wechatpay"})])],1),t._v(" "),e("h6",{class:t.$tt("headline6")},[t._v("Recurring Pledges")]),t._v(" "),e("p",[t._v("\n Recurring pledges come with exclusive perks, e.g. having your name\n listed in the BalmUI GitHub repository, or have your company logo placed\n on this website.\n ")]),t._v(" "),t._m(0),t._v(" "),e("h6",{class:t.$tt("headline6")},[t._v("Special Sponsors")]),t._v(" "),t._m(1)],1)])}),[function(){var t=this,e=t._self._c;return e("ul",[e("li",[e("a",{attrs:{href:"https://opencollective.com/balmjs",target:"_blank",rel:"noopener"}},[t._v("\n Become a backer or sponsor via OpenCollective\n ")])]),t._v(" "),e("li",[e("a",{attrs:{href:"https://www.patreon.com/balmjs",target:"_blank",rel:"noopener"}},[t._v("\n Become a backer or sponsor via Patreon\n ")])])])},function(){var t=this._self._c;return t("p",[t("a",{staticClass:"laravel-admin",attrs:{href:"https://laravel-admin.org/",target:"_blank",rel:"noopener"}},[this._v("\n Laravel Admin\n ")])])}],!1,null,null,null).exports;let D=[{path:"/test",name:"test",component:()=>o.e(6).then(o.bind(null,"re4y")),meta:{noLayout:!0}}];var U=u.d?D:[];a.a.use(c.a),a.a.use(s.a);const N=[{path:"/",name:"home",component:C},{path:"/donate",name:"donate",component:j},{path:"/guide",name:"guide",redirect:"/guide/intro",component:b,children:f},{path:"/general",name:"general",redirect:"/general/button",component:b,children:v},{path:"/layout",name:"layout",redirect:"/layout/grid",component:b,children:q},{path:"/navigation",name:"navigation",redirect:"/navigation/drawer",component:b,children:y},{path:"/theme",name:"theme",redirect:"/theme/color",component:b,children:x},{path:"/data-input",name:"data-input",redirect:"/data-input/textfield",component:b,children:w},{path:"/data-display",name:"data-display",redirect:"/data-display/list",component:b,children:k},{path:"/feedback",name:"feedback",redirect:"/feedback/dialog",component:b,children:T},{path:"/misc",name:"misc",redirect:"/misc/event",component:b,children:$},{path:"/store",name:"store",component:()=>o.e(73).then(o.bind(null,"0vnI"))},{path:"/utils",name:"utils",component:()=>o.e(77).then(o.bind(null,"dSgZ"))},{path:"*",component:()=>o.e(69).then(o.bind(null,"fO8F"))}].concat(U),O=new c.a({routes:N});!function(t){const e=Object(d.d)();t.beforeEach(((t,o,d)=>{e.emit("page-loading"),d()}));const o="balmui";t.afterEach(((t,d)=>{let n=document.querySelector("html").classList,l=t.name;if(!l||(l.indexOf("-drawer")>-1||l.indexOf("-toolbar")>-1||["layouts.grid","layouts.top-app-bar","test"].includes(l))?n.add(`${o}-no-layout`):n.remove(`${o}-no-layout`),d.name){let t=d.name.replace(".","_");n.remove(`${o}-${t}`)}if(t.name){let e=t.name.replace(".","_");n.add(`${o}-${e}`)}t.name!==d.name&&g(t.fullPath),e.emit("page-loaded")}))}(O);var B=O,_=o("CKNg"),P=o.n(_),E=o("5CTy"),M=o("Vo8n"),V=o("3BxJ"),z=o.n(V);a.a.use(P.a);const A=new P.a({locale:"en",messages:{en:E,zh:M}}),L={zh:z.a.zh};a.a.prototype.pickerLang=L;var R=A;const F=Object(d.f)();var H={data:()=>({themeColors:{},lang:""}),created(){this.theme=this.getThemeName(),this.setTheme()},methods:{getThemeName:()=>localStorage.getItem("theme")||"light",getTheme(){["background","primary","on-primary","secondary","on-secondary","surface","on-surface","error","on-error"].forEach((t=>{this.$set(this.themeColors,t,F.getThemeColor(t))}))},setTheme(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.theme;const e=u.h[t];localStorage.setItem("theme",t),F.colors=e,this.getTheme()},switchTheme(){const t="dark"===this.theme?"light":"dark";this.theme=t,this.setTheme(t)}}};const G=Object(d.d)();var W={mixins:[H,{data:()=>({lang:""}),created(){this.lang=this.getLang()},methods:{getLang:()=>localStorage.getItem("lang")||"en",setLang(t){let{value:e}=t;this.lang=e,localStorage.setItem("lang",e),G.emit("switch-lang",e)}}},{data:()=>({serviceWorker:null,demos:[]}),methods:{initSnippet(t,e){if(this.$store.demos=[],"utils"!==t&&e){this.$store.demos=[""];for(let d=1;d<=e;d++){let e=`${t}/demo${d}`,n=o("ddae")(`./${e}.md`);this.$store.demos.push(n)}}}}}]},Y=o("zuR4");const K=Object(d.d)();var J={install(t){t.prototype.$http=Y.a,Y.a.interceptors.request.use((t=>t),(t=>Promise.reject(t))),Y.a.interceptors.response.use((t=>(K.emit("off-loading"),t.data)),(t=>(K.emit("off-loading"),t.response?K.emit("on-error","Response Error"):t.request?K.emit("on-error","Request Error"):K.emit("on-error","Unknown Error"),Promise.reject(t))))}},X=o("DJqZ"),Q={data:()=>({open:!1,selectedTheme:"baseline",themeColorList:[{label:"Baseline (default)",value:"baseline"},{label:"Dark background (custom)",value:"dark"},{label:"Black primary (custom)",value:"black"},{label:"Shrine (custom)",value:"shrine"}]}),methods:{onSelected(t){let e=this.themeColorList[t.index].value;switch(e){case"dark":this.primary="#ffd54f",this.secondary="#ec407a";break;case"black":this.primary="#212121",this.secondary="#64dd17";break;case"shrine":this.primary="#fcb8ab",this.secondary="#feeae6";break;default:this.primary="#6200ee",this.secondary="#018786"}this.$theme.colors="shrine"===e?{primary:this.primary,secondary:this.secondary,"on-primary":"#442b2d","on-secondary":"#442b2d"}:{primary:this.primary,secondary:this.secondary},this.$store.getTheme(),this.selectedTheme=e,this.$refs.colorButton.$el.dataset.theme=e}}},Z=Object(m.a)(Q,(function(){var t=this,e=t._self._c;return e("ui-menu-anchor",{staticClass:"switch-theme"},[e("ui-button",{ref:"colorButton",attrs:{title:"Change theme colors","data-theme":"baseline"},on:{click:function(e){return t.$balmUI.onShow("open")}}},[e("i",{staticClass:"demo-theme-color-radio"},[e("span",{staticClass:"demo-theme-color-radio__inner"})])]),t._v(" "),e("ui-menu",{staticClass:"demo-theme-menu",on:{selected:t.onSelected},model:{value:t.open,callback:function(e){t.open=e},expression:"open"}},t._l(t.themeColorList,(function(o,d){return e("ui-menuitem",{key:d,class:{"demo-theme-menu__list-item--selected":t.selectedTheme===o.value},attrs:{"data-theme":o.value}},[e("ui-menuitem-icon",[e("i",{staticClass:"demo-theme-color-radio"},[e("span",{staticClass:"demo-theme-color-radio__inner"})])]),t._v("\n "+t._s(o.label)+"\n ")],1)})),1)],1)}),[],!1,null,null,null).exports;const tt=[{name:"guide",children:[{name:"intro"},{name:"quickstart"},{name:"advanced"},{name:"kill-ie"},{name:"upgrade"}]},"-",{name:"theme",children:[{icon:"palette",name:"color"},{icon:"text_fields",name:"typography"},{icon:"emoji_symbols",name:"icons"},{icon:"category",name:"shape"}]},"-",{name:"general",children:[{icon:"add_box",name:"button"},{icon:"add_circle_outline",name:"fab"},{icon:"add",name:"icon-button"},{icon:"add_box",name:"segmented-button"}]},"-",{name:"layout",children:[{icon:"web",name:"top-app-bar"},{icon:"grid_on",name:"grid"},{icon:"view_list",name:"form"},{icon:"horizontal_rule",name:"divider"}]},"-",{name:"navigation",children:[{icon:"vertical_split",name:"drawer"},{icon:"tab",name:"tabs"},{icon:"menu",name:"menu"},{icon:"pages",name:"pagination"},{icon:"video_label",name:"bottom-navigation",plus:!0}]},"-",{name:"data-input",children:[{icon:"text_format",name:"textfield"},{icon:"text_format",name:"autocomplete"},{icon:"wysiwyg",name:"editor",plus:!0},{icon:"menu",name:"select"},{icon:"check_box",name:"checkbox"},{icon:"radio_button_checked",name:"radio"},{icon:"indeterminate_check_box",name:"chips"},{icon:"file_upload",name:"file"},{icon:"today",name:"datepicker"},{icon:"date_range",name:"rangepicker"},{icon:"toggle_off",name:"switch"},{icon:"linear_scale",name:"slider"},{icon:"api",name:"validator"}]},"-",{name:"data-display",children:[{icon:"list",name:"list"},{icon:"view_comfy",name:"image-list"},{icon:"category",name:"card"},{icon:"table_view",name:"table"},{icon:"swap_vert",name:"collapse"},{icon:"category",name:"badge"},{icon:"account_tree",name:"tree",plus:!0}]},"-",{name:"feedback",children:[{icon:"feedback",name:"alert"},{icon:"event_note",name:"dialog"},{icon:"event_note",name:"alert-dialog"},{icon:"event_note",name:"confirm-dialog"},{icon:"call_to_action",name:"snackbar"},{icon:"call_to_action",name:"toast"},{icon:"notifications",name:"banner"},{icon:"trip_origin",name:"progress"},{icon:"pending",name:"spinner"},{icon:"notes",name:"skeleton",plus:!0},{icon:"feedback",name:"tooltip"},{icon:"video_label",name:"bottom-sheet",plus:!0},{icon:"video_label",name:"side-sheet",plus:!0}]},"-",{name:"misc",children:[{icon:"api",name:"event"},{icon:"mouse",name:"debounce"},{icon:"texture",name:"ripple"},{icon:"layers",name:"elevation"},{icon:"anchor",name:"anchor",plus:!0},{icon:"content_copy",name:"copy",plus:!0},{icon:"touch_app",name:"longpress",plus:!0}]},"-",{icon:"storage",name:"store",link:!0},"-",{icon:"widgets",name:"utils",link:!0},"-","footer"];let et=[];for(let $t of tt)if("-"===$t||"footer"===$t)et.push($t);else if(et.push({icon:$t.icon,name:$t.name,url:!!$t.link&&$t.name}),$t.children)for(let t of $t.children){let e="icons"===t.name?t.name:`${$t.name}.${t.name}`;et.push({isSubmenu:!0,icon:t.icon,name:t.name,url:e,plus:t.plus||!1})}var ot=et,dt={metaInfo:{title:"BalmUI"},components:{TopAppToolbar:X.a,SwitchTheme:Z},data:()=>({version:u.b,menu:ot,bodyEl:document.documentElement||document.body,isWideScreen:!0,drawerType:"permanent",openDrawer:!1,pageLoad:{loading:!1,progress:0,timer:null},showBanner:!1,hasNewVersion:!1}),computed:{noLayout(){return!this.$route.name||this.$route.meta&&this.$route.meta.noLayout}},mounted(){this.$bus.on("on-error",(t=>{this.$alert(t)})),this.$bus.on("page-loading",(()=>{this.pageLoad.loading=!0,this.pageLoad.progress=0,clearInterval(this.pageLoad.timer),this.pageLoad.timer=setInterval(this.loading,u.f/5)})),this.$bus.on("page-loaded",(()=>{this.loaded(),setTimeout((()=>{this.pageLoad.loading=!1,this.bodyEl.scrollTop=0}),1)})),this.$bus.on("global-message",(t=>{this.showBanner=t})),this.$i18n.locale=this.$store.lang,this.$bus.on("switch-lang",(t=>{this.$i18n.locale=t})),this.$bus.on("refresh",(()=>{this.hasNewVersion=!0,this.showBanner=!0})),this.init(),window.addEventListener("balmResize",this.init)},beforeDestroy(){this.$bus.off(["page-loading","page-loaded","global-message","switch-lang"]),window.removeEventListener("balmResize",this.init)},methods:{getDrawerType(){return this.isWideScreen=window.innerWidth>=u.a,this.isWideScreen?"permanent":"modal"},init(){this.drawerType=this.getDrawerType()},handleMenu(t,e){this.openDrawer=!1,window.innerWidthRecommended Choice\uff1aChrome
\n<div v-anchor.html class="container">\n <a class="v-anchor" data-href="#target3">Anchor 3</a>\n <a class="v-anchor" data-href="#target4">Anchor 4</a>\n\n <div id="target3">Target 3</div>\n <div id="target4">Target 4</div>\n</div>\n
'},pb3D:function(t,e){t.exports='<ui-bottom-sheet></ui-bottom-sheet>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | \u5e95\u90e8\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5e95\u90e8\u52a8\u4f5c\u8868\u7684\u5185\u5bb9\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u5e95\u90e8\u52a8\u4f5c\u8868\u9690\u85cf\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5e95\u90e8\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-bottom-sheet v-model="open"></ui-bottom-sheet>\n
\u624b\u52a8
<ui-bottom-sheet\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-bottom-sheet>\n
<ui-editor\n ref="editor"\n v-model="decodeContent"\n placeholder="Compose an epic..."\n :toolbar="toolbar"\n :toolbar-handlers="toolbarHandlers"\n custom-image-handler\n @file-change="onFileChange"\n></ui-editor>\n\n<!-- Custom editor content preview -->\n<ui-dialog v-model="preview.show" class="preview-dialog">\n <ui-dialog-title>\n Preview\n <ui-icon-button\n class="close"\n icon="close"\n @click="$balmUI.onClose('preview.show')"\n ></ui-icon-button>\n </ui-dialog-title>\n <ui-dialog-content>\n <ui-tabs\n v-model="preview.type"\n :type="2"\n :items="[\n {\n text: 'Desktop',\n icon: 'desktop_windows'\n },\n {\n text: 'Tablet',\n icon: 'tablet'\n },\n {\n text: 'Mobile',\n icon: 'phone_iphone'\n }\n ]"\n ></ui-tabs>\n <div\n v-shadow="4"\n class="preview-content"\n :style="previewStyle"\n v-html="preview.content"\n ></div>\n </ui-dialog-content>\n</ui-dialog>\n
const toolbar = [\n [\n { header: [false, 1, 2, 3, 4, 5, 6] },\n { font: [] },\n { size: [] },\n { lineheight: [] }\n ],\n ['bold', 'italic', 'underline', { color: [] }, { background: [] }],\n [\n { align: '' },\n { align: 'center' },\n { align: 'right' },\n { align: 'justify' }\n ],\n [\n { list: 'ordered' },\n { list: 'bullet' },\n { indent: '+1' },\n { indent: '-1' },\n 'blockquote',\n 'emoji'\n ],\n ['link', 'image', 'video'],\n ['strike', { script: 'super' }, { script: 'sub' }, 'divider'],\n ['clean', 'undo', 'redo'],\n ['preview'] // custom\n];\n\nexport default {\n data() {\n return {\n toolbar,\n encodeContent: '',\n decodeContent: '',\n toolbarHandlers: {\n preview: (quill, value) => {\n this.preview.show = true;\n this.preview.content = this.decodeContent;\n }\n },\n preview: {\n show: false,\n type: 0,\n content: ''\n }\n };\n },\n computed: {\n previewStyle() {\n let width;\n\n switch (this.preview.type) {\n case 1:\n width = '768px';\n break;\n case 2:\n width = '375px';\n break;\n default:\n width = '960px';\n }\n\n return { width };\n }\n },\n mounted() {\n setTimeout(() => {\n if (this.$refs.editor) {\n this.decodeContent = this.$refs.editor.decodeEmoji(\n '<p>Hello BalmUI [oo] and BalmJS :smile: !</p>'\n );\n }\n }, 1);\n },\n methods: {\n async onFileChange(file, insert) {\n let { url } = await this.$http.post('/api/upload', { file });\n insert(url);\n },\n onSubmit() {\n this.encodeContent = this.$refs.editor.encodeEmoji(this.decodeContent);\n // submit action...\n }\n }\n};\n
'},pj72:function(t,e){t.exports='<ui-alert><!-- message --></ui-alert>\n
Name | Type | Default | Description |
---|---|---|---|
state | string | '' | \u72b6\u6001\u56fe\u6807\u7c7b\u578b |
stateOutlined | boolean | false | \u663e\u793a\u8f6e\u5ed3\u72b6\u6001\u56fe\u6807 |
closable | boolean | false | \u662f\u5426\u53ef\u5173\u95ed |
interface Alert {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6d88\u606f\u5185\u5bb9\u53ca HTML |
<ui-button raised @click="$balmUI.onOpen('open')">Show Dialog</ui-button>\n\n<ui-dialog\n v-model="open"\n @confirm="onConfirm">\n <ui-dialog-title>Use Google's location service?</ui-dialog-title>\n <ui-dialog-content>\n <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>\n </ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n
export default {\n data() {\n return {\n open: false\n };\n },\n methods: {\n onConfirm(result) {\n if (result) {\n console.log('ok');\n } else {\n console.log('cancel');\n }\n }\n }\n};\n
'},puJo:function(t,e){t.exports='<div v-shadow="4"></div>\n
v-shadow="z"
Value | Type | Default | Description |
---|---|---|---|
z | number | 0 | \u8bbe\u7f6e\u9634\u5f71\u5c42\u7ea7\uff0c\u8303\u56f4\u503c\uff1a[0, 24] |
v-shadow.transition="[z1, z2]"
\u5e94\u7528\u6b63\u786e\u7684 CSS \u89c4\u5219\u5728\u9634\u5f71\u5c42\u7ea7\u4e4b\u95f4\u8f6c\u6362\uff1a
z1
: \u9ed8\u8ba4\u7684\u5c42\u7ea7z2
: \u9f20\u6807\u7ecf\u8fc7\u65f6\u7684\u5c42\u7ea7<ui-select-helper><!-- the helper text --></ui-select-helper>\n
Name | Type | Default | Description |
---|---|---|---|
validMsg (v-model ) | string, boolean | false | Indicates the helper text is a validation message. |
id | string | null | Mandatory. (Corresponding to the helperTextId prop matching <ui-select> ) |
visible | boolean | false | Makes the helper text permanently visible. |
Name | Props | Description |
---|---|---|
default | The default slot holds the select helper text and can contain HTML. |
<ui-spinner :progress="progress"></ui-spinner>\n
<script>\nexport default {\n data() {\n return {\n progress: 0\n };\n }\n}\n
'},q2jH:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/form-field/form-field';\n@use 'balm-ui/components/checkbox/checkbox';\n
import Vue from 'vue';\nimport UiFormField from 'balm-ui/components/form-field';\nimport UiCheckbox from 'balm-ui/components/checkbox';\n\nVue.use(UiFormField);\n// Optional. Overwrite `<ui-checkbox>` props with default value.\nVue.use(UiCheckbox, {\n // some props\n});\n
'},q4nJ:function(t,e){t.exports=""},q6jy:function(t,e){t.exports='@use 'balm-ui/components/skeleton' with (\n $avatar: (\n base: 36px,\n large: 40px,\n small: 24px\n ),\n\n $color: #f2f2f2,\n $to-color: global-function.shade($color, 10%)\n);\n
'},qUyM:function(t,e){t.exports='<ui-button><!-- the button text label --></ui-button>\n
<ui-button>
Types
0
: 'text'
1
: 'outlined'
2
: 'raised'
3
: 'unelevated'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Button types. | |
outlined | boolean | false | Optional. Styles an outlined button that is flush with the surface. | |
raised | boolean | false | Optional. Styles a contained button that is elevated above the surface. | |
unelevated | boolean | false | Optional. Styles a contained button that is flush with the surface. | |
icon | string | '' | Optional. Indicates an icon element. See Material Icons list. | |
disabled | boolean | false | The <button> native attribute. To disable a button. | |
nativeType | string | 'button' | The <button> native attribute. | 8.1.1 |
interface Button {\n nativeType: 'button' | 'submit' | 'reset';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the button or link text and can contain HTML. | |
before | iconClass | Custom leading icon |
after | iconClass | Custom trailing icon |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the button is clicked. |
<ui-banner><!-- the banner message --></ui-banner>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
open (v-model ) | boolean | false | \u6a2a\u5e45\u663e\u793a\u72b6\u6001 | |
centered | boolean | false | \u5185\u5bb9\u5c45\u4e2d\u663e\u793a\u3002\u9ed8\u8ba4\u5c45\u5de6\u3002 | 8.27.0 |
fixed | boolean | false | \u5728\u9876\u90e8\u5bfc\u822a\u680f\u4e0b\u65b9\u4f7f\u7528\u6a2a\u5e45\u65f6\uff0c\u6a2a\u5e45\u5e94\u56fa\u5b9a\u5728\u5c4f\u5e55\u9876\u90e8\u3002 | 8.27.0 |
withImage | boolean | false | \u56fe\u7247\u53ef\u4ee5\u5e2e\u52a9\u4f20\u8fbe\u6a2a\u5e45\u5e7f\u544a\u7684\u4fe1\u606f\u3002 | 8.27.0 |
mobileStacked | boolean | false | \u5e26\u6709\u957f\u6587\u5b57\u7684\u6a2a\u5e45\u5728\u79fb\u52a8\u89c6\u56fe\u4e2d\uff0c\u5e94\u5c06\u5176\u64cd\u4f5c\u533a\u57df\u653e\u7f6e\u5728\u6587\u5b57\u4e0b\u65b9\uff0c\u800c\u4e0d\u662f\u5e76\u6392\u653e\u7f6e\u3002 | 8.27.0 |
primaryButtonText | boolean | 'OK' | \u4e3b\u6309\u94ae\u6587\u672c | |
secondaryButtonText | boolean | '' | \u8f85\u6309\u94ae\u6587\u672c |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6d88\u606f\u6587\u672c\u53ca HTML | |
image | \u81ea\u5b9a\u4e49\u56fe\u6807\u6216\u56fe\u7247\u533a\u57df | |
actions | \u81ea\u5b9a\u4e49\u52a8\u4f5c\u6309\u94ae |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u6a2a\u5e45\u9690\u85cf\u65f6\u89e6\u53d1 |
closed | function(reason: string) | \u6a2a\u5e45\u5173\u95ed\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6a2a\u5e45\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-banner v-model="open"></ui-banner>\n
\u624b\u52a8
<ui-banner\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-banner>\n
import Vue from 'vue';\nimport vDebounce from 'balm-ui/directives/debounce';\n\nVue.directive(vDebounce.name, vDebounce);\n
'},qnyd:function(t,e){t.exports='<ui-card-actions><!-- card actions area --></ui-card-actions>\n
Name | Type | Default | Description |
---|---|---|---|
fullBleed | boolean | false | \u5220\u9664\u64cd\u4f5c\u533a\u57df\u7684\u586b\u5145\uff0c\u5e76\u4f7f\u5176\u64cd\u4f5c\u533a\u57df\u5bbd\u5ea6\u4e3a 100\uff05 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u52a8\u4f5c\u7ec4\u4ef6 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-buttons>
<ui-card-icons>
<ui-image-text><!-- Text labels --></ui-image-text>\n
Name | Props | Description |
---|---|---|
default | Text labels display one line of text related to an image list item. | |
action | Optional. Actionable iconography can represent related actions. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/card/card';\n
import Vue from 'vue';\nimport UiCardComponents from 'balm-ui/components/card';\n\nVue.use(UiCardComponents, {\n // Optional. Overwrite `<ui-card>` props with default value.\n UiCard: {\n // some props\n },\n // Optional. Overwrite `<ui-card-media>` props with default value.\n UiCardMedia: {\n // some props\n },\n // Optional. Overwrite `<ui-card-actions>` props with default value.\n UiCardActions: {\n // some props\n }\n});\n
'},qraV:function(t,e){t.exports='<div v-copy></div>\n
interface Copy {\n text: string;\n success: Function;\n error?: Function;\n}\n
'},qrnz:function(t,e){t.exports='<ui-divider></ui-divider>\n\n<ui-divider>Text</ui-divider>\n
'},qvgR:function(t,e){t.exports='@use '@material/typography/typography' with (\n $font-family: string.unquote('Roboto, sans-serif'),\n\n // Override styles\n $styles-headline1: (),\n $styles-headline2: (),\n $styles-headline3: (),\n $styles-headline4: (),\n $styles-headline5: (),\n $styles-headline6: (),\n $styles-subtitle1: (),\n $styles-subtitle2: (),\n $styles-body1: (),\n $styles-body2: (),\n $styles-caption: (),\n $styles-button: (),\n $styles-overline: ()\n);\n
font-size
line-height
font-weight
letter-spacing
text-decoration
text-transform
\u26a0\ufe0f NOTE:
<ui-drawer-backdrop>
is deprecated in 8.35.0, just use<ui-drawer type="modal">
.
For balm-ui
< 8.35.0
<ui-drawer type="modal"></ui-drawer>\n<ui-drawer-backdrop></ui-drawer-backdrop>\n<div><!-- Content --></div>\n
@use 'balm-ui/components/badge' with (\n $background-color: #db4437,\n $color: #fff,\n $border-radius: 10px,\n $dot-radius: 3px\n);\n
'},"rHP+":function(t,e){t.exports='<ui-tree\n v-model="selectedValue"\n :data="treeData"\n :data-format="dataFormat"\n :max-level="2"\n>\n <p>selectedValue: {{ selectedValue }}</p>\n</ui-tree>\n
export default {\n data() {\n return {\n dataFormat: { label: 'title', value: 'key' },\n treeData: [],\n selectedValue: ''\n };\n }\n};\n
'},rNJt:function(t,e){t.exports='<div v-ripple></div>\n
NOTE: Dynamic class are not supported
v-ripple="color"
v-ripple:cssOnly="color"
Value | Type | Default | Description |
---|---|---|---|
color | number, string | undefined | Sets the ripple color |
1
or 'primary'
.2
or 'secondary'
.v-ripple.unbounded="color"
v-ripple:cssOnly.unbounded="color"
<ui-card-content>\n <!-- content within actionable area: rich media + additional text content -->\n</ui-card-content>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the card content and can contain HTML. |
Child components:
<ui-card-media>
<ui-card-text>
@use 'balm-ui/plugins/confirm' with (\n $width: 450px\n);\n
'},"s+GU":function(t,e){t.exports='<ui-form-field>\n <label></label>\n <!-- awesome form item -->\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
nowrap | boolean | false | Force the text to stay on a single line and ellipse the overflow text. |
alignEnd | boolean | false | Position the input after the label. |
spaceBetween | boolean | false | Align the input and label space between. |
Name | Props | Description |
---|---|---|
default | The default slot holds the form item and can contain HTML. |
page
<ui-button @click="$bus.emit('global-message')">Show Banner</ui-button>\n
layout
<ui-top-app-bar>...</ui-top-app-bar>\n<ui-banner\n v-model="showGlobalMessage"\n class="global-message-banner"\n primary-button-text="Cool"\n secondary-button-text="Good"\n>\n Do you like BalmUI\n</ui-banner>\n<!-- Content -->\n
export default {\n data() {\n return {\n showGlobalMessage: false\n };\n },\n mounted() {\n this.$bus.on('global-message', () => {\n this.showGlobalMessage = true;\n });\n }\n};\n
$bus
: see BalmUI event plugin docs for details
@use 'balm-ui/components/core';\n@use 'balm-ui/components/snackbar/snackbar';\n
import Vue from 'vue';\nimport UiSnackbar from 'balm-ui/components/snackbar';\n\n// Optional. Overwrite `<ui-snackbar>` props with default value.\nVue.use(UiSnackbar, {\n // some props\n});\n
'},sK9k:function(t,e){t.exports='<ui-button>Text</ui-button>\n<ui-button outlined>Outlined</ui-button>\n<ui-button raised>Raised</ui-button>\n\n<ui-button icon="favorite">Icon</ui-button>\n<ui-button>\n Trailing Icon\n <template #after="{ iconClass }">\n <!-- Custom SVG -->\n <svg-logo :class="iconClass"></svg-logo>\n </template>\n</ui-button>\n\n<a v-button href="javascript:void(0)">Link</a>\n
'},sKeb:function(t,e){t.exports='\u5206\u9694\u7ebf\u662f\u5c06\u5185\u5bb9\u6309\u5217\u8868\u548c\u5e03\u5c40\u5206\u7ec4\u7684\u7ec6\u7ebf\u3002
'},sTH5:function(t,e){t.exports='Default Usage
import { types } from 'balm-ui';\n
Individual Usage
import types from 'balm-ui/utils/types';\n
Methods
types.getType(any): string;\n\ntypes.isUndefined(value): boolean;\ntypes.isNull(value): boolean;\ntypes.isBoolean(value): boolean;\ntypes.isNumber(value): boolean;\ntypes.isString(value): boolean;\ntypes.isSymbol(value): boolean;\ntypes.isObject(value): boolean;\ntypes.isArray(value): boolean;\ntypes.isFunction(value): boolean;\n
Default Usage
import { helpers } from 'balm-ui';\n
Individual Usage
import helpers from 'balm-ui/utils/helpers';\n
Methods
helpers.isEmpty(value): boolean;\n\nhelpers.jsonEqual(jsonA, jsonB): boolean; // The order of the properties IS IMPORTANT\nhelpers.isDeepEqual(obj1, obj2): boolean;\n\n// New in 6.7.0\nhelpers.merge(target: object, source: object): object;\nhelpers.merge.all(arrayOfObjects: object[]): object;\n\n// New in 8.38.0\nhelpers.toCamelCase(str: string): string;\nhelpers.toCapitalize(str: string): string;\n
isEmpty
The following values are considered to be empty:undefined
null
false
0
''
'0'
{}
[]
map
or set
Default Usage
import { detectIE } from 'balm-ui';\n
Individual Usage
import detectIE from 'balm-ui/utils/ie';\n
Methods
detectIE(): string | false;\n
IE browser returns version, other browsers return
false
.
New in 8.62.0
Default Usage
import { ban } from 'balm-ui';\n
Individual Usage
import ban from 'balm-ui/utils/ban';\n
Methods
ban(): void;\n
'},sYN3:function(t,e){t.exports='Date pickers let users select a date, or a range of dates.
'},"se/Z":function(t,e){t.exports='New in 4.2.0
<ui-top-app-bar><!-- the application title --></ui-top-app-bar>\n
<ui-top-app-bar>
Types
0
: 'standard'
1
: 'fixed'
2
: 'dense'
3
: 'prominent'
4
: 'prominentDense'
5
: 'short'
6
: 'shortCollapsed'
-1
: 'nonRegular'
Name | Type | Default | Description |
---|---|---|---|
contentSelector | string | (required) | Selector used to style the content below the top app bar, to prevent the top app bar from covering it. |
type | string, number | 0 | Mandatory. Top app bar types. |
fixed | boolean | false | Fixed top app bars stay at the top of the page and elevate above the content when scrolled. |
dense | boolean | false | The dense top app bar is shorter. |
prominent | boolean | false | The prominent top app bar is taller. |
prominentDense | boolean | false | The prominent top app bar with dense. |
short | boolean | false | Short top app bars are top app bars that can collapse to the navigation icon side when scrolled. |
shortCollapsed | boolean | false | Short top app bars can be configured to always appear collapsed. |
title | string | '' | Application title. |
navIcon | string, boolean | 'menu' | A navigation icon. (Set 'close' for the contextual action bar) |
navId | string | null | Control the navigation drawer is opened or closed. (Please refer to the navId prop of the drawer) |
Short top app bars should be used with no more than 1 action item.
Name | Props | Description |
---|---|---|
default | The default slot holds the application title and can contain HTML. | |
nav-icon | navIconClass | The nav-icon slot holds the navigation icon and can contain HTML. |
toolbar | toolbarItemClass | The toolbar slot holds the action items and can contain HTML. |
<template #toolbar="{ toolbarItemClass }">\n <ui-icon-button :class="toolbarItemClass" icon="ICON"></ui-icon-button>\n</template>\n
Name | Type | Description |
---|---|---|
nav | function() | Emits when the navigation icon is clicked. |
close | function() | Emits when the navigation icon is clicked. Applicable only for Contextual action bar. |
NOTE: If you are not using
navId
of the top app bar andnavId
of the drawer, you should listen for the top app bar using@nav
and update thev-model
prop of the drawer.
Automatic
<ui-top-app-bar nav-id="demo-menu"></ui-top-app-bar>\n<ui-drawer nav-id="demo-menu" type="modal"></ui-drawer>\n
Manual
<ui-top-app-bar @nav="$balmUI.onChange('open', !open)"></ui-top-app-bar>\n<ui-drawer v-model="open" type="modal"></ui-drawer>\n
<ui-editor v-model="content" theme="bubble"></ui-editor>\n
'},"t+gi":function(t,e){t.exports='\u5f53\u7528\u6237\u5c06\u9f20\u6807\u60ac\u505c\uff0c\u805a\u7126\u6216\u70b9\u51fb\u67d0\u4e2a\u5143\u7d20\u65f6\uff0c\u6587\u5b57\u63d0\u793a\u5c06\u663e\u793a\u4fe1\u606f\u4e30\u5bcc\u7684\u6587\u672c\u3002
'},t1wV:function(t,e){t.exports='New in 8.0.0
<ui-progress></ui-progress>\n
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u4e3a\u6d3b\u52a8\u72b6\u6001 |
progress | number | 0 | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u503c\u3002\u503c\u7684\u8303\u56f4\u4e3a [0, 1] |
buffer | number | 0 | \u8bbe\u7f6e\u7f13\u51b2\u533a\u503c\u3002\u503c\u7684\u8303\u56f4\u4e3a [0, 1] |
label | string | '' | \u8fdb\u5ea6\u6761\u8bf4\u660e\u6587\u5b57 |
closed | boolean | false | \u9690\u85cf\u8fdb\u5ea6\u6761 |
<ui-image-list type="masonry" :text-protection="labelsType === 2">\n <ui-image-item\n v-for="(item, index) in list"\n :key="index"\n :image="require(`@/assets/photos/${item}.jpg`)"\n >\n <ui-image-text v-if="labelsType">\n Text label\n <template #action>\n <ui-icon-button icon="favorite_border"></ui-icon-button>\n </template>\n </ui-image-text>\n </ui-image-item>\n</ui-image-list>\n
export default {\n data() {\n return {\n labelsType: 1\n };\n }\n};\n
'},tZAW:function(t,e){t.exports='<ui-textfield outlined>\n Your Name\n</ui-textfield>\n
'},tbK0:function(t,e){t.exports='<div v-badge></div>\n
v-badge="count"
v-badge.overlap="count"
v-badge.dot
Value | Type | Default | Description |
---|---|---|---|
count | number | 0 | \u5fbd\u7ae0\u4e2d\u663e\u793a\u7684\u6570\u5b57 |
'},tg3m:function(t,e){t.exports='\u53ef\u663e\u793a\u7684\u6700\u5927\u6570\uff1a
99
\ud83c\udf89
balm-ui
(v9+) for Vue 3, see material.balmjs.com
balm-ui-next.js
\u5df2\u5f03\u7528UiCollapse
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93UiBottomNavigation
\u4ece balm-ui-next.js
\u5230 balm-ui-plus.js
\u5e93UiBottomSheet
\u4ece balm-ui-next.js
\u5230 balm-ui-plus.js
\u5e93vDebounce
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93UiAlert
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93$validator
: \u66f4\u65b0\u9a8c\u8bc1\u89c4\u5219\u683c\u5f0f
Old
interface BalmUIValidationRule {\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = {\n [key: string]: BalmUIValidationRule;\n}\n
New
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = BalmUIValidationRule[]\n
UiAutocomplete
, UiDatepicker
, UiRangepicker
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93$alert
, $confirm
, $toast
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93\u65b0\u7ec4\u4ef6:
<ui-banner>
<ui-tooltip>
<ui-nav-item>
\u65b0\u63d2\u4ef6:
$bus
$store
$theme
: \u5168\u65b0\u7684\u4e3b\u9898 APIs
v-shape
: \u5168\u65b0\u7684\u5f62\u72b6 APIs
<ui-menuitem>
: \u65b0\u589e\u5c5e\u6027 value
<ui-form>
: \u65b0\u589e\u5c5e\u6027 itemMarginBottom
, labelWidth
, labelMarginRight
, labelMarginBottom
Sass: \u590d\u5199\u53d8\u91cf\u66f4\u7b80\u6d01
\u65e7\u7684
@use '@material/button/variables';\n
\u65b0\u7684
@use '@material/button';\n
$themeColor
, $setTheme
, $textColor
, $setTextTheme
: \u5df2\u5f03\u7528\u3002\u4f7f\u7528 $theme
\u4ee3\u66ff<ui-slider>
: \u91cd\u547d\u540d\u5c5e\u6027 displayMarker
\u4e3a withTickMarks
<ui-pagination>
:before
, before-jumper
\u548c after-jumper
first
\u548c last
<ui-nav>
: \u79fb\u9664\u63d2\u69fd\u5c5e\u6027 itemClass
, activeClass
\u3002\u4f7f\u7528\u65b0\u7ec4\u4ef6 <ui-nav-item>
<ui-table>
: thead \u81ea\u5b9a\u4e49\u5bf9\u8c61\u4e2d\u7684 by
\u5b57\u6bb5\u91cd\u547d\u540d\u4e3a columnId
<ui-drawer>
: \u65b0\u589e\u5c5e\u6027 viewportHeight
<ui-menu>
, <ui-select>
: \u5404\u65b0\u589e\u5c5e\u6027 fullwidth
<ui-textfield>
: \u65b0\u589e\u5c5e\u6027 prefixText
, suffixText
, endAligned
, withCounter
v-anchor
: \u65b0\u589e\u4fee\u9970\u7b26 bodyElement
<ui-a>
<ui-icon-a>
<ui-nav>
: \u91cd\u547d\u540d\u63d2\u69fd\u5c5e\u6027 activatedClass
\u4e3a activeClass
<ui-textfield>
: \u79fb\u9664\u5c5e\u6027 dense
<ui-textfield-helper>
: \u91cd\u547d\u540d\u5c5e\u6027 counter
\u4e3a withCounter
<ui-textfield-counter>
: \u79fb\u9664\u7ec4\u4ef6\u3002\u4f7f\u7528 <ui-textfield-helper withCounter>
\u6216 <ui-textfield withCounter>
\u6765\u4ee3\u66ff@use 'balm-ui/components/core';\n@use 'balm-ui/components/editor/editor';\n@use 'balm-ui/components/icon/icon';\n\n// Choose one editor theme\n@use 'balm-ui/components/editor/theme/snow';\n@use 'balm-ui/components/editor/theme/bubble';\n
import Vue from 'vue';\nimport UiEditor from 'balm-ui/components/editor';\n\n// Optional. Overwrite `<ui-editor>` props with default value.\nVue.use(UiEditor, {\n // some props\n});\n
'},trld:function(t,e){t.exports='\u26a0\ufe0f \u63d0\u793a\uff1a
<ui-drawer-backdrop>
\u5728 8.35.0 \u4e2d\u5df2\u5f03\u7528\uff0c\u76f4\u63a5\u4f7f\u7528<ui-drawer type="modal">
\u5373\u53ef\u3002
For balm-ui
< 8.35.0
<ui-drawer type="modal"></ui-drawer>\n<ui-drawer-backdrop></ui-drawer-backdrop>\n<div><!-- Content --></div>\n
<ui-slider></ui-slider>\n
<ui-slider>
\u7c7b\u578b
0
: 'continuous'
1
: 'discrete'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u6ed1\u52a8\u6761\u7c7b\u578b |
discrete | boolean | false | \u5c06\u6ed1\u52a8\u6761\u6837\u5f0f\u8bbe\u7f6e\u4e3a\u79bb\u6563\u6ed1\u52a8\u6761 |
withTickMarks | boolean | false | \u79bb\u6563\u6ed1\u52a8\u6761\u652f\u6301\u8f68\u9053\u4e0a\u7684\u663e\u793a\u6807\u8bb0 |
model (v-model ) | number, array | 0 | \u6ed1\u52a8\u6761\u503c\uff08array \u503c\u8868\u793a\u4e3a\u8303\u56f4\u6ed1\u52a8\u6761\uff09 |
min | number | 0 | \u6ed1\u52a8\u6761\u53ef\u4ee5\u5177\u6709\u7684\u6700\u5c0f\u503c |
max | number | 100 | \u6ed1\u52a8\u6761\u53ef\u4ee5\u5177\u6709\u7684\u6700\u5927\u503c |
step | number | 1 | \u8bbe\u7f6e\u6ed1\u52a8\u6761\u503c\u7684\u589e\u91cf |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
Name | Type | Description |
---|---|---|
change | function(value: number|array) | \u5f53\u7528\u6237\u505c\u6b62\u62d6\u52a8\u6ed1\u5757\u6216\u6ed1\u52a8\u6761\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6ed1\u52a8\u6761\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-slider v-model="value"></ui-slider>\n
\u624b\u52a8
<ui-slider\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-slider>\n
<ui-grid-cell><!-- the grid cell content --></ui-grid-cell>\n
Name | Type | Default | Description |
---|---|---|---|
nested | boolean | false | The nested layout grid. |
columns | number, object | 4 | Optional, specifies the number of columns the cell spans. |
order | number | 0 | Optional, specifies the order of the cell. |
align | string | '' | Optional, specifies the alignment of cell. |
interface GridCell {\n columns: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n order: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n align: 'top' | 'middle' | 'bottom';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the grid cell content and can contain HTML. |
When your contents need extra structure that cannot be supported by single layout grid, you can nest layout grid within each other. To nest layout grid, using
<ui-grid-cell nested>
.
<ui-grid>\n <ui-grid-cell nested>\n <!-- Parent 1 -->\n <ui-grid-cell>Child 1</ui-grid-cell>\n <ui-grid-cell>Child 2</ui-grid-cell>\n <ui-grid-cell>Child 3</ui-grid-cell>\n </ui-grid-cell>\n <ui-grid-cell>Parent 2</ui-grid-cell>\n <ui-grid-cell>Parent 3</ui-grid-cell>\n</ui-grid>\n
'},uMtO:function(t,e){t.exports='<ui-tooltip>
Types
0
: 'plain'
<div aria-describedby="tooltip-id">Text</div>\n<ui-tooltip id="tooltip-id">Tips content</ui-tooltip>\n
1
: 'rich'
(New in 8.33.0)
<ui-tooltip-anchor>\n <div data-tooltip-id="tooltip-id">Text</div>\n <ui-tooltip id="tooltip-id" rich>Tips content</ui-tooltip>\n</ui-tooltip-anchor>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Tooltip types. | 8.33.0 |
rich | boolean | false | Optional. Styles a rich tooltip. | 8.33.0 |
width | number | 0 | Custom max width for the tooltip. |
Name | Props | Description |
---|---|---|
default | The default slot holds the tooltip content and can contain HTML. |
Name | Props | Description |
---|---|---|
title | The title slot holds the tooltip title and can contain HTML. | |
default | linkClass | The default slot holds the tooltip content and can contain HTML. |
<ui-divider></ui-divider>\n
<ui-divider>
Types
0
: 'horizontal'
1
: 'vertical'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Text divider types. |
Name | Props | Description |
---|---|---|
default | The default slot holds the divider text and can contain HTML. | |
left | Applicable only for the vertical text divider. | |
right | Applicable only for the vertical text divider. |
$toast(message)
$toast(options)
type ToastMessage = string;\n\ninterface ToastOptions {\n className?: string;\n timeoutMs?: number;\n message: ToastMessage;\n position?: 'bottom' | 'center' | 'top';\n}\n\ninterface VueInstance {\n $toast(options: ToastMessage | ToastOptions): Promise<void>;\n}\n
Option | Type | Default | Description | Version |
---|---|---|---|---|
className | string | '' | The custom class name for the toast. | |
timeoutMs | number | 2750 | The amount of time in milliseconds to show the toast. Value must be between 2000 and 3500 or an error will be thrown. | |
message | string | '' | The text message to display. | |
position | string | 'bottom' | Toast position. | 8.30.0 |
$toast
without .vue
componentNew in 8.1.0
import { useToast } from 'balm-ui';\n// OR\n// import { useToast } from 'balm-ui/plugins/toast';\n\nconst $toast = useToast();\n$toast('Hello BalmUI');\n
'},uaR4:function(t,e){t.exports='<transition-group class="preview-list" name="list" tag="ul">\n <li v-for="(file, index) in files" :key="file.tmpId" class="item">\n <div class="inner">\n <span class="preview" :style="setBg(file)"></span>\n <span class="actions">\n <ui-fab\n v-if="!file.uploaded"\n icon="publish"\n mini\n @click="upload(file)"\n ></ui-fab>\n <ui-fab icon="delete" mini @click="remove(index)"></ui-fab>\n </span>\n </div>\n </li>\n <li v-if="files.length < limit" key="add" class="item add-btn">\n <div class="inner">\n <ui-file accept="image/*" multiple preview @change="onChange">\n <ui-icon class="add-icon">add</ui-icon>\n </ui-file>\n </div>\n </li>\n</transition-group>\n<p>\n <ui-button raised @click="uploadAllFiles">\n <ui-icon>publish</ui-icon>\n Upload All\n </ui-button>\n</p>\n
export default {\n data() {\n return {\n files: [],\n limit: 5,\n postUrl: '/api/upload'\n };\n },\n methods: {\n setBg({ previewSrc }) {\n return previewSrc ? { backgroundImage: `url(${previewSrc})` } : {};\n },\n onChange(files) {\n if (files.length > this.limit - this.files3.length) {\n this.$toast(`Image Limit: ${this.limit}`);\n } else {\n files.forEach((file) => {\n file.uploaded = false;\n this.files3.push(file);\n });\n }\n },\n async upload(file) {\n try {\n let response = await this.$http.post(this.postUrl, {\n file: file.sourceFile\n });\n file.uploaded = true;\n console.log(`${file.name} is uploaded`);\n } catch (e) {\n // your code\n }\n },\n uploadAllFiles() {\n if (this.files3.length) {\n this.files3.forEach((file) => {\n this.upload(file);\n });\n } else {\n this.$toast('No files');\n }\n },\n remove(index) {\n this.files3.splice(index, 1);\n }\n }\n};\n
/* extends demo2 */\n.preview-list {\n & > .item {\n .actions {\n display: flex;\n align-items: center;\n justify-content: space-around;\n height: 48px;\n }\n &.add-btn {\n .mdc-file {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: 100%;\n border: 1px solid #ddd;\n border-radius: 3px;\n cursor: pointer;\n background-color: #fff;\n }\n .add-icon {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n font-size: 48px;\n }\n }\n }\n}\n
'},ucOw:function(t,e){t.exports='Menus display a list of choices on temporary surfaces.
'},uhQy:function(t,e){t.exports='\u5c0f\u6570\u503c\u6216\u72b6\u6001\u7684\u63cf\u8ff0\u7b26\u3002
'},ujjC:function(t,e){t.exports='New in 6.4.1
Pagination controls provide swift access to all pages while indicating that more pages exist.
'},unHe:function(t,e){t.exports='<div v-longpress></div>\n
type LongpressConfig =\n | Function // New in 8.52.0\n | {\n callback: Function;\n delay?: number;\n };\n
'},"v/FX":function(t,e){t.exports='<ui-grid class="demo-grid" fixed-column-width position="right">\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n</ui-grid>\n
'},v2TX:function(t,e){t.exports='<ui-menu-anchor><!-- the menu component --></ui-menu-anchor>\n
Name | Type | Default | Description |
---|---|---|---|
position | string | '' | \u8bbe\u7f6e\u83dc\u5355\u6309\u94ae\u4f4d\u7f6e\uff08\u76f8\u5bf9\u4e8e\u83dc\u5355\u951a\u70b9\uff09 |
absolute | boolean | false | \u542f\u7528\u7edd\u5bf9\u5b9a\u4f4d\uff08\u5176\u5bb9\u5668\u9700\u8981\u8bbe\u7f6e position: relative \uff09 |
interface MenuAnchor {\n position:\n | 'top left'\n | 'top right'\n | 'middle left'\n | 'middle right'\n | 'bottom left'\n | 'bottom right';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u83dc\u5355\u7ec4\u4ef6\u53ca HTML |
<ui-icon><!-- the material design icon name --></ui-icon>\n
<ui-icon>
Types
0: 'filled'
1: 'outlined'
2: 'round'
3: 'twoTone'
4: 'sharp'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Material icon theme. |
outlined | boolean | false | Outlined icons customize stroke and fill attributes for a light, clean style that works well in dense UIs. The stroke weight of outlined icons can be adjusted to complement or contrast the weight of your typography. |
round | boolean | false | Rounded icons use a corner radius that pairs well with brands that use heavier typography, curved logos, or circular elements to express their style. |
twoTone | boolean | false | Two-tone icons have added dimension, using the attributes of stroke, fill, and color. Contrasting stroke and fill colors enables the use of multiple brand colors and can improve legibility. |
sharp | boolean | false | Sharp icons display corners with straight edges, for a crisp style that remains legible even at smaller scales. These rectangular shapes can support brand styles that aren\u2019t well-reflected by rounded shapes. |
size | number | 24 | Material icon sizing. |
dark | boolean | false | An icon on a light background with a dark foreground color. |
light | boolean | false | An icon on a dark background with a light foreground color. |
inactive | boolean | false | An icon is disabled or inactive. |
Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, we recommend them to be shown in either
18
,24
,36
or48
px.
Name | Props | Description |
---|---|---|
default | The default slot holds the material design icon name and can contain HTML. |
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the icon is clicked. |
<ui-list-divider></ui-list-divider>\n\n<ui-item-divider></ui-item-divider>\n
Name | Type | Default | Description |
---|---|---|---|
padded | boolean | false | Optional, leaves gaps on each side of divider to match padding of the last tile. |
inset | boolean | false | Optional, increases the leading margin of the divider so that it does not intersect the avatar column. |
\u83dc\u5355\u53ef\u663e\u793a\u4e34\u7684\u9009\u9879\u5217\u8868\u3002
'},vBYd:function(t,e){t.exports='<ui-button raised @click="show">Show Confrim</ui-button>\n
export default {\n methods: {\n show() {\n this.$confirm({\n message: 'Do you like BalmJS?',\n acceptText: 'Cool',\n cancelText: 'Good'\n }).then((result) => {\n if (result) {\n this.$alert('Thanks :)');\n }\n });\n }\n }\n};\n
'},vP3W:function(t,e){t.exports='@use '@material/linear-progress' with (\n $baseline-buffer-color: #e6e6e6\n);\n
'},vf4h:function(t,e){t.exports='<ui-dialog>\n <ui-dialog-title></ui-dialog-title>\n <ui-dialog-content></ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n
Component | Description |
---|---|
<ui-dialog> | Mandatory. The root DOM element containing the surface and the container. |
<ui-dialog-title> | Optional. Brief summary of the dialog's purpose. |
<ui-dialog-content> | Optional. Primary content area. May contain a list, a form, or prose. |
<ui-dialog-actions> | Optional. Footer area containing the dialog's action buttons. |
<ui-card>\n <ui-card-content>\n <ui-card-media>\n <ui-card-media-content></ui-card-media-content>\n </ui-card-media>\n <ui-card-text></ui-card-text>\n </ui-card-content>\n <ui-card-actions>\n <ui-card-buttons></ui-card-buttons>\n <ui-card-icons></ui-card-icons>\n </ui-card-actions>\n</ui-card>\n
Component | Description |
---|---|
<ui-card> | \u5361\u7247\u5bb9\u5668\u5143\u7d20 |
<ui-card-content> | \u53ef\u9009\u3002\u5361\u7684\u4e3b\u8981\u53ef\u70b9\u51fb\u533a\u57df\u3002\u901a\u5e38\u5305\u542b\u9664 <ui-card-actions> \u5916\u7684\u5927\u591a\u6570\uff08\u6216\u5168\u90e8\uff09\u5361\u5185\u5bb9\u3002\u4ec5\u9002\u7528\u4e8e\u5177\u6709\u4e3b\u8868\u9762\u5e94\u89e6\u53d1\u7684\u4e3b\u8981\u52a8\u4f5c\u7684\u5361\u3002 |
<ui-card-media> | \u53ef\u9009\u3002\u663e\u793a\u81ea\u5e26 background-size\uff1acover \u5c5e\u6027\u7684\u81ea\u5b9a\u4e49 background-image \u7684\u5a92\u4f53\u533a\u57df\u3002 |
<ui-card-media-content> | \u53ef\u9009\u3002\u4e0e\u5a92\u4f53\u533a\u57df\u5927\u5c0f\u76f8\u540c\u7684\u7edd\u5bf9\u653e\u7f6e\u7684\u6846\uff0c\u7528\u4e8e\u5728 background-image \u9876\u90e8\u663e\u793a\u6807\u9898\u6216\u56fe\u6807\u3002 |
<ui-card-text> | \u53ef\u9009\u3002\u6587\u5b57\u5185\u5bb9\u533a\u57df\u3002 |
<ui-card-actions> | \u53ef\u9009\u3002\u52a8\u4f5c\u6309\u94ae\u6216\u56fe\u6807\u7684\u5bb9\u5668\u5143\u7d20\u3002 |
<ui-card-buttons> | \u53ef\u9009\u3002 \u4e00\u7ec4\u52a8\u4f5c\u6309\u94ae\uff0c\u663e\u793a\u5728\u5361\u7684\u5de6\u4fa7\uff08\u5728 LTR \u4e2d\uff09\uff0c\u4e0e <ui-card-icons> \u76f8\u90bb\u3002 |
<ui-card-icons> | \u53ef\u9009\u3002 \u4e00\u7ec4\u8865\u5145\u52a8\u4f5c\u56fe\u6807\uff0c\u663e\u793a\u5728\u5361\u7684\u53f3\u4fa7\uff08\u5728 LTR \u4e2d\uff09\uff0c\u4e0e <ui-card-buttons> \u76f8\u90bb\u3002 |
<ui-button raised @click="$alert('Hello BalmJS')">Show Alert</ui-button>\n
'},w4ip:function(t,e){t.exports='Data tables display sets of data across rows and columns.
'},wBY4:function(t,e){t.exports='\u4ee5\u4e0b\u914d\u7f6e\u4ecd\u7136\u662f\u57fa\u4e8e Balm CLI \u6784\u5efa\u7684 Vue \u811a\u624b\u67b6\u3002
\u7f16\u8f91 /path/to/my-project/config/balmrc.js
module.exports = {\n styles: {\n extname: 'scss'\n },\n scripts: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n // Other Options...\n};\n
\u7f16\u8f91 /path/to/my-project/app/styles/global/_vendor.scss
\u901a\u8fc7 BalmJS \u7ba1\u7406
SASS
/CSS
\uff1a\u7b2c\u4e09\u65b9\u6837\u5f0f\u8d44\u6e90\u5165\u53e3\u6587\u4ef6
@use '@material/theme' as theme-variables with (\n $primary: #6200ee,\n $secondary: #018786\n);\n\n@use 'balm-ui/dist/balm-ui';\n
\u7136\u540e\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7 Sass\u53d8\u91cf \u590d\u5199\u6216\u91cd\u65b0\u5b9a\u4e49 UI \u6837\u5f0f\u3002\uff08\u8be6\u60c5\u89c1\u5404\u7ec4\u4ef6\u7684 SASS\u53d8\u91cf \u6587\u6863\uff09
\u5165\u53e3\u6a21\u677f\u6587\u4ef6\u6807\u51c6\u683c\u5f0f\uff1a
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\n
\u5982\u679c\u7b2c\u4e09\u65b9\u63d0\u4f9b\u4e86 sass/css \u6587\u4ef6\uff0c\u5efa\u8bae\u5728
/path/to/my-project/app/styles/global/_vendor.scss
\u4e2d\u8fdb\u884c\u7ba1\u7406
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <link rel="stylesheet" href="/node_modules/path/to/some-plugin.css" />\n <!-- endbuild -->\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\n
css/vendors.css
: BalmJS \u5de5\u4f5c\u6d41\u5408\u5e76\u6307\u5b9a\u7b2c\u4e09\u65b9\u6837\u5f0f\u6587\u4ef6\u4e4b\u540e\u7684\u6587\u4ef6\u8def\u5f84\u3002main.css
: \u9879\u76ee\u7684\u6837\u5f0f\u5165\u53e3\u6587\u4ef6\u3002\u63a8\u8350\u7528\u4e8e \u684c\u9762\u7aef
2.1.1 JS\u4e2d\u5f15\u7528\uff08\u63a8\u8350\uff09
\u7f16\u8f91 /path/to/my-project/app/scripts/main.js
import Vue from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\n\n// Import BalmUI styles (Not recommend usage, and see above "SASS/CSS Management" for recommended usage)\nimport 'balm-ui-css';\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n\nnew Vue({\n el: '#app',\n components: { App },\n template: '<app/>'\n});\n
2.1.2 \u6d4f\u89c8\u5668\u4e2d\u5f15\u7528
\u7f16\u8f91 /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui-plus.js"></script>\n <!-- endbuild -->\n <script>\n var app = new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
\u63a8\u8350\u7528\u4e8e \u79fb\u52a8\u7aef\uff0c\u56e0\u4e3a\u6784\u5efa\u66f4\u5c0f\u66f4\u5feb\u3002
2.2.1 JS\u4e2d\u5f15\u7528
\u7f16\u8f91 /path/to/my-project/app/scripts/main.js
import Vue from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\n// Import BalmUI styles (Not recommend usage, and see below "SASS/CSS management" for recommended usage)\nimport 'balm-ui/components/core.css';\nimport 'balm-ui/components/button/button.css';\nimport 'balm-ui/components/icon/icon.css';\nimport 'balm-ui/components/dialog/dialog.css';\nimport 'balm-ui/plugins/alert/alert.css';\n\n// Install components or plugins\nVue.use(UiButton);\nVue.use($alert);\n\nnew Vue({\n el: '#app',\n components: { App },\n template: '<app/>'\n});\n
\u5173\u4e8e CSSinJS \uff0c\u53ef\u4ee5\u901a\u8fc7BalmJS\u914d\u7f6e\u6765\u63d0\u53d6\u6837\u5f0f\uff1b\u4f46\u662f BalmJS\u7684\u601d\u60f3 \u66f4\u5efa\u8bae\u5206\u79bb\u7ba1\u7406\u9879\u76ee\u4e2d\u7684\u6837\u5f0f\u548c\u811a\u672c\uff0c\u4ee5\u5b9e\u73b0\u66f4\u7075\u6d3b\u7684\u6a21\u5757\u914d\u7f6e\u548c\u7ba1\u7406\u3002
SASS \u7ba1\u7406 (/path/to/my-project/app/styles/global/_vendor.scss
)
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n
CSS \u7ba1\u7406 (/path/to/my-project/app/index.html
)
<head>\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n</head>\n
2.2.2 \u6d4f\u89c8\u5668\u4e2d\u5f15\u7528
\u7f16\u8f91 /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/components/button/button.js"></script>\n <script src="/node_modules/balm-ui/plugins/alert/alert.js"></script>\n <!-- endbuild -->\n <script>\n var app = new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
\u8fd9\u662f\u6700\u4f18\u5316\u7684\u4ee3\u7801\u6784\u5efa\u65b9\u6848\uff0c\u7528\u6cd5\u548c\u9ed8\u8ba4\u6784\u5efa\u7248\u672c\u76f8\u540c\u3002
2.3.1 Balm CLI
\u7f16\u8f91 /path/to/my-project/config/balmrc.js
\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\uff1a
const path = require('path');\n\nfunction resolve(dir) {\n return path.join(__dirname, '..', dir);\n}\n\nmodule.exports = {\n ...\n scripts: {\n // To explicitly transpile a dependency with Babel\n includeJsResource: [\n resolve('node_modules/balm-ui/src/scripts')\n ],\n // Reassign the entry file\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n }\n },\n ...\n};\n
2.3.2 Vue CLI
\u7f16\u8f91 /path/to/my-project/vue.config.js
\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\uff1a
module.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-source', resolve('node_modules/balm-ui/src/scripts'))\n // .set('balm-ui-plus-source', resolve('node_modules/balm-ui/src/scripts/plus.js'));\n // }\n};\n
\u73b0\u5728\uff0c\u4ee3\u7801\u4e2d\u5f15\u7528\u7684
balm-ui
\u5df2\u76f4\u63a5\u6307\u5411\u4e86\u6e90\u4ee3\u7801\uff0c\u53ef\u7528\u4e8e\u5f00\u53d1\u6216\u8c03\u8bd5 BalmUI\u3002
\u7f16\u8f91 /path/to/my-project/balm.config.js
const config = require('./config/balmrc');\n\nconst api = (mix) => {\n if (mix.env.isProd) {\n // ...\n } else {\n // Use BalmJS `copy` api\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n\nmodule.exports = (balm) => {\n return {\n config,\n api\n };\n};\n
<ui-image-list>\n <ui-image-item>\n <ui-image-text></ui-image-text>\n </ui-image-item>\n</ui-image-list>\n
Component | Description |
---|---|
<ui-image-list> | Mandatory. Indicates the root Image List element. |
<ui-image-item> | Mandatory. Indicates each item in an Image List. |
<ui-image-text> | Optional. Indicates the area within each item containing the supporting text label, if the Image List contains text labels. |
<ui-chip><!-- the chip text --></ui-chip>\n
Name | Type | Default | Description |
---|---|---|---|
icon | string | '' | Optional. Indicates an leading icon element. See Material Icons list. |
selected | boolean | false | Optional. Hides the leading icon in a filter chip when the chip is selected. |
removable | boolean | false | Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with input chips. |
Name | Props | Description |
---|---|---|
default | The default slot holds the chip child components. | |
before | iconClass | Custom leading icon in the chip. |
after | iconClass | Custom trailing icon in the input chips. |
\u901a\u8fc7\u5c11\u91cf\u53ef\u7528\u548c\u7075\u6d3b\u7684\u8b66\u62a5\u6d88\u606f\uff0c\u4e3a\u5178\u578b\u7684\u7528\u6237\u64cd\u4f5c\u63d0\u4f9b\u4e0a\u4e0b\u6587\u53cd\u9988\u6d88\u606f\u3002
'},wMet:function(t,e){t.exports='New in 6.2.1
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-autocomplete>` props with default value.\n UiAutocomplete: {\n // some props\n }\n});\n
'},whC6:function(t,e){t.exports='$balmUI
interface BalmUIEvent {\n onChange(property: string, value: any, fn?: Function);\n\n onOpen(property: string, fn?: Function);\n onShow(property: string, fn?: Function);\n\n onClose(property: string, fn?: Function);\n onHide(property: string, fn?: Function);\n}\n\ninterface VueInstance {\n $balmUI: BalmUIEvent;\n}\n
\u66f4\u65b0 Vue \u5b9e\u4f8b\u7684\u6570\u636e\u5bf9\u8c61\u4e3a new value
$balmUI.onChange(property, value);\n
\u66f4\u65b0 Vue \u5b9e\u4f8b\u7684\u6570\u636e\u5bf9\u8c61\u4e3a true
$balmUI.onOpen(property);\n$balmUI.onShow(property);\n
\u66f4\u65b0 Vue \u5b9e\u4f8b\u7684\u6570\u636e\u5bf9\u8c61\u4e3a false
$balmUI.onClose(property);\n$balmUI.onHide(property);\n
Name | Type | Default | Description |
---|---|---|---|
property | string | '' | \u66f4\u65b0\u6307\u5b9a\u7684 Vue \u5b9e\u4f8b\u5bf9\u8c61\u6570\u636e |
value | any | undefined | \u6307\u5b9a Vue \u5b9e\u4f8b\u5bf9\u8c61\u6570\u636e\u7684\u65b0\u503c\u3002\u4ec5\u9650 $balmUI.onChange \u65b9\u6cd5\u3002 |
fn | function | noop | \u66f4\u65b0\u6570\u636e\u540e\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6 |
balmResize
\uff08\u4f18\u4e8e resize
\uff09
balmScroll
\uff08\u4f18\u4e8e scroll
\uff09
export default {\n mounted() {\n this.init();\n window.addEventListener('balmResize', this.init);\n },\n beforeDestroy() {\n window.removeEventListener('balmResize', this.init);\n },\n methods: {\n init() {\n // ...\n }\n }\n};\n
New in 8.2.1
$bus.on(event, callback)
$bus.once(event, callback)
(New in 8.51.0)
$bus.off(event, callback)
$bus.emit(eventName, ...args)
interface BalmUIEventBus {\n on(event: string | string[], callback: Function); // \u76d1\u542c\u5f53\u524d\u5b9e\u4f8b\u4e0a\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002\n once(event: string, callback: Function); // \u76d1\u542c\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u4f46\u662f\u53ea\u89e6\u53d1\u4e00\u6b21\u3002\n off(event: string | string[], callback?: Function); // \u79fb\u9664\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u76d1\u542c\u5668\u3002\n emit(eventName: string, ...args); // \u89e6\u53d1\u5f53\u524d\u5b9e\u4f8b\u4e0a\u7684\u4e8b\u4ef6\u3002\u9644\u52a0\u53c2\u6570\u90fd\u4f1a\u4f20\u7ed9\u76d1\u542c\u5668\u56de\u8c03\u3002\n}\n\ninterface VueInstance {\n $bus: BalmUIEventBus;\n}\n
Name | Type | Default | Description |
---|---|---|---|
event , eventName | string | \u5168\u5c40\u901a\u4fe1\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u540d\u79f0 | |
args | any | \u5168\u5c40\u901a\u4fe1\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u65b9\u6cd5\u7684\u53c2\u6570 | |
callback | function | \u5168\u5c40\u901a\u4fe1\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u65b9\u6cd5 |
// `/path/to/awesome.vue`\n\nexport default {\n mounted() {\n this.$bus.on('custom-event', (msg) => {\n console.log(msg);\n });\n },\n beforeDestroy() {\n this.$bus.off('custom-event');\n }\n};\n
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $bus
// `/path/to/awesome.js`\n\nimport { useBus } from 'balm-ui';\n// \u6216\n// import { useBus } from 'balm-ui/plugins/event';\n\nconst $bus = useBus();\n$bus.emit('custom-event', 'Hello BalmUI');\n
'},wxol:function(t,e){t.exports='Skeleton provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
'},x3Wr:function(t,e){t.exports='New in 6.4.1
@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiTextfieldComponents from 'balm-ui/components/textfield';\n\nVue.use(UiTextfieldComponents, {\n // Optional. Overwrite `<ui-textfield>` props with default value.\n UiTextfield: {\n // some props\n }\n});\n
'},"xEc/":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/tooltip/tooltip';\n
import Vue from 'vue';\nimport UiTooltip from 'balm-ui/components/tooltip';\nimport vTooltip from 'balm-ui/directives/tooltip'; // Optional\n\n// Optional. Overwrite `<ui-tooltip>` props with default value.\nVue.use(UiTooltip, {\n // some props\n});\nVue.directive(vTooltip.name, vTooltip); // Optional\n
'},"xI/M":function(t,e){t.exports='@use 'balm-ui/components/divider' with (\n $color: if(\n theme-color.tone(theme-color.$background) == 'dark',\n list-variables.$deprecated-divider-color-on-dark-bg,\n list-variables.$deprecated-divider-color-on-light-bg\n ),\n\n $horizontal-height: 2px,\n $horizontal-text-padding: 8px 16px,\n\n $vertical-width: 2px,\n $vertical-text-padding: 16px 8px\n);\n
'},xJ9f:function(t,e){t.exports=''},xNpe:function(t,e){t.exports='New in 8.29.0
<ui-file\n accept="image/*"\n @change="$balmUI.onChange('files', $event)"></ui-file>\n<p>Files: {{ files }}</p>\n
export default {\n data() {\n return {\n files: []\n };\n }\n};\n
'},xr6V:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-tooltip>` props with default value.\n UiTooltip: {\n // some props\n }\n});\n
'},xujO:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/table/table';\n@use 'balm-ui/components/pagination/pagination';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiPagination from 'balm-ui/components/pagination';\n\n// Optional. Overwrite `<ui-pagination>` props with default value.\nVue.use(UiPagination, {\n // some props\n});\n
'},xvLK:function(t,e){t.exports='<ui-card><!-- Card contents --></ui-card>\n
Name | Type | Default | Description |
---|---|---|---|
outlined | boolean | false | Removes the shadow and displays a hairline outline instead |
Name | Props | Description |
---|---|---|
default | The default slot holds the card child components and can contain HTML. |
Child components:
<ui-card-content>
<ui-card-actions>
<ui-autocomplete></ui-autocomplete>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder \uff09 | |
model (v-model ) | string, number | '' | \u6587\u672c\u6846\u503c | |
source | array | [] | \u8bbe\u7f6e\u6570\u636e\u6e90 | |
sourceFormat | object | { label: 'label', value: 'value' } | \u8bbe\u7f6e\u6570\u636e\u6e90\u683c\u5f0f | 8.10.0 |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 | |
label | string | '' | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff | |
placeholder | string | null | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837\u5f0f | |
autofocus | boolean | false | \u81ea\u52a8\u9009\u4e2d\u5efa\u8bae\u83dc\u5355\u4e2d\u7684\u7b2c\u4e00\u9879 | |
delay | number | 300 | \u89e6\u53d1\u952e\u76d8\u548c\u6267\u884c\u641c\u7d22\u4e4b\u95f4\u7684\u5ef6\u8fdf\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u96f6\u5ef6\u8fdf\u5bf9\u672c\u5730\u6570\u636e\u6709\u610f\u4e49\uff08\u54cd\u5e94\u901f\u5ea6\u66f4\u5feb\uff09\uff0c\u4f46\u5728\u54cd\u5e94\u901f\u5ea6\u8f83\u6162\u7684\u60c5\u51b5\u4e0b\uff0c\u53ef\u4ee5\u4e3a\u8fdc\u7a0b\u6570\u636e\u4ea7\u751f\u5927\u91cf\u8d1f\u8f7d\u3002 | |
minlength | number | 1 | \u6a21\u7cca\u641c\u7d22\u7684\u6700\u5c11\u5b57\u7b26\u6570\u3002\u96f6\u5bf9\u4e8e\u4ec5\u5305\u542b\u5c11\u91cf\u9879\u76ee\u7684\u672c\u5730\u6570\u636e\u5f88\u6709\u7528\uff0c\u4f46\u662f\u5f53\u5355\u4e2a\u5b57\u7b26\u641c\u7d22\u53ef\u4ee5\u5339\u914d\u6570\u5343\u4e2a\u9879\u76ee\u65f6\uff0c\u5e94\u4f7f\u7528\u66f4\u9ad8\u7684\u503c\u3002 | |
remote | boolean | false | \u542f\u7528\u8fdc\u7a0b\u83b7\u53d6\u6570\u636e\u3002\u9ed8\u8ba4\u7528\u6cd5\u4e3a\u672c\u5730\u6570\u636e\u3002 | |
highlight | boolean | false | \u5c06\u81ea\u52a8\u5b8c\u6210\u6587\u672c\u6846\u5efa\u8bae\u503c\u8bbe\u7f6e\u4e3a\u52a0\u7c97 | 8.12.0 |
filterKeywords | boolean | false | \u542f\u7528\u8fc7\u6ee4\u5173\u952e\u5b57 | 8.56.0 |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
endAligned | boolean | false | \u8f93\u5165\u6587\u672c\u53f3\u5bf9\u9f50 | |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
withLeadingIcon | boolean | false | \u542f\u7528\u9996\u56fe\u6807\u6837\uff08\u9700\u4f7f\u7528 before \u63d2\u69fd\uff09 | |
withTrailingIcon | boolean | false | \u542f\u7528\u5c3e\u56fe\u6807\u6837\u5f0f\uff08\u9700\u4f7f\u7528 after \u63d2\u69fd\uff09 | |
inside | boolean | false | \u9002\u914d\u6837\u5f0f\uff0c\u53ef\u7528\u4e8e\u67d0\u4e9b\u7ec4\u4ef6\u5185\u90e8\u7684\u6ea2\u51fa (\u5982\uff1a\u7528\u5728 <ui-dialog> \u4e2d) | 8.53.0 |
source
\u5c5e\u6027\u3002\u652f\u6301\u4e24\u79cd\u683c\u5f0f\u5316\uff1a[ 'Choice1', 'Choice2' ]
label
\u548c value
\u5b57\u6bb5\uff09\uff1a[ { label: 'Choice1', value: 'value1' }, ... ]
\u4f60\u9875\u53ef\u4ee5\u901a\u8fc7
sourceFormat
\u5c5e\u6027\u81ea\u5b9a\u4e49\u539f\u6570\u636e\u7684\u683c\u5f0f
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
Name | Type | Description |
---|---|---|
input | function(value: string|number) | \u6587\u672c\u6846\u4e2d\u8f93\u5165\u5185\u5bb9\u65f6\u89e6\u53d1 |
search | function(keywords: string) | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1\u3002\u4ec5\u7528\u4e8e\u542f\u7528 remote \u7684\u81ea\u52a8\u5b8c\u6210\u6587\u672c\u6846\u3002 |
selected | function(item: object) | \u81ea\u52a8\u5b8c\u6210\u5efa\u8bae\u503c\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 |
selected
\u4e8b\u60c5\u8fd4\u56de\u503c\uff1a
{\n label: 'Choice 1',\n value: 'value 1',\n // more custom fields\n}\n
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@input
\u76d1\u542c\u81ea\u52a8\u5b8c\u6210\u6587\u672c\u6846\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-autocomplete v-model="value"></ui-autocomplete>\n
\u624b\u52a8
<ui-autocomplete\n :model="value"\n @input="$balmUI.onChange('value', $event)"\n></ui-autocomplete>\n
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `$toast` options.\n $toast: {\n // some options\n }\n});\n
'},"y/iY":function(t,e){t.exports='<ui-dialog-title><!-- the dialog title --></ui-dialog-title>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
closable | boolean | false | Displays close icon button. | 8.10.0 |
Name | Props | Description |
---|---|---|
default | The default slot holds the dialog title and can contain HTML. |
@use '@material/checkbox/checkbox-theme' with (\n $baseline-theme-color: secondary,\n $mark-color: theme-color.prop-value(on-secondary),\n $border-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $disabled-color: rgba(theme-color.prop-value(on-surface), 0.38),\n\n $ripple-size: 40px,\n $icon-size: 18px,\n $mark-stroke-size: 2 / 15 * $icon-size,\n $border-width: 2px,\n $transition-duration: 90ms,\n $item-spacing: 4px,\n $focus-indicator-opacity: map.get(\n ripple-theme.$dark-ink-opacities,\n focus\n ),\n\n $minimum-size: 28px,\n $maximum-size: $ripple-size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n minimum: $minimum-size,\n default: $ripple-size,\n maximum: $maximum-size,\n ),\n )\n);\n
'},"yAg/":function(t,e){t.exports='<ui-select\n v-model="formData.province"\n :options="provinces"\n default-label="Province"\n @change="onChangeProvince($event)"\n></ui-select>\n\n<ui-select\n v-model="formData.city"\n :options="cities"\n default-label="City"\n></ui-select>\n
const PROVINCES = [\n {\n value: 1,\n label: 'Beijing'\n },\n {\n value: 2,\n label: 'Shanghai'\n },\n {\n value: 3,\n label: 'Guangzhou'\n }\n];\n\nconst CITIES = [\n [],\n [\n {\n value: 11,\n label: 'Haiding'\n },\n {\n value: 12,\n label: 'Chaoyang'\n }\n ],\n [\n {\n value: 21,\n label: 'Huangpu'\n },\n {\n value: 22,\n label: 'Xuhui'\n }\n ],\n [\n {\n value: 31,\n label: 'Guangzhou'\n }\n ]\n];\n\nexport default {\n data() {\n return {\n provinces: PROVINCES,\n cities: [],\n formData: {\n province: '',\n city: ''\n }\n };\n },\n methods: {\n onChangeProvince(value) {\n this.formData.provinces = value;\n\n let key = value || -1;\n this.cities = key > -1 ? CITIES[key] : [];\n this.formData.city = this.cities.length ? this.cities[0].value : '';\n }\n }\n};\n
'},yBxr:function(t,e){t.exports='New in 8.34.0
\u5e95\u90e8\u5bfc\u822a\u680f\u5141\u8bb8\u5728\u5e94\u7528\u7a0b\u5e8f\u7684\u4e3b\u8981\u76ee\u7684\u5730\u4e4b\u95f4\u79fb\u52a8\u3002
'},yRCT:function(t,e){t.exports='<ui-drawer-header><!-- the drawer header child components --></ui-drawer-header>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bfc\u822a\u7684\u6807\u9898\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-drawer-title>
<ui-drawer-subtitle>
/* Included `ripple.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/directives/ripple/ripple';\n
import Vue from 'vue';\nimport vRipple from 'balm-ui/directives/ripple';\n\nVue.directive(vRipple.name, vRipple);\n
'},yUax:function(t,e){t.exports='<ui-textfield input-type="textarea" rows="8" cols="40">\n Textarea Label\n</ui-textfield>\n\n<ui-textfield outlined input-type="textarea" rows="8" cols="40">\n Textarea Label\n</ui-textfield>\n
'},ynvr:function(t,e){t.exports='<ui-grid class="demo-grid">\n <ui-grid-cell nested class="demo-parent-cell" columns="4">\n <ui-grid-cell class="demo-child-cell demo-cell" columns="4">\n <span>Child 4</span>\n </ui-grid-cell>\n <ui-grid-cell class="demo-child-cell demo-cell" columns="4">\n <span>Child 4</span>\n </ui-grid-cell>\n <ui-grid-cell class="demo-child-cell demo-cell" columns="4">\n <span>Child 4</span>\n </ui-grid-cell>\n <span>Parent 4</span>\n </ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4">4</ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4">4</ui-grid-cell>\n</ui-grid>\n
'},ytwZ:function(t,e){t.exports='BalmUI \u662f\u4e3a Vue.js \u91cf\u8eab\u8ba2\u5236\u7684\u6a21\u5757\u5316\u4e14\u9ad8\u53ef\u5b9a\u5236\u5316\u7684 Material Design UI \u5e93\u3002
\ud83c\udf89
balm-ui
(v9+) for Vue 3, see material.balmjs.com
\u6211\u4eec\u5e0c\u671b\u60a8\u80fd\u505a\u51fa\u8d21\u732e\uff0c\u5e76\u4f7f BalmUI \u53d8\u5f97\u66f4\u597d\uff01\u63d0\u51fa\u62c9\u53d6\u8bf7\u6c42\u4e4b\u524d\uff0c\u8bf7\u52a1\u5fc5\u5148\u9605\u8bfb\u8d21\u732e\u6307\u5357\u3002\u60a8\u53ef\u4ee5\u5c06\u4efb\u4f55\u60f3\u6cd5\u4f5c\u4e3aPull \u8bf7\u6c42\u6216 GitHub \u95ee\u9898\u63d0\u4ea4\u4e0a\u6765\u3002
\u6211\u4eec\u652f\u6301\u5e76\u6d4b\u8bd5\u7684\u6d4f\u89c8\u5668\u8303\u56f4\u4e0e Google MDC Web \u4fdd\u6301\u4e00\u81f4\uff1a
<ui-dialog><!-- the dialog child components --></ui-dialog>\n
\u63d0\u793a\uff1a
<ui-dialog>
\u7684\u52a8\u4f5c\u5fc5\u987b\u5305\u542b\u81f3\u5c11\u4e00\u4e2a<ui-button>
\u6216<ui-icon-button>
Name | Type | Default | Description | Version |
---|---|---|---|---|
open (v-model ) | boolean | false | \u5bf9\u8bdd\u6846\u5f00\u542f\u72b6\u6001 | |
escapeKey | boolean | true | \u8bbe\u7f6e\u6309\u4e0b Escape \u952e\u65f6\u53cd\u6620\u7684\u64cd\u4f5c\u3002\u8bbe\u7f6e\u4e3a false \u5c06\u7981\u7528\u901a\u8fc7 Escape \u952e\u5173\u95ed\u5bf9\u8bdd\u6846\u3002 | 8.22.0 |
closable | boolean | true | \u5f53\u7528\u6237\u5bf9\u201c\u63a5\u53d7\u201d\u6216\u201c\u53d6\u6d88\u201d\u6309\u94ae\u8fdb\u884c\u64cd\u4f5c\u65f6\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u3002 | |
maskClosable | boolean | false | \u5f53\u70b9\u51fb\u5bf9\u8bdd\u6846\u906e\u7f69\u5c42\u65f6\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u3002 | |
noScrim | boolean | false | \u9690\u85cf\u5bf9\u8bdd\u6846\u906e\u7f69\u5c42 | |
resetScroll | boolean | false | \u5bf9\u8bdd\u6846\u5173\u95ed\u65f6\uff0c\u91cd\u7f6e\u6eda\u52a8\u6761\u3002 | |
scrollable | boolean | false | \u5f53\u5bf9\u8bdd\u6846\u4e2d\u7684\u5185\u5bb9\u6ea2\u51fa\u65f6\u81ea\u52a8\u5e94\u7528\u4ee5\u4fdd\u8bc1\u5185\u5bb9\u53ef\u6eda\u52a8\u3002 | |
stacked | boolean | false | \u5f53\u5bf9\u8bdd\u6846\u7684\u52a8\u4f5c\u6309\u94ae\u4e0d\u80fd\u653e\u5728\u4e00\u884c\u4e0a\u5e76\u4e14\u5fc5\u987b\u5806\u53e0\u5728\u4e00\u8d77\u65f6\uff0c\u5c06\u81ea\u52a8\u5e94\u7528\u3002 |
\u63d0\u793a\uff1a
noBackdrop
\u5c5e\u6027\u4ece 8.35.0 \u8d77\u91cd\u547d\u540d\u4e3anoScrim
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u5b50\u7ec4\u4ef6 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-dialog-title>
<ui-dialog-content>
<ui-dialog-actions>
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u5bf9\u8bdd\u6846\u5f00\u542f\u72b6\u6001\u53d8\u5316\u65f6\u89e6\u53d1 |
close | function() | \u5bf9\u8bdd\u6846\u5173\u95ed\u65f6\u89e6\u53d1 |
confirm | function(result: boolean) | \u70b9\u51fb\u5bf9\u8bdd\u6846\u52a8\u4f5c\u6309\u94ae\u65f6\u89e6\u53d1 |
accept | function() | \u70b9\u51fb\u5bf9\u8bdd\u6846\u786e\u5b9a\u6309\u94ae\u65f6\u89e6\u53d1 |
cancel | function() | \u70b9\u51fb\u5bf9\u8bdd\u6846\u53d6\u6d88\u6309\u94ae\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5bf9\u8bdd\u6846\u5f00\u542f\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-dialog v-model="open"></ui-dialog>\n
\u624b\u52a8
<ui-dialog\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-dialog>\n
Material Design \u6392\u7248\u8bbe\u8ba1\u4e86\u6587\u672c\u5927\u5c0f\u548c\u6837\u5f0f\uff0c\u4ee5\u5728\u5178\u578b\u4f7f\u7528\u6761\u4ef6\u4e0b\u5e73\u8861\u5185\u5bb9\u5bc6\u5ea6\u548c\u9605\u8bfb\u8212\u9002\u5ea6\u3002
'},z9gS:function(t,e){t.exports='<ui-button raised @click="$balmUI.onShow('open')">\n Show Scrolling Dialog\n</ui-button>\n\n<ui-dialog v-model="open" scrollable @confirm="onConfirm">\n <ui-dialog-title>Choose a Ringtone</ui-dialog-title>\n <ui-dialog-content>\n <ui-list>\n <ui-item v-for="(item, index) in list" :key="index">{{ item }}</ui-item>\n </ui-list>\n </ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n
export default {\n data() {\n return {\n open: false\n };\n },\n methods: {\n onConfirm(result) {\n if (result) {\n console.log('ok');\n } else {\n console.log('cancel');\n }\n }\n }\n};\n
'},zIMg:function(t,e){t.exports='Segmented buttons allow users to toggle the selected states of grouped buttons.
'},zIwG:function(t,e){t.exports='New in 8.14.0
@use '@material/drawer' with (\n // Colors\n $title-ink-color: theme-color.prop-value(on-surface),\n $subtitle-ink-color: theme-color.prop-value(on-surface),\n $item-inactive-ink-color: theme-color.prop-value(on-surface),\n $item-activated-ink-color: theme-color.prop-value(primary),\n $divider-color: theme-color.prop-value(on-surface),\n $surface-fill-color: surface,\n\n // Opacity\n $title-ink-opacity: theme-color.text-emphasis(high),\n $subtitle-ink-opacity: theme-color.text-emphasis(medium),\n $item-inactive-icon-ink-opacity: theme-color.text-emphasis(medium),\n $item-inactive-text-ink-opacity: theme-color.text-emphasis(high),\n $item-active-icon-ink-opacity: 1,\n $item-active-text-ink-opacity: theme-color.text-emphasis(high),\n $divider-opacity: 0.12,\n\n // Widths\n $width: 256px,\n $list-item-spacing: 4px,\n $surface-padding: 16px,\n $shape-radius: large,\n $item-shape-radius: small,\n\n // Animations\n $animation-enter: 250ms,\n $animation-exit: 200ms,\n\n // Scrim\n $modal-scrim-color: theme-color.prop-value(on-surface),\n $modal-scrim-opacity: 0.32,\n\n $z-index: 6,\n $modal-elevation: 16\n);\n
'},zM37:function(t,e){t.exports='\u6a2a\u5e45\u663e\u793a\u7a81\u51fa\u7684\u6d88\u606f\u548c\u76f8\u5173\u7684\u53ef\u9009\u64cd\u4f5c\u3002
'},zOht:function(t,e,o){(function(o){var d,n,l,a,i,c,r,s,u,p,h,g,m,b,f,v,q,y,x,w,k,T,$,I,C,S,j,D,U,N,O,B;!function(_){var P="object"===typeof o?o:"object"===typeof self?self:"object"===typeof this?this:{};function E(t,e){return t!==P&&("function"===typeof Object.create?Object.defineProperty(t,"__esModule",{value:!0}):t.__esModule=!0),function(o,d){return t[o]=e?e(o,d):d}}d=function(t){!function(t){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])};n=function(t,o){if("function"!==typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function d(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(d.prototype=o.prototype,new d)},l=Object.assign||function(t){for(var e,o=1,d=arguments.length;oNew in 8.0.0
<ui-menuitem><!-- the menu item child components --></ui-menuitem>\n
Name | Type | Default | Description |
---|---|---|---|
nested | boolean | false | \u5d4c\u5957\u83dc\u5355\u9879 <ui-menuitem> \u5f62\u6210\u4e00\u4e2a\u83dc\u5355\u9879\u7ec4 |
item | object | {} | \u8bbe\u7f6e\u83dc\u5355\u9879\u5bf9\u8c61 |
value | string, number | null | \u8bbe\u7f6e\u83dc\u5355\u9879\u7684\u503c |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
selected | boolean | false | \u9009\u4e2d\u72b6\u6001 |
\u83dc\u5355\u9879\u5bf9\u8c61\u7684 keys\uff1a
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface MenuItem {\n item: Item;\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u83dc\u5355\u9879\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-menuitem-text>
<ui-menuitem-icon>
<ui-chips>\n <ui-chip></ui-chip>\n <!-- more chip -->\n</ui-chips>\n
<ui-chips>
\u7c7b\u578b
0
: 'action'
1
: 'input'
2
: 'choice'
3
: 'filter'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u9009\u9879\u5361\u7c7b\u578b | |
model (v-model ) | string, number, array | '' | \u9009\u9879\u5361\u9009\u9879\u503c\u3002\u4ece\u4e00\u7ec4\u9009\u9879\u4e2d\u9009\u62e9\u4e00\u4e2a\u6216\u591a\u4e2a\u3002 | |
options | array | [] | \u8bbe\u7f6e\u9009\u9879\u5361\u9009\u9879\u5217\u8868 | 7.2.0 |
optionFormat | object | { label: 'label', value: 'value' } | \u5b9a\u4e49\u9009\u9879\u5361\u9009\u9879\u6570\u636e\u683c\u5f0f | 8.42.0 |
chips | array | [] | \u4e00\u7ec4\u9009\u9879\u5361\u9009\u9879\u3002\u4ec5\u9002\u7528\u4e8e\u66f4\u65b0\u8f93\u5165\u7c7b\u578b(input )\u7684\u9009\u9879\u5361 |
\u26a0\ufe0f
8.42.0
\u4e2doptionLabel
\u548coptionValue
\u5c5e\u6027\u5df2\u5f03\u7528\uff0c\u8bf7\u4f7f\u7528optionFormat
\u4ee3\u66ff\u3002
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u9879\u5361\u9009\u9879\u7ec4\u4ef6\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(selectedIndex: number|array) | \u9009\u9879\u5361\u9009\u9879\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u9009\u9879\u5361\u9009\u9879\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-chips v-model="selectedIndex"></ui-chips>\n
\u624b\u52a8
<ui-chips\n :model="selectedIndex"\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-chips>\n
$tt(style)
type TypographyStyle =\n | 'headline1'\n | 'headline2'\n | 'headline3'\n | 'headline4'\n | 'headline5'\n | 'headline6'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption'\n | 'button'\n | 'overline'\n | string;\n\ninterface VueInstance {\n $tt(style: TypographyStyle): string;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | Typography style name or custom style classname. |
The typographic styles in this module are derived from thirteen styles:
Style | Description |
---|---|
headline1 | The largest text on the screen, reserved for short, important text or numerals |
headline2 | Headline variant 2 |
headline3 | Headline variant 3 |
headline4 | Headline variant 4 |
headline5 | Headline variant 5 |
headline6 | Headline variant 6 |
subtitle1 | Smaller than headline, reserved for medium-emphasis text that is shorter in length |
subtitle2 | Subtitle variant 2 |
body1 | Used for long-form writing |
body2 | Body variant 2 |
caption | Used sparingly to annotate imagery |
button | A call to action used by different types of buttons |
overline | Used sparingly to introduce a headline |
You can overwrite typography CSS Classes for your project so easy.
$tt
without .vue
componentNew in 8.1.0
import { useTypography } from 'balm-ui';\n// OR\n// import { useTypography } from 'balm-ui/plugins/typography';\n\nconst $tt = useTypography();\nconsole.log($tt('custom-style-1'));\n
'},zrtu:function(t,e){t.exports='<ui-form item-margin-bottom="10">\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.mobile" helper-text-id="mobile-helper-text">\n Mobile\n </ui-textfield>\n <ui-textfield-helper\n id="mobile-helper-text"\n v-model="validMsg.mobile"\n ></ui-textfield-helper>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield\n v-model="formData.password"\n input-type="password"\n helper-text-id="password-helper-text"\n >\n Password\n </ui-textfield>\n <ui-textfield-helper\n id="password-helper-text"\n v-model="validMsg.password"\n ></ui-textfield-helper>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield\n v-model="formData.repassword"\n input-type="password"\n helper-text-id="repassword-helper-text"\n >\n Repeat Password\n </ui-textfield>\n <ui-textfield-helper\n id="repassword-helper-text"\n v-model="validMsg.repassword"\n ></ui-textfield-helper>\n </ui-form-field>\n <ui-form-field>\n <ui-select\n v-model="formData.gender"\n :options="genderOptions"\n default-label="Unknown"\n helper-text-id="gender-helper-text"\n >\n Gender\n </ui-select>\n <ui-select-helper\n id="gender-helper-text"\n v-model="validMsg.gender"\n ></ui-select-helper>\n </ui-form-field>\n\n <ui-form-field class="form-item form-actions">\n <ui-button raised @click="submit">Submit</ui-button>\n </ui-form-field>\n</ui-form>\n
const validations = [\n {\n key: 'mobile',\n label: 'Mobile',\n validator: 'required, mobile'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required, password, minRule, maxRule',\n minRule: {\n validate(value) {\n return value.trim().length >= 6;\n },\n message: '%s minLength >= 6'\n },\n maxRule: {\n validate(value) {\n return value.trim().length <= 8;\n },\n message: '%s maxLength <= 8'\n }\n },\n {\n key: 'repassword',\n label: 'Repeat Password',\n validator: 'required, password, repasswordRule',\n repasswordRule: {\n validate(value, data) {\n return value === data.password;\n },\n message: 'repassword !== password'\n }\n },\n {\n key: 'gender',\n label: 'Gender',\n validator: 'required'\n }\n];\n\nconst genderOptions = [\n {\n label: 'Male',\n value: 'M'\n },\n {\n label: 'Female',\n value: 'F'\n }\n];\n\nexport default {\n validations,\n data() {\n return {\n genderOptions,\n formData: {\n mobile: '',\n password: '',\n repassword: '',\n gender: ''\n },\n validMsg: {}\n };\n },\n methods: {\n submit() {\n let result = this.$validate(this.formData);\n let { valid, validMsg } = result;\n this.validMsg = validMsg;\n\n if (valid) {\n console.log('gg');\n }\n }\n }\n};\n
'},zyi9:function(t,e){t.exports='<ui-segmented-buttons\n v-model="checkedValue"\n :items="items"\n single-select\n></ui-segmented-buttons>\n
const items = [\n {\n icon: 'favorite'\n },\n {\n text: 'Sample Text'\n },\n {\n icon: 'favorite',\n text: 'Sample Text'\n }\n];\n\nexport default {\n data() {\n return {\n items,\n checkedValue: -1\n };\n }\n};\n
'},"zzY+":function(t,e){t.exports='The Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.
'}}); \ No newline at end of file diff --git a/js/app.a7f23c27.js b/js/app.a7f23c27.js new file mode 100644 index 00000000..0733fbe8 --- /dev/null +++ b/js/app.a7f23c27.js @@ -0,0 +1 @@ +!function(t){function e(e){for(var d,a,i=e[0],c=e[1],r=e[2],u=0,p=[];u$theme
interface VueInstance {\n $theme: BalmUITheme;\n}\n
$theme.primary
$theme.secondary
$theme.background
$theme.surface
$theme.error
$theme.onPrimary
$theme.onSecondary
$theme.onSurface
$theme.onError
interface BalmUITheme {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n error: string;\n onPrimary: string;\n onSecondary: string;\n onSurface: string;\n onError: string;\n}\n
$theme.colors
type ThemeColor = {\n primary?: string;\n secondary?: string;\n background?: string;\n surface?: string;\n error?: string;\n on-primary?: string;\n on-secondary?: string;\n on-surface?: string;\n on-error?: string;\n}\n\ninterface BalmUITheme {\n colors: ThemeColor;\n}\n
$theme.getThemeColor(style)
type ThemeColorStyle =\n | 'primary'\n | 'secondary'\n | 'background'\n | 'surface'\n | 'error'\n | 'on-primary'\n | 'on-secondary'\n | 'on-surface'\n | 'on-error';\n\ninterface BalmUITheme {\n getThemeColor(style: ThemeColorStyle): string;\n}\n
$theme.getThemeClass(style)
type ThemeClassStyle = ThemeColorStyle | 'primary-bg' | 'secondary-bg';\n\ninterface BalmUITheme {\n getThemeClass(style: ThemeClassStyle): string;\n}\n
type TextStyle = 'primary' | 'secondary' | 'hint' | 'disabled' | 'icon';\n\ntype ThemeTone = 'background' | 'light' | 'dark';\n
Get text color/class
interface BalmUITheme {\n getTextColor(style: TextStyle, tone: ThemeTone): string;\n getTextClass(style: TextStyle, tone: ThemeTone): string;\n}\n
Set text color
interface BalmUITheme {\n setTextColor(style: TextStyle, value: string): void;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | Text style name. |
tone | string | 'background' | Theme tone name. |
value | string | '' | Text color value. |
Get text color/class
interface BalmUITheme {\n getTextColorOnLight(style: TextStyle): string;\n getTextClassOnLight(style: TextStyle): string;\n\n getTextColorOnDark(style: TextStyle): string;\n getTextClassOnDark(style: TextStyle): string;\n}\n
Set text color
interface BalmUITheme {\n setTextColorOnLight(style: TextStyle, value: string): void;\n setTextColorOnDark(style: TextStyle, value: string): void;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | Text style name. |
value | string | '' | Text color value. |
$theme
without .vue
componentNew in 8.1.0
import { useTheme } from 'balm-ui';\n// OR\n// import { useTheme } from 'balm-ui/plugins/theme';\n\nconst $theme = useTheme();\n
'},"+4iP":function(t,e){t.exports='<ui-form class="conditions-form" nowrap action-align="center">\n <template #default="{ itemClass, actionClass }">\n <ui-grid>\n <ui-grid-cell>\n <ui-form-field :class="[itemClass, 'required']">\n <label>Label1</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n </ui-grid-cell>\n <ui-grid-cell>\n <ui-form-field :class="itemClass">\n <label>Label2</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n </ui-grid-cell>\n <ui-grid-cell>\n <ui-form-field :class="itemClass">\n <label>Label3</label>\n <ui-select></ui-select>\n </ui-form-field>\n </ui-grid-cell>\n <ui-grid-cell>\n <ui-form-field :class="itemClass">\n <label>Label4</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n </ui-grid-cell>\n <ui-grid-cell>\n <ui-form-field :class="itemClass">\n <label>Label5</label>\n <ui-select></ui-select>\n </ui-form-field>\n </ui-grid-cell>\n </ui-grid>\n <ui-form-field :class="actionClass">\n <ui-button raised>Search</ui-button>\n <ui-button outlined>Reset</ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
.conditions-form {\n .mdc-form__item > label {\n flex-basis: 80px;\n margin-right: 10px;\n text-align: right;\n }\n\n .mdc-text-field,\n .mdc-select {\n min-width: 200px;\n }\n}\n
'},"+6Y1":function(t,e){t.exports='<ui-divider></ui-divider>\n
<ui-divider>
\u7c7b\u578b
0
: 'horizontal'
1
: 'vertical'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u5206\u5272\u7ebf\u7c7b\u578b |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5206\u5272\u7ebf\u6587\u672c\u53ca HTML | |
left | \u4ec5\u9002\u7528\u4e8e\u5782\u76f4\u5206\u9694\u7b26\u7684\u5de6\u8fb9\u6587\u672c | |
right | \u4ec5\u9002\u7528\u4e8e\u5782\u76f4\u5206\u9694\u7b26\u7684\u53f3\u8fb9\u6587\u672c |
$grid
interface VueInstance {\n set: BalmUIGrid;\n}\n
type GridProperty = 'margin' | 'gutter' | 'column-width';\ntype GridSize = 'desktop' | 'tablet' | 'phone';\n\ninterface BalmUIGrid {\n set(property: GridProperty, size: GridSize, value: string): void;\n}\n
\u63d0\u793a\uff1a\u5982\u679c
balm-ui < 8.27.0
\uff0c\u8bf7\u4f7f\u7528$setGrid
\u4ee3\u66ff$grid.set
\u3002
Param | Type | Default | Description |
---|---|---|---|
property | string | '' | \u6805\u683c\u5c5e\u6027\uff1amargin , gutter \u6216 column-width |
size | string | '' | \u76ee\u6807\u5e73\u53f0\uff1adesktop , tablet \u6216 phone |
value | string | '' | \u81ea\u5b9a\u4e49\u6805\u683c\u503c |
margin
: \u6805\u683c\u8fb9\u8ddd\u7684\u5927\u5c0fgutter
: \u5355\u5143\u4e4b\u95f4\u7684\u88c5\u8ba2\u7ebf\u7684\u5927\u5c0fcolumn-width
: \u6805\u683c\u5185\u5217\u7684\u5bbd\u5ea6.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $grid
New in 8.1.0
import { useGrid } from 'balm-ui';\n// \u6216\n// import { useGrid } from 'balm-ui/plugins/grid';\n\nconst $grid = useGrid();\n
'},"+J09":function(t,e){t.exports='<ui-pagination v-model="page" :total="total" show-total mini></ui-pagination>\n
export default {\n data() {\n return {\n page: 1,\n total: 100\n };\n }\n};\n
'},"+Lqg":function(t,e){t.exports='<figure v-for="i in 25" :key="i" v-shadow="i - 1" class="demo-surface">\n <figcaption>{{ i - 1 }}dp ( <code>v-shadow="{{ i - 1 }}"</code>)</figcaption>\n</figure>\n
'},"+LzF":function(t,e){t.exports='<ui-list>\n <ui-item v-for="i in 3" :key="i">\n <ui-item-text-content>Line item</ui-item-text-content>\n </ui-item>\n</ui-list>\n
'},"+NNH":function(t,e){t.exports='You need to set up your development environment before you can do anything.
Install Node.js\xae and npm if they are not already on your machine.
Verify that you are running at least Node.js version 10.13.0 or greater and npm version 5.2.0 or greater by running
node -v
andnpm -v
in a terminal/console window. Older versions produce errors, but newer versions are fine.
Good tools make application development quicker and easier to maintain than if you did everything by hand.
The Balm CLI is a command line interface tool that scaffolds out a BalmJS project.
Balm CLI(Recommended) or Vue CLI or other toolchains \ud83d\ude80
First install the Balm Core and Balm CLI globally for Balm CLI.
yarn global add balm-core balm-cli\n# OR\nnpm install -g balm-core balm-cli\n
\u26a0\ufe0f NOTE: If you are using pnpm, please configure the
.npmrc
file for BalmUI
Hoisting everything to the the root of node_modules:
shamefully-hoist=true\n
Or, hoisting only packages that match a pattern:
public-hoist-pattern[]="*balm*"\npublic-hoist-pattern[]="*deepmerge*"\npublic-hoist-pattern[]="*flatpickr*"\npublic-hoist-pattern[]="*material-components-web*"\npublic-hoist-pattern[]="@material*"\npublic-hoist-pattern[]="*quill*"\n
Open a terminal window.
Generate a new project and default app by running the following command:
balm init vue#legacy my-project\ncd my-project # Go to the project directory\n
Install dependencies
yarn\n# OR\nnpm install\n
Installs the necessary npm packages, This can take some time.
(China Only) \u5982\u679c\u201c\u7f51\u7edc\u201d\u4e0d\u79d1\u5b66\uff0c\u8bf7\u8bbe\u7f6e\u6dd8\u5b9d\u6e90
balm-ui
yarn add balm-ui@8\n# OR\nnpm install --save balm-ui@8\n
update balm.config.js
get Material Icons without downloading (or, download and extract to my-project/app/fonts
)
const api = (mix) => {\n if (mix.env.isDev) {\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n
edit my-project/config/balmrc.js
for using Dart Sass
module.exports = {\n styles: {\n extname: 'scss'\n }\n // Other Options...\n};\n
edit my-project/app/styles/global/_vendor.scss
/* import BalmUI styles */\n@use 'balm-ui/dist/balm-ui';\n
Recommend to use Sass in
/path/to/project-name/styles/_vendor.scss
, and you can use more advanced style usage of the BalmUI.
edit my-project/app/scripts/main.js
import Vue from 'vue';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n
edit my-project/app/styles/global/_vendor.scss
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n
edit my-project/app/scripts/main.js
import Vue from 'vue';\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\nVue.use(UiButton);\nVue.use($alert);\n
npm run dev\n
edit a vue component: my-project/app/scripts/views/components/hello.vue
<template>\n <div class="hello">\n ...\n <!-- Add a test button -->\n <ui-button icon="add" @click="$alert('Hello BalmUI')">Click Me</ui-button>\n </div>\n</template>\n
npm run prod\n
vue create my-project\ncd my-project\n
balm-ui
yarn add balm-ui@8\n# OR\nnpm install --save balm-ui@8\n
edit my-project/vue.config.js
module.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')\n // .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');\n // }\n};\n
edit my-project/src/main.js
import Vue from 'vue';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\nimport 'balm-ui-css';\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n
<script>
<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Hello BalmUI</title>\n <link\n rel="stylesheet"\n href="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui.css"\n />\n </head>\n <body>\n <div id="app">\n <ui-button @click="$alert(message)" icon="add">SayHi</ui-button>\n </div>\n <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>\n <script src="https://cdn.jsdelivr.net/npm/balm-ui"></script>\n <script src="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui-plus.js"></script>\n <script>\n new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
Enjoy \ud83d\udc7b
'},"+S6J":function(t,e){t.exports='The following configuration is still the Vue scaffold built based on Balm CLI.
Edit /path/to/my-project/config/balmrc.js
module.exports = {\n styles: {\n extname: 'scss'\n },\n scripts: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n // Other Options...\n};\n
Edit /path/to/my-project/app/styles/global/_vendor.scss
SASS
/CSS
Management by BalmJS: the entry files of the vendors
@use '@material/theme' as theme-variables with (\n $primary: #6200ee,\n $secondary: #018786\n);\n\n@use 'balm-ui/dist/balm-ui';\n
Then, you can overwrite or redefine UI styles by sass variables. (See components SASS docs)
The template standard format:
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\n
If the third-party provides sass/css file, recommended to manage in
/path/to/my-project/app/styles/global/_vendor.scss
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <link rel="stylesheet" href="/node_modules/path/to/some-plugin.css" />\n <!-- endbuild -->\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\n
css/vendors.css
: The file path after building all third-party style files in BalmJS workflow.main.css
: The css entry file of the project.Recommended to use for desktop
2.1.1 Import in JS (Recommended)
Edit /path/to/my-project/app/scripts/main.js
import Vue from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\n\n// Import BalmUI styles (Not recommend usage, and see above "SASS/CSS Management" for recommended usage)\nimport 'balm-ui-css';\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n\nnew Vue({\n el: '#app',\n components: { App },\n template: '<app/>'\n});\n
2.1.2 Import in Browser
Edit /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui-plus.js"></script>\n <!-- endbuild -->\n <script>\n var app = new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
Recommended to use for mobile, because the building volume is relatively small.
2.2.1 Import in JS
Edit /path/to/my-project/app/scripts/main.js
import Vue from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\n// Import BalmUI styles (Not recommend usage, and see below "SASS/CSS management" for recommended usage)\nimport 'balm-ui/components/core.css';\nimport 'balm-ui/components/button/button.css';\nimport 'balm-ui/components/icon/icon.css';\nimport 'balm-ui/components/dialog/dialog.css';\nimport 'balm-ui/plugins/alert/alert.css';\n\n// Install components or plugins\nVue.use(UiButton);\nVue.use($alert);\n\nnew Vue({\n el: '#app',\n components: { App },\n template: '<app/>'\n});\n
With regard to CSSinJS, styles can be extracted through BalmJS configuration, but the idea of BalmJS is more recommended to separate and manage styles and scripts to achieve more flexible module configuration and management.
SASS management (/path/to/my-project/app/styles/global/_vendor.scss
)
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n
CSS management (/path/to/my-project/app/index.html
)
<head>\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n</head>\n
2.2.2 Import in Browser
Edit /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/components/button/button.js"></script>\n <script src="/node_modules/balm-ui/plugins/alert/alert.js"></script>\n <!-- endbuild -->\n <script>\n var app = new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
For the optimal code building solution, the usage is the same as the built versions.
2.3.1 For Balm CLI
Edit /path/to/my-project/config/balmrc.js
, and add the following lines of code:
const path = require('path');\n\nfunction resolve(dir) {\n return path.join(__dirname, '..', dir);\n}\n\nmodule.exports = {\n ...\n scripts: {\n // To explicitly transpile a dependency with Babel\n includeJsResource: [\n resolve('node_modules/balm-ui/src/scripts')\n ],\n // Reassign the entry file\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n }\n },\n ...\n};\n
2.3.2 For Vue CLI
Edit /path/to/my-project/vue.config.js
, and add the following lines of code:
module.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-source', resolve('node_modules/balm-ui/src/scripts'))\n // .set('balm-ui-plus-source', resolve('node_modules/balm-ui/src/scripts/plus.js'));\n // }\n};\n
Now, the
balm-ui
referenced in the code points directly to the source code, which can be used to develop or debug BalmUI.
Edit /path/to/my-project/balm.config.js
const config = require('./config/balmrc');\n\nconst api = (mix) => {\n if (mix.env.isProd) {\n // ...\n } else {\n // Use BalmJS `copy` api\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n\nmodule.exports = (balm) => {\n return {\n config,\n api\n };\n};\n
@use 'balm-ui/components/core';\n@use 'balm-ui/components/form-field/form-field'; // NOTE: It must be loaded before form styles\n@use 'balm-ui/components/form/form';\n
import Vue from 'vue';\nimport UiForm from 'balm-ui/components/form';\nimport UiFormField from 'balm-ui/components/form-field';\n\nVue.use(UiForm);\nVue.use(UiFormField);\n
'},"+eER":function(t,e){t.exports='<div class="icons-preview-code">\n <div v-for="i in [18, 24, 36, 48]" :key="i" class="icons-preview">\n <ui-icon :size="i">face</ui-icon>\n <div class="icon-caption">{{ i }}px</div>\n </div>\n</div>\n
'},"+eH4":function(t,e){t.exports='<ui-badge></ui-badge>\n
Name | Type | Default | Description |
---|---|---|---|
count | number | 0 | \u5fbd\u7ae0\u4e2d\u663e\u793a\u7684\u6570\u5b57 |
overlap | boolean | false | \u4f7f\u5fbd\u7ae0\u4e0e\u5176\u5bb9\u5668\u91cd\u53e0 |
maxCount | number | 99 | \u53ef\u663e\u793a\u7684\u6700\u5927\u6570 |
dot | boolean | false | \u4f7f\u7528\u5c0f\u5706\u70b9\u4ee3\u66ff\u6570\u5b57\u663e\u793a |
state | string | '' | \u5fbd\u7ae0\u7684\u72b6\u6001\u7c7b\u578b |
interface Badge {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5fbd\u7ae0\u6587\u5b57\u5185\u5bb9\u53ca HTML | |
badge | \u81ea\u5b9a\u4e49\u5fbd\u7ae0\u5185\u5bb9 |
<ui-form-field>\n <ui-radio v-model="gender" input-id="male" value="M"></ui-radio>\n <label for="male">Male</label>\n</ui-form-field>\n<ui-form-field>\n <ui-radio v-model="gender" input-id="female" value="F"></ui-radio>\n <label for="female">Female</label>\n</ui-form-field>\n
export default {\n data() {\n return {\n gender: ''\n };\n }\n};\n
'},"+mhb":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/alert/alert';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiAlert from 'balm-ui/components/alert';\n\nVue.use(UiAlert);\n
'},"+sQ8":function(t,e){t.exports='Icon buttons (Toggle buttons) allow users to take actions, and make choices, with a single tap.
'},"/5LR":function(t,e){t.exports='<ui-divider type="|" class="vertical-divider-demo">\n <template #left>\n <div class="block red"></div>\n </template>\n or\n <template #right>\n <div class="block blue"></div>\n </template>\n</ui-divider>\n
.vertical-divider-demo {\n width: 300px;\n height: 120px;\n padding: 10px;\n border: 1px solid currentColor;\n\n .block {\n width: 80px;\n height: 80px;\n }\n .red {\n background-color: red;\n }\n .blue {\n background-color: blue;\n }\n}\n
'},"/5Yq":function(t,e){t.exports='<ui-tab>
@use '@material/tab' as tab-variables with (\n $icon-size: 24px,\n $height: 48px,\n $stacked-height: 72px,\n $min-width: 90px, // New in 8.14.0\n $horizontal-padding: 24px,\n $text-label-opacity: 0.6,\n $icon-opacity: 0.54,\n $text-label-color-default: rgba(\n theme-color.prop-value(on-surface),\n $text-label-opacity\n ),\n $icon-color-default: rgba(\n theme-color.prop-value(on-surface),\n $icon-opacity\n ),\n $text-label-color-active: primary,\n $icon-color-active: primary\n);\n
<ui-tab-scroller>
@use '@material/tab-scroller' with (\n $transition-duration: 250ms\n);\n
<ui-tab-bar>
@use '@material/tab-bar' with (\n $height: tab-variables.$height,\n $minimum-height: 30px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n $stacked-height: tab-variables.$stacked-height,\n $stacked-minimum-height: 56px,\n $stacked-maximum-height: $stacked-height,\n $stacked-density-scale: density-variables.$default-scale,\n $stacked-density-config: (\n height: (\n default: $stacked-height,\n maximum: $stacked-maximum-height,\n minimum: $stacked-minimum-height,\n ),\n )\n);\n
'},"/74Q":function(t,e){t.exports='\u9a8c\u8bc1\u65b9\u6cd5
interface VueInstance {\n $validate(\n formData: { [fieldName: string]: any },\n customFieldset?: string[]\n ): BalmUIValidationResult;\n}\n
Param | Type | Default | Description |
---|---|---|---|
formData | object | {} | \u4e00\u7ec4\u8868\u5355\u6570\u636e\u5bf9\u8c61 |
customFieldset | array | [] | \u53ef\u9009\u3002\u9700\u8981\u9a8c\u8bc1\u7684\u5b57\u6bb5\u540d\u79f0\u3002 |
\u9a8c\u8bc1\u7ed3\u679c
interface BalmUIValidationResult {\n valid: boolean;\n validFields: string[];\n invalidFields: string[];\n message: string;\n messages: string[];\n validMsg: { [fieldName: string]: string };\n}\n
Result | Type | Description |
---|---|---|
valid | boolean | \u9a8c\u8bc1\u7ed3\u679c |
validFields | array | \u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5 |
invalidFields | array | \u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5 |
message | string | \u7b2c\u4e00\u4e2a\u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5\u63d0\u793a\u8bed |
messages | array | \u6240\u6709\u672a\u901a\u8fc7\u9a8c\u8bc1\u7684\u5b57\u6bb5\u63d0\u793a\u8bed |
validMsg | object | \u63d0\u793a\u8bed\u5bf9\u8c61\u5316\uff08\u683c\u5f0f\u7c7b\u4f3c formData \uff09 |
\u63d0\u793a\uff1a
validMsg
\u53ef\u4ee5\u548c<ui-textfield-helper>
/<ui-select-helper>
\u4e00\u8d77\u4f7f\u7528\u6765\u89e6\u53d1<ui-textfield>
/<ui-select>
\u7684\u65e0\u6548\u8f93\u5165\u6837\u5f0f
\u9a8c\u8bc1\u89c4\u5219
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n
// \u81ea\u5b9a\u4e49\u5c40\u90e8\u9a8c\u8bc1\u89c4\u5219\nconst validations = [\n {\n key: 'fieldName1',\n label: 'Field Label',\n validator: 'required, customRule1',\n customRule1: {\n validate(fieldValue, formData) {\n // \u9a8c\u8bc1\u65b9\u6cd5\n return true;\n },\n message: '%s is required' // '%s' \u7b26\u53f7\u5c06\u81ea\u52a8\u66ff\u6362 label \u7684\u6587\u672c\n }\n // \u66f4\u591a\u81ea\u5b9a\u4e49\u89c4\u5219\n // customRule2: { ... }\n }\n // \u66f4\u591a\u8868\u5355\u5b57\u6bb5\n // {\n // key: 'fieldName2',\n // validator: 'required'\n // }\n];\n\nexport default {\n validations,\n data() {\n return {\n formData: {\n fieldName1: '',\n fieldName2: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let { valid, validFields, invalidFields, message, messages, validMsg } =\n this.$validate(this.formData);\n }\n }\n};\n
// New in 8.23.0\ninterface BalmUIValidations {\n clear(): void;\n get(fieldName?: string): BalmUIValidationRule[] | BalmUIValidationRule; // \u663e\u793a\u5f53\u524d\u5df2\u8bbe\u7f6e\u7684\u9a8c\u8bc1\u89c4\u5219\n set(fieldName: string, validationRule: BalmUIValidationRule): void;\n set(validations: BalmUIValidationRule[]): void;\n}\n\ninterface VueInstance {\n $validations: BalmUIValidations;\n}\n
is deprecated in 8.17.0$resetValidations()
is deprecated in 8.23.0$setValidations()
Param | Type | Default | Description |
---|---|---|---|
fieldName | string | '' | formData \u7684\u4e00\u4e2a\u5b57\u6bb5\u540d\u79f0\uff08BalmUI \u9a8c\u8bc1\u5668\u89c4\u5219\u7684 key\uff09 |
validation | object | {} | \u4e00\u4e2a\u9a8c\u8bc1\u89c4\u5219\uff08BalmUI \u9a8c\u8bc1\u5668\u89c4\u5219\u7684 value\uff09 |
validations | object | {} | \u8be6\u89c1\u4e0a\u65b9 BalmUI \u9a8c\u8bc1\u5668\u89c4\u5219 |
computed
export default {\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n computed: {\n validations() {\n return this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n }\n },\n methods: {\n onSubmit() {\n let result = this.$validate(this.formData);\n // ...\n }\n }\n};\n
customFieldset
export default {\n validations: [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ],\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let customFieldset = this.step === 1 ? ['username'] : ['password'];\n let result = this.$validate(this.formData, customFieldset);\n // ...\n }\n }\n};\n
$validations.set
\u8bbe\u7f6e\u81ea\u5b9a\u4e49\u9a8c\u8bc1\u89c4\u5219export default {\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n }\n },\n beforeDestroy() {\n this.$validations.clear(); // \u975e\u5e38\u91cd\u8981\n },\n methods: {\n onSubmit() {\n let customValidations =\n this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n this.$validations.set(customValidations);\n\n let result = this.$validate(this.formData);\n // ...\n }\n};\n
\u5f00\u5173\u5c06\u5355\u4e2a\u8bbe\u7f6e\u7684\u72b6\u6001\u5207\u6362\u4e3a\u6253\u5f00\u6216\u5173\u95ed\u3002\u5b83\u4eec\u662f\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u8c03\u6574\u8bbe\u7f6e\u7684\u9996\u9009\u65b9\u6cd5\u3002
'},"/Zlj":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/grid/grid';\n
import Vue from 'vue';\nimport UiGridComponents from 'balm-ui/components/grid';\nimport $grid from 'balm-ui/plugins/grid'; // Optional\n\nVue.use(UiGridComponents, {\n // Optional. Overwrite `<ui-grid>` props with default value.\n UiGrid: {\n // some props\n }\n});\nVue.use($grid); // Optional\n
'},"/c09":function(t,e){t.exports='Material design\u2019s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.
'},"/epX":function(t,e){t.exports='<h1 :class="$tt('headline1')">Headline 1</h1>\n<h2 :class="$tt('headline2')">Headline 2</h2>\n<h3 :class="$tt('headline3')">Headline 3</h3>\n<h4 :class="$tt('headline4')">Headline 4</h4>\n<h5 :class="$tt('headline5')">Headline 5</h5>\n<h6 :class="$tt('headline6')">Headline 6</h6>\n\n<div :class="$tt('subtitle1')">Subtitle 1</div>\n<div :class="$tt('subtitle2')">Subtitle 2</div>\n\n<div :class="$tt('body1')">\n Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur.\n</div>\n<div :class="$tt('body2')">\n Body 2 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad\n minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur.\n</div>\n\n<div :class="$tt('button')">Button text</div>\n<div :class="$tt('caption')">Caption text</div>\n<div :class="$tt('overline')">Overline text</div>\n\n<div :class="$tt('custom-style-1')">Custom style 1</div>\n<div :class="$tt('custom-style-2')">Custom style 2</div>\n
.mdc-typography--custom-style-1 {\n color: red;\n}\n\n.mdc-typography--custom-style-2 {\n color: blue;\n}\n
// main.js\nVue.use(BalmUI, {\n $typography: ['custom-style-1', 'custom-style-2']\n});\n
'},"/hMY":function(t,e){t.exports='The top app bar displays information and actions relating to the current screen.
'},"/pZ6":function(t,e){t.exports='<ui-dialog-actions><!-- the dialog actions --></ui-dialog-actions>\n
Name | Type | Default | Description |
---|---|---|---|
acceptText | string | 'OK' | The accept button text. |
cancelText | string | 'Cancel' | The cancel button text. |
Name | Props | Description |
---|---|---|
default | buttonClass | The default slot holds the dialog actions and can contain HTML. |
<template #default="{ buttonClass }">\n <ui-button :class="buttonClass">BUTTON</ui-button>\n</template>\n
Other customizations
data-mdc-dialog-button-default
: Optional. Add to a button to indicate that it is the default action button.data-mdc-dialog-initial-focus
: Optional. Add to an element to indicate that it is the element to initially focus on after the dialog has opened.<section :dir="controls.rtl ? 'rtl' : null">\n <ui-select\n id="full-func-js-select"\n v-model="selected"\n :options="options"\n :class="{ 'demo-select-custom-colors': controls.customColor }"\n :disabled="controls.disabled"\n @selected="onSelected($event)"\n >\n Food Group\n </ui-select>\n</section>\n
const options = [\n {\n label: 'Bread, Cereal, Rice, and Pasta',\n value: 'grains'\n },\n {\n label: 'Vegetables',\n value: 'vegetables',\n disabled: true\n },\n {\n label: 'Fruit',\n value: 'fruit'\n },\n {\n label: 'Milk, Yogurt, and Cheese',\n value: 'dairy'\n },\n {\n label: 'Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts',\n value: 'meat'\n },\n {\n label: 'Fats, Oils, and Sweets',\n value: 'fats'\n }\n];\n\nexport default {\n data() {\n return {\n options,\n selected: '',\n controls: {\n rtl: false,\n customColor: false,\n disabled: false\n }\n };\n },\n methods: {\n onSelected(selected) {\n this.selected = selected.value;\n }\n }\n};\n
'},"0/Jz":function(t,e){t.exports=""},"03rS":function(t,e){t.exports='<ui-collapse>\n <template #toggle>\n <ui-button>Button</ui-button>\n </template>\n Show Content\n</ui-collapse>\n
'},"0HsE":function(t,e){t.exports='<ui-switch\n v-model="toggle1"\n input-id="basic-switch"\n :true-value="1"\n :false-value="0"\n @selected="$balmUI.onChange('toggle1Label', $event)"\n>\n {{ toggle1 }}\n</ui-switch>\n<label for="basic-switch">{{ toggle1Label }}</label>\n\n<ui-switch\n v-model="toggle2"\n input-id="basic-switch-custom"\n class="demo-switch--custom"\n true-value="on"\n false-value="off"\n @selected="$balmUI.onChange('toggle2Label', $event)"\n>\n {{ toggle2Label }} (custom color)\n</ui-switch>\n<label for="basic-switch-custom">{{ toggle2 }} (custom color)</label>\n
export default {\n data() {\n return {\n toggle1: false,\n toggle1Label: 0,\n toggle2: true,\n toggle2Label: 'on'\n };\n }\n};\n
/* Sass code */\n.demo-switch--custom {\n $color: $material-color-red-500;\n\n @include mdc-switch-track-color($color);\n @include mdc-switch-knob-color($color);\n @include mdc-switch-focus-indicator-color($color);\n}\n
'},"0Sf5":function(t,e){t.exports='\u26a0\ufe0f The
deprecated
path is required inbalm-ui
>= 8.33.0
@use '@material/chips/deprecated/variables' with (\n $fill-color-default: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 12%\n ),\n $ink-color-default: rgba(theme-color.prop-value(on-surface), 0.87),\n $horizontal-padding: 12px,\n $height: 32px,\n $shape-radius: 50%,\n\n $minimum-height: 24px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n\n $icon-color: theme-color.prop-value(on-surface),\n $icon-opacity: 0.54,\n $trailing-icon-hover-opacity: 0.62,\n $trailing-icon-focus-opacity: 0.87,\n $leading-icon-size: 20px,\n $trailing-icon-size: 18px,\n // Speed up delay to bridge gap between leading icon and checkmark transition.\n $leading-icon-delay: -50ms,\n $checkmark-with-leading-icon-delay: 80ms,\n\n $checkmark-animation-delay: 50ms,\n $checkmark-animation-duration: 150ms,\n $width-animation-duration: 150ms,\n $opacity-animation-duration: 75ms,\n\n $leading-icon-margin-right: 4px,\n $leading-icon-margin-left: -4px,\n\n $trailing-icon-margin-right: -4px,\n $trailing-icon-margin-left: 4px,\n\n $exit-transition: opacity 75ms\n animation-variables.$standard-curve-timing-function,\n width 150ms animation-variables.$deceleration-curve-timing-function,\n padding 100ms linear, margin 100ms linear\n);\n
'},"0TwB":function(t,e){t.exports='// my-project/app/styles/global/_vendor.scss\n@use 'font-awesome/scss/font-awesome';\n
<ui-fab>\n <i class="fa fa-flag fa-lg"></i>\n</ui-fab>\n<ui-fab>\n <i class="fa fa-smile-o fa-lg"></i>\n</ui-fab>\n<ui-fab>\n <i class="fa fa-camera-retro fa-lg"></i>\n</ui-fab>\n<ui-fab>\n <i class="fa fa-spinner fa-pulse fa-lg fa-fw"></i>\n</ui-fab>\n
'},"0m6t":function(t,e){t.exports='<ui-card-media>\n <!-- <ui-card-media-content> -->\n</ui-card-media>\n
Name | Type | Default | Description |
---|---|---|---|
square | boolean | false | Optional. Automatically scales the media area's height to equal its width. |
rectangle | boolean | false | Optional. Automatically scales the media area's height according to its width, maintaining a 16:9 aspect ratio. |
Name | Props | Description |
---|---|---|
default | The default slot holds the card media content component and can contain HTML. |
Child components:
<ui-card-media-content>
@use 'balm-ui/components/core';\n@use 'balm-ui/components/switch/switch';\n
import Vue from 'vue';\nimport UiSwitch from 'balm-ui/components/switch';\n\n// Optional. Overwrite `<ui-switch>` props with default value.\nVue.use(UiSwitch, {\n // some props\n});\n
'},"0ujp":function(t,e){t.exports='@use '@material/button/button-shared-theme' with (\n $height: 36px,\n $horizontal-padding: 8px,\n $contained-horizontal-padding: 16px,\n // For a contained button with an icon, the padding on the side of the\n // button with the icon.\n $contained-horizontal-padding-icon: 12px,\n\n $minimum-height: 24px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n\n $shape-radius: small,\n\n $disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38),\n $disabled-container-color: rgba(\n theme-color.prop-value(on-surface),\n 0.12\n ),\n);\n
@use '@material/button/button-outlined-theme' with (\n $outlined-border-width: 1px,\n $outline-color: rgba(theme-color.prop-value(on-surface), 0.12)\n);\n
'},"10PY":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-skeleton>` props with default value.\n UiSkeleton: {\n // some props\n }\n});\n
'},"14XR":function(t,e){t.exports=''},"18fs":function(t,e){t.exports='New in 4.3.0
@use 'balm-ui/components/core';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiDialogComponents from 'balm-ui/components/dialog';\n\nVue.use(UiDialogComponents, {\n // Optional. Overwrite `<ui-dialog>` props with default value.\n UiDialog: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-title>` props with default value.\n UiDialogTitle: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-actions>` props with default value.\n UiDialogActions: {\n // some props\n }\n});\n
'},"1Ewl":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/badge/badge';\n@use 'balm-ui/components/icon/icon'; // Recommended\n
import Vue from 'vue';\nimport UiBadge from 'balm-ui/components/badge';\nimport vBadge from 'balm-ui/directives/badge'; // Optional\n\nVue.use(UiBadge);\nVue.directive(vBadge.name, vBadge); // Optional\n
'},"1HwK":function(t,e){t.exports='Material icons \u662f\u4e00\u7ec4\u5e38\u89c1\u52a8\u4f5c\u548c\u7269\u54c1\u7684\u7b26\u53f7\u56fe\u6807\u96c6\u5408\u3002
'},"1Iom":function(t,e){t.exports='\u26a0\ufe0f IE11 \u4ec5\u652f\u6301
filled
\u6a21\u5f0f
<ui-dialog><!-- the dialog child components --></ui-dialog>\n
NOTE:
<ui-dialog>
must be including a<ui-button>
or<ui-icon-button>
for actions.
Name | Type | Default | Description | Version |
---|---|---|---|---|
open (v-model ) | boolean | false | Mandatory. | |
escapeKey | boolean | true | Sets the action reflected when the Escape key is pressed. Setting to false disables closing the dialog via Escape key. | 8.22.0 |
closable | boolean | true | Closes the dialog, when a user actions on the accept or cancel button. | |
maskClosable | boolean | false | Closes the dialog, when the dialog scrim is clicked. | |
noScrim | boolean | false | Hides the dialog scrim. | |
resetScroll | boolean | false | Reset scroll bar, when the dialog is closed. | |
scrollable | boolean | false | Optional. Applied automatically when the dialog has overflowing content to warrant scrolling. | |
stacked | boolean | false | Optional. Applied automatically when the dialog's action buttons can't fit on a single line and must be stacked. |
NOTE: The
noBackdrop
prop rename tonoScrim
in 8.35.0
Name | Props | Description |
---|---|---|
default | The default slot holds the dialog child components. |
Child components:
<ui-dialog-title>
<ui-dialog-content>
<ui-dialog-actions>
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the dialog is changed. |
close | function() | Emits when the dialog is closed. |
confirm | function(result: boolean) | Emits when the action buttons is clicked. |
accept | function() | Emits when the accept button is clicked. |
cancel | function() | Emits when the cancel button is clicked. |
NOTE: If you are not using
v-model
, you should listen for the dialog using@change
and update theopen
prop.
Automatic
<ui-dialog v-model="open"></ui-dialog>\n
Manual
<ui-dialog\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-dialog>\n
@use '@material/elevation/variables' with (\n $baseline-color: black,\n $umbra-opacity: 0.2,\n $penumbra-opacity: 0.14,\n $ambient-opacity: 0.12,\n\n // The default duration value for elevation transitions.\n $transition-duration: 280ms\n);\n
'},"1Pfi":function(t,e){t.exports='<ui-grid class="demo-grid">\n <ui-grid-cell v-for="i in 12" :key="i" class="demo-cell" columns="1">\n 1\n </ui-grid-cell>\n</ui-grid>\n
'},"1ROX":function(t,e){t.exports='<ui-file></ui-file>\n
Name | Type | Default | Description |
---|---|---|---|
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
accept | string | '' | File types that can be accepted. |
multiple | boolean | false | Whether to support selected multiple file. |
disabled | boolean | false | To disable a upload button. |
outlined | boolean | false | Optional. Styles an outlined upload button that is flush with the surface. |
text | string | 'Upload' | Text for the default upload button. |
preview | boolean | false | Optional. Enabled preview file data. |
Name | Props | Description |
---|---|---|
default | The default slot holds the file button content and can contain HTML. |
Name | Type | Description |
---|---|---|
change | function(files: array) | Emits when the file is changed. |
file
props in files
Name | Type | Description |
---|---|---|
tmpId | string | Temporary unique ID. |
lastModified | number | Returns the last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight). |
name | string | Returns the name of the file referenced by the File object. |
size | number | Returns the size of the file in bytes. |
type | string | Returns the MIME type of the file. |
sourceFile | file | Returns a new Blob object containing the data in the specified range of bytes of the source Blob. |
previewSrc | string | The src data for preview. Applicable only for preview status. |
previewError | number | Preview error code: {0: 'OK', 1: 'Not image type', 2: 'Unsupported'} . |
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-chips>` props with default value.\n UiChips: {\n // some props\n }\n});\n
'},"1fpl":function(t,e){t.exports='<fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Theme colors as text</legend>\n\n <div class="demo-theme-color-group">\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass('primary')]"\n >\n Primary\n </div>\n </div>\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass('secondary')]"\n >\n Secondary\n </div>\n </div>\n </div>\n</fieldset>\n\n<fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Theme colors as background</legend>\n\n <div class="demo-theme-color-group">\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass(['primary-bg', 'on-primary'])\n ]"\n >\n Primary\n </div>\n </div>\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass(['secondary-bg', 'on-secondary'])\n ]"\n >\n Secondary\n </div>\n </div>\n <div class="demo-theme-color-swatches">\n <div\n :class="[\n 'demo-theme-color-swatch demo-theme-color-swatch--elevated',\n $theme.getThemeClass('background'),\n $theme.getTextClass('primary')]"\n >\n Background\n </div>\n </div>\n </div>\n</fieldset>\n
'},"1hI5":function(t,e){t.exports='<ui-form-field>\n <ui-switch></ui-switch>\n <label>Switch</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean | false | Mandatory. |
trueValue | boolean, number, string | true | |
falseValue | boolean, number, string | false | |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
disabled | boolean | false | Styles the switch as a disabled switch. |
attrs | object | {} | Other attributes for <input> . |
Name | Type | Description | Version |
---|---|---|---|
change | function(value: boolean) | Emits when the switch is changed. | |
selected | function(value: boolean|string|number) | Emits when the switch is selected. | 8.46.0 |
NOTE: If you are not using
v-model
, you should listen for the switch using@change
and update themodel
prop.
Automatic
<ui-switch v-model="value"></ui-switch>\n
Manual
<ui-switch\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-switch>\n
\u65e5\u671f\u9009\u62e9\u5668\u4f7f\u7528\u6237\u53ef\u4ee5\u9009\u62e9\u65e5\u671f\u6216\u65e5\u671f\u8303\u56f4\u3002
'},"2+jW":function(t,e){t.exports='New in 4.2.0
<ui-top-app-bar><!-- the application title --></ui-top-app-bar>\n
<ui-top-app-bar>
\u7c7b\u578b
0
: 'standard'
1
: 'fixed'
2
: 'dense'
3
: 'prominent'
4
: 'prominentDense'
5
: 'short'
6
: 'shortCollapsed'
-1
: 'nonRegular'
Name | Type | Default | Description |
---|---|---|---|
contentSelector | string | (required) | \u9009\u62e9\u5668\u7528\u4e8e\u8bbe\u7f6e\u9876\u90e8\u5bfc\u822a\u680f\u4e0b\u65b9\u5185\u5bb9\u7684\u6837\u5f0f\uff0c\u4ee5\u9632\u6b62\u9876\u90e8\u5bfc\u822a\u680f\u8986\u76d6\u5185\u5bb9\u3002 |
type | string, number | 0 | \u9876\u90e8\u5bfc\u822a\u680f\u7c7b\u578b |
fixed | boolean | false | \u56fa\u5b9a\u7684\u9876\u90e8\u5bfc\u822a\u680f\u4f4d\u4e8e\u9875\u9762\u9876\u90e8\uff0c\u5e76\u4e14\u5728\u6eda\u52a8\u65f6\u4f4d\u4e8e\u5185\u5bb9\u4e0a\u65b9\u3002 |
dense | boolean | false | \u5bc6\u96c6\u7684\u9876\u90e8\u5bfc\u822a\u680f\u8f83\u77ed\u3002 |
prominent | boolean | false | \u7a81\u51fa\u7684\u9876\u90e8\u5bfc\u822a\u680f\u8f83\u9ad8\u3002 |
prominentDense | boolean | false | \u7a81\u51fa\u4e14\u5bc6\u96c6\u7684\u9876\u90e8\u5bfc\u822a\u680f |
short | boolean | false | \u9876\u90e8\u77ed\u5bfc\u822a\uff0c\u6eda\u52a8\u65f6\u53ef\u4ee5\u6298\u53e0\u5230\u5bfc\u822a\u56fe\u6807\u7684\u4e00\u4fa7\u3002 |
shortCollapsed | boolean | false | \u8bbe\u7f6e\u9876\u90e8\u77ed\u5bfc\u822a\u59cb\u7ec8\u663e\u793a\u6298\u53e0\u72b6\u6001\u3002 |
title | string | '' | \u8bbe\u7f6e\u5bfc\u822a\u6807\u9898 |
navIcon | string, boolean | 'menu' | \u8bbe\u7f6e\u5bfc\u822a\u56fe\u6807 |
navId | string | null | \u4fa7\u8fb9\u5bfc\u822a\u680f\u7684\u5143\u7d20 ID\uff08\u8bf7\u53c2\u8003 drawer \u7684 navId \u5c5e\u6027\uff09 |
\u9876\u90e8\u77ed\u5bfc\u822a\u5e94\u4e0e\u6700\u591a 1 \u4e2a\u52a8\u4f5c\u9879\u4e00\u8d77\u4f7f\u7528\u3002
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bfc\u822a\u6807\u9898\u53ca HTML | |
nav-icon | navIconClass | \u81ea\u5b9a\u4e49\u5bfc\u822a\u56fe\u6807 |
toolbar | toolbarItemClass | toolbar \u63d2\u69fd\u5305\u542b\u52a8\u4f5c\u9879\u76ee\u53ca HTML |
<template #toolbar="{ toolbarItemClass }">\n <ui-icon-button :class="toolbarItemClass" icon="ICON"></ui-icon-button>\n</template>\n
Name | Type | Description |
---|---|---|
nav | function() | \u70b9\u51fb\u5bfc\u822a\u9ed8\u8ba4\u56fe\u6807\u65f6\u89e6\u53d1 |
close | function() | \u70b9\u51fb\u5bfc\u822a\u5173\u95ed\u56fe\u6807\u65f6\u89e6\u53d1\uff08\u4ec5\u9650 navIcon \u8bbe\u7f6e\u4e3a close \u65f6\uff09 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u6ca1\u6709\u8054\u5408\u4f7f\u7528\u9876\u90e8\u5bfc\u822a\u680f\u548c\u4fa7\u8fb9\u5bfc\u822a\u680f\u7684
navId
\u5c5e\u6027\u7ed1\u5b9a\u4e24\u8005\u5173\u7cfb\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@nav
\u76d1\u542c\u9876\u90e8\u5bfc\u822a\u680f\u5e76\u66f4\u65b0\u4fa7\u8fb9\u5bfc\u822a\u680f\u7684v-model
\u5c5e\u6027
\u81ea\u52a8
<ui-top-app-bar nav-id="demo-menu"></ui-top-app-bar>\n<ui-drawer nav-id="demo-menu" type="modal"></ui-drawer>\n
\u624b\u52a8
<ui-top-app-bar @nav="$balmUI.onChange('open', !open)"></ui-top-app-bar>\n<ui-drawer v-model="open" type="modal"></ui-drawer>\n
<ui-button @click="$balmUI.onShow('show')">Show action sheet</ui-button>\n<ui-bottom-sheet v-model="show">\n <ui-list>\n <ui-item v-for="i in 3" :key="i">Action {{ i }}</ui-item>\n </ui-list>\n</ui-bottom-sheet>\n
export default {\n data() {\n return {\n show: false\n };\n }\n};\n
'},"2Esg":function(t,e){t.exports='<ui-table :data="data" :thead="thead" :tbody="tbody"></ui-table>\n
export default {\n data() {\n return {\n data: [\n {\n id: 1,\n dessert: 'Frozen yogurt',\n calories: 159,\n fat: 6,\n carbs: 24,\n protein: 4\n },\n {\n id: 2,\n dessert: 'Ice cream sandwich',\n calories: 237,\n fat: 9,\n carbs: 37,\n protein: 4.3\n },\n {\n id: 3,\n dessert: 'Eclair',\n calories: 262,\n fat: 16,\n carbs: 24,\n protein: 6\n }\n ],\n thead: [\n 'ID',\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n ],\n tbody: ['id', 'dessert', 'calories', 'fat', 'carbs', 'protein']\n };\n }\n};\n
'},"2HHK":function(t,e){t.exports='<ui-menu><!-- the menuitem components --></ui-menu>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | \u83dc\u5355\u72b6\u6001 |
items | array | [] | \u8bbe\u7f6e\u83dc\u5355\u9879\u5bf9\u8c61\u5217\u8868 |
quickOpen | boolean | false | \u5173\u95ed\u83dc\u5355\u6253\u5f00\u7684\u52a8\u753b |
position | string | 'TOP_LEFT' | \u8bbe\u7f6e\u83dc\u5355\u951a\u89d2\u4f4d\u7f6e\uff08\u76f8\u5bf9\u4e8e\u83dc\u5355\u6309\u94ae\uff09 |
distance | object | false | \u951a\u8fb9\u8ddd\u3002\u683c\u5f0f\uff1a{ top, right, bottom, left } |
fixed | boolean | false | \u7528\u4e8e\u6307\u5b9a\u83dc\u5355\u4f7f\u7528\u56fa\u5b9a\u4f4d\u7f6e |
fullwidth | boolean | false | \u8bbe\u7f6e\u83dc\u5355\u7684\u5bbd\u5ea6\u4ee5\u5339\u914d\u5176\u7236\u951a\u7684\u5bbd\u5ea6\uff08fixed \u6a21\u5f0f\u65e0\u6548\uff09 |
cssOnly | boolean | false | \u663e\u793a\u9759\u6001\u83dc\u5355 |
\u83dc\u5355\u9879\u5bf9\u8c61\u7684 keys:
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface Menu {\n items: Item[];\n position:\n | 'TOP_LEFT'\n | 'TOP_RIGHT'\n | 'BOTTOM_LEFT'\n | 'BOTTOM_RIGHT'\n | 'TOP_START'\n | 'TOP_END'\n | 'BOTTOM_START'\n | 'BOTTOM_END';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u83dc\u5355\u9879\u7ec4\u4ef6\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u83dc\u5355\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(menuitem: SelectedItem) | \u83dc\u5355\u9879\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 |
closed | function() | \u83dc\u5355\u5173\u95ed\u65f6\u89e6\u53d1 |
opened | function() | \u83dc\u5355\u6253\u5f00\u65f6\u89e6\u53d1 |
selected
\u4e8b\u4ef6\u8fd4\u56de\u6570\u636e\uff1a
interface SelectedItem {\n index: number; // \u83dc\u5355\u9879\u7d22\u5f15\n text: string; // \u83dc\u5355\u9879\u6587\u672c\n value: string; // \u9009\u4e2d\u503c\n}\n
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u83dc\u5355\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-menu v-model="open"></ui-menu>\n
\u624b\u52a8
<ui-menu :open="open" @change="$balmUI.onChange('open', $event)"></ui-menu>\n
Sliders allow users to make selections from a range of values.
'},"2W5T":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},"2X+7":function(t,e){t.exports='<ui-drawer-header><!-- the drawer header child components --></ui-drawer-header>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the drawer header child components and can contain HTML. |
Child components:
<ui-drawer-title>
<ui-drawer-subtitle>
@use 'balm-ui/components/form' with (\n $form-margin: 0,\n $form-padding: 0,\n $form-border: 0,\n\n $form-item-margin-bottom: 0,\n $horizontal-form-item-label-width: auto,\n $horizontal-form-item-label-margin-right: 0,\n $vertical-form-item-label-margin-bottom: 0,\n\n $form-subitem-margin-right: 0 // New in 8.18.0\n);\n
'},"2Zkp":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/autocomplete/autocomplete';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiAutocomplete from 'balm-ui/components/autocomplete';\n\n// Optional. Overwrite `<ui-autocomplete>` props with default value.\nVue.use(UiAutocomplete, {\n // some props\n});\n
'},"2k+C":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUI);\nVue.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-bottom-navigation>` props with default value.\n UiBottomNavigation: {\n // some props\n }\n});\n
'},"2qo9":function(t,e){t.exports='<ui-chips\n v-model="selectedValue"\n type="filter"\n :options="filterList"\n></ui-chips>\n\n<ui-chips v-model="selectedValue2" type="filter">\n <ui-chip\n v-for="(item, index) in filterList2"\n :key="index"\n icon="face"\n :hidden="selectedValue2.includes(index)"\n >\n {{ item }}\n </ui-chip>\n</ui-chips>\n
export default {\n data() {\n return {\n selectedValue: ['a', 'b'],\n filterList: [\n {\n label: 'Tops',\n value: 'a'\n },\n {\n label: 'Bottoms',\n value: 'b'\n },\n {\n label: 'Shoes',\n value: 'c'\n },\n {\n label: 'Accessories',\n value: 'd'\n }\n ],\n selectedValue2: [0],\n filterList2: ['Alice', 'Bob', 'Charlie', 'David']\n };\n }\n};\n
'},"2z5r":function(t,e){t.exports='<ui-tree\n v-model="selectedValue"\n :data="treeData"\n :data-format="dataFormat"\n multiple\n :load-data="loadData"\n>\n <p>selectedValue: {{ selectedValue }}</p>\n <template #title="{ data }"> {{ data.title }} </template>\n</ui-tree>\n
export default {\n data() {\n return {\n dataFormat: { label: 'title', value: 'key' },\n treeData: [],\n selectedValue: []\n };\n },\n async mounted() {\n this.treeData = await this.$http.get('/api/treeData');\n },\n methods: {\n async loadData(key) {\n return await this.$http.get('/api/treeData', {\n params: {\n key\n }\n });\n }\n }\n};\n
'},"33rG":function(t,e){t.exports='<ui-button raised @click="showConfrim">Show Confrim</ui-button>\n
export default {\n methods: {\n showConfrim() {\n this.$confirm({\n message: 'Do you like BalmJS?',\n state: 'help',\n acceptText: 'Cool',\n cancelText: 'Good'\n }).then((result) => {\n if (result) {\n this.$alert('Thanks :)');\n }\n });\n }\n }\n};\n
'},"3Wx3":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-select>` props with default value.\n UiSelect: {\n // some props\n }\n});\n
'},"3fdD":function(t,e){t.exports='<ui-tab-indicator></ui-tab-indicator>\n
Name | Type | Default | Description |
---|---|---|---|
type | string | 'underline' | \u6807\u7b7e\u9875\u6307\u793a\u5668\u7c7b\u578b ['underline', 'icon'] |
fade | boolean | false | \u6de1\u5165\u6de1\u51fa\u6548\u679c |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6307\u793a\u5668\u81ea\u5b9a\u4e49\u56fe\u6807 \u53ca HTML |
'},"3uza":function(t,e){t.exports='\u63d0\u793a\uff1a
underline
\u7c7b\u578b\u6ca1\u6709 slot
@use 'balm-ui/components/core';\n@use 'balm-ui/components/top-app-bar/top-app-bar';\n@use 'balm-ui/components/icon-button/icon-button';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiTopAppBar from 'balm-ui/components/top-app-bar';\n\n// Optional. Overwrite `<ui-top-app-bar>` props with default value.\nVue.use(UiTopAppBar, {\n // some props\n});\n
'},"3yzd":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/form-field/form-field';\n@use 'balm-ui/components/radio/radio';\n
import Vue from 'vue';\nimport UiFormField from 'balm-ui/components/form-field';\nimport UiRadio from 'balm-ui/components/radio';\n\nVue.use(UiFormField);\n// Optional. Overwrite `<ui-radio>` props with default value.\nVue.use(UiRadio, {\n // some props\n});\n
'},"4E29":function(t,e){t.exports='\ud83c\udf89
balm-ui
(v9+) for Vue 3, see material.balmjs.com
balm-ui-next.js
is deprecatedUiCollapse
from balm-ui-plus.js
to balm-ui.js
libraryUiBottomNavigation
from balm-ui-next.js
to balm-ui-plus.js
libraryUiBottomSheet
from balm-ui-next.js
to balm-ui-plus.js
libraryvDebounce
from balm-ui-plus.js
to balm-ui.js
libraryUiAlert
from balm-ui-plus.js
to balm-ui.js
library$validator
: update validations
Old
interface BalmUIValidationRule {\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = {\n [key: string]: BalmUIValidationRule;\n}\n
New
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = BalmUIValidationRule[]\n
UiAutocomplete
, UiDatepicker
, UiRangepicker
from balm-ui-plus.js
to balm-ui.js
library$alert
, $confirm
, $toast
from balm-ui-plus.js
to balm-ui.js
librarynew components:
<ui-banner>
<ui-tooltip>
<ui-nav-item>
new plugins:
$bus
$store
$theme
: new theme apis
v-shape
: new shape apis
<ui-menuitem>
: add prop value
<ui-form>
: add prop itemMarginBottom
, labelWidth
, labelMarginRight
, labelMarginBottom
Sass: overwrite variables become more concise and clear
Old
@use '@material/button/variables';\n
New
@use '@material/button';\n
$themeColor
, $setTheme
, $textColor
, $setTextTheme
: deprecated. Use $theme
instead<ui-slider>
: rename prop displayMarker
to withTickMarks
<ui-pagination>
:before
, before-jumper
and after-jumper
first
and last
<ui-nav>
: remove slot prop itemClass
, activeClass
. Use <ui-nav-item>
for new<ui-table>
: thead custom item by
field rename to columnId
<ui-drawer>
: add prop viewportHeight
<ui-menu>
, <ui-select>
: both add prop fullwidth
<ui-textfield>
: add prop prefixText
, suffixText
, endAligned
, withCounter
v-anchor
: add modifier bodyElement
<ui-a>
<ui-icon-a>
<ui-nav>
: rename slot prop activatedClass
to activeClass
<ui-textfield>
: remove prop dense
<ui-textfield-helper>
: rename prop counter
to withCounter
<ui-textfield-counter>
: removed. It has been replaced with <ui-textfield-helper withCounter>
or <ui-textfield withCounter>
<ui-menu-anchor><!-- the menu component --></ui-menu-anchor>\n
Name | Type | Default | Description |
---|---|---|---|
position | string | '' | Menu button position to the menu anchor. |
absolute | boolean | false | The menu surface can use absolute positioning when being displayed. This requires that the element containing the menu has the position: relative style. |
interface MenuAnchor {\n position:\n | 'top left'\n | 'top right'\n | 'middle left'\n | 'middle right'\n | 'bottom left'\n | 'bottom right';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the menu component. |
<div class="demo-container">\n <!-- Drawer -->\n <ui-drawer viewport-height>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>Item {{ 0 }}</ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- Content -->\n <div class="demo-content">\n <!-- App bar -->\n <ui-top-app-bar\n class="demo-app-bar"\n content-selector=".demo-app-content"\n :nav-icon="false"\n >\n Title\n </ui-top-app-bar>\n <!-- App content -->\n <div class="demo-app-content">\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </div>\n </div>\n</div>\n
.demo-content {\n width: 100%;\n}\n\n.demo-app-content {\n height: 100%;\n overflow: auto;\n}\n
'},"4PY/":function(t,e){t.exports='Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
'},"4RNZ":function(t,e){t.exports='<ui-list><!-- <ui-item> --></ui-list>\n\n<ui-nav><!-- <ui-nav-item> --></ui-nav>\n
<ui-list>
\u7c7b\u578b
1
: 'singleLine'
2
: 'twoLine'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u5217\u8868\u7c7b\u578b |
singleSelection | boolean | false | \u5355\u9009\u6a21\u5f0f\u3002\u8be5\u5217\u8868\u53ef\u4ee5\u5904\u7406\u57fa\u4e8e\u5355\u51fb\u6216\u952e\u76d8\u64cd\u4f5c\u6765\u9009\u4e2d\u5217\u8868\u9879\u3002 |
selectedIndex (v-model ) | number | -1 | \u5217\u8868\u9879\u7d22\u5f15\u503c\u3002\u4ec5\u9002\u7528\u4e8e\u5355\u9009\u6a21\u5f0f\u3002 |
nonInteractive | boolean | false | \u7981\u7528\u6c34\u6ce2\u7eb9\u6548\u679c |
dense | boolean | false | \u7d27\u51d1\u578b\u5217\u8868\u6837\u5f0f |
avatar | boolean | false | \u914d\u7f6e\u6bcf\u884c\u7684\u524d\u5bfc\u56fe\u5757\u4ee5\u663e\u793a\u56fe\u50cf\u800c\u4e0d\u662f\u56fe\u6807\u3002\u8fd9\u5c06\u4f7f\u5217\u8868\u9879\u76ee\u7684\u56fe\u5f62\u66f4\u5927\u3002 |
Name | Slots | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5217\u8868\u9879\u7ec4\u4ef6\u53ca HTML |
Name | Type | Description |
---|---|---|
action | function(index: number) | \u5217\u8868\u9879\u7d22\u5f15\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@action
\u76d1\u542c\u5217\u8868\u9879\u7d22\u5f15\u503c\u5e76\u66f4\u65b0selectedIndex
\u5c5e\u6027
\u81ea\u52a8
<ui-list v-model="selectedIndex" single-selection></ui-list>\n
\u624b\u52a8
<ui-list\n :selected-index="selectedIndex"\n single-selection\n @action="$balmUI.onChange('selectedIndex', $event)"\n></ui-list>\n
<ui-snackbar><!-- the message text --></ui-snackbar>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
actionType | number | 0 | Mandatory. Sets action button or dismiss icon for the snackbar. (0 : action button, 1 : dismiss icon) | |
open (v-model ) | boolean | false | Mandatory. | |
timeoutMs | number | 5000 | Optional. The automatic dismiss timeout in milliseconds. Value must be between 4000 and 10000 (or -1 to disable the timeout completely). | |
message | string | '' | Mandatory. Message text. | |
actionButtonText | string | '' | Optional. The action button/icon elements, if present. | |
stacked | boolean | false | Optional. Positions the action button/icon below the message instead of alongside it. | |
leading | boolean | false | Optional. Positions the snackbar on the leading edge of the screen (left in LTR, right in RTL) instead of centered. (tablet and desktop only) | |
position | string | 'bottom' | Snackbar position. | 8.30.0 |
interface Snackbar {\n position: 'bottom' | 'center' | 'top';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the message text for the snackbar. | |
action | actionClass | The custom action button. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the snackbar is hidden. |
closed | function() | Emits when the snackbar is closed. |
NOTE: If you are not using
v-model
, you should listen for the snackbar using@change
and update theopen
prop.
Automatic
<ui-snackbar v-model="open"></ui-snackbar>\n
Manual
<ui-snackbar\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-snackbar>\n
<ui-image-list>\n <ui-image-item>\n <ui-image-text></ui-image-text>\n </ui-image-item>\n</ui-image-list>\n
Component | Description |
---|---|
<ui-image-list> | \u56fe\u7247\u5217\u8868\u5143\u7d20 |
<ui-image-item> | \u56fe\u7247\u5217\u8868\u9879\u5143\u7d20 |
<ui-image-text> | \u56fe\u7247\u5217\u8868\u9879\u7684\u6587\u5b57\u6807\u7b7e\u5143\u7d20 |
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-textfield>` props with default value.\n UiTextfield: {\n // some props\n }\n});\n
'},"55dd":function(t,e){t.exports='<ui-form>\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field>\n <label></label>\n <!-- awesome form item 1 -->\n <ui-form-field></ui-form-field>\n </ui-form-field>\n <ui-form-field>\n <label></label>\n <div :class="subitemClass">\n <!-- awesome form item 2 -->\n <ui-form-field></ui-form-field>\n <ui-form-field></ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button></ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
<ui-form>
\u7c7b\u578b
0
: 'horizontal'
1
: 'vertical'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u8bbe\u7f6e\u8868\u5355\u7c7b\u578b\uff08\u6c34\u5e73\u6216\u5782\u76f4\u6a21\u5f0f\uff09 | |
itemMarginBottom | number | 0 | \u8bbe\u7f6e\u8868\u5355\u9879\u4e0b\u8fb9\u8ddd | 8.0.0 |
nowrap | boolean | false | \u56fa\u5b9a\u8868\u5355\u9879 <label> \uff0c\u8d85\u8fc7\u90e8\u5206\u7684\u6587\u5b57\u7528\u7701\u7565\u53f7\u8868\u793a | |
labelTopAligned | boolean | false | \u8bbe\u7f6e\u8868\u5355\u9879 <label> \u9876\u5bf9\u9f50 | |
labelRightAligned | boolean | false | \u8bbe\u7f6e\u8868\u5355\u9879 <label> \u53f3\u5bf9\u9f50 | |
labelTopRightAligned | boolean | false | \u8bbe\u7f6e\u8868\u5355\u9879 <label> \u9876\u5bf9\u9f50\u4e14\u53f3\u5bf9\u9f50 | 8.18.0 |
labelWidth | number | 0 | \uff08\u6c34\u5e73\u6a21\u5f0f\u8868\u5355\uff09\u8bbe\u7f6e <label> \u5bbd\u5ea6 | 8.0.0 |
labelMarginRight | number | 0 | \uff08\u6c34\u5e73\u6a21\u5f0f\u8868\u5355\uff09\u8bbe\u7f6e <label> \u53f3\u8fb9\u8ddd | 8.0.0 |
labelMarginBottom | number | 0 | \uff08\u5782\u76f4\u6a21\u5f0f\u8868\u5355\uff09\u8bbe\u7f6e <label> \u4e0b\u8fb9\u8ddd | 8.0.0 |
actionAlign | string | 'left' | \u8bbe\u7f6e\u8868\u5355\u52a8\u4f5c\u9879\u7684\u5bf9\u9f50\u65b9\u5f0f | 8.18.0 |
labelTopAligned
\uff0clabelRightAligned
\u548clabelTopRightAligned
\u53ea\u80fd\u5e94\u7528\u4e8e\u6c34\u5e73\u6a21\u5f0f\u8868\u5355\u3002
interface Form {\n actionAlign: 'left' | 'center' | 'right';\n}\n
Name | Props | Description |
---|---|---|
default | itemClass , subitemClass , actionClass | default \u63d2\u69fd\u5305\u542b\u8868\u5355\u9879\u53ca HTML |
'},"56QR":function(t,e){t.exports='
itemClass
\u548csubitemClass
\u662f 8.18.0 \u65b0\u589e prop
<ui-segmented-button></ui-segmented-button>\n
Name | Type | Default | Description |
---|---|---|---|
selected | boolean | false | Styles a selected segmented button. |
text | string | '' | Segmented button text. |
icon | string | '' | Segmented button icon. See Material Icons list. |
Name | Props | Description |
---|---|---|
default | The default slot holds the segmented button text and can contain HTML. | |
before | iconClass | Custom leading icon |
after | iconClass | Custom trailing icon |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the segmented button is clicked. |
<ui-banner><!-- the banner message --></ui-banner>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
open (v-model ) | boolean | false | Mandatory. | |
centered | boolean | false | Displayed centered. By default, banners are positioned as leading. | 8.27.0 |
fixed | boolean | false | When used below top app bars, banners should remain fixed at the top of the screen. | 8.27.0 |
withImage | boolean | false | Images can help communicate a banner\u2019s message. | 8.27.0 |
mobileStacked | boolean | false | On mobile view, banners with long text should have their action(s) be positioned below the text instead of alongside it. | 8.27.0 |
primaryButtonText | boolean | 'OK' | The primary action text. | |
secondaryButtonText | boolean | '' | The secondary action text. |
Name | Props | Description |
---|---|---|
default | The default slot holds the message text for the banner. | |
image | The icon slot holds the icon or image for the banner. | |
actions | The custom action buttons. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the banner is hidden. |
closed | function(reason: string) | Emits when the banner is closed. |
NOTE: If you are not using
v-model
, you should listen for the banner using@change
and update theopen
prop.
Automatic
<ui-banner v-model="open"></ui-banner>\n
Manual
<ui-banner\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-banner>\n
<ui-spinner active></ui-spinner>\n
'},"5JYn":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-list>` props with default value.\n UiList: {\n // some props\n }\n});\n
'},"5OL9":function(t,e){t.exports='<ui-spinner></ui-spinner>\n
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | \u542f\u7528\u52a0\u8f7d\u4e2d\u72b6\u6001 |
progress | number | 0 | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u7684\u503c\u3002\u503c\u5e94\u4ecb\u4e8e [0, 1] \u4e4b\u95f4\u3002 |
size | string | 'large' | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u5c3a\u5bf8 |
fourColored | boolean | false | \u542f\u7528 4 \u79cd\u989c\u8272\u5faa\u73af |
label | string | '' | \u8fdb\u5ea6\u6761\u7684\u6807\u7b7e |
closed | boolean | false | \u9690\u85cf\u8fdb\u5ea6\u6761 |
\u5c3a\u5bf8\u503c\uff1a
interface Spinner {\n size: 'large' | 'L' | 'medium' | 'M' | 'small' | 'S';\n}\n
@use 'balm-ui/components/core';\n@use 'balm-ui/components/skeleton/skeleton';\n
import Vue from 'vue';\nimport UiSkeleton from 'balm-ui/components/skeleton';\n\n// Optional. Overwrite `<ui-skeleton>` props with default value.\nVue.use(UiSkeleton, {\n // some props\n});\n
'},"5VFu":function(t,e){t.exports='<div class="demo">\n <ui-tab-scroller\n ref="scroller"\n v-model="value"\n class="demo-scroller"\n @change="$balmUI.onChange('scrollValue', $event)"\n >\n <span v-for="i in 32" :key="i" class="demo-cube"></span>\n </ui-tab-scroller>\n</div>\n\n<div class="demo-controller">\n <div class="demo-controller-row">\n <label for="id0">Scroll to</label>\n <input\n id="id0"\n v-model="scrollValue"\n class="demo-scroll-value"\n type="number"\n />\n <button type="submit" @click="$balmUI.onChange('value', +scrollValue)">\n Scroll\n </button>\n </div>\n <div class="demo-controller-row">\n <button\n type="button"\n class="demo-decrement"\n @click="$refs.scroller.increment(-50)"\n >\n -50\n </button>\n <button\n type="button"\n class="demo-increment"\n @click="$refs.scroller.increment(+50)"\n >\n +50\n </button>\n </div>\n</div>\n
export default {\n data() {\n return {\n value: 0,\n scrollValue: 0\n };\n }\n};\n
'},"5kZB":function(t,e){t.exports='Linear progress indicators display progress by animating an indicator along the length of a fixed, visible track. The behavior of the indicator is dependent on whether the progress of a process is known.
'},"5kxR":function(t,e){t.exports='A banner displays a prominent message and related optional actions.
'},"5qvK":function(t,e){t.exports='New in 8.0.0
<div v-shape.cut.small class="demo">4dp</div>\n<div v-shape.cut class="demo">8dp</div>\n<div v-shape.cut.large class="demo">12dp</div>\n
'},"5tLy":function(t,e){t.exports='<ui-skeleton><!-- (the loaded data) --></ui-skeleton>\n
Name | Type | Default | Description |
---|---|---|---|
loading | boolean | true | Display the skeleton. |
active | boolean | false | Show animation effect. |
avatar | boolean, object | false | Show avatar placeholder. |
title | boolean, object | true | Show title placeholder. |
paragraph | boolean, object | true | Show paragraph placeholder. |
interface Skeleton {\n avatar: {\n size: 'large' | 'small' | number; // Set the size of avatar\n shape: 'circle' | 'square'; // Set the shape of avatar\n };\n title: {\n width: string; // Set the width of title\n };\n paragraph: {\n width: string; // Set the width of paragraph\n rows: number; // Set the row count of paragraph\n };\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the any components and can contain HTML. |
Shadows provide important visual cues about objects\u2019 depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object\u2019s elevation determines the appearance of its shadow. The elevation values are mapped out in a "z-space" and range from 0
to 24
.
<ui-button @click="$balmUI.onShow('show')">Show action sheet</ui-button>\n<ui-side-sheet v-model="show" closable>\n <template #title>Title</template>\n <ui-list>\n <ui-item v-for="i in 3" :key="i">Action {{ i }}</ui-item>\n </ui-list>\n <template #actions>\n <ui-button raised>Save</ui-button>\n <ui-button outlined>Cancel</ui-button>\n </template>\n</ui-side-sheet>\n
export default {\n data() {\n return {\n show: false\n };\n }\n};\n
'},"6iKR":function(t,e){t.exports='<ui-button raised @click="$balmUI.onOpen('open')">Show Snackbar</ui-button>\n\n<ui-snackbar\n v-model="open"\n :timeout-ms="timeout"\n :message="message"\n :action-button-text="actionText"\n :action-type="actionType ? 1 : 0"\n></ui-snackbar>\n
export default {\n data() {\n return {\n open: false,\n timeout: 5000,\n message: 'Hello Snackbar',\n actionText: 'close',\n actionType: false\n };\n }\n};\n
'},"6t/a":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-table>` props with default value.\n UiTable: {\n // some props\n }\n});\n
'},"6uRm":function(t,e){t.exports='<ui-bottom-navigation>\n <!-- <ui-tabs> or <ui-tab-bar> component -->\n</ui-bottom-navigation>\n
Name | Type | Default | Description |
---|---|---|---|
contentSelector | string | (required) | \u9009\u62e9\u5668\u7528\u4e8e\u5bf9\u5e95\u90e8\u5bfc\u822a\u680f\u4e0a\u65b9\u7684\u5185\u5bb9\u8fdb\u884c\u6837\u5f0f\u8bbe\u7f6e\uff0c\u4ee5\u9632\u6b62\u5e95\u90e8\u5bfc\u822a\u680f\u8986\u76d6\u5176\u5185\u5bb9\u3002 |
stacked | boolean | false | \u8bbe\u7f6e\u5e95\u90e8\u5bfc\u822a\u680f\u6807\u7b7e\u9875\u56fe\u6807\u548c\u6807\u7b7e\u4e3a\u5782\u76f4\u6a21\u5f0f\uff08\u9ed8\u8ba4\u4e3a\u6c34\u5e73\u6a21\u5f0f\uff09 |
min | boolean | false | \u663e\u793a 3 \u4e2a\u5bfc\u822a\u6807\u7b7e\u9875 |
max | boolean | false | \u663e\u793a 5 \u4e2a\u5bfc\u822a\u6807\u7b7e\u9875 |
<ui-card-buttons><!-- the button components --></ui-card-buttons>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u7ec4\u4ef6\u53ca HTML |
<ui-list>\n <ui-item v-for="(item, index) in items" :key="index">\n <ui-item-first-content>\n <ui-icon>{{ item.icon }}</ui-icon>\n </ui-item-first-content>\n <ui-item-text-content>{{ item.text }}</ui-item-text-content>\n </ui-item>\n</ui-list>\n
'},"71xe":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui/dist/balm-ui';\n\nVue.use(BalmUI);\n
'},"7DMP":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-icon>` props with default value.\n UiIcon: {\n // some props\n }\n});\n
'},"7LLX":function(t,e){t.exports='Cards contain content and actions about a single subject.
'},"7Qy4":function(t,e){t.exports='<div v-shadow="4"></div>\n
v-shadow="z"
Value | Type | Default | Description |
---|---|---|---|
z | number | 0 | Sets the elevation to the (N)dp, where 1 <= N <= 24 |
v-shadow.transition="[z1, z2]"
Applies the correct css rules to transition an element between elevations:
z1
: default classz2
: hover class<ui-fab><!-- Icon --></ui-fab>\n\n<ui-fab extended><!-- Text label --></ui-fab>\n
<ui-fab>
Types
0
: 'regular'
1
: 'extended'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. FAB types. |
extended | boolean | false | Optional. modifies the FAB to wider size which includes a text label. |
icon | string | '' | Optional. for the icon element. See Material Icons list. |
mini | boolean | false | Optional. modifies the FAB to a smaller size. |
exited | boolean | false | Optional. animates the FAB out of view. When this class is removed, the FAB will return to view. |
Name | Props | Description |
---|---|---|
default | iconClass | The default slot holds the floating action button icon or text label. |
before | iconClass | Custom leading icon for the extended FAB |
after | iconClass | Custom trailing icon for the extended FAB |
NOTE: the default slot of the extended FAB has not
slot-scope
.
<ui-fab>\n <template #default="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-fab>\n\n<ui-fab extended>\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n Text label\n</ui-fab>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the floating action button is clicked. |
<ui-slider></ui-slider>\n
<ui-slider>
Types
0
: 'continuous'
1
: 'discrete'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Slider types. |
discrete | boolean | false | Styles the slider as a discrete slider. |
withTickMarks | boolean | false | Discrete sliders support display markers on their tracks. |
model (v-model ) | number, array | 0 | The current value of the slider. (array value for range slider) |
min | number | 0 | The minimum value a slider can have. |
max | number | 100 | The maximum value a slider can have. |
step | number | 1 | Specifies the increments at which a slider value can be set. |
disabled | boolean | false | Whether or not the slider is disabled. |
Name | Type | Description |
---|---|---|
change | function(value: number|array) | Emits when a user stops dragging the slider or changes the value. |
NOTE: If you are not using
v-model
, you should listen for the slider using@change
and update themodel
prop.
Automatic
<ui-slider v-model="value"></ui-slider>\n
Manual
<ui-slider\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-slider>\n
'},"7hry":function(t,e){t.exports='New in 6.0.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-top-app-bar>` props with default value.\n UiTopAppBar: {\n // some props\n }\n});\n
'},"7mYG":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-rangepicker>` props with default value.\n UiRangepicker: {\n // some props\n }\n});\n
'},"7x8A":function(t,e){t.exports=''},"80T5":function(t,e){t.exports='New in 8.29.0
Set global validation rules
import { helpers } from 'balm-ui'; // Default Usage\n// OR\n// import helpers from 'balm-ui/utils/helpers'; // ### Individual Usage\n\nexport default {\n required: {\n validate(value) {\n return !helpers.isEmpty(value);\n },\n message: '%s is required'\n },\n mobile: {\n validate(value) {\n return /^1[0-9]\\d{9}$/.test(value);\n },\n message: 'Invalid phone number'\n },\n password: {\n validate(value) {\n return /^\\w+$/.test(value);\n },\n message: '%s must be a letter, digit or underline'\n }\n};\n
@use 'balm-ui/components/rangepicker' with (\n $separator-padding: 8px\n);\n
'},"84ZZ":function(t,e){t.exports='\u56fe\u7247\u5217\u8868\u5728\u6709\u7ec4\u7ec7\u7684\u7f51\u683c\u4e2d\u663e\u793a\u56fe\u7247\u7684\u96c6\u5408\u3002
'},"87Sa":function(t,e){t.exports='<div v-longpress></div>\n
type LongpressConfig =\n | Function // New in 8.52.0\n | {\n callback: Function;\n delay?: number;\n };\n
'},"87TQ":function(t,e){t.exports='@use '@material/ripple/ripple-theme' with (\n $fade-in-duration: 75ms,\n $fade-out-duration: 150ms,\n $translate-duration: 225ms,\n $states-wash-duration: 15ms,\n\n // Notes on states:\n // * focus takes precedence over hover (i.e. if an element is both focused and hovered, only focus value applies)\n // * press state applies to a separate pseudo-element, so it has an additive effect on top of other states\n // * selected/activated are applied additively to hover/focus via calculations at preprocessing time\n\n $dark-ink-opacities: (\n hover: 0.04,\n focus: 0.12,\n press: 0.12,\n selected: 0.08,\n activated: 0.12,\n ),\n\n $light-ink-opacities: (\n hover: 0.08,\n focus: 0.24,\n press: 0.24,\n selected: 0.16,\n activated: 0.24,\n ),\n\n // Legacy\n\n $pressed-dark-ink-opacity: 0.16,\n $pressed-light-ink-opacity: 0.32,\n);\n
'},"8IRu":function(t,e){t.exports='/* Included `typography.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/plugins/typography/typography';\n
import Vue from 'vue';\nimport $typography from 'balm-ui/plugins/typography';\n\n// Optional. Overwrite the param of `$tt()`.\nVue.use($typography, ['custom-style-1', 'custom-style-2']);\n
'},"8PKc":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-tabs>` props with default value.\n UiTabs: {\n // some props\n }\n});\n
'},"8W4R":function(t,e){t.exports='<ui-select-icon><!-- the material design icon name --></ui-select-icon>\n
Name | Type | Default | Description |
---|---|---|---|
unclickable | boolean | false | \u5c55\u793a\u4e0d\u53ef\u70b9\u51fb\u7684\u6837\u5f0f |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u6807\u7ec4\u4ef6\u53ca HTML\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u9009\u62e9\u5668\u56fe\u6807\u65f6\u89e6\u53d1 |
<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Multi Date.."\n></ui-datepicker>\n
export default {\n data() {\n return {\n config: {\n mode: 'multiple'\n },\n date: ['2017-11-05', '2017-11-15', '2017-11-25']\n };\n }\n};\n
'},"8rxI":function(t,e){t.exports='import Vue from 'vue';\nimport $store from 'balm-ui/plugins/store';\nimport myStore from './store';\n\nVue.use($store, myStore);\n
'},"8v/M":function(t,e){t.exports='<ui-segmented-buttons :items="buttonGroupItems"></ui-segmented-buttons>\n
<ui-segmented-buttons>\n <ui-segmented-button></ui-segmented-button>\n</ui-segmented-buttons>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | array, number | [] | Mandatory. |
items | array | [] | Segmented button items. |
singleSelect | boolean | false | To make the segmented button single select. |
The keys of a segmented button item object:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the segmented button. |
Name | Type | Description |
---|---|---|
change | function(selectedIndex: array | number) | Emits when the segmented buttons is changed. |
selected | function(index: number) | Emits when the segmented button is clicked. |
NOTE: If you are not using
v-model
, you should listen for the segmented buttons using@change
and update themodel
prop.
Automatic
<ui-segmented-buttons v-model="selectedIndex"></ui-segmented-buttons>\n
Manual
<ui-segmented-buttons\n :model="selectedIndex"\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-segmented-buttons>\n
/* Included `theme.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/plugins/theme/theme';\n
import Vue from 'vue';\nimport $theme from 'balm-ui/plugins/theme';\n\nVue.use($theme, {\n // (Optional) New in 8.38.0, See ThemeColor type in APIs.\n});\n
'},"97Hy":function(t,e){t.exports='Shapes direct attention, identify components, communicate state, and express brand.
'},"9G71":function(t,e){t.exports='<ui-dialog-content><!-- the dialog content --></ui-dialog-content>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the dialog content and can contain HTML. |
<ui-select-icon><!-- the material design icon name --></ui-select-icon>\n
Name | Type | Default | Description |
---|---|---|---|
unclickable | boolean | false | Display un-clickable icons. |
Name | Props | Description |
---|---|---|
default | The default slot holds the select icon and can contain HTML. See Material Icons list. |
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the select icon is clicked. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport $alert from 'balm-ui/plugins/alert';\n\n// Optional. Overwrite `$alert` options.\nVue.use($alert, {\n // some options\n});\n
'},"9p9y":function(t,e){t.exports='Please
Copy
+Paste
or customize yours, if your need
File: /path/to/app/scripts/kill-ie.js
import { detectIE } from 'balm-ui'; // Default Usage\n// OR\n// import detectIE from 'balm-ui/utils/ie'; // Individual Usage\n\nconst IE = detectIE();\n\nconst isIE = IE && IE < 11; // Browser support IE 11+\n\nconst killIE = () => {\n let body = document.getElementsByTagName('body')[0];\n let template = `<div class="kill-ie">\n <h1>Your browser is out-of-date. Please <a href="https://browsehappy.com/">download</a> one of the up-to-date, free and excellent browsers for better security, speed and comfort.</h1>\n <p>Recommended Choice\uff1a<a href="https://www.google.com/chrome/">Chrome</a></p>\n </div>`;\n\n body.innerHTML = template;\n};\n\nexport { isIE, killIE };\n
File: /path/to/app/scripts/main.js
import { isIE, killIE } from './kill-ie';\n\nif (isIE) {\n killIE();\n} else {\n // your code\n}\n
File: /path/to/app/styles/_kill-ie.scss
.kill-ie {\n position: absolute;\n text-align: center;\n background-color: #bdbdbd;\n\n h1 {\n font-size: 36px;\n }\n\n p {\n font-size: 24px;\n }\n\n a {\n text-decoration: underline;\n color: red;\n font-weight: bold;\n }\n}\n
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-checkbox>` props with default value.\n UiCheckbox: {\n // some props\n }\n});\n
'},ARno:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},AT5t:function(t,e){t.exports='<ui-item><!-- the item child components --></ui-item>\n\n<ui-nav-item><!-- the link item child components --></ui-nav-item>\n
<ui-item>
PropsName | Type | Default | Description |
---|---|---|---|
selected | boolean | false | \u9009\u4e2d\u72b6\u6001 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
<ui-nav-item>
Props (New in 8.0.0)Name | Type | Default | Description |
---|---|---|---|
href | string | (required) | \u89e3\u6790\u7684\u7f51\u5740\u3002\u8fd9\u5c06\u662f\u4e00\u4e2a a \u5143\u7d20\u7684 href \u5c5e\u6027\u3002 |
active | boolean | false | \u6fc0\u6d3b\u72b6\u6001 |
\u4e0e <router-link>
\u4e00\u8d77\u4f7f\u7528\uff08\u9700\u8981 vue-router@3.1.0+
\uff09
<router-link v-slot="{ href, navigate, isActive }">\n <ui-nav-item\n :href="href"\n :active="isActive"\n @click="navigate"\n ></ui-nav-item>\n</router-link>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5217\u8868\u9879\u5b50\u7ec4\u4ef6\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49 <ui-item-first-content> \u7684\u5185\u5bb9\u3002\u901a\u5e38\u662f\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
after | iconClass | \u81ea\u5b9a\u4e49 <ui-item-last-content> \u7684\u5185\u5bb9\u3002\u901a\u5e38\u4e3a\u5c0f\u6587\u5b57\uff0c\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-item-text-content>
<ui-item-text1>
<ui-item-text2>
<ui-item-first-content>
<ui-item-last-content>
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u5217\u8868\u9879\u65f6\u89e6\u53d1 |
<ui-select><!-- the label text --></ui-select>\n
<ui-select>
\u7c7b\u578b
0
: 'filled'
1
: 'outlined'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u9009\u62e9\u5668\u7c7b\u578b | |
outlined | boolean | false | \u8f6e\u5ed3\u9009\u62e9\u5668 | |
model (v-model ) | string, number | '' | \u9009\u62e9\u5668\u503c | |
options | array | [] | \u8bbe\u7f6e\u9009\u9879\u5217\u8868\uff08\u9ed8\u8ba4\u9009\u9879\u683c\u5f0f\uff1a{ label, value } \uff09 | |
optionFormat | object | { label: 'label', value: 'value' } | \u5b9a\u4e49\u9009\u9879\u5361\u9009\u9879\u6570\u636e\u683c\u5f0f | 8.42.0 |
defaultLabel | string | '' | \u9009\u9879\u5360\u4f4d\u7b26 label \u7684\u503c | |
defaultValue | string, number | '' | \u9009\u9879\u5360\u4f4d\u7b26 value \u7684\u503c | |
label | string | '' | \u9009\u62e9\u5668\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837\u5f0f | |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
withLeadingIcon | boolean | false | \u542f\u7528\u9996\u56fe\u6807\u6837\u5f0f | |
helperTextId | string | null | \u5339\u914d <ui-select-helper> \u7684 id \u5c5e\u6027 | |
inside | boolean | false | \u9002\u914d\u6837\u5f0f\uff0c\u53ef\u7528\u4e8e\u67d0\u4e9b\u7ec4\u4ef6\u5185\u90e8\u7684\u6ea2\u51fa (\u5982\uff1a\u7528\u5728 <ui-dialog> \u4e2d) | 8.53.0 |
\u63d0\u793a\uff1a
withLeadingIcon
\u548cwithTrailingIcon
\u4ec5\u7528\u4e8e (\u975e<ui-select-icon>
) \u81ea\u5b9a\u4e49\u9996/\u5c3e\u56fe\u6807\uff0c\u901a\u5e38\u65e0\u9700\u914d\u7f6e
\u26a0\ufe0f
8.42.0
\u4e2doptionLabel
\u548coptionValue
\u5c5e\u6027\u5df2\u5f03\u7528\uff0c\u8bf7\u4f7f\u7528optionFormat
\u4ee3\u66ff\u3002
Name | Props | Description | Version |
---|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u62e9\u5668\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | ||
icon | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 | |
dropdown-icon | \u81ea\u5b9a\u4e49\u4e0b\u62c9\u56fe\u6807 | 6.9.0 |
Name | Type | Description |
---|---|---|
change | function(value: string|number) | \u9009\u62e9\u5668\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(option: object) | \u9009\u62e9\u5668\u9009\u9879\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u9009\u62e9\u5668\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-select v-model="value"></ui-select>\n
\u624b\u52a8
<ui-select\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-select>\n
<ui-badge></ui-badge>\n
Name | Type | Default | Description |
---|---|---|---|
count | number | 0 | Number to show in badge. |
overlap | boolean | false | Make the badge overlap with its container. |
maxCount | number | 99 | Max count to show. |
dot | boolean | false | Whether to display a dot instead of count . |
state | string | '' | State type for text badge. |
interface Badge {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the text content and can contain HTML. | |
badge | The badge slot holds the custom badge content. |
<ui-form-field>\n <ui-checkbox\n v-model="checkedNames"\n input-id="jack"\n value="Jack"\n ></ui-checkbox>\n <label for="jack">Jack</label>\n</ui-form-field>\n<ui-form-field>\n <ui-checkbox\n v-model="checkedNames"\n input-id="john"\n value="John"\n ></ui-checkbox>\n <label for="john">John</label>\n</ui-form-field>\n<ui-form-field>\n <ui-checkbox\n v-model="checkedNames"\n input-id="mike"\n value="Mike"\n ></ui-checkbox>\n <label for="mike">Mike</label>\n</ui-form-field>\n
export default {\n data() {\n return {\n checkedNames: []\n };\n }\n};\n
'},AdaL:function(t,e){t.exports='@use 'balm-ui/components/tree' with (\n $node-hover-color: rgba(theme-color.prop-value(on-surface), 0.04),\n $indent-width: 24px,\n $icon-width: 24px,\n $label-padding: 8px 0,\n\n $selected-background-color: rgba(theme-color.prop-value(primary), 0.12),\n $selected-color: theme-color.prop-value(on-surface),\n $disabled-color: rgba(theme-color.prop-value(on-surface), 0.38) // New in 8.69.0\n);\n
'},Amxa:function(t,e){t.exports='<ui-image-text><!-- Text labels --></ui-image-text>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u7247\u76f8\u5173\u7684\u4e00\u884c\u6587\u672c\u6807\u7b7e | |
action | action \u63d2\u69fd\u5305\u542b\u56fe\u7247\u76f8\u5173\u52a8\u4f5c\u5185\u5bb9 |
<ui-tab-scroller><!-- the tab components --></ui-tab-scroller>\n
Name | Type | Default | Description |
---|---|---|---|
scrollX | number | 0 | The current scroll value. |
align | string | '' | <ui-tabs> common prop. Tab alignment. |
interface TabScroller {\n align: 'start' | 'center' | 'end';\n}\n
Name | Slots | Description |
---|---|---|
default | The default slot holds the tab components and can contain HTML. |
\u5c42\u7ea7\u9634\u5f71\u4e3a\u7269\u4f53\u7684\u6df1\u5ea6\u548c\u65b9\u5411\u8fd0\u52a8\u63d0\u4f9b\u4e86\u91cd\u8981\u7684\u89c6\u89c9\u7ebf\u7d22\u3002\u5b83\u4eec\u662f\u6307\u793a\u8868\u9762\u4e4b\u95f4\u5206\u79bb\u7a0b\u5ea6\u7684\u552f\u4e00\u89c6\u89c9\u63d0\u793a\u3002 \u5bf9\u8c61\u7684\u9ad8\u7a0b\u786e\u5b9a\u5176\u9634\u5f71\u7684\u5916\u89c2\u3002 \u9ad8\u7a0b\u503c\u6620\u5c04\u5230\u201c z \u7a7a\u95f4\u201d\u4e2d\uff0c\u8303\u56f4\u4ece 0
\u5230 24
\u3002
<ui-card-media-content><!-- rich media content --></ui-card-media-content>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the card media content and can contain HTML. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/slider/slider';\n
import Vue from 'vue';\nimport UiSlider from 'balm-ui/components/slider';\n\n// Optional. Overwrite `<ui-slider>` props with default value.\nVue.use(UiSlider, {\n // some props\n});\n
'},BbKN:function(t,e){t.exports='Buttons allow users to take actions, and make choices, with a single tap.
'},BbN2:function(t,e){t.exports='<ui-form-field>\n <ui-radio></ui-radio>\n <label>Radio</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | string, number | '' | \u5355\u9009\u6309\u94ae\u503c |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
value | string, number | '' | \u539f\u751f <input> \u7684 value \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
attrs | object | {} | <input> \u7684\u5176\u4ed6\u5c5e\u6027 |
Name | Type | Description |
---|---|---|
change | function(value: string|number) | \u5355\u9009\u6309\u94ae\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5355\u9009\u6309\u94ae\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-radio v-model="value"></ui-radio>\n
\u624b\u52a8
<ui-radio\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-radio>\n
<ui-datepicker></ui-datepicker>\n
<ui-datepicker>
\u5728 config.mode
\u5c5e\u6027\u4e2d\u7684\u7c7b\u578b
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder \uff09 | |
model (v-model ) | string, number, array | '' | \u65e5\u671f\u9009\u62e9\u5668\u503c | |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 | |
label | string | '' | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff | |
placeholder | string | null | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837 | |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
endAligned | boolean | false | \u8f93\u5165\u6587\u672c\u53f3\u5bf9\u9f50 | |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
withLeadingIcon | boolean, string | false | \u542f\u7528\u9996\u56fe\u6807\u6837\uff08\u9700\u4f7f\u7528 before \u63d2\u69fd\uff09 | |
withTrailingIcon | boolean, string | false | \u542f\u7528\u5c3e\u56fe\u6807\u6837\u5f0f\uff08\u9700\u4f7f\u7528 after \u63d2\u69fd\uff09 | |
config | object | {} | \u8be6\u89c1 Flatpickr configuration | |
toggle | boolean | false | \u663e\u793a\u65e5\u5386\u56fe\u6807\u6309\u94ae | |
clear | boolean | false | \u663e\u793a\u6e05\u9664\u56fe\u6807\u6309\u94ae | |
monthOptions | object | {} | \u8be6\u89c1 Flatpickr month select options | 7.4.2 |
<ui-datepicker :config="config"></ui-datepicker>\n
import lang from 'flatpickr/dist/l10n/zh.js';\n\nexport default {\n data() {\n return {\n config: {\n locale: lang.zh\n }\n };\n }\n};\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807\uff08withTrailingIcon = true \uff09 |
toggle | \u81ea\u5b9a\u4e49\u65e5\u5386\u56fe\u6807\u6309\u94ae\uff08withTrailingIcon = false \uff09 | |
clear | \u81ea\u5b9a\u4e49\u6e05\u9664\u56fe\u6807\u6309\u94ae\uff08withTrailingIcon = false \uff09 |
Name | Type | Description |
---|---|---|
change | function(value: string|array) | \u65e5\u671f\u9009\u62e9\u5668\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u65e5\u671f\u9009\u62e9\u5668\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-datepicker v-model="value"></ui-datepicker>\n
\u624b\u52a8
<ui-datepicker\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-datepicker>\n
<div class="container">\n <!-- Content -->\n\n <ui-bottom-navigation content-selector=".container" stacked>\n <ui-tabs\n v-model="active"\n type="textWithIcon"\n :items="items"\n stacked\n @change="onChange"\n ></ui-tabs>\n </ui-bottom-navigation>\n</div>\n
export default {\n data() {\n return {\n items: [\n {\n text: 'Favorites',\n icon: 'favorite',\n url: 'url 1'\n },\n {\n text: 'Music',\n icon: 'music_note',\n url: 'url 2'\n },\n {\n text: 'Places',\n icon: 'place'\n },\n {\n text: 'News',\n icon: 'fiber_new'\n }\n ],\n active: 1\n };\n },\n methods: {\n onChange(active) {\n console.log(active);\n }\n }\n};\n
'},BnzD:function(t,e){t.exports='<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Date.."\n toggle\n clear\n></ui-datepicker>\n
export default {\n data() {\n return {\n config: {\n defaultDate: 'today'\n },\n date: ''\n };\n }\n};\n
'},BpPC:function(t,e){t.exports='<ui-card-text><!-- additional text content --></ui-card-text>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the card text content and can contain HTML. |
'},Bwh6:function(t,e){t.exports='New in 8.29.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-dialog>` props with default value.\n UiDialog: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-title>` props with default value.\n UiDialogTitle: {\n // some props\n },\n // Optional. Overwrite `<ui-dialog-actions>` props with default value.\n UiDialogActions: {\n // some props\n }\n});\n
'},BzGL:function(t,e){t.exports='<ui-list-group>\n <ui-list-group-subheader>1. Single-line list</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-text-content></ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>2. Two-line list</ui-list-group-subheader>\n <ui-list type="twoLine">\n <ui-item>\n <ui-item-text-content>\n <ui-item-text1></ui-item-text1>\n <ui-item-text2></ui-item-text2>\n </ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>3. Rich List</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-first-content></ui-item-first-content>\n <ui-item-text-content></ui-item-text-content>\n <ui-item-last-content></ui-item-last-content>\n </ui-item>\n </ui-list>\n</ui-list-group>\n
<ui-nav>\n <ui-nav-item active>Activated item</ui-nav-item>\n <ui-nav-item>Unactivated item</ui-nav-item>\n</ui-nav>\n
Component | Description |
---|---|
<ui-list> /<ui-nav> | \u5217\u8868\u5143\u7d20 |
<ui-item> /<ui-nav-item> | \u5217\u8868\u9879\u5143\u7d20 |
<ui-item-text-content> | \u5217\u8868\u9879\u6587\u672c\u5185\u5bb9\u5bb9\u5668\uff08\u663e\u793a\u4e3a\u5217\u8868\u9879\u7684\u4e2d\u95f4\u5217\uff09 |
<ui-item-text1> | \u5217\u8868\u9879\u7684\u4e3b\u8981\u6587\u5b57\u3002\u5e94\u8be5\u662f <ui-item-text-content> \u7684\u5b50\u5143\u7d20\u3002 |
<ui-item-text2> | \u5217\u8868\u9879\u7684\u6b21\u8981\u6587\u5b57\u3002\u663e\u793a\u5728\u4e3b\u8981\u6587\u5b57\u4e0b\u65b9\u3002\u5e94\u8be5\u662f <ui-item-text-content> \u7684\u5b50\u5143\u7d20\u3002 |
<ui-item-first-content> | \u5217\u8868\u9879\u6bcf\u884c\u7684\u7b2c\u4e00\u4e2a\u533a\u5757\u3002\u901a\u5e38\u662f\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
<ui-item-last-content> | \u5217\u8868\u9879\u6bcf\u884c\u7684\u6700\u540e\u4e00\u4e2a\u533a\u5757\u3002\u901a\u5e38\u4e3a\u5c0f\u6587\u5b57\uff0c\u56fe\u6807\u6216\u56fe\u50cf\u3002 |
<ui-list-group> | \u5206\u7ec4\u5217\u8868\u5bb9\u5668\u3002\u4e24\u4e2a\u6216\u591a\u4e2a\u8981\u5206\u7ec4\u5728\u4e00\u8d77\u7684 <ui-list> \u5143\u7d20\u7684\u5bb9\u5668 |
<ui-list-group-subheader> | \u5206\u7ec4\u5217\u8868\u6807\u9898\u3002\u6807\u9898\u6587\u672c\u663e\u793a\u5728\u7ec4\u4e2d\u6bcf\u4e2a\u5217\u8868\u4e0a\u65b9\u3002 |
<ui-list-divider> | \u5217\u8868\u5206\u5272\u7ebf |
<ui-item-divider> | \u5217\u8868\u9879\u5206\u5272\u7ebf |
<ui-icon v-ripple.unbounded class="demo-surface" data-mdc-ripple-is-unbounded>\n favorite\n</ui-icon>\n
<ui-icon\n v-ripple:cssOnly.unbounded\n class="demo-surface"\n data-mdc-ripple-is-unbounded\n>\n favorite\n</ui-icon>\n
.demo-surface[data-mdc-ripple-is-unbounded] {\n /* Override width/height from above to match icon size, and adjust padding for hitbox */\n width: 24px;\n height: 24px;\n padding: 12px;\n}\n
'},C1m5:function(t,e){t.exports='<ui-form item-margin-bottom="10">\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.mobile">Mobile</ui-textfield>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.password" input-type="password">\n Password\n </ui-textfield>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.repassword" input-type="password">\n Repeat Password\n </ui-textfield>\n </ui-form-field>\n <ui-form-field>\n <ui-select\n v-model="formData.gender"\n :options="genderOptions"\n default-label="Unknown"\n >\n Gender\n </ui-select>\n </ui-form-field>\n\n <ui-alert v-if="messages.length" state="error">\n <ul>\n <li v-for="(message, index) in messages" :key="index">{{ message }}</li>\n </ul>\n </ui-alert>\n\n <ui-form-field class="form-item form-actions">\n <ui-button raised @click="submit">Submit</ui-button>\n </ui-form-field>\n</ui-form>\n
const validations = [\n {\n key: 'mobile',\n label: 'Mobile',\n validator: 'required, mobile'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required, password, minRule, maxRule',\n minRule: {\n validate(value) {\n return value.trim().length >= 6;\n },\n message: '%s minLength >= 6'\n },\n maxRule: {\n validate(value) {\n return value.trim().length <= 8;\n },\n message: '%s maxLength <= 8'\n }\n },\n {\n key: 'repassword',\n label: 'Repeat Password',\n validator: 'required, password, repasswordRule',\n repasswordRule: {\n validate(value, data) {\n return value === data.password;\n },\n message: 'repassword !== password'\n }\n },\n {\n key: 'gender',\n label: 'Gender',\n validator: 'required'\n }\n];\n\nconst genderOptions = [\n {\n label: 'Male',\n value: 'M'\n },\n {\n label: 'Female',\n value: 'F'\n }\n];\n\nexport default {\n validations,\n data() {\n return {\n genderOptions,\n formData: {\n mobile: '',\n password: '',\n repassword: '',\n gender: ''\n },\n messages: []\n };\n },\n methods: {\n submit() {\n let result = this.$validate(this.formData);\n let { valid, messages } = result;\n this.messages = messages;\n\n if (valid) {\n console.log('gg');\n }\n }\n }\n};\n
'},C2TI:function(t,e){t.exports='Tabs organize content across different screens, data sets, and other interactions.
'},C32w:function(t,e){t.exports='A modern WYSIWYG editor (based on Quill with built-in extension features).
'},CBoC:function(t,e){t.exports='New in 6.7.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-banner>` props with default value.\n UiBanner: {\n // some props\n }\n});\n
'},CREV:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUI from 'balm-ui';\nimport validatorRules from './config/validator-rules';\n\nVue.use(BalmUI, {\n // Optional. Set global validator rules.\n $validator: validatorRules\n});\n
'},CVcI:function(t,e){t.exports='Image lists display a collection of images in an organized grid.
'},Cb0M:function(t,e){t.exports='<ui-menu-anchor>\n <ui-menu :items="menuItems"></ui-menu>\n</ui-menu-anchor>\n
<ui-menu-anchor>\n <ui-menu>\n <ui-menuitem>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n\n <ui-item-divider></ui-item-divider>\n\n <ui-menuitem nested>\n <ui-menuitem>\n <ui-menuitem-icon>Icon</ui-menuitem-icon>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n </ui-menuitem>\n </ui-menu>\n</ui-menu-anchor>\n
Component | Description |
---|---|
<ui-menu-anchor> | Used to indicate which element the menu should be anchored to. |
<ui-menu> | Required on the root element. |
<ui-menuitem> | A menu item. |
<ui-menuitem-text> | A menu item text. |
<ui-menuitem-icon> | Required when using a <ui-menuitem nested> to indicate which item is selected. Should contain an icon or svg that indicates the selected state of the <ui-menuitem> . |
@use '@material/image-list' with (\n $standard-gutter-size: 4px,\n $masonry-gutter-size: 16px,\n $icon-size: 24px,\n $text-protection-background-color: rgba(0, 0, 0, 0.6),\n $text-protection-height: 48px,\n $text-protection-horizontal-padding: 16px,\n $shape-radius: 0\n);\n
'},CrVF:function(t,e){t.exports='<ui-drawer><!-- the drawer child components --></ui-drawer>\n
<ui-drawer>
\u7c7b\u578b
0
: 'permanent'
1
: 'dismissible'
2
: 'modal'
\u63d0\u793a\uff1a
<ui-drawer>
(type="permanent"
) \u6ca1\u6709\u5c5e\u6027\u548c\u4e8b\u4ef6<ui-drawer type="dismissible">
\u548c <ui-drawer type="modal">
\u5fc5\u987b\u5305\u542b\u4e00\u4e2a <ui-nav>
\u3002\u800c\u4e14\u5bfc\u822a\u4e2d\u7684\u7b2c\u4e00\u4e2a <ui-nav-item>
\u9ed8\u8ba4\u5fc5\u987b\u4e3a\u6fc0\u6d3b\u72b6\u6001\u3002Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u4fa7\u8fb9\u5bfc\u822a\u680f\u7c7b\u578b |
navId | string | null | \u5916\u90e8\u83dc\u5355\u6309\u94ae\u9009\u62e9\u5668\uff08\u8bf7\u53c2\u8003 top app bar \u7684 navId \u5c5e\u6027\uff09 |
open (v-model ) | boolean | false | \u5bfc\u822a\u5207\u6362\u7684\u72b6\u6001 |
viewportHeight | boolean | false | \u8bbe\u7f6e\u89c6\u7a97\u5168\u9ad8\u5ea6\uff08100vh \uff09 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bfc\u822a\u7684\u5b50\u7ec4\u4ef6 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-drawer-header>
<ui-drawer-content>
Name | Type | Description |
---|---|---|
nav | function(open: boolean) | \u5bfc\u822a\u5f00\u5173\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@nav
\u76d1\u542c\u4fa7\u8fb9\u5bfc\u822a\u680f\u5207\u6362\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-drawer v-model="open" type="modal"></ui-drawer>\n
\u624b\u52a8
<ui-drawer\n :open="open"\n type="modal"\n @nav="$balmUI.onChange('open', $event)"\n></ui-drawer>\n
@use 'balm-ui/directives/shape/shape';\n
import Vue from 'vue';\nimport vShape from 'balm-ui/directives/shape';\n\nVue.directive(vShape.name, vShape);\n
'},DD5m:function(t,e){t.exports='<div v-anchor></div>\n
v-anchor.bodyElement
: \u81ea\u5b9a\u4e49 HTML \u5bb9\u5668\uff08\u9ed8\u8ba4\u5bb9\u5668\u4e3a <html>
\uff09v-anchor.html
: \u542f\u7528 HTML \u951a\u70b9\uff08\u4f8b\u5982 markdown\uff09v-anchor.offset="offsetValue"
: \u4e3a\u9875\u9762\u6eda\u52a8\u8bbe\u7f6e\u504f\u79fb\u91cf\uff08\u5728 <html>
\u6216\u81ea\u5b9a\u4e49\u5bb9\u5668\u4e0a\u4f7f\u7528 data-vanchor-offset
\u5c5e\u6027\u8bbe\u7f6e\u5168\u5c40\u504f\u79fb\u91cf\uff09offsetValue \u503c\u4e3a\u6570\u5b57
<html data-vanchor-offset="64">\n <!-- Anchors & Targets -->\n</html>\n\n<!-- \u6216 -->\n\n<div class="container" v-anchor.offset="64">\n <!-- Anchors & Targets -->\n</div>\n
v-anchor:href
v-anchor:id
<div v-anchor:href="'#target1'">Anchor 1</div>\n<div v-anchor:href="'#target2'">Anchor 2</div>\n\n<div v-anchor:id="'target1'">Target 1</div>\n<div v-anchor:id="'target2'">Target 2</div>\n
class="v-anchor" data-href="selector"
id
\u6216\u552f\u4e00\u7684 class
<div v-anchor.html>\n <div class="v-anchor" data-href="#target1">Anchor 1</div>\n <div class="v-anchor" data-href="#target2">Anchor 2</div>\n\n <div id="target1">Target 3</div>\n <div id="target2">Target 4</div>\n</div>\n
'},DFaq:function(t,e){t.exports='<ui-grid><!-- the grid cell --></ui-grid>\n
Name | Type | Default | Description |
---|---|---|---|
fixedColumnWidth | boolean | false | \u6307\u5b9a\u6805\u683c\u5e94\u5177\u6709\u56fa\u5b9a\u7684\u5217\u5bbd |
position | string | '' | \u6307\u5b9a\u6574\u4e2a\u6805\u683c\u7684\u5bf9\u9f50\u65b9\u5f0f\uff08'left' \u6216 'right' \uff09 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b <ui-grid-cell> \u53ca HTML |
Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space.
'},DJqZ:function(t,e,o){"use strict";var d={name:"SvgGithub"},n=o("KHd+"),l=Object(n.a)(d,(function(){var t=this._self._c;return t("svg",{staticClass:"octicon octicon-mark-github",attrs:{width:"32",height:"32",viewBox:"0 0 16 16","aria-hidden":"true"}},[t("path",{attrs:{"fill-rule":"evenodd",d:"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"}})])}),[],!1,null,null,null).exports,a=o("l0Zm"),i={name:"TopAppToolbar",components:{SvgGithub:l},props:{itemClass:{type:String,required:!0}},data:()=>({translations:a.i,showTranslations:!1})},c=Object(n.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"top-app-toolbar"},[e("a",{directives:[{name:"tooltip",rawName:"v-tooltip",value:"BalmUI Pro is now released",expression:"'BalmUI Pro is now released'"}],staticClass:"pro",attrs:{href:"https://legacy.pro.balmjs.com/",target:"_blank",rel:"noopener","aria-describedby":"balm-ui-pro"}},[t._v("\n PRO\n ")]),t._v(" "),e("ui-menu-anchor",[e("ui-icon-button",{attrs:{icon:"language"},on:{click:function(e){return t.$balmUI.onShow("showTranslations")}}}),t._v(" "),e("ui-menu",{on:{selected:t.$store.setLang},model:{value:t.showTranslations,callback:function(e){t.showTranslations=e},expression:"showTranslations"}},t._l(t.translations,(function(o){return e("ui-menuitem",{key:o.value,attrs:{item:o,selected:o.value===t.$store.lang}})})),1)],1),t._v(" "),e("ui-icon-button",{directives:[{name:"tooltip",rawName:"v-tooltip",value:"Support BalmUI",expression:"'Support BalmUI'"}],class:[t.itemClass,"donate"],attrs:{icon:"support","aria-describedby":"donate"},on:{click:function(e){t.$router.push({name:"donate"}).catch((()=>{}))}}}),t._v(" "),e("a",{attrs:{href:"https://github.com/balmjs/balm-ui/tree/8.x",target:"_blank",rel:"noopener"}},[e("ui-icon-button",{class:[t.itemClass,"github"],attrs:{"aria-describedby":"github"}},[e("svg-github")],1)],1)],1)}),[],!1,null,null,null);e.a=c.exports},DOtE:function(t,e){t.exports='<ui-file></ui-file>\n
Name | Type | Default | Description |
---|---|---|---|
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
accept | string | '' | \u53ef\u4ee5\u63a5\u53d7\u7684\u6587\u4ef6\u7c7b\u578b |
multiple | boolean | false | \u652f\u6301\u591a\u6587\u4ef6\u4e0a\u4f20 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
outlined | boolean | false | \u4e0a\u4f20\u6309\u94ae\u663e\u793a\u4e3a\u8f6e\u5ed3\u6309\u94ae\u6837\u5f0f |
text | string | 'Upload' | \u4e0a\u4f20\u6309\u94ae\u7684\u6587\u672c |
preview | boolean | false | \u542f\u7528\u53ef\u9884\u89c8\u6a21\u5f0f |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u4e0a\u4f20\u6309\u94ae\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(files: array) | \u6587\u4ef6\u53d8\u5316\u65f6\u89e6\u53d1 |
files
\u4e2d\u6bcf\u4e2a file
\u7684\u5c5e\u6027Name | Type | Description |
---|---|---|
tmpId | string | \u4e34\u65f6\u552f\u4e00 ID |
lastModified | number | \u8fd4\u56de\u6587\u4ef6\u7684\u4e0a\u6b21\u4fee\u6539\u65f6\u95f4\uff0c\u4ee5 UNIX \u7eaa\u5143\u4ee5\u6765\u7684\u6beb\u79d2\u6570\u4e3a\u5355\u4f4d (January 1st, 1970 at Midnight) |
name | string | \u8fd4\u56de File \u5bf9\u8c61\u5f15\u7528\u7684\u6587\u4ef6\u7684\u540d\u79f0 |
size | number | \u8fd4\u56de\u6587\u4ef6\u7684\u5927\u5c0f\uff08\u4ee5\u5b57\u8282\u4e3a\u5355\u4f4d\uff09 |
type | string | \u8fd4\u56de\u6587\u4ef6\u7684 MIME \u7c7b\u578b |
sourceFile | file | \u8fd4\u56de\u4e00\u4e2a\u65b0\u7684 Blob \u5bf9\u8c61\uff0c\u5176\u4e2d\u5305\u542b\u6e90 Blob \u7684\u6307\u5b9a\u5b57\u8282\u8303\u56f4\u5185\u7684\u6570\u636e |
previewSrc | string | \u7528\u4e8e\u9884\u89c8\u7684 src \u6570\u636e\u3002 \u4ec5\u9002\u7528\u4e8e\u53ef\u9884\u89c8\u6a21\u5f0f |
previewError | number | \u9884\u89c8\u9519\u8bef\u4ee3\u7801\uff1a{0: 'OK', 1: 'Not image type', 2: 'Unsupported'} |
<ui-table></ui-table>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
data | array | [] | Data source. | |
thead | array | [] | Table header renderer. | |
tbody | array | [] | Table content renderer. | |
tfoot | array | [] | Table footer renderer. | |
fullwidth | boolean | false | Styles the table as a full width table. | |
rowCheckbox | boolean | false | Data table with row selection. | |
selectedRows (v-model ) | array | [] | Selected row indexes/ids. (Required: rowCheckbox: true ) | |
rowCheckboxDisabled | function, boolean | false | Exclude row selections. | 8.52.0 |
selectedKey | boolean, string | false | selectedRows use custom key field, default use row index. | |
rowIdPrefix | string | '' | The prefix of data-row-id attribute value on row element tr . | |
sortIconAlignEnd | boolean | false | The sort icon will be positioned after the label. | |
showProgress | boolean | false | Styles the table with progress indicator for data loading. | 8.16.0 |
fixedHeader | boolean | false | Styles the table as a fixed header. | 8.16.0 |
defaultColWidth | number | 0 | Set the default column width for the fixed table. | 8.16.0 |
scroll | object | { x: false, y: false } | Set the table container size for the fixed table. | 8.16.0 |
thead
& tbody
& tfoot
props common format
interface TableCell {\n value: string; // Cell content\n numeric: boolean; // Numeric cell is displayed right (Equivalent to `align: 'right'`)\n align: 'left' | 'center' | 'right'; // Text alignment\n class: string; // Custom classname\n slot: string; // Custom slot for cell\n}\n
thead
format
default items (string[]
)
[\n 'ID',\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n];\n
custom items (object[]
or object[][]
)
interface Thead {\n sort: 'none' | 'asc' | 'desc'; // Sorting\n columnId: string; // sort field, e.g. 'id'\n rowspan: number;\n colspan: number;\n}\n
columnId
field: New in7.0.0
; ifbalm-ui < 7.0.0
please useby
field
[\n [\n {\n value: 'ID',\n rowspan: 2,\n sort: 'asc',\n columnId: 'id'\n },\n {\n value: 'Type1',\n colspan: 2,\n align: 'center'\n },\n {\n value: 'Type2',\n colspan: 3,\n align: 'center'\n },\n {\n value: 'Actions',\n rowspan: 2\n }\n ],\n [\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n ]\n];\n
tbody
format
default fields (string[]
)
['id', 'dessert', 'calories', 'fat', 'carbs', 'protein'];\n
custom fields (object[]
)
interface Tbody {\n field: string; // Data field name\n fn: function; // Simple data processing\n colClass: string; // The class name of the <col> element (New in 8.16.0)\n fixed: 'left' \uff5c 'right'; // Set column position for fixed cell (New in 8.16.0)\n width: number; // Set column width for fixed cell (New in 8.16.0)\n}\n
[\n 'id',\n 'dessert',\n {\n field: 'calories',\n numeric: true,\n class: 'my-data'\n },\n {\n field: 'fat',\n fn: (data) => {\n return data.fat.toFixed(1);\n }\n },\n 'carbs',\n {\n field: 'protein',\n class: (data) => {\n return data.protein > 5 ? 'red' : 'green';\n }\n },\n {\n slot: 'actions'\n }\n];\n
<ui-table>\n <template #actions="{ data }">\n <ui-icon @click="show(data)">description</ui-icon>\n <ui-icon @click="edit(data)">edit</ui-icon>\n <ui-icon @click="remove(data)">delete</ui-icon>\n </template>\n</ui-table>\n
tfoot
format (object[]
)
interface Tfoot {\n fnName: 'count' | 'sum' | 'avg' | 'max' | 'min'; // Frequently-used statistical method\n fn: function; // Simple data processing for result\n slot: string; // Custom slot for footer cell\n}\n
fnName
methods: count
, sum
, avg
, max
, min
[\n {\n field: 'id',\n fnName: 'count'\n },\n null,\n {\n field: 'calories',\n fnName: 'sum'\n },\n {\n field: 'fat',\n fnName: 'avg'\n },\n {\n field: 'carbs',\n fnName: 'max'\n },\n {\n field: 'protein',\n fnName: 'min'\n }\n];\n
Name | Props | Description |
---|---|---|
default | The default slot holds the pagination component and can contain HTML. | |
(custom-name) | Custom slot for cell |
Name | Type | Description | Version |
---|---|---|---|
selected | function(selectedRows: array) | Emits when row checkbox is changed. | |
sorted | function(detail: object) | Emits when clicked on sortable header cell. | 8.58.0 |
NOTE: If you are not using
v-model
, you should listen for the table using@selected
and update theselectedRows
prop.
Automatic
<ui-table v-model="selectedRows" row-checkbox></ui-table>\n
Manual
<ui-table\n :selectedRows="selectedRows"\n row-checkbox\n @selected="$balmUI.onChange('selectedRows', $event)"\n></ui-table>\n
<ui-dialog>\n <ui-dialog-title></ui-dialog-title>\n <ui-dialog-content></ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n
Component | Description |
---|---|
<ui-dialog> | \u5bf9\u8bdd\u6846\u5bb9\u5668\u5143\u7d20 |
<ui-dialog-title> | \u5bf9\u8bdd\u6846\u6807\u9898\u5143\u7d20 |
<ui-dialog-content> | \u5bf9\u8bdd\u6846\u4e3b\u8981\u5185\u5bb9\u533a\u57df\u3002\u53ef\u80fd\u5305\u542b\u5217\u8868\uff0c\u8868\u5355\u6216\u6587\u7ae0\u3002 |
<ui-dialog-actions> | \u5bf9\u8bdd\u6846\u5e95\u90e8\u533a\u57df\uff0c\u5305\u542b\u5bf9\u8bdd\u6846\u7684\u64cd\u4f5c\u6309\u94ae\u3002 |
\u5e95\u90e8\u6d88\u606f\u6846\u5728\u5c4f\u5e55\u5e95\u90e8\u63d0\u4f9b\u6709\u5173\u5e94\u7528\u7a0b\u5e8f\u8fc7\u7a0b\u7684\u7b80\u77ed\u6d88\u606f\u3002
'},DlJ9:function(t,e){t.exports='<ui-card-buttons><!-- the button components --></ui-card-buttons>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the button components and can contain HTML. |
<div v-anchor class="container">\n <ui-button v-anchor:href="'#target1'" raised>Anchor 1</ui-button>\n <ui-button v-anchor:href="'#target2'" outlined>Anchor 2</ui-button>\n\n <div v-anchor:id="'target1'">Target 1</div>\n <div v-anchor:id="'target2'">Target 2</div>\n</div>\n
'},E67T:function(t,e){t.exports='\u5982\u679c\u9700\u8981\u8bf7\u76f4\u63a5 \u590d\u5236\u7c98\u8d34 \u6216 \u81ea\u5b9a\u4e49
\u6587\u4ef6\uff1a/path/to/app/scripts/kill-ie.js
import { detectIE } from 'balm-ui'; // \u9ed8\u8ba4\u7528\u6cd5\n// \u6216\n// import detectIE from 'balm-ui/utils/ie'; // \u72ec\u7acb\u7528\u6cd5\n\nconst IE = detectIE();\n\nconst isIE = IE && IE < 11; // Browser support IE 11+\n\nconst killIE = () => {\n let body = document.getElementsByTagName('body')[0];\n let template = `<div class="kill-ie">\n <h1>\u60a8\u5f53\u524d\u4f7f\u7528\u7684\u6d4f\u89c8\u5668\u7248\u672c\u8fc7\u4f4e\uff0c\u53ef\u80fd\u5b58\u5728\u5b89\u5168\u98ce\u9669\uff0c\u8bf7\u70b9\u51fb<a href="https://browsehappy.com/">\u8fd9\u91cc</a>\u9009\u62e9\u4e00\u6b3e\u65b0\u7248\u6d4f\u89c8\u5668\u3002</h1>\n <p>\u5efa\u8bae\u5347\u7ea7\uff1a<a href="https://www.google.cn/intl/zh-CN/chrome/">\u8c37\u6b4c\u6d4f\u89c8\u5668</a></p>\n </div>`;\n\n body.innerHTML = template;\n};\n\nexport { isIE, killIE };\n
\u6587\u4ef6\uff1a/path/to/app/scripts/main.js
import { isIE, killIE } from './kill-ie';\n\nif (isIE) {\n killIE();\n} else {\n // your code\n}\n
\u6587\u4ef6\uff1a/path/to/app/styles/_kill-ie.scss
.kill-ie {\n position: absolute;\n text-align: center;\n background-color: #bdbdbd;\n\n h1 {\n font-size: 36px;\n }\n\n p {\n font-size: 24px;\n }\n\n a {\n text-decoration: underline;\n color: red;\n font-weight: bold;\n }\n}\n
<ui-image-list><!-- the image item components --></ui-image-list>\n
<ui-image-list>
\u7c7b\u578b
0
: 'standard'
1
: 'masonry'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u56fe\u7247\u5217\u8868\u7c7b\u578b |
masonry | boolean | false | \u7011\u5e03\u6d41\u6837\u5f0f |
textProtection | boolean | false | \u56fe\u7247\u5217\u8868\u9879\u7684\u6587\u5b57\u6807\u7b7e\u653e\u7f6e\u4e8e\u56fe\u7247\u4e2d\uff08\u800c\u975e\u56fe\u7247\u4e0b\u65b9\uff09 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u7247\u5217\u8868\u9879\u5185\u5bb9\u53ca HTML |
<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Date Range.."\n></ui-datepicker>\n
export default {\n data() {\n return {\n config: {\n mode: 'range'\n },\n date: ['2017-11-10', '2017-11-20']\n };\n }\n};\n
'},ENZn:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},EPuy:function(t,e){t.exports='<ui-textfield-icon><!-- the material design icon name --></ui-textfield-icon>\n
Name | Type | Default | Description |
---|---|---|---|
trailing | boolean | false | Display trailing icon. |
unclickable | boolean | false | Display un-clickable icon. |
Name | Props | Description |
---|---|---|
default | The default slot holds the text field icon and can contain HTML. See Material Icons list. |
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the text field icon is clicked. |
<h6 :class="$tt('headline6')">Start Alignment</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" align="start">\n <ui-tab v-for="(tab, index) in tabs" :key="index" min-width>\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">Center Alignment</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" align="center">\n <ui-tab v-for="(tab, index) in tabs" :key="index" min-width>\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">End Alignment</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" align="end">\n <ui-tab v-for="(tab, index) in tabs" :key="index" min-width>\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n
'},EYGw:function(t,e){t.exports='<div v-debounce></div>\n
interface Debounce {\n callback: Function;\n delay?: number; // defaults: 250 ms\n}\n
'},Ea3x:function(t,e){t.exports='@use '@material/theme/theme-color' with (\n $primary: #6200ee, // baseline purple, 500 tone\n $on-primary: if(contrast-tone($primary) == 'dark', #000, #fff),\n\n $secondary: #018786, // baseline teal, 600 tone\n $on-secondary: if(contrast-tone($secondary) == 'dark', #000, #fff),\n $background: #fff, // White\n\n $surface: #fff,\n $on-surface: if(contrast-tone($surface) == 'dark', #000, #fff),\n\n $error: #b00020,\n $on-error: if(contrast-tone($error) == 'dark', #000, #fff),\n\n $text-colors: (\n dark: (\n primary: rgba(black, 0.87),\n secondary: rgba(black, 0.54),\n hint: rgba(black, 0.38),\n disabled: rgba(black, 0.38),\n icon: rgba(black, 0.38),\n ),\n light: (\n primary: white,\n secondary: rgba(white, 0.7),\n hint: rgba(white, 0.5),\n disabled: rgba(white, 0.5),\n icon: rgba(white, 0.5),\n ),\n ),\n\n $text-emphasis: (\n high: 0.87,\n medium: 0.6,\n disabled: 0.38,\n )\n);\n
Material Color System Usage (See below color palette)
@use '@material/theme' as color;\n\n.test {\n color: color.$red-800;\n}\n
<ui-segmented-buttons :items="buttonGroupItems"></ui-segmented-buttons>\n
<ui-segmented-buttons>\n <ui-segmented-button></ui-segmented-button>\n</ui-segmented-buttons>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | array, number | [] | \u9009\u4e2d\u72b6\u6001 |
items | array | [] | \u6309\u94ae\u7ec4\u5143\u7d20\u5bf9\u8c61 |
singleSelect | boolean | false | \u5355\u9009\u6a21\u5f0f |
\u6309\u94ae\u7ec4\u5143\u7d20\u5bf9\u8c61\u7684\u5173\u952e keys:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u7ec4\u7ec4\u4ef6 <ui-segmented-button> |
Name | Type | Description |
---|---|---|
change | function(selectedIndex: array | number) | \u6309\u94ae\u7ec4\u72b6\u6001\u53d8\u5316\u65f6\u89e6\u53d1 |
selected | function(index: number) | \u70b9\u51fb\u6309\u94ae\u7ec4\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6309\u94ae\u7ec4\u72b6\u6001\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-segmented-buttons v-model="selectedIndex"></ui-segmented-buttons>\n
\u624b\u52a8
<ui-segmented-buttons\n :model="selectedIndex"\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-segmented-buttons>\n
<ui-fab><!-- Icon --></ui-fab>\n\n<ui-fab extended><!-- Text label --></ui-fab>\n
<ui-fab>
\u7c7b\u578b
0
: 'regular'
1
: 'extended'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u6d6e\u52a8\u6309\u94ae\u7c7b\u578b |
extended | boolean | false | \u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u3002\u5c06\u6d6e\u52a8\u6309\u94ae\u4fee\u6539\u4e3a\u66f4\u5927\u7684\u5c3a\u5bf8\uff0c\u5305\u62ec\u6587\u672c\u6807\u7b7e\u3002 |
icon | string | '' | \u8bbe\u7f6e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
mini | boolean | false | \u8ff7\u4f60\u6d6e\u52a8\u6309\u94ae |
exited | boolean | false | \u5bf9\u6d6e\u52a8\u6309\u94ae\u8fdb\u884c\u52a8\u753b\u5904\u7406 |
Name | Props | Description |
---|---|---|
default | iconClass | default \u63d2\u69fd\u5305\u542b\u6d6e\u52a8\u6309\u94ae\u6587\u5b57\u6216\u56fe\u6807 |
before | iconClass | \u81ea\u5b9a\u4e49\u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u7684\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u7684\u5c3e\u56fe\u6807 |
\u63d0\u793a\uff1a\u6269\u5c55\u6d6e\u52a8\u6309\u94ae\u7684 default \u63d2\u69fd\u6ca1\u6709
slot-scope
<ui-fab>\n <template #default="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-fab>\n\n<ui-fab extended>\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n Text label\n</ui-fab>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u6d6e\u52a8\u6309\u94ae\u65f6\u89e6\u53d1 |
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-switch>` props with default value.\n UiSwitch: {\n // some props\n }\n});\n
'},FArz:function(t,e){t.exports='<ui-list :type="2" avatar>\n <template v-for="(item, index) in items">\n <ui-item-divider v-if="item === '-'" :key="index"></ui-item-divider>\n <ui-item v-else :key="index">\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">folder</ui-icon>\n </template>\n <ui-item-text-content>\n <ui-item-text1>{{ item.text }}</ui-item-text1>\n <ui-item-text2>{{ item.subtext }}</ui-item-text2>\n </ui-item-text-content>\n <ui-item-last-content>\n <ui-icon>info</ui-icon>\n </ui-item-last-content>\n </ui-item>\n </template>\n</ui-list>\n
'},"FCS/":function(t,e){t.exports='/* Included `elevation.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/directives/elevation/elevation';\n
import Vue from 'vue';\nimport vElevation from 'balm-ui/directives/elevation';\n\nVue.directive(vElevation.name, vElevation);\n
'},FKpq:function(t,e){t.exports='<ui-form-field>\n <ui-checkbox v-model="checked" input-id="checkbox"></ui-checkbox>\n <label for="checkbox">{{checked}}</label>\n</ui-form-field>\n
export default {\n data() {\n return {\n checked: false\n };\n }\n};\n
'},FME5:function(t,e){t.exports='<section>\n <ui-select v-model="selected">\n Food Group\n </ui-select>\n</section>\n
export default {\n data() {\n return {\n selected: 'fruit-roll-ups'\n };\n }\n};\n
'},FQyl:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-spinner>` props with default value.\n UiSpinner: {\n // some props\n }\n});\n
'},FUGW:function(t,e){t.exports='<ui-card class="demo-card demo-card--photo">\n <ui-card-content class="demo-card__primary-action">\n <ui-card-media square class="demo-card__media">\n <ui-card-media-content class="demo-card__media-content--with-title">\n <div :class="[$tt('subtitle2'), 'demo-card__media-title']">\n Vacation Photos\n </div>\n </ui-card-media-content>\n </ui-card-media>\n </ui-card-content>\n <ui-card-actions>\n <ui-card-icons>\n <ui-icon-button :toggle="icon1"></ui-icon-button>\n <ui-icon-button :toggle="icon2"></ui-icon-button>\n <ui-icon-button icon="share"></ui-icon-button>\n </ui-card-icons>\n </ui-card-actions>\n</ui-card>\n
export default {\n data() {\n return {\n icon1: {\n on: 'favorite',\n off: 'favorite_border'\n },\n icon2: {\n on: 'bookmark',\n off: 'bookmark_border'\n }\n };\n }\n};\n
.demo-card {\n width: 350px;\n margin: 48px;\n}\n\n.demo-card--photo {\n width: 200px;\n}\n\n.demo-card__media {\n background-image: url('../images/1-1.jpg');\n}\n\n.demo-card__media-content--with-title {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n}\n\n.demo-card__media-title {\n padding: 8px 16px;\n background-image: linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 0%,\n rgba(0, 0, 0, 0.5) 100%\n );\n color: white;\n}\n
'},Fd0s:function(t,e){t.exports='<ui-button raised @click="$toast('gg')">Show Toast</ui-button>\n
'},"Fl+1":function(t,e){t.exports='A divider is a thin line that groups content in lists and layouts.
'},FlZy:function(t,e){t.exports='<ui-chips v-model="selectedValue" type="choice" :options="options"></ui-chips>\n
export default {\n data() {\n return {\n selectedValue: 3,\n options: [\n {\n label: 'Extra Small',\n value: 1\n },\n {\n label: 'Small',\n value: 2\n },\n {\n label: 'Medium',\n value: 3\n },\n {\n label: 'Large',\n value: 4\n },\n {\n label: 'Extra Large',\n value: 5\n }\n ]\n };\n }\n};\n
'},Floz:function(t,e){t.exports='<ui-form-field>\n <ui-checkbox></ui-checkbox>\n <label>Checkbox</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean, array | false | \u590d\u9009\u6846\u503c |
indeterminate | boolean | false | \u4e0d\u786e\u5b9a\u72b6\u6001 |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
value | string, number | '' | \u539f\u751f <input> \u7684 value \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
attrs | object | {} | <input> \u7684\u5176\u4ed6\u5c5e\u6027 |
Name | Type | Description |
---|---|---|
change | function(value: boolean|array) | \u590d\u9009\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u590d\u9009\u6846\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-checkbox v-model="value"></ui-checkbox>\n
\u624b\u52a8
<ui-checkbox\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-checkbox>\n
<div v-tooltip="'Tips text'" aria-describedby="tooltip-id">Text</div>\n
'},Fxvw:function(t,e){t.exports='<ui-card-actions><!-- card actions area --></ui-card-actions>\n
Name | Type | Default | Description |
---|---|---|---|
fullBleed | boolean | false | Removes the action area's padding and causes its only child (a mdc-card__action element) to consume 100% of the action area's width |
Name | Props | Description |
---|---|---|
default | The default slot holds the card actions parent components. |
Child components:
<ui-card-buttons>
<ui-card-icons>
<ui-rangepicker></ui-rangepicker>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | Styles the rangepicker as an outlined text field. (labels or placeholders required) | |
model (v-model ) | array | '' | Mandatory. | |
disabled | boolean | false | Styles the rangepicker as a disabled text field. | |
labels | array | [] | A text caption or description for the rangepicker, which use the start and end input's placeholder attribute instead. | |
placeholders | array | [] | The placeholder attribute of the start and end <input> . | |
config | object | {} | See Flatpickr configuration. | |
disableRangePlugin | boolean | false | Disables the flatpickr rangePlugin and use two <ui-datepicker> instead. | 8.58.0 |
Name | Props | Description |
---|---|---|
separator | The custom separator. |
Name | Type | Description |
---|---|---|
change | function(value: array) | Emits when the rangepicker value is changed. |
NOTE: If you are not using
v-model
, you should listen for the rangepicker using@change
and update themodel
prop.
Automatic
<ui-rangepicker v-model="value"></ui-rangepicker>\n
Manual
<ui-rangepicker\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-rangepicker>\n
// `/path/to/app/scripts/store/index.js`\nimport demo from './demo';\n\nexport default {\n mixins: [demo]\n};\n
// `/path/to/app/scripts/store/demo.js`\nexport default {\n data() {\n return {\n demoMenu: []\n };\n },\n methods: {\n async getDemoMenu() {\n this.demoMenu = await this.$http.get('/api/get-menu');\n }\n }\n};\n
// `/path/to/awesome.vue`\n\nexport default {\n async created() {\n await this.$store.getDemoMenu();\n console.log(this.$store.demoMenu);\n }\n};\n
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $store
New in 8.19.0
// `/path/to/awesome.js`\n\nimport { useStore } from 'balm-ui';\n// OR\n// import { useStore } from 'balm-ui/plugins/store';\n\nconst $store = useStore();\nconsole.log($store.demoMenu);\n
'},GHv9:function(t,e){t.exports='<ui-segmented-button></ui-segmented-button>\n
Name | Type | Default | Description |
---|---|---|---|
selected | boolean | false | \u8bbe\u7f6e\u9009\u4e2d\u72b6\u6001\u6837\u5f0f |
text | string | '' | \u6309\u94ae\u6587\u5b57 |
icon | string | '' | \u6309\u94ae\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u6587\u5b57\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u6309\u94ae\u65f6\u89e6\u53d1 |
<div v-anchor></div>\n
v-anchor.bodyElement
: custom html contianer (Default contianer is <html>
)v-anchor.html
: for html (e.g. markdown)v-anchor.offset="offsetValue"
: set offset for scrollTop (Use data-vanchor-offset
in <html>
or custom contianer)offsetValue is a number
<html data-vanchor-offset="64">\n <!-- Anchors & Targets -->\n</html>\n\n<!-- OR -->\n\n<div class="container" v-anchor.offset="64">\n <!-- Anchors & Targets -->\n</div>\n
v-anchor:href
v-anchor:id
<div v-anchor:href="'#target1'">Anchor 1</div>\n<div v-anchor:href="'#target2'">Anchor 2</div>\n\n<div v-anchor:id="'target1'">Target 1</div>\n<div v-anchor:id="'target2'">Target 2</div>\n
class="v-anchor" data-href="selector"
id
or unique class
attribute<div v-anchor.html>\n <div class="v-anchor" data-href="#target1">Anchor 1</div>\n <div class="v-anchor" data-href="#target2">Anchor 2</div>\n\n <div id="target1">Target 3</div>\n <div id="target2">Target 4</div>\n</div>\n
'},GLjc:function(t,e){t.exports='\u9ed8\u8ba4\u7528\u6cd5
import { types } from 'balm-ui';\n
\u72ec\u7acb\u7528\u6cd5
import types from 'balm-ui/utils/types';\n
\u65b9\u6cd5
types.getType(any): string;\n\ntypes.isUndefined(value): boolean;\ntypes.isNull(value): boolean;\ntypes.isBoolean(value): boolean;\ntypes.isNumber(value): boolean;\ntypes.isString(value): boolean;\ntypes.isSymbol(value): boolean;\ntypes.isObject(value): boolean;\ntypes.isArray(value): boolean;\ntypes.isFunction(value): boolean;\n
\u9ed8\u8ba4\u7528\u6cd5
import { helpers } from 'balm-ui';\n
\u72ec\u7acb\u7528\u6cd5
import helpers from 'balm-ui/utils/helpers';\n
\u65b9\u6cd5
helpers.isEmpty(value): boolean;\n\nhelpers.jsonEqual(jsonA, jsonB): boolean; // \u5c5e\u6027\u7684\u987a\u5e8f\u5f88\u91cd\u8981\nhelpers.isDeepEqual(obj1, obj2): boolean;\n\n// New in 6.7.0\nhelpers.merge(target: object, source: object): object;\nhelpers.merge.all(arrayOfObjects: object[]): object;\n\n// New in 8.38.0\nhelpers.toCamelCase(str: string): string;\nhelpers.toCapitalize(str: string): string;\n
isEmpty
\u4ee5\u4e0b\u503c\u88ab\u8ba4\u4e3a\u662f\u7a7a\u503c\uff1aundefined
null
false
0
''
'0'
{}
[]
map
or set
\u9ed8\u8ba4\u7528\u6cd5
import { detectIE } from 'balm-ui';\n
\u72ec\u7acb\u7528\u6cd5
import detectIE from 'balm-ui/utils/ie';\n
\u65b9\u6cd5
detectIE(): string | false;\n
IE \u6d4f\u89c8\u5668\u8fd4\u56de\u7248\u672c\u53f7\uff0c\u5176\u4ed6\u6d4f\u89c8\u5668\u8fd4\u56de
false
New in 8.62.0
\u9ed8\u8ba4\u7528\u6cd5
import { ban } from 'balm-ui';\n
\u72ec\u7acb\u7528\u6cd5
import ban from 'balm-ui/utils/ban';\n
\u65b9\u6cd5
ban(): void;\n
'},GMD9:function(t,e){t.exports='import Vue from 'vue';\nimport $event from 'balm-ui/plugins/event';\n\nVue.use($event);\n
'},GNMz:function(t,e){t.exports='\u26a0\ufe0f The
deprecated
path is required inbalm-ui
>= 8.42.0
@use '@material/switch/deprecated/variables' with (\n $track-width: 36px,\n $track-height: 14px,\n $thumb-diameter: 20px,\n $ripple-size: 48px,\n\n $minimum-size: 28px,\n $maximum-size: $ripple-size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n minimum: $minimum-size,\n default: $maximum-size,\n maximum: $maximum-size,\n ),\n ),\n\n $thumb-active-margin: $track-width - $thumb-diameter,\n\n $toggled-off-thumb-color: surface,\n $toggled-off-track-color: on-surface,\n $toggled-off-ripple-color: #9e9e9e,\n $disabled-thumb-color: surface,\n $disabled-track-color: on-surface,\n\n $baseline-theme-color: secondary\n);\n
'},GcAE:function(t,e){t.exports='<ui-bottom-navigation>\n <!-- <ui-tabs> or <ui-tab-bar> component -->\n</ui-bottom-navigation>\n
Name | Type | Default | Description |
---|---|---|---|
contentSelector | string | (required) | Mandatory. Selector used to style the content above the bottom navigation, to prevent the bottom navigation from covering it. |
stacked | boolean | false | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally. |
min | boolean | false | Show 3 navigation items. |
max | boolean | false | Show 5 navigation items. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/picker/picker';\n@use 'balm-ui/components/datepicker/datepicker';\n
import Vue from 'vue';\nimport UiDatepicker from 'balm-ui/components/datepicker';\n\n// Optional. Overwrite `<ui-datepicker>` props with default value.\nVue.use(UiDatepicker, {\n // some props\n});\n
'},Gktk:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-snackbar>` props with default value.\n UiSnackbar: {\n // some props\n }\n});\n
'},GkzM:function(t,e){t.exports='<ui-icon-button></ui-icon-button>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean | false | Sets the toggle state. |
icon | string | '' | A material icon of the icon button. See Material Icons list. |
toggle | object | {} | Two material icons of the toggle button. See Material Icons list. |
Configuring the toggle button states by toggle.on
and toggle.off
props
interface IconButton {\n toggle: {\n on: string;\n off: string;\n };\n}\n
Name | Props | Description |
---|---|---|
default | onClass , offClass | The default slot holds the toggle or link custom icons and can contain HTML. |
<template #default="{ onClass, offClass }">\n <i :class="onClass">ON</i>\n <i :class="offClass">OFF</i>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the icon button is clicked. |
change | function(value: boolean) | Emits when the icon button is toggled. |
NOTE: If you are not using
v-model
, you should listen for the icon button using@change
and update themodel
prop.
Automatic
<ui-icon-button v-model="value"></ui-icon-button>\n
Manual
<ui-icon-button\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-icon-button>\n
<ui-button raised @click="$balmUI.onShow('open')">Open dialog</ui-button>\n\n<ui-dialog v-model="open">\n <ui-dialog-content>\n Dialog content\n </ui-dialog-content>\n <ui-dialog-actions>\n <ui-button @click="$balmUI.onHide('open')">Close dialog</ui-button>\n </ui-dialog-actions>\n</ui-dialog>\n
export default {\n data() {\n return {\n open: false\n };\n }\n};\n
'},H8iH:function(t,e){t.exports='<ui-skeleton><!-- (the loaded data) --></ui-skeleton>\n
Name | Type | Default | Description |
---|---|---|---|
loading | boolean | true | \u663e\u793a\u9aa8\u67b6\u5c4f |
active | boolean | false | \u663e\u793a\u52a8\u753b\u6548\u679c |
avatar | boolean, object | false | \u663e\u793a\u5934\u50cf\u5360\u4f4d\u7b26 |
title | boolean, object | true | \u663e\u793a\u6807\u9898\u5360\u4f4d\u7b26 |
paragraph | boolean, object | true | \u663e\u793a\u5185\u5bb9\u5360\u4f4d\u7b26 |
interface Skeleton {\n avatar: {\n size: 'large' | 'small' | number; // \u8bbe\u7f6e\u5934\u50cf\u5c3a\u5bf8\n shape: 'circle' | 'square'; // \u8bbe\u7f6e\u5934\u50cf\u5f62\u72b6\n };\n title: {\n width: string; // \u8bbe\u7f6e\u6807\u9898\u5bbd\u5ea6\n };\n paragraph: {\n width: string; // \u8bbe\u7f6e\u5185\u5bb9\u5bbd\u5ea6\n rows: number; // \u8bbe\u7f6e\u5185\u5bb9\u884c\u6570\n };\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u4efb\u610f\u7ec4\u4ef6\u53ca HTML |
'},Hf7S:function(t,e){t.exports='New in 8.29.0
<ui-textfield-helper><!-- the helper text --></ui-textfield-helper>\n
Name | Type | Default | Description |
---|---|---|---|
validMsg (v-model ) | string, boolean | false | \u9a8c\u8bc1\u6d88\u606f\u6587\u672c |
id | string | null | \u5fc5\u586b\uff08\u53ef\u5bf9\u5e94\u5339\u914d <ui-textfield> \u7684 helperTextId \u5c5e\u6027\uff09 |
visible | boolean | false | \u4f7f\u5e2e\u52a9\u6587\u672c\u6c38\u8fdc\u53ef\u89c1 |
withCounter | boolean | false | \u542f\u7528\u8ba1\u6570\u5668\uff08\u9700\u8981\u914d\u7f6e <ui-textfield> \u7684 maxlength \u5c5e\u6027\uff09 |
\u63d0\u793a\uff1a\u8bf7\u4e0d\u8981\u5728
<ui-textfield>
\u548c\u542f\u7528\u8ba1\u6570\u5668\u7684<ui-textfield-helper>
\u4e4b\u524d\u63d2\u5165\u4efb\u4f55\u6807\u7b7e
<!-- Single line text field -->\n<ui-form-field>\n <ui-textfield maxlength="40"></ui-textfield>\n <ui-textfield-helper with-counter></ui-textfield-helper>\n</ui-form-field>\n\n<!-- Single line text field with an internal character counter -->\n<ui-form-field>\n <ui-textfield maxlength="40" with-counter></ui-textfield>\n</ui-form-field>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u5e2e\u52a9\u6587\u5b57\u53ca HTML |
<ui-list-group>\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n</ui-list-group>\n
'},Hjc5:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-radio>` props with default value.\n UiRadio: {\n // some props\n }\n});\n
'},Hn1h:function(t,e){t.exports='<ui-drawer-content><!-- the list of items --></ui-drawer-content>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b router link \u5217\u8868\u53ca HTML |
<ui-tab-bar v-model="active" class="custom-demo">\n <ui-tab\n v-for="(tab, index) in tabs"\n :key="index"\n class="demo-tab custom-tab"\n type="textWithIcon"\n :icon="tab.icon"\n stacked\n content-indicator\n >\n {{ tab.text }}\n <template #indicator>\n <ui-tab-indicator class="custom-tab-indicator"></ui-tab-indicator>\n </template>\n </ui-tab>\n</ui-tab-bar>\n
/* Sass code */\n.demo-tab {\n flex: 0 1 auto;\n}\n\n.custom-tab {\n @include mdc-tab-text-label-color($material-color-blue-300);\n @include mdc-tab-icon-color($material-color-orange-300);\n .custom-tab-indicator {\n @include mdc-tab-indicator-underline-color($material-color-pink-a700);\n @include mdc-tab-indicator-underline-height(5px);\n @include mdc-tab-indicator-underline-top-corner-radius(5px);\n }\n .mdc-tab__ripple {\n @include mdc-states($material-color-pink-100);\n }\n &.mdc-tab--active {\n @include mdc-tab-text-label-color($material-color-blue-900);\n @include mdc-tab-icon-color($material-color-orange-900);\n }\n}\n
'},"Hs+w":function(t,e){t.exports='<ui-fab extended>\n <template #before="{ iconClass }">\n <ui-icon :class="iconClass">add</ui-icon>\n </template>\n <span>Create</span>\n</ui-fab>\n\n<ui-fab extended>\n <span>Create</span>\n <template #after="{ iconClass }">\n <ui-icon :class="iconClass">add</ui-icon>\n </template>\n</ui-fab>\n\n<ui-fab extended>Create</ui-fab>\n
'},"I+0z":function(t,e){t.exports='\u6c34\u6ce2\u7eb9\u6548\u679c\u5411\u7ec4\u4ef6\uff08\u6216\u4efb\u4f55\u5143\u7d20\uff09\u63d0\u4f9b\u5b9e\u8d28\u6027\u201c\u58a8\u6c34\u6ce2\u7eb9\u201d\u4ea4\u4e92\u6548\u679c\u3002 \u5b83\u88ab\u8bbe\u8ba1\u4e3a\u9ad8\u6548\uff0c\u65e0\u521b\u4e14\u53ef\u7528\u7684\uff0c\u800c\u65e0\u9700\u5411\u60a8\u7684\u5143\u7d20\u4e2d\u6dfb\u52a0\u4efb\u4f55\u989d\u5916\u7684 DOM\u3002
'},I9yt:function(t,e){t.exports='<h6 :class="$tt('headline6')">Text Label Width-Matching Indicator</h6>\n<div class="example">\n <ui-tab-bar v-model="active">\n <ui-tab v-for="(tab, index) in tabs" :key="index" content-indicator>\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">Text Label with Icon Indicator</h6>\n<div class="example">\n <ui-tab-bar v-model="active">\n <ui-tab v-for="(tab, index) in tabs" :key="index">\n {{ tab.text }}\n <template #indicator>\n <ui-tab-indicator type="icon">{{ tab.indicator }}</ui-tab-indicator>\n </template>\n </ui-tab>\n </ui-tab-bar>\n</div>\n
export default {\n data() {\n return {\n active: 0,\n tabs: [\n {\n text: 'Favorites',\n icon: 'favorite',\n indicator: 'crop_square'\n },\n {\n text: 'Recents',\n icon: 'phone',\n indicator: 'panorama_fish_eye'\n },\n {\n text: 'Nearby',\n icon: 'near_me',\n indicator: 'change_history'\n }\n ]\n };\n }\n};\n
'},IFD9:function(t,e){var o;o=function(){return this}();try{o=o||new Function("return this")()}catch(d){"object"===typeof window&&(o=window)}t.exports=o},IHaU:function(t,e){t.exports='@use '@material/radio/radio-theme' with (\n $ripple-size: 40px,\n $icon-size: 20px,\n $transition-duration: 120ms,\n $ripple-opacity: 0.14,\n $baseline-theme-color: secondary,\n $unchecked-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $disabled-circle-color: rgba(theme-color.prop-value(on-surface), 0.38),\n\n $minimum-size: 28px,\n $maximum-size: $ripple-size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n minimum: $minimum-size,\n default: $ripple-size,\n maximum: $maximum-size,\n ),\n )\n);\n
'},INJ5:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},ISn7:function(t,e){t.exports='<ui-drawer>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item active>Activated link</ui-nav-item>\n <ui-nav-item>Unactivated link</ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n</ui-drawer>\n
Component | Description |
---|---|
<ui-drawer> | Mandatory. |
<ui-drawer-header> | Non-scrollable element that exists at the top of the drawer. |
<ui-drawer-title> | Title text element of the drawer. |
<ui-drawer-subtitle> | Subtitle text element of the drawer. |
<ui-drawer-content> | Scrollable content area of the drawer. |
<ui-drawer-app-content> | Mandatory for <ui-drawer type="dismissible"> only. Sibling element that is resized when the drawer opens/closes. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/spinner/spinner';\n
import Vue from 'vue';\nimport UiSpinner from 'balm-ui/components/spinner';\n\n// Optional. Overwrite `<ui-spinner>` props with default value.\nVue.use(UiSpinner, {\n // some props\n});\n
'},Iz8e:function(t,e){t.exports='Custom global store
// `/path/to/app/scripts/store/index.js`\nexport default {\n // name: 'Store',\n mixins: []\n};\n
<ui-textfield-icon>
@use '@material/textfield/icon' with (\n $icon-size: 24px,\n $dense-icon-size: 20px,\n $touch-target-size: 48px,\n\n $leading-icon-padding-left: 16px,\n $leading-icon-padding-right: 8px,\n $trailing-icon-padding-left: 12px,\n $trailing-icon-padding-right: 12px\n);\n
<ui-textfield>
@use '@material/textfield' with (\n $error: error,\n $disabled-border: rgba(theme-color.prop-value(on-surface), 0.06),\n $disabled-icon: rgba(theme-color.prop-value(on-surface), 0.3),\n $bottom-line-hover: rgba(theme-color.prop-value(on-surface), 0.87),\n $bottom-line-idle: rgba(theme-color.prop-value(on-surface), 0.42),\n $label: rgba(theme-color.prop-value(on-surface), 0.6),\n\n $ink-color: rgba(theme-color.prop-value(on-surface), 0.87),\n $helper-text-color: rgba(theme-color.prop-value(on-surface), 0.6),\n $icon-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $focused-label-color: rgba(theme-color.prop-value(primary), 0.87),\n $placeholder-ink-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $affix-color: rgba(theme-color.prop-value(on-surface), 0.6),\n\n $disabled-label-color: rgba(theme-color.prop-value(on-surface), 0.38),\n $disabled-ink-color: rgba(theme-color.prop-value(on-surface), 0.38),\n $disabled-placeholder-ink-color: rgba(\n theme-color.prop-value(on-surface),\n 0.38\n ),\n $disabled-helper-text-color: rgba(\n theme-color.prop-value(on-surface),\n 0.38\n ),\n $disabled-affix-color: rgba(theme-color.prop-value(on-surface), 0.38),\n\n $background: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 4%\n ),\n $disabled-background: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 2%\n ),\n $secondary-text: rgba(theme-color.prop-value(on-surface), 0.6),\n\n $outlined-idle-border: rgba(theme-color.prop-value(on-surface), 0.38),\n $outlined-disabled-border: rgba(\n theme-color.prop-value(on-surface),\n 0.06\n ),\n $outlined-hover-border: rgba(theme-color.prop-value(on-surface), 0.87),\n\n $textarea-border: rgba(theme-color.prop-value(on-surface), 0.73),\n $textarea-background: rgba(theme-color.prop-value(surface), 1),\n $textarea-disabled-border-color: rgba(\n theme-color.prop-value(on-surface),\n 0.26\n ),\n // cannot be transparent because multiline textarea input\n // will make text unreadable\n $textarea-disabled-background: rgba(249, 249, 249, 1),\n\n $outlined-stroke-width: 2px,\n $height: 56px,\n $minimum-height: 40px,\n $minimum-height-for-filled-label: 52px,\n $maximum-height: $height,\n $padding-horizontal: 16px,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n $shape-radius: small,\n $label-position-y: floating-label-variables.$position-y,\n $label-offset: 16px,\n $outlined-with-leading-icon-label-position-x: 32px,\n $textarea-outlined-label-position-y: 24.75px, // visually ~4dp from top to baseline\n $textarea-filled-label-position-y: 10.25px, // visually ~20dp from top to label baseline\n $helper-line-padding: 16px,\n $filled-baseline-top: 40px,\n $input-height: 28px,\n $textarea-label-top: 19px, // visually ~32dp from top to label baseline\n $textarea-outlined-label-top: $textarea-label-top -\n notched-outline-variables.$border-width,\n $textarea-line-height: 1.5rem, // 24dp from baseline to baseline\n $textarea-input-handle-margin: 1px,\n // Outlined textarea's first line should be placed at the same position as\n // outlined textfield, and should look identical if it is 1 row. Since textfield\n // is centered and font metrics vary for where the baseline is, the best way to\n // ensure textarea and textfield align is with padding. At 56px height with a\n // 24px line-height, a centered textfield has 16px of top and bottom padding.\n // Textarea should use this to position itself.\n $textarea-outlined-input-margin-top: 16px,\n $textarea-outlined-input-margin-bottom: 16px,\n $textarea-outlined-density-config: (\n margin-top: (\n default: $textarea-outlined-input-margin-top,\n maximum: $textarea-outlined-input-margin-top,\n minimum: $textarea-outlined-input-margin-top - 8,\n ),\n margin-bottom: (\n default: $textarea-outlined-input-margin-bottom,\n maximum: $textarea-outlined-input-margin-bottom,\n minimum: $textarea-outlined-input-margin-bottom - 8,\n ),\n ), // remove 1/2 of scale to -4 for minimum\n $textarea-outlined-label-density-config: (\n top: (\n default: $textarea-outlined-label-top,\n maximum: $textarea-outlined-label-top,\n minimum: $textarea-outlined-label-top - 8,\n ),\n ), // remove 1/2 of scale to -4 for minimum\n $textarea-filled-input-margin-top: 23px, // visually ~40dp from top to baseline\n $textarea-filled-input-margin-bottom: 9px, // visually ~16dp from baseline to bottom\n $textarea-filled-density-config: (\n margin-bottom: (\n default: $textarea-filled-input-margin-bottom,\n maximum: $textarea-filled-input-margin-bottom,\n minimum: $textarea-filled-input-margin-bottom - 4,\n ),\n ), // scale to -1 for minimum\n $textarea-filled-label-density-config: (\n top: (\n default: $textarea-label-top,\n maximum: $textarea-label-top,\n minimum: $textarea-label-top - 2,\n ),\n ), // remove 1/2 of scale to -1 for minimm\n $textarea-filled-no-label-input-margin-top: 16px, // see above explanation for outlined textarea margin\n $textarea-filled-no-label-input-margin-bottom: 16px, // see above explanation for outlined textarea margin\n $textarea-filled-no-label-density-config: (\n margin-top: (\n default: $textarea-filled-no-label-input-margin-top,\n maximum: $textarea-filled-no-label-input-margin-top,\n minimum: $textarea-filled-no-label-input-margin-top - 8,\n ),\n margin-bottom: (\n default: $textarea-filled-no-label-input-margin-bottom,\n maximum: $textarea-filled-no-label-input-margin-bottom,\n minimum: $textarea-filled-no-label-input-margin-bottom - 8,\n ),\n ), // remove 1/2 of scale to -4 for minimum\n $textarea-internal-counter-input-margin-bottom: 2px, // visually ~20dp from baseline to counter baseline\n $textarea-internal-counter-baseline-bottom: 16px,\n // Note that the scale factor is an eyeballed approximation of what's shown in the mocks.\n\n $prefix-padding: 2px,\n $prefix-end-aligned-padding: 12px,\n $suffix-padding: 12px,\n $suffix-end-aligned-padding: 2px\n);\n
'},JRIu:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/confirm/confirm';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport $confirm from 'balm-ui/plugins/confirm';\n\n// Optional. Overwrite `$confirm` options.\nVue.use($confirm, {\n // some options\n});\n
'},"JT/l":function(t,e){t.exports='@use '@material/shape/shape' with (\n // Shape categories\n $small-component-radius: 4px,\n $medium-component-radius: 4px,\n $large-component-radius: 0\n);\n
'},JXzD:function(t,e){t.exports='\u53ef\u4ee5\u6298\u53e0\u548c\u6269\u5c55\u7684\u5185\u5bb9\u533a\u57df\u3002
'},JjHA:function(t,e){t.exports='New in 6.3.0
@use 'balm-ui/components/icon' with (\n $font-path: '../fonts',\n $with-subdir: 0,\n\n $sizes: 18 24 36 48,\n $dark: rgba(0, 0, 0, 0.54),\n $dark-focused: rgba(0, 0, 0, 0.87), // New in 8.26.0\n $dark-inactive: rgba(0, 0, 0, 0.38),\n $light: rgba(255, 255, 255, 0.7),\n $light-focused: rgba(255, 255, 255, 1), // New in 8.26.0\n $light-inactive: rgba(255, 255, 255, 0.5),\n\n $success: #0f9d58,\n $info: #4285f4,\n $warning: #f4b400,\n $error: #db4437\n);\n
'},JlNl:function(t,e){t.exports='// `/path/to/app/scripts/store/index.js`\nimport demo from './demo';\n\nexport default {\n mixins: [demo]\n};\n
// `/path/to/app/scripts/store/demo.js`\nexport default {\n data() {\n return {\n demoMenu: []\n };\n },\n methods: {\n async getDemoMenu() {\n this.demoMenu = await this.$http.get('/api/get-menu');\n }\n }\n};\n
// `/path/to/awesome.vue`\n\nexport default {\n async created() {\n await this.$store.getDemoMenu();\n console.log(this.$store.demoMenu);\n }\n};\n
$store
without .vue
componentNew in 8.19.0
// `/path/to/awesome.js`\n\nimport { useStore } from 'balm-ui';\n// OR\n// import { useStore } from 'balm-ui/plugins/store';\n\nconst $store = useStore();\nconsole.log($store.demoMenu);\n
'},JqhC:function(t,e){t.exports='<ui-chips>\n <ui-chip></ui-chip>\n <!-- more chip -->\n</ui-chips>\n
<ui-chips>
Types
0
: 'action'
1
: 'input'
2
: 'choice'
3
: 'filter'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Chips types. | |
model (v-model ) | string, number, array | '' | Mandatory. Single or multiple selection from a set of options. | |
options | array | [] | An array of options to show to the user. Applicable only for choice or filter chips. | 7.2.0 |
optionFormat | object | { label: 'label', value: 'value' } | Defines the option data format. | 8.42.0 |
chips | array | [] | A set of chips. Applicable only for updating the input chips. |
\u26a0\ufe0f The prop
optionLabel
andoptionValue
is deprecated, useoptionFormat
instead in8.42.0
.
Name | Props | Description |
---|---|---|
default | The default slot holds the chip components and can contain HTML. |
Name | Type | Description |
---|---|---|
change | function(selectedIndex: number|array) | Emits when the chips is changed. |
NOTE: If you are not using
v-model
, you should listen for the chips using@change
and update themodel
prop.
Automatic
<ui-chips v-model="selectedIndex"></ui-chips>\n
Manual
<ui-chips\n :model="selectedIndex"\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-chips>\n
<ui-fab icon="favorite_border"></ui-fab>\n<ui-fab icon="favorite_border" mini></ui-fab>\n\n<ui-fab>\n <template #default="{ iconClass }">\n <svg-logo :class="iconClass"></svg-logo>\n </template>\n</ui-fab>\n<ui-fab mini>\n <template #default="{ iconClass }">\n <svg-logo :class="iconClass"></svg-logo>\n </template>\n</ui-fab>\n
'},JvQi:function(t,e){t.exports='$tt(style)
type TypographyStyle =\n | 'headline1'\n | 'headline2'\n | 'headline3'\n | 'headline4'\n | 'headline5'\n | 'headline6'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption'\n | 'button'\n | 'overline'\n | string;\n\ninterface VueInstance {\n $tt(style: TypographyStyle): string;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | \u6392\u7248\u6837\u5f0f\u540d\u6216\u81ea\u5b9a\u4e49\u6837\u5f0f class |
MDC Web \u9ed8\u8ba4\u63d0\u4f9b\u4e86 13 \u79cd\u6837\u5f0f\uff1a
Style | Description |
---|---|
headline1 | \u6807\u9898 1\uff0c\u5c4f\u5e55\u4e0a\u6700\u5927\u7684\u6587\u672c\uff0c\u4fdd\u7559\u7b80\u77ed\uff0c\u91cd\u8981\u7684\u6587\u672c\u6216\u6570\u5b57 |
headline2 | \u6807\u9898 2 |
headline3 | \u6807\u9898 3 |
headline4 | \u6807\u9898 4 |
headline5 | \u6807\u9898 5 |
headline6 | \u6807\u9898 6 |
subtitle1 | \u526f\u6807\u9898 1\uff0c\u6bd4\u6807\u9898\u5c0f\uff0c\u4fdd\u7559\u7ed9\u957f\u5ea6\u8f83\u77ed\u7684\u4e2d\u5f3a\u8c03\u6587\u5b57 |
subtitle2 | \u526f\u6807\u9898 2 |
body1 | \u4e3b\u4f53\u5185\u5bb9 1\uff0c\u7528\u4e8e\u957f\u7bc7\u5199\u4f5c |
body2 | \u4e3b\u4f53\u5185\u5bb9 2 |
caption | \u6ce8\u91ca\u6587\u5b57 |
button | \u6309\u94ae\u6587\u5b57 |
overline | \u8bf4\u660e\u6587\u5b57 |
\u4f60\u53ef\u4ee5\u5f88\u5bb9\u6613\u4e3a\u4f60\u7684\u9879\u76ee\u91cd\u5199\u6392\u7248\u6837\u5f0f\uff08CSS Classes\uff09
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $tt
New in 8.1.0
import { useTypography } from 'balm-ui';\n// \u6216\n// import { useTypography } from 'balm-ui/plugins/typography';\n\nconst $tt = useTypography();\nconsole.log($tt('custom-style-1'));\n
'},K3Ls:function(t,e){t.exports='<ui-grid><!-- the grid cell --></ui-grid>\n
Name | Type | Default | Description |
---|---|---|---|
fixedColumnWidth | boolean | false | Optional, specifies the grid should have fixed column width. |
position | string | '' | Optional, specifies the alignment of the whole grid. (Grid position: 'left' or 'right' ) |
Name | Props | Description |
---|---|---|
default | The default slot holds <ui-grid-cell> and can contain HTML. |
\u5728\u5f00\u59cb\u4e4b\u524d\uff0c\u60a8\u9700\u8981\u5148\u8bbe\u7f6e\u5f00\u53d1\u73af\u5883\u3002
\u5982\u679c\u60a8\u7684\u8ba1\u7b97\u673a\u4e0a\u5c1a\u672a\u5b89\u88c5 Node.js\xae and npm\uff0c\u8bf7\u5b89\u88c5\u5b83\u4eec\u3002
\u901a\u8fc7\u5728\u7ec8\u7aef/\u63a7\u5236\u53f0\u7a97\u53e3\u4e2d\u8fd0\u884c
node -v
\u548cnpm -v
\u6765\u9a8c\u8bc1\u60a8\u81f3\u5c11\u5728\u8fd0\u884c Node.js 10.13.0 \u6216\u66f4\u9ad8\u7248\u672c\u4ee5\u53ca npm 5.2.0 \u6216\u66f4\u9ad8\u7248\u672c\u3002\u8f83\u65e7\u7684\u7248\u672c\u53ef\u80fd\u4f1a\u4ea7\u751f\u9519\u8bef\uff0c\u6240\u4ee5\u63a8\u8350\u4f7f\u7528\u8f83\u65b0\u7684\u7248\u672c\u3002
\u5de5\u6b32\u5584\u5176\u4e8b\uff0c\u5fc5\u5148\u5229\u5176\u5668\u3002\u597d\u7684\u5de5\u5177\u53ef\u4ee5\u4f7f\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u66f4\u5feb\uff0c\u66f4\u5bb9\u6613\u7ef4\u62a4\u3002
Balm CLI \u662f\u4e00\u4e2a\u547d\u4ee4\u884c\u754c\u9762\u5de5\u5177\uff0c\u7528\u4e8e\u6784\u5efa BalmJS \u9879\u76ee\u3002
**Balm CLI**\uff08BalmJS \u5b98\u65b9\u63a8\u8350\uff09 \u6216 Vue CLI \u6216 \u5176\u4ed6\u5de5\u5177\u94fe \ud83d\ude80
\u4f7f\u7528 Balm CLI \u524d\u9996\u5148\u9700\u8981\u5168\u5c40\u5b89\u88c5 Balm Core \u548c Balm CLI\u3002
yarn global add balm-core balm-cli\n# OR\nnpm install -g balm-core balm-cli\n
\u26a0\ufe0f \u63d0\u793a\uff1a\u5982\u679c\u4f60\u4f7f\u7528 pnpm\uff0c\u8bf7\u4e3a BalmUI \u914d\u7f6e
.npmrc
\u6587\u4ef6
\u628a\u6240\u6709\u4f9d\u8d56\u90fd\u63d0\u5347\u5230 node_modules \u7684\u6839\u76ee\u5f55\uff1a
shamefully-hoist=true\n
\u6216\u8005\u53ea\u63d0\u5347\u5339\u914d\u7684\u4f9d\u8d56\u5305\uff1a
public-hoist-pattern[]="*balm*"\npublic-hoist-pattern[]="*deepmerge*"\npublic-hoist-pattern[]="*flatpickr*"\npublic-hoist-pattern[]="*material-components-web*"\npublic-hoist-pattern[]="@material*"\npublic-hoist-pattern[]="*quill*"\n
\u6253\u5f00\u4e00\u4e2a\u547d\u4ee4\u884c\u7a97\u53e3\u3002
\u6839\u636e\u4ee5\u4e0b\u547d\u4ee4\u751f\u6210\u4e00\u4e2a\u65b0\u9879\u76ee\uff1a
balm init vue#legacy my-project\ncd my-project # Go to the project directory\n
\u5b89\u88c5\u4f9d\u8d56
yarn\n# OR\nnpm install\n
\u5b89\u88c5\u5fc5\u987b\u8981\u7684 npm \u5305\uff0c\u8fd9\u91cc\u53ef\u80fd\u9700\u8981\u4e00\u4e9b\u65f6\u95f4\u3002
\uff08China Only\uff09\u5982\u679c\u201c\u7f51\u7edc\u201d\u4e0d\u79d1\u5b66\uff0c\u8bf7\u8bbe\u7f6e\u6dd8\u5b9d\u6e90
balm-ui
yarn add balm-ui@8\n# OR\nnpm install --save balm-ui@8\n
\u66f4\u65b0 balm.config.js
\u83b7\u53d6 Material Icons \u65e0\u9700\u4e0b\u8f7d\uff08\u6216\u8005\u4e0b\u8f7d\u540e\u89e3\u538b\u81f3 my-project/app/fonts
\uff09
const api = (mix) => {\n if (mix.env.isDev) {\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n
\u7f16\u8f91 my-project/config/balmrc.js
\uff0c\u914d\u7f6e\u4f7f\u7528 Dart Sass
module.exports = {\n styles: {\n extname: 'scss'\n }\n // Other Options...\n};\n
\u7f16\u8f91 my-project/app/styles/global/_vendor.scss
/* import BalmUI styles */\n@use 'balm-ui/dist/balm-ui';\n
\u63a8\u8350\u5728
/path/to/project-name/styles/_vendor.scss
\u4e2d\u4f7f\u7528 Sass\uff0c\u8fd9\u6837\u4f60\u5c06\u80fd\u4f7f\u7528\u5230\u66f4\u591a BalmUI \u7684\u9ad8\u7ea7\u7b80\u4fbf\u7684\u6837\u5f0f\u7ba1\u7406\u65b9\u6848\u3002
\u7f16\u8f91 my-project/app/scripts/main.js
import Vue from 'vue';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus'; // BalmJS Team Material Components\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n
\u7f16\u8f91 my-project/app/styles/global/_vendor.scss
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n
\u7f16\u8f91 my-project/app/scripts/main.js
import Vue from 'vue';\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\nVue.use(UiButton);\nVue.use($alert);\n
npm run dev\n
\u7f16\u8f91\u4e00\u4e2a vue \u7ec4\u4ef6\uff1amy-project/app/scripts/views/components/hello.vue
<template>\n <div class="hello">\n ...\n <!-- Add a test button -->\n <ui-button icon="add" @click="$alert('Hello BalmUI')">Click Me</ui-button>\n </div>\n</template>\n
npm run prod\n
vue create my-project\ncd my-project\n
balm-ui
yarn add balm-ui@8\n# OR\nnpm install --save balm-ui@8\n
\u7f16\u8f91 my-project/vue.config.js
module.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')\n // .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');\n // }\n};\n
\u7f16\u8f91 my-project/src/main.js
import Vue from 'vue';\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\nimport 'balm-ui-css';\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n
<script>
\u5f15\u7528<!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>Hello BalmUI</title>\n <link\n rel="stylesheet"\n href="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui.css"\n />\n </head>\n <body>\n <div id="app">\n <ui-button @click="$alert(message)" icon="add">SayHi</ui-button>\n </div>\n <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>\n <script src="https://cdn.jsdelivr.net/npm/balm-ui"></script>\n <script src="https://cdn.jsdelivr.net/npm/balm-ui/dist/balm-ui-plus.js"></script>\n <script>\n new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
\u6109\u5feb\u7684\u201c\u7801\u201d\u8d77\u6765 \ud83d\udc7b
'},"KHd+":function(t,e,o){"use strict";function d(t,e,o,d,n,l,a,i){var c,r="function"===typeof t?t.options:t;if(e&&(r.render=e,r.staticRenderFns=o,r._compiled=!0),d&&(r.functional=!0),l&&(r._scopeId="data-v-"+l),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),n&&n.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},r._ssrRegister=c):n&&(c=i?function(){n.call(this,(r.functional?this.parent:this).$root.$options.shadowRoot)}:n),c)if(r.functional){r._injectStyles=c;var s=r.render;r.render=function(t,e){return c.call(e),s(t,e)}}else{var u=r.beforeCreate;r.beforeCreate=u?[].concat(u,c):[c]}return{exports:t,options:r}}o.d(e,"a",(function(){return d}))},KMbe:function(t,e){t.exports='<div class="demo-container">\n <!-- App bar -->\n <ui-top-app-bar\n class="demo-app-bar"\n content-selector=".demo-content"\n :nav-icon="false"\n >\n Title\n </ui-top-app-bar>\n <!-- Content -->\n <div class="demo-content">\n <!-- Drawer -->\n <ui-drawer viewport-height>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>\n Item {{ 0 }}\n </ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- App content -->\n <div class="demo-app-content">\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </div>\n </div>\n</div>\n
.demo-app-content {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n
'},KPZJ:function(t,e){t.exports='<div class="demo-container">\n <!-- Drawer -->\n <ui-drawer type="modal" nav-id="demo-menu">\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>Item {{ 0 }}</ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- Content -->\n <div class="demo-content">\n <!-- App bar -->\n <ui-top-app-bar\n fixed\n class="demo-app-bar"\n content-selector=".demo-app-content"\n nav-id="demo-menu"\n >\n Title\n </ui-top-app-bar>\n <!-- App content -->\n <div class="demo-app-content">\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </div>\n </div>\n</div>\n
'},KVc9:function(t,e){t.exports='<ui-tree></ui-tree>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
selectedNodes (v-model ) | string, number, array | '' | \u9009\u4e2d\u7684\u6811\u8282\u70b9\u952e\u503c | |
filterParentNode | boolean | false | \u9009\u4e2d\u7684\u6811\u8282\u70b9\u952e\u503c\u6392\u9664\u6240\u6709\u7236\u8282\u70b9 | 8.60.0 |
data | array | [] | \u6e90\u6570\u636e | |
dataFormat | object | {} | \u5b9a\u4e49\u6e90\u6570\u636e\u7684\u683c\u5f0f | |
maxLevel | number | 0 | \u8bbe\u7f6e\u52a0\u8f7d\u6811\u8282\u70b9\u7684\u6700\u5927\u5c42\u7ea7 | |
multiple | boolean | false | \u662f\u5426\u652f\u6301\u9009\u5b9a\u7684\u591a\u4e2a\u6811\u8282\u70b9 | |
singleChecked | boolean | false | \u542f\u7528\u6811\u8282\u70b9\u5355\u8282\u70b9\u9009\u62e9\u3002\u4ec5\u9488\u5bf9 multiple \u6811\u8282\u70b9\u6709\u6548\u3002 | 8.42.0 |
loadData | function | null | \u542f\u7528\u5f02\u6b65\u52a0\u8f7d\u6570\u636e | |
autoExpandParent | boolean | false | \u662f\u5426\u81ea\u52a8\u5c55\u5f00\u6839\u7236\u7ea7\u6811\u8282\u70b9 | 8.25.0 |
defaultExpandedKeys | array | [] | \u6307\u5b9a\u9ed8\u8ba4\u5c55\u5f00\u7684\u6811\u8282\u70b9\u7684\u8282\u70b9\u503c | 8.25.0 |
\u9ed8\u8ba4\u6570\u636e\u683c\u5f0f
{\n label: 'label',\n value: 'value', // nodeKey\n children: 'children',\n hasChildren: 'hasChildren',\n isLeaf: 'isLeaf',\n disabled: 'disabled', // New in 8.43.0\n parentKey: 'parentKey' // New in 8.67.0\n}\n
\u5f02\u6b65\u52a0\u8f7d\u6570\u636e
type TreeNodes = { [key: string]: any }[];\n\ninterface Tree {\n loadData(nodeKey: string | number): TreeNodes;\n}\n
\u64cd\u4f5c\u6811\u8282\u70b9 (New in 8.40.0)
<ui-tree ref="tree"></ui-tree>\n
this.$refs.tree.updateNode(type: 'create' | 'update' | 'delete', parentKey: string | number, nodeData: object)\n
Name | Props | Description | Version |
---|---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6811\u9876\u90e8\u680f\u5185\u5bb9\u53ca HTML | ||
expand-more-icon | \u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807 | ||
expand-less-icon | \u81ea\u5b9a\u4e49\u6536\u8d77\u56fe\u6807 | ||
before | data | before \u63d2\u69fd\u5305\u542b\u6811\u8282\u70b9\u7684\u81ea\u5b9a\u4e49\u4fe1\u606f\u53ca HTML | 8.41.0 |
title | data | title \u63d2\u69fd\u5305\u542b\u6811\u8282\u70b9\u7684\u6807\u9898\u53ca HTML | |
after | data | after \u63d2\u69fd\u5305\u542b\u6811\u8282\u70b9\u7684\u81ea\u5b9a\u4e49\u52a8\u4f5c\u53ca HTML |
Rename slot
toaction
after
in8.41.0
Name | Type | Description | Version |
---|---|---|---|
change | function(selectedNodes: string | array, selectedEvent: object) | \u6811\u8282\u70b9\u503c\u53d8\u5316\u65f6\u89e6\u53d1 | |
selected | function(selectedNodesData: string | array) | \u6811\u8282\u70b9\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 | 8.42.0 |
8.43.0 \u4e2d
@change
\u4e8b\u4ef6\u65b0\u589eselectedEvent
\u53c2\u6570
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6811\u8282\u70b9\u503c\u5e76\u66f4\u65b0selectedNodes
\u5c5e\u6027
\u81ea\u52a8
<ui-tree v-model="selectedValue"></ui-tree>\n
\u624b\u52a8
<ui-tree\n :selected-nodes="selectedValue"\n @change="$balmUI.onChange('selectedValue', $event)"\n></ui-tree>\n
<ui-form>\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field>\n <label></label>\n <!-- awesome form item 1 -->\n <ui-form-field></ui-form-field>\n </ui-form-field>\n <ui-form-field>\n <label></label>\n <div :class="subitemClass">\n <!-- awesome form item 2 -->\n <ui-form-field></ui-form-field>\n <ui-form-field></ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button></ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
<ui-form>
Types
0
: 'horizontal'
1
: 'vertical'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Form types. | |
itemMarginBottom | number | 0 | Sets the form items margin bottom. | 8.0.0 |
nowrap | boolean | false | Force the <label> text to stay on a single line and ellipse the overflow text. | |
labelTopAligned | boolean | false | Styles the form item with a top vertical-aligned label. | |
labelRightAligned | boolean | false | Styles the form item with a right text-aligned label. | |
labelTopRightAligned | boolean | false | Styles the form item with a top vertical-aligned and right text-aligned label. | 8.18.0 |
labelWidth | number | 0 | Sets the horizontal form items' label width. | 8.0.0 |
labelMarginRight | number | 0 | Sets the horizontal form items' label margin right. | 8.0.0 |
labelMarginBottom | number | 0 | Sets the vertical form items' label margin bottom. | 8.0.0 |
actionAlign | string | 'left' | Sets the form actions align. | 8.18.0 |
labelTopAligned
,labelRightAligned
andlabelTopRightAligned
are applicable only forhorizontal
type form.
interface Form {\n actionAlign: 'left' | 'center' | 'right';\n}\n
Name | Props | Description |
---|---|---|
default | itemClass , subitemClass , actionClass | The default slot holds the form items and can contain HTML. |
'},KbIh:function(t,e,o){"use strict";o.d(e,"b",(function(){return n})),o.d(e,"d",(function(){return l})),o.d(e,"c",(function(){return a})),o.d(e,"a",(function(){return i}));const d=`${o("l0Zm").c}/images/demo/emoji`,n=[[{header:[!1,1,2,3,4,5,6]},{font:[]},{size:[]},{lineheight:[]}],["bold","italic","underline",{color:[]},{background:[]}],[{align:""},{align:"center"},{align:"right"},{align:"justify"}],[{list:"ordered"},{list:"bullet"},{indent:"+1"},{indent:"-1"},"blockquote","emoji"],["link","image","video"],["strike",{script:"super"},{script:"sub"},"divider"],["clean","undo","redo"],["preview"]],l={header:"Headline",font:"Font Famliy",size:"Font Size",lineheight:"Line Height",bold:"Bold",italic:"Italic",underline:"Underline",color:"Text Color",background:"Background Color",align:{default:"Left Align",center:"Center Align",right:"Right Align",justify:"Justify Align"},list:{ordered:"Ordered List",bullet:"Bullet List"},indent:{"+1":"Increase Indent","-1":"Decrease Indent"},blockquote:"Blockquote",emoji:"Emoji"},a={font:["Arial","Arial Black","Comic Sans MS","Courier New","Tahoma","Georgia","Helvetica","Segoe UI","Impact","Times New Roman","Verdana"],size:["8px","9px","10px","11px","12px","13px","14px","16px","18px","24px","36px","48px","60px","72px","96px"],lineheight:["1","1.2","1.5","1.6","1.8","2","2.4","2.8","3","4","5"]},i=[{type:"image",title:"Default",content:[{name:"oo",alt:"\u574f\u7b11",src:`${d}/p_huaixiao.png`},{name:"xx",alt:"\u8214\u5c4f",src:`${d}/p_tian.png`}]},{type:"emoji",title:"Emoji",content:[{name:"smile",value:"\ud83d\ude00"},{name:"cry",value:"\ud83d\ude06"}]},{type:"image",title:"Custom",content:[{name:"yy",alt:"\u795e\u517d",src:`${d}/g_shenshou.gif`},{name:"zz",alt:"\u6d6e\u4e91",src:`${d}/g_fuyun.gif`}]}]},KiVv:function(t,e){t.exports='
itemClass
andsubitemClass
is new in 8.18.0
'},KoAI:function(t,e){t.exports='New in 8.34.0
<ui-icon\n v-tooltip="'Share your content via social media'"\n aria-describedby="tooltip-demo-1"\n>\n share\n</ui-icon>\n
'},KvBT:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-file>` props with default value.\n UiFile: {\n // some props\n }\n});\n
'},KxBV:function(t,e){t.exports='Small status descriptors for UI components.
'},KyaV:function(t,e){t.exports='New in 6.4.1
<ui-tabs :items="tabItems"></ui-tabs>\n
<ui-tab-bar>\n <ui-tab>\n Tab Text\n <template #indicator>\n <ui-tab-indicator></ui-tab-indicator>\n </template>\n </ui-tab>\n</ui-tab-bar>\n\n<ui-panels>\n <ui-panel></ui-panel>\n</ui-panels>\n
Component | Description |
---|---|
<ui-tabs> | The shorthand for <ui-tab-bar> + <ui-tab> . |
<ui-tab-bar> | Tab items container. |
<ui-tab> | Tab item. |
<ui-panels> | Tab panels container. |
<ui-panel> | Tab panel. |
<ui-tab-indicator> | Contains the custom tab indicator content. |
<ui-tab-scroller> | Contains the custom tab scroller content. |
New in 8.1.0
A simpler state management pattern.
'},L3xh:function(t,e){t.exports='@use '@material/card' as card-variables with (\n $action-icon-color: rgba(\n theme-color.prop-value(on-surface),\n theme-color.text-emphasis(medium)\n ),\n $outline-color: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 12%\n ),\n $outline-width: 1px,\n $shape-radius: medium\n);\n
@use 'balm-ui/components/card' with (\n $text-wrapper-padding: 16px\n);\n
'},L4Av:function(t,e){t.exports='<ui-collapse></ui-collapse>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
expanded (v-model ) | boolean | false | \u5c55\u5f00\u72b6\u6001 | |
withIcon | boolean | false | \u542f\u7528\u9ed8\u8ba4\u56fe\u6807 | |
iconEndAligned | boolean | false | \u56fe\u6807\u540e\u7f6e | 8.39.0 |
ripple | boolean, number | false | \u8bbe\u7f6e\u6c34\u6ce2\u7eb9\u6548\u679c |
ripple
\u503c\uff1atrue
: \u9ed8\u8ba4\u989c\u82721
: \u4e3b\u82722
: \u8f85\u8272Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6298\u53e0\u9762\u677f\u5185\u5bb9\u53ca HTML | |
expand-more-icon | \u81ea\u5b9a\u4e49\u5c55\u5f00\u56fe\u6807 | |
expand-less-icon | \u81ea\u5b9a\u4e49\u6536\u8d77\u56fe\u6807 |
<ui-button @click="$balmUI.onChange('message', 'Hello BalmUI')">Show message</ui-button>\n<ui-button @click="$balmUI.onChange('message', '')">Clear</ui-button>\n\n<p>{{ message }}</p>\n
export default {\n data() {\n return {\n message: 'No message'\n };\n }\n};\n
'},LJxH:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUI from 'balm-ui';\nimport myStore from './store';\n\nVue.use(BalmUI, {\n $store: myStore\n});\n
'},LREm:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/progress/progress';\n
import Vue from 'vue';\nimport UiProgress from 'balm-ui/components/progress';\n\n// Optional. Overwrite `<ui-progress>` props with default value.\nVue.use(UiProgress, {\n // some props\n});\n
'},LZfM:function(t,e){t.exports='\u6570\u636e\u8868\u663e\u793a\u884c\u548c\u5217\u4e4b\u95f4\u7684\u6570\u636e\u96c6\u3002
'},LiDr:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},Lihi:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-card>` props with default value.\n UiCard: {\n // some props\n },\n // Optional. Overwrite `<ui-card-media>` props with default value.\n UiCardMedia: {\n // some props\n },\n // Optional. Overwrite `<ui-card-actions>` props with default value.\n UiCardActions: {\n // some props\n }\n});\n
'},Lkt4:function(t,e){t.exports='\u6807\u7b7e\u9875\u8de8\u4e0d\u540c\u7684\u5c4f\u5e55\uff0c\u6570\u636e\u96c6\u548c\u5176\u4ed6\u4ea4\u4e92\u6765\u7ec4\u7ec7\u5185\u5bb9\u3002
'},Lr2C:function(t,e){t.exports='@use '@material/icon-button' with (\n $icon-size: 24px,\n\n $size: 48px,\n $minimum-height: 28px,\n $maximum-height: $size,\n $density-scale: variables.$default-scale,\n $density-config: (\n size: (\n default: $size,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n )\n);\n
'},Lrjv:function(t,e){t.exports='Material icons are delightful, beautifully crafted symbols for common actions and items.
'},M42H:function(t,e){t.exports='\u26a0\ufe0f IE11 only supports
filled
mode
Switches toggle the state of a single item on or off. They are the preferred way to adjust settings on mobile.
'},M4qZ:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-menu>` props with default value.\n UiMenu: {\n // some props\n }\n});\n
'},MDzQ:function(t,e){t.exports='<ui-list-group>\n <ui-list-group-subheader>1. Single-line list</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-text-content></ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>2. Two-line list</ui-list-group-subheader>\n <ui-list type="twoLine">\n <ui-item>\n <ui-item-text-content>\n <ui-item-text1></ui-item-text1>\n <ui-item-text2></ui-item-text2>\n </ui-item-text-content>\n </ui-item>\n </ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader>3. Rich List</ui-list-group-subheader>\n <ui-list>\n <ui-item>\n <ui-item-first-content></ui-item-first-content>\n <ui-item-text-content></ui-item-text-content>\n <ui-item-last-content></ui-item-last-content>\n </ui-item>\n </ui-list>\n</ui-list-group>\n
<ui-nav>\n <ui-nav-item active>Activated item</ui-nav-item>\n <ui-nav-item>Unactivated item</ui-nav-item>\n</ui-nav>\n
Component | Description |
---|---|
<ui-list> /<ui-nav> | Mandatory, for the list element. |
<ui-item> /<ui-nav-item> | Mandatory, for the list item element. |
<ui-item-text-content> | Mandatory. Wrapper for list item text content (displayed as middle column of the list item). |
<ui-item-text1> | Optional, primary text for the list item. Should be the child of <ui-item-text-content> . |
<ui-item-text2> | Optional, secondary text for the list item. Displayed below the primary text. Should be the child of <ui-item-text-content> . |
<ui-item-first-content> | Optional, the first tile in the row (in LTR languages, the first column of the list item). Typically an icon or image. |
<ui-item-last-content> | Optional, the last tile in the row (in LTR languages, the last column of the list item). Typically small text, icon. or image. |
<ui-list-group> | Optional, wrapper around two or more <ui-list> elements to be grouped together. |
<ui-list-group-subheader> | Optional, heading text displayed above each list in a group. |
<ui-list-divider> | Optional, for list divider element. |
<ui-item-divider> | Optional, for list item divider element. |
@use 'balm-ui/components/collapse' with (\n $collapse-margin-bottom: 0,\n $header-margin-bottom: 0,\n $title-padding: 8px 0,\n $icon-width: 24px,\n $icon-margin-right: 8px,\n $content-padding: 8px 0\n);\n
'},MOmG:function(t,e){t.exports='<div v-copy></div>\n
interface Copy {\n text: string;\n success: Function;\n error?: Function;\n}\n
'},MWjS:function(t,e){t.exports='<ui-segmented-buttons\n v-model="checkedValue"\n :items="items"\n></ui-segmented-buttons>\n
const items = [\n {\n icon: 'favorite'\n },\n {\n text: 'Sample Text'\n },\n {\n icon: 'favorite',\n text: 'Sample Text'\n }\n];\n\nexport default {\n data() {\n return {\n items,\n checkedValue: []\n };\n }\n};\n
'},MXKf:function(t,e){t.exports='<ui-collapse v-for="i in 3" :key="i" with-icon ripple>\n <template #toggle>\n <div>Heading {{ i }}</div>\n </template>\n <div>Content {{ i }}</div>\n</ui-collapse>\n
'},MiMs:function(t,e){t.exports='<ui-collapse></ui-collapse>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
expanded (v-model ) | boolean | false | Default expanded state. | |
withIcon | boolean | false | Default icons. | |
iconEndAligned | boolean | false | Styles icon end aligned. | 8.39.0 |
ripple | boolean, number | false | Sets the ripple color. |
ripple
value:true
: default color1
: primary color2
: secondary colorName | Props | Description |
---|---|---|
default | The default slot holds the collapse content and can contain HTML. | |
expand-more-icon | Custom expand more icon. | |
expand-less-icon | Custom expand less icon. |
$confirm(message)
$confirm(options)
interface VueInstance {\n $confirm(options: string | object): Promise<boolean>;\n}\n
Option | Type | Default | Description |
---|---|---|---|
className | string | '' | \u81ea\u5b9a\u4e49\u786e\u8ba4\u6846\u7684 class |
title | string | '' | \u8bbe\u7f6e\u786e\u8ba4\u6846\u7684\u6807\u9898 |
state | string | '' | \u786e\u8ba4\u6846\u72b6\u6001\u56fe\u6807\u7c7b\u578b |
stateOutlined | boolean | false | \u663e\u793a\u8f6e\u5ed3\u72b6\u6001\u56fe\u6807 |
message | string | '' | \u8bbe\u7f6e\u786e\u8ba4\u6846\u7684\u5185\u5bb9 |
raw | boolean | false | \u6e32\u67d3 HTML |
acceptText | string | 'OK' | \u786e\u5b9a\u6309\u94ae\u6587\u672c |
cancelText | string | 'Cancel' | \u53d6\u6d88\u6309\u94ae\u6587\u672c |
callback | function | false | \u70b9\u51fb\u6309\u94ae\u540e\u7684\u4e8b\u4ef6\u5904\u7406 |
interface ConfirmDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
\u7528\u6cd5 1
$confirm({\n message,\n callback(result) {\n // ...\n }\n});\n
\u7528\u6cd5 2\uff08\u63a8\u8350\uff09
$confirm(message).then((result) => {\n // ...\n});\n
result
\u662f\u4e00\u4e2a\u5e03\u5c14\u503c\uff0c\u6307\u793a\u662f\u5426\u9009\u62e9\u4e86\u201c\u786e\u5b9a\u201d\u6216\u201c\u53d6\u6d88\u201d\uff08true
\u8868\u793a\u786e\u5b9a\uff09
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $confirm
New in 8.1.0
import { useConfirm } from 'balm-ui';\n// \u6216\n// import { useConfirm } from 'balm-ui/plugins/confirm';\n\nconst $confirm = useConfirm();\n$confirm('Hello BalmUI');\n
'},Ms13:function(t,e){t.exports='$grid
interface VueInstance {\n set: BalmUIGrid;\n}\n
type GridProperty = 'margin' | 'gutter' | 'column-width';\ntype GridSize = 'desktop' | 'tablet' | 'phone';\n\ninterface BalmUIGrid {\n set(property: GridProperty, size: GridSize, value: string): void;\n}\n
NOTE: If
balm-ui < 8.27.0
, please use$setGrid
instead of$grid.set
.
Param | Type | Default | Description |
---|---|---|---|
property | string | '' | Grid custom property: margin , gutter or column-width . |
size | string | '' | The target platform: desktop , tablet or phone . |
value | string | '' | Grid custom value. |
margin
: the size of the grid margin.gutter
: the size of the gutter between cells.column-width
: the width of the column within the grid.$grid
without .vue
componentNew in 8.1.0
import { useGrid } from 'balm-ui';\n// OR\n// import { useGrid } from 'balm-ui/plugins/grid';\n\nconst $grid = useGrid();\n
'},"MzO+":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/segmented-button/segmented-button';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiSegmentedButtonComponents from 'balm-ui/components/segmented-button';\n\nVue.use(UiSegmentedButtonComponents, {\n // Optional. Overwrite `<ui-segmented-buttons>` props with default value.\n UiSegmentedButtons: {\n // some props\n }\n});\n
'},"N+FQ":function(t,e){t.exports='\u4fa7\u8fb9\u5bfc\u822a\u680f\u63d0\u4f9b\u5bf9\u5e94\u7528\u7a0b\u5e8f\u4e2d\u76ee\u6807\u4f4d\u7f6e\u7684\u8bbf\u95ee\u3002
'},NBsI:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-editor>` props with default value.\n UiEditor: {\n // some props\n }\n});\n
'},NDOf:function(t,e){t.exports='<ui-textfield v-model="value">Label floating above</ui-textfield>\n
export default {\n data() {\n return {\n value: 'Pre-filled value'\n };\n }\n};\n
'},NEef:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-segmented-buttons>` props with default value.\n UiSegmentedButtons: {\n // some props\n }\n});\n
'},NEwY:function(t,e){t.exports='<ui-button @click="showMessage">Show message</ui-button>\n<ui-button @click="clearMessage">Clear</ui-button>\n\n<p>{{ message }}</p>\n
export default {\n data() {\n return {\n message: 'No message'\n };\n },\n methods: {\n showMessage() {\n this.message = 'Hello BalmUI';\n },\n clearMessage() {\n this.message = '';\n }\n }\n};\n
'},NYHy:function(t,e){t.exports='<ui-tab-bar><!-- the tab components --></ui-tab-bar>\n
<ui-tab-bar>
& <ui-tabs>
common PropsName | Type | Default | Description |
---|---|---|---|
active (v-model ) | number | 0 | Mandatory. |
<ui-tab-bar>
SlotsName | Slots | Description |
---|---|---|
default | The default slot holds the tab scroller and tab components and can contain HTML. |
<ui-tab-bar>
& <ui-tabs>
common EventsName | Type | Description |
---|---|---|
change | function(activeIndex: number) | Emits when the tab is changed. |
NOTE: If you are not using
v-model
, you should listen for the tabs using@change
and update theactive
prop.
Automatic
<ui-tab-bar v-model="activeIndex"></ui-tab-bar>\n<!-- OR -->\n<ui-tabs v-model="activeIndex"></ui-tabs>\n
Manual
<ui-tab-bar\n :active="activeIndex"\n @change="$balmUI.onChange('activeIndex', $event)"\n></ui-tab-bar>\n<!-- OR -->\n<ui-tabs\n :active="activeIndex"\n @change="$balmUI.onChange('activeIndex', $event)"\n></ui-tabs>\n
<ui-button raised @click="openDialog">Open dialog</ui-button>\n\n<ui-dialog v-model="open">\n <ui-dialog-content>\n Dialog content\n </ui-dialog-content>\n <ui-dialog-actions>\n <ui-button @click="closeDialog">Close dialog</ui-button>\n </ui-dialog-actions>\n</ui-dialog>\n
export default {\n data() {\n return {\n open: false\n };\n },\n methods: {\n openDialog() {\n this.open = true;\n },\n closeDialog() {\n this.open = false;\n }\n }\n};\n
'},"Np/8":function(t,e){t.exports='<div class="demo-theme-color-section_row">\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Text on background</legend>\n\n <div class="demo-theme-color-group">\n <div :class="['demo-theme-text-row', $theme.getThemeClass('background')]">\n <span\n :class="['demo-theme-text-style', $theme.getTextClass('primary')]"\n >\n Primary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClass('secondary')]"\n >\n Secondary\n </span>\n <span :class="['demo-theme-text-style', $theme.getTextClass('hint')]">\n Hint\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClass('disabled')]"\n >\n Disabled\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClass('icon'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n</div>\n
'},NpoD:function(t,e){t.exports='import Vue from 'vue';\nimport vLongpress from 'balm-ui/directives/longpress';\n\nVue.directive(vLongpress.name, vLongpress);\n
'},Nt5s:function(t,e){t.exports='<ui-bottom-sheet></ui-bottom-sheet>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | Mandatory. |
Name | Props | Description |
---|---|---|
default | The default slot holds the content for the bottom sheet. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the bottom sheet is hidden. |
NOTE: If you are not using
v-model
, you should listen for the bottom sheet using@change
and update theopen
prop.
Automatic
<ui-bottom-sheet v-model="open"></ui-bottom-sheet>\n
Manual
<ui-bottom-sheet\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-bottom-sheet>\n
<ui-autocomplete\n v-model="keywords"\n :source="source"\n placeholder="Try to type"\n></ui-autocomplete>\n
export default {\n data() {\n return {\n keywords: '',\n source: [\n 'ActionScript',\n 'AppleScript',\n 'Asp',\n 'BASIC',\n 'C',\n 'C++',\n 'Clojure',\n 'COBOL',\n 'ColdFusion',\n 'Erlang',\n 'Fortran',\n 'Groovy',\n 'Haskell',\n 'Java',\n 'JavaScript',\n 'Lisp',\n 'Perl',\n 'PHP',\n 'Python',\n 'Ruby',\n 'Scala',\n 'Scheme'\n ]\n };\n }\n};\n
'},NwEw:function(t,e){t.exports='<ui-pagination></ui-pagination>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
page | number | 1 | Current page number. | |
total | number | 0 | The total number of data items. | |
pageSpan | number, boolean | 3 | Display the first N pages of the current page. (MIN VALUE: 3 ) | |
showTotal | boolean | false | Display total info. | |
pageSize | number, array | 10 | The number of data items per page. | |
pageSizeText | string, array | 'Rows per page' | The page size before/after text. | |
ofText | string | 'of' | The page total of text. | 8.47.0 |
unitText | string | '' | The page total unit text. | 8.56.0 |
showJumper | boolean | false | Determine whether you can jump to pages directly. | |
jumperText | string, array | 'Goto' | The jumper before/after text. | |
jumperButtonOutlined | boolean | false | Styles an outlined jumper button. | 8.20.0 |
jumperButtonText | string | '' | The jumper button text. | |
position | string | '' | The pagination position. | |
mini | boolean | false | Whether to use simple mode. |
interface Pagination {\n position: 'left' | 'center' | 'right';\n}\n
Name | Props | Description | Version |
---|---|---|---|
default | currentMinRow , currentMaxRow | The custom page size area. | 8.11.0 |
first | The custom first button icon. | ||
prev | The custom previous button icon. | ||
next | The custom next button icon. | ||
last | The custom last button icon. |
Name | Type | Description |
---|---|---|
change | function(page: number) | Emits when the pagination page is changed. |
NOTE: If you are not using
v-model
, you should listen for the pagination using@change
and update thepage
prop.
Automatic
<ui-pagination v-model="page"></ui-pagination>\n
Manual
<ui-pagination\n :page="page"\n @change="$balmUI.onChange('page', $event)"\n></ui-pagination>\n
<ui-tree></ui-tree>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
selectedNodes (v-model ) | string, number, array | '' | Selected node keys. | |
filterParentNode | boolean | false | Selected node keys excludes all parent nodes. | 8.60.0 |
data | array | [] | The tree data source. | |
dataFormat | object | {} | Defines the tree data source format. | |
maxLevel | number | 0 | Set max level for tree nodes. | |
multiple | boolean | false | Whether to support selected multiple tree nodes. | |
singleChecked | boolean | false | Set single checked. Applicable only for the multiple tree. | 8.42.0 |
loadData | function | null | Load data asynchronously. | |
autoExpandParent | boolean | false | Whether to automatically expand root parent(s) treeNode. | 8.25.0 |
defaultExpandedKeys | array | [] | Specify the node keys of the default expanded treeNodes. | 8.25.0 |
Default data format
{\n label: 'label',\n value: 'value', // nodeKey\n children: 'children',\n hasChildren: 'hasChildren',\n isLeaf: 'isLeaf',\n disabled: 'disabled', // New in 8.43.0\n parentKey: 'parentKey' // New in 8.67.0\n}\n
Load data asynchronously
type TreeNodes = { [key: string]: any }[];\n\ninterface Tree {\n loadData(nodeKey: string | number): TreeNodes;\n}\n
Tree node operations (New in 8.40.0)
<ui-tree ref="tree"></ui-tree>\n
this.$refs.tree.updateNode(type: 'create' | 'update' | 'delete', parentKey: string | number, nodeData: object)\n
Name | Props | Description | Version |
---|---|---|---|
default | The default slot holds the tree top bar content and can contain HTML. | ||
expand-more-icon | The custom expand more icon. | ||
expand-less-icon | The custom expand less icon. | ||
before | data | The before slot holds the tree node custom info and can contain HTML. | 8.41.0 |
title | data | The title slot holds the tree node title and can contain HTML. | |
after | data | The after slot holds the tree node custom actions and can contain HTML. |
Rename slot
toaction
after
in8.41.0
Name | Type | Description | Version |
---|---|---|---|
change | function(selectedNodes: string | array, selectedEvent: object) | Emits when tree node is changed. | |
selected | function(selectedNodesData: string | array) | Emits when tree node is selected. | 8.42.0 |
The
selectedEvent
parameter of@change
event is new in 8.43.0
NOTE: If you are not using
v-model
, you should listen for the tree using@change
and update theselectedNodes
prop.
Automatic
<ui-tree v-model="selectedValue"></ui-tree>\n
Manual
<ui-tree\n :selected-nodes="selectedValue"\n @change="$balmUI.onChange('selectedValue', $event)"\n></ui-tree>\n
Tooltips display informative text when users hover over, focus on, or tap an element.
'},OJ0n:function(t,e){t.exports='New in 8.0.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n $theme: {\n // (Optional) New in 8.38.0, See ThemeColor type in APIs.\n }\n});\n
'},OSKY:function(t,e){t.exports='<ui-table\n v-model="selectedRows"\n fullwidth\n :data="data"\n :thead="thead"\n :tbody="tbody"\n :tfoot="tfoot"\n row-checkbox\n selected-key="id"\n>\n <template #th-dessert>\n Dessert\n <ui-icon v-tooltip="'100g serving'" aria-describedby="th-cell-1">\n error_outline\n </ui-icon>\n </template>\n <template #dessert="{ data }">\n <div class="dessert">{{ data.dessert }}</div>\n </template>\n <template #actions="{ data }">\n <ui-icon @click="show(data)">description</ui-icon>\n <ui-icon @click="show(data)">edit</ui-icon>\n <ui-icon @click="show(data)">delete</ui-icon>\n </template>\n\n <ui-pagination\n v-model="page"\n :total="total"\n show-total\n @change="onPage"\n ></ui-pagination>\n</ui-table>\n
export default {\n data() {\n return {\n data: [],\n thead: [\n {\n value: 'ID',\n sort: 'asc',\n columnId: 'id'\n },\n {\n slot: 'th-dessert',\n class: 'gg',\n sort: 'none',\n columnId: 'dessert'\n },\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)',\n 'Actions',\n ],\n tbody: [\n 'id',\n {\n slot: 'dessert'\n },\n {\n field: 'calories',\n numeric: true,\n class: 'test'\n },\n {\n field: 'fat',\n fn: data => {\n return data.fat.toFixed(1);\n }\n },\n 'carbs',\n {\n field: 'protein',\n class: data => {\n return data.protein > 5 ? 'red' : 'green';\n }\n },\n {\n slot: 'actions'\n }\n ],\n tfoot: [\n {\n field: 'id',\n fnName: 'count'\n },\n null,\n {\n field: 'calories',\n fnName: 'sum',\n align: 'right',\n class: 'test'\n },\n {\n field: 'fat',\n fnName: 'avg'\n },\n {\n field: 'carbs',\n fnName: 'max'\n },\n {\n field: 'protein',\n fnName: 'min'\n }\n ],\n selectedRows: [1, 2, 4],\n page: 1,\n total: 12\n };\n },\n created() {\n let { data } = await this.$http.get('/api/getData');\n this.data = data;\n },\n methods: {\n show(data) {\n console.log(data);\n },\n onPage(page) {\n // your code\n }\n }\n};\n
'},OuUj:function(t,e){t.exports='$toast(message)
$toast(options)
type ToastMessage = string;\n\ninterface ToastOptions {\n className?: string;\n timeoutMs?: number;\n message: ToastMessage;\n position?: 'bottom' | 'center' | 'top';\n}\n\ninterface VueInstance {\n $toast(options: ToastMessage | ToastOptions): Promise<void>;\n}\n
Option | Type | Default | Description | Version |
---|---|---|---|---|
className | string | '' | \u81ea\u5b9a\u4e49\u77ed\u6d88\u606f\u63d0\u793a\u7684 class | |
timeoutMs | number | 2750 | \u81ea\u52a8\u5173\u95ed\u7684\u8d85\u65f6\u65f6\u95f4\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u503c\u5fc5\u987b\u5728 2000 \u548c 3500 \u4e4b\u95f4\uff0c\u5426\u5219\u4f1a\u5f15\u53d1\u9519\u8bef\u3002 | |
message | string | '' | \u77ed\u6d88\u606f\u6587\u672c | |
position | string | 'bottom' | \u77ed\u6d88\u606f\u63d0\u793a\u7684\u4f4d\u7f6e | 8.30.0 |
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $toast
New in 8.1.0
import { useToast } from 'balm-ui';\n// \u6216\n// import { useToast } from 'balm-ui/plugins/toast';\n\nconst $toast = useToast();\n$toast('Hello BalmUI');\n
'},OvnO:function(t,e){t.exports='<ui-menuitem><!-- the menu item child components --></ui-menuitem>\n
Name | Type | Default | Description |
---|---|---|---|
nested | boolean | false | Used to wrap a group of <ui-menuitem> that will represent a selection group. |
item | object | {} | A menu item. |
value | string | null | The menu selected value. |
disabled | boolean | false | To disable an item. |
selected | boolean | false | Used to indicate which element in an item group is selected. |
The keys of a menu item object:
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface MenuItem {\n item: Item;\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the menu item icon component or label text and can contain HTML. |
Child components:
<ui-menuitem-text>
<ui-menuitem-icon>
\u56fe\u6807\u6309\u94ae\uff08\u5207\u6362\u6309\u94ae\uff09\u4f7f\u7528\u6237\u53ea\u9700\u5355\u51fb\u4e00\u4e0b\u5373\u53ef\u6267\u884c\u64cd\u4f5c\u5e76\u505a\u51fa\u9009\u62e9\u3002
'},P3jt:function(t,e){t.exports='<ui-select><!-- the label text --></ui-select>\n
<ui-select>
Types
0
: 'filled'
1
: 'outlined'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Enhanced select types. | |
outlined | boolean | false | Styles the select as an outlined select. (Equivalent to type=1 ) | |
model (v-model ) | string, number | '' | The value of the currently selected option. | |
options | array | [] | An array of options to show to the user. | |
optionFormat | object | { label: 'label', value: 'value' } | Defines the option data format. | 8.42.0 |
defaultLabel | string | '' | Placeholder item label. | |
defaultValue | string, number | '' | Placeholder item value. | |
label | string | '' | A text caption or description for the select. | |
disabled | boolean | false | Styles the select as disabled. | |
required | boolean | false | Styles the select as required. | |
fullwidth | boolean | false | Optional. Styles the select as full width select. | |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. | |
withLeadingIcon | boolean | false | Styles the select as a select with a leading icon. | |
helperTextId | string | null | Required for the id attribute of the <ui-select-helper> . | |
inside | boolean | false | Styles for the overflow inside component (e.g. in <ui-dialog> ) | 8.53.0 |
NOTE:
withLeadingIcon
is only used for (non<ui-select-icon>
) custom leading icon, and generally do not need to be configured.
\u26a0\ufe0f The prop
optionLabel
andoptionValue
is deprecated, useoptionFormat
instead in8.42.0
.
Name | Props | Description | Version |
---|---|---|---|
default | The default slot holds the label for the select. | ||
icon | iconClass | The icon slot holds a custom leading icon. | |
dropdown-icon | Custom dropdown icon. | 6.9.0 |
Name | Type | Description |
---|---|---|
change | function(value: string|number) | Emits when the select value is changed. |
selected | function(option: object) | Emits when an option item is selected. |
NOTE: If you are not using
v-model
, you should listen for the select using@change
and update themodel
prop.
Automatic
<ui-select v-model="value"></ui-select>\n
Manual
<ui-select\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-select>\n
<div v-shadow.transition="[2, 8]">\n <p>Hover over or tap me for a transition</p>\n</div>\n
'},PCa1:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/tree/tree';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/checkbox/checkbox'; // Optional\n
import Vue from 'vue';\nimport UiTree from 'balm-ui/components/tree';\n\n// Optional. Overwrite `<ui-tree>` props with default value.\nVue.use(UiTree, {\n // some props\n});\n
'},PEJA:function(t,e){t.exports='<ui-alert><!-- message --></ui-alert>\n
Name | Type | Default | Description |
---|---|---|---|
state | string | '' | State type. |
stateOutlined | boolean | false | Show outlined state. |
closable | boolean | false | Whether alert can be closed. |
interface Alert {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the message content and can contain HTML. |
<ui-slider v-model="value1"></ui-slider>\n<ui-slider v-model="value2"></ui-slider>\n
export default {\n data() {\n return {\n value1: 50,\n value2: [30, 70]\n };\n }\n};\n
'},PLch:function(t,e){t.exports='<ui-form-field>\n <ui-textfield maxlength="20">\n <template #before>\n <ui-textfield-icon>event</ui-textfield-icon>\n </template>\n Floating Label Text\n <template #after>\n <ui-textfield-icon trailing>delete</ui-textfield-icon>\n </template>\n </ui-textfield>\n <ui-textfield-helper with-counter> Helper message </ui-textfield-helper>\n</ui-form-field>\n
Component | Description |
---|---|
<ui-textfield> | Mandatory. |
<ui-textfield-icon> | Mandatory for leading/trailing icons. |
<ui-textfield-helper> | Styles the container of helper text and character counter elements. |
<ui-table\n :data="data"\n :thead="thead"\n :tbody="tbody"\n :tfoot="tfoot"\n :default-col-width="200"\n :scroll="{ y: 300 }"\n></ui-table>\n
export default {\n data() {\n return {\n thead: [\n 'title1',\n 'title2',\n 'title3',\n 'title4',\n 'title5',\n 'title6',\n 'title7',\n 'title8',\n 'title9',\n 'title10',\n 'title11',\n 'title12'\n ],\n tbody: [\n {\n field: 'a',\n width: 80,\n fixed: 'left'\n },\n {\n field: 'b',\n width: 100\n // fixed: 'left'\n },\n {\n field: 'c',\n width: 100\n },\n {\n field: 'c',\n width: 100\n },\n {\n field: 'c',\n width: 100\n },\n {\n field: 'c'\n },\n {\n field: 'c'\n },\n {\n field: 'c'\n },\n {\n field: 'c'\n },\n {\n field: 'c',\n width: 100\n },\n {\n field: 'b',\n width: 100\n // fixed: 'right'\n },\n {\n field: 'b',\n width: 80,\n fixed: 'right'\n }\n ],\n tfoot: [\n { value: 1 },\n { value: 2 },\n { value: 3 },\n { value: 4 },\n { value: 5 },\n { value: 6 },\n { value: 7 },\n { value: 8 },\n { value: 9 },\n { value: 10 },\n { value: 11 },\n { value: 12 }\n ],\n data: []\n };\n },\n created() {\n this.data = [\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '1' },\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '2' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '3' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '4' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '5' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '6' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '7' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '8' },\n { a: 'aaa', c: 'ContentContentContent', d: 2, key: '9' },\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '10' },\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '11' },\n { a: 'aaa', b: 'bbb', c: 'ContentContentContent', d: 3, key: '12' }\n ];\n }\n};\n
'},PktF:function(t,e){t.exports='<ui-pagination\n v-model="page"\n :total="total"\n show-total\n show-jumper\n></ui-pagination>\n
export default {\n data() {\n return {\n page: 1,\n total: 100\n };\n }\n};\n
'},PlXN:function(t,e){t.exports='@use '@material/top-app-bar' with (\n // Default styles\n $row-height: 64px,\n $title-left-padding: 20px,\n $section-vertical-padding: 8px,\n $section-horizontal-padding: 12px,\n\n $mobile-breakpoint: 599px,\n\n // Default mobile styles\n $mobile-row-height: 56px,\n $mobile-section-padding: 4px,\n\n // Short top app bar\n $short-collapsed-border-radius: 4px,\n $short-collapsed-width: 56px,\n $short-collapsed-right-icon-padding: 12px,\n\n // Prominent styles\n $prominent-row-height: 128px,\n $prominent-title-bottom-padding: 2px,\n\n // Prominent mobile styles\n $prominent-mobile-title-bottom-padding: 6px,\n\n // Dense styles\n $dense-row-height: 48px,\n $dense-section-horizontal-padding: 4px,\n $dense-title-left-padding: 12px,\n\n // Dense & Prominent styles\n $dense-prominent-title-bottom-padding: 9px\n);\n
'},Po75:function(t,e){t.exports='<section :dir="controls.rtl ? 'rtl' : null">\n <ui-textfield\n v-model="value"\n :disabled="controls.disabled"\n :dense="controls.dense"\n :required="controls.required"\n :class="{'demo-text-field-custom-colors': controls.customColor}"\n helper-text-id="my-text-field-helper-text"\n >\n Email Address\n </ui-textfield>\n <ui-textfield-helper\n v-if="controls.helperText"\n id="my-text-field-helper-text"\n :visible="controls.isVisible"\n :valid-msg="controls.isValidMsg"\n >\n Helper Text (possibly validation message)\n </ui-textfield-helper>\n</section>\n
export default {\n data() {\n return {\n value: '',\n controls: {\n disabled: false,\n rtl: false,\n dense: false,\n required: false,\n customColor: false,\n helperText: false,\n isVisible: false,\n isValidMsg: false\n }\n };\n }\n};\n
'},PvR7:function(t,e){t.exports='<ui-grid class="demo-grid max-width">\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n</ui-grid>\n
.demo-grid.max-width {\n max-width: 1280px;\n}\n
'},"Q/ll":function(t,e){t.exports='<ui-card-content>\n <!-- content within actionable area: rich media + additional text content -->\n</ui-card-content>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5185\u5bb9\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-media>
<ui-card-text>
<div>\n <ui-textfield\n v-model="title"\n fullwidth\n placeholder="Subject"\n maxlength="40"\n with-counter\n ></ui-textfield>\n\n <ui-textfield\n v-model="content"\n input-type="textarea"\n fullwidth\n placeholder="Content"\n maxlength="140"\n rows="8"\n ></ui-textfield>\n</div>\n
export default {\n data() {\n return {\n title: '',\n content: ''\n };\n }\n};\n
'},Q9WI:function(t,e){t.exports='<ui-list>\n <ui-item v-for="i in 3" :key="i">\n <ui-item-text-content>Line item</ui-item-text-content>\n <ui-item-last-content>\n <ui-icon>info</ui-icon>\n </ui-item-last-content>\n </ui-item>\n</ui-list>\n
'},QABY:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/side-sheet/side-sheet';\n
import Vue from 'vue';\nimport UiSideSheet from 'balm-ui/components/side-sheet';\n\nVue.use(UiSideSheet);\n
'},"QGU/":function(t,e){t.exports='@use '@material/snackbar' with (\n $fill-color: color.mix(\n theme-color.prop-value(on-surface),\n theme-color.prop-value(surface),\n 80%\n ),\n $label-ink-color: rgba(\n theme-color.prop-value(surface),\n theme-color.text-emphasis(high)\n ),\n $action-ink-color: #bb86fc,\n $dismiss-ink-color: rgba(\n theme-color.prop-value(surface),\n theme-color.text-emphasis(high)\n ),\n\n $label-type-scale: body2,\n $dismiss-icon-size: 18px,\n $dismiss-button-size: 36px, // New in 8.42.0\n $min-width: 344px,\n $max-width: 672px,\n $mobile-breakpoint: 480px,\n $viewport-margin-narrow: 8px,\n $viewport-margin-wide: 24px,\n $padding: 8px,\n\n $elevation: 6,\n $shape-radius: small, // Key from shape.$category-keywords or CSS length value (e.g., 4px)\n $z-index: 8, // One above `<ui-dialog>`\n\n // These variables need to be kept in sync with the values in constants.js.\n $enter-duration: 150ms,\n $exit-duration: 75ms\n);\n
'},QHM2:function(t,e){t.exports='<ui-textfield v-model="repository.text" outlined :attrs="{ readonly: true }">\n <template #after>\n <ui-textfield-icon v-copy="repository">content_copy</ui-textfield-icon>\n </template>\n</ui-textfield>\n
export default {\n data() {\n return {\n repository: {\n text: 'https://github.com/balmjs/balm-ui',\n success: () => {\n this.$toast('Copied!');\n }\n }\n };\n }\n};\n
'},QKCd:function(t,e){t.exports='$theme
interface VueInstance {\n $theme: BalmUITheme;\n}\n
$theme.primary
$theme.secondary
$theme.background
$theme.surface
$theme.error
$theme.onPrimary
$theme.onSecondary
$theme.onSurface
$theme.onError
interface BalmUITheme {\n primary: string;\n secondary: string;\n background: string;\n surface: string;\n error: string;\n onPrimary: string;\n onSecondary: string;\n onSurface: string;\n onError: string;\n}\n
$theme.colors
type ThemeColor = {\n primary?: string;\n secondary?: string;\n background?: string;\n surface?: string;\n error?: string;\n on-primary?: string;\n on-secondary?: string;\n on-surface?: string;\n on-error?: string;\n}\n\ninterface BalmUITheme {\n colors: ThemeColor;\n}\n
$theme.getThemeColor(style)
type ThemeColorStyle =\n | 'primary'\n | 'secondary'\n | 'background'\n | 'surface'\n | 'error'\n | 'on-primary'\n | 'on-secondary'\n | 'on-surface'\n | 'on-error';\n\ninterface BalmUITheme {\n getThemeColor(style: ThemeColorStyle): string;\n}\n
$theme.getThemeClass(style)
type ThemeClassStyle = ThemeColorStyle | 'primary-bg' | 'secondary-bg';\n\ninterface BalmUITheme {\n getThemeClass(style: ThemeClassStyle): string;\n}\n
type TextStyle = 'primary' | 'secondary' | 'hint' | 'disabled' | 'icon';\n\ntype ThemeTone = 'background' | 'light' | 'dark';\n
\u83b7\u53d6\u6587\u5b57\u989c\u8272\u503c/class
interface BalmUITheme {\n getTextColor(style: TextStyle, tone: ThemeTone): string;\n getTextClass(style: TextStyle, tone: ThemeTone): string;\n}\n
\u8bbe\u7f6e\u6587\u5b57\u989c\u8272
interface BalmUITheme {\n setTextColor(style: TextStyle, value: string): void;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | \u6587\u5b57\u6837\u5f0f\u540d |
tone | string | 'background' | \u4e3b\u9898\u8272\u8c03\u540d |
value | string | '' | \u6587\u5b57\u989c\u8272\u503c |
\u83b7\u53d6\u6587\u5b57\u989c\u8272\u503c/class
interface BalmUITheme {\n getTextColorOnLight(style: TextStyle): string;\n getTextClassOnLight(style: TextStyle): string;\n\n getTextColorOnDark(style: TextStyle): string;\n getTextClassOnDark(style: TextStyle): string;\n}\n
\u8bbe\u7f6e\u6587\u5b57\u989c\u8272
interface BalmUITheme {\n setTextColorOnLight(style: TextStyle, value: string): void;\n setTextColorOnDark(style: TextStyle, value: string): void;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | \u6587\u5b57\u6837\u5f0f\u540d |
value | string | '' | \u6587\u5b57\u989c\u8272\u503c |
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $theme
New in 8.1.0
import { useTheme } from 'balm-ui';\n// \u6216\n// import { useTheme } from 'balm-ui/plugins/theme';\n\nconst $theme = useTheme();\n
'},QM0m:function(t,e){t.exports='<ui-rangepicker v-model="date" outlined :labels="['Start Date', 'End Date']">\n <template #separator>-</template>\n</ui-rangepicker>\n
export default {\n data() {\n return {\n date: ['2020-02-12', '2020-03-24']\n };\n }\n};\n
'},QYUg:function(t,e){t.exports='<ui-drawer><!-- the drawer child components --></ui-drawer>\n
<ui-drawer>
Types
0
: 'permanent'
1
: 'dismissible'
2
: 'modal'
NOTE:
<ui-drawer>
(type="permanent"
) has not props and events.<ui-drawer type="dismissible">
and <ui-drawer type="modal">
must be including a <ui-nav>
. And the first <ui-nav-item>
needs to apply activated state in the drawer.Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Drawer types. |
navId | string | null | The external menu button selector. (Please refer to the navId prop of the top app bar) |
open (v-model ) | boolean | false | The drawer toggle state. |
viewportHeight | boolean | false | Viewport full height(100vh ) . |
Name | Props | Description |
---|---|---|
default | The default slot holds the drawer child components. |
Child components:
<ui-drawer-header>
<ui-drawer-content>
Name | Type | Description |
---|---|---|
nav | function(open: boolean) | Emits when the drawer is opened or closed. |
NOTE: If you are not using
v-model
, you should listen for the drawer using@nav
and update theopen
prop.
Automatic
<ui-drawer v-model="open" type="modal"></ui-drawer>\n
Manual
<ui-drawer\n :open="open"\n type="modal"\n @nav="$balmUI.onChange('open', $event)"\n></ui-drawer>\n
NOTE: You can customize the style for your scale classname (mdc-typography--<STYLE>
)
.mdc-typography--custom-style-1 {\n // ...\n}\n\n.mdc-typography--custom-style-2 {\n // ...\n}\n
<ui-grid class="demo-grid">\n <ui-grid-cell class="demo-cell" columns="6">6</ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4">4</ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="2">2</ui-grid-cell>\n</ui-grid>\n
'},QwAn:function(t,e){t.exports='<ui-form item-margin-bottom="10">\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.mobile">Mobile</ui-textfield>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.password" input-type="password">\n Password\n </ui-textfield>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.repassword" input-type="password">\n Repeat Password\n </ui-textfield>\n </ui-form-field>\n <ui-form-field>\n <ui-select\n v-model="formData.gender"\n :options="genderOptions"\n default-label="Unknown"\n >\n Gender\n </ui-select>\n </ui-form-field>\n\n <ui-alert v-if="message" state="error">{{ message }}</ui-alert>\n\n <ui-form-field class="form-item form-actions">\n <ui-button raised @click="submit">Submit</ui-button>\n </ui-form-field>\n</ui-form>\n
const validations = [\n {\n key: 'mobile',\n label: 'Mobile',\n validator: 'required, mobile'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required, password, minRule, maxRule',\n minRule: {\n validate(value) {\n return value.trim().length >= 6;\n },\n message: '%s minLength >= 6'\n },\n maxRule: {\n validate(value) {\n return value.trim().length <= 8;\n },\n message: '%s maxLength <= 8'\n }\n },\n {\n key: 'repassword',\n label: 'Repeat Password',\n validator: 'required, password, repasswordRule',\n repasswordRule: {\n validate(value, data) {\n return value === data.password;\n },\n message: 'repassword !== password'\n }\n },\n {\n key: 'gender',\n label: 'Gender',\n validator: 'required'\n }\n];\n\nconst genderOptions = [\n {\n label: 'Male',\n value: 'M'\n },\n {\n label: 'Female',\n value: 'F'\n }\n];\n\nexport default {\n validations,\n data() {\n return {\n genderOptions,\n formData: {\n mobile: '',\n password: '',\n repassword: '',\n gender: ''\n },\n message: ''\n };\n },\n methods: {\n submit() {\n let result = this.$validate(this.formData);\n let { valid, message } = result;\n this.message = message;\n\n if (valid) {\n console.log('gg');\n }\n }\n }\n};\n
'},QzXa:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},RMlw:function(t,e){t.exports='<ui-textfield-helper><!-- the helper text --></ui-textfield-helper>\n
Name | Type | Default | Description |
---|---|---|---|
validMsg (v-model ) | string, boolean | false | Indicates the helper text is a validation message. |
id | string | null | Mandatory. (Corresponding to the helperTextId prop matching <ui-textfield> ) |
visible | boolean | false | Makes the helper text permanently visible. |
withCounter | boolean | false | Show character counter. (The maxlength prop of <ui-textfield> is required) |
NOTE: Do not insert any tags between
<ui-textfield>
and<ui-textfield-helper>
with counter
<!-- Single line text field -->\n<ui-form-field>\n <ui-textfield maxlength="40"></ui-textfield>\n <ui-textfield-helper with-counter></ui-textfield-helper>\n</ui-form-field>\n\n<!-- Single line text field with an internal character counter -->\n<ui-form-field>\n <ui-textfield maxlength="40" with-counter></ui-textfield>\n</ui-form-field>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the text field helper text and can contain HTML. |
<ui-textfield\n input-type="password"\n required\n pattern=".{8,}"\n helper-text-id="pw-validation-msg"\n :attrs="{autocomplete: 'current-password'}"\n>\n Choose password\n</ui-textfield>\n<ui-textfield-helper id="pw-validation-msg" visible validMsg>\n Must be at least 8 characters long\n</ui-textfield-helper>\n
'},Rfpz:function(t,e){t.exports='<ui-form type="|" item-margin-bottom="16" action-align="center">\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field class="required">\n <label>Input:</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n <ui-form-field>\n <label>Select:</label>\n <ui-select></ui-select>\n </ui-form-field>\n <ui-form-field>\n <label>Checkbox:</label>\n <div :class="subitemClass">\n <ui-form-field v-for="i in 3" :key="i">\n <ui-checkbox :value="i" :input-id="`checkbox-${i}`"></ui-checkbox>\n <label :for="`checkbox-${i}`">Checkbox {{ i }}</label>\n </ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field>\n <label>Radio:</label>\n <div :class="subitemClass">\n <ui-form-field v-for="i in 3" :key="i">\n <ui-radio\n v-model="checkedValue"\n :value="i"\n :input-id="`radio-${i}`"\n ></ui-radio>\n <label :for="`radio-${i}`">Radio {{ i }}</label>\n </ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button raised>Submit</ui-button>\n <ui-button outlined>Cancel</ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
'},Romc:function(t,e){t.exports='<ui-tabs v-model="active">\n <ui-tab>Tab One</ui-tab>\n <ui-tab>Tab Two</ui-tab>\n <ui-tab>Tab Three</ui-tab>\n</ui-tabs>\n\n<ui-panels v-model="active">\n <ui-panel>Panel One</ui-panel>\n <ui-panel>Panel Two</ui-panel>\n <ui-panel>Panel Three</ui-panel>\n</ui-panels>\n
'},RqgS:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/tabs/tabs';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiTabsComponents from 'balm-ui/components/tabs';\n\nVue.use(UiTabsComponents, {\n // Optional. Overwrite `<ui-tabs>` props with default value.\n UiTabs: {\n // some props\n }\n});\n
'},"RvX+":function(t,e){t.exports='<ui-tab-indicator></ui-tab-indicator>\n
Name | Type | Default | Description |
---|---|---|---|
type | string | 'underline' | Mandatory. Indicator type. ['underline', 'icon'] |
fade | boolean | false | Optional. Sets up the tab indicator to fade in on activation and fade out on deactivation. |
Name | Props | Description |
---|---|---|
default | The default slot holds the tab indicator icon and can contain HTML. |
'},"S06+":function(t,e){t.exports='NOTE:
underline
type has not slot.
@use '@material/circular-progress' with (\n $color: primary,\n $track-color: transparent,\n\n /// The rotation position of the arcs that corresponds to their fully contracted state\n $base-angle: 135deg,\n /// Amount of circle the arc takes up\n $arc-size: 270deg,\n /// Time it takes to expand and contract arc\n $arc-time: 1333ms,\n /// Time for inactive indicator to disappear\n $shrink-time: 400ms,\n /// How much the start location of the arc should rotate each time; 216 gives\n /// us a 5 pointed star shape (it's 360/5 * 3)\n $arc-start-rotation-interval: 216deg,\n /// The timing function used for the core spinner animations.\n $timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n);\n
@use 'balm-ui/components/spinner' with (\n $fourColors: $blue $red $yellow $green\n);\n
'},S5mR:function(t,e){t.exports='@use 'balm-ui/components/bottom-navigation' with (\n $height: 48px,\n $stacked-height: 72px,\n $color: theme-variables.$primary,\n $fill-color: white,\n $active-fill-color: rgba($color, 0.87),\n);\n
'},S7Po:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-pagination>` props with default value.\n UiPagination: {\n // some props\n }\n});\n
'},S93G:function(t,e){t.exports='\u6309\u94ae\u4f7f\u7528\u6237\u53ea\u9700\u5355\u51fb\u4e00\u4e0b\u5373\u53ef\u6267\u884c\u64cd\u4f5c\u5e76\u505a\u51fa\u9009\u62e9\u3002
'},SBcc:function(t,e){t.exports='<ui-pagination\n v-model="page"\n :total="total"\n show-total\n :page-size="[10, 25, 100]"\n position="left"\n>\n <template #default="{ currentMinRow, currentMaxRow }">\n {{ currentMinRow }} - {{ currentMaxRow }} / {{ total }}\n </template>\n</ui-pagination>\n
export default {\n data() {\n return {\n page: 1,\n total: 500\n };\n }\n};\n
'},SDHC:function(t,e){t.exports='Text fields let users enter and edit text.
'},"SP+S":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/icon-button/icon-button';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiIconButton from 'balm-ui/components/icon-button';\n\n// Optional. Overwrite `<ui-icon-button>` props with default value.\nVue.use(UiIconButton, {\n // some props\n});\n
'},ST7x:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/file/file';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiFile from 'balm-ui/components/file';\n\n// Optional. Overwrite `<ui-file>` props with default value.\nVue.use(UiFile, {\n // some props\n});\n
'},SWCM:function(t,e){t.exports='<ui-editor v-model="content"></ui-editor>\n
'},ScBg:function(t,e){t.exports='Snackbars provide brief messages about app processes at the bottom of the screen.
'},ShmW:function(t,e){t.exports='<ui-card-text><!-- additional text content --></ui-card-text>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u6587\u5b57\u5185\u5bb9\u53ca HTML |
<ui-card><!-- Card contents --></ui-card>\n
Name | Type | Default | Description |
---|---|---|---|
outlined | boolean | false | \u53bb\u9664\u9634\u5f71\u5e76\u663e\u793a\u7ec6\u7ebf\u8f6e\u5ed3 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-content>
<ui-card-actions>
<ui-panels>\n <!-- the panel components -->\n <ui-panel><!-- the panel content --></ui-panel>\n</ui-panels>\n
Name | Type | Default | Description |
---|---|---|---|
active (v-model ) | number | 0 | Mandatory. |
Name | Props | Description |
---|---|---|
default | The default slot holds the panel components and can contain HTML. |
<ui-tabs v-model="active">\n <ui-tab>Tab One</ui-tab>\n <ui-tab>Tab Two</ui-tab>\n <ui-tab>Tab Three</ui-tab>\n</ui-tabs>\n\n<ui-panels v-model="active">\n <ui-panel>Panel One</ui-panel>\n <ui-panel>Panel Two</ui-panel>\n <ui-panel>Panel Three</ui-panel>\n</ui-panels>\n
'},So25:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-slider>` props with default value.\n UiSlider: {\n // some props\n }\n});\n
'},Stad:function(t,e){t.exports='Navigation drawers provide access to destinations in your app.
'},"SvF+":function(t,e){t.exports='BalmUI is a modular and customizable Material Design UI library for Vue.js.
\ud83c\udf89
balm-ui
(v9+) for Vue 3, see material.balmjs.com
We'd love for you to contribute and make BalmUI even better than it is today! Please make sure to read the Contributing Guide before making a pull request. You can submit any ideas as pull requests or as GitHub issues.
We officially support the last two versions of every major browser. Specifically, we test on the following browsers:
<ui-select-helper><!-- the helper text --></ui-select-helper>\n
Name | Type | Default | Description |
---|---|---|---|
validMsg (v-model ) | string, boolean | false | \u9a8c\u8bc1\u6d88\u606f\u6587\u672c |
id | string | null | \u5fc5\u586b\uff08\u53ef\u5bf9\u5e94\u5339\u914d <ui-select> \u7684 helperTextId \u5c5e\u6027\uff09 |
visible | boolean | false | \u4f7f\u5e2e\u52a9\u6587\u672c\u6c38\u8fdc\u53ef\u89c1 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u62e9\u5668\u5e2e\u52a9\u6587\u5b57\u53ca HTML |
<ui-image-item><!-- image and text --></ui-image-item>\n
Name | Type | Default | Description |
---|---|---|---|
image | string | null | Add the src attribute directly to the <img> in the image container. |
bgImage | string | null | Use a <div> instead of <img> element. |
Name | Props | Description |
---|---|---|
default | Optional. Indicates the area within each item containing the supporting text label, if the Image List contains text labels. | |
image | Optional. The image container displays an image list item\u2019s image or illustration. |
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the item is clicked. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/fab/fab';\n@use 'balm-ui/components/icon/icon'; // Recommended\n
import Vue from 'vue';\nimport UiFab from 'balm-ui/components/fab';\n\n// Optional. Overwrite `<ui-fab>` props with default value.\nVue.use(UiFab, {\n // some props\n});\n
'},TEp9:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},Tbpc:function(t,e){t.exports='<ui-tooltip>
\u7c7b\u578b
0
: 'plain'
<div aria-describedby="tooltip-id">Text</div>\n<ui-tooltip id="tooltip-id">Tips content</ui-tooltip>\n
1
: 'rich'
(New in 8.33.0)
<ui-tooltip-anchor>\n <div data-tooltip-id="tooltip-id">Text</div>\n <ui-tooltip id="tooltip-id" rich>Tips content</ui-tooltip>\n</ui-tooltip-anchor>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u6587\u5b57\u63d0\u793a\u7684\u7c7b\u578b | 8.33.0 |
rich | boolean | false | \u53ef\u9009\u3002\u542f\u7528\u5bcc\u6587\u5b57\u63d0\u793a | 8.33.0 |
width | number | 0 | \u81ea\u5b9a\u4e49\u6587\u5b57\u63d0\u793a\u7684\u6700\u5927\u5bbd\u5ea6 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u5b57\u63d0\u793a\u7684\u5185\u5bb9\uff08\u53ef\u5305\u542b HTML\uff09 |
Name | Props | Description |
---|---|---|
title | title \u63d2\u69fd\u5305\u542b\u6587\u5b57\u63d0\u793a\u7684\u6807\u9898\uff08\u53ef\u5305\u542b HTML\uff09 | |
default | linkClass | default \u63d2\u69fd\u5305\u542b\u6587\u5b57\u63d0\u793a\u7684\u5185\u5bb9\uff08\u53ef\u5305\u542b HTML\uff09 |
<ui-grid-cell><!-- the grid cell content --></ui-grid-cell>\n
Name | Type | Default | Description |
---|---|---|---|
nested | boolean | false | \u5f00\u542f\u5d4c\u5957\u6805\u683c\u5e03\u5c40 |
columns | number, object | 4 | \u6307\u5b9a\u5355\u5143\u683c\u8de8\u8d8a\u7684\u5217\u6570 |
order | number | 0 | \u6307\u5b9a\u5355\u5143\u683c\u7684\u987a\u5e8f |
align | string | '' | \u6307\u5b9a\u5355\u5143\u683c\u7684\u5bf9\u9f50\u65b9\u5f0f |
interface GridCell {\n columns: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n order: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n align: 'top' | 'middle' | 'bottom';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5355\u5143\u683c\u5185\u5bb9\u53ca HTML |
\u5f53\u4f60\u7684\u5185\u5bb9\u9700\u8981\u989d\u5916\u7ed3\u6784\u4e14\u5355\u4e2a\u6805\u683c\u5e03\u5c40\u65e0\u6cd5\u652f\u6301\u65f6\uff0c\u53ef\u4ee5\u5c06\u6805\u683c\u5e03\u5c40\u5f7c\u6b64\u5d4c\u5957\u3002 \u5f00\u542f\u5d4c\u5957\u6805\u683c\u5e03\u5c40\uff0c\u8bf7\u4f7f\u7528
<ui-grid-cell nested>
<ui-grid>\n <ui-grid-cell nested>\n <!-- Parent 1 -->\n <ui-grid-cell>Child 1</ui-grid-cell>\n <ui-grid-cell>Child 2</ui-grid-cell>\n <ui-grid-cell>Child 3</ui-grid-cell>\n </ui-grid-cell>\n <ui-grid-cell>Parent 2</ui-grid-cell>\n <ui-grid-cell>Parent 3</ui-grid-cell>\n</ui-grid>\n
'},U2rC:function(t,e){t.exports='<ui-form-field>\n <ui-radio></ui-radio>\n <label>Radio</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | string, number | '' | Mandatory. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
value | string, number | '' | The value attribute of the <input> . |
disabled | boolean | false | Styles the radio button as a disabled radio button. |
attrs | object | {} | Other attributes for <input> . |
Name | Type | Description |
---|---|---|
change | function(value: string|number) | Emits when the radio button is changed. |
NOTE: If you are not using
v-model
, you should listen for the radio using@change
and update themodel
prop.
Automatic
<ui-radio v-model="value"></ui-radio>\n
Manual
<ui-radio\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-radio>\n
\u6d6e\u52a8\u52a8\u4f5c\u6309\u94ae\uff08FAB\uff09\u8868\u793a\u5c4f\u5e55\u7684\u4e3b\u8981\u52a8\u4f5c\u3002
'},U78a:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-progress>` props with default value.\n UiProgress: {\n // some props\n }\n});\n
'},U8ai:function(t,e){t.exports='<ui-form-field>\n <ui-switch></ui-switch>\n <label>Switch</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean | false | \u5f00\u5173\u72b6\u6001 |
trueValue | boolean, number, string | true | \u5f00\u5173\u5f00\u542f\u65f6\u7684\u8fd4\u56de\u503c |
falseValue | boolean, number, string | false | \u5f00\u5173\u5173\u95ed\u65f6\u7684\u8fd4\u56de\u503c |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
attrs | object | {} | <input> \u7684\u5176\u4ed6\u5c5e\u6027 |
Name | Type | Description | Version |
---|---|---|---|
change | function(value: boolean) | \u5f00\u5173\u72b6\u6001\u53d8\u5316\u65f6\u89e6\u53d1 | |
selected | function(value: boolean|string|number) | \u5f00\u5173\u503c\u9009\u4e2d\u65f6\u89e6\u53d1 | 8.46.0 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5f00\u5173\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-switch v-model="value"></ui-switch>\n
\u624b\u52a8
<ui-switch\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-switch>\n
<ui-grid class="demo-grid" fixed-column-width>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n</ui-grid>\n
'},UBkE:function(t,e){t.exports='<ui-editor></ui-editor>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
model (v-model ) | string | '' | \u5bcc\u6587\u672c\u503c | |
options | object | {} | \u8be6\u89c1 Quill options | |
toolbar | array, string | null | \u5bcc\u6587\u672c\u5de5\u5177\u680f\u914d\u7f6e\uff08\u81ea\u5b9a\u4e49\u6216 'full' ) | |
placeholder | string | null | \u5f53\u7f16\u8f91\u5668\u4e3a\u7a7a\u65f6\u663e\u793a\u7684\u5360\u4f4d\u7b26\u6587\u672c | |
readonly | boolean | false | \u53ea\u8bfb\u6a21\u5f0f | |
theme | string | 'snow' | \u4e3b\u9898\u6837\u5f0f | |
toolbarIcons | object | {} | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u56fe\u6807 | 8.6.0 |
toolbarTips | object | {} | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u56fe\u6807\u63d0\u793a\u6587\u672c | 8.8.0 |
toolbarOptions | object | { font: [], size: [], lineheight:[] } | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u7684\u5b57\u4f53\uff0c\u6587\u5b57\u5927\u5c0f\u548c\u884c\u9ad8 | 8.6.0 |
toolbarHandlers | object | {} | \u81ea\u5b9a\u4e49\u5de5\u5177\u680f\u4e8b\u4ef6\u5904\u7406 | |
customImageHandler | boolean | false | \u542f\u7528\u81ea\u5b9a\u4e49\u56fe\u7247\u4e8b\u4ef6\u5904\u7406 | |
emotions | array | [] | \u8868\u60c5\u6269\u5c55\u3002\u652f\u6301 emoji \u548c image | |
withCounter | boolean | false | \u542f\u7528\u5185\u90e8\u8ba1\u6570\u5668 | 8.6.0 |
extension | false , object | false | \u81ea\u5b9a\u4e49 Quill \u6269\u5c55 |
interface Editor {\n theme: 'bubble' | 'snow';\n}\n
toolbar
\u5c5e\u6027align
/direction
/indent
background
/color
/font
/size
blockquote
/code-block
/header
/list
bold
/italic
/link
/script
/strike
/underline
image
/video
font
/size
/lineheight
: \u81ea\u5b9a\u4e49\u5b57\u4f53\uff0c\u6587\u5b57\u5927\u5c0f\u548c\u884c\u9ad8image
: \u81ea\u5b9a\u4e49\u56fe\u7247\u4e0a\u4f20\u5904\u7406emoji
: \u8868\u60c5\u6a21\u5757divider
: \u6c34\u5e73\u5206\u5272\u7ebftextindent
: \u5185\u8054\u7684\u6587\u672c\u7f29\u8fdb\uff08\u7c7b\u4f3c indent
\uff09linkoff
: \u6e05\u9664\u6240\u6709\u94fe\u63a5counter
: \u8ba1\u6570\u5668\u6a21\u5757undo
/redo
: \u5185\u7f6e\u7684\u64a4\u9500\u548c\u91cd\u505a\u5904\u7406selectall
: \u9009\u4e2d\u5168\u90e8\u5185\u5bb9toolbarOptions
\u548c emotions
\u5168\u5c40\u914d\u7f6e/path/to/app/scripts/config/editor.js
const toolbarTips = {\n header: 'Headline',\n font: 'Font Famliy',\n size: 'Font Size',\n lineheight: 'Line Height',\n bold: 'Bold',\n italic: 'Italic',\n underline: 'Underline',\n color: 'Text Color',\n background: 'Background Color',\n align: {\n default: 'Left Align',\n center: 'Center Align',\n right: 'Right Align',\n justify: 'Justify Align'\n },\n list: {\n ordered: 'Ordered List',\n bullet: 'Bullet List'\n },\n indent: {\n '+1': 'Increase Indent',\n '-1': 'Decrease Indent'\n },\n blockquote: 'Blockquote',\n emoji: 'Emoji'\n};\n\nconst toolbarOptions = {\n // \u81ea\u5b9a\u4e49 Font Family \u9700\u5bf9\u5e94\u914d\u7f6e Sass \u53d8\u91cf `$font-family`\n font: [\n 'Arial',\n 'Arial Black',\n 'Comic Sans MS',\n 'Courier New',\n 'Tahoma',\n 'Georgia',\n 'Helvetica',\n 'Segoe UI',\n 'Impact',\n 'Times New Roman',\n 'Verdana'\n ],\n size: [\n '8px',\n '9px',\n '10px',\n '11px',\n '12px',\n '13px',\n '14px',\n '16px',\n '18px',\n '24px',\n '36px',\n '48px',\n '60px',\n '72px',\n '96px'\n ],\n lineheight: [\n '1',\n '1.2',\n '1.5',\n '1.6',\n '1.8',\n '2',\n '2.4',\n '2.8',\n '3',\n '4',\n '5'\n ]\n};\n\nconst emotions = [\n {\n type: 'image',\n title: 'Default',\n content: [\n {\n name: 'oo',\n alt: '\u574f\u7b11',\n src: 'https://v8.material.balmjs.com/images/emoji/p_huaixiao.png'\n },\n {\n name: 'xx',\n alt: '\u8214\u5c4f',\n src: 'https://v8.material.balmjs.com/images/emoji/p_tian.png'\n }\n ]\n },\n {\n type: 'emoji',\n title: 'emoji',\n content: [\n {\n name: 'smile',\n value: '\ud83d\ude00'\n },\n {\n name: 'cry',\n value: '\ud83d\ude06'\n }\n ]\n },\n {\n type: 'image',\n title: 'Custom',\n content: [\n {\n name: 'yy',\n alt: '\u795e\u517d',\n src: 'https://v8.material.balmjs.com/images/emoji/g_shenshou.gif'\n },\n {\n name: 'zz',\n alt: '\u6d6e\u4e91',\n src: 'https://v8.material.balmjs.com/images/emoji/g_fuyun.gif'\n }\n ]\n }\n];\n\nexport { toolbarTips, toolbarOptions, emotions };\n
/path/to/app/scripts/main.js
import Vue from 'vue';\nimport { toolbarTips, toolbarOptions, emotions } from '@/config/editor';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n UiEditor: {\n toolbarTips,\n toolbarOptions,\n emotions\n }\n});\n
toolbarHandlers
\u5c5e\u6027{\n toolbar: ['customFormat'],\n toolbarHandlers: {\n customFormat: (quill, value) => {};\n }\n}\n
quill.insert(customFormat, value) => {}
: \u5411\u5bcc\u6587\u672c\u63d2\u5165\u5185\u5bb9quill.insert('html', content)
: \u5411\u5bcc\u6587\u672c HTML (New in 8.9.0)<ui-editor ref="editor" v-model="content"></ui-editor>\n
this.$refs.editor.decodeEmoji(content)
: \u83b7\u53d6\u670d\u52a1\u7aef\u6570\u636e \u2192 \u8bbe\u7f6e\u5ba2\u6237\u7aef\u5c55\u793athis.$refs.editor.encodeEmoji(html)
: \u63d0\u4ea4\u5ba2\u6237\u7aef\u6570\u636e \u2192 \u4fdd\u5b58\u670d\u52a1\u7aef\u6570\u636eName | Props | Description |
---|---|---|
toolbar | toolbar \u63d2\u69fd\u5305\u542b\u81ea\u5b9a\u4e49\u5de5\u5177\u6309\u94ae\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(content: string) | \u5bcc\u6587\u672c\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
file-change | function(file, insert) | \u9700\u8981\u914d\u7f6e customImageHandler \uff08\u901a\u8fc7 insert(url) \u65b9\u6cd5\u5411\u5bcc\u6587\u672c\u63d2\u5165\u4e0a\u4f20\u56fe\u7247\uff09 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5bcc\u6587\u672c\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-editor v-model="content"></ui-editor>\n
\u624b\u52a8
<ui-editor\n :model="content"\n @change="$balmUI.onChange('content', $event)"\n></ui-editor>\n
<ui-rangepicker></ui-rangepicker>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder \uff09 | |
model (v-model ) | array | '' | \u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\u503c | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
labels | array | [] | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff | |
placeholders | array | [] | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 | |
config | object | {} | \u8be6\u89c1 Flatpickr configuration | |
disableRangePlugin | boolean | false | \u7981\u7528 flatpickr rangePlugin\uff0c\u4f7f\u7528\u4e24\u4e2a <ui-datepicker> \u4ee3\u66ff | 8.58.0 |
Name | Props | Description |
---|---|---|
separator | \u81ea\u5b9a\u4e49\u5206\u9694\u7b26 |
Name | Type | Description |
---|---|---|
change | function(value: array) | \u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-rangepicker v-model="value"></ui-rangepicker>\n
\u624b\u52a8
<ui-rangepicker\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-rangepicker>\n
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-fab>` props with default value.\n UiFab: {\n // some props\n }\n});\n
'},UJv8:function(t,e){t.exports='<ui-skeleton></ui-skeleton>\n
'},UMkk:function(t,e){t.exports='<ui-button data-tooltip-id="tooltip-demo-2">Hello</ui-button>\n<ui-tooltip-anchor>\n <ui-tooltip id="tooltip-demo-2" rich>\n <template #title>Lorem Ipsum</template>\n <template #default="{ linkClass }">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium\n vitae est et dapibus. Aenean sit amet felis eu lorem fermentum aliquam sit\n amet sit amet eros.\n <a :class="linkClass">link</a>\n </template>\n </ui-tooltip>\n</ui-tooltip-anchor>\n
'},"URY+":function(t,e){t.exports='<div v-shape></div>\n
v-shape="corner"
(medium)v-shape.small="corner"
v-shape.large="corner"
v-shape.cut="corner"
(medium)v-shape.cut.small="corner"
v-shape.cut.large="corner"
Value | Type | Default | Description |
---|---|---|---|
corner | string | '' | \u7528\u4e8e\u906e\u76d6\u7279\u5b9a\u89d2\u843d\u7684\u5143\u7d20\uff1b\u6700\u591a\u53ef\u80fd\u6709 4 \u4e2a\u3002\uff08\u503c\u4e3a\u7a7a\u65f6\u4f7f\u7528 shape sass radius variable\uff09 |
\u8bed\u6cd5\u7c7b\u4f3c CSS
border-radius
\u5c5e\u6027
<!-- The syntax of the first corner allows one to four values -->\n<!-- Radius is set for all 4 sides -->\n<div v-shape="'4px'"></div>\n\n<!-- top-left | bottom-right -->\n<div v-shape="'4px 0'"></div>\n\n<!-- top-right | bottom-left -->\n<div v-shape="'0 4px'"></div>\n\n<!-- top-left -->\n<div v-shape="'4px 0 0'"></div>\n\n<!-- top-left | top-right | bottom-left -->\n<div v-shape="'4px 4px 0'"></div>\n\n<!-- top-left | top-right | bottom-right | bottom-left -->\n<div v-shape="'4px 4px 4px 4px'"></div>\n
'},US97:function(t,e){t.exports='<ui-drawer-content><!-- the list of items --></ui-drawer-content>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the list of items (router link list) and can contain HTML. |
@use '@material/dialog' with (\n $scrim-color: on-surface,\n $title-ink-color: on-surface,\n $content-ink-color: on-surface,\n $scroll-divider-color: on-surface,\n\n $scrim-opacity: 0.32,\n $title-ink-opacity: 0.87,\n $content-ink-opacity: 0.6,\n $scroll-divider-opacity: 0.12,\n\n $min-width: 280px,\n $max-width: 560px,\n $margin: 16px,\n $shape-radius: medium,\n $title-bottom-padding: 9px,\n $actions-padding: 8px,\n $header-side-padding: 16px, // New in 8.21.0\n\n $z-index: 7\n);\n
'},UWRe:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `$alert` options.\n $alert: {\n // some options\n }\n});\n
'},UeG5:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},Ukfz:function(t,e){t.exports='<ui-button raised @click="showAlert">Show Alert</ui-button>\n
export default {\n methods: {\n showAlert() {\n this.$alert({\n message: 'Hello BalmJS',\n state: 'success',\n stateOutlined: true\n });\n }\n }\n};\n
'},Ulpg:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-button>` props with default value.\n UiButton: {\n // some props\n }\n});\n
'},UsKU:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},Ut3z:function(t,e){t.exports='A floating action button (FAB) represents the primary action of a screen.
'},"V/mi":function(t,e){t.exports='<ui-menu-anchor>\n <ui-menu :items="menuItems"></ui-menu>\n</ui-menu-anchor>\n
<ui-menu-anchor>\n <ui-menu>\n <ui-menuitem>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n\n <ui-item-divider></ui-item-divider>\n\n <ui-menuitem nested>\n <ui-menuitem>\n <ui-menuitem-icon>Icon</ui-menuitem-icon>\n <ui-menuitem-text>Label</ui-menuitem-text>\n </ui-menuitem>\n </ui-menuitem>\n </ui-menu>\n</ui-menu-anchor>\n
Component | Description |
---|---|
<ui-menu-anchor> | \u83dc\u5355\u951a\u5b9a\u5bb9\u5668\u5143\u7d20 |
<ui-menu> | \u83dc\u5355\u5bb9\u5668\u5143\u7d20 |
<ui-menuitem> | \u83dc\u5355\u9879 |
<ui-menuitem-text> | \u83dc\u5355\u6587\u672c |
<ui-menuitem-icon> | \u83dc\u5355\u56fe\u6807 |
\u9009\u9879\u5361\u662f\u8868\u793a\u8f93\u5165\uff0c\u5c5e\u6027\u6216\u52a8\u4f5c\u7684\u7d27\u51d1\u5143\u7d20\u3002
'},V3IR:function(t,e){t.exports='<div class="fab-motion-container">\n <div class="fab-motion-container__view">\n <p>View one (with FAB)</p>\n </div>\n <div\n class="fab-motion-container__view"\n :class="{'fab-motion-container__view--exited': !exited}"\n >\n <p>View two (without FAB)</p>\n <p>\n <ui-button\n id="enter-exit-back"\n :disabled="!exited"\n @click="$balmUI.onHide('exited')"\n >\n Go back\n </ui-button>\n </p>\n </div>\n <ui-fab\n id="enter-exit-add"\n class="demo-absolute-fab"\n icon="add"\n :exited="exited"\n @click="$balmUI.onShow('exited')"\n >\n add\n </ui-fab>\n</div>\n
export default {\n data() {\n return {\n exited: false\n };\n }\n};\n
.demo-absolute-fab {\n position: absolute;\n z-index: 1;\n right: 1rem;\n bottom: 1rem;\n}\n\n.fab-motion-container {\n position: relative;\n overflow: hidden;\n width: 20rem;\n height: 10rem;\n margin: 1rem;\n padding: 0 1rem;\n border: 1px solid #ccc;\n}\n\n.fab-motion-container__view {\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n transition: transform 375ms cubic-bezier(0, 0, 0.2, 1);\n background-color: #fff;\n will-change: transform;\n}\n\n.fab-motion-container__view--exited {\n transition-timing-function: cubic-bezier(0.4, 0, 1, 1);\n transform: translateY(100%);\n}\n
'},"VA/f":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},VAeK:function(t,e){t.exports='<ui-tabs></ui-tabs>\n
<ui-tabs>
PropsName | Type | Default | Description |
---|---|---|---|
items | array | [] | \u8bbe\u7f6e\u6807\u7b7e\u9875\u5bf9\u8c61\u5217\u8868 |
\u6807\u7b7e\u9875\u5bf9\u8c61\u7684 keys:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n
<ui-tabs>
SlotsName | Slots | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u7ec4\u4ef6\u53ca HTML |
<!-- Full syntax -->\n<ui-tab-bar v-model="active">\n <ui-tab\n v-for="(tabItem, tabIndex) in items"\n :key="tabIndex"\n :icon="tabItem.icon"\n >\n {{ tabItem.text }}\n </ui-tab>\n</ui-tab-bar>\n\n<!-- Shorthand -->\n<ui-tabs v-model="active" :items="items"></ui-tabs>\n
'},VBQN:function(t,e){t.exports='<ui-list><!-- <ui-item> --></ui-list>\n\n<ui-nav><!-- <ui-nav-item> --></ui-nav>\n
<ui-list>
Types
1
: 'singleLine'
2
: 'twoLine'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. List types. |
singleSelection | boolean | false | The list can handle selecting/deselecting list elements based on click or keyboard action. |
selectedIndex (v-model ) | number | -1 | The index of the selected list item. Applicable only for the single selection list. |
nonInteractive | boolean | false | Optional, disables interactivity affordances. |
dense | boolean | false | Optional, styles the density of the list, making it appear more compact. |
avatar | boolean | false | Optional, configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger. |
Name | Slots | Description |
---|---|---|
default | The default slot holds the item components and can contain HTML. |
Name | Type | Description |
---|---|---|
action | function(index: number) | Indicates that a list item with the specified index has been activated. |
NOTE: If you are not using
v-model
, you should listen for the list using@action
and update theselectedIndex
prop.
Automatic
<ui-list v-model="selectedIndex" single-selection></ui-list>\n
Manual
<ui-list\n :selected-index="selectedIndex"\n single-selection\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-list>\n
'},Vo8n:function(t){t.exports=JSON.parse('{"home":{"slogan":"\u66f4\u9ad8\u6548\u5730\u751f\u4ea7\u51fa\u7cbe\u7f8e\u7684\u4ea7\u54c1","title":"BalmUI \u662f\u57fa\u4e8e\u8c37\u6b4c Material Design \u7cfb\u7edf\u4e3a Vue.js \u91cf\u8eab\u5b9a\u5236\u7684 UI \u6846\u67b6\u3002","get-started":"\u8d77\u6b65"},"menu":{"guide":"\u6307\u5357","intro":"\u4ecb\u7ecd","quickstart":"\u5feb\u901f\u5165\u95e8","advanced":"\u8fdb\u9636\u7528\u6cd5","kill-ie":"\u4e07\u6076\u7684 IE","upgrade":"\u5347\u7ea7\u5411\u5bfc","general":"\u901a\u7528","button":"\u6309\u94ae","fab":"\u6d6e\u52a8\u6309\u94ae","icon-button":"\u56fe\u6807\u6309\u94ae","segmented-button":"\u6309\u94ae\u7ec4","layout":"\u5e03\u5c40","top-app-bar":"\u9876\u90e8\u5bfc\u822a\u680f","grid":"\u6805\u683c","form":"\u8868\u5355","divider":"\u5206\u5272\u7ebf","navigation":"\u5bfc\u822a","drawer":"\u4fa7\u8fb9\u5bfc\u822a\u680f","tabs":"\u6807\u7b7e\u9875","menu":"\u83dc\u5355","pagination":"\u5206\u9875","bottom-navigation":"\u5e95\u90e8\u5bfc\u822a\u680f","theme":"\u4e3b\u9898","color":"\u8272\u5f69","typography":"\u6392\u7248","icons":"\u56fe\u6807","shape":"\u5f62\u72b6","data-input":"\u6570\u636e\u5f55\u5165","textfield":"\u6587\u672c\u6846","autocomplete":"\u81ea\u52a8\u5b8c\u6210","editor":"\u5bcc\u6587\u672c","select":"\u9009\u62e9\u5668","checkbox":"\u590d\u9009\u6846","radio":"\u5355\u9009\u6309\u94ae","chips":"\u9009\u9879\u5361","file":"\u6587\u4ef6\u4e0a\u4f20","datepicker":"\u65e5\u671f\u9009\u62e9\u5668","rangepicker":"\u65e5\u671f\u8303\u56f4\u9009\u62e9\u5668","switch":"\u5f00\u5173","slider":"\u6ed1\u52a8\u6761","validator":"\u9a8c\u8bc1\u5668","data-display":"\u6570\u636e\u5c55\u793a","list":"\u5217\u8868","image-list":"\u56fe\u7247\u5217\u8868","lazyload":"\u56fe\u7247\u61d2\u52a0\u8f7d","card":"\u5361\u7247","table":"\u6570\u636e\u8868","collapse":"\u6298\u53e0\u9762\u677f","badge":"\u5fbd\u7ae0","tree":"\u6811","feedback":"\u53cd\u9988","alert":"\u8b66\u544a\u63d0\u793a","dialog":"\u5bf9\u8bdd\u6846","alert-dialog":"\u8b66\u544a\u6846","confirm-dialog":"\u786e\u8ba4\u6846","snackbar":"\u5e95\u90e8\u6d88\u606f\u6846","toast":"\u77ed\u6d88\u606f\u63d0\u793a","banner":"\u6a2a\u5e45","progress":"\u8fdb\u5ea6\u6761","spinner":"\u52a0\u8f7d\u4e2d","skeleton":"\u9aa8\u67b6\u5c4f","tooltip":"\u6587\u5b57\u63d0\u793a","bottom-sheet":"\u5e95\u90e8\u52a8\u4f5c\u8868","side-sheet":"\u4fa7\u8fb9\u52a8\u4f5c\u8868","misc":"\u5176\u4ed6","event":"UI \u5168\u5c40\u4e8b\u4ef6","debounce":"\u9632\u6296","ripple":"\u6c34\u6ce2\u7eb9\u6548\u679c","elevation":"\u5c42\u7ea7\u9634\u5f71","anchor":"\u951a\u70b9","copy":"\u62f7\u8d1d","longpress":"\u957f\u6309","store":"\u72b6\u6001\u7ba1\u7406","utils":"\u5e38\u7528\u5de5\u5177\u5e93"},"page":{"usage":"\u7528\u6cd5","default-usage":"\u9ed8\u8ba4\u7528\u6cd5","individual-usage":"\u72ec\u7acb\u7528\u6cd5","demo":"\u4f8b\u5b50","apis":"APIs","sass":"Sass\u53d8\u91cf","icons":"\u56fe\u6807\u96c6","colors":"\u8c03\u8272\u677f","icon-list":"Material \u56fe\u6807\u96c6","color-palette":"Material \u8c03\u8272\u677f"}}')},VrLe:function(t,e){t.exports='New in 8.24.0
<ui-pagination\n v-model="page"\n :total="total"\n show-total\n position="center"\n></ui-pagination>\n
export default {\n data() {\n return {\n page: 1,\n total: 100\n };\n }\n};\n
'},Vt7N:function(t,e,o){(function(t){var d="undefined"!==typeof t&&t||"undefined"!==typeof self&&self||window,n=Function.prototype.apply;function l(t,e){this._id=t,this._clearFn=e}e.setTimeout=function(){return new l(n.call(setTimeout,d,arguments),clearTimeout)},e.setInterval=function(){return new l(n.call(setInterval,d,arguments),clearInterval)},e.clearTimeout=e.clearInterval=function(t){t&&t.close()},l.prototype.unref=l.prototype.ref=function(){},l.prototype.close=function(){this._clearFn.call(d,this._id)},e.enroll=function(t,e){clearTimeout(t._idleTimeoutId),t._idleTimeout=e},e.unenroll=function(t){clearTimeout(t._idleTimeoutId),t._idleTimeout=-1},e._unrefActive=e.active=function(t){clearTimeout(t._idleTimeoutId);var e=t._idleTimeout;e>=0&&(t._idleTimeoutId=setTimeout((function(){t._onTimeout&&t._onTimeout()}),e))},o("dAAR"),e.setImmediate="undefined"!==typeof self&&self.setImmediate||"undefined"!==typeof t&&t.setImmediate||this&&this.setImmediate,e.clearImmediate="undefined"!==typeof self&&self.clearImmediate||"undefined"!==typeof t&&t.clearImmediate||this&&this.clearImmediate}).call(this,o("IFD9"))},VyjJ:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-grid>` props with default value.\n UiGrid: {\n // some props\n }\n});\n
'},"W0l+":function(t,e){t.exports='<ui-image-list :text-protection="labelsType === 2">\n <ui-image-item\n v-for="i in 15"\n :key="i"\n :bg-image="`@/assets/photos/3x2/${i}.jpg`"\n >\n <ui-image-text v-if="labelsType">Text label</ui-image-text>\n </ui-image-item>\n</ui-image-list>\n
export default {\n data() {\n return {\n labelsType: 1\n };\n }\n};\n
'},W4Tv:function(t,e){t.exports='<ui-tree\n v-model="selectedValue"\n :data="treeData"\n :data-format="dataFormat"\n :max-level="2"\n multiple\n>\n <p>selectedValue: {{ selectedValue }}</p>\n</ui-tree>\n
export default {\n data() {\n return {\n dataFormat: { label: 'title', value: 'key' },\n treeData: [],\n selectedValue: []\n };\n }\n};\n
'},W5QU:function(t,e){t.exports='Material Design's text sizes and styles were developed to balance content density and reading comfort under typical usage conditions.
'},WA2x:function(t,e){t.exports='@use 'balm-ui/components/side-sheet' with (\n $width: 40%,\n $mobile-width: 80%,\n $background: white,\n $border-left-radius: 0,\n\n $scrim-color: on-surface,\n $scrim-opacity: 0.32\n);\n
'},WIne:function(t,e){t.exports='<ui-textfield>\n Your name\n <template #before>\n <ui-textfield-icon>event</ui-textfield-icon>\n </template>\n</ui-textfield>\n<ui-textfield>\n Your name\n <template #after>\n <ui-textfield-icon>delete</ui-textfield-icon>\n </template>\n</ui-textfield>\n\n<!-- Custom leading/trailing icon -->\n<ui-textfield outlined with-leading-icon>\n Your other name\n <template #before="{ iconClass }">\n <span :class="iconClass">\n <i class="fa fa-smile-o fa-lg"></i>\n </span>\n </template>\n</ui-textfield>\n<ui-textfield outlined with-trailing-icon>\n Your other name\n <template #after="{ iconClass }">\n <span :class="iconClass">\n <i class="fa fa-close fa-lg"></i>\n </span>\n </template>\n</ui-textfield>\n
'},WV8m:function(t,e){t.exports='<ui-editor></ui-editor>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
model (v-model ) | string | '' | Mandatory. | |
options | object | {} | See Quill options. | |
toolbar | array, string | null | Custom or 'full' editor toolbar. | |
placeholder | string | null | Placeholder text to show when editor is empty. | |
readonly | boolean | false | Whether to instantiate the editor to read-only mode. | |
theme | string | 'snow' | Name of theme to use. | |
toolbarIcons | object | {} | Custom toolbar icons. | 8.6.0 |
toolbarTips | object | {} | Custom toolbar tooltips. | 8.8.0 |
toolbarOptions | object | { font: [], size: [], lineheight:[] } | Custom toolbar options of the Font Famliy, Font Size and Line Height. | 8.6.0 |
toolbarHandlers | object | {} | Custom toolbar handlers. | |
customImageHandler | boolean | false | Enable custom image handler. | |
emotions | array | [] | The emoticon extension. Supports emoji and image . | |
withCounter | boolean | false | Styles the editor with an internal character counter. | 8.6.0 |
extension | false , object | false | Custom extension for Quill. |
interface Editor {\n theme: 'bubble' | 'snow';\n}\n
toolbar
propalign
/direction
/indent
background
/color
/font
/size
blockquote
/code-block
/header
/list
bold
/italic
/link
/script
/strike
/underline
image
/video
font
/size
/lineheight
: custom Font Famliy, Font Size and Line Heightimage
: custom image upload handleremoji
: emoji moduledivider
: horizontal ruletextindent
: like indent
, but for inlinelinkoff
: remove all links in editorcounter
: character counter moduleundo
/redo
: built-in undo/redo handlingselectall
: select all content in editortoolbarOptions
& emotions
format for global/path/to/app/scripts/config/editor.js
const toolbarTips = {\n header: 'Headline',\n font: 'Font Famliy',\n size: 'Font Size',\n lineheight: 'Line Height',\n bold: 'Bold',\n italic: 'Italic',\n underline: 'Underline',\n color: 'Text Color',\n background: 'Background Color',\n align: {\n default: 'Left Align',\n center: 'Center Align',\n right: 'Right Align',\n justify: 'Justify Align'\n },\n list: {\n ordered: 'Ordered List',\n bullet: 'Bullet List'\n },\n indent: {\n '+1': 'Increase Indent',\n '-1': 'Decrease Indent'\n },\n blockquote: 'Blockquote',\n emoji: 'Emoji'\n};\n\nconst toolbarOptions = {\n // To customize Font Family, you need to configure the Sass variable `$font-family`\n font: [\n 'Arial',\n 'Arial Black',\n 'Comic Sans MS',\n 'Courier New',\n 'Tahoma',\n 'Georgia',\n 'Helvetica',\n 'Segoe UI',\n 'Impact',\n 'Times New Roman',\n 'Verdana'\n ],\n size: [\n '8px',\n '9px',\n '10px',\n '11px',\n '12px',\n '13px',\n '14px',\n '16px',\n '18px',\n '24px',\n '36px',\n '48px',\n '60px',\n '72px',\n '96px'\n ],\n lineheight: [\n '1',\n '1.2',\n '1.5',\n '1.6',\n '1.8',\n '2',\n '2.4',\n '2.8',\n '3',\n '4',\n '5'\n ]\n};\n\nconst emotions = [\n {\n type: 'image',\n title: 'Default',\n content: [\n {\n name: 'oo',\n alt: '\u574f\u7b11',\n src: 'https://v8.material.balmjs.com/images/emoji/p_huaixiao.png'\n },\n {\n name: 'xx',\n alt: '\u8214\u5c4f',\n src: 'https://v8.material.balmjs.com/images/emoji/p_tian.png'\n }\n ]\n },\n {\n type: 'emoji',\n title: 'emoji',\n content: [\n {\n name: 'smile',\n value: '\ud83d\ude00'\n },\n {\n name: 'cry',\n value: '\ud83d\ude06'\n }\n ]\n },\n {\n type: 'image',\n title: 'Custom',\n content: [\n {\n name: 'yy',\n alt: '\u795e\u517d',\n src: 'https://v8.material.balmjs.com/images/emoji/g_shenshou.gif'\n },\n {\n name: 'zz',\n alt: '\u6d6e\u4e91',\n src: 'https://v8.material.balmjs.com/images/emoji/g_fuyun.gif'\n }\n ]\n }\n];\n\nexport { toolbarTips, toolbarOptions, emotions };\n
/path/to/app/scripts/main.js
import Vue from 'vue';\nimport { toolbarTips, toolbarOptions, emotions } from '@/config/editor';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n UiEditor: {\n toolbarTips,\n toolbarOptions,\n emotions\n }\n});\n
toolbarHandlers
prop{\n toolbar: ['customFormat'],\n toolbarHandlers: {\n customFormat: (quill, value) => {};\n }\n}\n
quill.insert(customFormat, value) => {}
: insert content into the editorquill.insert('html', content)
: insert html into the editor (New in 8.9.0)<ui-editor ref="editor" v-model="content"></ui-editor>\n
this.$refs.editor.decodeEmoji(content)
: get back-end data \u2192 set front-end viewthis.$refs.editor.encodeEmoji(html)
: submit front-end data \u2192 save back-end dataName | Props | Description |
---|---|---|
toolbar | The toolbar slot holds the custom format buttons and can contain HTML. |
Name | Type | Description |
---|---|---|
change | function(content: string) | Emits when the editor text content is changed. |
file-change | function(file, insert) | customImageHandler required. (Insert uploaded image content into the editor by insert(url) function) |
NOTE: If you are not using
v-model
, you should listen for the editor using@change
and update themodel
prop.
Automatic
<ui-editor v-model="content"></ui-editor>\n
Manual
<ui-editor\n :model="content"\n @change="$balmUI.onChange('content', $event)"\n></ui-editor>\n
@use 'balm-ui/components/core';\n@use 'balm-ui/components/bottom-sheet/bottom-sheet';\n
import Vue from 'vue';\nimport UiBottomSheet from 'balm-ui/components/bottom-sheet';\n\nVue.use(UiBottomSheet);\n
'},WprK:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},WynS:function(t,e){t.exports='<p>\n <ui-switch v-model="loading"></ui-switch>\n</p>\n\n<ui-skeleton\n :loading="loading"\n active\n :avatar="{ size: 'large', shape: 'square' }"\n>\n <ui-list>\n <ui-item v-for="i in 3" :key="i">Hello BalmJS {{ i }}</ui-item>\n </ui-list>\n</ui-skeleton>\n
export default {\n data() {\n return {\n loading: true\n };\n }\n};\n
'},X9hg:function(t,e){t.exports='<ui-button v-debounce="config" raised>Click</ui-button>\n
export default {\n data() {\n return {\n config: {\n callback: () => {\n this.onClick();\n }\n }\n };\n },\n methods: {\n onClick() {\n console.log('clicked');\n }\n }\n};\n
'},XAZC:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite the param of `$tt()`.\n $typography: ['custom-style-1', 'custom-style-2']\n});\n
'},XBzc:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiButton from 'balm-ui/components/button';\nimport vButton from 'balm-ui/directives/button'; // Optional\n\n// Optional. Overwrite `<ui-button>` props with default value.\nVue.use(UiButton, {\n // some props\n});\nVue.directive(vButton.name, vButton); // Optional\n
'},XIHF:function(t,e){t.exports=''},XXab:function(t,e){t.exports='New in 8.61.0
<ui-alert state="success">Success Message</ui-alert>\n<ui-alert state="info">Info Message</ui-alert>\n<ui-alert state="warning" closable>Warning Message</ui-alert>\n<ui-alert state="error">Error Message</ui-alert>\n
'},XaOO:function(t,e){t.exports='Validation Method
interface VueInstance {\n $validate(\n formData: { [fieldName: string]: any },\n customFieldset?: string[]\n ): BalmUIValidationResult;\n}\n
Param | Type | Default | Description |
---|---|---|---|
formData | object | {} | Mandatory. A form data object. |
customFieldset | array | [] | Optional. The field names of the validations. |
Validation Result
interface BalmUIValidationResult {\n valid: boolean;\n validFields: string[];\n invalidFields: string[];\n message: string;\n messages: string[];\n validMsg: { [fieldName: string]: string };\n}\n
Result | Type | Description |
---|---|---|
valid | boolean | The validator result. |
validFields | array | Valid fields. |
invalidFields | array | Invalid fields. |
message | string | The message of the first invalid field. |
messages | array | The messages of all invalid fields. |
validMsg | object | The messages as an object. (Same format as formData ) |
NOTE:
validMsg
can be used with<ui-textfield-helper>
/<ui-select-helper>
to trigger the<ui-textfield>
/<ui-select>
invalid styling
Validation Rule
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n
// Custom local validation rules\nconst validations = [\n {\n key: 'fieldName1',\n label: 'Field Label',\n validator: 'required, customRule1',\n customRule1: {\n validate(fieldValue, formData) {\n // Validation method\n return true;\n },\n message: '%s is required' // The '%s' symbol will automatically replace the label text\n }\n // More custom rules\n // customRule2: { ... }\n }\n // More form fields\n // {\n // key: 'fieldName2',\n // validator: 'required'\n // }\n];\n\nexport default {\n validations,\n data() {\n return {\n formData: {\n fieldName1: '',\n fieldName2: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let { valid, validFields, invalidFields, message, messages, validMsg } =\n this.$validate(this.formData);\n }\n }\n};\n
// New in 8.23.0\ninterface BalmUIValidations {\n clear(): void;\n get(fieldName?: string): BalmUIValidationRule[] | BalmUIValidationRule; // show current validation rule(s)\n set(fieldName: string, validationRule: BalmUIValidationRule): void;\n set(validations: BalmUIValidationRule[]): void;\n}\n\ninterface VueInstance {\n $validations: BalmUIValidations;\n}\n
is deprecated in 8.17.0$resetValidations()
is deprecated in 8.23.0$setValidations()
Param | Type | Default | Description |
---|---|---|---|
fieldName | string | '' | A field name of the formData . (BalmUI validator rule key) |
validation | object | {} | A validation. (BalmUI validator rule value) |
validations | object | {} | (See) BalmUI validator rules. |
computed
export default {\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n computed: {\n validations() {\n return this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n }\n },\n methods: {\n onSubmit() {\n let result = this.$validate(this.formData);\n // ...\n }\n }\n};\n
customFieldset
export default {\n validations: [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ],\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n };\n },\n methods: {\n onSubmit() {\n let customFieldset = this.step === 1 ? ['username'] : ['password'];\n let result = this.$validate(this.formData, customFieldset);\n // ...\n }\n }\n};\n
$validations.set
for validationsexport default {\n data() {\n return {\n step: 1,\n formData: {\n username: '',\n password: ''\n }\n }\n },\n beforeDestroy() {\n this.$validations.clear(); // IMPORTANT!!!\n },\n methods: {\n onSubmit() {\n let customValidations =\n this.step === 1\n ? [\n {\n key: 'username',\n label: 'Username',\n validator: 'required'\n }\n ]\n : [\n {\n key: 'password',\n label: 'Password',\n validator: 'required'\n }\n ];\n this.$validations.set(customValidations);\n\n let result = this.$validate(this.formData);\n // ...\n }\n};\n
$alert(message)
$alert(options)
interface VueInstance {\n $alert(options: string | object): Promise<void>;\n}\n
Option | Type | Default | Description |
---|---|---|---|
className | string | '' | The custom class name for the alert dialog. |
title | string | '' | The title of the alert dialog. |
state | string | '' | State type. |
stateOutlined | boolean | false | Show outlined state. |
message | string | '' | The content to be displayed in the alert dialog. |
raw | boolean | false | Rendered plain HTML. |
buttonText | string | 'OK' | Alert button content. |
callback | function | false | Handle some event when the alert button is clicked. |
interface AlertDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Usage 1
$alert({\n message,\n callback() {\n // ...\n }\n});\n
Usage 2 (Recommended)
$alert(message).then(() => {\n // ...\n});\n
$alert
without .vue
componentNew in 8.1.0
import { useAlert } from 'balm-ui';\n// OR\n// import { useAlert } from 'balm-ui/plugins/alert';\n\nconst $alert = useAlert();\n$alert('Hello BalmUI');\n
'},XfPe:function(t,e){t.exports='<ui-card outlined class="demo-card">\n <div :class="[$tt('subtitle2'), 'demo-card-article-group-heading']">\n Headlines\n </div>\n <ui-list-divider></ui-list-divider>\n\n <template v-for="(item, index) in list">\n <a v-ripple :key="`item${index}`" class="demo-card-article">\n <h2 :class="[$tt('headline5'), 'demo-card-article__title']">\n {{ item.title }}\n </h2>\n <p class="demo-card-article__snippet">{{ item.content }}</p>\n </a>\n <ui-list-divider :key="`divider${index}`"></ui-list-divider>\n </template>\n\n <ui-card-actions full-bleed>\n <ui-button class="demo-card-action">\n All Business Headlines\n <template #after>\n <ui-icon>arrow_forward</ui-icon>\n </template>\n </ui-button>\n </ui-card-actions>\n</ui-card>\n
export default {\n data() {\n return {\n list: [\n {\n title: 'Copper on the rise',\n content:\n 'Copper price soars amid global market optimism and increased demand.'\n },\n {\n title: 'U.S. tech startups rebound',\n content:\n 'Favorable business conditions have allowed startups to secure more fundraising deals compared to last year.'\n },\n {\n title: `Asia's clean energy ambitions`,\n content:\n 'China plans to invest billions of dollars for the development of over 300 clean energy projects in Southeast Asia.'\n }\n ]\n };\n }\n};\n
/* Sass code */\n.demo-card {\n width: 350px;\n margin: 48px;\n}\n\n.demo-card-article-group-heading {\n @include mdc-theme-prop(color, text-secondary-on-light);\n\n padding: 8px 16px;\n}\n\n.demo-card-article {\n padding: 16px;\n text-decoration: none;\n color: inherit;\n}\n\n.demo-card-article__title {\n margin: 0 0 4px 0;\n}\n\n.demo-card-article__snippet {\n @include mdc-theme-prop(color, text-secondary-on-light);\n\n margin: 0;\n}\n
'},Xgyy:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/bottom-navigation/bottom-navigation';\n@use 'balm-ui/components/tabs/tabs';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiBottomNavigation from 'balm-ui/components/bottom-navigation';\nimport UiTabsComponents from 'balm-ui/components/tabs';\n\n// Optional. Overwrite `<ui-bottom-navigation>` props with default value.\nVue.use(UiBottomNavigation, {\n // some props\n});\nVue.use(UiTabsComponents);\n
'},Xl1O:function(t,e){t.exports='<ui-datepicker></ui-datepicker>\n
<ui-datepicker>
type in config.mode
prop
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | Styles the datepicker as an outlined text field. (label or placeholder required) | |
model (v-model ) | string, number, array | '' | Mandatory. | |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . | |
label | string | '' | A text caption or description for the datepicker, which use the input's placeholder attribute instead. | |
placeholder | string | null | The placeholder attribute of the <input> . | |
disabled | boolean | false | Styles the datepicker as a disabled text field. | |
required | boolean | false | Styles the datepicker as a required text field. | |
fullwidth | boolean | false | Styles the datepicker as a full width text field. | |
endAligned | boolean | false | Styles the datepicker with an end-aligned input. | |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. | |
withLeadingIcon | boolean, string | false | Styles the datepicker as a text field with a leading icon. (Use with before slot) | |
withTrailingIcon | boolean, string | false | Styles the datepicker as a text field with a trailing icon. (Use with after slot) | |
config | object | {} | See Flatpickr configuration. | |
toggle | boolean | false | Show calendar icon button. | |
clear | boolean | false | Show clear icon button. | |
monthOptions | object | {} | See Flatpickr month select options. | 7.4.2 |
<ui-datepicker :config="config"></ui-datepicker>\n
import lang from 'flatpickr/dist/l10n/zh.js';\n\nexport default {\n data() {\n return {\n config: {\n locale: lang.zh\n }\n };\n }\n};\n
Name | Props | Description |
---|---|---|
default | The default slot holds the label for the datepicker. | |
before | iconClass | The before slot holds a custom leading icon. |
after | iconClass | The before slot holds a custom trailing icon. (When withTrailingIcon = true ) |
toggle | The custom toggle icon button. (When withTrailingIcon = false ) | |
clear | The custom clear icon button. (When withTrailingIcon = false ) |
Name | Type | Description |
---|---|---|
change | function(value: string|array) | Emits when the datepicker value is changed. |
NOTE: If you are not using
v-model
, you should listen for the datepicker using@change
and update themodel
prop.
Automatic
<ui-datepicker v-model="value"></ui-datepicker>\n
Manual
<ui-datepicker\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-datepicker>\n
<div class="page--top-app-bar">\n <ui-top-app-bar\n content-selector="#content-main"\n :type="type"\n :title="title"\n @nav="$balmUI.onShow('openDrawer')"\n >\n <template #toolbar="{ toolbarItemClass }">\n <ui-icon-button\n :class="toolbarItemClass"\n icon="file_download"\n ></ui-icon-button>\n <ui-icon-button :class="toolbarItemClass" icon="print"></ui-icon-button>\n <ui-icon-button\n :class="toolbarItemClass"\n icon="bookmark"\n ></ui-icon-button>\n </template>\n </ui-top-app-bar>\n\n <ui-drawer v-model="openDrawer" type="modal">\n <ui-drawer-header>\n <ui-drawer-title>Header here</ui-drawer-title>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-list>\n <ui-item active>\n <ui-item-first-content>\n <ui-icon>arrow_back</ui-icon>\n </ui-item-first-content>\n <ui-item-text-content>Back</ui-item-text-content>\n </ui-item>\n <ui-list-divider></ui-list-divider>\n </ui-list>\n </ui-drawer-content>\n </ui-drawer>\n\n <div id="content-main">\n <p v-for="i in 36" :key="i">Content {{ i }}</p>\n </div>\n</div>\n
export default {\n data() {\n return {\n type: 0,\n title: 'Hello BalmUI',\n openDrawer: false\n };\n }\n};\n
'},YC43:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},YFMG:function(t,e){t.exports='\u5217\u8868\u662f\u6587\u672c\u6216\u56fe\u50cf\u7684\u8fde\u7eed\u5782\u76f4\u7d22\u5f15\u3002
'},YFsW:function(t,e){t.exports='\u26a0\ufe0f The
deprecated-
prefix is required inbalm-ui
>= 8.33.0
@use '@material/list' with (\n $deprecated-divider-color-on-light-bg: rgba(0, 0, 0, 0.12),\n $deprecated-divider-color-on-dark-bg: rgba(255, 255, 255, 0.2),\n $deprecated-side-padding: 16px,\n $deprecated-trailing-padding: 16px,\n $deprecated-text-offset: 72px,\n $deprecated-text-disabled-opacity: theme-color.text-emphasis(disabled),\n $deprecated-text-disabled-color: on-surface,\n $deprecated-text-selected-color: primary,\n\n $deprecated-single-line-height: 48px,\n $deprecated-single-line-minimum-height: 24px,\n $deprecated-single-line-maximum-height: $deprecated-single-line-height,\n $deprecated-single-line-density-scale: density-variables.$default-scale,\n $deprecated-single-line-density-config: (\n height: (\n default: $deprecated-single-line-height,\n maximum: $deprecated-single-line-maximum-height,\n minimum: $deprecated-single-line-minimum-height,\n ),\n ),\n\n $deprecated-item-primary-text-baseline-height: 28px,\n $deprecated-item-primary-text-baseline-height-with-graphic: 32px,\n $deprecated-item-secondary-text-baseline-height: 20px,\n $deprecated-dense-item-primary-text-baseline-height: 24px,\n\n $deprecated-two-line-height: 64px,\n $deprecated-two-line-graphic-height: 72px,\n $deprecated-two-line-icon-top-margin: 16px,\n\n $deprecated-deprecated-graphic-config: (\n graphic-size: (\n width: 24px,\n height: 24px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-textual-variant-config: (\n single-line-height: $deprecated-single-line-height,\n graphic-size: (\n width: 24px,\n height: 24px,\n ),\n leading-padding: 16px,\n text-offset: 16px,\n ),\n\n $deprecated-icon-variant-config: (\n single-line-height: 56px,\n graphic-size: (\n width: 24px,\n height: 24px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-avatar-variant-config: (\n single-line-height: 56px,\n graphic-size: (\n width: 40px,\n height: 40px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-thumbnail-variant-config: (\n single-line-height: 56px,\n graphic-size: (\n width: 40px,\n height: 40px,\n ),\n leading-padding: 16px,\n text-offset: 72px,\n ),\n\n $deprecated-image-variant-config: (\n single-line-height: 72px,\n graphic-size: (\n width: 56px,\n height: 56px,\n ),\n leading-padding: 16px,\n text-offset: 88px,\n ),\n\n $deprecated-video-variant-config: (\n single-line-height: 72px,\n graphic-size: (\n width: 100px,\n height: 56px,\n ),\n leading-padding: 0px,\n text-offset: 116px,\n )\n);\n
'},"Z+sm":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/chips/chips';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiChipsComponents from 'balm-ui/components/chips';\n\nVue.use(UiChipsComponents, {\n // Optional. Overwrite `<ui-chips>` props with default value.\n UiChips: {\n // some props\n }\n});\n
'},"Z/7x":function(t,e){t.exports='<ui-autocomplete\n v-model="keywords"\n outlined\n :source="source"\n placeholder="Type 'a', then 'b'"\n delay="500"\n remote\n auto-focus\n @search="onSearch"\n></ui-autocomplete>\n
export default {\n data() {\n return {\n keywords: '',\n source: []\n };\n },\n methods: {\n async onSearch(keywords) {\n let response = await this.$http.get('/api/search', {\n params: {\n text: keywords\n }\n });\n let { data } = response;\n // mock data\n this.source = data[keywords] ? data[keywords] : [];\n }\n }\n};\n
'},Z6Yw:function(t,e){t.exports='<ui-tab-bar><!-- the tab components --></ui-tab-bar>\n
<ui-tab-bar>
& <ui-tabs>
\u5171\u7528 PropsName | Type | Default | Description |
---|---|---|---|
active (v-model ) | number | 0 | \u6807\u7b7e\u9875\u7d22\u5f15\u503c |
<ui-tab-bar>
SlotsName | Slots | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u7ec4\u4ef6\u53ca HTML |
<ui-tab-bar>
& <ui-tabs>
\u5171\u7528 EventsName | Type | Description |
---|---|---|
change | function(activeIndex: number) | \u6807\u7b7e\u9875\u7d22\u5f15\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6807\u7b7e\u9875\u7d22\u5f15\u5e76\u66f4\u65b0active
\u5c5e\u6027
\u81ea\u52a8
<ui-tab-bar v-model="activeIndex"></ui-tab-bar>\n<!-- \u6216 -->\n<ui-tabs v-model="activeIndex"></ui-tabs>\n
\u624b\u52a8
<ui-tab-bar\n :active="activeIndex"\n @change="$balmUI.onChange('activeIndex', $event)"\n></ui-tab-bar>\n<!-- \u6216 -->\n<ui-tabs\n :active="activeIndex"\n @change="$balmUI.onChange('activeIndex', $event)"\n></ui-tabs>\n
<ui-textfield><!-- the label text --></ui-textfield>\n
<ui-textfield>
Types
0
: 'filled'
1
: 'outlined'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Text field types. |
outlined | boolean | false | Styles the text field as an outlined text field. (label or placeholder required) |
model (v-model ) | string, number | '' | Mandatory. |
inputType | string | 'text' | Native <input> types: text , number , password , etc. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
label | string | '' | A text caption or description for the text field, which use the input's placeholder attribute instead. |
placeholder | string | null | The placeholder attribute of the <input> . |
disabled | boolean | false | Styles the text field as a disabled text field. |
required | boolean | false | Styles the text field as a required text field. |
fullwidth | boolean | false | Styles the text field as a full width text field. |
endAligned | boolean | false | Styles the text field with an end-aligned input. |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. |
withLeadingIcon | boolean | false | Styles the text field as a text field with a leading icon. |
withTrailingIcon | boolean | false | Styles the text field as a text field with a trailing icon. |
prefixText | string | '' | Sets the text content of the prefix. |
suffixText | string | '' | Sets the text content of the suffix. |
withCounter | boolean | false | Styles the text area as a text area with an internal character counter. |
helperTextId | string | null | Required for the id attribute of the <ui-textfield-helper> . |
attrs | object | {} | Other attributes for <input> or <textarea> . |
NOTE:
withLeadingIcon
andwithTrailingIcon
are only used for (non<ui-textfield-icon>
) custom leading/trailing icons, and generally do not need to be configured.
In addition to the above, the following properties proxy to the input or textarea elements' properties of the same name:
pattern
minlength
maxlength
: Required for character countermin
max
step
rows
cols
Name | Props | Description |
---|---|---|
default | The default slot holds the label for the text field. | |
before | iconClass | The before slot holds a custom leading icon. |
after | iconClass | The before slot holds a custom trailing icon. |
Name | Type | Description |
---|---|---|
focus | function(event: object) | Emits when the text field is focused. |
keydown | function(event: object) | Emits when a key is pressed in the text field. |
input | function(value: string) | Emits when the text field value is changed. |
change | function(event: object) | Emits when a change in the text field value is committed. |
enter | function(value: string) | Emits when the Enter key is pressed in the input. |
blur | function(event: object) | Emits when the text field loses focus. |
NOTE: If you are not using
v-model
, you should listen for the text field using@input
and update themodel
prop.
Automatic
<ui-textfield v-model="value"></ui-textfield>\n
Manual
<ui-textfield\n :model="value"\n @input="$balmUI.onChange('value', $event)"\n></ui-textfield>\n
<ui-spinner></ui-spinner>\n
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Puts the circular progress indicator in an indeterminate state. |
progress | number | 0 | Sets the progress bar to this value. Value should be between [0, 1] . |
size | string | 'large' | To set the circular progress size. |
fourColored | boolean | false | You may choose to have the indicator in inderminate state animate through 4 colors. |
label | string | '' | Label indicating how the progress bar should be announced to the user. |
closed | boolean | false | Hides the circular progress indicator. |
Size value:
interface Spinner {\n size: 'large' | 'L' | 'medium' | 'M' | 'small' | 'S';\n}\n
@use 'balm-ui/components/core';\n@use 'balm-ui/components/drawer/drawer';\n@use 'balm-ui/components/list/list';\n
import Vue from 'vue';\nimport UiDrawerComponents from 'balm-ui/components/drawer';\nimport UiListComponents from 'balm-ui/components/list';\n\nVue.use(UiDrawerComponents);\nVue.use(UiListComponents);\n
'},ZqYw:function(t,e){t.exports='<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Time.."\n></ui-datepicker>\n
export default {\n data() {\n return {\n date: '13:20',\n config: {\n mode: 'time'\n // time_24hr: true\n }\n };\n }\n};\n
'},"ZsM+":function(t,e){t.exports='<div v-ripple></div>\n
\u6ce8\u610f\uff1a\u4e0d\u652f\u6301\u52a8\u6001 class
v-ripple="color"
v-ripple:cssOnly="color"
Value | Type | Default | Description |
---|---|---|---|
color | number, string | undefined | \u8bbe\u7f6e\u6ce2\u7eb9\u989c\u8272 |
1
\u6216 'primary'
2
\u6216 'secondary'
v-ripple.unbounded="color"
v-ripple:cssOnly.unbounded="color"
<ui-snackbar><!-- the message text --></ui-snackbar>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
actionType | number | 0 | \u8bbe\u7f6e\u5e95\u90e8\u6d88\u606f\u6846\u7684\u52a8\u4f5c\u7c7b\u578b\uff080 : \u52a8\u4f5c\u6309\u94ae, 1 : \u5173\u95ed\u56fe\u6807\uff09 | |
open (v-model ) | boolean | false | \u5e95\u90e8\u6d88\u606f\u6846\u663e\u793a\u72b6\u6001 | |
timeoutMs | number | 5000 | \u81ea\u52a8\u5173\u95ed\u7684\u8d85\u65f6\u65f6\u95f4\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u503c\u5fc5\u987b\u5728 4000 \u548c 10000 \uff08\u6216 -1 \u7528\u4e8e\u7981\u6b62\u81ea\u52a8\u5173\u95ed) | |
message | string | '' | \u6d88\u606f\u6587\u672c | |
actionButtonText | string | '' | \u64cd\u4f5c\u6309\u94ae/\u56fe\u6807\u5143\u7d20\uff08\u5982\u679c\u5b58\u5728\uff09 | |
stacked | boolean | false | \u5c06\u64cd\u4f5c\u6309\u94ae/\u56fe\u6807\u653e\u5728\u6d88\u606f\u4e0b\u65b9\u800c\u4e0d\u662f\u65c1\u8fb9 | |
leading | boolean | false | \u5c06\u5e95\u90e8\u6d88\u606f\u6846\u653e\u7f6e\u5728\u5c4f\u5e55\u7684\u524d\u7aef\uff08\u5728 LTR \u4e2d\u4e3a\u5de6\uff0c\u5728 RTL \u4e2d\u4e3a\u53f3\uff09\uff0c\u800c\u4e0d\u662f\u5c45\u4e2d\u3002\uff08\u4ec5\u9650\u5e73\u677f\u7535\u8111\u548c\u53f0\u5f0f\u673a\uff09 | |
position | string | 'bottom' | \u8bbe\u7f6e\u5e95\u90e8\u6d88\u606f\u6846\u7684\u4f4d\u7f6e | 8.30.0 |
interface Snackbar {\n position: 'bottom' | 'center' | 'top';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6d88\u606f\u6587\u672c\u53ca HTML | |
action | actionClass | \u81ea\u5b9a\u4e49\u52a8\u4f5c\u6309\u94ae |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u5e95\u90e8\u6d88\u606f\u6846\u9690\u85cf\u65f6\u89e6\u53d1 |
closed | function() | \u5e95\u90e8\u6d88\u606f\u6846\u5173\u95ed\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5e95\u90e8\u6d88\u606f\u6846\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-snackbar v-model="open"></ui-snackbar>\n
\u624b\u52a8
<ui-snackbar\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-snackbar>\n
\u590d\u9009\u6846\u5141\u8bb8\u7528\u6237\u4ece\u4e00\u7ec4\u4e2d\u9009\u62e9\u4e00\u4e2a\u6216\u591a\u4e2a\u9009\u9879\u3002\u590d\u9009\u6846\u53ef\u7528\u4e8e\u6253\u5f00\u6216\u5173\u95ed\u9009\u9879\u3002
'},aCdw:function(t,e){t.exports='New in 8.31.0
<a v-button></a>\n
v-button
v-button.outlined
v-button.raised
v-button.unelevated
<ui-card class="demo-card demo-card--music">\n <ui-card-content class="demo-card__primary-action">\n <div class="demo-card__music-row">\n <ui-card-media\n square\n class="demo-card__media demo-card__media--music"\n ></ui-card-media>\n <div class="demo-card__music-info">\n <div :class="[$tt('headline5'), 'demo-card__music-title']">Rozes</div>\n <div class="demo-card__music-artist">Under the Grave</div>\n <div class="demo-card__music-year">(2016)</div>\n </div>\n </div>\n </ui-card-content>\n <ui-list-divider></ui-list-divider>\n <ui-card-actions>\n <ui-card-buttons class="demo-card__action-buttons--text-only">\n Rate this album\n </ui-card-buttons>\n <ui-card-icons>\n <ui-icon\n v-for="i in 5"\n :key="i"\n class="demo-card__action-icon--star"\n :title="`${i} star${i > 1 ? 's' : ''}`"\n >\n star_border\n </ui-icon>\n </ui-card-icons>\n </ui-card-actions>\n</ui-card>\n
/* Sass code */\n.demo-card {\n width: 350px;\n margin: 48px;\n}\n\n.demo-card__media {\n background-image: url('../images/1-1.jpg');\n}\n\n.demo-card--music {\n @include mdc-card-corner-radius(24px 4px);\n\n @include mdc-rtl {\n @include mdc-card-corner-radius(4px 24px);\n }\n}\n\n.demo-card__music-row {\n display: flex;\n border-top-left-radius: inherit;\n\n @include mdc-rtl {\n border-top-left-radius: 0;\n border-top-right-radius: inherit;\n }\n}\n\n.demo-card__media--music {\n width: 110px;\n border-top-left-radius: inherit;\n\n @include mdc-rtl {\n border-top-left-radius: 0;\n border-top-right-radius: inherit;\n }\n}\n\n.demo-card__music-info {\n display: flex;\n flex-direction: column;\n padding: 8px 16px;\n}\n\n.demo-card__action-buttons--text-only {\n margin-left: 8px;\n}\n\n.demo-card__action-icon--star {\n margin-left: 4px;\n margin-right: 4px;\n cursor: pointer;\n}\n
'},aGWL:function(t,e){t.exports='import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},aKLO:function(t,e){t.exports='SASS
@use 'balm-ui/dist/balm-ui';\n
CSS
<!-- build:css css/vendors.css -->\n<link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n<!-- endbuild -->\n
'},anwz:function(t,e){t.exports='New in 4.3.0
<ui-form-field>\n <ui-checkbox></ui-checkbox>\n <label>Checkbox</label>\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean, array | false | Mandatory. |
indeterminate | boolean | false | Styles the checkbox as an indeterminate checkbox. |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . |
value | string, number | '' | The value attribute of the <input> . |
disabled | boolean | false | Styles the checkbox as a disabled checkbox. |
attrs | object | {} | Other attributes for <input> . |
Name | Type | Description |
---|---|---|
change | function(value: boolean|array) | Emits when the checkbox is changed. |
NOTE: If you are not using
v-model
, you should listen for the checkbox using@change
and update themodel
prop.
Automatic
<ui-checkbox v-model="value"></ui-checkbox>\n
Manual
<ui-checkbox\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-checkbox>\n
<ui-dialog-content><!-- the dialog content --></ui-dialog-content>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u5185\u5bb9\u53ca HTML |
<ui-card-icons><!-- the icon button components --></ui-card-icons>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the icon components and can contain HTML. |
<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Month.."\n :month-options="monthOptions"\n></ui-datepicker>\n
export default {\n data() {\n return {\n date: '',\n config: {\n mode: 'month' // New in `7.4.2`\n },\n monthOptions: {\n shorthand: true, // defaults to false\n dateFormat: 'm.y', // defaults to "F Y"\n altFormat: 'F Y' // defaults to "F Y"\n }\n };\n }\n};\n
'},"b/0I":function(t,e){t.exports='<ui-tab-scroller><!-- the tab components --></ui-tab-scroller>\n
Name | Type | Default | Description |
---|---|---|---|
scrollX | number | 0 | \u5f53\u524d\u7684\u6eda\u52a8\u503c |
align | string | '' | <ui-tabs> \u5171\u7528\u5c5e\u6027\u3002\u6807\u7b7e\u9875\u5bf9\u9f50\u65b9\u5f0f\u3002 |
interface TabScroller {\n align: 'start' | 'center' | 'end';\n}\n
Name | Slots | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u7ec4\u4ef6\u53ca HTML |
<ui-table></ui-table>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
data | array | [] | \u6570\u636e\u6e90 | |
thead | array | [] | \u6570\u636e\u8868\u5934\u90e8\u6e32\u67d3\u683c\u5f0f | |
tbody | array | [] | \u6570\u636e\u8868\u5185\u5bb9\u6e32\u67d3\u683c\u5f0f | |
tfoot | array | [] | \u6570\u636e\u8868\u5e95\u90e8\u6e32\u67d3\u683c\u5f0f | |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
rowCheckbox | boolean | false | \u5e26\u6709\u884c\u9009\u62e9\u7684\u6570\u636e\u8868 | |
rowCheckboxDisabled | function, boolean | false | \u6392\u9664\u9009\u4e2d\u884c\u7684\u6570\u636e | 8.52.0 |
selectedRows (v-model ) | array | [] | \u9009\u62e9\u884c\u7684\u7d22\u5f15\u6216 IDs\uff08\u5fc5\u987b\u8bbe\u7f6e rowCheckbox: true \uff09 | |
selectedKey | boolean, string | false | selectedRows \u4f7f\u7528\u81ea\u5b9a\u4e49\u952e\u5b57\u6bb5\uff0c\u9ed8\u8ba4\u4f7f\u7528\u884c\u7d22\u5f15\u3002 | |
rowIdPrefix | string | '' | \u5728\u884c\u5143\u7d20 <tr> \u4e0a\u7684 data-row-id \u5c5e\u6027\u503c\u7684\u524d\u7f00 | |
sortIconAlignEnd | boolean | false | \u8bbe\u7f6e\u6392\u5e8f\u56fe\u6807\u4f4d\u4e8e\u6807\u7b7e\u4e4b\u540e | |
showProgress | boolean | false | \u542f\u7528\u6570\u636e\u8868\u8fdb\u5ea6\u6307\u793a\u5668\u8868\u793a\u52a0\u8f7d\u6570\u636e\u4e2d | 8.16.0 |
fixedHeader | boolean | false | \u6570\u636e\u8868\u5934\u90e8\u56fa\u5b9a\u6a21\u5f0f | 8.16.0 |
defaultColWidth | number | 0 | \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u6bcf\u5217\u7684\u9ed8\u8ba4\u5bbd\u5ea6 | 8.16.0 |
scroll | object | { x: false, y: false } | \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u5bb9\u5668\u7684\u5927\u5c0f | 8.16.0 |
thead
& tbody
& tfoot
\u5c5e\u6027\u901a\u7528\u683c\u5f0f
interface TableCell {\n value: string; // \u5355\u5143\u683c\u5185\u5bb9\n numeric: boolean; // \u6570\u5b57\u5355\u5143\u683c\u5c45\u53f3\u663e\u793a\uff08\u76f8\u5f53\u4e8e `align: 'right'`\uff09\n align: 'left' | 'center' | 'right';\n class: string; // \u81ea\u5b9a\u4e49 class\n slot: string; // \u81ea\u5b9a\u4e49\u63d2\u69fd\n}\n
thead
\u683c\u5f0f
\u9ed8\u8ba4\uff08string[]
\uff09
[\n 'ID',\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n];\n
\u81ea\u5b9a\u4e49\uff08object[]
\u6216 object[][]
\uff09
interface Thead {\n sort: 'none' | 'asc' | 'desc'; // \u6392\u5e8f\n columnId: string; // \u6392\u5e8f\u5b57\u6bb5\uff1a\u4f8b\u5982 'id'\n rowspan: number;\n colspan: number;\n}\n
columnId
\u5b57\u6bb5\u662f7.0.0
\u65b0\u589e\u5b57\u6bb5\uff1b\u5982\u679cbalm-ui < 7.0.0
\uff0c\u8bf7\u4f7f\u7528by
\u5b57\u6bb5
[\n [\n {\n value: 'ID',\n rowspan: 2,\n sort: 'asc',\n columnId: 'id'\n },\n {\n value: 'Type1',\n colspan: 2,\n align: 'center'\n },\n {\n value: 'Type2',\n colspan: 3,\n align: 'center'\n },\n {\n value: 'Actions',\n rowspan: 2\n }\n ],\n [\n 'Dessert (100g serving)',\n 'Calories',\n 'Fat (g)',\n 'Carbs (g)',\n 'Protein (g)'\n ]\n];\n
tbody
\u683c\u5f0f
\u9ed8\u8ba4\uff08string[]
\uff09
['id', 'dessert', 'calories', 'fat', 'carbs', 'protein'];\n
\u81ea\u5b9a\u4e49\uff08object[]
\uff09
interface Tbody {\n field: string; // \u6570\u636e\u5b57\u6bb5\u540d\n fn: function; // \u7b80\u5355\u7684\u6570\u636e\u5904\u7406\n colClass: string; // <col> \u5143\u7d20\u7684 class (New in 8.16.0)\n fixed: 'left' \uff5c 'right'; // \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u4e2d\u5355\u5143\u683c\u7684\u4f4d\u7f6e (New in 8.16.0)\n width: number; // \u8bbe\u7f6e\u56fa\u5b9a\u6a21\u5f0f\u6570\u636e\u8868\u4e2d\u5355\u5143\u683c\u7684\u5bbd\u5ea6 (New in 8.16.0)\n}\n
[\n 'id',\n 'dessert',\n {\n field: 'calories',\n numeric: true,\n class: 'my-data'\n },\n {\n field: 'fat',\n fn: (data) => {\n return data.fat.toFixed(1);\n }\n },\n 'carbs',\n {\n field: 'protein',\n class: (data) => {\n return data.protein > 5 ? 'red' : 'green';\n }\n },\n {\n slot: 'actions'\n }\n];\n
<ui-table>\n <template #actions="{ data }">\n <ui-icon @click="show(data)">description</ui-icon>\n <ui-icon @click="edit(data)">edit</ui-icon>\n <ui-icon @click="remove(data)">delete</ui-icon>\n </template>\n</ui-table>\n
tfoot
\u683c\u5f0f\uff08object[]
\uff09
interface Tfoot {\n fnName: 'count' | 'sum' | 'avg' | 'max' | 'min'; // \u5e38\u7528\u7edf\u8ba1\u65b9\u6cd5\n fn: function; // \u7b80\u5355\u7684\u6570\u636e\u7ed3\u679c\u5904\u7406\n slot: string; // \u81ea\u5b9a\u4e49\u63d2\u69fd\n}\n
fnName
\u65b9\u6cd5\uff1acount
, sum
, avg
, max
, min
[\n {\n field: 'id',\n fnName: 'count'\n },\n null,\n {\n field: 'calories',\n fnName: 'sum'\n },\n {\n field: 'fat',\n fnName: 'avg'\n },\n {\n field: 'carbs',\n fnName: 'max'\n },\n {\n field: 'protein',\n fnName: 'min'\n }\n];\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5206\u9875\u7ec4\u4ef6\u53ca HTML | |
(custom-name) | \u5355\u5143\u683c\u81ea\u5b9a\u4e49\u63d2\u69fd |
Name | Type | Description | Version |
---|---|---|---|
selected | function(selectedRows: array) | \u9009\u62e9\u884c\u53d8\u5316\u65f6\u89e6\u53d1 | |
sorted | function(detail: object) | \u70b9\u51fb\u53ef\u6392\u5e8f\u8868\u5934\u65f6\u89e6\u53d1 | 8.58.0 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@selected
\u76d1\u542c\u6570\u636e\u8868\u9009\u62e9\u884c\u5e76\u66f4\u65b0selectedRows
\u5c5e\u6027
\u81ea\u52a8
<ui-table v-model="selectedRows" row-checkbox></ui-table>\n
\u624b\u52a8
<ui-table\n :selectedRows="selectedRows"\n row-checkbox\n @selected="$balmUI.onChange('selectedRows', $event)"\n></ui-table>\n
<ui-card-icons><!-- the icon button components --></ui-card-icons>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u6807\u6309\u94ae\u7ec4\u4ef6\u53ca HTML |
<ui-icon><!-- the material design icon name --></ui-icon>\n
<ui-icon>
\u7c7b\u578b
0: 'filled'
1: 'outlined'
2: 'round'
3: 'twoTone'
4: 'sharp'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u56fe\u6807\u7c7b\u578b |
outlined | boolean | false | \u8f6e\u5ed3\u56fe\u6807\u53ef\u81ea\u5b9a\u4e49\u7b14\u89e6\u548c\u586b\u5145\u5c5e\u6027\uff0c\u4ee5\u63d0\u4f9b\u4e00\u79cd\u8f7b\u5de7\uff0c\u5e72\u51c0\u7684\u6837\u5f0f\uff0c\u8be5\u6837\u5f0f\u5728\u5bc6\u96c6\u7684 UI \u4e2d\u6548\u679c\u5f88\u597d\u3002 \u53ef\u4ee5\u8c03\u6574\u8f6e\u5ed3\u56fe\u6807\u7684\u7b14\u5212\u7c97\u7ec6\uff0c\u4ee5\u8865\u5145\u6216\u5bf9\u6bd4\u5b57\u4f53\u7684\u7c97\u7ec6\u3002 |
round | boolean | false | \u5706\u5f62\u56fe\u6807\u4f7f\u7528\u7684\u8f6c\u89d2\u534a\u5f84\u4e0e\u4f7f\u7528\u8f83\u91cd\u7684\u5b57\u4f53\uff0c\u5f2f\u66f2\u7684\u5fbd\u6807\u6216\u5706\u5f62\u5143\u7d20\u6765\u8868\u8fbe\u5176\u98ce\u683c\u7684\u54c1\u724c\u642d\u914d\u5f97\u5f88\u597d\u3002 |
twoTone | boolean | false | \u53cc\u8272\u56fe\u6807\u4f7f\u7528\u7b14\u89e6\uff0c\u586b\u5145\u548c\u989c\u8272\u7684\u5c5e\u6027\u6dfb\u52a0\u4e86\u5c3a\u5bf8\u3002 \u7b14\u89e6\u548c\u586b\u5145\u8272\u7684\u5bf9\u6bd4\u4f7f\u60a8\u53ef\u4ee5\u4f7f\u7528\u591a\u79cd\u54c1\u724c\u989c\u8272\uff0c\u5e76\u53ef\u4ee5\u63d0\u9ad8\u6e05\u6670\u5ea6\u3002 |
sharp | boolean | false | \u5c16\u9510\u56fe\u6807\u663e\u793a\u5e26\u6709\u76f4\u8fb9\u7684\u89d2\uff0c\u4ee5\u786e\u4fdd\u5373\u4f7f\u5728\u8f83\u5c0f\u7684\u6bd4\u4f8b\u4e0b\u4e5f\u6e05\u6670\u53ef\u8fa8\u7684\u6837\u5f0f\u3002 \u8fd9\u4e9b\u77e9\u5f62\u53ef\u4ee5\u652f\u6301\u54c1\u724c\u98ce\u683c\uff0c\u800c\u5706\u5f62\u4e0d\u80fd\u5f88\u597d\u5730\u4f53\u73b0\u8fd9\u79cd\u98ce\u683c\u3002 |
size | number | 24 | \u56fe\u6807\u5c3a\u5bf8 |
dark | boolean | false | \u6df1\u8272\u56fe\u6807\uff08\u7528\u4e8e\u6d45\u8272\u80cc\u666f\u4e0a\uff09 |
light | boolean | false | \u6d45\u8272\u56fe\u6807\uff08\u7528\u4e8e\u6df1\u8272\u80cc\u666f\u4e0a\uff09 |
inactive | boolean | false | \u7981\u7528\u6216\u4e0d\u6d3b\u52a8\u72b6\u6001 |
\u5c3d\u7ba1\u5b57\u4f53\u4e2d\u7684\u56fe\u6807\u53ef\u4ee5\u7f29\u653e\u4e3a\u4efb\u610f\u5927\u5c0f\uff0c\u4f46\u6839\u636e Material Design Icons \u51c6\u5219\uff0c\u6211\u4eec\u5efa\u8bae\u5c06\u5b83\u4eec\u663e\u793a\u4e3a
18
,24
,36
\u621648
px\u3002
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b material design \u56fe\u6807\u540d\u53ca HTML |
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u56fe\u6807\u65f6\u89e6\u53d1 |
<ui-tab-bar v-model="active" class="hero-demo-tab-bar">\n <ui-tab v-for="(item, index) in list" :key="index">{{ item }}</ui-tab>\n</ui-tab-bar>\n
.hero-demo-tab-bar {\n background-color: #f2f2f2;\n max-width: 420px;\n}\n
'},bTzX:function(t,e){t.exports='<ui-dialog-actions><!-- the dialog actions --></ui-dialog-actions>\n
Name | Type | Default | Description |
---|---|---|---|
acceptText | string | 'OK' | \u786e\u5b9a\u6309\u94ae\u6587\u672c |
cancelText | string | 'Cancel' | \u53d6\u6d88\u6309\u94ae\u6587\u672c |
Name | Props | Description |
---|---|---|
default | buttonClass | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u52a8\u4f5c\u53ca HTML |
<template #default="{ buttonClass }">\n <ui-button :class="buttonClass">BUTTON</ui-button>\n</template>\n
\u5176\u4ed6\u5b9a\u5236\u5316
data-mdc-dialog-button-default
: \u6dfb\u52a0\u5230\u6309\u94ae\u4ee5\u6307\u793a\u5b83\u662f\u9ed8\u8ba4\u64cd\u4f5c\u6309\u94aedata-mdc-dialog-initial-focus
: \u6dfb\u52a0\u5230\u5143\u7d20\u4ee5\u6307\u793a\u5b83\u662f\u5bf9\u8bdd\u6846\u6253\u5f00\u540e\u6700\u521d\u8981\u5173\u6ce8\u7684\u5143\u7d20<!-- Using Material Icons -->\n<ui-icon-button v-model="value1" :toggle="icon1"> </ui-icon-button>\n\n<!-- Using Font Awesome -->\n<ui-icon-button v-model="value2">\n <template #default="{ onClass, offClass }">\n <i :class="[onClass, icon2.on]"></i>\n <i :class="[offClass, icon2.off]"></i>\n </template>\n</ui-icon-button>\n\n<!-- Using SVG Icons -->\n<ui-icon-button>\n <template #default="{ onClass, offClass }">\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n :class="onClass"\n >\n <path\n d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"\n />\n </svg>\n <svg\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n :class="offClass"\n >\n <path\n d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"\n />\n </svg>\n </template>\n</ui-icon-button>\n\n<!-- Using Image Icons -->\n<ui-icon-button>\n <template #default="{ onClass, offClass }">\n <img src="/path/to/image1.png" :class="onClass" />\n <img src="/path/to/image2.png" :class="offClass" />\n </template>\n</ui-icon-button>\n\n<!-- Disabled Icons -->\n<ui-icon-button :toggle="icon1" disabled></ui-icon-button>\n
export default {\n data() {\n return {\n value1: false,\n icon1: {\n on: 'favorite',\n off: 'favorite_border'\n },\n value2: true,\n icon2: {\n on: 'fa fa-star',\n off: 'fa fa-star-o'\n }\n };\n }\n};\n
'},bgvo:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `$confirm` options.\n $confirm: {\n // some options\n }\n});\n
'},bo92:function(t,e){t.exports='<ui-list-group>\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n\n <ui-list-divider></ui-list-divider>\n\n <ui-list-group-subheader></ui-list-group-subheader>\n <ui-list></ui-list>\n</ui-list-group>\n
'},"c/k8":function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-icon-button>` props with default value.\n UiIconButton: {\n // some props\n }\n});\n
'},"cH/n":function(t,e){t.exports='\u5f62\u72b6\u53ef\u4ee5\u5f15\u5bfc\u6ce8\u610f\u529b\uff0c\u8bc6\u522b\u7ec4\u4ef6\uff0c\u4f20\u8fbe\u72b6\u6001\u5e76\u8868\u8fbe\u54c1\u724c\u3002
'},"cN6+":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/list/list';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiListComponents from 'balm-ui/components/list';\n\nVue.use(UiListComponents, {\n // Optional. Overwrite `<ui-list>` props with default value.\n UiList: {\n // some props\n }\n});\n
'},cO62:function(t,e){t.exports='<h6 :class="$tt('headline6')">Text Label and Icon</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" type="textWithIcon">\n <ui-tab\n v-for="(tab, index) in tabs"\n :key="index"\n type="textWithIcon"\n :icon="tab.icon"\n >\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">Stacked Text Label and Icon</h6>\n<div class="demo">\n <ui-tab-bar v-model="active" type="textWithIcon">\n <ui-tab\n v-for="(tab, index) in tabs"\n :key="index"\n type="textWithIcon"\n :icon="tab.icon"\n stacked\n >\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n
export default {\n data() {\n return {\n active: 0,\n tabs: [\n {\n icon: 'phone',\n url: '#recents'\n },\n {\n icon: 'favorite',\n url: '#favorites'\n },\n {\n icon: 'person_pin',\n url: '#nearby'\n }\n ]\n };\n }\n};\n
'},cTen:function(t,e){t.exports=''},ca5t:function(t,e){t.exports='New in 8.61.0
@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/picker/picker';\n@use 'balm-ui/components/datepicker/datepicker';\n@use 'balm-ui/components/rangepicker/rangepicker';\n
import Vue from 'vue';\nimport UiRangepicker from 'balm-ui/components/rangepicker';\n\n// Optional. Overwrite `<ui-rangepicker>` props with default value.\nVue.use(UiRangepicker, {\n // some props\n});\n
'},cc0D:function(t,e){t.exports='<ui-chips>\n <ui-chip v-for="(item, index) in actionList" :key="index" :icon="item.icon">\n {{ item.name }}\n </ui-chip>\n</ui-chips>\n
export default {\n data() {\n return {\n actionList: [\n {\n icon: 'wb_sunny',\n name: 'Turn on lights'\n },\n {\n icon: 'bookmark',\n name: 'Bookmark'\n },\n {\n icon: 'alarm',\n name: 'Set alarm'\n },\n {\n icon: 'directions',\n name: 'Get directions'\n }\n ]\n };\n }\n};\n
'},coAf:function(t,e){t.exports='<div class="demo-content">\n <ui-menu-anchor absolute>\n <ui-button raised @click="$balmUI.onOpen('open')">Show Menu</ui-button>\n\n <ui-menu v-model="open" @selected="onSelected" @cancel="onCancel">\n <ui-menuitem nested>\n <ui-menuitem>\n <ui-menuitem-icon>\n <svg-selected></svg-selected>\n </ui-menuitem-icon>\n <ui-menuitem-text>Single</ui-menuitem-text>\n </ui-menuitem>\n <ui-menuitem disabled>\n <ui-menuitem-icon>\n <svg-selected></svg-selected>\n </ui-menuitem-icon>\n <ui-menuitem-text>1.15</ui-menuitem-text>\n </ui-menuitem>\n <ui-menuitem>\n <ui-menuitem-icon>\n <svg-selected></svg-selected>\n </ui-menuitem-icon>\n <ui-menuitem-text>Double</ui-menuitem-text>\n </ui-menuitem>\n <ui-menuitem selected>\n <ui-menuitem-icon>\n <svg-selected></svg-selected>\n </ui-menuitem-icon>\n <ui-menuitem-text>Custom: 1.2</ui-menuitem-text>\n </ui-menuitem>\n </ui-menuitem>\n <ui-item-divider></ui-item-divider>\n <ui-menuitem>\n <ui-menuitem-text>Add space before paragraph</ui-menuitem-text>\n </ui-menuitem>\n <ui-menuitem>\n <ui-menuitem-text>Add space after paragraph</ui-menuitem-text>\n </ui-menuitem>\n <ui-item-divider></ui-item-divider>\n <ui-menuitem>\n <ui-menuitem-text>Custom spacing...</ui-menuitem-text>\n </ui-menuitem>\n </ui-menu>\n </ui-menu-anchor>\n</div>\n
export default {\n data() {\n return {\n open: false\n };\n },\n methods: {\n onSelected(data) {\n console.log('onSelected', data);\n },\n onCancel() {\n console.log('onCancel');\n }\n }\n};\n
.demo-content {\n position: relative;\n}\n
'},ct3n:function(t,e){t.exports='<div class="demo-content">\n <ui-button @click="$balmUI.onOpen('open')">Open Menu</ui-button>\n <ui-menu\n v-model="open"\n :items="[\n 'Back',\n 'Forward',\n 'Reload',\n '-',\n 'Help & Feedback',\n 'Settings'\n ]"\n ></ui-menu>\n</div>\n
export default {\n data() {\n return {\n open: false\n };\n }\n};\n
.demo-content {\n position: relative;\n}\n
'},cyP6:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus);\n
'},d5FF:function(t,e){t.exports='Lists are continuous, vertical indexes of text or images.
'},d5wo:function(t,e){t.exports='<ui-file\n accept="image/*"\n multiple\n preview\n @change="$balmUI.onChange('files', $event)"\n></ui-file>\n<transition-group class="preview-list" name="list" tag="ul">\n <li class="item" v-for="(file, index) in files" :key="file.tmpId">\n <div class="inner">\n <span class="preview" :style="setBg(file)"></span>\n <span class="name">{{ file.name }}</span>\n </div>\n </li>\n</transition-group>\n
export default {\n data() {\n return {\n files: []\n };\n },\n methods: {\n setBg({ previewSrc }) {\n return previewSrc ? { backgroundImage: `url(${previewSrc})` } : {};\n }\n }\n};\n
/* Sass code */\n.list-enter,\n.list-leave-to {\n opacity: 0;\n transform: translateY(100%);\n}\n.list-leave-active {\n position: absolute;\n}\n\n.preview-list {\n display: flex;\n flex-wrap: wrap;\n padding: 1em 0 0 1em;\n position: relative;\n & > .item {\n width: 12.5%;\n padding-right: 1em;\n margin-bottom: 1em;\n list-style: none;\n transition: all 1s;\n .inner {\n width: 100%;\n }\n .preview {\n display: block;\n width: 100%;\n height: 0;\n padding-bottom: 100%;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n border: 1px solid #ddd;\n border-radius: 3px;\n }\n .name {\n display: block;\n width: 100%;\n line-height: 1.8em;\n text-align: center;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n }\n}\n
'},dAAR:function(t,e,o){(function(t,e){!function(t,o){"use strict";if(!t.setImmediate){var d,n=1,l={},a=!1,i=t.document,c=Object.getPrototypeOf&&Object.getPrototypeOf(t);c=c&&c.setTimeout?c:t,"[object process]"==={}.toString.call(t.process)?d=function(t){e.nextTick((function(){s(t)}))}:function(){if(t.postMessage&&!t.importScripts){var e=!0,o=t.onmessage;return t.onmessage=function(){e=!1},t.postMessage("","*"),t.onmessage=o,e}}()?function(){var e="setImmediate$"+Math.random()+"$",o=function(o){o.source===t&&"string"===typeof o.data&&0===o.data.indexOf(e)&&s(+o.data.slice(e.length))};t.addEventListener?t.addEventListener("message",o,!1):t.attachEvent("onmessage",o),d=function(o){t.postMessage(e+o,"*")}}():t.MessageChannel?function(){var t=new MessageChannel;t.port1.onmessage=function(t){s(t.data)},d=function(e){t.port2.postMessage(e)}}():i&&"onreadystatechange"in i.createElement("script")?function(){var t=i.documentElement;d=function(e){var o=i.createElement("script");o.onreadystatechange=function(){s(e),o.onreadystatechange=null,t.removeChild(o),o=null},t.appendChild(o)}}():d=function(t){setTimeout(s,0,t)},c.setImmediate=function(t){"function"!==typeof t&&(t=new Function(""+t));for(var e=new Array(arguments.length-1),o=0;o<ui-tab-bar v-model="active" class="custom-demo-tab-bar">\n <ui-tab\n v-for="(tab, index) in tabs"\n :key="index"\n type="textWithIcon"\n :icon="tab.icon"\n min-width\n content-indicator\n >\n {{ tab.text }}\n </ui-tab>\n</ui-tab-bar>\n
/* Sass code */\n.custom-demo-tab-bar {\n .mdc-tab {\n @include mdc-typography(subtitle1);\n @include mdc-tab-fixed-width(120px);\n @include mdc-tab-text-label-color($material-color-blue-600);\n @include mdc-tab-icon-color($material-color-blue-600);\n }\n .mdc-tab__ripple {\n @include mdc-states($material-color-yellow-700);\n }\n .mdc-tab--active {\n @include mdc-tab-text-label-color($material-color-blue-900);\n @include mdc-tab-icon-color($material-color-blue-900);\n }\n .mdc-tab-indicator {\n @include mdc-tab-indicator-underline-height(5px);\n @include mdc-tab-indicator-underline-color($material-color-yellow-700);\n }\n}\n
'},dK4b:function(t,e){t.exports=""},dL4K:function(t,e){t.exports='<ui-autocomplete></ui-autocomplete>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | Styles the autocomplete as an outlined text field. (label or placeholder required) | |
model (v-model ) | string, number | '' | Mandatory. | |
source | array | [] | Defines the data to use, must be specified. | |
sourceFormat | object | { label: 'label', value: 'value' } | Defines the data source format. | 8.10.0 |
inputId | string | null | The id attribute of the <input> and the for attribute of the <label> . | |
label | string | '' | A text caption or description for the autocomplete, which use the input's placeholder attribute instead. | |
placeholder | string | null | The placeholder attribute of the <input> . | |
disabled | boolean | false | Styles the autocomplete as a disabled text field. | |
required | boolean | false | Styles the autocomplete as a required text field. | |
autofocus | boolean | false | If set to true the first item will automatically be focused when the menu is shown. | |
delay | number | 300 | The delay in milliseconds between when a keystroke occurs and when a search is performed. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive. | |
minlength | number | 1 | The minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items. | |
remote | boolean | false | Get data by AJAX. Default usage for local data. | |
highlight | boolean | false | Styles the autocomplete suggestion value as a strong text | 8.12.0 |
filterKeywords | boolean | false | Enables the filter keywords suggestion. | 8.56.0 |
fullwidth | boolean | false | Styles the autocomplete as a full width text field. | |
endAligned | boolean | false | Styles the autocomplete with an end-aligned input. | |
icon | string | '' | Optional. Indicates an icon element with a leading icon. See Material Icons list. (No need to configure withLeadingIcon ) | |
withLeadingIcon | boolean, string | false | Styles the autocomplete as a text field with a leading icon. (Use with before slot) | |
withTrailingIcon | boolean, string | false | Styles the autocomplete as a text field with a trailing icon. (Use with after slot) | |
inside | boolean | false | Styles for the overflow inside component (e.g. in <ui-dialog> ) | 8.53.0 |
source
prop. There are two supported formats:[ 'Choice1', 'Choice2' ]
label
and value
key): [ { label: 'Choice1', value: 'value1' }, ... ]
You can customize your properties by
sourceFormat
prop
Name | Props | Description |
---|---|---|
default | The default slot holds the label for the autocomplete. | |
before | iconClass | The before slot holds a custom leading icon. |
after | iconClass | The before slot holds a custom trailing icon. |
Name | Type | Description |
---|---|---|
input | function(value: string|number) | Emits when the autocomplete value is changed. |
search | function(keywords: string) | Emits when the autocomplete value is changed. Applicable only for the remote autocomplete. |
selected | function(item: object) | Emits when the autocomplete item is selected. |
selected
event return data:
{\n label: 'Choice 1',\n value: 'value 1',\n // more custom fields\n}\n
NOTE: If you are not using
v-model
, you should listen for the autocomplete using@input
and update themodel
prop.
Automatic
<ui-autocomplete v-model="value"></ui-autocomplete>\n
Manual
<ui-autocomplete\n :model="value"\n @input="$balmUI.onChange('value', $event)"\n></ui-autocomplete>\n
<ui-list :type="2">\n <ui-item v-for="i in 3" :key="i">\n <ui-item-text-content>\n <ui-item-text1>Line item</ui-item-text1>\n <ui-item-text2>Secondary text</ui-item-text2>\n </ui-item-text-content>\n </ui-item>\n</ui-list>\n
'},dbRp:function(t,e){t.exports='<ui-list role="group">\n <template v-for="(item, index) in items">\n <ui-item-divider v-if="item === '-'" :key="index"></ui-item-divider>\n <ui-item v-else :key="index">\n <ui-item-text-content>{{ item.text }}</ui-item-text-content>\n <ui-item-last-content>\n <ui-checkbox\n v-model="checkedValues"\n :value="item.value"\n @click.native.stop\n ></ui-checkbox>\n </ui-item-last-content>\n </ui-item>\n </template>\n</ui-list>\n
export default {\n data() {\n return {\n checkedValues: []\n };\n }\n};\n
'},ddae:function(t,e,o){var d={"./alert-dialog/demo1.md":"vvy0","./alert-dialog/demo2.md":"Ukfz","./alert/demo1.md":"XXab","./anchor/demo1.md":"DmyQ","./anchor/demo2.md":"pHdh","./autocomplete/demo1.md":"Nu9s","./autocomplete/demo2.md":"Z/7x","./badge/demo1.md":"mzL3","./badge/demo2.md":"mWiE","./banner/demo1.md":"s3bq","./bottom-navigation/demo1.md":"BiEC","./bottom-sheet/demo1.md":"2B7b","./button/demo1.md":"sK9k","./card/demo1.md":"XfPe","./card/demo2.md":"FUGW","./card/demo3.md":"aCmL","./checkbox/demo1.md":"FKpq","./checkbox/demo2.md":"AcTu","./chips/demo1.md":"lSBW","./chips/demo2.md":"FlZy","./chips/demo3.md":"2qo9","./chips/demo4.md":"cc0D","./collapse/demo1.md":"03rS","./collapse/demo2.md":"MXKf","./collapse/demo3.md":"eVk5","./confirm-dialog/demo1.md":"vDum","./confirm-dialog/demo2.md":"33rG","./copy/demo1.md":"QHM2","./datepicker/demo1.md":"BnzD","./datepicker/demo2.md":"kvTy","./datepicker/demo3.md":"8bja","./datepicker/demo4.md":"EGEq","./datepicker/demo5.md":"b+2B","./datepicker/demo6.md":"ZqYw","./debounce/demo1.md":"X9hg","./dialog/demo1.md":"poPe","./dialog/demo2.md":"z9gS","./divider/demo1.md":"qrnz","./divider/demo2.md":"/5LR","./drawer/demo1.md":"4L9t","./drawer/demo2.md":"KMbe","./drawer/demo3.md":"llx4","./drawer/demo4.md":"mltC","./drawer/demo5.md":"KPZJ","./editor/demo1.md":"SWtR","./editor/demo2.md":"sjc1","./editor/demo3.md":"pep1","./elevation/demo1.md":"+Lqg","./elevation/demo2.md":"P8Fu","./event/demo1.md":"NEwY","./event/demo2.md":"LCqv","./event/demo3.md":"Ngmu","./event/demo4.md":"GuLE","./fab/demo1.md":"Js8M","./fab/demo2.md":"Hs+w","./fab/demo3.md":"V3IR","./fab/demo4.md":"0Uhr","./file/demo1.md":"xNpe","./file/demo2.md":"d5wo","./file/demo3.md":"uaR4","./form/demo1.md":"k3iM","./form/demo2.md":"Rfpz","./form/demo3.md":"+4iP","./grid/demo1.md":"huQ7","./grid/demo2.md":"1Pfi","./grid/demo3.md":"Qm85","./grid/demo4.md":"g+3Q","./grid/demo5.md":"ynvr","./grid/demo6.md":"PvR7","./grid/demo7.md":"eLxf","./grid/demo8.md":"U9VE","./grid/demo9.md":"v/FX","./icon-button/demo1.md":"ejpW","./icon-button/demo2.md":"bg4W","./icon-button/demo3.md":"nbki","./icon/demo1.md":"+eER","./icon/demo2.md":"kmw8","./image-list/demo1.md":"W0l+","./image-list/demo2.md":"tU+b","./lazyload/demo1.md":"lR9/","./list/demo1.md":"+LzF","./list/demo2.md":"dZxO","./list/demo3.md":"7/oN","./list/demo4.md":"mFG2","./list/demo5.md":"Q9WI","./list/demo6.md":"FArz","./list/demo7.md":"dbRp","./list/demo8.md":"keYf","./longpress/demo1.md":"dnz9","./menu/demo1.md":"ct3n","./menu/demo2.md":"coAf","./pagination/demo1.md":"VrLe","./pagination/demo2.md":"SBcc","./pagination/demo3.md":"PktF","./pagination/demo4.md":"+J09","./progress/demo1.md":"hnWv","./radio/demo1.md":"+g3H","./rangepicker/demo1.md":"QM0m","./ripple/demo1.md":"kSIg","./ripple/demo2.md":"C+ac","./ripple/demo3.md":"o6KT","./segmented-button/demo1.md":"MWjS","./segmented-button/demo2.md":"zyi9","./segmented-button/demo3.md":"h8GA","./select/demo1.md":"/tRe","./select/demo2.md":"laUp","./select/demo3.md":"FME5","./select/demo4.md":"yAg/","./shape/demo1.md":"hmYx","./shape/demo2.md":"5qvK","./side-sheet/demo1.md":"6Xxh","./skeleton/demo1.md":"UJv8","./skeleton/demo2.md":"g643","./skeleton/demo3.md":"WynS","./slider/demo1.md":"PGPd","./slider/demo2.md":"iK6+","./snackbar/demo1.md":"6iKR","./spinner/demo1.md":"5J1c","./spinner/demo2.md":"q2Q0","./styles.md":"aKLO","./switch/demo1.md":"0HsE","./table/demo1.md":"2Esg","./table/demo2.md":"OSKY","./table/demo3.md":"PWMJ","./tabs/demo1.md":"jne1","./tabs/demo2.md":"cO62","./tabs/demo3.md":"I9yt","./tabs/demo4.md":"Hpe4","./tabs/demo5.md":"bDYD","./tabs/demo6.md":"EQdG","./tabs/demo7.md":"dF2i","./tabs/demo8.md":"5VFu","./tabs/demo9.md":"Romc","./textfield/demo1.md":"Po75","./textfield/demo2.md":"RXEe","./textfield/demo3.md":"tZAW","./textfield/demo4.md":"WIne","./textfield/demo5.md":"NDOf","./textfield/demo6.md":"yUax","./textfield/demo7.md":"Q1zD","./theme/demo1.md":"1fpl","./theme/demo2.md":"Np/8","./theme/demo3.md":"fZSO","./theme/demo4.md":"p/y3","./toast/demo1.md":"Fd0s","./tooltip/demo1.md":"Kucm","./tooltip/demo2.md":"UMkk","./top-app-bar/demo1.md":"XoHX","./tree/demo1.md":"rHP+","./tree/demo2.md":"W4Tv","./tree/demo3.md":"2z5r","./typography/demo1.md":"/epX","./validator/demo1.md":"QwAn","./validator/demo2.md":"C1m5","./validator/demo3.md":"zrtu"};function n(t){var e=l(t);return o(e)}function l(t){if(!o.o(d,t)){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}return d[t]}n.keys=function(){return Object.keys(d)},n.resolve=l,t.exports=n,n.id="ddae"},dgcT:function(t,e){t.exports='<ui-side-sheet></ui-side-sheet>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | \u4fa7\u8fb9\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001 |
closable | boolean | false | \u5c55\u73b0\u5173\u95ed\u6309\u94ae |
Name | Props | Description |
---|---|---|
title | title \u63d2\u69fd\u5305\u542b\u4fa7\u8fb9\u52a8\u4f5c\u8868\u7684\u6807\u9898\u53ca HTML | |
default | default \u63d2\u69fd\u5305\u542b\u4fa7\u8fb9\u52a8\u4f5c\u8868\u7684\u5185\u5bb9\u53ca HTML | |
actions | actions \u63d2\u69fd\u5305\u542b\u4fa7\u8fb9\u52a8\u4f5c\u8868\u7684\u52a8\u4f5c\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u4fa7\u8fb9\u52a8\u4f5c\u8868\u9690\u85cf\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u4fa7\u8fb9\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-side-sheet v-model="open"></ui-side-sheet>\n
\u624b\u52a8
<ui-side-sheet\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-side-sheet>\n
<ui-button v-longpress="config" outlined>Click...</ui-button>\n
export default {\n data() {\n return {\n config: {\n callback: () => {\n this.$alert('done');\n }\n }\n };\n }\n};\n
'},ds8L:function(t,e){t.exports='@use 'balm-ui/components/pagination' with (\n $height: 32px\n);\n
'},duqc:function(t,e){t.exports='<ui-form-field>\n <ui-textfield maxlength="20">\n <template #before>\n <ui-textfield-icon>event</ui-textfield-icon>\n </template>\n Floating Label Text\n <template #after>\n <ui-textfield-icon trailing>delete</ui-textfield-icon>\n </template>\n </ui-textfield>\n <ui-textfield-helper with-counter> Helper message </ui-textfield-helper>\n</ui-form-field>\n
Component | Description |
---|---|
<ui-textfield> | \u6587\u672c\u6846\u5143\u7d20 |
<ui-textfield-icon> | \u6587\u672c\u6846\u9996/\u5c3e\u56fe\u6807\u5143\u7d20 |
<ui-textfield-helper> | \u5e2e\u52a9\u6587\u672c\u548c\u5b57\u7b26\u8ba1\u6570\u5668\u5143\u7d20 |
@use '@material/menu-surface' with (\n $fade-in-duration: 0.03s,\n $fade-out-duration: 0.075s,\n $scale-duration: 0.12s,\n $min-distance-from-edge: 32px,\n $z-index: 8, // One above `<ui-dialog>`\n $shape-radius: medium\n);\n
@use '@material/menu' with (\n $ink-color: rgba(\n theme-color.prop-value(on-surface),\n theme-color.text-emphasis(high)\n ),\n\n $width-base: 56px,\n $min-width: 2 * $width-base\n);\n
'},eACw:function(t,e){t.exports='\u6ed1\u52a8\u6761\u5141\u8bb8\u7528\u6237\u4ece\u4e00\u7cfb\u5217\u503c\u4e2d\u8fdb\u884c\u9009\u62e9\u3002
'},eLxf:function(t,e){t.exports='<ui-grid class="demo-grid max-width" position="left">\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4"></ui-grid-cell>\n</ui-grid>\n
.demo-grid.max-width {\n max-width: 1280px;\n}\n
'},eS3m:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/menu/menu';\n@use 'balm-ui/components/list/list';\n
import Vue from 'vue';\nimport UiMenuComponents from 'balm-ui/components/menu';\n\nVue.use(UiMenuComponents, {\n // Optional. Overwrite `<ui-menu>` props with default value.\n UiMenu: {\n // some props\n }\n});\n
'},eVk5:function(t,e){t.exports='<ui-collapse v-for="i in 3" :key="i" with-icon :ripple="1">\n <template #expand-more-icon>\n <ui-icon>arrow_drop_down</ui-icon>\n </template>\n <template #expand-less-icon>\n <ui-icon>arrow_right</ui-icon>\n </template>\n <template #toggle>\n <div>Heading {{ i }}</div>\n </template>\n <div>Content {{ i }}</div>\n</ui-collapse>\n
'},eiR6:function(t,e){t.exports='$confirm(message)
$confirm(options)
interface VueInstance {\n $confirm(options: string | object): Promise<boolean>;\n}\n
Option | Type | Default | Description |
---|---|---|---|
className | string | '' | The custom class name for the confirm dialog. |
title | string | '' | The title of the confirm dialog. |
state | string | '' | State type. |
stateOutlined | boolean | false | Show outlined state. |
message | string | '' | The content to be displayed in the confirm dialog. |
raw | boolean | false | Rendered plain HTML. |
acceptText | string | 'OK' | Accept button content. |
cancelText | string | 'Cancel' | Cancel button content. |
callback | function | false | Handle some event when the confirm button is clicked. |
interface ConfirmDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Usage 1
$confirm({\n message,\n callback(result) {\n // ...\n }\n});\n
Usage 2 (Recommended)
$confirm(message).then((result) => {\n // ...\n});\n
result
is a boolean value indicating whether OK or Cancel was selected (true
means OK).
$confirm
without .vue
componentNew in 8.1.0
import { useConfirm } from 'balm-ui';\n// OR\n// import { useConfirm } from 'balm-ui/plugins/confirm';\n\nconst $confirm = useConfirm();\n$confirm('Hello BalmUI');\n
'},eihu:function(t,e){t.exports='\u7ebf\u6027\u8fdb\u5ea6\u6761\u901a\u8fc7\u6cbf\u56fa\u5b9a\u7684\u53ef\u89c1\u8f68\u9053\u7684\u957f\u5ea6\u8bbe\u7f6e\u6307\u793a\u5668\u52a8\u753b\u6765\u663e\u793a\u8fdb\u5ea6\u3002
'},ejpW:function(t,e){t.exports='<!-- Material Icons -->\n<ui-icon-button icon="favorite"></ui-icon-button>\n<ui-icon-button icon="airplanemode_active"></ui-icon-button>\n\n<!-- SVG Icon -->\n<ui-icon-button>\n <svg-logo></svg-logo>\n</ui-icon-button>\n\n<!-- Disabled Buttons -->\n<ui-icon-button disabled icon="airplanemode_active"></ui-icon-button>\n<ui-icon-button disabled>\n <svg-logo></svg-logo>\n</ui-icon-button>\n
'},erkp:function(t,e){t.exports='<ui-drawer type="dismissible"></ui-drawer>\n<ui-drawer-app-content><!-- Content --></ui-drawer-app-content>\n
'},"evv+":function(t,e){t.exports='
<ui-drawer type="dismissible">
only
'},"f+il":function(t,e){t.exports='New in 8.29.0
$balmUI
interface BalmUIEvent {\n onChange(property: string, value: any, fn?: Function);\n\n onOpen(property: string, fn?: Function);\n onShow(property: string, fn?: Function);\n\n onClose(property: string, fn?: Function);\n onHide(property: string, fn?: Function);\n}\n\ninterface VueInstance {\n $balmUI: BalmUIEvent;\n}\n
update the data object of the Vue instance to new value
$balmUI.onChange(property, value);\n
update the data object of the Vue instance to true
$balmUI.onOpen(property);\n$balmUI.onShow(property);\n
update the data object of the Vue instance to false
$balmUI.onClose(property);\n$balmUI.onHide(property);\n
Name | Type | Default | Description |
---|---|---|---|
property | string | '' | Update a specified Vue instance data object. |
value | any | undefined | New value of a specified Vue instance data object. Applicable only for $balmUI.onChange . |
fn | function | noop | After method to handle. |
balmResize
(better than resize
)
balmScroll
(better than scroll
)
export default {\n mounted() {\n this.init();\n window.addEventListener('balmResize', this.init);\n },\n beforeDestroy() {\n window.removeEventListener('balmResize', this.init);\n },\n methods: {\n init() {\n // ...\n }\n }\n};\n
New in 8.2.1
$bus.on(event, callback)
$bus.once(event, callback)
(New in 8.51.0)
$bus.off(event, callback)
$bus.emit(eventName, ...args)
interface BalmUIEventBus {\n on(event: string | string[], callback: Function); // Listen for a custom event on the current vm.\n once(event: string, callback: Function); // Listen for a custom event, but only once.\n off(event: string | string[], callback?: Function); // Remove custom event listener(s).\n emit(eventName: string, ...args); // Trigger an event on the current instance.\n}\n\ninterface VueInstance {\n $bus: BalmUIEventBus;\n}\n
Name | Type | Default | Description |
---|---|---|---|
event , eventName | string | Custom event name for the global communication. | |
args | any | The arguments of custom event function. | |
callback | function | Custom event function. |
// `/path/to/awesome.vue`\n\nexport default {\n mounted() {\n this.$bus.on('custom-event', (msg) => {\n console.log(msg);\n });\n },\n beforeDestroy() {\n this.$bus.off('custom-event');\n }\n};\n
$bus
without .vue
component// `/path/to/awesome.js`\n\nimport { useBus } from 'balm-ui';\n// OR\n// import { useBus } from 'balm-ui/plugins/event';\n\nconst $bus = useBus();\n$bus.emit('custom-event', 'Hello BalmUI');\n
'},"f/Dl":function(t,e){t.exports='\u4e00\u6b3e\u73b0\u4ee3\u7684\u6240\u89c1\u5373\u6240\u5f97\u7f16\u8f91\u5668\uff08\u57fa\u4e8e Quill \u4e14\u5185\u7f6e\u4e86\u4e30\u5bcc\u7684\u6269\u5c55\u529f\u80fd\uff09\u3002
'},f6Sl:function(t,e){t.exports='New in 6.7.0
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI);\n
'},fSlj:function(t,e){t.exports='Alerts provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
'},fZSO:function(t,e){t.exports='New in 6.2.1
<div class="demo-theme-color-section__row">\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Text on primary</legend>\n\n <div class="demo-theme-color-group">\n <div :class="['demo-theme-text-row', $theme.getThemeClass('primary-bg')]">\n <span\n :class="['demo-theme-text-style', $$theme.getThemeClass('on-primary')]"\n >\n Text\n </span>\n <span\n :class="['demo-theme-text-style', $$theme.getThemeClass('on-primary'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">Text on secondary</legend>\n\n <div class="demo-theme-color-group">\n <div\n :class="['demo-theme-text-row', $$theme.getThemeClass('secondary-bg')]"\n >\n <span\n :class="['demo-theme-text-style', $$theme.getThemeClass('on-secondary')]"\n >\n Text\n </span>\n <span\n :class="['demo-theme-text-style', $$theme.getThemeClass('on-secondary'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n</div>\n
'},fahJ:function(t,e){t.exports='import Vue from 'vue';\nimport vAnchor from 'balm-ui/directives/anchor';\n\nVue.directive(vAnchor.name, vAnchor);\n
'},ffvu:function(t,e){t.exports='<div v-badge></div>\n
v-badge="count"
v-badge.overlap="count"
v-badge.dot
Value | Type | Default | Description |
---|---|---|---|
count | number | 0 | Number to show in badge. |
'},fkZ9:function(t,e){t.exports='maximum count:
99
<div v-debounce></div>\n
interface Debounce {\n callback: Function;\n delay?: number; // defaults: 250 ms\n}\n
'},fvS5:function(t,e){t.exports='<ui-textfield-icon><!-- the material design icon name --></ui-textfield-icon>\n
Name | Type | Default | Description |
---|---|---|---|
trailing | boolean | false | \u5c55\u793a\u4ee5\u5c3e\u56fe\u6807\u7684\u6837\u5f0f |
unclickable | boolean | false | \u5c55\u793a\u4e0d\u53ef\u70b9\u51fb\u7684\u6837\u5f0f |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u6807\u7ec4\u4ef6\u53ca HTML\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u6587\u672c\u6846\u56fe\u6807\u65f6\u89e6\u53d1 |
<ui-pagination></ui-pagination>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
page | number | 1 | \u9875\u7801 | |
total | number | 0 | \u6570\u636e\u603b\u6570 | |
pageSpan | number, boolean | 3 | \u5c55\u793a\u5f53\u524d\u9875\u7801\u7684\u524d N \u9875\uff08\u6700\u5c0f\u503c\uff1a3 \uff09 | |
showTotal | boolean | false | \u663e\u793a\u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df | |
pageSize | number, array | 10 | \u6bcf\u9875\u5c55\u793a\u7684\u6570\u636e\u91cf | |
pageSizeText | string, array | 'Rows per page' | \u6bcf\u9875\u6570\u636e\u91cf\u4fe1\u606f\u5c55\u793a\u7684\u524d/\u540e\u6587\u5b57 | |
ofText | string | 'of' | \u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df\u4e2d\u7684 of \u6587\u5b57 | 8.47.0 |
unitText | string | '' | \u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df\u4e2d\u7684 \u5355\u4f4d \u6587\u5b57 | 8.56.0 |
showJumper | boolean | false | \u663e\u793a\u8df3\u8f6c\u533a\u57df | |
jumperText | string, array | 'Goto' | \u8df3\u8f6c\u533a\u57df\u5c55\u793a\u7684\u524d/\u540e\u6587\u5b57 | |
jumperButtonOutlined | boolean | false | \u8df3\u8f6c\u6309\u94ae\u542f\u7528\u8f6e\u5ed3\u6309\u94ae\u6837\u5f0f | 8.20.0 |
jumperButtonText | string | '' | \u8df3\u8f6c\u6309\u94ae\u6587\u5b57 | |
position | string | '' | \u5206\u9875\u6392\u7248\u4f4d\u7f6e | |
mini | boolean | false | \u4f7f\u7528\u8ff7\u4f60\u6a21\u5f0f |
interface Pagination {\n position: 'left' | 'center' | 'right';\n}\n
Name | Props | Description | Version |
---|---|---|---|
default | currentMinRow , currentMaxRow | \u81ea\u5b9a\u4e49\u6570\u636e\u91cf\u4fe1\u606f\u533a\u57df | 8.11.0 |
first | \u81ea\u5b9a\u4e49\u9996\u9875\u6309\u94ae\u56fe\u6807 | ||
prev | \u81ea\u5b9a\u4e49\u4e0a\u9875\u6309\u94ae\u56fe\u6807 | ||
next | \u81ea\u5b9a\u4e49\u4e0b\u9875\u6309\u94ae\u56fe\u6807 | ||
last | \u81ea\u5b9a\u4e49\u5c3e\u9875\u6309\u94ae\u56fe\u6807 |
Name | Type | Description |
---|---|---|
change | function(page: number) | \u9875\u7801\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5206\u9875\u9875\u7801\u72b6\u6001\u5e76\u66f4\u65b0page
\u5c5e\u6027
\u81ea\u52a8
<ui-pagination v-model="page"></ui-pagination>\n
\u624b\u52a8
<ui-pagination\n :page="page"\n @change="$balmUI.onChange('page', $event)"\n></ui-pagination>\n
<ui-grid class="demo-grid">\n <ui-grid-cell class="demo-cell" :columns="{default:6, tablet:8}">\n 6 (8 tablet)\n </ui-grid-cell>\n <ui-grid-cell class="demo-cell" :columns="{default:4, tablet:6}">\n 4 (6 tablet)\n </ui-grid-cell>\n <ui-grid-cell class="demo-cell" :columns="{default:2, phone:4}">\n 2 (4 phone)\n </ui-grid-cell>\n</ui-grid>\n
'},"g+qP":function(t,e){t.exports='@use '@material/data-table' with (\n $fill-color: surface,\n $header-row-fill-color: surface,\n $row-fill-color: inherit,\n $selected-row-fill-color: rgba(theme-color.prop-value(primary), 0.04),\n $checked-icon-color: primary,\n $divider-color: rgba(theme-color.prop-value(on-surface), 0.12),\n $divider-size: 1px,\n $row-hover-fill-color: rgba(theme-color.prop-value(on-surface), 0.04),\n\n $header-row-text-color: rgba(theme-color.prop-value(on-surface), 0.87),\n $row-text-color: rgba(theme-color.prop-value(on-surface), 0.87),\n\n $sort-icon-color: rgba(theme-color.prop-value(on-surface), 0.6),\n $sort-icon-active-color: rgba(\n theme-color.prop-value(on-surface),\n 0.87\n ),\n $sort-icon-density-scale: -5,\n\n $shape-radius: medium,\n $stroke-size: 1px,\n $stroke-color: rgba(theme-color.prop-value(on-surface), 0.12),\n\n $row-height: 52px,\n $header-row-height: get-header-row-height($row-height),\n $cell-leading-padding: 16px,\n $cell-trailing-padding: 16px,\n\n $minimum-row-height: 36px,\n $maximum-row-height: $row-height,\n $default-density-scale: density-variables.$default-scale,\n);\n
'},g5O8:function(t,e){t.exports='New in 8.42.0
- Rename variables
$cell-height
->$row-height
$header-cell-height
->$header-row-height
$minimum-cell-height
->$minimum-row-height
$maximum-cell-height
->$maximum-row-height
@use 'balm-ui/components/core';\n@use 'balm-ui/components/image-list/image-list';\n
import Vue from 'vue';\nimport UiImageListComponents from 'balm-ui/components/image-list';\n\nVue.use(UiImageListComponents, {\n // Optional. Overwrite `<ui-image-list>` props with default value.\n UiImageList: {\n // some props\n },\n // Optional. Overwrite `<ui-image-item>` props with default value.\n UiImageItem: {\n // some props\n }\n});\n
'},g643:function(t,e){t.exports='<ui-skeleton avatar :paragraph="{ rows: 4 }"></ui-skeleton>\n
'},g8Ta:function(t,e){t.exports='<ui-card>\n <ui-card-content>\n <ui-card-media>\n <ui-card-media-content></ui-card-media-content>\n </ui-card-media>\n <ui-card-text></ui-card-text>\n </ui-card-content>\n <ui-card-actions>\n <ui-card-buttons></ui-card-buttons>\n <ui-card-icons></ui-card-icons>\n </ui-card-actions>\n</ui-card>\n
Component | Description |
---|---|
<ui-card> | Mandatory. The main card element. |
<ui-card-content> | Optional. The main tappable area of the card. Typically contains most (or all) card content except <ui-card-actions> . Only applicable to cards that have a primary action that the main surface should trigger. |
<ui-card-media> | Optional. Media area that displays a custom background-image with background-size: cover . |
<ui-card-media-content> | Optional. An absolutely-positioned box the same size as the media area, for displaying a title or icon on top of the background-image . |
<ui-card-text> | Optional. Additional text content. |
<ui-card-actions> | Optional. Row containing action buttons and/or icons. |
<ui-card-buttons> | Optional. A group of action buttons, displayed on the left side of the card (in LTR), adjacent to <ui-card-icons> . |
<ui-card-icons> | Optional. A group of supplemental action icons, displayed on the right side of the card (in LTR), adjacent to <ui-card-buttons> . |
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-image-list>` props with default value.\n UiImageList: {\n // some props\n },\n // Optional. Overwrite `<ui-image-item>` props with default value.\n UiImageItem: {\n // some props\n }\n});\n
'},gT4Y:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/table/table';\n@use 'balm-ui/components/checkbox/checkbox'; // Required only for data table with row selection\n@use 'balm-ui/components/icon-button/icon-button'; // Required only for data table with column sorting\n@use 'balm-ui/components/pagination/pagination'; // Recommended\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiTable from 'balm-ui/components/table';\n\n// Optional. Overwrite `<ui-table>` props with default value.\nVue.use(UiTable, {\n // some props\n});\n
'},gak8:function(t,e){t.exports=''},"gfv+":function(t,e){t.exports='New in 8.29.0
<ui-textfield><!-- the label text --></ui-textfield>\n
<ui-textfield>
\u7c7b\u578b
0
: 'filled'
1
: 'outlined'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u6587\u672c\u6846\u7c7b\u578b |
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder \uff09 |
model (v-model ) | string, number | '' | \u6587\u672c\u6846\u503c |
inputType | string | 'text' | \u539f\u751f <input> \u7c7b\u578b\uff1atext , number , password , \u7b49 |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 |
label | string | '' | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff |
placeholder | string | null | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837\u5f0f |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f |
endAligned | boolean | false | \u8f93\u5165\u6587\u672c\u53f3\u5bf9\u9f50 |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
withLeadingIcon | boolean | false | \u542f\u7528\u9996\u56fe\u6807\u6837\u5f0f |
withTrailingIcon | boolean | false | \u542f\u7528\u5c3e\u56fe\u6807\u6837\u5f0f |
prefixText | string | '' | \u8bbe\u7f6e\u6587\u672c\u524d\u7f00\u5185\u5bb9 |
suffixText | string | '' | \u8bbe\u7f6e\u6587\u672c\u540e\u7f00\u5185\u5bb9 |
withCounter | boolean | false | \u542f\u7528\u5185\u90e8\u8ba1\u6570\u5668 |
helperTextId | string | null | \u5339\u914d <ui-textfield-helper> \u7684 id \u5c5e\u6027 |
attrs | object | {} | <input> \u6216 <textarea> \u7684\u5176\u4ed6\u5c5e\u6027 |
\u63d0\u793a\uff1a
withLeadingIcon
\u548cwithTrailingIcon
\u4ec5\u7528\u4e8e (\u975e<ui-textfield-icon>
) \u81ea\u5b9a\u4e49\u9996/\u5c3e\u56fe\u6807\uff0c\u901a\u5e38\u65e0\u9700\u914d\u7f6e
\u9664\u4e0a\u8ff0\u5185\u5bb9\u5916\uff0c\u4ee5\u4e0b\u5c5e\u6027\u8fd8\u53ef\u4ee5\u66ff\u4ee3\u5177\u6709\u76f8\u540c\u540d\u79f0\u7684 input \u6216 textarea \u5143\u7d20\u7684\u5c5e\u6027\uff1a
pattern
minlength
maxlength
\uff1a\u8ba1\u6570\u5668\u5fc5\u5907\u5c5e\u6027min
max
step
rows
cols
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
Name | Type | Description |
---|---|---|
focus | function(event: object) | \u6587\u672c\u6846\u805a\u7126\u65f6\u89e6\u53d1 |
keydown | function(event: object) | \u6587\u672c\u6846\u4e2d\u6309\u4e0b\u952e\u76d8\u65f6\u89e6\u53d1 |
input | function(value: string) | \u6587\u672c\u6846\u4e2d\u8f93\u5165\u5185\u5bb9\u65f6\u89e6\u53d1 |
change | function(event: object) | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
enter | function(value: string) | \u6587\u672c\u6846\u4e2d\u6309\u4e0b Enter \u952e\u76d8\u65f6\u89e6\u53d1 |
blur | function(event: object) | \u6587\u672c\u6846\u5931\u53bb\u805a\u7126\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@input
\u76d1\u542c\u6587\u672c\u6846\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-textfield v-model="value"></ui-textfield>\n
\u624b\u52a8
<ui-textfield\n :model="value"\n @input="$balmUI.onChange('value', $event)"\n></ui-textfield>\n
<div v-tooltip="'Tips text'" aria-describedby="tooltip-id">Text</div>\n
'},h5ly:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiIcon from 'balm-ui/components/icon';\n\n// Optional. Overwrite `<ui-icon>` props with default value.\nVue.use(UiIcon, {\n // some props\n});\n
'},h8GA:function(t,e){t.exports='<ui-segmented-buttons v-model="checkedValue">\n <ui-segmented-button icon="favorite"></ui-segmented-button>\n <ui-segmented-button>Sample Text</ui-segmented-button>\n <ui-segmented-button>\n Sample Text\n <template #after="{ iconClass }">\n <ui-icon :class="iconClass">favorite</ui-icon>\n </template>\n </ui-segmented-button>\n</ui-segmented-buttons>\n
export default {\n data() {\n return {\n checkedValue: []\n };\n }\n};\n
'},hVhy:function(t,e){t.exports='<ui-chip><!-- the chip text --></ui-chip>\n
Name | Type | Default | Description |
---|---|---|---|
icon | string | '' | \u8bbe\u7f6e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
selected | boolean | false | \u5f53\u9009\u9879\u5361\u9009\u9879\u88ab\u9009\u4e2d\u65f6\u9690\u85cf\u9996\u56fe\u6807 |
removable | boolean | false | \u663e\u793a\u7528\u4e8e\u5220\u9664\u9009\u9879\u5361\u9009\u9879\u7684\u5c3e\u56fe\u6807\u3002\u4ec5\u7528\u4e8e\u8f93\u5165\u7c7b\u578b(input )\u7684\u9009\u9879\u5361\u3002 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u9879\u5361\u9009\u9879\u5185\u5bb9\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49\u9009\u9879\u5361\u9009\u9879\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u8f93\u5165\u7c7b\u578b(input )\u7684\u9009\u9879\u5361\u9009\u9879\u5c3e\u56fe\u6807 |
<ui-tab><!-- The tab text label --></ui-tab>\n
<ui-tab>
& <ui-tabs>
Types
0
: 'text'
1
: 'iconOnly'
2
: 'textWithIcon'
<ui-tab>
& <ui-tabs>
common PropsName | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. The permutation of tab labels. |
stacked | boolean | false | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally. |
minWidth | boolean | false | Optional. Indicates that the tab should shrink in size to be as narrow as possible without causing text to wrap. |
contentIndicator | boolean | false | Optional. Text label width-matching indicator. |
<ui-tab>
PropsName | Type | Default | Description |
---|---|---|---|
text | string | '' | Tab text. |
icon | string | '' | Tab icon. See Material Icons list. |
Name | Props | Description |
---|---|---|
default | The default slot holds the tab labels and can contain HTML. | |
icon | iconClass | The icon slot holds the custom icon and can contain HTML. |
indicator | The indicator slot holds the tab indicator component. |
<ui-tab>\n <template #icon="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-tab>\n
'},hmYx:function(t,e){t.exports='// Edit `/path/to/project/app/styles/global/_vendor.scss`\n@use '@material/shape' with (\n $small-component-radius: 4px,\n $medium-component-radius: 16px,\n $large-component-radius: 24px\n);\n
<div v-shape.small class="demo">4dp</div>\n<div v-shape class="demo">16dp</div>\n<div v-shape.large class="demo">24dp</div>\n
'},hnWv:function(t,e){t.exports='<figure>\n <ui-progress :progress="progress"></ui-progress>\n <figcaption>Determinate (Progress: {{progress }})</figcaption>\n</figure>\n\n<figure>\n <ui-progress indeterminate></ui-progress>\n <figcaption>Indeterminate</figcaption>\n</figure>\n\n<figure>\n <ui-progress :progress="0.5" :buffer="0.75"></ui-progress>\n <figcaption>Buffer</figcaption>\n</figure>\n
'},hsqG:function(t,e){t.exports='import Vue from 'vue';\nimport vCopy from 'balm-ui/directives/copy';\n\nVue.directive(vCopy.name, vCopy);\n
'},huQ7:function(t,e){t.exports='<ui-grid class="demo-grid">\n <ui-grid-cell class="demo-cell">4</ui-grid-cell>\n <ui-grid-cell class="demo-cell">4</ui-grid-cell>\n <ui-grid-cell class="demo-cell">4</ui-grid-cell>\n</ui-grid>\n
'},hyMg:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/banner/banner';\n
import Vue from 'vue';\nimport UiBanner from 'balm-ui/components/banner';\n\n// Optional. Overwrite `<ui-banner>` props with default value.\nVue.use(UiBanner, {\n // some props\n});\n
'},i1XV:function(t,e){t.exports='<ui-select-icon>
@use '@material/select/select-icon-theme' with (\n $icon-size: 24px,\n $dense-icon-size: 20px,\n $icon-horizontal-margin: 12px,\n\n $icon-color: rgba(theme-variables.prop-value(on-surface), 0.54),\n $disabled-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n )\n);\n
<ui-select>
@use '@material/select/select-theme' with (\n $arrow-padding: 52px,\n $label-padding: 16px,\n $height: 56px,\n $filled-baseline-top: 40px,\n $selected-text-height: 28px,\n $anchor-padding-left: 16px,\n $anchor-padding-left-with-leading-icon: 0,\n $anchor-padding-right: 0,\n $outlined-stroke-width: 2px,\n $default-width: 200px,\n $shape-radius: small,\n\n $minimum-height: 40px,\n $minimum-height-for-filled-label: 52px,\n $maximum-height: $height,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n height: (\n default: $height,\n maximum: $maximum-height,\n minimum: $minimum-height,\n ),\n ),\n\n $ink-color: rgba(theme-variables.prop-value(on-surface), 0.87),\n $dropdown-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.54\n ),\n $label-color: rgba(theme-variables.prop-value(on-surface), 0.6),\n $focused-label-color: rgba(theme-variables.prop-value(primary), 0.87),\n $bottom-line-idle-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.42\n ),\n $bottom-line-hover-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n ),\n\n $fill-color: color.mix(\n theme-variables.prop-value(on-surface),\n theme-variables.prop-value(surface),\n 4%\n ),\n\n // Disabled Styles\n $disabled-label-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $disabled-ink-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $disabled-fill-color: color.mix(\n theme-variables.prop-value(on-surface),\n theme-variables.prop-value(surface),\n 2%\n ),\n $disabled-fill-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n ),\n $disabled-bottom-line-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n ),\n $disabled-dropdown-icon-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $disabled-outline-color: rgba(\n theme-variables.prop-value(on-surface),\n 0.06\n ),\n\n $outlined-idle-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.38\n ),\n $outlined-hover-border: rgba(\n theme-variables.prop-value(on-surface),\n 0.87\n ),\n\n $label-position-y: 106%,\n $outline-label-offset: 16px,\n $outlined-label-position-y: get-outlined-label-position-y($height),\n $outlined-with-leading-icon-label-position-x: 32px,\n\n $dropdown-transition-duration: 150ms,\n // Transition durartions to active state\n $icon-active-fade-out-duration: 0.33 * $dropdown-transition-duration,\n $icon-active-fade-in-duration: 0.67 * $dropdown-transition-duration,\n // Transition durartions to inactive state\n $icon-inactive-fade-out-duration: 0.5 * $dropdown-transition-duration,\n $icon-inactive-fade-in-duration: 0.5 * $dropdown-transition-duration,\n\n // Error colors\n $error-color: error\n);\n
'},"iK6+":function(t,e){t.exports='<ui-slider v-model="value3" type="discrete" :step="10"></ui-slider>\n<ui-slider\n v-model="value4"\n type="discrete"\n :step="10"\n with-tick-marks\n></ui-slider>\n<ui-slider v-model="value5" type="discrete" :step="10"></ui-slider>\n
export default {\n data() {\n return {\n value3: 50,\n value4: 50,\n value5: [20, 50]\n };\n }\n};\n
'},iN8N:function(t,e){t.exports='<ui-icon-button></ui-icon-button>\n
Name | Type | Default | Description |
---|---|---|---|
model (v-model ) | boolean | false | \u5207\u6362\u72b6\u6001 |
icon | string | '' | \u8bbe\u7f6e\u5355\u4e2a\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
toggle | object | {} | \u8bbe\u7f6e\u5207\u6362\u6309\u94ae\u4e24\u4e2a\u72b6\u6001\u7684\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
\u901a\u8fc7 toggle.on
\u548c toggle.off
\u5c5e\u6027\u914d\u7f6e\u5207\u6362\u6309\u94ae\u72b6\u6001\u7684\u56fe\u6807
interface IconButton {\n toggle: {\n on: string;\n off: string;\n };\n}\n
Name | Props | Description |
---|---|---|
default | onClass , offClass | default \u63d2\u69fd\u5305\u542b\u81ea\u5b9a\u4e49\u56fe\u6807\uff08\u7ec4\uff09\u53ca HTML |
<template #default="{ onClass, offClass }">\n <i :class="onClass">ON</i>\n <i :class="offClass">OFF</i>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u56fe\u6807\u6309\u94ae\u65f6\u89e6\u53d1 |
change | function(value: boolean) | \u5207\u6362\u56fe\u6807\u72b6\u6001\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u56fe\u6807\u6309\u94ae\u72b6\u6001\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-icon-button v-model="value"></ui-icon-button>\n
\u624b\u52a8
<ui-icon-button\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-icon-button>\n
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUIPlus from 'balm-ui/dist/balm-ui-plus';\n\nVue.use(BalmUIPlus, {\n // Optional. Overwrite `<ui-tree>` props with default value.\n UiTree: {\n // some props\n }\n});\n
'},ieoR:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/divider/divider';\n
import Vue from 'vue';\nimport UiDivider from 'balm-ui/components/divider';\n\nVue.use(UiDivider);\n
'},jChz:function(t,e){t.exports='@use 'balm-ui/components/bottom-sheet' with (\n $background: white,\n $border-top-radius: 0,\n\n $scrim-color: on-surface,\n $scrim-opacity: 0.32\n);\n
'},jJUY:function(t,e){t.exports=''},jO7W:function(t,e){t.exports='New in 6.4.1
\u5361\u7247\u5305\u542b\u6709\u5173\u5355\u4e2a\u4e3b\u9898\u7684\u5185\u5bb9\u548c\u52a8\u4f5c\u3002
'},jQKu:function(t,e){t.exports='@use 'balm-ui/plugins/alert' with (\n $width: 450px\n);\n
'},jS8Y:function(t,e){t.exports=''},jTik:function(t,e){t.exports='New in 8.24.0
\u6587\u672c\u6846\u4f7f\u7528\u6237\u53ef\u4ee5\u8f93\u5165\u548c\u7f16\u8f91\u6587\u672c\u3002
'},jiXr:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/select/select';\n@use 'balm-ui/components/menu/menu';\n@use 'balm-ui/components/list/list';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiSelect from 'balm-ui/components/select';\n\n// Optional. Overwrite `<ui-select>` props with default value.\nVue.use(UiSelect, {\n // some props\n});\n
'},jne1:function(t,e){t.exports='<h6 :class="$tt('headline6')">Text Label</h6>\n<div class="demo">\n <ui-tab-bar v-model="active">\n <ui-tab v-for="(tab, index) in tabs" :key="index">\n {{ tab.text }}\n </ui-tab>\n </ui-tab-bar>\n</div>\n\n<h6 :class="$tt('headline6')">Icon</h6>\n<div class="demo">\n <ui-tab-bar v-model="active">\n <ui-tab v-for="(tab, index) in tabs" :key="index"\n type="iconOnly"\n :icon="tab.icon">\n </ui-tab>\n </ui-tab-bar>\n</div>\n
export default {\n data() {\n return {\n active: 0,\n tabs: [\n {\n text: 'Favorites',\n icon: 'favorite'\n },\n {\n text: 'Recents',\n icon: 'phone'\n },\n {\n text: 'Nearby',\n icon: 'near_me'\n }\n ]\n };\n }\n};\n
'},joj8:function(t,e){t.exports=''},juWp:function(t,e){t.exports='New in 8.34.0
\u9876\u90e8\u5bfc\u822a\u680f\u663e\u793a\u4e0e\u5f53\u524d\u5c4f\u5e55\u6709\u5173\u7684\u4fe1\u606f\u548c\u64cd\u4f5c\u3002
'},jzIQ:function(t,e){t.exports='<ui-drawer>\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item active>Activated link</ui-nav-item>\n <ui-nav-item>Unactivated link</ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n</ui-drawer>\n
Component | Description |
---|---|
<ui-drawer> | \u5bfc\u822a\u5bb9\u5668\u5143\u7d20 |
<ui-drawer-header> | \u5bfc\u822a\u9876\u90e8\u5143\u7d20\uff08\u4e0d\u53ef\u6eda\u52a8\uff09 |
<ui-drawer-title> | \u5bfc\u822a\u4e3b\u6807\u9898\u5143\u7d20 |
<ui-drawer-subtitle> | \u5bfc\u822a\u526f\u6807\u9898\u5143\u7d20 |
<ui-drawer-content> | \u5bfc\u822a\u5185\u5bb9\u5143\u7d20\uff08\u53ef\u6eda\u52a8\uff09 |
<ui-drawer-app-content> | \u5bfc\u822a\u6253\u5f00/\u5173\u95ed\u65f6\u8c03\u6574\u5927\u5c0f\u7684\u540c\u7ea7\u5143\u7d20\u3002\u4ec5\u9650\u5e94\u7528\u4e8e <ui-drawer type="dismissible"> |
New in 8.31.0
<a v-button></a>\n
v-button
v-button.outlined
v-button.raised
v-button.unelevated
<ui-form nowrap item-margin-bottom="16" label-width="80">\n <template #default="{ subitemClass, actionClass }">\n <ui-form-field>\n <label class="required">Input:</label>\n <ui-textfield></ui-textfield>\n </ui-form-field>\n <ui-form-field>\n <label>Select:</label>\n <ui-select></ui-select>\n </ui-form-field>\n <ui-form-field>\n <label>Checkbox:</label>\n <div :class="subitemClass">\n <ui-form-field v-for="i in 3" :key="i">\n <ui-checkbox :value="i" :input-id="`checkbox-${i}`"></ui-checkbox>\n <label :for="`checkbox-${i}`">Checkbox {{ i }}</label>\n </ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field>\n <label>Radio:</label>\n <div :class="subitemClass">\n <ui-form-field v-for="i in 3" :key="i">\n <ui-radio\n v-model="checkedValue"\n :value="i"\n :input-id="`radio-${i}`"\n ></ui-radio>\n <label :for="`radio-${i}`">Radio {{ i }}</label>\n </ui-form-field>\n </div>\n </ui-form-field>\n <ui-form-field :class="actionClass">\n <ui-button raised>Submit</ui-button>\n <ui-button outlined>Cancel</ui-button>\n </ui-form-field>\n </template>\n</ui-form>\n
'},kIGY:function(t,e){t.exports='Material design \u7684\u54cd\u5e94\u5f0f UI \u57fa\u4e8e\u5217\u53d8\u91cf\u6805\u683c\u5e03\u5c40\u3002\u5b83\u5728\u53f0\u5f0f\u673a\u4e0a\u6709 12 \u5217\uff0c\u5728\u5e73\u677f\u7535\u8111\u4e0a\u6709 8 \u5217\uff0c\u5728\u624b\u673a\u4e0a\u6709 4 \u5217\u3002
'},kSIg:function(t,e){t.exports='<div v-ripple v-shadow="2" class="demo-surface">Interact with me!</div>\n
<div v-ripple:cssOnly v-shadow="2" class="demo-surface">Interact with me!</div>\n
'},kXna:function(t,e){t.exports='<ui-tabs></ui-tabs>\n
<ui-tabs>
PropsName | Type | Default | Description |
---|---|---|---|
items | array | [] | Mandatory. Tab items. |
The keys of a tab item object:
{\n text: 'text', // label text\n icon: 'icon', // label icon\n}\n
<ui-tabs>
SlotsName | Slots | Description |
---|---|---|
default | The default slot holds the tab components and can contain HTML. |
<!-- Full syntax -->\n<ui-tab-bar v-model="active">\n <ui-tab\n v-for="(tabItem, tabIndex) in items"\n :key="tabIndex"\n :icon="tabItem.icon"\n >\n {{ tabItem.text }}\n </ui-tab>\n</ui-tab-bar>\n\n<!-- Shorthand -->\n<ui-tabs v-model="active" :items="items"></ui-tabs>\n
'},keYf:function(t,e){t.exports='<ui-list role="radiogroup">\n <template v-for="(item, index) in items3">\n <ui-item-divider v-if="item === '-'" :key="index"></ui-item-divider>\n <ui-item v-else :key="index">\n <ui-item-text-content>{{ item.text }}</ui-item-text-content>\n <ui-item-last-content>\n <ui-radio\n v-model="checkedValue"\n :value="item.value"\n @click.native.stop\n ></ui-radio>\n </ui-item-last-content>\n </ui-item>\n </template>\n</ui-list>\n
export default {\n data() {\n return {\n checkedValue: 'dog'\n };\n }\n};\n
'},kfYF:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/snackbar/snackbar';\n@use 'balm-ui/plugins/toast/toast'; // New in 8.28.0\n
import Vue from 'vue';\nimport $toast from 'balm-ui/plugins/toast';\n\n// Optional. Overwrite `$toast` options.\nVue.use($toast, {\n // some options\n});\n
'},kiQV:function(t){t.exports=JSON.parse('{"name":"balm-ui","version":"8.69.0","description":"Next Generation Material UI for Vue.js","keywords":["balm","material","design","vue","vue-component","component","components","ui","framework","frontend"],"homepage":"https://v8.material.balmjs.com","license":"MIT","author":{"name":"Elf-mousE","email":"ifmouz@gmail.com","url":"http://elf-mouse.me"},"files":["src","dist","fonts","components","plugins","directives","utils","vetur"],"main":"dist/balm-ui.js","scripts":{"update:mdc":"balm --mdc","update:mdi":"balm --mdi","update:mdi:json":"balm --mdi-json","update":"npm run update:mdc && npm run update:mdi","dev":"balm","prod":"cross-env NODE_ENV=production balm -p","docs":"cross-env NODE_ENV=production balm -p --docs","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/balmjs/balm-ui.git"},"bugs":{"url":"https://github.com/balmjs/balm-ui/issues"},"vetur":{"tags":"vetur/tags.json","attributes":"vetur/attributes.json"},"dependencies":{"deepmerge":"^4.3.1","flatpickr":"^4.6.13","material-components-web":"12","quill":"^1.3.7"},"devDependencies":{"@babel/eslint-parser":"7.23","@babel/plugin-proposal-optional-chaining":"7.21","@babel/register":"7.23","@babel/runtime-corejs3":"7.23","@csstools/normalize.css":"^12.0.0","@vue/test-utils":"1","@vue/vue2-jest":"^29.0.0","axios":"^1.7.0","babel-jest":"^29.0.0","babel-plugin-prismjs":"^2.1.0","balm":"^3.35.1","clipboard":"^2.0.11","core-js":"^3.30.0","cross-env":"^7.0.3","eslint":"^8.0.0","eslint-config-prettier":"^8","eslint-plugin-prettier":"^4","eslint-plugin-vue":"^9.0.0","font-awesome":"^4.7.0","gulp-replace":"^1.1.4","html-loader":"1","jest":"^29.0.0","jest-serializer-vue":"^3.1.0","markdown-loader":"7","nyc":"^15.1.0","prettier":"2","prismjs":"^1.29.0","sanitize.css":"^13.0.0","vue":"2.7","vue-i18n":"8","vue-loader":"15","vue-meta":"2","vue-router":"3","vue-template-compiler":"2.7","webpack":"4"},"peerDependencies":{"vue":">=2.1.0","sass":"1.39.2"},"private":false}')},kmw8:function(t,e){t.exports='<div class="icons-preview-code">\n <div class="icons-preview">\n <ui-icon dark>face</ui-icon>\n <div class="icon-caption">Normal</div>\n </div>\n <div class="icons-preview">\n <ui-icon dark inactive>face</ui-icon>\n <div class="icon-caption">Disabled</div>\n </div>\n <div class="icons-preview icons-dark-bg">\n <ui-icon light>face</ui-icon>\n <div class="icon-caption">Normal</div>\n </div>\n <div class="icons-preview icons-dark-bg">\n <ui-icon light inactive>face</ui-icon>\n <div class="icon-caption">Disabled</div>\n </div>\n <div class="icons-preview">\n <ui-icon class="orange600">face</ui-icon>\n <div class="icon-caption">orange600</div>\n </div>\n</div>\n
.orange600 {\n color: #fb8c00;\n}\n
'},kuAi:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-datepicker>` props with default value.\n UiDatepicker: {\n // some props\n }\n});\n
'},kvTy:function(t,e){t.exports='<ui-datepicker\n v-model="date"\n :config="config"\n placeholder="Select Datetime.."\n toggle\n clear\n>\n <template #toggle>\n <i class="fa fa-calendar"></i>\n </template>\n <template #clear>\n <i class="fa fa-close"></i>\n </template>\n</ui-datepicker>\n
export default {\n data() {\n return {\n config: {\n enableTime: true,\n dateFormat: 'Y-m-d H:i'\n },\n date: ''\n };\n }\n};\n
'},l0Zm:function(t,e,o){"use strict";o.d(e,"b",(function(){return a})),o.d(e,"d",(function(){return i})),o.d(e,"e",(function(){return c})),o.d(e,"c",(function(){return r})),o.d(e,"f",(function(){return s})),o.d(e,"a",(function(){return u})),o.d(e,"i",(function(){return p})),o.d(e,"h",(function(){return h})),o.d(e,"g",(function(){return g}));var d=o("kiQV"),n=o("jHpe"),l=o.n(n);o("bPOv"),o("vy4m"),o("ZgVT"),o("y1X9"),o("QWvX"),o("gAkk"),o("hnpa"),o("XIHC"),o("5urj"),o("45FF"),o("c2Kr");const a=d.version,i=!1,c=!0,r=c?"//v8.material.balmjs.com":"",s=1e3,u=1241,p=[{text:"English",value:"en"},{text:"\u4e2d\u6587",value:"zh"}],h={light:{primary:"#6200ee",secondary:"#018786",background:"#fff",surface:"#fff",error:"#b00020"},dark:{primary:"#ce93d8",secondary:"#80cbc4",background:"#121212",surface:"#121212",error:"#cf6679"}};function g(t){t.config.productionTip=!1,t.prototype.$domain=r,t.prototype.$prism=l.a,t.prototype.$docs={props:{thead:["Name","Type","Default","Description"],tbody:["name","type","default",{field:"description",raw:!0}]},slots:{thead:["Name","Description","Slot"],tbody:["name","description","props"]},events:{thead:["Name","Type","Description"],tbody:["name","type","description"]},sass:{thead:["Variable","Description"],tbody:["var",{field:"description",raw:!0}]}}}},l2wt:function(t,e){t.exports='<ui-image-list><!-- the image item components --></ui-image-list>\n
<ui-image-list>
Types
0
: 'standard'
1
: 'masonry'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Image list types. |
masonry | boolean | false | Optional. Indicates that this Image List should use the Masonry variant. |
textProtection | boolean | false | Optional. Indicates that supporting content should be positioned in a scrim overlaying each image (instead of positioned separately under each image). |
Name | Props | Description |
---|---|---|
default | The default slot holds the image item components. |
<ui-list-divider></ui-list-divider>\n\n<ui-item-divider></ui-item-divider>\n
Name | Type | Default | Description |
---|---|---|---|
padded | boolean | false | \u5728\u5206\u9694\u7ebf\u7684\u6bcf\u4e00\u4fa7\u90fd\u7559\u6709\u95f4\u9699\uff0c\u4ee5\u5339\u914d\u6700\u540e\u4e00\u4e2a\u56fe\u5757\u7684\u586b\u5145\u3002 |
inset | boolean | false | \u589e\u52a0\u5206\u9694\u7ebf\u7684\u524d\u5bfc\u8fb9\u8ddd\uff0c\u4ee5\u4f7f\u5176\u4e0d\u4e0e\u56fe\u6807\u6216\u56fe\u50cf\u5217\u76f8\u4ea4\u3002 |
<ui-textfield\n id="input-chip-set-input"\n v-model="name"\n outlined\n class="demo-tf-add-space"\n placeholder="Chip text"\n></ui-textfield>\n<br />\n<ui-button id="input-chip-set-button" raised dense @click="addOne">\n Add Input Chip\n</ui-button>\n<ui-button\n id="input-chip-set-delete-button"\n outlined\n dense\n @click="removeLastOne"\n>\n Delete Last Chip\n</ui-button>\n\n<ui-chips id="input-chip-set" type="input" :options="list">\n <ui-chip\n v-for="item in list"\n :key="item.id"\n icon="face"\n @remove="removeOneById(item.id)"\n >\n {{ item.name }}\n </ui-chip>\n</ui-chips>\n
export default {\n data() {\n return {\n lastId: 2,\n name: '',\n list: [\n {\n id: 1,\n name: 'Jane Smith'\n },\n {\n id: 2,\n name: 'John Doe'\n }\n ]\n };\n },\n methods: {\n addOne() {\n if (this.name.trim().length) {\n this.lastId++;\n this.list.push({\n id: this.lastId,\n name: this.name\n });\n this.name = '';\n }\n },\n removeLastOne() {\n this.list.pop();\n },\n removeOneById(id) {\n let index = this.list.findIndex((item) => item.id === id);\n this.list.splice(index, 1);\n }\n }\n};\n
'},lTZF:function(t,e){t.exports='<ui-drawer type="dismissible"></ui-drawer>\n<ui-drawer-app-content><!-- Content --></ui-drawer-app-content>\n
'},laUp:function(t,e){t.exports='\u4ec5\u9650\u5e94\u7528\u4e8e
<ui-drawer type="dismissible">
<ui-select outlined>\n Food Group\n</ui-select>\n
'},lfQo:function(t,e){t.exports='<ui-card-media>\n <!-- <ui-card-media-content> -->\n</ui-card-media>\n
Name | Type | Default | Description |
---|---|---|---|
square | boolean | false | \u81ea\u52a8\u7f29\u653e\u5a92\u4f53\u533a\u57df\u7684\u9ad8\u5ea6\u4ee5\u4f7f\u5176\u5bbd\u5ea6\u76f8\u7b49\u3002 |
rectangle | boolean | false | \u6839\u636e\u5176\u5bbd\u5ea6\u81ea\u52a8\u7f29\u653e\u5a92\u4f53\u533a\u57df\u7684\u9ad8\u5ea6\uff0c\u5e76\u4fdd\u6301 16:9 \u7684\u7eb5\u6a2a\u6bd4\u3002 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5a92\u4f53\u5185\u5bb9\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-media-content>
$alert(message)
$alert(options)
interface VueInstance {\n $alert(options: string | object): Promise<void>;\n}\n
Option | Type | Default | Description |
---|---|---|---|
className | string | '' | \u81ea\u5b9a\u4e49\u8b66\u544a\u6846\u7684 class |
title | string | '' | \u8bbe\u7f6e\u8b66\u544a\u6846\u7684\u6807\u9898 |
state | string | '' | \u8b66\u544a\u6846\u72b6\u6001\u56fe\u6807\u7c7b\u578b |
stateOutlined | boolean | false | \u663e\u793a\u8f6e\u5ed3\u72b6\u6001\u56fe\u6807 |
message | string | '' | \u8bbe\u7f6e\u8b66\u544a\u6846\u7684\u5185\u5bb9 |
raw | boolean | false | \u6e32\u67d3 HTML |
buttonText | string | 'OK' | \u6309\u94ae\u6587\u672c |
callback | function | false | \u70b9\u51fb\u786e\u5b9a\u6309\u94ae\u540e\u7684\u4e8b\u4ef6\u5904\u7406 |
interface AlertDialog {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
\u7528\u6cd5 1
$alert({\n message,\n callback() {\n // ...\n }\n});\n
\u7528\u6cd5 2\uff08\u63a8\u8350\uff09
$alert(message).then(() => {\n // ...\n});\n
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $alert
New in 8.1.0
import { useAlert } from 'balm-ui';\n// \u6216\n// import { useAlert } from 'balm-ui/plugins/alert';\n\nconst $alert = useAlert();\n$alert('Hello BalmUI');\n
'},llx4:function(t,e){t.exports='<div class="demo-container">\n <!-- Drawer -->\n <ui-drawer type="dismissible" viewport-height nav-id="demo-menu">\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>Item {{ 0 }}</ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- Content -->\n <ui-drawer-app-content class="demo-content">\n <!-- App bar -->\n <ui-top-app-bar\n class="demo-app-bar"\n content-selector=".demo-app-content"\n nav-id="demo-menu"\n >\n Title\n </ui-top-app-bar>\n <!-- App content -->\n <div class="demo-app-content">\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </div>\n </ui-drawer-app-content>\n</div>\n
.demo-content {\n width: 100%;\n}\n\n.demo-app-content {\n height: 100%;\n overflow: auto;\n}\n
'},mFG2:function(t,e){t.exports='<ui-list v-model="selectedIndex" single-selection>\n <ui-item v-for="(item, index) in items2" :key="index">\n <ui-item-first-content>\n <ui-icon>{{ item.icon }}</ui-icon>\n </ui-item-first-content>\n <ui-item-text-content>{{ item.text }}</ui-item-text-content>\n </ui-item>\n</ui-list>\n
export default {\n data() {\n return {\n selectedIndex: 1\n };\n }\n};\n
'},mGuA:function(t,e){t.exports='New in 8.34.0
Bottom navigation bars allow movement between primary destinations in an app.
'},mHx5:function(t,e){t.exports='<ui-tab><!-- The tab text label --></ui-tab>\n
<ui-tab>
& <ui-tabs>
\u7c7b\u578b
0
: 'text'
1
: 'iconOnly'
2
: 'textWithIcon'
<ui-tab>
& <ui-tabs>
\u5171\u7528 PropsName | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u6807\u7b7e\u9875\u7c7b\u578b\uff08\u6392\u5217\u65b9\u5f0f\uff09 |
stacked | boolean | false | \u8bbe\u7f6e\u6807\u7b7e\u9875\u56fe\u6807\u548c\u6807\u7b7e\u4e3a\u5782\u76f4\u6a21\u5f0f\uff08\u9ed8\u8ba4\u4e3a\u6c34\u5e73\u6a21\u5f0f\uff09 |
minWidth | boolean | false | \u8bbe\u7f6e\u6807\u7b7e\u9875\u7684\u5927\u5c0f\u5e94\u7f29\u5c0f\u5230\u5c3d\u53ef\u80fd\u7a84\u800c\u4e0d\u5f15\u8d77\u6587\u672c\u6362\u884c |
contentIndicator | boolean | false | \u6807\u7b7e\u6587\u672c\u5bbd\u5ea6\u5339\u914d\u6307\u793a\u5668 |
<ui-tab>
PropsName | Type | Default | Description |
---|---|---|---|
text | string | '' | \u6807\u7b7e\u6587\u672c |
icon | string | '' | \u6807\u7b7e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u6587\u672c \u53ca HTML | |
icon | iconClass | \u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u56fe\u6807 |
indicator | \u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u6307\u793a\u5668 |
<ui-tab>\n <template #icon="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n </template>\n</ui-tab>\n
'},"mK/i":function(t,e){t.exports='<ui-badge state="success">\n Text\n <template #badge>new</template>\n</ui-badge>\n\n<ui-badge state="info">\n Text\n <template #badge>new</template>\n</ui-badge>\n\n<ui-badge state="warning">\n Text\n <template #badge>new</template>\n</ui-badge>\n\n<ui-badge state="error">\n Text\n <template #badge>new</template>\n</ui-badge>\n
'},mYr6:function(t,e){t.exports='<ui-progress></ui-progress>\n
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | Puts the linear progress indicator in an indeterminate state. |
progress | number | 0 | Sets the progress bar to this value. Value should be between [0, 1] . |
buffer | number | 0 | Sets the buffer bar to this value. Value should be between [0, 1] . |
label | string | '' | Label indicating how the progress bar should be announced to the user. |
closed | boolean | false | Hides the linear progress indicator. |
<ui-tabs :items="tabItems"></ui-tabs>\n
<ui-tab-bar>\n <ui-tab>\n Tab Text\n <template #indicator>\n <ui-tab-indicator></ui-tab-indicator>\n </template>\n </ui-tab>\n</ui-tab-bar>\n\n<ui-panels>\n <ui-panel></ui-panel>\n</ui-panels>\n
Component | Description |
---|---|
<ui-tabs> | <ui-tab-bar> \u548c <ui-tab> \u7684\u7f29\u5199 |
<ui-tab-bar> | \u6807\u7b7e\u9875\u5bb9\u5668 |
<ui-tab> | \u6807\u7b7e\u9875 |
<ui-panels> | \u6807\u7b7e\u9875\u9762\u677f\u5bb9\u5668 |
<ui-panel> | \u6807\u7b7e\u9875\u9762\u677f |
<ui-tab-indicator> | \u5305\u542b\u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u6307\u793a\u5668\u7684\u5185\u5bb9 |
<ui-tab-scroller> | \u5305\u542b\u81ea\u5b9a\u4e49\u6807\u7b7e\u9875\u6eda\u52a8\u5668\u7684\u5185\u5bb9 |
<ui-button><!-- the button text label --></ui-button>\n
<ui-button>
\u7c7b\u578b
0
: 'text'
1
: 'outlined'
2
: 'raised'
3
: 'unelevated'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u6309\u94ae\u7c7b\u578b | |
outlined | boolean | false | \u4f7f\u7528\u8f6e\u5ed3\u6309\u94ae\u6837\u5f0f | |
raised | boolean | false | \u4f7f\u7528\u6d6e\u96d5\u6309\u94ae\u6837\u5f0f | |
unelevated | boolean | false | \u4f7f\u7528\u6241\u5e73\u6309\u94ae\u6837\u5f0f | |
icon | string | '' | \u8bbe\u7f6e\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
disabled | boolean | false | \u7981\u7528\u6309\u94ae\u3002\u540c\u539f\u751f <button> \u5c5e\u6027\u3002 | |
nativeType | string | 'button' | \u539f\u751f\u6309\u94ae\u7c7b\u578b | 8.1.1 |
interface Button {\n nativeType: 'button' | 'submit' | 'reset';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6309\u94ae\u6587\u5b57\u53ca HTML | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u6309\u94ae\u65f6\u89e6\u53d1 |
<ui-panels>\n <!-- the panel components -->\n <ui-panel><!-- the panel content --></ui-panel>\n</ui-panels>\n
Name | Type | Default | Description |
---|---|---|---|
active (v-model ) | number | 0 | \u6fc0\u6d3b\u7684\u6807\u7b7e\u9875\u7d22\u5f15 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6807\u7b7e\u9875\u9762\u677f\u7ec4\u4ef6\u53ca HTML |
<ui-tabs v-model="active">\n <ui-tab>Tab One</ui-tab>\n <ui-tab>Tab Two</ui-tab>\n <ui-tab>Tab Three</ui-tab>\n</ui-tabs>\n\n<ui-panels v-model="active">\n <ui-panel>Panel One</ui-panel>\n <ui-panel>Panel Two</ui-panel>\n <ui-panel>Panel Three</ui-panel>\n</ui-panels>\n
'},mjNL:function(t,e){t.exports=""},mltC:function(t,e){t.exports='<div class="demo-container">\n <!-- App bar -->\n <ui-top-app-bar\n class="demo-app-bar"\n content-selector=".demo-app-content"\n nav-id="demo-menu"\n >\n Title\n </ui-top-app-bar>\n <!-- Drawer -->\n <ui-drawer type="dismissible" viewport-height nav-id="demo-menu">\n <ui-drawer-header>\n <ui-drawer-title>Title</ui-drawer-title>\n <ui-drawer-subtitle>Subtitle</ui-drawer-subtitle>\n </ui-drawer-header>\n <ui-drawer-content>\n <ui-nav>\n <ui-nav-item href="javascript:void(0)" active>Item {{ 0 }}</ui-nav-item>\n <ui-nav-item v-for="i in 12" :key="i" href="javascript:void(0)">\n Item {{ i }}\n </ui-nav-item>\n </ui-nav>\n </ui-drawer-content>\n </ui-drawer>\n <!-- Content -->\n <ui-drawer-app-content class="demo-app-content">\n <!-- App content -->\n <p v-for="i in 24" :key="i">Main Content {{ i }}</p>\n </ui-drawer-app-content>\n</div>\n
/* Only apply this style if below top app bar */\n.demo-app-bar {\n z-index: 7;\n}\n\n.demo-app-content {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n
'},mly0:function(t,e){t.exports='Chips are compact elements that represent an input, attribute, or action.
'},mm4C:function(t,e){t.exports='<ui-form-field>\n <label></label>\n <!-- awesome form item -->\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
nowrap | boolean | false | \u5f3a\u5236\u6587\u672c\u663e\u793a\u4e00\u884c\uff0c\u5e76\u4f7f\u6ea2\u51fa\u7684\u6587\u672c\u663e\u793a\u7701\u7565\u53f7\u3002 |
alignEnd | boolean | false | \u5c06\u5185\u5bb9\u653e\u7f6e\u5728 <label> \u4e4b\u540e |
spaceBetween | boolean | false | \u5bf9\u9f50\u5185\u5bb9\u548c <label> \u4e4b\u95f4\u7684\u7a7a\u95f4 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u8868\u5355\u9879\u5185\u5bb9\u53ca HTML |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/collapse/collapse';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiCollapse from 'balm-ui/components/collapse';\n\nVue.use(UiCollapse);\n
'},mzL3:function(t,e){t.exports='<ui-badge overlap dot>\n <ui-icon>mail</ui-icon>\n</ui-badge>\n\n<ui-badge overlap :count="8">\n <ui-icon>mail</ui-icon>\n</ui-badge>\n\n<ui-badge overlap :count="999">\n <ui-icon>mail</ui-icon>\n</ui-badge>\n
'},n2wJ:function(t,e){t.exports='\u5355\u9009\u6309\u94ae\u5141\u8bb8\u7528\u6237\u4ece\u4e00\u7ec4\u4e2d\u9009\u62e9\u4e00\u4e2a\u9009\u9879\u3002
'},n3Mp:function(t,e){t.exports='@use 'balm-ui/components/editor' with (\n $editor-height: 100%,\n $bubble-editor-height: 100px,\n\n $font-family: (\n 'arial': 'Arial',\n 'arial-black': 'Arial Black',\n 'comic-sans-ms': 'Comic Sans MS',\n 'courier-new': 'Courier New',\n 'tahoma': 'Tahoma',\n 'georgia': 'Georgia',\n 'helvetica': 'Helvetica',\n 'segoe-ui': 'Segoe UI',\n 'sans-serif': 'Sans-Serif',\n 'impact': 'Impact',\n 'times-new-roman': 'Times New Roman',\n 'verdana': 'Verdana'\n )\n);\n
'},nBgh:function(t,e){t.exports='Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.
'},nKLF:function(t,e){t.exports='Circular progress indicators display progress by animating an indicator along an invisible circular track in a clockwise direction. They can be applied directly to a surface, such as a button or card.
'},nOqn:function(t,e){t.exports='New in 6.0.0
<ui-dialog-title><!-- the dialog title --></ui-dialog-title>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
closable | boolean | false | \u5c55\u73b0\u5173\u95ed\u6309\u94ae | 8.10.0 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u6807\u9898\u53ca HTML |
<ui-menu><!-- the menuitem components --></ui-menu>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | Mandatory. |
items | array | [] | Menu items. |
quickOpen | boolean | false | Turn off menu open animations. |
position | string | 'TOP_LEFT' | Menu position to the menu button. |
distance | object | false | Anchor margin. Value format: { top, right, bottom, left } . |
fixed | boolean | false | Used to indicate that the menu is using fixed positioning. |
fullwidth | boolean | false | Sets the menu surface's width to match that of its parent anchor. Do not use with fixed or if hoisting to body. |
cssOnly | boolean | false | Show static menu. |
The keys of the menuitem:
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface Menu {\n items: Item[];\n position:\n | 'TOP_LEFT'\n | 'TOP_RIGHT'\n | 'BOTTOM_LEFT'\n | 'BOTTOM_RIGHT'\n | 'TOP_START'\n | 'TOP_END'\n | 'BOTTOM_START'\n | 'BOTTOM_END';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the menuitem components. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the menu is changed. |
selected | function(menuitem: SelectedItem) | Emits when an element has been selected. |
closed | function() | Emits when the menu is closed. |
opened | function() | Emits when the menu is opened. |
selected
event return data:
interface SelectedItem {\n index: number; // menuitem index\n text: string; // menuitem text\n value: string; // selected value\n}\n
NOTE: If you are not using
v-model
, you should listen for the menu using@change
and update theopen
prop.
Automatic
<ui-menu v-model="open"></ui-menu>\n
Manual
<ui-menu :open="open" @change="$balmUI.onChange('open', $event)"></ui-menu>\n
\u5bf9\u8bdd\u6846\u901a\u77e5\u7528\u6237\u6709\u5173\u4e00\u9879\u4efb\u52a1\u7684\u4fe1\u606f\uff0c\u5e76\u4e14\u53ef\u4ee5\u5305\u542b\u5173\u952e\u4fe1\u606f\uff0c\u9700\u8981\u505a\u51fa\u51b3\u5b9a\u6216\u6d89\u53ca\u591a\u4e2a\u4efb\u52a1\u3002
'},nbki:function(t,e){t.exports='<div id="light-on-bg" class="demo-color-combo">\n <div>\n <ui-icon-button\n :class="$theme.getThemeClass('on-primary')"\n :toggle="icon1"\n ></ui-icon-button>\n </div>\n <div :class="$theme.getThemeClass('on-primary')">\n Light icon on background\n </div>\n</div>\n\n<div id="dark-on-bg" class="demo-color-combo">\n <div :class="$theme.getThemeClass('primary')">\n <ui-icon-button :toggle="icon1"></ui-icon-button>\n </div>\n <div>Dark icon on background</div>\n</div>\n\n<div id="custom-color-combo" class="demo-color-combo">\n <div>\n <ui-icon-button :toggle="icon1"></ui-icon-button>\n </div>\n <div>Custom color</div>\n</div>\n
/* SASS code */\n.demo-color-combo {\n width: 250px;\n padding: 1rem;\n border-radius: 4px;\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-right: 8px;\n}\n\n#light-on-bg {\n background-color: #3e82f7;\n}\n#light-on-bg .mdc-icon-button {\n @include mdc-icon-toggle-ink-color(white);\n @include mdc-states-base-color(white);\n @include mdc-states-hover-opacity(0.1);\n @include mdc-states-focus-opacity(0.3);\n @include mdc-states-press-opacity(0.4);\n}\n\n#dark-on-bg {\n background-color: #00bcd6;\n}\n#dark-on-bg .mdc-icon-button {\n @include mdc-icon-toggle-ink-color(black);\n @include mdc-states(black);\n}\n\n#custom-color-combo .mdc-icon-button {\n @include mdc-icon-toggle-ink-color(#de442c);\n @include mdc-states-base-color(#de442c);\n @include mdc-states-hover-opacity(0.09);\n @include mdc-states-focus-opacity(0.26);\n @include mdc-states-press-opacity(0.35);\n}\n
'},ni4r:function(t,e){t.exports='import Vue from 'vue';\nimport $validator from 'balm-ui/plugins/validator';\nimport validatorRules from './config/validator-rules';\n\n// Optional. Set global validator rules.\nVue.use($validator, validatorRules);\n
'},nr38:function(t,e){t.exports='<ui-card-media-content><!-- rich media content --></ui-card-media-content>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u5a92\u4f53\u5185\u5bb9\u53ca HTML |
@use '@material/layout-grid' with (\n $breakpoints: (\n desktop: 840px,\n tablet: 600px,\n phone: 0px\n ),\n\n $columns: (\n desktop: 12,\n tablet: 8,\n phone: 4\n ),\n\n $default-margin: (\n desktop: 24px,\n tablet: 16px,\n phone: 16px\n ),\n\n $default-gutter: (\n desktop: 24px,\n tablet: 16px,\n phone: 16px\n ),\n\n $column-width: (\n desktop: 72px,\n tablet: 72px,\n phone: 72px\n ),\n\n $default-column-span: 4,\n\n $max-width: null\n);\n
'},nsGg:function(t,e){t.exports='\u6309\u94ae\u7ec4\u5141\u8bb8\u7528\u6237\u5207\u6362\u5206\u7ec4\u6309\u94ae\u7684\u9009\u5b9a\u72b6\u6001\u3002
'},o1ct:function(t,e){t.exports='New in 8.14.0
New in 8.1.0
\u4e00\u79cd\u7b80\u5355\u7684\u72b6\u6001\u7ba1\u7406\u6a21\u5f0f\u3002
'},o5nD:function(t,e){t.exports='The Material Design color system can be used to create a color scheme that reflects your brand or style.
'},o69K:function(t,e){t.exports='@use '@material/fab/fab-theme' with (\n $height: 56px,\n $mini-height: 40px,\n $shape-radius: 50%\n);\n
@use '@material/fab/extended-fab-theme' with (\n $extended-icon-padding: 12px,\n $extended-label-padding: 20px,\n $extended-height: 48px\n);\n
'},o6KT:function(t,e){t.exports='<div\n v-ripple="1"\n v-shadow="1"\n :class="['demo-surface', $theme.getThemeClass('primary')]"\n>\n Primary\n</div>\n<div\n v-ripple="2"\n v-shadow="2"\n :class="['demo-surface', $theme.getThemeClass('secondary')]"\n>\n Secondary\n</div>\n
<div\n v-ripple:cssOnly="1"\n v-shadow="2"\n :class="['demo-surface', $theme.getThemeClass('primary')]"\n>\n Primary\n</div>\n<div\n v-ripple:cssOnly="2"\n v-shadow="2"\n :class="['demo-surface', $theme.getThemeClass('secondary')]"\n>\n Secondary\n</div>\n
'},o8vW:function(t,e){t.exports='<ui-image-item><!-- image and text --></ui-image-item>\n
Name | Type | Default | Description |
---|---|---|---|
image | string | null | \u4e3a\u56fe\u7247\u5217\u8868\u9879\u6dfb\u52a0\u4e00\u4e2a <img> \u5143\u7d20\u5e76\u8bbe\u7f6e src \u5c5e\u6027 |
bgImage | string | null | \u4f7f\u7528\u4e00\u4e2a <div> \u4ee3\u66ff<img> \u5143\u7d20 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u56fe\u7247\u5217\u8868\u9879\u7684\u6587\u5b57\u6807\u7b7e\u5185\u5bb9\u53ca HTML | |
image | \u81ea\u5b9a\u4e49\u56fe\u7247 |
Name | Type | Description |
---|---|---|
click | function(event: object) | \u70b9\u51fb\u56fe\u7247\u5217\u8868\u9879\u65f6\u89e6\u53d1 |
<ui-item><!-- the item child components --></ui-item>\n\n<ui-nav-item><!-- the link item child components --></ui-nav-item>\n
<ui-item>
PropsName | Type | Default | Description |
---|---|---|---|
selected | boolean | false | Optional, styles the row in an selected state. |
disabled | boolean | false | Optional, styles the row in the disabled state. |
<ui-nav-item>
Props (New in 8.0.0)Name | Type | Default | Description |
---|---|---|---|
href | string | (required) | Resolved url. This would be the href attribute of an a element. |
active | boolean | false | Optional, styles the row in the activated state. |
Usage with <router-link>
(requires vue-router@3.1.0+
)
<router-link v-slot="{ href, navigate, isActive }">\n <ui-nav-item\n :href="href"\n :active="isActive"\n @click="navigate"\n ></ui-nav-item>\n</router-link>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the item child components and can contain HTML. | |
before | iconClass | Custom <ui-item-first-content> . Optional, the first tile in the row. Typically an icon or image. |
after | iconClass | Custom <ui-item-last-content> . Optional, the last tile in the row. Typically small text, icon. or image. |
Child components:
<ui-item-text-content>
<ui-item-text1>
<ui-item-text2>
<ui-item-first-content>
<ui-item-last-content>
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the list item is clicked. |
'},oVAJ:function(t,e,o){"use strict";(function(t){var d=o("59Zy"),n=o("KX7K"),l=o("QD8k");function a(){return c.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function i(t,e){if(a()New in 6.9.0
<div v-shape></div>\n
v-shape="corner"
(medium)v-shape.small="corner"
v-shape.large="corner"
v-shape.cut="corner"
(medium)v-shape.cut.small="corner"
v-shape.cut.large="corner"
Value | Type | Default | Description |
---|---|---|---|
corner | string | '' | Element for masking a specific corner; there may be up to 4. (Use shape sass radius variable when value is empty) |
Syntax is similar to CSS
border-radius
property.
<!-- The syntax of the first corner allows one to four values -->\n<!-- Radius is set for all 4 sides -->\n<div v-shape="'4px'"></div>\n\n<!-- top-left | bottom-right -->\n<div v-shape="'4px 0'"></div>\n\n<!-- top-right | bottom-left -->\n<div v-shape="'0 4px'"></div>\n\n<!-- top-left -->\n<div v-shape="'4px 0 0'"></div>\n\n<!-- top-left | top-right | bottom-left -->\n<div v-shape="'4px 4px 0'"></div>\n\n<!-- top-left | top-right | bottom-right | bottom-left -->\n<div v-shape="'4px 4px 4px 4px'"></div>\n
'},ohmo:function(t,e){t.exports='<ui-side-sheet></ui-side-sheet>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | Mandatory. |
closable | boolean | false | Displays close icon button. |
Name | Props | Description |
---|---|---|
title | The title slot holds the title for the side sheet. | |
default | The default slot holds the content for the side sheet. | |
actions | The actions slot holds the actions for the side sheet. |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | Emits when the side sheet is hidden. |
NOTE: If you are not using
v-model
, you should listen for the side sheet using@change
and update theopen
prop.
Automatic
<ui-side-sheet v-model="open"></ui-side-sheet>\n
Manual
<ui-side-sheet\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-side-sheet>\n
'},otXS:function(t,e){t.exports='New in 6.9.0
A content area which can be collapsed and expanded.
'},"p/y3":function(t,e){t.exports='New in 6.3.0
<div class="demo-theme-color-section__row">\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">\n Text on user-defined light background\n </legend>\n\n <div class="demo-theme-color-group">\n <div :class="['demo-theme-text-row demo-theme-bg--custom-light']">\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('primary')]"\n >\n Primary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('secondary')]"\n >\n Secondary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('hint')]"\n >\n Hint\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('disabled')]"\n >\n Disabled\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnLight('icon'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n\n <fieldset class="demo-fieldset--color">\n <legend :class="$tt('subtitle1')">\n Text on user-defined dark background\n </legend>\n\n <div class="demo-theme-color-group">\n <div :class="['demo-theme-text-row demo-theme-bg--custom-dark']">\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('primary')]"\n >\n Primary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('secondary')]"\n >\n Secondary\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('hint')]"\n >\n Hint\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('disabled')]"\n >\n Disabled\n </span>\n <span\n :class="['demo-theme-text-style', $theme.getTextClassOnDark('icon'), 'material-icons']"\n >\n favorite\n </span>\n </div>\n </div>\n </fieldset>\n</div>\n
'},p0DE:function(t,e,o){"use strict";o.r(e);o("FNk8"),o("BhEe"),o("jHcC"),o("PxwH"),o("PGW+"),o("y57E"),o("U3f4"),o("bOU7"),o("KDQB"),o("TqEC"),o("t+/R"),o("Ew+T"),o("rR+u"),o("oUlK"),o("VJTV");var d=o("FZBc");const n=Object(d.b)();window.IE=n;const l=n&&n<11;var a=o("oCYn"),i=o("ePgL"),c=o.n(i),r=o("cNnm"),s=o.n(r),u=o("l0Zm");const p="G-MNH519PFX9";let h=null;function g(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"Unknown";h?setTimeout((function(){h("set","page_path",t),h("event","page_view")}),200):function(){if(u.e&&!h){function t(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],t("js",new Date),t("config",p),h=t}}()}var m=o("KHd+"),b=Object(m.a)({},(function(){return(0,this._self._c)("router-view")}),[],!1,null,null,null).exports;var f=[{path:"intro",name:"guide.intro",component:()=>o.e(65).then(o.bind(null,"qy61"))},{path:"quickstart",name:"guide.quickstart",component:()=>o.e(67).then(o.bind(null,"PvZW"))},{path:"advanced",name:"guide.advanced",component:()=>o.e(64).then(o.bind(null,"X81u"))},{path:"kill-ie",name:"guide.kill-ie",component:()=>o.e(66).then(o.bind(null,"4/F1"))},{path:"upgrade",name:"guide.upgrade",component:()=>o.e(68).then(o.bind(null,"JWpO"))}];var v=[{path:"button",name:"general.button",component:()=>o.e(19).then(o.bind(null,"Xg0U"))},{path:"fab",name:"general.fab",component:()=>o.e(27).then(o.bind(null,"RjDU"))},{path:"icon-button",name:"general.icon-button",component:()=>o.e(7).then(o.bind(null,"FAGE"))},{path:"segmented-button",name:"general.segmented-button",component:()=>o.e(37).then(o.bind(null,"cYXZ"))}];var q=[{path:"top-app-bar",name:"layout.top-app-bar",component:()=>o.e(49).then(o.bind(null,"zR/0")),meta:{noLayout:!0}},{path:"grid",name:"layout.grid",component:()=>o.e(30).then(o.bind(null,"67l9")),meta:{noLayout:!0}},{path:"form",name:"layout.form",component:()=>o.e(29).then(o.bind(null,"uSaa"))},{path:"divider",name:"layout.divider",component:()=>o.e(25).then(o.bind(null,"aqUP"))}];var y=[{path:"drawer",name:"navigation.drawer",component:()=>o.e(60).then(o.bind(null,"Xm90"))},{path:"permanent-drawer-above-toolbar",name:"navigation.permanent-drawer-above-toolbar",component:()=>o.e(62).then(o.bind(null,"KpGl")),meta:{noLayout:!0}},{path:"permanent-drawer-below-toolbar",name:"navigation.permanent-drawer-below-toolbar",component:()=>o.e(63).then(o.bind(null,"qkjs")),meta:{noLayout:!0}},{path:"dismissible-drawer-full-height-drawer",name:"navigation.dismissible-drawer-full-height-drawer",component:()=>o.e(59).then(o.bind(null,"EoOT")),meta:{noLayout:!0}},{path:"dismissible-drawer-below-top-app-bar",name:"navigation.dismissible-drawer-below-top-app-bar",component:()=>o.e(58).then(o.bind(null,"iEnr")),meta:{noLayout:!0}},{path:"modal-drawer",name:"navigation.modal-drawer",component:()=>o.e(61).then(o.bind(null,"kmoq")),meta:{noLayout:!0}},{path:"tabs",name:"navigation.tabs",component:()=>o.e(46).then(o.bind(null,"faHd"))},{path:"menu",name:"navigation.menu",component:()=>o.e(32).then(o.bind(null,"OJj2"))},{path:"pagination",name:"navigation.pagination",component:()=>o.e(33).then(o.bind(null,"Kw/F"))},{path:"bottom-navigation",name:"navigation.bottom-navigation",component:()=>o.e(17).then(o.bind(null,"ss80")),meta:{noLayout:!0}}];var x=[{path:"color",name:"theme.color",component:()=>o.e(5).then(o.bind(null,"km5U"))},{path:"typography",name:"theme.typography",component:()=>o.e(75).then(o.bind(null,"0QVv"))},{path:"shape",name:"theme.shape",component:()=>o.e(57).then(o.bind(null,"srg3"))},{path:"/icons",name:"icons",component:()=>o.e(8).then(o.bind(null,"WqYz"))}];var w=[{path:"textfield",name:"data-input.textfield",component:()=>o.e(47).then(o.bind(null,"cObN"))},{path:"select",name:"data-input.select",component:()=>o.e(38).then(o.bind(null,"YVhR"))},{path:"checkbox",name:"data-input.checkbox",component:()=>o.e(20).then(o.bind(null,"mc/m"))},{path:"radio",name:"data-input.radio",component:()=>o.e(35).then(o.bind(null,"eTld"))},{path:"chips",name:"data-input.chips",component:()=>o.e(21).then(o.bind(null,"KYaq"))},{path:"switch",name:"data-input.switch",component:()=>o.e(44).then(o.bind(null,"4R7x"))},{path:"slider",name:"data-input.slider",component:()=>o.e(41).then(o.bind(null,"vyUe"))},{path:"file",name:"data-input.file",component:()=>o.e(28).then(o.bind(null,"V/ix"))},{path:"autocomplete",name:"data-input.autocomplete",component:()=>o.e(14).then(o.bind(null,"j++W"))},{path:"datepicker",name:"data-input.datepicker",component:()=>o.e(23).then(o.bind(null,"85o+"))},{path:"rangepicker",name:"data-input.rangepicker",component:()=>o.e(36).then(o.bind(null,"Lgcd"))},{path:"editor",name:"data-input.editor",component:()=>o.e(26).then(o.bind(null,"5M7V"))},{path:"validator",name:"data-input.validator",component:()=>o.e(76).then(o.bind(null,"9Wzh"))}];var k=[{path:"list",name:"data-display.list",component:()=>o.e(31).then(o.bind(null,"fX39"))},{path:"image-list",name:"data-display.image-list",component:()=>o.e(3).then(o.bind(null,"v9Vu"))},{path:"lazyload",name:"data-display.lazyload",component:()=>o.e(4).then(o.bind(null,"B0qJ"))},{path:"card",name:"data-display.card",component:()=>o.e(9).then(o.bind(null,"1rc5"))},{path:"table",name:"data-display.table",component:()=>o.e(45).then(o.bind(null,"/NPr"))},{path:"collapse",name:"data-display.collapse",component:()=>o.e(22).then(o.bind(null,"NKdk"))},{path:"badge",name:"data-display.badge",component:()=>o.e(15).then(o.bind(null,"B0FB"))},{path:"tree",name:"data-display.tree",component:()=>o.e(50).then(o.bind(null,"Z5BD"))}];var T=[{path:"alert",name:"feedback.alert",component:()=>o.e(13).then(o.bind(null,"HbX2"))},{path:"dialog",name:"feedback.dialog",component:()=>o.e(24).then(o.bind(null,"N5CE"))},{path:"alert-dialog",name:"feedback.alert-dialog",component:()=>o.e(70).then(o.bind(null,"/3bb"))},{path:"confirm-dialog",name:"feedback.confirm-dialog",component:()=>o.e(71).then(o.bind(null,"IsMX"))},{path:"snackbar",name:"feedback.snackbar",component:()=>o.e(42).then(o.bind(null,"7jU6"))},{path:"toast",name:"feedback.toast",component:()=>o.e(74).then(o.bind(null,"uHVM"))},{path:"banner",name:"feedback.banner",component:()=>o.e(16).then(o.bind(null,"0kSJ"))},{path:"progress",name:"feedback.progress",component:()=>o.e(34).then(o.bind(null,"wg+j"))},{path:"spinner",name:"feedback.spinner",component:()=>o.e(43).then(o.bind(null,"eH4y"))},{path:"skeleton",name:"feedback.skeleton",component:()=>o.e(40).then(o.bind(null,"dxdE"))},{path:"tooltip",name:"feedback.tooltip",component:()=>o.e(48).then(o.bind(null,"6pL+"))},{path:"bottom-sheet",name:"feedback.bottom-sheet",component:()=>o.e(18).then(o.bind(null,"XOQ+"))},{path:"side-sheet",name:"feedback.side-sheet",component:()=>o.e(39).then(o.bind(null,"KSDF"))}];var $=[{path:"event",name:"misc.event",component:()=>o.e(72).then(o.bind(null,"x7+/"))},{path:"debounce",name:"misc.debounce",component:()=>o.e(53).then(o.bind(null,"GvHa"))},{path:"ripple",name:"misc.ripple",component:()=>o.e(56).then(o.bind(null,"JCv0"))},{path:"elevation",name:"misc.elevation",component:()=>o.e(54).then(o.bind(null,"F4+S"))},{path:"anchor",name:"misc.anchor",component:()=>o.e(51).then(o.bind(null,"Q4UR"))},{path:"copy",name:"misc.copy",component:()=>o.e(52).then(o.bind(null,"tjhx"))},{path:"longpress",name:"misc.longpress",component:()=>o.e(55).then(o.bind(null,"HV0C"))}],I={name:"Home",metaInfo:{titleTemplate:"%s - Home"},mounted(){this.$nextTick((()=>{this.$bus.emit("global-message",!0)}))},beforeDestroy(){this.$bus.emit("global-message",!1)}},C=Object(m.a)(I,(function(){var t=this,e=t._self._c;return e("div",{class:[t.$tt("body1"),"page--home"]},[e("section",{directives:[{name:"ripple",rawName:"v-ripple.unbounded",modifiers:{unbounded:!0}}],staticClass:"hero"},[e("h1",{class:t.$tt("headline1")},[t._v("BalmUI")])]),t._v(" "),e("div",{class:[t.$tt("body2"),"pure-docs"]},[e("p",{class:t.$tt("subtitle1")},[t._v(t._s(t.$t("home.slogan")))]),t._v(" "),e("p",{class:t.$tt("subtitle2")},[t._v(t._s(t.$t("home.title")))]),t._v(" "),e("ui-button",{attrs:{raised:""},on:{click:function(e){return t.$router.push({name:"guide.intro"})}}},[t._v("\n "+t._s(t.$t("home.get-started"))+"\n ")])],1)])}),[],!1,null,null,null).exports,S={name:"Donate"},j=Object(m.a)(S,(function(){var t=this,e=t._self._c;return e("div",{class:[t.$tt("body1"),"page--donate"]},[e("section",{directives:[{name:"ripple",rawName:"v-ripple.unbounded",modifiers:{unbounded:!0}}],staticClass:"hero"},[e("h1",{class:t.$tt("headline1")},[t._v("Support BalmUI")])]),t._v(" "),e("div",{class:[t.$tt("body2"),"pure-docs"]},[e("p",[t._v("\n BalmUI is an MIT licensed open source project and completely free to\n use. However, the amount of effort needed to maintain and develop new\n features for the project is not sustainable without proper financial\n backing. You can support BalmUI development via the following methods:\n ")]),t._v(" "),e("h6",{class:t.$tt("headline6")},[t._v("One-time Donations")]),t._v(" "),e("p",[t._v("We accept donations through these channels:")]),t._v(" "),e("ui-grid",{staticClass:"donate-methods"},[e("ui-grid-cell",[e("div",{staticClass:"donate-method alipay"})]),t._v(" "),e("ui-grid-cell",[e("div",{staticClass:"donate-method wechatpay"})])],1),t._v(" "),e("h6",{class:t.$tt("headline6")},[t._v("Recurring Pledges")]),t._v(" "),e("p",[t._v("\n Recurring pledges come with exclusive perks, e.g. having your name\n listed in the BalmUI GitHub repository, or have your company logo placed\n on this website.\n ")]),t._v(" "),t._m(0),t._v(" "),e("h6",{class:t.$tt("headline6")},[t._v("Special Sponsors")]),t._v(" "),t._m(1)],1)])}),[function(){var t=this,e=t._self._c;return e("ul",[e("li",[e("a",{attrs:{href:"https://opencollective.com/balmjs",target:"_blank",rel:"noopener"}},[t._v("\n Become a backer or sponsor via OpenCollective\n ")])]),t._v(" "),e("li",[e("a",{attrs:{href:"https://www.patreon.com/balmjs",target:"_blank",rel:"noopener"}},[t._v("\n Become a backer or sponsor via Patreon\n ")])])])},function(){var t=this._self._c;return t("p",[t("a",{staticClass:"laravel-admin",attrs:{href:"https://laravel-admin.org/",target:"_blank",rel:"noopener"}},[this._v("\n Laravel Admin\n ")])])}],!1,null,null,null).exports;let D=[{path:"/test",name:"test",component:()=>o.e(6).then(o.bind(null,"re4y")),meta:{noLayout:!0}}];var U=u.d?D:[];a.a.use(c.a),a.a.use(s.a);const N=[{path:"/",name:"home",component:C},{path:"/donate",name:"donate",component:j},{path:"/guide",name:"guide",redirect:"/guide/intro",component:b,children:f},{path:"/general",name:"general",redirect:"/general/button",component:b,children:v},{path:"/layout",name:"layout",redirect:"/layout/grid",component:b,children:q},{path:"/navigation",name:"navigation",redirect:"/navigation/drawer",component:b,children:y},{path:"/theme",name:"theme",redirect:"/theme/color",component:b,children:x},{path:"/data-input",name:"data-input",redirect:"/data-input/textfield",component:b,children:w},{path:"/data-display",name:"data-display",redirect:"/data-display/list",component:b,children:k},{path:"/feedback",name:"feedback",redirect:"/feedback/dialog",component:b,children:T},{path:"/misc",name:"misc",redirect:"/misc/event",component:b,children:$},{path:"/store",name:"store",component:()=>o.e(73).then(o.bind(null,"0vnI"))},{path:"/utils",name:"utils",component:()=>o.e(77).then(o.bind(null,"dSgZ"))},{path:"*",component:()=>o.e(69).then(o.bind(null,"fO8F"))}].concat(U),O=new c.a({routes:N});!function(t){const e=Object(d.d)();t.beforeEach(((t,o,d)=>{e.emit("page-loading"),d()}));const o="balmui";t.afterEach(((t,d)=>{let n=document.querySelector("html").classList,l=t.name;if(!l||(l.indexOf("-drawer")>-1||l.indexOf("-toolbar")>-1||["layouts.grid","layouts.top-app-bar","test"].includes(l))?n.add(`${o}-no-layout`):n.remove(`${o}-no-layout`),d.name){let t=d.name.replace(".","_");n.remove(`${o}-${t}`)}if(t.name){let e=t.name.replace(".","_");n.add(`${o}-${e}`)}t.name!==d.name&&g(t.fullPath),e.emit("page-loaded")}))}(O);var B=O,_=o("CKNg"),P=o.n(_),E=o("5CTy"),M=o("Vo8n"),V=o("3BxJ"),z=o.n(V);a.a.use(P.a);const A=new P.a({locale:"en",messages:{en:E,zh:M}}),L={zh:z.a.zh};a.a.prototype.pickerLang=L;var R=A;const F=Object(d.f)();var H={data:()=>({themeColors:{},lang:""}),created(){this.theme=this.getThemeName(),this.setTheme()},methods:{getThemeName:()=>localStorage.getItem("theme")||"light",getTheme(){["background","primary","on-primary","secondary","on-secondary","surface","on-surface","error","on-error"].forEach((t=>{this.$set(this.themeColors,t,F.getThemeColor(t))}))},setTheme(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.theme;const e=u.h[t];localStorage.setItem("theme",t),F.colors=e,this.getTheme()},switchTheme(){const t="dark"===this.theme?"light":"dark";this.theme=t,this.setTheme(t)}}};const G=Object(d.d)();var W={mixins:[H,{data:()=>({lang:""}),created(){this.lang=this.getLang()},methods:{getLang:()=>localStorage.getItem("lang")||"en",setLang(t){let{value:e}=t;this.lang=e,localStorage.setItem("lang",e),G.emit("switch-lang",e)}}},{data:()=>({serviceWorker:null,demos:[]}),methods:{initSnippet(t,e){if(this.$store.demos=[],"utils"!==t&&e){this.$store.demos=[""];for(let d=1;d<=e;d++){let e=`${t}/demo${d}`,n=o("ddae")(`./${e}.md`);this.$store.demos.push(n)}}}}}]},Y=o("zuR4");const K=Object(d.d)();var J={install(t){t.prototype.$http=Y.a,Y.a.interceptors.request.use((t=>t),(t=>Promise.reject(t))),Y.a.interceptors.response.use((t=>(K.emit("off-loading"),t.data)),(t=>(K.emit("off-loading"),t.response?K.emit("on-error","Response Error"):t.request?K.emit("on-error","Request Error"):K.emit("on-error","Unknown Error"),Promise.reject(t))))}},X=o("DJqZ"),Q={data:()=>({open:!1,selectedTheme:"baseline",themeColorList:[{label:"Baseline (default)",value:"baseline"},{label:"Dark background (custom)",value:"dark"},{label:"Black primary (custom)",value:"black"},{label:"Shrine (custom)",value:"shrine"}]}),methods:{onSelected(t){let e=this.themeColorList[t.index].value;switch(e){case"dark":this.primary="#ffd54f",this.secondary="#ec407a";break;case"black":this.primary="#212121",this.secondary="#64dd17";break;case"shrine":this.primary="#fcb8ab",this.secondary="#feeae6";break;default:this.primary="#6200ee",this.secondary="#018786"}this.$theme.colors="shrine"===e?{primary:this.primary,secondary:this.secondary,"on-primary":"#442b2d","on-secondary":"#442b2d"}:{primary:this.primary,secondary:this.secondary},this.$store.getTheme(),this.selectedTheme=e,this.$refs.colorButton.$el.dataset.theme=e}}},Z=Object(m.a)(Q,(function(){var t=this,e=t._self._c;return e("ui-menu-anchor",{staticClass:"switch-theme"},[e("ui-button",{ref:"colorButton",attrs:{title:"Change theme colors","data-theme":"baseline"},on:{click:function(e){return t.$balmUI.onShow("open")}}},[e("i",{staticClass:"demo-theme-color-radio"},[e("span",{staticClass:"demo-theme-color-radio__inner"})])]),t._v(" "),e("ui-menu",{staticClass:"demo-theme-menu",on:{selected:t.onSelected},model:{value:t.open,callback:function(e){t.open=e},expression:"open"}},t._l(t.themeColorList,(function(o,d){return e("ui-menuitem",{key:d,class:{"demo-theme-menu__list-item--selected":t.selectedTheme===o.value},attrs:{"data-theme":o.value}},[e("ui-menuitem-icon",[e("i",{staticClass:"demo-theme-color-radio"},[e("span",{staticClass:"demo-theme-color-radio__inner"})])]),t._v("\n "+t._s(o.label)+"\n ")],1)})),1)],1)}),[],!1,null,null,null).exports;const tt=[{name:"guide",children:[{name:"intro"},{name:"quickstart"},{name:"advanced"},{name:"kill-ie"},{name:"upgrade"}]},"-",{name:"theme",children:[{icon:"palette",name:"color"},{icon:"text_fields",name:"typography"},{icon:"emoji_symbols",name:"icons"},{icon:"category",name:"shape"}]},"-",{name:"general",children:[{icon:"add_box",name:"button"},{icon:"add_circle_outline",name:"fab"},{icon:"add",name:"icon-button"},{icon:"add_box",name:"segmented-button"}]},"-",{name:"layout",children:[{icon:"web",name:"top-app-bar"},{icon:"grid_on",name:"grid"},{icon:"view_list",name:"form"},{icon:"horizontal_rule",name:"divider"}]},"-",{name:"navigation",children:[{icon:"vertical_split",name:"drawer"},{icon:"tab",name:"tabs"},{icon:"menu",name:"menu"},{icon:"pages",name:"pagination"},{icon:"video_label",name:"bottom-navigation",plus:!0}]},"-",{name:"data-input",children:[{icon:"text_format",name:"textfield"},{icon:"text_format",name:"autocomplete"},{icon:"wysiwyg",name:"editor",plus:!0},{icon:"menu",name:"select"},{icon:"check_box",name:"checkbox"},{icon:"radio_button_checked",name:"radio"},{icon:"indeterminate_check_box",name:"chips"},{icon:"file_upload",name:"file"},{icon:"today",name:"datepicker"},{icon:"date_range",name:"rangepicker"},{icon:"toggle_off",name:"switch"},{icon:"linear_scale",name:"slider"},{icon:"api",name:"validator"}]},"-",{name:"data-display",children:[{icon:"list",name:"list"},{icon:"view_comfy",name:"image-list"},{icon:"category",name:"card"},{icon:"table_view",name:"table"},{icon:"swap_vert",name:"collapse"},{icon:"category",name:"badge"},{icon:"account_tree",name:"tree",plus:!0}]},"-",{name:"feedback",children:[{icon:"feedback",name:"alert"},{icon:"event_note",name:"dialog"},{icon:"event_note",name:"alert-dialog"},{icon:"event_note",name:"confirm-dialog"},{icon:"call_to_action",name:"snackbar"},{icon:"call_to_action",name:"toast"},{icon:"notifications",name:"banner"},{icon:"trip_origin",name:"progress"},{icon:"pending",name:"spinner"},{icon:"notes",name:"skeleton",plus:!0},{icon:"feedback",name:"tooltip"},{icon:"video_label",name:"bottom-sheet",plus:!0},{icon:"video_label",name:"side-sheet",plus:!0}]},"-",{name:"misc",children:[{icon:"api",name:"event"},{icon:"mouse",name:"debounce"},{icon:"texture",name:"ripple"},{icon:"layers",name:"elevation"},{icon:"anchor",name:"anchor",plus:!0},{icon:"content_copy",name:"copy",plus:!0},{icon:"touch_app",name:"longpress",plus:!0}]},"-",{icon:"storage",name:"store",link:!0},"-",{icon:"widgets",name:"utils",link:!0},"-","footer"];let et=[];for(let $t of tt)if("-"===$t||"footer"===$t)et.push($t);else if(et.push({icon:$t.icon,name:$t.name,url:!!$t.link&&$t.name}),$t.children)for(let t of $t.children){let e="icons"===t.name?t.name:`${$t.name}.${t.name}`;et.push({isSubmenu:!0,icon:t.icon,name:t.name,url:e,plus:t.plus||!1})}var ot=et,dt={metaInfo:{title:"BalmUI"},components:{TopAppToolbar:X.a,SwitchTheme:Z},data:()=>({version:u.b,menu:ot,bodyEl:document.documentElement||document.body,isWideScreen:!0,drawerType:"permanent",openDrawer:!1,pageLoad:{loading:!1,progress:0,timer:null},showBanner:!1,hasNewVersion:!1}),computed:{noLayout(){return!this.$route.name||this.$route.meta&&this.$route.meta.noLayout}},mounted(){this.$bus.on("on-error",(t=>{this.$alert(t)})),this.$bus.on("page-loading",(()=>{this.pageLoad.loading=!0,this.pageLoad.progress=0,clearInterval(this.pageLoad.timer),this.pageLoad.timer=setInterval(this.loading,u.f/5)})),this.$bus.on("page-loaded",(()=>{this.loaded(),setTimeout((()=>{this.pageLoad.loading=!1,this.bodyEl.scrollTop=0}),1)})),this.$bus.on("global-message",(t=>{this.showBanner=t})),this.$i18n.locale=this.$store.lang,this.$bus.on("switch-lang",(t=>{this.$i18n.locale=t})),this.$bus.on("refresh",(()=>{this.hasNewVersion=!0,this.showBanner=!0})),this.init(),window.addEventListener("balmResize",this.init)},beforeDestroy(){this.$bus.off(["page-loading","page-loaded","global-message","switch-lang"]),window.removeEventListener("balmResize",this.init)},methods:{getDrawerType(){return this.isWideScreen=window.innerWidth>=u.a,this.isWideScreen?"permanent":"modal"},init(){this.drawerType=this.getDrawerType()},handleMenu(t,e){this.openDrawer=!1,window.innerWidthRecommended Choice\uff1aChrome
\n<div v-anchor.html class="container">\n <a class="v-anchor" data-href="#target3">Anchor 3</a>\n <a class="v-anchor" data-href="#target4">Anchor 4</a>\n\n <div id="target3">Target 3</div>\n <div id="target4">Target 4</div>\n</div>\n
'},pb3D:function(t,e){t.exports='<ui-bottom-sheet></ui-bottom-sheet>\n
Name | Type | Default | Description |
---|---|---|---|
open (v-model ) | boolean | false | \u5e95\u90e8\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5e95\u90e8\u52a8\u4f5c\u8868\u7684\u5185\u5bb9\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u5e95\u90e8\u52a8\u4f5c\u8868\u9690\u85cf\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5e95\u90e8\u52a8\u4f5c\u8868\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-bottom-sheet v-model="open"></ui-bottom-sheet>\n
\u624b\u52a8
<ui-bottom-sheet\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-bottom-sheet>\n
<ui-editor\n ref="editor"\n v-model="decodeContent"\n placeholder="Compose an epic..."\n :toolbar="toolbar"\n :toolbar-handlers="toolbarHandlers"\n custom-image-handler\n @file-change="onFileChange"\n></ui-editor>\n\n<!-- Custom editor content preview -->\n<ui-dialog v-model="preview.show" class="preview-dialog">\n <ui-dialog-title>\n Preview\n <ui-icon-button\n class="close"\n icon="close"\n @click="$balmUI.onClose('preview.show')"\n ></ui-icon-button>\n </ui-dialog-title>\n <ui-dialog-content>\n <ui-tabs\n v-model="preview.type"\n :type="2"\n :items="[\n {\n text: 'Desktop',\n icon: 'desktop_windows'\n },\n {\n text: 'Tablet',\n icon: 'tablet'\n },\n {\n text: 'Mobile',\n icon: 'phone_iphone'\n }\n ]"\n ></ui-tabs>\n <div\n v-shadow="4"\n class="preview-content"\n :style="previewStyle"\n v-html="preview.content"\n ></div>\n </ui-dialog-content>\n</ui-dialog>\n
const toolbar = [\n [\n { header: [false, 1, 2, 3, 4, 5, 6] },\n { font: [] },\n { size: [] },\n { lineheight: [] }\n ],\n ['bold', 'italic', 'underline', { color: [] }, { background: [] }],\n [\n { align: '' },\n { align: 'center' },\n { align: 'right' },\n { align: 'justify' }\n ],\n [\n { list: 'ordered' },\n { list: 'bullet' },\n { indent: '+1' },\n { indent: '-1' },\n 'blockquote',\n 'emoji'\n ],\n ['link', 'image', 'video'],\n ['strike', { script: 'super' }, { script: 'sub' }, 'divider'],\n ['clean', 'undo', 'redo'],\n ['preview'] // custom\n];\n\nexport default {\n data() {\n return {\n toolbar,\n encodeContent: '',\n decodeContent: '',\n toolbarHandlers: {\n preview: (quill, value) => {\n this.preview.show = true;\n this.preview.content = this.decodeContent;\n }\n },\n preview: {\n show: false,\n type: 0,\n content: ''\n }\n };\n },\n computed: {\n previewStyle() {\n let width;\n\n switch (this.preview.type) {\n case 1:\n width = '768px';\n break;\n case 2:\n width = '375px';\n break;\n default:\n width = '960px';\n }\n\n return { width };\n }\n },\n mounted() {\n setTimeout(() => {\n if (this.$refs.editor) {\n this.decodeContent = this.$refs.editor.decodeEmoji(\n '<p>Hello BalmUI [oo] and BalmJS :smile: !</p>'\n );\n }\n }, 1);\n },\n methods: {\n async onFileChange(file, insert) {\n let { url } = await this.$http.post('/api/upload', { file });\n insert(url);\n },\n onSubmit() {\n this.encodeContent = this.$refs.editor.encodeEmoji(this.decodeContent);\n // submit action...\n }\n }\n};\n
'},pj72:function(t,e){t.exports='<ui-alert><!-- message --></ui-alert>\n
Name | Type | Default | Description |
---|---|---|---|
state | string | '' | \u72b6\u6001\u56fe\u6807\u7c7b\u578b |
stateOutlined | boolean | false | \u663e\u793a\u8f6e\u5ed3\u72b6\u6001\u56fe\u6807 |
closable | boolean | false | \u662f\u5426\u53ef\u5173\u95ed |
interface Alert {\n state: 'success' | 'info' | 'warning' | 'error' | 'help';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6d88\u606f\u5185\u5bb9\u53ca HTML |
<ui-button raised @click="$balmUI.onOpen('open')">Show Dialog</ui-button>\n\n<ui-dialog\n v-model="open"\n @confirm="onConfirm">\n <ui-dialog-title>Use Google's location service?</ui-dialog-title>\n <ui-dialog-content>\n <p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>\n </ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n
export default {\n data() {\n return {\n open: false\n };\n },\n methods: {\n onConfirm(result) {\n if (result) {\n console.log('ok');\n } else {\n console.log('cancel');\n }\n }\n }\n};\n
'},puJo:function(t,e){t.exports='<div v-shadow="4"></div>\n
v-shadow="z"
Value | Type | Default | Description |
---|---|---|---|
z | number | 0 | \u8bbe\u7f6e\u9634\u5f71\u5c42\u7ea7\uff0c\u8303\u56f4\u503c\uff1a[0, 24] |
v-shadow.transition="[z1, z2]"
\u5e94\u7528\u6b63\u786e\u7684 CSS \u89c4\u5219\u5728\u9634\u5f71\u5c42\u7ea7\u4e4b\u95f4\u8f6c\u6362\uff1a
z1
: \u9ed8\u8ba4\u7684\u5c42\u7ea7z2
: \u9f20\u6807\u7ecf\u8fc7\u65f6\u7684\u5c42\u7ea7<ui-select-helper><!-- the helper text --></ui-select-helper>\n
Name | Type | Default | Description |
---|---|---|---|
validMsg (v-model ) | string, boolean | false | Indicates the helper text is a validation message. |
id | string | null | Mandatory. (Corresponding to the helperTextId prop matching <ui-select> ) |
visible | boolean | false | Makes the helper text permanently visible. |
Name | Props | Description |
---|---|---|
default | The default slot holds the select helper text and can contain HTML. |
<ui-spinner :progress="progress"></ui-spinner>\n
<script>\nexport default {\n data() {\n return {\n progress: 0\n };\n }\n}\n
'},q2jH:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/form-field/form-field';\n@use 'balm-ui/components/checkbox/checkbox';\n
import Vue from 'vue';\nimport UiFormField from 'balm-ui/components/form-field';\nimport UiCheckbox from 'balm-ui/components/checkbox';\n\nVue.use(UiFormField);\n// Optional. Overwrite `<ui-checkbox>` props with default value.\nVue.use(UiCheckbox, {\n // some props\n});\n
'},q4nJ:function(t,e){t.exports=""},q6jy:function(t,e){t.exports='@use 'balm-ui/components/skeleton' with (\n $avatar: (\n base: 36px,\n large: 40px,\n small: 24px\n ),\n\n $color: #f2f2f2,\n $to-color: global-function.shade($color, 10%)\n);\n
'},qUyM:function(t,e){t.exports='<ui-button><!-- the button text label --></ui-button>\n
<ui-button>
Types
0
: 'text'
1
: 'outlined'
2
: 'raised'
3
: 'unelevated'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Button types. | |
outlined | boolean | false | Optional. Styles an outlined button that is flush with the surface. | |
raised | boolean | false | Optional. Styles a contained button that is elevated above the surface. | |
unelevated | boolean | false | Optional. Styles a contained button that is flush with the surface. | |
icon | string | '' | Optional. Indicates an icon element. See Material Icons list. | |
disabled | boolean | false | The <button> native attribute. To disable a button. | |
nativeType | string | 'button' | The <button> native attribute. | 8.1.1 |
interface Button {\n nativeType: 'button' | 'submit' | 'reset';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the button or link text and can contain HTML. | |
before | iconClass | Custom leading icon |
after | iconClass | Custom trailing icon |
<template #after="{ iconClass }">\n <ui-icon :class="iconClass">ICON</ui-icon>\n</template>\n
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the button is clicked. |
<ui-banner><!-- the banner message --></ui-banner>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
open (v-model ) | boolean | false | \u6a2a\u5e45\u663e\u793a\u72b6\u6001 | |
centered | boolean | false | \u5185\u5bb9\u5c45\u4e2d\u663e\u793a\u3002\u9ed8\u8ba4\u5c45\u5de6\u3002 | 8.27.0 |
fixed | boolean | false | \u5728\u9876\u90e8\u5bfc\u822a\u680f\u4e0b\u65b9\u4f7f\u7528\u6a2a\u5e45\u65f6\uff0c\u6a2a\u5e45\u5e94\u56fa\u5b9a\u5728\u5c4f\u5e55\u9876\u90e8\u3002 | 8.27.0 |
withImage | boolean | false | \u56fe\u7247\u53ef\u4ee5\u5e2e\u52a9\u4f20\u8fbe\u6a2a\u5e45\u5e7f\u544a\u7684\u4fe1\u606f\u3002 | 8.27.0 |
mobileStacked | boolean | false | \u5e26\u6709\u957f\u6587\u5b57\u7684\u6a2a\u5e45\u5728\u79fb\u52a8\u89c6\u56fe\u4e2d\uff0c\u5e94\u5c06\u5176\u64cd\u4f5c\u533a\u57df\u653e\u7f6e\u5728\u6587\u5b57\u4e0b\u65b9\uff0c\u800c\u4e0d\u662f\u5e76\u6392\u653e\u7f6e\u3002 | 8.27.0 |
primaryButtonText | boolean | 'OK' | \u4e3b\u6309\u94ae\u6587\u672c | |
secondaryButtonText | boolean | '' | \u8f85\u6309\u94ae\u6587\u672c |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6d88\u606f\u6587\u672c\u53ca HTML | |
image | \u81ea\u5b9a\u4e49\u56fe\u6807\u6216\u56fe\u7247\u533a\u57df | |
actions | \u81ea\u5b9a\u4e49\u52a8\u4f5c\u6309\u94ae |
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u6a2a\u5e45\u9690\u85cf\u65f6\u89e6\u53d1 |
closed | function(reason: string) | \u6a2a\u5e45\u5173\u95ed\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6a2a\u5e45\u663e\u793a\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-banner v-model="open"></ui-banner>\n
\u624b\u52a8
<ui-banner\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-banner>\n
import Vue from 'vue';\nimport vDebounce from 'balm-ui/directives/debounce';\n\nVue.directive(vDebounce.name, vDebounce);\n
'},qnyd:function(t,e){t.exports='<ui-card-actions><!-- card actions area --></ui-card-actions>\n
Name | Type | Default | Description |
---|---|---|---|
fullBleed | boolean | false | \u5220\u9664\u64cd\u4f5c\u533a\u57df\u7684\u586b\u5145\uff0c\u5e76\u4f7f\u5176\u64cd\u4f5c\u533a\u57df\u5bbd\u5ea6\u4e3a 100\uff05 |
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5361\u7247\u52a8\u4f5c\u7ec4\u4ef6 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-card-buttons>
<ui-card-icons>
<ui-image-text><!-- Text labels --></ui-image-text>\n
Name | Props | Description |
---|---|---|
default | Text labels display one line of text related to an image list item. | |
action | Optional. Actionable iconography can represent related actions. |
@use 'balm-ui/components/core';\n@use 'balm-ui/components/card/card';\n
import Vue from 'vue';\nimport UiCardComponents from 'balm-ui/components/card';\n\nVue.use(UiCardComponents, {\n // Optional. Overwrite `<ui-card>` props with default value.\n UiCard: {\n // some props\n },\n // Optional. Overwrite `<ui-card-media>` props with default value.\n UiCardMedia: {\n // some props\n },\n // Optional. Overwrite `<ui-card-actions>` props with default value.\n UiCardActions: {\n // some props\n }\n});\n
'},qraV:function(t,e){t.exports='<div v-copy></div>\n
interface Copy {\n text: string;\n success: Function;\n error?: Function;\n}\n
'},qrnz:function(t,e){t.exports='<ui-divider></ui-divider>\n\n<ui-divider>Text</ui-divider>\n
'},qvgR:function(t,e){t.exports='@use '@material/typography/typography' with (\n $font-family: string.unquote('Roboto, sans-serif'),\n\n // Override styles\n $styles-headline1: (),\n $styles-headline2: (),\n $styles-headline3: (),\n $styles-headline4: (),\n $styles-headline5: (),\n $styles-headline6: (),\n $styles-subtitle1: (),\n $styles-subtitle2: (),\n $styles-body1: (),\n $styles-body2: (),\n $styles-caption: (),\n $styles-button: (),\n $styles-overline: ()\n);\n
font-size
line-height
font-weight
letter-spacing
text-decoration
text-transform
\u26a0\ufe0f NOTE:
<ui-drawer-backdrop>
is deprecated in 8.35.0, just use<ui-drawer type="modal">
.
For balm-ui
< 8.35.0
<ui-drawer type="modal"></ui-drawer>\n<ui-drawer-backdrop></ui-drawer-backdrop>\n<div><!-- Content --></div>\n
@use 'balm-ui/components/badge' with (\n $background-color: #db4437,\n $color: #fff,\n $border-radius: 10px,\n $dot-radius: 3px\n);\n
'},"rHP+":function(t,e){t.exports='<ui-tree\n v-model="selectedValue"\n :data="treeData"\n :data-format="dataFormat"\n :max-level="2"\n>\n <p>selectedValue: {{ selectedValue }}</p>\n</ui-tree>\n
export default {\n data() {\n return {\n dataFormat: { label: 'title', value: 'key' },\n treeData: [],\n selectedValue: ''\n };\n }\n};\n
'},rNJt:function(t,e){t.exports='<div v-ripple></div>\n
NOTE: Dynamic class are not supported
v-ripple="color"
v-ripple:cssOnly="color"
Value | Type | Default | Description |
---|---|---|---|
color | number, string | undefined | Sets the ripple color |
1
or 'primary'
.2
or 'secondary'
.v-ripple.unbounded="color"
v-ripple:cssOnly.unbounded="color"
<ui-card-content>\n <!-- content within actionable area: rich media + additional text content -->\n</ui-card-content>\n
Name | Props | Description |
---|---|---|
default | The default slot holds the card content and can contain HTML. |
Child components:
<ui-card-media>
<ui-card-text>
@use 'balm-ui/plugins/confirm' with (\n $width: 450px\n);\n
'},"s+GU":function(t,e){t.exports='<ui-form-field>\n <label></label>\n <!-- awesome form item -->\n</ui-form-field>\n
Name | Type | Default | Description |
---|---|---|---|
nowrap | boolean | false | Force the text to stay on a single line and ellipse the overflow text. |
alignEnd | boolean | false | Position the input after the label. |
spaceBetween | boolean | false | Align the input and label space between. |
Name | Props | Description |
---|---|---|
default | The default slot holds the form item and can contain HTML. |
page
<ui-button @click="$bus.emit('global-message')">Show Banner</ui-button>\n
layout
<ui-top-app-bar>...</ui-top-app-bar>\n<ui-banner\n v-model="showGlobalMessage"\n class="global-message-banner"\n primary-button-text="Cool"\n secondary-button-text="Good"\n>\n Do you like BalmUI\n</ui-banner>\n<!-- Content -->\n
export default {\n data() {\n return {\n showGlobalMessage: false\n };\n },\n mounted() {\n this.$bus.on('global-message', () => {\n this.showGlobalMessage = true;\n });\n }\n};\n
$bus
: see BalmUI event plugin docs for details
@use 'balm-ui/components/core';\n@use 'balm-ui/components/snackbar/snackbar';\n
import Vue from 'vue';\nimport UiSnackbar from 'balm-ui/components/snackbar';\n\n// Optional. Overwrite `<ui-snackbar>` props with default value.\nVue.use(UiSnackbar, {\n // some props\n});\n
'},sK9k:function(t,e){t.exports='<ui-button>Text</ui-button>\n<ui-button outlined>Outlined</ui-button>\n<ui-button raised>Raised</ui-button>\n\n<ui-button icon="favorite">Icon</ui-button>\n<ui-button>\n Trailing Icon\n <template #after="{ iconClass }">\n <!-- Custom SVG -->\n <svg-logo :class="iconClass"></svg-logo>\n </template>\n</ui-button>\n\n<a v-button href="javascript:void(0)">Link</a>\n
'},sKeb:function(t,e){t.exports='\u5206\u9694\u7ebf\u662f\u5c06\u5185\u5bb9\u6309\u5217\u8868\u548c\u5e03\u5c40\u5206\u7ec4\u7684\u7ec6\u7ebf\u3002
'},sTH5:function(t,e){t.exports='Default Usage
import { types } from 'balm-ui';\n
Individual Usage
import types from 'balm-ui/utils/types';\n
Methods
types.getType(any): string;\n\ntypes.isUndefined(value): boolean;\ntypes.isNull(value): boolean;\ntypes.isBoolean(value): boolean;\ntypes.isNumber(value): boolean;\ntypes.isString(value): boolean;\ntypes.isSymbol(value): boolean;\ntypes.isObject(value): boolean;\ntypes.isArray(value): boolean;\ntypes.isFunction(value): boolean;\n
Default Usage
import { helpers } from 'balm-ui';\n
Individual Usage
import helpers from 'balm-ui/utils/helpers';\n
Methods
helpers.isEmpty(value): boolean;\n\nhelpers.jsonEqual(jsonA, jsonB): boolean; // The order of the properties IS IMPORTANT\nhelpers.isDeepEqual(obj1, obj2): boolean;\n\n// New in 6.7.0\nhelpers.merge(target: object, source: object): object;\nhelpers.merge.all(arrayOfObjects: object[]): object;\n\n// New in 8.38.0\nhelpers.toCamelCase(str: string): string;\nhelpers.toCapitalize(str: string): string;\n
isEmpty
The following values are considered to be empty:undefined
null
false
0
''
'0'
{}
[]
map
or set
Default Usage
import { detectIE } from 'balm-ui';\n
Individual Usage
import detectIE from 'balm-ui/utils/ie';\n
Methods
detectIE(): string | false;\n
IE browser returns version, other browsers return
false
.
New in 8.62.0
Default Usage
import { ban } from 'balm-ui';\n
Individual Usage
import ban from 'balm-ui/utils/ban';\n
Methods
ban(): void;\n
'},sYN3:function(t,e){t.exports='Date pickers let users select a date, or a range of dates.
'},"se/Z":function(t,e){t.exports='New in 4.2.0
<ui-top-app-bar><!-- the application title --></ui-top-app-bar>\n
<ui-top-app-bar>
Types
0
: 'standard'
1
: 'fixed'
2
: 'dense'
3
: 'prominent'
4
: 'prominentDense'
5
: 'short'
6
: 'shortCollapsed'
-1
: 'nonRegular'
Name | Type | Default | Description |
---|---|---|---|
contentSelector | string | (required) | Selector used to style the content below the top app bar, to prevent the top app bar from covering it. |
type | string, number | 0 | Mandatory. Top app bar types. |
fixed | boolean | false | Fixed top app bars stay at the top of the page and elevate above the content when scrolled. |
dense | boolean | false | The dense top app bar is shorter. |
prominent | boolean | false | The prominent top app bar is taller. |
prominentDense | boolean | false | The prominent top app bar with dense. |
short | boolean | false | Short top app bars are top app bars that can collapse to the navigation icon side when scrolled. |
shortCollapsed | boolean | false | Short top app bars can be configured to always appear collapsed. |
title | string | '' | Application title. |
navIcon | string, boolean | 'menu' | A navigation icon. (Set 'close' for the contextual action bar) |
navId | string | null | Control the navigation drawer is opened or closed. (Please refer to the navId prop of the drawer) |
Short top app bars should be used with no more than 1 action item.
Name | Props | Description |
---|---|---|
default | The default slot holds the application title and can contain HTML. | |
nav-icon | navIconClass | The nav-icon slot holds the navigation icon and can contain HTML. |
toolbar | toolbarItemClass | The toolbar slot holds the action items and can contain HTML. |
<template #toolbar="{ toolbarItemClass }">\n <ui-icon-button :class="toolbarItemClass" icon="ICON"></ui-icon-button>\n</template>\n
Name | Type | Description |
---|---|---|
nav | function() | Emits when the navigation icon is clicked. |
close | function() | Emits when the navigation icon is clicked. Applicable only for Contextual action bar. |
NOTE: If you are not using
navId
of the top app bar andnavId
of the drawer, you should listen for the top app bar using@nav
and update thev-model
prop of the drawer.
Automatic
<ui-top-app-bar nav-id="demo-menu"></ui-top-app-bar>\n<ui-drawer nav-id="demo-menu" type="modal"></ui-drawer>\n
Manual
<ui-top-app-bar @nav="$balmUI.onChange('open', !open)"></ui-top-app-bar>\n<ui-drawer v-model="open" type="modal"></ui-drawer>\n
<ui-editor v-model="content" theme="bubble"></ui-editor>\n
'},"t+gi":function(t,e){t.exports='\u5f53\u7528\u6237\u5c06\u9f20\u6807\u60ac\u505c\uff0c\u805a\u7126\u6216\u70b9\u51fb\u67d0\u4e2a\u5143\u7d20\u65f6\uff0c\u6587\u5b57\u63d0\u793a\u5c06\u663e\u793a\u4fe1\u606f\u4e30\u5bcc\u7684\u6587\u672c\u3002
'},t1wV:function(t,e){t.exports='New in 8.0.0
<ui-progress></ui-progress>\n
Name | Type | Default | Description |
---|---|---|---|
active | boolean | false | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u4e3a\u6d3b\u52a8\u72b6\u6001 |
progress | number | 0 | \u8bbe\u7f6e\u8fdb\u5ea6\u6761\u503c\u3002\u503c\u7684\u8303\u56f4\u4e3a [0, 1] |
buffer | number | 0 | \u8bbe\u7f6e\u7f13\u51b2\u533a\u503c\u3002\u503c\u7684\u8303\u56f4\u4e3a [0, 1] |
label | string | '' | \u8fdb\u5ea6\u6761\u8bf4\u660e\u6587\u5b57 |
closed | boolean | false | \u9690\u85cf\u8fdb\u5ea6\u6761 |
<ui-image-list type="masonry" :text-protection="labelsType === 2">\n <ui-image-item\n v-for="(item, index) in list"\n :key="index"\n :image="require(`@/assets/photos/${item}.jpg`)"\n >\n <ui-image-text v-if="labelsType">\n Text label\n <template #action>\n <ui-icon-button icon="favorite_border"></ui-icon-button>\n </template>\n </ui-image-text>\n </ui-image-item>\n</ui-image-list>\n
export default {\n data() {\n return {\n labelsType: 1\n };\n }\n};\n
'},tZAW:function(t,e){t.exports='<ui-textfield outlined>\n Your Name\n</ui-textfield>\n
'},tbK0:function(t,e){t.exports='<div v-badge></div>\n
v-badge="count"
v-badge.overlap="count"
v-badge.dot
Value | Type | Default | Description |
---|---|---|---|
count | number | 0 | \u5fbd\u7ae0\u4e2d\u663e\u793a\u7684\u6570\u5b57 |
'},tg3m:function(t,e){t.exports='\u53ef\u663e\u793a\u7684\u6700\u5927\u6570\uff1a
99
\ud83c\udf89
balm-ui
(v9+) for Vue 3, see material.balmjs.com
balm-ui-next.js
\u5df2\u5f03\u7528UiCollapse
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93UiBottomNavigation
\u4ece balm-ui-next.js
\u5230 balm-ui-plus.js
\u5e93UiBottomSheet
\u4ece balm-ui-next.js
\u5230 balm-ui-plus.js
\u5e93vDebounce
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93UiAlert
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93$validator
: \u66f4\u65b0\u9a8c\u8bc1\u89c4\u5219\u683c\u5f0f
Old
interface BalmUIValidationRule {\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = {\n [key: string]: BalmUIValidationRule;\n}\n
New
interface BalmUIValidationRule {\n key: string; // field name\n label?: string;\n validator: string; // 'customRule1, customRule2, ...'\n ...customRule?: {\n validate(fieldValue: any, formData: { [fieldName: string]: any }): boolean;\n message: string | (fieldValue: any, formData: { [fieldName: string]: any }) => string;\n };\n}\n\ntype BalmUIValidations = BalmUIValidationRule[]\n
UiAutocomplete
, UiDatepicker
, UiRangepicker
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93$alert
, $confirm
, $toast
\u4ece balm-ui-plus.js
\u5230 balm-ui.js
\u5e93\u65b0\u7ec4\u4ef6:
<ui-banner>
<ui-tooltip>
<ui-nav-item>
\u65b0\u63d2\u4ef6:
$bus
$store
$theme
: \u5168\u65b0\u7684\u4e3b\u9898 APIs
v-shape
: \u5168\u65b0\u7684\u5f62\u72b6 APIs
<ui-menuitem>
: \u65b0\u589e\u5c5e\u6027 value
<ui-form>
: \u65b0\u589e\u5c5e\u6027 itemMarginBottom
, labelWidth
, labelMarginRight
, labelMarginBottom
Sass: \u590d\u5199\u53d8\u91cf\u66f4\u7b80\u6d01
\u65e7\u7684
@use '@material/button/variables';\n
\u65b0\u7684
@use '@material/button';\n
$themeColor
, $setTheme
, $textColor
, $setTextTheme
: \u5df2\u5f03\u7528\u3002\u4f7f\u7528 $theme
\u4ee3\u66ff<ui-slider>
: \u91cd\u547d\u540d\u5c5e\u6027 displayMarker
\u4e3a withTickMarks
<ui-pagination>
:before
, before-jumper
\u548c after-jumper
first
\u548c last
<ui-nav>
: \u79fb\u9664\u63d2\u69fd\u5c5e\u6027 itemClass
, activeClass
\u3002\u4f7f\u7528\u65b0\u7ec4\u4ef6 <ui-nav-item>
<ui-table>
: thead \u81ea\u5b9a\u4e49\u5bf9\u8c61\u4e2d\u7684 by
\u5b57\u6bb5\u91cd\u547d\u540d\u4e3a columnId
<ui-drawer>
: \u65b0\u589e\u5c5e\u6027 viewportHeight
<ui-menu>
, <ui-select>
: \u5404\u65b0\u589e\u5c5e\u6027 fullwidth
<ui-textfield>
: \u65b0\u589e\u5c5e\u6027 prefixText
, suffixText
, endAligned
, withCounter
v-anchor
: \u65b0\u589e\u4fee\u9970\u7b26 bodyElement
<ui-a>
<ui-icon-a>
<ui-nav>
: \u91cd\u547d\u540d\u63d2\u69fd\u5c5e\u6027 activatedClass
\u4e3a activeClass
<ui-textfield>
: \u79fb\u9664\u5c5e\u6027 dense
<ui-textfield-helper>
: \u91cd\u547d\u540d\u5c5e\u6027 counter
\u4e3a withCounter
<ui-textfield-counter>
: \u79fb\u9664\u7ec4\u4ef6\u3002\u4f7f\u7528 <ui-textfield-helper withCounter>
\u6216 <ui-textfield withCounter>
\u6765\u4ee3\u66ff@use 'balm-ui/components/core';\n@use 'balm-ui/components/editor/editor';\n@use 'balm-ui/components/icon/icon';\n\n// Choose one editor theme\n@use 'balm-ui/components/editor/theme/snow';\n@use 'balm-ui/components/editor/theme/bubble';\n
import Vue from 'vue';\nimport UiEditor from 'balm-ui/components/editor';\n\n// Optional. Overwrite `<ui-editor>` props with default value.\nVue.use(UiEditor, {\n // some props\n});\n
'},trld:function(t,e){t.exports='\u26a0\ufe0f \u63d0\u793a\uff1a
<ui-drawer-backdrop>
\u5728 8.35.0 \u4e2d\u5df2\u5f03\u7528\uff0c\u76f4\u63a5\u4f7f\u7528<ui-drawer type="modal">
\u5373\u53ef\u3002
For balm-ui
< 8.35.0
<ui-drawer type="modal"></ui-drawer>\n<ui-drawer-backdrop></ui-drawer-backdrop>\n<div><!-- Content --></div>\n
<ui-slider></ui-slider>\n
<ui-slider>
\u7c7b\u578b
0
: 'continuous'
1
: 'discrete'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | \u6ed1\u52a8\u6761\u7c7b\u578b |
discrete | boolean | false | \u5c06\u6ed1\u52a8\u6761\u6837\u5f0f\u8bbe\u7f6e\u4e3a\u79bb\u6563\u6ed1\u52a8\u6761 |
withTickMarks | boolean | false | \u79bb\u6563\u6ed1\u52a8\u6761\u652f\u6301\u8f68\u9053\u4e0a\u7684\u663e\u793a\u6807\u8bb0 |
model (v-model ) | number, array | 0 | \u6ed1\u52a8\u6761\u503c\uff08array \u503c\u8868\u793a\u4e3a\u8303\u56f4\u6ed1\u52a8\u6761\uff09 |
min | number | 0 | \u6ed1\u52a8\u6761\u53ef\u4ee5\u5177\u6709\u7684\u6700\u5c0f\u503c |
max | number | 100 | \u6ed1\u52a8\u6761\u53ef\u4ee5\u5177\u6709\u7684\u6700\u5927\u503c |
step | number | 1 | \u8bbe\u7f6e\u6ed1\u52a8\u6761\u503c\u7684\u589e\u91cf |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
Name | Type | Description |
---|---|---|
change | function(value: number|array) | \u5f53\u7528\u6237\u505c\u6b62\u62d6\u52a8\u6ed1\u5757\u6216\u6ed1\u52a8\u6761\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u6ed1\u52a8\u6761\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-slider v-model="value"></ui-slider>\n
\u624b\u52a8
<ui-slider\n :model="value"\n @change="$balmUI.onChange('value', $event)"\n></ui-slider>\n
<ui-grid-cell><!-- the grid cell content --></ui-grid-cell>\n
Name | Type | Default | Description |
---|---|---|---|
nested | boolean | false | The nested layout grid. |
columns | number, object | 4 | Optional, specifies the number of columns the cell spans. |
order | number | 0 | Optional, specifies the order of the cell. |
align | string | '' | Optional, specifies the alignment of cell. |
interface GridCell {\n columns: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n order: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n align: 'top' | 'middle' | 'bottom';\n}\n
Name | Props | Description |
---|---|---|
default | The default slot holds the grid cell content and can contain HTML. |
When your contents need extra structure that cannot be supported by single layout grid, you can nest layout grid within each other. To nest layout grid, using
<ui-grid-cell nested>
.
<ui-grid>\n <ui-grid-cell nested>\n <!-- Parent 1 -->\n <ui-grid-cell>Child 1</ui-grid-cell>\n <ui-grid-cell>Child 2</ui-grid-cell>\n <ui-grid-cell>Child 3</ui-grid-cell>\n </ui-grid-cell>\n <ui-grid-cell>Parent 2</ui-grid-cell>\n <ui-grid-cell>Parent 3</ui-grid-cell>\n</ui-grid>\n
'},uMtO:function(t,e){t.exports='<ui-tooltip>
Types
0
: 'plain'
<div aria-describedby="tooltip-id">Text</div>\n<ui-tooltip id="tooltip-id">Tips content</ui-tooltip>\n
1
: 'rich'
(New in 8.33.0)
<ui-tooltip-anchor>\n <div data-tooltip-id="tooltip-id">Text</div>\n <ui-tooltip id="tooltip-id" rich>Tips content</ui-tooltip>\n</ui-tooltip-anchor>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | Mandatory. Tooltip types. | 8.33.0 |
rich | boolean | false | Optional. Styles a rich tooltip. | 8.33.0 |
width | number | 0 | Custom max width for the tooltip. |
Name | Props | Description |
---|---|---|
default | The default slot holds the tooltip content and can contain HTML. |
Name | Props | Description |
---|---|---|
title | The title slot holds the tooltip title and can contain HTML. | |
default | linkClass | The default slot holds the tooltip content and can contain HTML. |
<ui-divider></ui-divider>\n
<ui-divider>
Types
0
: 'horizontal'
1
: 'vertical'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Mandatory. Text divider types. |
Name | Props | Description |
---|---|---|
default | The default slot holds the divider text and can contain HTML. | |
left | Applicable only for the vertical text divider. | |
right | Applicable only for the vertical text divider. |
$toast(message)
$toast(options)
type ToastMessage = string;\n\ninterface ToastOptions {\n className?: string;\n timeoutMs?: number;\n message: ToastMessage;\n position?: 'bottom' | 'center' | 'top';\n}\n\ninterface VueInstance {\n $toast(options: ToastMessage | ToastOptions): Promise<void>;\n}\n
Option | Type | Default | Description | Version |
---|---|---|---|---|
className | string | '' | The custom class name for the toast. | |
timeoutMs | number | 2750 | The amount of time in milliseconds to show the toast. Value must be between 2000 and 3500 or an error will be thrown. | |
message | string | '' | The text message to display. | |
position | string | 'bottom' | Toast position. | 8.30.0 |
$toast
without .vue
componentNew in 8.1.0
import { useToast } from 'balm-ui';\n// OR\n// import { useToast } from 'balm-ui/plugins/toast';\n\nconst $toast = useToast();\n$toast('Hello BalmUI');\n
'},uaR4:function(t,e){t.exports='<transition-group class="preview-list" name="list" tag="ul">\n <li v-for="(file, index) in files" :key="file.tmpId" class="item">\n <div class="inner">\n <span class="preview" :style="setBg(file)"></span>\n <span class="actions">\n <ui-fab\n v-if="!file.uploaded"\n icon="publish"\n mini\n @click="upload(file)"\n ></ui-fab>\n <ui-fab icon="delete" mini @click="remove(index)"></ui-fab>\n </span>\n </div>\n </li>\n <li v-if="files.length < limit" key="add" class="item add-btn">\n <div class="inner">\n <ui-file accept="image/*" multiple preview @change="onChange">\n <ui-icon class="add-icon">add</ui-icon>\n </ui-file>\n </div>\n </li>\n</transition-group>\n<p>\n <ui-button raised @click="uploadAllFiles">\n <ui-icon>publish</ui-icon>\n Upload All\n </ui-button>\n</p>\n
export default {\n data() {\n return {\n files: [],\n limit: 5,\n postUrl: '/api/upload'\n };\n },\n methods: {\n setBg({ previewSrc }) {\n return previewSrc ? { backgroundImage: `url(${previewSrc})` } : {};\n },\n onChange(files) {\n if (files.length > this.limit - this.files3.length) {\n this.$toast(`Image Limit: ${this.limit}`);\n } else {\n files.forEach((file) => {\n file.uploaded = false;\n this.files3.push(file);\n });\n }\n },\n async upload(file) {\n try {\n let response = await this.$http.post(this.postUrl, {\n file: file.sourceFile\n });\n file.uploaded = true;\n console.log(`${file.name} is uploaded`);\n } catch (e) {\n // your code\n }\n },\n uploadAllFiles() {\n if (this.files3.length) {\n this.files3.forEach((file) => {\n this.upload(file);\n });\n } else {\n this.$toast('No files');\n }\n },\n remove(index) {\n this.files3.splice(index, 1);\n }\n }\n};\n
/* extends demo2 */\n.preview-list {\n & > .item {\n .actions {\n display: flex;\n align-items: center;\n justify-content: space-around;\n height: 48px;\n }\n &.add-btn {\n .mdc-file {\n position: relative;\n width: 100%;\n height: 0;\n padding-bottom: 100%;\n border: 1px solid #ddd;\n border-radius: 3px;\n cursor: pointer;\n background-color: #fff;\n }\n .add-icon {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n font-size: 48px;\n }\n }\n }\n}\n
'},ucOw:function(t,e){t.exports='Menus display a list of choices on temporary surfaces.
'},uhQy:function(t,e){t.exports='\u5c0f\u6570\u503c\u6216\u72b6\u6001\u7684\u63cf\u8ff0\u7b26\u3002
'},ujjC:function(t,e){t.exports='New in 6.4.1
Pagination controls provide swift access to all pages while indicating that more pages exist.
'},unHe:function(t,e){t.exports='<div v-longpress></div>\n
type LongpressConfig =\n | Function // New in 8.52.0\n | {\n callback: Function;\n delay?: number;\n };\n
'},"v/FX":function(t,e){t.exports='<ui-grid class="demo-grid" fixed-column-width position="right">\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="1"></ui-grid-cell>\n</ui-grid>\n
'},v2TX:function(t,e){t.exports='<ui-menu-anchor><!-- the menu component --></ui-menu-anchor>\n
Name | Type | Default | Description |
---|---|---|---|
position | string | '' | \u8bbe\u7f6e\u83dc\u5355\u6309\u94ae\u4f4d\u7f6e\uff08\u76f8\u5bf9\u4e8e\u83dc\u5355\u951a\u70b9\uff09 |
absolute | boolean | false | \u542f\u7528\u7edd\u5bf9\u5b9a\u4f4d\uff08\u5176\u5bb9\u5668\u9700\u8981\u8bbe\u7f6e position: relative \uff09 |
interface MenuAnchor {\n position:\n | 'top left'\n | 'top right'\n | 'middle left'\n | 'middle right'\n | 'bottom left'\n | 'bottom right';\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u83dc\u5355\u7ec4\u4ef6\u53ca HTML |
<ui-icon><!-- the material design icon name --></ui-icon>\n
<ui-icon>
Types
0: 'filled'
1: 'outlined'
2: 'round'
3: 'twoTone'
4: 'sharp'
Name | Type | Default | Description |
---|---|---|---|
type | string, number | 0 | Material icon theme. |
outlined | boolean | false | Outlined icons customize stroke and fill attributes for a light, clean style that works well in dense UIs. The stroke weight of outlined icons can be adjusted to complement or contrast the weight of your typography. |
round | boolean | false | Rounded icons use a corner radius that pairs well with brands that use heavier typography, curved logos, or circular elements to express their style. |
twoTone | boolean | false | Two-tone icons have added dimension, using the attributes of stroke, fill, and color. Contrasting stroke and fill colors enables the use of multiple brand colors and can improve legibility. |
sharp | boolean | false | Sharp icons display corners with straight edges, for a crisp style that remains legible even at smaller scales. These rectangular shapes can support brand styles that aren\u2019t well-reflected by rounded shapes. |
size | number | 24 | Material icon sizing. |
dark | boolean | false | An icon on a light background with a dark foreground color. |
light | boolean | false | An icon on a dark background with a light foreground color. |
inactive | boolean | false | An icon is disabled or inactive. |
Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines, we recommend them to be shown in either
18
,24
,36
or48
px.
Name | Props | Description |
---|---|---|
default | The default slot holds the material design icon name and can contain HTML. |
Name | Type | Description |
---|---|---|
click | function(event: object) | Emits when the icon is clicked. |
<ui-list-divider></ui-list-divider>\n\n<ui-item-divider></ui-item-divider>\n
Name | Type | Default | Description |
---|---|---|---|
padded | boolean | false | Optional, leaves gaps on each side of divider to match padding of the last tile. |
inset | boolean | false | Optional, increases the leading margin of the divider so that it does not intersect the avatar column. |
\u83dc\u5355\u53ef\u663e\u793a\u4e34\u7684\u9009\u9879\u5217\u8868\u3002
'},vBYd:function(t,e){t.exports='<ui-button raised @click="show">Show Confrim</ui-button>\n
export default {\n methods: {\n show() {\n this.$confirm({\n message: 'Do you like BalmJS?',\n acceptText: 'Cool',\n cancelText: 'Good'\n }).then((result) => {\n if (result) {\n this.$alert('Thanks :)');\n }\n });\n }\n }\n};\n
'},vP3W:function(t,e){t.exports='@use '@material/linear-progress' with (\n $baseline-buffer-color: #e6e6e6\n);\n
'},vf4h:function(t,e){t.exports='<ui-dialog>\n <ui-dialog-title></ui-dialog-title>\n <ui-dialog-content></ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n
Component | Description |
---|---|
<ui-dialog> | Mandatory. The root DOM element containing the surface and the container. |
<ui-dialog-title> | Optional. Brief summary of the dialog's purpose. |
<ui-dialog-content> | Optional. Primary content area. May contain a list, a form, or prose. |
<ui-dialog-actions> | Optional. Footer area containing the dialog's action buttons. |
<ui-card>\n <ui-card-content>\n <ui-card-media>\n <ui-card-media-content></ui-card-media-content>\n </ui-card-media>\n <ui-card-text></ui-card-text>\n </ui-card-content>\n <ui-card-actions>\n <ui-card-buttons></ui-card-buttons>\n <ui-card-icons></ui-card-icons>\n </ui-card-actions>\n</ui-card>\n
Component | Description |
---|---|
<ui-card> | \u5361\u7247\u5bb9\u5668\u5143\u7d20 |
<ui-card-content> | \u53ef\u9009\u3002\u5361\u7684\u4e3b\u8981\u53ef\u70b9\u51fb\u533a\u57df\u3002\u901a\u5e38\u5305\u542b\u9664 <ui-card-actions> \u5916\u7684\u5927\u591a\u6570\uff08\u6216\u5168\u90e8\uff09\u5361\u5185\u5bb9\u3002\u4ec5\u9002\u7528\u4e8e\u5177\u6709\u4e3b\u8868\u9762\u5e94\u89e6\u53d1\u7684\u4e3b\u8981\u52a8\u4f5c\u7684\u5361\u3002 |
<ui-card-media> | \u53ef\u9009\u3002\u663e\u793a\u81ea\u5e26 background-size\uff1acover \u5c5e\u6027\u7684\u81ea\u5b9a\u4e49 background-image \u7684\u5a92\u4f53\u533a\u57df\u3002 |
<ui-card-media-content> | \u53ef\u9009\u3002\u4e0e\u5a92\u4f53\u533a\u57df\u5927\u5c0f\u76f8\u540c\u7684\u7edd\u5bf9\u653e\u7f6e\u7684\u6846\uff0c\u7528\u4e8e\u5728 background-image \u9876\u90e8\u663e\u793a\u6807\u9898\u6216\u56fe\u6807\u3002 |
<ui-card-text> | \u53ef\u9009\u3002\u6587\u5b57\u5185\u5bb9\u533a\u57df\u3002 |
<ui-card-actions> | \u53ef\u9009\u3002\u52a8\u4f5c\u6309\u94ae\u6216\u56fe\u6807\u7684\u5bb9\u5668\u5143\u7d20\u3002 |
<ui-card-buttons> | \u53ef\u9009\u3002 \u4e00\u7ec4\u52a8\u4f5c\u6309\u94ae\uff0c\u663e\u793a\u5728\u5361\u7684\u5de6\u4fa7\uff08\u5728 LTR \u4e2d\uff09\uff0c\u4e0e <ui-card-icons> \u76f8\u90bb\u3002 |
<ui-card-icons> | \u53ef\u9009\u3002 \u4e00\u7ec4\u8865\u5145\u52a8\u4f5c\u56fe\u6807\uff0c\u663e\u793a\u5728\u5361\u7684\u53f3\u4fa7\uff08\u5728 LTR \u4e2d\uff09\uff0c\u4e0e <ui-card-buttons> \u76f8\u90bb\u3002 |
<ui-button raised @click="$alert('Hello BalmJS')">Show Alert</ui-button>\n
'},w4ip:function(t,e){t.exports='Data tables display sets of data across rows and columns.
'},wBY4:function(t,e){t.exports='\u4ee5\u4e0b\u914d\u7f6e\u4ecd\u7136\u662f\u57fa\u4e8e Balm CLI \u6784\u5efa\u7684 Vue \u811a\u624b\u67b6\u3002
\u7f16\u8f91 /path/to/my-project/config/balmrc.js
module.exports = {\n styles: {\n extname: 'scss'\n },\n scripts: {\n alias: {\n 'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.js',\n 'balm-ui-css': 'balm-ui/dist/balm-ui.css'\n }\n }\n // Other Options...\n};\n
\u7f16\u8f91 /path/to/my-project/app/styles/global/_vendor.scss
\u901a\u8fc7 BalmJS \u7ba1\u7406
SASS
/CSS
\uff1a\u7b2c\u4e09\u65b9\u6837\u5f0f\u8d44\u6e90\u5165\u53e3\u6587\u4ef6
@use '@material/theme' as theme-variables with (\n $primary: #6200ee,\n $secondary: #018786\n);\n\n@use 'balm-ui/dist/balm-ui';\n
\u7136\u540e\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7 Sass\u53d8\u91cf \u590d\u5199\u6216\u91cd\u65b0\u5b9a\u4e49 UI \u6837\u5f0f\u3002\uff08\u8be6\u60c5\u89c1\u5404\u7ec4\u4ef6\u7684 SASS\u53d8\u91cf \u6587\u6863\uff09
\u5165\u53e3\u6a21\u677f\u6587\u4ef6\u6807\u51c6\u683c\u5f0f\uff1a
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\n
\u5982\u679c\u7b2c\u4e09\u65b9\u63d0\u4f9b\u4e86 sass/css \u6587\u4ef6\uff0c\u5efa\u8bae\u5728
/path/to/my-project/app/styles/global/_vendor.scss
\u4e2d\u8fdb\u884c\u7ba1\u7406
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <link rel="stylesheet" href="/node_modules/path/to/some-plugin.css" />\n <!-- endbuild -->\n <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css" />\n </head>\n <body>\n ...\n </body>\n</html>\n
css/vendors.css
: BalmJS \u5de5\u4f5c\u6d41\u5408\u5e76\u6307\u5b9a\u7b2c\u4e09\u65b9\u6837\u5f0f\u6587\u4ef6\u4e4b\u540e\u7684\u6587\u4ef6\u8def\u5f84\u3002main.css
: \u9879\u76ee\u7684\u6837\u5f0f\u5165\u53e3\u6587\u4ef6\u3002\u63a8\u8350\u7528\u4e8e \u684c\u9762\u7aef
2.1.1 JS\u4e2d\u5f15\u7528\uff08\u63a8\u8350\uff09
\u7f16\u8f91 /path/to/my-project/app/scripts/main.js
import Vue from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport BalmUI from 'balm-ui'; // Official Google Material Components\nimport BalmUIPlus from 'balm-ui-plus'; // BalmJS Team Material Components\n\n// Import BalmUI styles (Not recommend usage, and see above "SASS/CSS Management" for recommended usage)\nimport 'balm-ui-css';\n\nVue.use(BalmUI); // Mandatory\nVue.use(BalmUIPlus); // Optional\n\nnew Vue({\n el: '#app',\n components: { App },\n template: '<app/>'\n});\n
2.1.2 \u6d4f\u89c8\u5668\u4e2d\u5f15\u7528
\u7f16\u8f91 /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/dist/balm-ui.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui.js"></script>\n <script src="/node_modules/balm-ui/dist/balm-ui-plus.js"></script>\n <!-- endbuild -->\n <script>\n var app = new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
\u63a8\u8350\u7528\u4e8e \u79fb\u52a8\u7aef\uff0c\u56e0\u4e3a\u6784\u5efa\u66f4\u5c0f\u66f4\u5feb\u3002
2.2.1 JS\u4e2d\u5f15\u7528
\u7f16\u8f91 /path/to/my-project/app/scripts/main.js
import Vue from 'vue';\nimport App from '@/views/layouts/app';\n\n// Import BalmUI scripts\nimport UiButton from 'balm-ui/components/button';\nimport $alert from 'balm-ui/plugins/alert';\n\n// Import BalmUI styles (Not recommend usage, and see below "SASS/CSS management" for recommended usage)\nimport 'balm-ui/components/core.css';\nimport 'balm-ui/components/button/button.css';\nimport 'balm-ui/components/icon/icon.css';\nimport 'balm-ui/components/dialog/dialog.css';\nimport 'balm-ui/plugins/alert/alert.css';\n\n// Install components or plugins\nVue.use(UiButton);\nVue.use($alert);\n\nnew Vue({\n el: '#app',\n components: { App },\n template: '<app/>'\n});\n
\u5173\u4e8e CSSinJS \uff0c\u53ef\u4ee5\u901a\u8fc7BalmJS\u914d\u7f6e\u6765\u63d0\u53d6\u6837\u5f0f\uff1b\u4f46\u662f BalmJS\u7684\u601d\u60f3 \u66f4\u5efa\u8bae\u5206\u79bb\u7ba1\u7406\u9879\u76ee\u4e2d\u7684\u6837\u5f0f\u548c\u811a\u672c\uff0c\u4ee5\u5b9e\u73b0\u66f4\u7075\u6d3b\u7684\u6a21\u5757\u914d\u7f6e\u548c\u7ba1\u7406\u3002
SASS \u7ba1\u7406 (/path/to/my-project/app/styles/global/_vendor.scss
)
@use 'balm-ui/components/core';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n@use 'balm-ui/components/dialog/dialog';\n@use 'balm-ui/plugins/alert/alert';\n
CSS \u7ba1\u7406 (/path/to/my-project/app/index.html
)
<head>\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n</head>\n
2.2.2 \u6d4f\u89c8\u5668\u4e2d\u5f15\u7528
\u7f16\u8f91 /path/to/my-project/app/index.html
<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n ...\n <!-- build:css css/vendors.css -->\n <link rel="stylesheet" href="/node_modules/balm-ui/components/core.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/button/button.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/icon/icon.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/components/dialog/dialog.css" />\n <link rel="stylesheet" href="/node_modules/balm-ui/plugins/alert/alert.css" />\n <!-- endbuild -->\n </head>\n <body>\n <div id="app">\n <ui-button icon="add" @click="$alert(message)">SayHi</ui-button>\n </div>\n\n <!-- build:js js/vendors.js -->\n <script src="/node_modules/vue/dist/vue.js"></script>\n <script src="/node_modules/balm-ui/components/button/button.js"></script>\n <script src="/node_modules/balm-ui/plugins/alert/alert.js"></script>\n <!-- endbuild -->\n <script>\n var app = new Vue({\n el: '#app',\n data: {\n message: 'Hello BalmUI'\n }\n });\n </script>\n </body>\n</html>\n
\u8fd9\u662f\u6700\u4f18\u5316\u7684\u4ee3\u7801\u6784\u5efa\u65b9\u6848\uff0c\u7528\u6cd5\u548c\u9ed8\u8ba4\u6784\u5efa\u7248\u672c\u76f8\u540c\u3002
2.3.1 Balm CLI
\u7f16\u8f91 /path/to/my-project/config/balmrc.js
\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\uff1a
const path = require('path');\n\nfunction resolve(dir) {\n return path.join(__dirname, '..', dir);\n}\n\nmodule.exports = {\n ...\n scripts: {\n // To explicitly transpile a dependency with Babel\n includeJsResource: [\n resolve('node_modules/balm-ui/src/scripts')\n ],\n // Reassign the entry file\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n }\n },\n ...\n};\n
2.3.2 Vue CLI
\u7f16\u8f91 /path/to/my-project/vue.config.js
\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\uff1a
module.exports = {\n runtimeCompiler: true,\n // NOTE: set alias via `configureWebpack` or `chainWebpack`\n configureWebpack: {\n resolve: {\n alias: {\n 'balm-ui-source': 'balm-ui/src/scripts',\n 'balm-ui-plus-source': 'balm-ui/src/scripts/plus.js'\n }\n }\n }\n // chainWebpack: (config) => {\n // config.resolve.alias\n // .set('balm-ui-source', resolve('node_modules/balm-ui/src/scripts'))\n // .set('balm-ui-plus-source', resolve('node_modules/balm-ui/src/scripts/plus.js'));\n // }\n};\n
\u73b0\u5728\uff0c\u4ee3\u7801\u4e2d\u5f15\u7528\u7684
balm-ui
\u5df2\u76f4\u63a5\u6307\u5411\u4e86\u6e90\u4ee3\u7801\uff0c\u53ef\u7528\u4e8e\u5f00\u53d1\u6216\u8c03\u8bd5 BalmUI\u3002
\u7f16\u8f91 /path/to/my-project/balm.config.js
const config = require('./config/balmrc');\n\nconst api = (mix) => {\n if (mix.env.isProd) {\n // ...\n } else {\n // Use BalmJS `copy` api\n mix.copy('node_modules/balm-ui/fonts/*', 'app/fonts');\n }\n};\n\nmodule.exports = (balm) => {\n return {\n config,\n api\n };\n};\n
<ui-image-list>\n <ui-image-item>\n <ui-image-text></ui-image-text>\n </ui-image-item>\n</ui-image-list>\n
Component | Description |
---|---|
<ui-image-list> | Mandatory. Indicates the root Image List element. |
<ui-image-item> | Mandatory. Indicates each item in an Image List. |
<ui-image-text> | Optional. Indicates the area within each item containing the supporting text label, if the Image List contains text labels. |
<ui-chip><!-- the chip text --></ui-chip>\n
Name | Type | Default | Description |
---|---|---|---|
icon | string | '' | Optional. Indicates an leading icon element. See Material Icons list. |
selected | boolean | false | Optional. Hides the leading icon in a filter chip when the chip is selected. |
removable | boolean | false | Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with input chips. |
Name | Props | Description |
---|---|---|
default | The default slot holds the chip child components. | |
before | iconClass | Custom leading icon in the chip. |
after | iconClass | Custom trailing icon in the input chips. |
\u901a\u8fc7\u5c11\u91cf\u53ef\u7528\u548c\u7075\u6d3b\u7684\u8b66\u62a5\u6d88\u606f\uff0c\u4e3a\u5178\u578b\u7684\u7528\u6237\u64cd\u4f5c\u63d0\u4f9b\u4e0a\u4e0b\u6587\u53cd\u9988\u6d88\u606f\u3002
'},wMet:function(t,e){t.exports='New in 6.2.1
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-autocomplete>` props with default value.\n UiAutocomplete: {\n // some props\n }\n});\n
'},whC6:function(t,e){t.exports='$balmUI
interface BalmUIEvent {\n onChange(property: string, value: any, fn?: Function);\n\n onOpen(property: string, fn?: Function);\n onShow(property: string, fn?: Function);\n\n onClose(property: string, fn?: Function);\n onHide(property: string, fn?: Function);\n}\n\ninterface VueInstance {\n $balmUI: BalmUIEvent;\n}\n
\u66f4\u65b0 Vue \u5b9e\u4f8b\u7684\u6570\u636e\u5bf9\u8c61\u4e3a new value
$balmUI.onChange(property, value);\n
\u66f4\u65b0 Vue \u5b9e\u4f8b\u7684\u6570\u636e\u5bf9\u8c61\u4e3a true
$balmUI.onOpen(property);\n$balmUI.onShow(property);\n
\u66f4\u65b0 Vue \u5b9e\u4f8b\u7684\u6570\u636e\u5bf9\u8c61\u4e3a false
$balmUI.onClose(property);\n$balmUI.onHide(property);\n
Name | Type | Default | Description |
---|---|---|---|
property | string | '' | \u66f4\u65b0\u6307\u5b9a\u7684 Vue \u5b9e\u4f8b\u5bf9\u8c61\u6570\u636e |
value | any | undefined | \u6307\u5b9a Vue \u5b9e\u4f8b\u5bf9\u8c61\u6570\u636e\u7684\u65b0\u503c\u3002\u4ec5\u9650 $balmUI.onChange \u65b9\u6cd5\u3002 |
fn | function | noop | \u66f4\u65b0\u6570\u636e\u540e\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6 |
balmResize
\uff08\u4f18\u4e8e resize
\uff09
balmScroll
\uff08\u4f18\u4e8e scroll
\uff09
export default {\n mounted() {\n this.init();\n window.addEventListener('balmResize', this.init);\n },\n beforeDestroy() {\n window.removeEventListener('balmResize', this.init);\n },\n methods: {\n init() {\n // ...\n }\n }\n};\n
New in 8.2.1
$bus.on(event, callback)
$bus.once(event, callback)
(New in 8.51.0)
$bus.off(event, callback)
$bus.emit(eventName, ...args)
interface BalmUIEventBus {\n on(event: string | string[], callback: Function); // \u76d1\u542c\u5f53\u524d\u5b9e\u4f8b\u4e0a\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002\n once(event: string, callback: Function); // \u76d1\u542c\u4e00\u4e2a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u4f46\u662f\u53ea\u89e6\u53d1\u4e00\u6b21\u3002\n off(event: string | string[], callback?: Function); // \u79fb\u9664\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u76d1\u542c\u5668\u3002\n emit(eventName: string, ...args); // \u89e6\u53d1\u5f53\u524d\u5b9e\u4f8b\u4e0a\u7684\u4e8b\u4ef6\u3002\u9644\u52a0\u53c2\u6570\u90fd\u4f1a\u4f20\u7ed9\u76d1\u542c\u5668\u56de\u8c03\u3002\n}\n\ninterface VueInstance {\n $bus: BalmUIEventBus;\n}\n
Name | Type | Default | Description |
---|---|---|---|
event , eventName | string | \u5168\u5c40\u901a\u4fe1\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u540d\u79f0 | |
args | any | \u5168\u5c40\u901a\u4fe1\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u65b9\u6cd5\u7684\u53c2\u6570 | |
callback | function | \u5168\u5c40\u901a\u4fe1\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u7684\u65b9\u6cd5 |
// `/path/to/awesome.vue`\n\nexport default {\n mounted() {\n this.$bus.on('custom-event', (msg) => {\n console.log(msg);\n });\n },\n beforeDestroy() {\n this.$bus.off('custom-event');\n }\n};\n
.vue
\u7ec4\u4ef6\u4e2d\u4f7f\u7528 $bus
// `/path/to/awesome.js`\n\nimport { useBus } from 'balm-ui';\n// \u6216\n// import { useBus } from 'balm-ui/plugins/event';\n\nconst $bus = useBus();\n$bus.emit('custom-event', 'Hello BalmUI');\n
'},wxol:function(t,e){t.exports='Skeleton provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
'},x3Wr:function(t,e){t.exports='New in 6.4.1
@use 'balm-ui/components/core';\n@use 'balm-ui/components/textfield/textfield';\n@use 'balm-ui/components/icon/icon'; // Optional\n
import Vue from 'vue';\nimport UiTextfieldComponents from 'balm-ui/components/textfield';\n\nVue.use(UiTextfieldComponents, {\n // Optional. Overwrite `<ui-textfield>` props with default value.\n UiTextfield: {\n // some props\n }\n});\n
'},"xEc/":function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/tooltip/tooltip';\n
import Vue from 'vue';\nimport UiTooltip from 'balm-ui/components/tooltip';\nimport vTooltip from 'balm-ui/directives/tooltip'; // Optional\n\n// Optional. Overwrite `<ui-tooltip>` props with default value.\nVue.use(UiTooltip, {\n // some props\n});\nVue.directive(vTooltip.name, vTooltip); // Optional\n
'},"xI/M":function(t,e){t.exports='@use 'balm-ui/components/divider' with (\n $color: if(\n theme-color.tone(theme-color.$background) == 'dark',\n list-variables.$deprecated-divider-color-on-dark-bg,\n list-variables.$deprecated-divider-color-on-light-bg\n ),\n\n $horizontal-height: 2px,\n $horizontal-text-padding: 8px 16px,\n\n $vertical-width: 2px,\n $vertical-text-padding: 16px 8px\n);\n
'},xJ9f:function(t,e){t.exports=''},xNpe:function(t,e){t.exports='New in 8.29.0
<ui-file\n accept="image/*"\n @change="$balmUI.onChange('files', $event)"></ui-file>\n<p>Files: {{ files }}</p>\n
export default {\n data() {\n return {\n files: []\n };\n }\n};\n
'},xr6V:function(t,e){t.exports='@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `<ui-tooltip>` props with default value.\n UiTooltip: {\n // some props\n }\n});\n
'},xujO:function(t,e){t.exports='@use 'balm-ui/components/core';\n@use 'balm-ui/components/table/table';\n@use 'balm-ui/components/pagination/pagination';\n@use 'balm-ui/components/button/button';\n@use 'balm-ui/components/icon/icon';\n
import Vue from 'vue';\nimport UiPagination from 'balm-ui/components/pagination';\n\n// Optional. Overwrite `<ui-pagination>` props with default value.\nVue.use(UiPagination, {\n // some props\n});\n
'},xvLK:function(t,e){t.exports='<ui-card><!-- Card contents --></ui-card>\n
Name | Type | Default | Description |
---|---|---|---|
outlined | boolean | false | Removes the shadow and displays a hairline outline instead |
Name | Props | Description |
---|---|---|
default | The default slot holds the card child components and can contain HTML. |
Child components:
<ui-card-content>
<ui-card-actions>
<ui-autocomplete></ui-autocomplete>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
outlined | boolean | false | \u8f6e\u5ed3\u6587\u672c\u6846\uff08\u5fc5\u987b\u914d\u7f6e label \u6216 placeholder \uff09 | |
model (v-model ) | string, number | '' | \u6587\u672c\u6846\u503c | |
source | array | [] | \u8bbe\u7f6e\u6570\u636e\u6e90 | |
sourceFormat | object | { label: 'label', value: 'value' } | \u8bbe\u7f6e\u6570\u636e\u6e90\u683c\u5f0f | 8.10.0 |
inputId | string | null | \u539f\u751f <input> \u7684 id \u5c5e\u6027\u548c <label> \u7684 for \u5c5e\u6027 | |
label | string | '' | \u6587\u672c\u6846\u7684\u6587\u672c\u6807\u9898\u6216\u8bf4\u660e\uff0c\u53ef\u4f7f\u7528\u6587\u672c\u6846\u7684 placeholder \u5c5e\u6027\u4ee3\u66ff | |
placeholder | string | null | \u539f\u751f <input> \u7684 placeholder \u5c5e\u6027 | |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 | |
required | boolean | false | \u5fc5\u586b\u5b57\u6bb5\u6837\u5f0f | |
autofocus | boolean | false | \u81ea\u52a8\u9009\u4e2d\u5efa\u8bae\u83dc\u5355\u4e2d\u7684\u7b2c\u4e00\u9879 | |
delay | number | 300 | \u89e6\u53d1\u952e\u76d8\u548c\u6267\u884c\u641c\u7d22\u4e4b\u95f4\u7684\u5ef6\u8fdf\uff08\u4ee5\u6beb\u79d2\u4e3a\u5355\u4f4d\uff09\u3002\u96f6\u5ef6\u8fdf\u5bf9\u672c\u5730\u6570\u636e\u6709\u610f\u4e49\uff08\u54cd\u5e94\u901f\u5ea6\u66f4\u5feb\uff09\uff0c\u4f46\u5728\u54cd\u5e94\u901f\u5ea6\u8f83\u6162\u7684\u60c5\u51b5\u4e0b\uff0c\u53ef\u4ee5\u4e3a\u8fdc\u7a0b\u6570\u636e\u4ea7\u751f\u5927\u91cf\u8d1f\u8f7d\u3002 | |
minlength | number | 1 | \u6a21\u7cca\u641c\u7d22\u7684\u6700\u5c11\u5b57\u7b26\u6570\u3002\u96f6\u5bf9\u4e8e\u4ec5\u5305\u542b\u5c11\u91cf\u9879\u76ee\u7684\u672c\u5730\u6570\u636e\u5f88\u6709\u7528\uff0c\u4f46\u662f\u5f53\u5355\u4e2a\u5b57\u7b26\u641c\u7d22\u53ef\u4ee5\u5339\u914d\u6570\u5343\u4e2a\u9879\u76ee\u65f6\uff0c\u5e94\u4f7f\u7528\u66f4\u9ad8\u7684\u503c\u3002 | |
remote | boolean | false | \u542f\u7528\u8fdc\u7a0b\u83b7\u53d6\u6570\u636e\u3002\u9ed8\u8ba4\u7528\u6cd5\u4e3a\u672c\u5730\u6570\u636e\u3002 | |
highlight | boolean | false | \u5c06\u81ea\u52a8\u5b8c\u6210\u6587\u672c\u6846\u5efa\u8bae\u503c\u8bbe\u7f6e\u4e3a\u52a0\u7c97 | 8.12.0 |
filterKeywords | boolean | false | \u542f\u7528\u8fc7\u6ee4\u5173\u952e\u5b57 | 8.56.0 |
fullwidth | boolean | false | \u5168\u5c4f\u5bbd\u5ea6\u6837\u5f0f | |
endAligned | boolean | false | \u8f93\u5165\u6587\u672c\u53f3\u5bf9\u9f50 | |
icon | string | '' | \u8bbe\u7f6e\u9996\u56fe\u6807\u3002\u8be6\u89c1 Material Icons \u56fe\u6807\u96c6\u3002 | |
withLeadingIcon | boolean | false | \u542f\u7528\u9996\u56fe\u6807\u6837\uff08\u9700\u4f7f\u7528 before \u63d2\u69fd\uff09 | |
withTrailingIcon | boolean | false | \u542f\u7528\u5c3e\u56fe\u6807\u6837\u5f0f\uff08\u9700\u4f7f\u7528 after \u63d2\u69fd\uff09 | |
inside | boolean | false | \u9002\u914d\u6837\u5f0f\uff0c\u53ef\u7528\u4e8e\u67d0\u4e9b\u7ec4\u4ef6\u5185\u90e8\u7684\u6ea2\u51fa (\u5982\uff1a\u7528\u5728 <ui-dialog> \u4e2d) | 8.53.0 |
source
\u5c5e\u6027\u3002\u652f\u6301\u4e24\u79cd\u683c\u5f0f\u5316\uff1a[ 'Choice1', 'Choice2' ]
label
\u548c value
\u5b57\u6bb5\uff09\uff1a[ { label: 'Choice1', value: 'value1' }, ... ]
\u4f60\u9875\u53ef\u4ee5\u901a\u8fc7
sourceFormat
\u5c5e\u6027\u81ea\u5b9a\u4e49\u539f\u6570\u636e\u7684\u683c\u5f0f
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u6587\u672c\u6846\u6807\u9898\u6216\u8bf4\u660e\u6587\u5b57 | |
before | iconClass | \u81ea\u5b9a\u4e49\u9996\u56fe\u6807 |
after | iconClass | \u81ea\u5b9a\u4e49\u5c3e\u56fe\u6807 |
Name | Type | Description |
---|---|---|
input | function(value: string|number) | \u6587\u672c\u6846\u4e2d\u8f93\u5165\u5185\u5bb9\u65f6\u89e6\u53d1 |
search | function(keywords: string) | \u6587\u672c\u6846\u503c\u53d8\u5316\u65f6\u89e6\u53d1\u3002\u4ec5\u7528\u4e8e\u542f\u7528 remote \u7684\u81ea\u52a8\u5b8c\u6210\u6587\u672c\u6846\u3002 |
selected | function(item: object) | \u81ea\u52a8\u5b8c\u6210\u5efa\u8bae\u503c\u88ab\u9009\u4e2d\u65f6\u89e6\u53d1 |
selected
\u4e8b\u60c5\u8fd4\u56de\u503c\uff1a
{\n label: 'Choice 1',\n value: 'value 1',\n // more custom fields\n}\n
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@input
\u76d1\u542c\u81ea\u52a8\u5b8c\u6210\u6587\u672c\u6846\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-autocomplete v-model="value"></ui-autocomplete>\n
\u624b\u52a8
<ui-autocomplete\n :model="value"\n @input="$balmUI.onChange('value', $event)"\n></ui-autocomplete>\n
@use 'balm-ui/dist/balm-ui';\n
import Vue from 'vue';\nimport BalmUI from 'balm-ui';\n\nVue.use(BalmUI, {\n // Optional. Overwrite `$toast` options.\n $toast: {\n // some options\n }\n});\n
'},"y/iY":function(t,e){t.exports='<ui-dialog-title><!-- the dialog title --></ui-dialog-title>\n
Name | Type | Default | Description | Version |
---|---|---|---|---|
closable | boolean | false | Displays close icon button. | 8.10.0 |
Name | Props | Description |
---|---|---|
default | The default slot holds the dialog title and can contain HTML. |
@use '@material/checkbox/checkbox-theme' with (\n $baseline-theme-color: secondary,\n $mark-color: theme-color.prop-value(on-secondary),\n $border-color: rgba(theme-color.prop-value(on-surface), 0.54),\n $disabled-color: rgba(theme-color.prop-value(on-surface), 0.38),\n\n $ripple-size: 40px,\n $icon-size: 18px,\n $mark-stroke-size: 2 / 15 * $icon-size,\n $border-width: 2px,\n $transition-duration: 90ms,\n $item-spacing: 4px,\n $focus-indicator-opacity: map.get(\n ripple-theme.$dark-ink-opacities,\n focus\n ),\n\n $minimum-size: 28px,\n $maximum-size: $ripple-size,\n $density-scale: density-variables.$default-scale,\n $density-config: (\n size: (\n minimum: $minimum-size,\n default: $ripple-size,\n maximum: $maximum-size,\n ),\n )\n);\n
'},"yAg/":function(t,e){t.exports='<ui-select\n v-model="formData.province"\n :options="provinces"\n default-label="Province"\n @change="onChangeProvince($event)"\n></ui-select>\n\n<ui-select\n v-model="formData.city"\n :options="cities"\n default-label="City"\n></ui-select>\n
const PROVINCES = [\n {\n value: 1,\n label: 'Beijing'\n },\n {\n value: 2,\n label: 'Shanghai'\n },\n {\n value: 3,\n label: 'Guangzhou'\n }\n];\n\nconst CITIES = [\n [],\n [\n {\n value: 11,\n label: 'Haiding'\n },\n {\n value: 12,\n label: 'Chaoyang'\n }\n ],\n [\n {\n value: 21,\n label: 'Huangpu'\n },\n {\n value: 22,\n label: 'Xuhui'\n }\n ],\n [\n {\n value: 31,\n label: 'Guangzhou'\n }\n ]\n];\n\nexport default {\n data() {\n return {\n provinces: PROVINCES,\n cities: [],\n formData: {\n province: '',\n city: ''\n }\n };\n },\n methods: {\n onChangeProvince(value) {\n this.formData.provinces = value;\n\n let key = value || -1;\n this.cities = key > -1 ? CITIES[key] : [];\n this.formData.city = this.cities.length ? this.cities[0].value : '';\n }\n }\n};\n
'},yBxr:function(t,e){t.exports='New in 8.34.0
\u5e95\u90e8\u5bfc\u822a\u680f\u5141\u8bb8\u5728\u5e94\u7528\u7a0b\u5e8f\u7684\u4e3b\u8981\u76ee\u7684\u5730\u4e4b\u95f4\u79fb\u52a8\u3002
'},yRCT:function(t,e){t.exports='<ui-drawer-header><!-- the drawer header child components --></ui-drawer-header>\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bfc\u822a\u7684\u6807\u9898\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-drawer-title>
<ui-drawer-subtitle>
/* Included `ripple.scss` */\n@use 'balm-ui/components/core';\n\n/* OR */\n@use 'balm-ui/directives/ripple/ripple';\n
import Vue from 'vue';\nimport vRipple from 'balm-ui/directives/ripple';\n\nVue.directive(vRipple.name, vRipple);\n
'},yUax:function(t,e){t.exports='<ui-textfield input-type="textarea" rows="8" cols="40">\n Textarea Label\n</ui-textfield>\n\n<ui-textfield outlined input-type="textarea" rows="8" cols="40">\n Textarea Label\n</ui-textfield>\n
'},ynvr:function(t,e){t.exports='<ui-grid class="demo-grid">\n <ui-grid-cell nested class="demo-parent-cell" columns="4">\n <ui-grid-cell class="demo-child-cell demo-cell" columns="4">\n <span>Child 4</span>\n </ui-grid-cell>\n <ui-grid-cell class="demo-child-cell demo-cell" columns="4">\n <span>Child 4</span>\n </ui-grid-cell>\n <ui-grid-cell class="demo-child-cell demo-cell" columns="4">\n <span>Child 4</span>\n </ui-grid-cell>\n <span>Parent 4</span>\n </ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4">4</ui-grid-cell>\n <ui-grid-cell class="demo-cell" columns="4">4</ui-grid-cell>\n</ui-grid>\n
'},ytwZ:function(t,e){t.exports='BalmUI \u662f\u4e3a Vue.js \u91cf\u8eab\u8ba2\u5236\u7684\u6a21\u5757\u5316\u4e14\u9ad8\u53ef\u5b9a\u5236\u5316\u7684 Material Design UI \u5e93\u3002
\ud83c\udf89
balm-ui
(v9+) for Vue 3, see material.balmjs.com
\u6211\u4eec\u5e0c\u671b\u60a8\u80fd\u505a\u51fa\u8d21\u732e\uff0c\u5e76\u4f7f BalmUI \u53d8\u5f97\u66f4\u597d\uff01\u63d0\u51fa\u62c9\u53d6\u8bf7\u6c42\u4e4b\u524d\uff0c\u8bf7\u52a1\u5fc5\u5148\u9605\u8bfb\u8d21\u732e\u6307\u5357\u3002\u60a8\u53ef\u4ee5\u5c06\u4efb\u4f55\u60f3\u6cd5\u4f5c\u4e3aPull \u8bf7\u6c42\u6216 GitHub \u95ee\u9898\u63d0\u4ea4\u4e0a\u6765\u3002
\u6211\u4eec\u652f\u6301\u5e76\u6d4b\u8bd5\u7684\u6d4f\u89c8\u5668\u8303\u56f4\u4e0e Google MDC Web \u4fdd\u6301\u4e00\u81f4\uff1a
<ui-dialog><!-- the dialog child components --></ui-dialog>\n
\u63d0\u793a\uff1a
<ui-dialog>
\u7684\u52a8\u4f5c\u5fc5\u987b\u5305\u542b\u81f3\u5c11\u4e00\u4e2a<ui-button>
\u6216<ui-icon-button>
Name | Type | Default | Description | Version |
---|---|---|---|---|
open (v-model ) | boolean | false | \u5bf9\u8bdd\u6846\u5f00\u542f\u72b6\u6001 | |
escapeKey | boolean | true | \u8bbe\u7f6e\u6309\u4e0b Escape \u952e\u65f6\u53cd\u6620\u7684\u64cd\u4f5c\u3002\u8bbe\u7f6e\u4e3a false \u5c06\u7981\u7528\u901a\u8fc7 Escape \u952e\u5173\u95ed\u5bf9\u8bdd\u6846\u3002 | 8.22.0 |
closable | boolean | true | \u5f53\u7528\u6237\u5bf9\u201c\u63a5\u53d7\u201d\u6216\u201c\u53d6\u6d88\u201d\u6309\u94ae\u8fdb\u884c\u64cd\u4f5c\u65f6\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u3002 | |
maskClosable | boolean | false | \u5f53\u70b9\u51fb\u5bf9\u8bdd\u6846\u906e\u7f69\u5c42\u65f6\uff0c\u5173\u95ed\u5bf9\u8bdd\u6846\u3002 | |
noScrim | boolean | false | \u9690\u85cf\u5bf9\u8bdd\u6846\u906e\u7f69\u5c42 | |
resetScroll | boolean | false | \u5bf9\u8bdd\u6846\u5173\u95ed\u65f6\uff0c\u91cd\u7f6e\u6eda\u52a8\u6761\u3002 | |
scrollable | boolean | false | \u5f53\u5bf9\u8bdd\u6846\u4e2d\u7684\u5185\u5bb9\u6ea2\u51fa\u65f6\u81ea\u52a8\u5e94\u7528\u4ee5\u4fdd\u8bc1\u5185\u5bb9\u53ef\u6eda\u52a8\u3002 | |
stacked | boolean | false | \u5f53\u5bf9\u8bdd\u6846\u7684\u52a8\u4f5c\u6309\u94ae\u4e0d\u80fd\u653e\u5728\u4e00\u884c\u4e0a\u5e76\u4e14\u5fc5\u987b\u5806\u53e0\u5728\u4e00\u8d77\u65f6\uff0c\u5c06\u81ea\u52a8\u5e94\u7528\u3002 |
\u63d0\u793a\uff1a
noBackdrop
\u5c5e\u6027\u4ece 8.35.0 \u8d77\u91cd\u547d\u540d\u4e3anoScrim
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u5bf9\u8bdd\u6846\u5b50\u7ec4\u4ef6 |
\u5b50\u7ec4\u4ef6\uff1a
<ui-dialog-title>
<ui-dialog-content>
<ui-dialog-actions>
Name | Type | Description |
---|---|---|
change | function(open: boolean) | \u5bf9\u8bdd\u6846\u5f00\u542f\u72b6\u6001\u53d8\u5316\u65f6\u89e6\u53d1 |
close | function() | \u5bf9\u8bdd\u6846\u5173\u95ed\u65f6\u89e6\u53d1 |
confirm | function(result: boolean) | \u70b9\u51fb\u5bf9\u8bdd\u6846\u52a8\u4f5c\u6309\u94ae\u65f6\u89e6\u53d1 |
accept | function() | \u70b9\u51fb\u5bf9\u8bdd\u6846\u786e\u5b9a\u6309\u94ae\u65f6\u89e6\u53d1 |
cancel | function() | \u70b9\u51fb\u5bf9\u8bdd\u6846\u53d6\u6d88\u6309\u94ae\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u5bf9\u8bdd\u6846\u5f00\u542f\u72b6\u6001\u5e76\u66f4\u65b0open
\u5c5e\u6027
\u81ea\u52a8
<ui-dialog v-model="open"></ui-dialog>\n
\u624b\u52a8
<ui-dialog\n :open="open"\n @change="$balmUI.onChange('open', $event)"\n></ui-dialog>\n
Material Design \u6392\u7248\u8bbe\u8ba1\u4e86\u6587\u672c\u5927\u5c0f\u548c\u6837\u5f0f\uff0c\u4ee5\u5728\u5178\u578b\u4f7f\u7528\u6761\u4ef6\u4e0b\u5e73\u8861\u5185\u5bb9\u5bc6\u5ea6\u548c\u9605\u8bfb\u8212\u9002\u5ea6\u3002
'},z9gS:function(t,e){t.exports='<ui-button raised @click="$balmUI.onShow('open')">\n Show Scrolling Dialog\n</ui-button>\n\n<ui-dialog v-model="open" scrollable @confirm="onConfirm">\n <ui-dialog-title>Choose a Ringtone</ui-dialog-title>\n <ui-dialog-content>\n <ui-list>\n <ui-item v-for="(item, index) in list" :key="index">{{ item }}</ui-item>\n </ui-list>\n </ui-dialog-content>\n <ui-dialog-actions></ui-dialog-actions>\n</ui-dialog>\n
export default {\n data() {\n return {\n open: false\n };\n },\n methods: {\n onConfirm(result) {\n if (result) {\n console.log('ok');\n } else {\n console.log('cancel');\n }\n }\n }\n};\n
'},zIMg:function(t,e){t.exports='Segmented buttons allow users to toggle the selected states of grouped buttons.
'},zIwG:function(t,e){t.exports='New in 8.14.0
@use '@material/drawer' with (\n // Colors\n $title-ink-color: theme-color.prop-value(on-surface),\n $subtitle-ink-color: theme-color.prop-value(on-surface),\n $item-inactive-ink-color: theme-color.prop-value(on-surface),\n $item-activated-ink-color: theme-color.prop-value(primary),\n $divider-color: theme-color.prop-value(on-surface),\n $surface-fill-color: surface,\n\n // Opacity\n $title-ink-opacity: theme-color.text-emphasis(high),\n $subtitle-ink-opacity: theme-color.text-emphasis(medium),\n $item-inactive-icon-ink-opacity: theme-color.text-emphasis(medium),\n $item-inactive-text-ink-opacity: theme-color.text-emphasis(high),\n $item-active-icon-ink-opacity: 1,\n $item-active-text-ink-opacity: theme-color.text-emphasis(high),\n $divider-opacity: 0.12,\n\n // Widths\n $width: 256px,\n $list-item-spacing: 4px,\n $surface-padding: 16px,\n $shape-radius: large,\n $item-shape-radius: small,\n\n // Animations\n $animation-enter: 250ms,\n $animation-exit: 200ms,\n\n // Scrim\n $modal-scrim-color: theme-color.prop-value(on-surface),\n $modal-scrim-opacity: 0.32,\n\n $z-index: 6,\n $modal-elevation: 16\n);\n
'},zM37:function(t,e){t.exports='\u6a2a\u5e45\u663e\u793a\u7a81\u51fa\u7684\u6d88\u606f\u548c\u76f8\u5173\u7684\u53ef\u9009\u64cd\u4f5c\u3002
'},zOht:function(t,e,o){(function(o){var d,n,l,a,i,c,r,s,u,p,h,g,m,b,f,v,q,y,x,w,k,T,$,I,C,S,j,D,U,N,O,B;!function(_){var P="object"===typeof o?o:"object"===typeof self?self:"object"===typeof this?this:{};function E(t,e){return t!==P&&("function"===typeof Object.create?Object.defineProperty(t,"__esModule",{value:!0}):t.__esModule=!0),function(o,d){return t[o]=e?e(o,d):d}}d=function(t){!function(t){var e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])};n=function(t,o){if("function"!==typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function d(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(d.prototype=o.prototype,new d)},l=Object.assign||function(t){for(var e,o=1,d=arguments.length;oNew in 8.0.0
<ui-menuitem><!-- the menu item child components --></ui-menuitem>\n
Name | Type | Default | Description |
---|---|---|---|
nested | boolean | false | \u5d4c\u5957\u83dc\u5355\u9879 <ui-menuitem> \u5f62\u6210\u4e00\u4e2a\u83dc\u5355\u9879\u7ec4 |
item | object | {} | \u8bbe\u7f6e\u83dc\u5355\u9879\u5bf9\u8c61 |
value | string, number | null | \u8bbe\u7f6e\u83dc\u5355\u9879\u7684\u503c |
disabled | boolean | false | \u7981\u7528\u72b6\u6001 |
selected | boolean | false | \u9009\u4e2d\u72b6\u6001 |
\u83dc\u5355\u9879\u5bf9\u8c61\u7684 keys\uff1a
interface Item {\n value?: string;\n text: string;\n icon?: string;\n disabled?: boolean;\n selected?: boolean;\n}\n\ninterface MenuItem {\n item: Item;\n}\n
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u83dc\u5355\u9879\u5b50\u7ec4\u4ef6\u53ca HTML |
\u5b50\u7ec4\u4ef6\uff1a
<ui-menuitem-text>
<ui-menuitem-icon>
<ui-chips>\n <ui-chip></ui-chip>\n <!-- more chip -->\n</ui-chips>\n
<ui-chips>
\u7c7b\u578b
0
: 'action'
1
: 'input'
2
: 'choice'
3
: 'filter'
Name | Type | Default | Description | Version |
---|---|---|---|---|
type | string, number | 0 | \u9009\u9879\u5361\u7c7b\u578b | |
model (v-model ) | string, number, array | '' | \u9009\u9879\u5361\u9009\u9879\u503c\u3002\u4ece\u4e00\u7ec4\u9009\u9879\u4e2d\u9009\u62e9\u4e00\u4e2a\u6216\u591a\u4e2a\u3002 | |
options | array | [] | \u8bbe\u7f6e\u9009\u9879\u5361\u9009\u9879\u5217\u8868 | 7.2.0 |
optionFormat | object | { label: 'label', value: 'value' } | \u5b9a\u4e49\u9009\u9879\u5361\u9009\u9879\u6570\u636e\u683c\u5f0f | 8.42.0 |
chips | array | [] | \u4e00\u7ec4\u9009\u9879\u5361\u9009\u9879\u3002\u4ec5\u9002\u7528\u4e8e\u66f4\u65b0\u8f93\u5165\u7c7b\u578b(input )\u7684\u9009\u9879\u5361 |
\u26a0\ufe0f
8.42.0
\u4e2doptionLabel
\u548coptionValue
\u5c5e\u6027\u5df2\u5f03\u7528\uff0c\u8bf7\u4f7f\u7528optionFormat
\u4ee3\u66ff\u3002
Name | Props | Description |
---|---|---|
default | default \u63d2\u69fd\u5305\u542b\u9009\u9879\u5361\u9009\u9879\u7ec4\u4ef6\u53ca HTML |
Name | Type | Description |
---|---|---|
change | function(selectedIndex: number|array) | \u9009\u9879\u5361\u9009\u9879\u503c\u53d8\u5316\u65f6\u89e6\u53d1 |
\u63d0\u793a\uff1a\u5982\u679c\u4f60\u4e0d\u4f7f\u7528
v-model
\u7ed1\u5b9a\u6570\u636e\uff0c\u4f60\u5e94\u8be5\u4f7f\u7528@change
\u76d1\u542c\u9009\u9879\u5361\u9009\u9879\u503c\u5e76\u66f4\u65b0model
\u5c5e\u6027
\u81ea\u52a8
<ui-chips v-model="selectedIndex"></ui-chips>\n
\u624b\u52a8
<ui-chips\n :model="selectedIndex"\n @change="$balmUI.onChange('selectedIndex', $event)"\n></ui-chips>\n
$tt(style)
type TypographyStyle =\n | 'headline1'\n | 'headline2'\n | 'headline3'\n | 'headline4'\n | 'headline5'\n | 'headline6'\n | 'subtitle1'\n | 'subtitle2'\n | 'body1'\n | 'body2'\n | 'caption'\n | 'button'\n | 'overline'\n | string;\n\ninterface VueInstance {\n $tt(style: TypographyStyle): string;\n}\n
Param | Type | Default | Description |
---|---|---|---|
style | string | '' | Typography style name or custom style classname. |
The typographic styles in this module are derived from thirteen styles:
Style | Description |
---|---|
headline1 | The largest text on the screen, reserved for short, important text or numerals |
headline2 | Headline variant 2 |
headline3 | Headline variant 3 |
headline4 | Headline variant 4 |
headline5 | Headline variant 5 |
headline6 | Headline variant 6 |
subtitle1 | Smaller than headline, reserved for medium-emphasis text that is shorter in length |
subtitle2 | Subtitle variant 2 |
body1 | Used for long-form writing |
body2 | Body variant 2 |
caption | Used sparingly to annotate imagery |
button | A call to action used by different types of buttons |
overline | Used sparingly to introduce a headline |
You can overwrite typography CSS Classes for your project so easy.
$tt
without .vue
componentNew in 8.1.0
import { useTypography } from 'balm-ui';\n// OR\n// import { useTypography } from 'balm-ui/plugins/typography';\n\nconst $tt = useTypography();\nconsole.log($tt('custom-style-1'));\n
'},zrtu:function(t,e){t.exports='<ui-form item-margin-bottom="10">\n <ui-form-field class="form-item">\n <ui-textfield v-model="formData.mobile" helper-text-id="mobile-helper-text">\n Mobile\n </ui-textfield>\n <ui-textfield-helper\n id="mobile-helper-text"\n v-model="validMsg.mobile"\n ></ui-textfield-helper>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield\n v-model="formData.password"\n input-type="password"\n helper-text-id="password-helper-text"\n >\n Password\n </ui-textfield>\n <ui-textfield-helper\n id="password-helper-text"\n v-model="validMsg.password"\n ></ui-textfield-helper>\n </ui-form-field>\n <ui-form-field class="form-item">\n <ui-textfield\n v-model="formData.repassword"\n input-type="password"\n helper-text-id="repassword-helper-text"\n >\n Repeat Password\n </ui-textfield>\n <ui-textfield-helper\n id="repassword-helper-text"\n v-model="validMsg.repassword"\n ></ui-textfield-helper>\n </ui-form-field>\n <ui-form-field>\n <ui-select\n v-model="formData.gender"\n :options="genderOptions"\n default-label="Unknown"\n helper-text-id="gender-helper-text"\n >\n Gender\n </ui-select>\n <ui-select-helper\n id="gender-helper-text"\n v-model="validMsg.gender"\n ></ui-select-helper>\n </ui-form-field>\n\n <ui-form-field class="form-item form-actions">\n <ui-button raised @click="submit">Submit</ui-button>\n </ui-form-field>\n</ui-form>\n
const validations = [\n {\n key: 'mobile',\n label: 'Mobile',\n validator: 'required, mobile'\n },\n {\n key: 'password',\n label: 'Password',\n validator: 'required, password, minRule, maxRule',\n minRule: {\n validate(value) {\n return value.trim().length >= 6;\n },\n message: '%s minLength >= 6'\n },\n maxRule: {\n validate(value) {\n return value.trim().length <= 8;\n },\n message: '%s maxLength <= 8'\n }\n },\n {\n key: 'repassword',\n label: 'Repeat Password',\n validator: 'required, password, repasswordRule',\n repasswordRule: {\n validate(value, data) {\n return value === data.password;\n },\n message: 'repassword !== password'\n }\n },\n {\n key: 'gender',\n label: 'Gender',\n validator: 'required'\n }\n];\n\nconst genderOptions = [\n {\n label: 'Male',\n value: 'M'\n },\n {\n label: 'Female',\n value: 'F'\n }\n];\n\nexport default {\n validations,\n data() {\n return {\n genderOptions,\n formData: {\n mobile: '',\n password: '',\n repassword: '',\n gender: ''\n },\n validMsg: {}\n };\n },\n methods: {\n submit() {\n let result = this.$validate(this.formData);\n let { valid, validMsg } = result;\n this.validMsg = validMsg;\n\n if (valid) {\n console.log('gg');\n }\n }\n }\n};\n
'},zyi9:function(t,e){t.exports='<ui-segmented-buttons\n v-model="checkedValue"\n :items="items"\n single-select\n></ui-segmented-buttons>\n
const items = [\n {\n icon: 'favorite'\n },\n {\n text: 'Sample Text'\n },\n {\n icon: 'favorite',\n text: 'Sample Text'\n }\n];\n\nexport default {\n data() {\n return {\n items,\n checkedValue: -1\n };\n }\n};\n
'},"zzY+":function(t,e){t.exports='The Ripple provides the JavaScript and CSS required to provide components (or any element at all) with a material "ink ripple" interaction effect. It is designed to be efficient, uninvasive, and usable without adding any extra DOM to your elements.
'}}); \ No newline at end of file diff --git a/js/vendor/balm-ui.0fa92f89.js b/js/vendor/balm-ui.0fa92f89.js deleted file mode 100644 index 23b53f32..00000000 --- a/js/vendor/balm-ui.0fa92f89.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{"3BxJ":function(t,e,n){!function(t){"use strict";var e="undefined"!==typeof window&&void 0!==window.flatpickr?window.flatpickr:{l10ns:{}},n={weekdays:{shorthand:["\u5468\u65e5","\u5468\u4e00","\u5468\u4e8c","\u5468\u4e09","\u5468\u56db","\u5468\u4e94","\u5468\u516d"],longhand:["\u661f\u671f\u65e5","\u661f\u671f\u4e00","\u661f\u671f\u4e8c","\u661f\u671f\u4e09","\u661f\u671f\u56db","\u661f\u671f\u4e94","\u661f\u671f\u516d"]},months:{shorthand:["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"],longhand:["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"]},rangeSeparator:" \u81f3 ",weekAbbreviation:"\u5468",scrollTitle:"\u6eda\u52a8\u5207\u6362",toggleTitle:"\u70b9\u51fb\u5207\u6362 12/24 \u5c0f\u65f6\u65f6\u5236"};e.l10ns.zh=n;var i=e.l10ns;t.Mandarin=n,t.default=i,Object.defineProperty(t,"__esModule",{value:!0})}(e)},"5o4+":function(t,e,n){"use strict";var i={name:"MdcCheckbox",props:{checked:{type:[Boolean,null],default:null},indeterminate:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},watch:{indeterminate(t){this.$refs.checkbox.indeterminate=t},disabled(t){this.$refs.checkbox.disabled=t}},mounted(){this.indeterminate&&(this.$refs.checkbox.indeterminate=this.indeterminate),this.disabled&&(this.$refs.checkbox.disabled=this.disabled)},methods:{reset(){this.$refs.checkbox.indeterminate?this.$refs.checkbox.indeterminate=!1:this.$refs.checkbox.checked=!1}}},r=n("KHd+"),o=Object(r.a)(i,(function(){var t=this,e=t._self._c;return e("div",{staticClass:"mdc-checkbox"},[t._t("default",(function(){return[e("input",{ref:"checkbox",staticClass:"mdc-checkbox__native-control",attrs:{type:"checkbox",disabled:t.disabled},domProps:{checked:t.checked}})]})),t._v(" "),e("div",{staticClass:"mdc-checkbox__background"},[e("svg",{staticClass:"mdc-checkbox__checkmark",attrs:{viewBox:"0 0 24 24"}},[e("path",{staticClass:"mdc-checkbox__checkmark-path",attrs:{fill:"none",d:"M1.73,12.91 8.1,19.28 22.79,4.59"}})]),t._v(" "),e("div",{staticClass:"mdc-checkbox__mixedmark"})]),t._v(" "),e("div",{staticClass:"mdc-checkbox__ripple"})],2)}),[],!1,null,null,null);e.a=o.exports},BG2B:function(t,e,n){"use strict";var i=n("kiQV");e.a=i.version},FZBc:function(t,e,n){"use strict";n.d(e,"d",(function(){return Wh})),n.d(e,"e",(function(){return Zh})),n.d(e,"f",(function(){return vp})),n.d(e,"c",(function(){return Kf})),n.d(e,"b",(function(){return zf}));var i,r=n("BG2B"),o=n("kUbF"),a=n("g8md"),s={methods:{checkType(t,e){return this[e]||this.type===t[e]||this.type===e}}};var l=n("zOht"),c=function(){function t(t){void 0===t&&(t={}),this.adapter=t}return Object.defineProperty(t,"cssClasses",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(t,"strings",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(t,"numbers",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(t,"defaultAdapter",{get:function(){return{}},enumerable:!1,configurable:!0}),t.prototype.init=function(){},t.prototype.destroy=function(){},t}(),u=function(){function t(t,e){for(var n=[],i=2;i