From aacd697ae2676e62184f496939fc5f8a98b1bd25 Mon Sep 17 00:00:00 2001 From: finnhvman Date: Sun, 24 Mar 2019 14:30:16 +0100 Subject: [PATCH] Add Unelevated Button --- README.md | 9 +- dist/matter.css | 73 ++++++ dist/matter.min.css | 2 +- .../buttons/unelevated/button-unelevated.css | 82 +++++++ .../buttons/unelevated/button-unelevated.json | 5 + .../unelevated/button-unelevated.spec.html | 11 + .../unelevated/button-unelevated.spec.js | 231 ++++++++++++++++++ src/components/components.css | 5 +- 8 files changed, 414 insertions(+), 4 deletions(-) create mode 100644 src/components/buttons/unelevated/button-unelevated.css create mode 100644 src/components/buttons/unelevated/button-unelevated.json create mode 100644 src/components/buttons/unelevated/button-unelevated.spec.html create mode 100644 src/components/buttons/unelevated/button-unelevated.spec.js diff --git a/README.md b/README.md index 88ddc80..72d8c58 100644 --- a/README.md +++ b/README.md @@ -27,15 +27,19 @@ ### Buttons ```html - + + - + + + + ``` ### Colors @@ -130,6 +134,7 @@ Click the link of a component in the next section to find more examples of its u * [x] [Contained](./src/components/buttons/contained) * [x] [Outlined](./src/components/buttons/outlined) * [x] [Text](./src/components/buttons/text) + * [x] [Unelevated](./src/components/buttons/unelevated) * [x] [Colors](./src/utilities/colors) * [x] Progress Indicators * [x] [Circular](./src/components/progress/circular) diff --git a/dist/matter.css b/dist/matter.css index 34cdce5..146edda 100644 --- a/dist/matter.css +++ b/dist/matter.css @@ -84,6 +84,79 @@ .matter-button-contained:disabled::after { opacity: 0; } +/* Button Unelevated */ +.matter-button-unelevated { + --matter-helper-theme: var(--matter-theme-rgb, var(--matter-primary-rgb, 33, 150, 243)); + --matter-helper-ontheme: var(--matter-ontheme-rgb, var(--matter-onprimary-rgb, 255, 255, 255)); + position: relative; + display: inline-block; + box-sizing: border-box; + border: none; + border-radius: 4px; + padding: 0 16px; + min-width: 64px; + height: 36px; + vertical-align: middle; + text-align: center; + text-overflow: ellipsis; + color: rgb(var(--matter-helper-ontheme)); + background-color: rgb(var(--matter-helper-theme)); + font-family: var(--matter-font-family, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system); + font-size: 14px; + font-weight: 500; + line-height: 36px; + outline: none; + cursor: pointer; +} +.matter-button-unelevated::-moz-focus-inner { + border: none; +} +/* Highlight, Ripple */ +.matter-button-unelevated::before, +.matter-button-unelevated::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: inherit; + opacity: 0; +} +.matter-button-unelevated::before { + background-color: rgb(var(--matter-helper-ontheme)); + transition: opacity 0.2s; +} +.matter-button-unelevated::after { + background: radial-gradient(circle at center, currentColor 1%, transparent 1%) center/10000% 10000% no-repeat; + transition: opacity 1s, background-size 0.5s; +} +/* Hover, Focus */ +.matter-button-unelevated:hover::before { + opacity: 0.08; +} +.matter-button-unelevated:focus::before { + opacity: 0.24; +} +.matter-button-unelevated:hover:focus::before { + opacity: 0.32; +} +/* Active */ +.matter-button-unelevated:active::after { + opacity: 0.32; + background-size: 100% 100%; + transition: background-size 0s; +} +/* Disabled */ +.matter-button-unelevated:disabled { + color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38); + background-color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.12); + cursor: initial; +} +.matter-button-unelevated:disabled::before, +.matter-button-unelevated:disabled::after { + opacity: 0; +} /* Button Outlined */ .matter-button-outlined { --matter-helper-theme: var(--matter-theme-rgb, var(--matter-primary-rgb, 33, 150, 243)); diff --git a/dist/matter.min.css b/dist/matter.min.css index 135325d..569889b 100644 --- a/dist/matter.min.css +++ b/dist/matter.min.css @@ -1,2 +1,2 @@ /* Matter 0.1.0 (min) */ -.matter-button-contained{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-ontheme));background-color:rgb(var(--matter-helper-theme));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);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer;transition:box-shadow .2s}.matter-button-contained::-moz-focus-inner{border:none}.matter-button-contained:after,.matter-button-contained:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-contained:before{background-color:rgb(var(--matter-helper-ontheme));transition:opacity .2s}.matter-button-contained:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-contained:focus,.matter-button-contained:hover{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)}.matter-button-contained:hover:before{opacity:.08}.matter-button-contained:focus:before{opacity:.24}.matter-button-contained:hover:focus:before{opacity:.32}.matter-button-contained: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)}.matter-button-contained:active:after{opacity:.32;background-size:100% 100%;transition:background-size 0s}.matter-button-contained:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.12);box-shadow:none;cursor:auto}.matter-button-contained:disabled:after,.matter-button-contained:disabled:before{opacity:0}.matter-button-outlined{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:1px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24);border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:34px;outline:none;cursor:pointer}.matter-button-outlined::-moz-focus-inner{border:none}.matter-button-outlined:after,.matter-button-outlined:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:3px;opacity:0}.matter-button-outlined:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-outlined:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-outlined:hover:before{opacity:.04}.matter-button-outlined:focus:before{opacity:.12}.matter-button-outlined:hover:focus:before{opacity:.16}.matter-button-outlined:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-outlined:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-outlined:disabled:after,.matter-button-outlined:disabled:before{opacity:0}.matter-button-text{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:none;border-radius:4px;padding:0 8px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer}.matter-button-text::-moz-focus-inner{border:none}.matter-button-text:after,.matter-button-text:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-text:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-text:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-text:hover:before{opacity:.04}.matter-button-text:focus:before{opacity:.12}.matter-button-text:hover:focus:before{opacity:.16}.matter-button-text:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-text:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-text:disabled:after,.matter-button-text:disabled:before{opacity:0}.matter-progress-circular{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border:none;border-radius:50%;padding:.25em;width:3em;height:3em;color:rgb(var(--matter-helper-theme));background-color:transparent;font-size:16px;overflow:hidden}.matter-progress-circular::-webkit-progress-bar{background-color:transparent}.matter-progress-circular:indeterminate{animation:matter-progress-circular 6s cubic-bezier(.3,.6,1,1) infinite}.matter-progress-circular:indeterminate,:-ms-lang(x){animation:none}.matter-progress-circular:indeterminate::-webkit-progress-value,.matter-progress-circular:indeterminate:before{content:"";display:block;box-sizing:border-box;margin-bottom:.25em;border:.25em solid;border-radius:50%;width:100%!important;height:100%;background-color:transparent;-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-moz-progress-bar{box-sizing:border-box;border:.25em solid;border-radius:50%;width:100%;height:100%;background-color:transparent;clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-ms-fill{animation-name:-ms-ring}@keyframes matter-progress-circular{0%{transform:rotate(0deg)}12.5%{transform:rotate(180deg);animation-timing-function:linear}25%{transform:rotate(630deg)}37.5%{transform:rotate(810deg);animation-timing-function:linear}50%{transform:rotate(1260deg)}62.5%{transform:rotate(4turn);animation-timing-function:linear}75%{transform:rotate(1890deg)}87.5%{transform:rotate(2070deg);animation-timing-function:linear}to{transform:rotate(7turn)}}@keyframes matter-progress-circular-pseudo{0%{-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0)}18%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0);clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0)}53%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%)}88%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%)}to{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%)}}.matter-progress-linear{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:160px;height:4px;vertical-align:middle;color:rgb(var(--matter-helper-theme));background-color:rgba(var(--matter-helper-theme),.12)}.matter-progress-linear::-webkit-progress-bar{background-color:transparent}.matter-progress-linear::-webkit-progress-value{background-color:currentColor;transition:all .2s}.matter-progress-linear::-moz-progress-bar{background-color:currentColor;transition:all .2s}.matter-progress-linear::-ms-fill{border:none;background-color:currentColor;transition:all .2s}.matter-progress-linear:indeterminate{background-size:200% 100%;background-image:linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 25%,transparent 0);animation:matter-progress-linear 1.8s linear infinite}.matter-progress-linear:indeterminate::-webkit-progress-value{background-color:transparent}.matter-progress-linear:indeterminate::-moz-progress-bar{background-color:transparent}.matter-progress-linear:indeterminate::-ms-fill{animation-name:none}@keyframes matter-progress-linear{0%{background-position:32% 0,32% 0,50% 0}2%{background-position:32% 0,32% 0,50% 0}21%{background-position:32% 0,-18% 0,0 0}42%{background-position:32% 0,-68% 0,-27% 0}50%{background-position:32% 0,-93% 0,-46% 0}56%{background-position:32% 0,-118% 0,-68% 0}66%{background-position:-11% 0,-200% 0,-100% 0}71%{background-position:-32% 0,-200% 0,-100% 0}79%{background-position:-54% 0,-242% 0,-100% 0}86%{background-position:-68% 0,-268% 0,-100% 0}to{background-position:-100% 0,-300% 0,-100% 0}}.matter-checkbox{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-checkbox>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:3px 1px;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:2px;width:18px;height:18px;outline:none;cursor:pointer;transition:border-color .2s,background-color .2s}.matter-checkbox>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-checkbox>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);pointer-events:none;transition:opacity .3s,transform .2s}.matter-checkbox>input+span:after{content:"";z-index:1;display:block;position:absolute;top:3px;left:1px;width:10px;height:5px;border-color:transparent;border-style:solid;border-width:0 0 2px 2px;pointer-events:none;transform:translate(3px,4px) rotate(-45deg);transition:border-color .2s}.matter-checkbox>input:checked,.matter-checkbox>input:indeterminate{border-color:rgb(var(--matter-helper-theme));background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:before,.matter-checkbox>input:indeterminate+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:after,.matter-checkbox>input:indeterminate+span:after{border-color:rgb(var(--matter-helper-ontheme,255,255,255))}.matter-checkbox>input:indeterminate+span:after{border-left-width:0;transform:translate(4px,3px)}.matter-checkbox:hover>input+span:before{opacity:.04}.matter-checkbox>input:focus+span:before{opacity:.12}.matter-checkbox:hover>input:focus+span:before{opacity:.16}.matter-checkbox:active:hover>input,.matter-checkbox:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-checkbox:active>input:checked{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6)}.matter-checkbox:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-checkbox>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:checked:disabled,.matter-checkbox>input:indeterminate:disabled{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-checkbox>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-radio>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:2px 0;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:50%;width:20px;height:20px;outline:none;cursor:pointer;transition:border-color .2s}.matter-radio>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-radio>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(0);pointer-events:none;transition:opacity .3s,transform .2s}.matter-radio>input+span:after{content:"";display:block;position:absolute;top:2px;left:0;border-radius:50%;width:10px;height:10px;background-color:rgb(var(--matter-helper-theme));transform:translate(5px,5px) scale(0);transition:transform .2s}.matter-radio>input:checked{border-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:after{transform:translate(5px,5px) scale(1)}.matter-radio:hover>input+span:before{transform:scale(1);opacity:.04}.matter-radio>input:focus+span:before{transform:scale(1);opacity:.12}.matter-radio:hover>input:focus+span:before{transform:scale(1);opacity:.16}.matter-radio:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-radio:active:hover>input+span:before,.matter-radio:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-radio>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio>input:disabled+span:after{background-color:currentColor}.matter-switch{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-switch,.matter-switch>input{position:relative;display:inline-block}.matter-switch>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;float:right;margin:0 0 0 5px;border:5px solid transparent;border-radius:12px;width:46px;height:24px;background-clip:padding-box;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);outline:none;cursor:pointer;transition:background-color .2s,opacity .2s}.matter-switch>input+span{display:inline-block;box-sizing:border-box;margin-right:-51px;padding-right:51px;width:inherit;cursor:pointer}.matter-switch>input+span:before{right:11px;top:-8px;display:block;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);transition:opacity .3s .1s,transform .2s .1s}.matter-switch>input+span:after,.matter-switch>input+span:before{content:"";position:absolute;border-radius:50%;pointer-events:none}.matter-switch>input+span:after{z-index:1;top:2px;right:21px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));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);transition:background-color .2s,transform .2s}.matter-switch>input:checked{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:checked+span:before{right:-5px;background-color:rgb(var(--matter-helper-theme))}.matter-switch>input:checked+span:after{background-color:rgb(var(--matter-helper-theme));transform:translateX(16px)}.matter-switch:hover>input+span:before{opacity:.04}.matter-switch>input:focus+span:before{opacity:.12}.matter-switch:hover>input:focus+span:before{opacity:.16}.matter-switch:active>input{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch:active>input:checked{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-switch:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-switch>input:disabled{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);opacity:.38;cursor:default}.matter-switch>input:checked:disabled{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0,.38));cursor:default}.matter-switch>input:disabled+span:before{z-index:1;margin:10px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));transform:scale(1);opacity:1;transition:none}.matter-switch>input:disabled+span:after{opacity:.38}.matter-textfield-standard{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-standard>input,.matter-textfield-standard>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);padding:0 0 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-standard>input+span,.matter-textfield-standard>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 0 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .2s}.matter-textfield-standard:hover>input,.matter-textfield-standard:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87)}.matter-textfield-standard>input:not(:focus):placeholder-shown+span,.matter-textfield-standard>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:56px}.matter-textfield-standard>input:focus,.matter-textfield-standard>textarea:focus{outline:none}.matter-textfield-standard>input:focus+span,.matter-textfield-standard>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-standard>input:focus+span:after,.matter-textfield-standard>textarea:focus+span:after{transform:scale(1)}.matter-textfield-standard>input:disabled,.matter-textfield-standard>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-textfield-standard>input:disabled+span,.matter-textfield-standard>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-standard>input,.matter-textfield-standard>input+span,.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea,.matter-textfield-standard>textarea+span,.matter-textfield-standard>textarea+span:after{transition-duration:.1s}}}.matter-textfield-filled{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-filled>input,.matter-textfield-filled>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:4px 4px 0 0;padding:0 12px 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.04);box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-filled>input+span,.matter-textfield-filled>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 12px 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .3s}.matter-textfield-filled:hover>input,.matter-textfield-filled:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.08)}.matter-textfield-filled>input:not(:focus):placeholder-shown+span,.matter-textfield-filled>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:48px}.matter-textfield-filled>input:focus,.matter-textfield-filled>textarea:focus{outline:none}.matter-textfield-filled>input:focus+span,.matter-textfield-filled>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-filled>input:focus+span:after,.matter-textfield-filled>textarea:focus+span:after{transform:scale(1)}.matter-textfield-filled>input:disabled,.matter-textfield-filled>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24)}.matter-textfield-filled>input:disabled+span,.matter-textfield-filled>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-filled>input,.matter-textfield-filled>input+span,.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea,.matter-textfield-filled>textarea+span,.matter-textfield-filled>textarea+span:after{transition-duration:.1s}}}.matter-textfield-outlined{--matter-helper-theme:rgb(var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243)));--matter-helper-safari1:rgba(var(--matter-onsurface-rgb,0,0,0),0.38);--matter-helper-safari2:rgba(var(--matter-onsurface-rgb,0,0,0),0.6);--matter-helper-safari3:rgba(var(--matter-onsurface-rgb,0,0,0),0.87);position:relative;display:inline-block;padding-top:6px;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-outlined>input,.matter-textfield-outlined>textarea{box-sizing:border-box;margin:0;border:1px solid var(--matter-helper-safari2);border-top:1px solid transparent;border-radius:4px;padding:15px 13px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:inset 1px 0 transparent,inset -1px 0 transparent,inset 0 -1px transparent;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:var(--matter-helper-theme);transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown{border-top-color:var(--matter-helper-safari2)}.matter-textfield-outlined>input+span,.matter-textfield-outlined>textarea+span{position:absolute;top:0;left:0;display:flex;width:100%;max-height:100%;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:15px;cursor:text;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:68px}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{content:"";display:block;box-sizing:border-box;margin-top:6px;border-top:1px solid var(--matter-helper-safari2);min-width:10px;height:8px;pointer-events:none;box-shadow:inset 0 1px transparent;transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:before{margin-right:4px;border-left:1px solid transparent;border-radius:4px 0}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>textarea+span:after{flex-grow:1;margin-left:4px;border-right:1px solid transparent;border-radius:0 4px}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:before,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:before{border-top-color:transparent}.matter-textfield-outlined:hover>input,.matter-textfield-outlined:hover>textarea{border-left-color:var(--matter-helper-safari3);border-bottom-color:var(--matter-helper-safari3);border-right-color:var(--matter-helper-safari3);border-top-color:transparent}.matter-textfield-outlined:hover>input+span:after,.matter-textfield-outlined:hover>input+span:before,.matter-textfield-outlined:hover>textarea+span:after,.matter-textfield-outlined:hover>textarea+span:before{border-top-color:var(--matter-helper-safari3)}.matter-textfield-outlined:hover>input:not(:focus):placeholder-shown,.matter-textfield-outlined:hover>textarea:not(:focus):placeholder-shown{border-color:var(--matter-helper-safari3)}.matter-textfield-outlined>input:focus,.matter-textfield-outlined>textarea:focus{border-left-color:var(--matter-helper-theme);border-bottom-color:var(--matter-helper-theme);border-right-color:var(--matter-helper-theme);border-top-color:transparent;box-shadow:inset 1px 0 var(--matter-helper-theme),inset -1px 0 var(--matter-helper-theme),inset 0 -1px var(--matter-helper-theme);outline:none}.matter-textfield-outlined>input:focus+span,.matter-textfield-outlined>textarea:focus+span{color:var(--matter-helper-theme)}.matter-textfield-outlined>input:focus+span:after,.matter-textfield-outlined>input:focus+span:before,.matter-textfield-outlined>textarea:focus+span:after,.matter-textfield-outlined>textarea:focus+span:before{border-top-color:var(--matter-helper-theme)!important;box-shadow:inset 0 1px var(--matter-helper-theme)}.matter-textfield-outlined>input:disabled,.matter-textfield-outlined>input:disabled+span,.matter-textfield-outlined>textarea:disabled,.matter-textfield-outlined>textarea:disabled+span{border-left-color:var(--matter-helper-safari1)!important;border-bottom-color:var(--matter-helper-safari1)!important;border-right-color:var(--matter-helper-safari1)!important;border-top-color:transparent!important;color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);pointer-events:none}.matter-textfield-outlined>input:disabled+span:after,.matter-textfield-outlined>input:disabled+span:before,.matter-textfield-outlined>textarea:disabled+span:after,.matter-textfield-outlined>textarea:disabled+span:before{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown,.matter-textfield-outlined>input:disabled:placeholder-shown+span,.matter-textfield-outlined>textarea:disabled:placeholder-shown,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown+span:after,.matter-textfield-outlined>input:disabled:placeholder-shown+span:before,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:after,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:before{border-top-color:transparent!important}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-outlined>input,.matter-textfield-outlined>input+span,.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea,.matter-textfield-outlined>textarea+span,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{transition-duration:.1s}}}.matter-tooltip,.matter-tooltip-top{z-index:10;position:absolute;left:0;right:0;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:10px;font-weight:400;line-height:16px;white-space:nowrap;text-transform:none;text-align:center;pointer-events:none}.matter-tooltip{bottom:-40px}.matter-tooltip-top{top:-40px}.matter-tooltip-top>span,.matter-tooltip>span{position:-webkit-sticky;position:sticky;left:0;right:0;display:inline-block;margin:0 -100vw;border:8px solid transparent;border-radius:12px;padding:4px 8px;color:rgb(var(--matter-surface-rgb,255,255,255));background-clip:padding-box;background-image:linear-gradient(rgba(var(--matter-surface-rgb,255,255,255),.34),rgba(var(--matter-surface-rgb,255,255,255),.34));background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.85);transform:scale(0);opacity:0;pointer-events:auto;transition:transform 75ms,opacity 75ms}.matter-tooltip-top:hover>span,.matter-tooltip:hover>span,:not(html):hover>.matter-tooltip-top>span,:not(html):hover>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}:focus-within>.matter-tooltip-top>span,:focus-within>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}@media (hover:none),(pointer:coarse){.matter-tooltip,.matter-tooltip-top{font-size:14px;line-height:20px}.matter-tooltip{bottom:-48px}.matter-tooltip-top{top:-48px}.matter-tooltip-top>span,.matter-tooltip>span{padding:6px 16px}}.matter-primary{--matter-theme-rgb:var(--matter-primary-rgb,33,150,243);--matter-ontheme-rgb:var(--matter-onprimary-rgb,255,255,255)}.matter-secondary{--matter-theme-rgb:var(--matter-secondary-rgb,102,0,238);--matter-ontheme-rgb:var(--matter-onsecondary-rgb,255,255,255)}.matter-error{--matter-theme-rgb:var(--matter-warning-rgb,238,0,0)}.matter-error,.matter-warning{--matter-ontheme-rgb:var(--matter-onwarning-rgb,255,255,255)}.matter-warning{--matter-theme-rgb:var(--matter-warning-rgb,238,102,0)}.matter-success{--matter-theme-rgb:var(--matter-success-rgb,17,136,34);--matter-ontheme-rgb:var(--matter-onsuccess-rgb,255,255,255)}.matter-primary-text{color:rgb(var(--matter-primary-rgb,33,150,243))}.matter-secondary-text{color:rgb(var(--matter-secondary-rgb,102,0,238))}.matter-error-text{color:rgb(var(--matter-warning-rgb,238,0,0))}.matter-warning-text{color:rgb(var(--matter-warning-rgb,238,102,0))}.matter-success-text{color:rgb(var(--matter-success-rgb,17,136,34))}.matter-h1{font-size:96px;letter-spacing:-1.5px;line-height:120px}.matter-h1,.matter-h2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:300}.matter-h2{font-size:60px;letter-spacing:-.5px;line-height:80px}.matter-h3{font-size:48px;letter-spacing:0;line-height:64px}.matter-h3,.matter-h4{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-h4{font-size:34px;letter-spacing:.25px;line-height:48px}.matter-h5{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:24px;font-weight:400;letter-spacing:0;line-height:36px}.matter-h6{font-size:20px;font-weight:500;line-height:28px}.matter-h6,.matter-subtitle1{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);letter-spacing:.15px}.matter-subtitle1{font-size:16px;font-weight:400;line-height:24px}.matter-subtitle2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;letter-spacing:.1px;line-height:20px}.matter-body1{font-size:16px;letter-spacing:.5px;line-height:24px}.matter-body1,.matter-body2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-body2{letter-spacing:.25px}.matter-body2,.matter-button{font-size:14px;line-height:20px}.matter-button{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:500;letter-spacing:1.25px;text-transform:uppercase}.matter-caption{font-size:12px;letter-spacing:.4px;line-height:20px}.matter-caption,.matter-overline{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-overline{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;line-height:16px} \ No newline at end of file +.matter-button-contained{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-ontheme));background-color:rgb(var(--matter-helper-theme));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);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer;transition:box-shadow .2s}.matter-button-contained::-moz-focus-inner{border:none}.matter-button-contained:after,.matter-button-contained:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-contained:before{background-color:rgb(var(--matter-helper-ontheme));transition:opacity .2s}.matter-button-contained:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-contained:focus,.matter-button-contained:hover{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)}.matter-button-contained:hover:before{opacity:.08}.matter-button-contained:focus:before{opacity:.24}.matter-button-contained:hover:focus:before{opacity:.32}.matter-button-contained: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)}.matter-button-contained:active:after{opacity:.32;background-size:100% 100%;transition:background-size 0s}.matter-button-contained:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.12);box-shadow:none;cursor:auto}.matter-button-contained:disabled:after,.matter-button-contained:disabled:before{opacity:0}.matter-button-unelevated{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-ontheme));background-color:rgb(var(--matter-helper-theme));font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer}.matter-button-unelevated::-moz-focus-inner{border:none}.matter-button-unelevated:after,.matter-button-unelevated:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-unelevated:before{background-color:rgb(var(--matter-helper-ontheme));transition:opacity .2s}.matter-button-unelevated:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-unelevated:hover:before{opacity:.08}.matter-button-unelevated:focus:before{opacity:.24}.matter-button-unelevated:hover:focus:before{opacity:.32}.matter-button-unelevated:active:after{opacity:.32;background-size:100% 100%;transition:background-size 0s}.matter-button-unelevated:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.12);cursor:auto}.matter-button-unelevated:disabled:after,.matter-button-unelevated:disabled:before{opacity:0}.matter-button-outlined{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:1px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24);border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:34px;outline:none;cursor:pointer}.matter-button-outlined::-moz-focus-inner{border:none}.matter-button-outlined:after,.matter-button-outlined:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:3px;opacity:0}.matter-button-outlined:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-outlined:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-outlined:hover:before{opacity:.04}.matter-button-outlined:focus:before{opacity:.12}.matter-button-outlined:hover:focus:before{opacity:.16}.matter-button-outlined:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-outlined:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-outlined:disabled:after,.matter-button-outlined:disabled:before{opacity:0}.matter-button-text{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:none;border-radius:4px;padding:0 8px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer}.matter-button-text::-moz-focus-inner{border:none}.matter-button-text:after,.matter-button-text:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-text:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-text:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-text:hover:before{opacity:.04}.matter-button-text:focus:before{opacity:.12}.matter-button-text:hover:focus:before{opacity:.16}.matter-button-text:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-text:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-text:disabled:after,.matter-button-text:disabled:before{opacity:0}.matter-progress-circular{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border:none;border-radius:50%;padding:.25em;width:3em;height:3em;color:rgb(var(--matter-helper-theme));background-color:transparent;font-size:16px;overflow:hidden}.matter-progress-circular::-webkit-progress-bar{background-color:transparent}.matter-progress-circular:indeterminate{animation:matter-progress-circular 6s cubic-bezier(.3,.6,1,1) infinite}.matter-progress-circular:indeterminate,:-ms-lang(x){animation:none}.matter-progress-circular:indeterminate::-webkit-progress-value,.matter-progress-circular:indeterminate:before{content:"";display:block;box-sizing:border-box;margin-bottom:.25em;border:.25em solid;border-radius:50%;width:100%!important;height:100%;background-color:transparent;-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-moz-progress-bar{box-sizing:border-box;border:.25em solid;border-radius:50%;width:100%;height:100%;background-color:transparent;clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-ms-fill{animation-name:-ms-ring}@keyframes matter-progress-circular{0%{transform:rotate(0deg)}12.5%{transform:rotate(180deg);animation-timing-function:linear}25%{transform:rotate(630deg)}37.5%{transform:rotate(810deg);animation-timing-function:linear}50%{transform:rotate(1260deg)}62.5%{transform:rotate(4turn);animation-timing-function:linear}75%{transform:rotate(1890deg)}87.5%{transform:rotate(2070deg);animation-timing-function:linear}to{transform:rotate(7turn)}}@keyframes matter-progress-circular-pseudo{0%{-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0)}18%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0);clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0)}53%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%)}88%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%)}to{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%)}}.matter-progress-linear{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:160px;height:4px;vertical-align:middle;color:rgb(var(--matter-helper-theme));background-color:rgba(var(--matter-helper-theme),.12)}.matter-progress-linear::-webkit-progress-bar{background-color:transparent}.matter-progress-linear::-webkit-progress-value{background-color:currentColor;transition:all .2s}.matter-progress-linear::-moz-progress-bar{background-color:currentColor;transition:all .2s}.matter-progress-linear::-ms-fill{border:none;background-color:currentColor;transition:all .2s}.matter-progress-linear:indeterminate{background-size:200% 100%;background-image:linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 25%,transparent 0);animation:matter-progress-linear 1.8s linear infinite}.matter-progress-linear:indeterminate::-webkit-progress-value{background-color:transparent}.matter-progress-linear:indeterminate::-moz-progress-bar{background-color:transparent}.matter-progress-linear:indeterminate::-ms-fill{animation-name:none}@keyframes matter-progress-linear{0%{background-position:32% 0,32% 0,50% 0}2%{background-position:32% 0,32% 0,50% 0}21%{background-position:32% 0,-18% 0,0 0}42%{background-position:32% 0,-68% 0,-27% 0}50%{background-position:32% 0,-93% 0,-46% 0}56%{background-position:32% 0,-118% 0,-68% 0}66%{background-position:-11% 0,-200% 0,-100% 0}71%{background-position:-32% 0,-200% 0,-100% 0}79%{background-position:-54% 0,-242% 0,-100% 0}86%{background-position:-68% 0,-268% 0,-100% 0}to{background-position:-100% 0,-300% 0,-100% 0}}.matter-checkbox{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-checkbox>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:3px 1px;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:2px;width:18px;height:18px;outline:none;cursor:pointer;transition:border-color .2s,background-color .2s}.matter-checkbox>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-checkbox>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);pointer-events:none;transition:opacity .3s,transform .2s}.matter-checkbox>input+span:after{content:"";z-index:1;display:block;position:absolute;top:3px;left:1px;width:10px;height:5px;border-color:transparent;border-style:solid;border-width:0 0 2px 2px;pointer-events:none;transform:translate(3px,4px) rotate(-45deg);transition:border-color .2s}.matter-checkbox>input:checked,.matter-checkbox>input:indeterminate{border-color:rgb(var(--matter-helper-theme));background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:before,.matter-checkbox>input:indeterminate+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:after,.matter-checkbox>input:indeterminate+span:after{border-color:rgb(var(--matter-helper-ontheme,255,255,255))}.matter-checkbox>input:indeterminate+span:after{border-left-width:0;transform:translate(4px,3px)}.matter-checkbox:hover>input+span:before{opacity:.04}.matter-checkbox>input:focus+span:before{opacity:.12}.matter-checkbox:hover>input:focus+span:before{opacity:.16}.matter-checkbox:active:hover>input,.matter-checkbox:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-checkbox:active>input:checked{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6)}.matter-checkbox:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-checkbox>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:checked:disabled,.matter-checkbox>input:indeterminate:disabled{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-checkbox>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-radio>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:2px 0;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:50%;width:20px;height:20px;outline:none;cursor:pointer;transition:border-color .2s}.matter-radio>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-radio>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(0);pointer-events:none;transition:opacity .3s,transform .2s}.matter-radio>input+span:after{content:"";display:block;position:absolute;top:2px;left:0;border-radius:50%;width:10px;height:10px;background-color:rgb(var(--matter-helper-theme));transform:translate(5px,5px) scale(0);transition:transform .2s}.matter-radio>input:checked{border-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:after{transform:translate(5px,5px) scale(1)}.matter-radio:hover>input+span:before{transform:scale(1);opacity:.04}.matter-radio>input:focus+span:before{transform:scale(1);opacity:.12}.matter-radio:hover>input:focus+span:before{transform:scale(1);opacity:.16}.matter-radio:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-radio:active:hover>input+span:before,.matter-radio:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-radio>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio>input:disabled+span:after{background-color:currentColor}.matter-switch{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-switch,.matter-switch>input{position:relative;display:inline-block}.matter-switch>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;float:right;margin:0 0 0 5px;border:5px solid transparent;border-radius:12px;width:46px;height:24px;background-clip:padding-box;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);outline:none;cursor:pointer;transition:background-color .2s,opacity .2s}.matter-switch>input+span{display:inline-block;box-sizing:border-box;margin-right:-51px;padding-right:51px;width:inherit;cursor:pointer}.matter-switch>input+span:before{right:11px;top:-8px;display:block;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);transition:opacity .3s .1s,transform .2s .1s}.matter-switch>input+span:after,.matter-switch>input+span:before{content:"";position:absolute;border-radius:50%;pointer-events:none}.matter-switch>input+span:after{z-index:1;top:2px;right:21px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));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);transition:background-color .2s,transform .2s}.matter-switch>input:checked{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:checked+span:before{right:-5px;background-color:rgb(var(--matter-helper-theme))}.matter-switch>input:checked+span:after{background-color:rgb(var(--matter-helper-theme));transform:translateX(16px)}.matter-switch:hover>input+span:before{opacity:.04}.matter-switch>input:focus+span:before{opacity:.12}.matter-switch:hover>input:focus+span:before{opacity:.16}.matter-switch:active>input{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch:active>input:checked{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-switch:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-switch>input:disabled{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);opacity:.38;cursor:default}.matter-switch>input:checked:disabled{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0,.38));cursor:default}.matter-switch>input:disabled+span:before{z-index:1;margin:10px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));transform:scale(1);opacity:1;transition:none}.matter-switch>input:disabled+span:after{opacity:.38}.matter-textfield-standard{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-standard>input,.matter-textfield-standard>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);padding:0 0 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-standard>input+span,.matter-textfield-standard>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 0 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .2s}.matter-textfield-standard:hover>input,.matter-textfield-standard:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87)}.matter-textfield-standard>input:not(:focus):placeholder-shown+span,.matter-textfield-standard>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:56px}.matter-textfield-standard>input:focus,.matter-textfield-standard>textarea:focus{outline:none}.matter-textfield-standard>input:focus+span,.matter-textfield-standard>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-standard>input:focus+span:after,.matter-textfield-standard>textarea:focus+span:after{transform:scale(1)}.matter-textfield-standard>input:disabled,.matter-textfield-standard>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-textfield-standard>input:disabled+span,.matter-textfield-standard>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-standard>input,.matter-textfield-standard>input+span,.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea,.matter-textfield-standard>textarea+span,.matter-textfield-standard>textarea+span:after{transition-duration:.1s}}}.matter-textfield-filled{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-filled>input,.matter-textfield-filled>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:4px 4px 0 0;padding:0 12px 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.04);box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-filled>input+span,.matter-textfield-filled>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 12px 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .3s}.matter-textfield-filled:hover>input,.matter-textfield-filled:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.08)}.matter-textfield-filled>input:not(:focus):placeholder-shown+span,.matter-textfield-filled>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:48px}.matter-textfield-filled>input:focus,.matter-textfield-filled>textarea:focus{outline:none}.matter-textfield-filled>input:focus+span,.matter-textfield-filled>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-filled>input:focus+span:after,.matter-textfield-filled>textarea:focus+span:after{transform:scale(1)}.matter-textfield-filled>input:disabled,.matter-textfield-filled>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24)}.matter-textfield-filled>input:disabled+span,.matter-textfield-filled>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-filled>input,.matter-textfield-filled>input+span,.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea,.matter-textfield-filled>textarea+span,.matter-textfield-filled>textarea+span:after{transition-duration:.1s}}}.matter-textfield-outlined{--matter-helper-theme:rgb(var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243)));--matter-helper-safari1:rgba(var(--matter-onsurface-rgb,0,0,0),0.38);--matter-helper-safari2:rgba(var(--matter-onsurface-rgb,0,0,0),0.6);--matter-helper-safari3:rgba(var(--matter-onsurface-rgb,0,0,0),0.87);position:relative;display:inline-block;padding-top:6px;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-outlined>input,.matter-textfield-outlined>textarea{box-sizing:border-box;margin:0;border:1px solid var(--matter-helper-safari2);border-top:1px solid transparent;border-radius:4px;padding:15px 13px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:inset 1px 0 transparent,inset -1px 0 transparent,inset 0 -1px transparent;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:var(--matter-helper-theme);transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown{border-top-color:var(--matter-helper-safari2)}.matter-textfield-outlined>input+span,.matter-textfield-outlined>textarea+span{position:absolute;top:0;left:0;display:flex;width:100%;max-height:100%;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:15px;cursor:text;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:68px}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{content:"";display:block;box-sizing:border-box;margin-top:6px;border-top:1px solid var(--matter-helper-safari2);min-width:10px;height:8px;pointer-events:none;box-shadow:inset 0 1px transparent;transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:before{margin-right:4px;border-left:1px solid transparent;border-radius:4px 0}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>textarea+span:after{flex-grow:1;margin-left:4px;border-right:1px solid transparent;border-radius:0 4px}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:before,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:before{border-top-color:transparent}.matter-textfield-outlined:hover>input,.matter-textfield-outlined:hover>textarea{border-left-color:var(--matter-helper-safari3);border-bottom-color:var(--matter-helper-safari3);border-right-color:var(--matter-helper-safari3);border-top-color:transparent}.matter-textfield-outlined:hover>input+span:after,.matter-textfield-outlined:hover>input+span:before,.matter-textfield-outlined:hover>textarea+span:after,.matter-textfield-outlined:hover>textarea+span:before{border-top-color:var(--matter-helper-safari3)}.matter-textfield-outlined:hover>input:not(:focus):placeholder-shown,.matter-textfield-outlined:hover>textarea:not(:focus):placeholder-shown{border-color:var(--matter-helper-safari3)}.matter-textfield-outlined>input:focus,.matter-textfield-outlined>textarea:focus{border-left-color:var(--matter-helper-theme);border-bottom-color:var(--matter-helper-theme);border-right-color:var(--matter-helper-theme);border-top-color:transparent;box-shadow:inset 1px 0 var(--matter-helper-theme),inset -1px 0 var(--matter-helper-theme),inset 0 -1px var(--matter-helper-theme);outline:none}.matter-textfield-outlined>input:focus+span,.matter-textfield-outlined>textarea:focus+span{color:var(--matter-helper-theme)}.matter-textfield-outlined>input:focus+span:after,.matter-textfield-outlined>input:focus+span:before,.matter-textfield-outlined>textarea:focus+span:after,.matter-textfield-outlined>textarea:focus+span:before{border-top-color:var(--matter-helper-theme)!important;box-shadow:inset 0 1px var(--matter-helper-theme)}.matter-textfield-outlined>input:disabled,.matter-textfield-outlined>input:disabled+span,.matter-textfield-outlined>textarea:disabled,.matter-textfield-outlined>textarea:disabled+span{border-left-color:var(--matter-helper-safari1)!important;border-bottom-color:var(--matter-helper-safari1)!important;border-right-color:var(--matter-helper-safari1)!important;border-top-color:transparent!important;color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);pointer-events:none}.matter-textfield-outlined>input:disabled+span:after,.matter-textfield-outlined>input:disabled+span:before,.matter-textfield-outlined>textarea:disabled+span:after,.matter-textfield-outlined>textarea:disabled+span:before{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown,.matter-textfield-outlined>input:disabled:placeholder-shown+span,.matter-textfield-outlined>textarea:disabled:placeholder-shown,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown+span:after,.matter-textfield-outlined>input:disabled:placeholder-shown+span:before,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:after,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:before{border-top-color:transparent!important}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-outlined>input,.matter-textfield-outlined>input+span,.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea,.matter-textfield-outlined>textarea+span,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{transition-duration:.1s}}}.matter-tooltip,.matter-tooltip-top{z-index:10;position:absolute;left:0;right:0;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:10px;font-weight:400;line-height:16px;white-space:nowrap;text-transform:none;text-align:center;pointer-events:none}.matter-tooltip{bottom:-40px}.matter-tooltip-top{top:-40px}.matter-tooltip-top>span,.matter-tooltip>span{position:-webkit-sticky;position:sticky;left:0;right:0;display:inline-block;margin:0 -100vw;border:8px solid transparent;border-radius:12px;padding:4px 8px;color:rgb(var(--matter-surface-rgb,255,255,255));background-clip:padding-box;background-image:linear-gradient(rgba(var(--matter-surface-rgb,255,255,255),.34),rgba(var(--matter-surface-rgb,255,255,255),.34));background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.85);transform:scale(0);opacity:0;pointer-events:auto;transition:transform 75ms,opacity 75ms}.matter-tooltip-top:hover>span,.matter-tooltip:hover>span,:not(html):hover>.matter-tooltip-top>span,:not(html):hover>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}:focus-within>.matter-tooltip-top>span,:focus-within>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}@media (hover:none),(pointer:coarse){.matter-tooltip,.matter-tooltip-top{font-size:14px;line-height:20px}.matter-tooltip{bottom:-48px}.matter-tooltip-top{top:-48px}.matter-tooltip-top>span,.matter-tooltip>span{padding:6px 16px}}.matter-primary{--matter-theme-rgb:var(--matter-primary-rgb,33,150,243);--matter-ontheme-rgb:var(--matter-onprimary-rgb,255,255,255)}.matter-secondary{--matter-theme-rgb:var(--matter-secondary-rgb,102,0,238);--matter-ontheme-rgb:var(--matter-onsecondary-rgb,255,255,255)}.matter-error{--matter-theme-rgb:var(--matter-warning-rgb,238,0,0)}.matter-error,.matter-warning{--matter-ontheme-rgb:var(--matter-onwarning-rgb,255,255,255)}.matter-warning{--matter-theme-rgb:var(--matter-warning-rgb,238,102,0)}.matter-success{--matter-theme-rgb:var(--matter-success-rgb,17,136,34);--matter-ontheme-rgb:var(--matter-onsuccess-rgb,255,255,255)}.matter-primary-text{color:rgb(var(--matter-primary-rgb,33,150,243))}.matter-secondary-text{color:rgb(var(--matter-secondary-rgb,102,0,238))}.matter-error-text{color:rgb(var(--matter-warning-rgb,238,0,0))}.matter-warning-text{color:rgb(var(--matter-warning-rgb,238,102,0))}.matter-success-text{color:rgb(var(--matter-success-rgb,17,136,34))}.matter-h1{font-size:96px;letter-spacing:-1.5px;line-height:120px}.matter-h1,.matter-h2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:300}.matter-h2{font-size:60px;letter-spacing:-.5px;line-height:80px}.matter-h3{font-size:48px;letter-spacing:0;line-height:64px}.matter-h3,.matter-h4{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-h4{font-size:34px;letter-spacing:.25px;line-height:48px}.matter-h5{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:24px;font-weight:400;letter-spacing:0;line-height:36px}.matter-h6{font-size:20px;font-weight:500;line-height:28px}.matter-h6,.matter-subtitle1{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);letter-spacing:.15px}.matter-subtitle1{font-size:16px;font-weight:400;line-height:24px}.matter-subtitle2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;letter-spacing:.1px;line-height:20px}.matter-body1{font-size:16px;letter-spacing:.5px;line-height:24px}.matter-body1,.matter-body2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-body2{letter-spacing:.25px}.matter-body2,.matter-button{font-size:14px;line-height:20px}.matter-button{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:500;letter-spacing:1.25px;text-transform:uppercase}.matter-caption{font-size:12px;letter-spacing:.4px;line-height:20px}.matter-caption,.matter-overline{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-overline{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;line-height:16px} \ No newline at end of file diff --git a/src/components/buttons/unelevated/button-unelevated.css b/src/components/buttons/unelevated/button-unelevated.css new file mode 100644 index 0000000..7124414 --- /dev/null +++ b/src/components/buttons/unelevated/button-unelevated.css @@ -0,0 +1,82 @@ +.matter-button-unelevated { + --matter-helper-theme: var(--matter-theme-rgb, var(--matter-primary-rgb, 33, 150, 243)); + --matter-helper-ontheme: var(--matter-ontheme-rgb, var(--matter-onprimary-rgb, 255, 255, 255)); + position: relative; + display: inline-block; + box-sizing: border-box; + border: none; + border-radius: 4px; + padding: 0 16px; + min-width: 64px; + height: 36px; + vertical-align: middle; + text-align: center; + text-overflow: ellipsis; + color: rgb(var(--matter-helper-ontheme)); + background-color: rgb(var(--matter-helper-theme)); + font-family: var(--matter-font-family, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system); + font-size: 14px; + font-weight: 500; + line-height: 36px; + outline: none; + cursor: pointer; +} + +.matter-button-unelevated::-moz-focus-inner { + border: none; +} + +/* Highlight, Ripple */ +.matter-button-unelevated::before, +.matter-button-unelevated::after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: inherit; + opacity: 0; +} + +.matter-button-unelevated::before { + background-color: rgb(var(--matter-helper-ontheme)); + transition: opacity 0.2s; +} + +.matter-button-unelevated::after { + background: radial-gradient(circle at center, currentColor 1%, transparent 1%) center/10000% 10000% no-repeat; + transition: opacity 1s, background-size 0.5s; +} + +/* Hover, Focus */ +.matter-button-unelevated:hover::before { + opacity: 0.08; +} + +.matter-button-unelevated:focus::before { + opacity: 0.24; +} + +.matter-button-unelevated:hover:focus::before { + opacity: 0.32; +} + +/* Active */ +.matter-button-unelevated:active::after { + opacity: 0.32; + background-size: 100% 100%; + transition: background-size 0s; +} + +/* Disabled */ +.matter-button-unelevated:disabled { + color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38); + background-color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.12); + cursor: initial; +} + +.matter-button-unelevated:disabled::before, +.matter-button-unelevated:disabled::after { + opacity: 0; +} diff --git a/src/components/buttons/unelevated/button-unelevated.json b/src/components/buttons/unelevated/button-unelevated.json new file mode 100644 index 0000000..39ed44c --- /dev/null +++ b/src/components/buttons/unelevated/button-unelevated.json @@ -0,0 +1,5 @@ +{ + "degradation": [ + "The ripple effect always comes from the center" + ] +} \ No newline at end of file diff --git a/src/components/buttons/unelevated/button-unelevated.spec.html b/src/components/buttons/unelevated/button-unelevated.spec.html new file mode 100644 index 0000000..40f6caa --- /dev/null +++ b/src/components/buttons/unelevated/button-unelevated.spec.html @@ -0,0 +1,11 @@ + + + +

+ +

+ +

+ +

+ diff --git a/src/components/buttons/unelevated/button-unelevated.spec.js b/src/components/buttons/unelevated/button-unelevated.spec.js new file mode 100644 index 0000000..236d211 --- /dev/null +++ b/src/components/buttons/unelevated/button-unelevated.spec.js @@ -0,0 +1,231 @@ +import { setUp, tearDown } from '../../../../test/helpers/fixture.js'; +import { capture3x } from '../../../../test/helpers/capture.js'; + +const SPACING = 4; + +// transparent +const tp = { a: 0 }; + +// shadows +const noShadow = [ tp, tp, tp, tp, tp, tp, tp, tp, tp, tp, tp, tp ]; + +describe('Unelevated Button', () => { + + [ + { + label: 'normal', + states: {}, + textColor: { r: 255, g: 255, b: 255, a: 255 }, + bodyColor: { r: 33, g: 150, b: 243, a: 255 } + }, + { + label: 'hover', + states: { + '#xmas.matter-button-unelevated': [ 'hover' ] + }, + textColor: { r: 255, g: 255, b: 255, a: 255 }, + bodyColor: { r: 50, g: 158, b: [243, 244], a: 255 } + }, + { + label: 'focus', + states: { + '#xmas.matter-button-unelevated': [ 'focus' ] + }, + textColor: { r: 255, g: 255, b: 255, a: 255 }, + bodyColor: { r: [85, 86], g: 175, b: [245, 246], a: 255 } + }, + { + label: 'active', + states: { + '#xmas.matter-button-unelevated': [ 'active' ] + }, + textColor: { r: 255, g: 255, b: 255, a: 255 }, + bodyColor: { r: 33, g: 150, b: 243, a: 255 } + }, + { + label: 'hover & focus', + states: { + '#xmas.matter-button-unelevated': [ 'hover', 'focus' ] + }, + textColor: { r: 255, g: 255, b: 255, a: 255 }, + bodyColor: { r: [99, 104], g: [181, 184], b: [246, 247], a: 255 } + }, + { + label: 'hover & active', + states: { + '#xmas.matter-button-unelevated': [ 'hover', 'active' ] + }, + textColor: { r: 255, g: 255, b: 255, a: 255 }, + bodyColor: { r: 50, g: 158, b: [243, 244], a: 255 } + }, + { + label: 'focus & active', + states: { + '#xmas.matter-button-unelevated': [ 'focus', 'active' ] + }, + textColor: { r: 255, g: 255, b: 255, a: 255 }, + bodyColor: { r: [85, 86], g: 175, b: [245, 246], a: 255 } + }, + { + label: 'hover, focus & active', + states: { + '#xmas.matter-button-unelevated': [ 'hover', 'focus', 'active' ] + }, + textColor: { r: 255, g: 255, b: 255, a: 255 }, + bodyColor: { r: [99, 104], g: [181, 184], b: [246, 247], a: 255 } + }, + { + label: 'disabled', + states: { + '#xmas.matter-button-unelevated': [ 'disabled' ] + }, + textColor: { r: 0, g: 0, b: 0, a: 116 }, + bodyColor: { r: 0, g: 0, b: 0, a: [30, 31] } + }, + { + label: 'customized', + states: { + '#xmas.matter-button-unelevated': { + style: '--matter-primary-rgb: 255, 0, 0;--matter-onprimary-rgb: 0, 0, 0;width: 120px' + } + }, + textColor: { r: 0, g: 0, b: 0, a: 255 }, + bodyColor: { r: 255, g: 0, b: 0, a: 255 } + } + ].forEach((suite) => { + + describe(`in ${suite.label} state`, () => { + + let style; + let button; + let width; + let height; + let context; + + beforeAll(async () => { + style = setUp('src/components/buttons/unelevated/button-unelevated', suite.states); + + button = document.querySelector('#xmas'); + const rect = button.getBoundingClientRect(); + width = rect.width; + height = rect.height; + context = await capture3x(button, style, SPACING); + }); + + afterAll(() => { + tearDown(); + }); + + it(`should have dominant ${JSON.stringify(suite.bodyColor).replace(/"/g, '')} color`, () => { + const component = context.getImageData3x(0, 0, width, height); + + expect(component).toResembleColor(suite.bodyColor); + }); + + it('should have caption text', () => { + const caption = context.getImageData3x(4, 4, width - 8, height - 8); + + expect(button.innerText).toBe('XMAS TREE'); + expect(caption).toResembleText('XMAS TREE', suite.textColor, suite.bodyColor); + }); + + it(`should have 4px round corners`, () => { + // shadow + const sh = {a: [0, 98]}; + + // intermediate + const im = {}; + + // body + const bd = suite.bodyColor; + + const corner = [ + [ sh, sh, sh, sh, sh, sh, sh, im, im, im, im, im], + [ sh, sh, sh, sh, sh, im, im, im, bd, bd, bd, bd], + [ sh, sh, sh, sh, im, im, bd, bd, bd, bd, bd, bd], + [ sh, sh, sh, im, im, bd, bd, bd, bd, bd, bd, bd], + [ sh, sh, im, im, bd, bd, bd, bd, bd, bd, bd, bd], + [ sh, im, im, bd, bd, bd, bd, bd, bd, bd, bd, bd], + [ sh, im, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd], + [ im, im, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd], + [ im, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd], + [ im, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd], + [ im, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd], + [ im, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd] + ]; + + const topLeft = context.getImageData3x(0, 0, 4, 4); + const topRight = context.getImageData3x(width - 4, 0, 4, 4); + const bottomRight = context.getImageData3x(width - 4, height - 4, 4, 4); + const bottomLeft = context.getImageData3x(0, height - 4, 4, 4); + + expect(topLeft).toResembleShape(corner, 0); + expect(topRight).toResembleShape(corner, 90); + expect(bottomRight).toResembleShape(corner, 180); + expect(bottomLeft).toResembleShape(corner, 270); + }); + + it('should have no outline', () => { + // body + const bd = suite.bodyColor; + + const edge = [ bd, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd, bd ]; + + const top = context.getImageData3x(4, 0, width - 8, 4); + const right = context.getImageData3x(width - 4, 4, 4, height - 8); + const bottom = context.getImageData3x(4, height - 4, width - 8, 4); + const left = context.getImageData3x(0, 4, 4, height - 8); + + expect(top).toResembleOblongShape(edge, 0); + expect(right).toResembleOblongShape(edge, 90); + expect(bottom).toResembleOblongShape(edge, 180); + expect(left).toResembleOblongShape(edge, 270); + }); + + it('should have no shadow', () => { + const topShadow = context.getImageData3x(-SPACING, -SPACING, width + SPACING, SPACING); + const rightShadow = context.getImageData3x(width, -SPACING, SPACING, height + SPACING); + const bottomShadow = context.getImageData3x(0, height, width + SPACING, SPACING); + const leftShadow = context.getImageData3x(-SPACING, 0, SPACING, height + SPACING); + + expect(topShadow).toResembleOblongShape(noShadow, 0); + expect(rightShadow).toResembleOblongShape(noShadow, 90); + expect(bottomShadow).toResembleOblongShape(noShadow, 180); + expect(leftShadow).toResembleOblongShape(noShadow, 270); + }); + + }); + + }); + + describe('in normal state', () => { + + beforeAll(() => { + setUp('src/components/buttons/unelevated/button-unelevated'); + }); + + afterAll(() => { + tearDown(); + }); + + it('should have a height of 36px', () => { + const { height } = document.querySelector('#normal').getBoundingClientRect(); + + expect(height).toBe(36); + }); + + it('should have a minimum width of 64px', () => { + const { width } = document.querySelector('#min').getBoundingClientRect(); + + expect(width).toBe(64); + }); + + it('should have variable-width', () => { + const { width } = document.querySelector('#sized').getBoundingClientRect(); + + expect(width).toBe(120); + }); + + }); + +}); diff --git a/src/components/components.css b/src/components/components.css index fe6605f..488f09f 100644 --- a/src/components/components.css +++ b/src/components/components.css @@ -1,6 +1,9 @@ /* Button Contained */ -@import "./buttons/contained/button-contained.css"; +@import "buttons/contained/button-contained.css"; + +/* Button Unelevated */ +@import "buttons/unelevated/button-unelevated.css"; /* Button Outlined */ @import "./buttons/outlined/button-outlined.css";