diff --git a/dist/shoelace.css b/dist/shoelace.css index 4ff588f9..ee5193d3 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -8,7 +8,7 @@ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none} -/*! Variables */:root{--font-sans-serif:sans-serif;--font-serif:serif;--font-system:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-monospace:Menlo,Consolas,"DejaVu Sans Mono",monospace;--color-primary:tomato;--color-white:#fff;--color-navy:#001f3f;--color-blue:#0074d9;--color-aqua:#7fdbff;--color-teal:#39cccc;--color-olive:#3d9970;--color-green:#2ecc40;--color-lime:#01ff70;--color-yellow:#ffdc00;--color-orange:#ff851b;--color-red:#ff4136;--color-maroon:#85144b;--color-fuchsia:#f012be;--color-purple:#b10dc9;--color-black:#111;--color-gray:#aaa;--color-silver:#ddd;--state-success:var(--color-green);--state-info:var(--color-aqua);--state-warning:var(--color-orange);--state-danger:var(--color-red);--state-inverse:var(--color-black);--component-bg-color:#f2f2f2;--component-border-color:#ddd;--component-border-radius:.25rem;--component-border-width:1px;--component-spacing:1rem;--component-spacing-big:2rem;--component-spacing-small:.5rem;--body-bg-color:var(--color-white);--body-color:var(--color-black);--font-family:var(--font-system);--font-size:1rem;--font-size-big:1.25rem;--font-size-small:.875rem;--font-weight-light:300;--font-weight:400;--font-weight-bold:700;--line-height:1.5;--text-muted:var(--color-gray);--code-font-size:90%;--code-color:var(--color-black);--code-border-radius:var(--component-border-radius);--code-bg-color:var(--component-bg-color);--code-spacing-x:calc(var(--font-size) * .4);--code-spacing-y:calc(var(--font-size) * .2);--headings-font-family:var(--font-system);--headings-font-weight:var(--font-weight-light);--headings-line-height:1.1;--headings-margin-bottom:.5rem;--headings-color:inherit;--headings-font-size-h1:2.5rem;--headings-font-size-h2:2rem;--headings-font-size-h3:1.75rem;--headings-font-size-h4:1.5rem;--headings-font-size-h5:1.25rem;--headings-font-size-h6:1rem;--hr-border-width:1px;--hr-border-color:var(--component-border-color);--hr-spacing:var(--component-spacing-big);--kbd-font-size:90%;--kbd-color:var(--color-white);--kbd-border-radius:var(--component-border-radius);--kbd-bg-color:var(--color-black);--kbd-spacing-x:calc(var(--font-size) * .4);--kbd-spacing-y:calc(var(--font-size) * .2);--link-color:var(--color-primary);--link-text-decoration:none;--link-color-hover:var(--link-color);--link-text-decoration-hover:underline;--mark-color:inherit;--mark-bg-color:var(--color-yellow);--mark-spacing-x:calc(var(--font-size) * .4);--mark-spacing-y:calc(var(--font-size) * .2);--placeholder-color:var(--text-muted);--pre-color:var(--code-color);--pre-border-radius:var(--component-border-radius);--pre-bg-color:var(--code-bg-color);--pre-max-height:none;--selection-color:var(--color-white);--selection-bg-color:var(--color-primary);--alert-color:var(--color-white);--alert-border-radius:var(--component-border-radius);--alert-bg-color-primary:var(--color-primary);--alert-bg-color-success:var(--state-success);--alert-bg-color-info:var(--state-info);--alert-bg-color-warning:var(--state-warning);--alert-bg-color-danger:var(--state-danger);--alert-bg-color-inverse:var(--state-inverse);--alert-spacing-x:var(--component-spacing);--alert-spacing-y:var(--component-spacing);--badge-font-size:.8em;--badge-font-weight:var(--font-weight);--badge-color:var(--color-white);--badge-border-radius:1em;--badge-bg-color-primary:var(--color-primary);--badge-bg-color-success:var(--state-success);--badge-bg-color-info:var(--state-info);--badge-bg-color-warning:var(--state-warning);--badge-bg-color-danger:var(--state-danger);--badge-bg-color-inverse:var(--state-inverse);--badge-spacing-x:.6em;--badge-spacing-y:.2em;--button-font-family:inherit;--button-font-weight:inherit;--button-font-size:var(--font-size);--button-color:var(--color-white);--button-border-radius:var(--component-border-radius);--button-box-shadow:inset 0 2px 0 hsla(0,0%,100%,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-hover:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-active:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 2px 0 rgba(0,0,0,.1);--button-bg-color-primary:var(--color-primary);--button-bg-color-success:var(--state-success);--button-bg-color-info:var(--state-info);--button-bg-color-warning:var(--state-warning);--button-bg-color-danger:var(--state-danger);--button-bg-color-inverse:var(--state-inverse);--dropdown-min-width:10rem;--dropdown-max-width:25rem;--dropdown-max-height:none;--dropdown-offset-x:0;--dropdown-offset-y:1px;--dropdown-border-color:var(--component-border-color);--dropdown-border-radius:var(--component-border-radius);--dropdown-border-width:var(--component-border-width);--dropdown-color:var(--body-color);--dropdown-color-hover:var(--color-white);--dropdown-bg-color:var(--color-white);--dropdown-bg-color-hover:var(--color-primary);--dropdown-box-shadow:0 1px 0 rgba(0,0,0,.05);--dropdown-divider-border-color:var(--component-border-color);--dropdown-divider-border-width:var(--component-border-width);--dropdown-spacing-x:var(--component-spacing);--dropdown-spacing-y:calc(var(--dropdown-spacing-x) / 4);--dropdown-z-index:100;--fieldset-border-color:var(--component-border-color);--fieldset-border-width:var(--component-border-width);--fieldset-border-radius:var(--component-border-radius);--fieldset-spacing-x:var(--component-spacing);--fieldset-spacing-y:var(--component-spacing);--input-font-family:inherit;--input-font-size:var(--font-size);--input-font-size-small:.8rem;--input-font-size-big:1.2rem;--input-font-weight:inherit;--input-height:2rem;--input-height-big:2.75rem;--input-height-small:1.25rem;--input-color:var(--body-color);--input-border-color:var(--component-border-color);--input-border-color-focus:var(--color-primary);--input-border-width:1px;--input-border-radius:var(--component-border-radius);--input-bg-color:var(--color-white);--input-box-shadow:inset 0 1px 0 rgba(0,0,0,.05);--input-readonly-bg-color:var(--component-bg-color);--input-range-track-color:var(--component-bg-color);--input-range-track-box-shadow:inset 0 1px 0 rgba(0,0,0,.05);--input-range-thumb-color:var(--color-primary);--input-range-thumb-height:2rem;--input-invalid-color:var(--state-danger);--input-invalid-border-color:var(--state-danger);--input-valid-color:var(--state-success);--input-valid-border-color:var(--state-success);--loader-bg-color:var(--component-bg-color);--loader-border-color:var(--color-primary);--loader-border-width:.2rem;--loader-border-width-small:calc(var(--loader-border-width) / 2);--loader-border-width-big:calc(var(--loader-border-width) * 2);--loader-size:2rem;--loader-size-small:calc(var(--loader-size) / 2);--loader-size-big:calc(var(--loader-size) * 2);--loader-speed:750ms;--loader-spacing-x:var(--component-spacing-small);--loader-spacing-y:0;--progress-font-size:var(--input-font-size);--progress-font-size-small:var(--input-font-size-small);--progress-font-size-big:var(--input-font-size-big);--progress-height:var(--input-height);--progress-height-small:var(--input-height-small);--progress-height-big:var(--input-height-big);--progress-color:var(--color-white);--progress-bg-color:var(--component-bg-color);--progress-bar-bg-color:var(--color-primary);--progress-border-radius:var(--component-border-radius);--progress-speed-change:.2s;--progress-speed-indeterminate:1.5s;--spacing-small:var(--component-spacing);--spacing-medium:calc(var(--component-spacing) * 2);--spacing-big:calc(var(--component-spacing) * 4);--switch-font-size:var(--input-font-size);--switch-font-size-small:var(--input-font-size-small);--switch-font-size-big:var(--input-font-size-big);--switch-bg-color:var(--component-border-color);--switch-bg-color-checked:var(--color-primary);--switch-border-radius:var(--switch-height);--switch-height:var(--input-height);--switch-height-small:var(--input-height-small);--switch-height-big:var(--input-height-big);--switch-thumb-bg-color:#fff;--switch-thumb-border-radius:50%;--switch-thumb-spacing:2px;--switch-speed:.2s;--tab-bg-color:var(--body-bg-color);--tab-bg-color-hover:var(--body-bg-color);--tab-bg-color-active:var(--link-color);--tab-bg-color-disabled:var(--body-bg-color);--tab-border-radius:var(--component-border-radius);--tab-color:var(--link-color);--tab-color-hover:var(--link-color-hover);--tab-color-active:var(--color-white);--tab-color-disabled:var(--text-muted);--tab-spacing-x:var(--component-spacing);--tab-spacing-y:calc(var(--component-spacing) / 2);--tab-pane-border-color:var(--component-border-color);--tab-pane-border-radius:var(--component-border-radius);--tab-pane-border-width:var(--component-border-width);--tab-pane-spacing-x:var(--component-spacing);--tab-pane-spacing-y:var(--component-spacing);--table-border-color:var(--component-border-color);--table-border-width:var(--component-border-width);--table-header-bg-color:transparent;--table-stripe-bg-color:var(--component-bg-color);--table-hover-color:var(--color-white);--table-hover-bg-color:var(--color-primary);--table-spacing-x:calc(var(--component-spacing-small) * 1.5);--table-spacing-y:var(--component-spacing-small)} +/*! Variables */:root{--font-sans-serif:sans-serif;--font-serif:serif;--font-system:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-monospace:Menlo,Consolas,"DejaVu Sans Mono",monospace;--color-primary:tomato;--color-white:#fff;--color-navy:#001f3f;--color-blue:#0074d9;--color-aqua:#7fdbff;--color-teal:#39cccc;--color-olive:#3d9970;--color-green:#2ecc40;--color-lime:#01ff70;--color-yellow:#ffdc00;--color-orange:#ff851b;--color-red:#ff4136;--color-maroon:#85144b;--color-fuchsia:#f012be;--color-purple:#b10dc9;--color-black:#111;--color-gray:#aaa;--color-silver:#ddd;--state-success:var(--color-green);--state-info:var(--color-aqua);--state-warning:var(--color-orange);--state-danger:var(--color-red);--state-inverse:var(--color-black);--component-bg-color:#f2f2f2;--component-border-color:#ddd;--component-border-radius:.25rem;--component-border-width:1px;--component-spacing:1rem;--component-spacing-big:2rem;--component-spacing-small:.5rem;--body-bg-color:var(--color-white);--body-color:var(--color-black);--font-family:var(--font-system);--font-size:1rem;--font-size-big:1.25rem;--font-size-small:.875rem;--font-weight-light:300;--font-weight:400;--font-weight-bold:700;--line-height:1.5;--text-muted:var(--color-gray);--code-font-size:90%;--code-color:var(--color-black);--code-border-radius:var(--component-border-radius);--code-bg-color:var(--component-bg-color);--code-spacing-x:calc(var(--font-size) * .4);--code-spacing-y:calc(var(--font-size) * .2);--headings-font-family:var(--font-system);--headings-font-weight:var(--font-weight-light);--headings-line-height:1.1;--headings-margin-bottom:.5rem;--headings-color:inherit;--headings-font-size-h1:2.5rem;--headings-font-size-h2:2rem;--headings-font-size-h3:1.75rem;--headings-font-size-h4:1.5rem;--headings-font-size-h5:1.25rem;--headings-font-size-h6:1rem;--hr-border-width:1px;--hr-border-color:var(--component-border-color);--hr-spacing:var(--component-spacing-big);--kbd-font-size:90%;--kbd-color:var(--color-white);--kbd-border-radius:var(--component-border-radius);--kbd-bg-color:var(--color-black);--kbd-spacing-x:calc(var(--font-size) * .4);--kbd-spacing-y:calc(var(--font-size) * .2);--link-color:var(--color-primary);--link-text-decoration:none;--link-color-hover:var(--link-color);--link-text-decoration-hover:underline;--mark-color:inherit;--mark-bg-color:var(--color-yellow);--mark-spacing-x:calc(var(--font-size) * .4);--mark-spacing-y:calc(var(--font-size) * .2);--placeholder-color:var(--text-muted);--pre-color:var(--code-color);--pre-border-radius:var(--component-border-radius);--pre-bg-color:var(--code-bg-color);--pre-max-height:none;--selection-color:var(--color-white);--selection-bg-color:var(--color-primary);--alert-color:var(--color-white);--alert-border-radius:var(--component-border-radius);--alert-bg-color-primary:var(--color-primary);--alert-bg-color-success:var(--state-success);--alert-bg-color-info:var(--state-info);--alert-bg-color-warning:var(--state-warning);--alert-bg-color-danger:var(--state-danger);--alert-bg-color-inverse:var(--state-inverse);--alert-spacing-x:var(--component-spacing);--alert-spacing-y:var(--component-spacing);--badge-font-size:.8em;--badge-font-weight:var(--font-weight);--badge-color:var(--color-white);--badge-border-radius:1em;--badge-bg-color-primary:var(--color-primary);--badge-bg-color-success:var(--state-success);--badge-bg-color-info:var(--state-info);--badge-bg-color-warning:var(--state-warning);--badge-bg-color-danger:var(--state-danger);--badge-bg-color-inverse:var(--state-inverse);--badge-spacing-x:.6em;--badge-spacing-y:.2em;--button-font-family:var(--input-font-family);--button-font-weight:var(--input-font-weight);--button-font-size:var(--input-font-size);--button-font-size-small:var(--input-font-size-small);--button-font-size-big:var(--input-font-size-big);--button-height:var(--input-height);--button-height-small:var(--input-height-small);--button-height-big:var(--input-height-big);--button-color:var(--color-white);--button-border-radius:var(--component-border-radius);--button-box-shadow:inset 0 2px 0 hsla(0,0%,100%,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-hover:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 -2px 0 rgba(0,0,0,.1);--button-box-shadow-active:inset 0 2px 5rem rgba(0,0,0,.1),inset 0 2px 0 rgba(0,0,0,.1);--button-bg-color-primary:var(--color-primary);--button-bg-color-success:var(--state-success);--button-bg-color-info:var(--state-info);--button-bg-color-warning:var(--state-warning);--button-bg-color-danger:var(--state-danger);--button-bg-color-inverse:var(--state-inverse);--dropdown-min-width:10rem;--dropdown-max-width:25rem;--dropdown-max-height:none;--dropdown-offset-x:0;--dropdown-offset-y:1px;--dropdown-border-color:var(--component-border-color);--dropdown-border-radius:var(--component-border-radius);--dropdown-border-width:var(--component-border-width);--dropdown-color:var(--body-color);--dropdown-color-hover:var(--color-white);--dropdown-bg-color:var(--color-white);--dropdown-bg-color-hover:var(--color-primary);--dropdown-box-shadow:0 1px 0 rgba(0,0,0,.05);--dropdown-divider-border-color:var(--component-border-color);--dropdown-divider-border-width:var(--component-border-width);--dropdown-spacing-x:var(--component-spacing);--dropdown-spacing-y:calc(var(--dropdown-spacing-x) / 4);--dropdown-z-index:100;--fieldset-border-color:var(--component-border-color);--fieldset-border-width:var(--component-border-width);--fieldset-border-radius:var(--component-border-radius);--fieldset-spacing-x:var(--component-spacing);--fieldset-spacing-y:var(--component-spacing);--input-font-family:inherit;--input-font-size:var(--font-size);--input-font-size-small:.8rem;--input-font-size-big:1.2rem;--input-font-weight:inherit;--input-height:2rem;--input-height-big:2.75rem;--input-height-small:1.25rem;--input-color:var(--body-color);--input-border-color:var(--component-border-color);--input-border-color-focus:var(--color-primary);--input-border-width:1px;--input-border-radius:var(--component-border-radius);--input-bg-color:var(--color-white);--input-box-shadow:inset 0 1px 0 rgba(0,0,0,.05);--input-readonly-bg-color:var(--component-bg-color);--input-range-track-color:var(--component-bg-color);--input-range-track-box-shadow:inset 0 1px 0 rgba(0,0,0,.05);--input-range-thumb-color:var(--color-primary);--input-range-thumb-height:2rem;--input-invalid-color:var(--state-danger);--input-invalid-border-color:var(--state-danger);--input-valid-color:var(--state-success);--input-valid-border-color:var(--state-success);--loader-bg-color:var(--component-bg-color);--loader-border-color:var(--color-primary);--loader-border-width:.2rem;--loader-border-width-small:calc(var(--loader-border-width) / 2);--loader-border-width-big:calc(var(--loader-border-width) * 2);--loader-size:2rem;--loader-size-small:calc(var(--loader-size) / 2);--loader-size-big:calc(var(--loader-size) * 2);--loader-speed:750ms;--loader-spacing-x:var(--component-spacing-small);--loader-spacing-y:0;--progress-font-size:var(--input-font-size);--progress-font-size-small:var(--input-font-size-small);--progress-font-size-big:var(--input-font-size-big);--progress-height:var(--input-height);--progress-height-small:var(--input-height-small);--progress-height-big:var(--input-height-big);--progress-color:var(--color-white);--progress-bg-color:var(--component-bg-color);--progress-bar-bg-color:var(--color-primary);--progress-border-radius:var(--component-border-radius);--progress-speed-change:.2s;--progress-speed-indeterminate:1.5s;--spacing-small:var(--component-spacing);--spacing-medium:calc(var(--component-spacing) * 2);--spacing-big:calc(var(--component-spacing) * 4);--switch-font-size:var(--input-font-size);--switch-font-size-small:var(--input-font-size-small);--switch-font-size-big:var(--input-font-size-big);--switch-bg-color:var(--component-border-color);--switch-bg-color-checked:var(--color-primary);--switch-border-radius:var(--switch-height);--switch-height:var(--input-height);--switch-height-small:var(--input-height-small);--switch-height-big:var(--input-height-big);--switch-thumb-bg-color:#fff;--switch-thumb-border-radius:50%;--switch-thumb-spacing:2px;--switch-speed:.2s;--tab-bg-color:var(--body-bg-color);--tab-bg-color-hover:var(--body-bg-color);--tab-bg-color-active:var(--link-color);--tab-bg-color-disabled:var(--body-bg-color);--tab-border-radius:var(--component-border-radius);--tab-color:var(--link-color);--tab-color-hover:var(--link-color-hover);--tab-color-active:var(--color-white);--tab-color-disabled:var(--text-muted);--tab-spacing-x:var(--component-spacing);--tab-spacing-y:calc(var(--component-spacing) / 2);--tab-pane-border-color:var(--component-border-color);--tab-pane-border-radius:var(--component-border-radius);--tab-pane-border-width:var(--component-border-width);--tab-pane-spacing-x:var(--component-spacing);--tab-pane-spacing-y:var(--component-spacing);--table-border-color:var(--component-border-color);--table-border-width:var(--component-border-width);--table-header-bg-color:transparent;--table-stripe-bg-color:var(--component-bg-color);--table-hover-color:var(--color-white);--table-hover-bg-color:var(--color-primary);--table-spacing-x:calc(var(--component-spacing-small) * 1.5);--table-spacing-y:var(--component-spacing-small)} /*! Content */html{-webkit-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}body{background:var(--body-bg-color);font-family:var(--font-family);font-weight:var(--font-weight);font-size:var(--font-size);color:var(--body-color);line-height:var(--line-height)}a{color:var(--link-color);-webkit-text-decoration:var(--link-text-decoration);text-decoration:var(--link-text-decoration)}a:hover{color:var(--link-color-hover);-webkit-text-decoration:var(--link-text-decoration-hover);text-decoration:var(--link-text-decoration-hover)}abbr[title]{text-decoration:none;border-bottom:2px dashed currentcolor}b,strong{font-weight:var(--font-weight-bold)}blockquote{font-size:var(--font-size-big);border-left:solid .4rem var(--component-border-color);padding:.5rem .5rem .5rem 1rem;margin-bottom:1rem;margin-left:0}blockquote :last-child{margin-bottom:0}code{font-family:var(--font-monospace);font-size:var(--code-font-size);color:var(--code-color);background-color:var(--code-bg-color);border-radius:var(--code-border-radius);padding:var(--code-spacing-y) var(--code-spacing-x)}del{color:var(--color-red)}figure{margin-top:0;margin-bottom:1rem}h1,h2,h3,h4,h5,h6{font-family:var(--headings-font-family);font-weight:var(--headings-font-weight);line-height:var(--headings-line-height);color:var(--headings-color);margin-top:0;margin-bottom:var(--headings-margin-bottom)}h1{font-size:var(--headings-font-size-h1)}h2{font-size:var(--headings-font-size-h2)}h3{font-size:var(--headings-font-size-h3)}h4{font-size:var(--headings-font-size-h4)}h5{font-size:var(--headings-font-size-h5)}h6{font-size:var(--headings-font-size-h6)}hr{border:none;border-top:solid var(--hr-border-width) var(--hr-border-color);margin:var(--hr-spacing) 0}img{height:auto;max-width:100%;vertical-align:middle}ins{color:var(--color-green)}kbd{font-family:var(--font-monospace);font-size:var(--kbd-font-size);color:var(--kbd-color);background-color:var(--kbd-bg-color);border-radius:var(--kbd-border-radius);padding:var(--kbd-spacing-y) var(--kbd-spacing-x)}mark{color:var(--mark-color);background-color:var(--mark-bg-color);padding:var(--mark-spacing-y) var(--mark-spacing-x)}p,pre{margin-top:0;margin-bottom:1rem}pre{max-height:var(--pre-max-height);overflow-y:auto;font-family:var(--font-monospace);color:var(--pre-color);background-color:var(--pre-bg-color);border-radius:var(--pre-border-radius);padding:1rem}small{font-size:var(--font-size-small)}dl{margin-bottom:1rem}dt{font-weight:var(--font-weight-bold)}dd{margin-left:0}dd,ol,ul{margin-bottom:1rem}ol,ul{line-height:var(--line-height);margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}::-webkit-input-placeholder{color:var(--placeholder-color)}:-ms-input-placeholder{color:var(--placeholder-color)}::placeholder{color:var(--placeholder-color)}::-moz-selection{background-color:var(--selection-bg-color);color:var(--selection-color);text-shadow:none!important}::selection{background-color:var(--selection-bg-color);color:var(--selection-color);text-shadow:none!important} @@ -16,7 +16,7 @@ /*! Badges */.badge{font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);color:var(--badge-color);background-color:var(--badge-bg-color-primary);border-radius:var(--badge-border-radius);padding:var(--badge-spacing-y) var(--badge-spacing-x);vertical-align:baseline;display:inline-block}.badge:empty{display:none}.badge-success{background-color:var(--badge-bg-color-success)}.badge-info{background-color:var(--badge-bg-color-info)}.badge-warning{background-color:var(--badge-bg-color-warning)}.badge-danger{background-color:var(--badge-bg-color-danger)}.badge-inverse{background-color:var(--badge-bg-color-inverse)} -/*! Buttons */.button,button{font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);text-align:center;text-decoration:none;color:var(--button-color);background-color:var(--button-bg-color-primary);border-radius:var(--button-border-radius);border:none;height:var(--input-height);line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;padding:calc(var(--component-spacing) * .5) calc(var(--component-spacing) * .75);-webkit-box-shadow:var(--button-box-shadow);box-shadow:var(--button-box-shadow);cursor:pointer;display:inline-block;-webkit-transition:box-shadow .1s,background-color .1s,color .1s;transition:box-shadow .1s,background-color .1s,color .1s}.button-small{font-size:calc(var(--button-font-size) * .8);height:var(--input-height-small);padding:calc(var(--component-spacing) * .25) calc(var(--component-spacing) * .5)}.button-big{font-size:calc(var(--button-font-size) * 1.2);height:var(--input-height-big);padding:calc(var(--component-spacing) * .75) calc(var(--component-spacing) * 1)}.button-block{width:100%!important;display:block}.button:hover,button:hover{color:var(--button-color);text-decoration:none}.button:hover:not(.disabled),button:hover:not(:disabled){-webkit-box-shadow:var(--button-box-shadow-hover);box-shadow:var(--button-box-shadow-hover)}.button.active:not(.disabled),button.active:not(:disabled),button:active:not(:disabled){color:var(--button-color);-webkit-box-shadow:var(--button-box-shadow-active);box-shadow:var(--button-box-shadow-active)}.button.disabled,button.disabled,button:disabled{opacity:.5;cursor:not-allowed}.button-success{background-color:var(--button-bg-color-success)}.button-info{background-color:var(--button-bg-color-info)}.button-warning{background-color:var(--button-bg-color-warning)}.button-danger{background-color:var(--button-bg-color-danger)}.button-inverse{background-color:var(--button-bg-color-inverse)}.button-link{color:var(--link-color);-webkit-text-decoration:var(--link-text-decoration);text-decoration:var(--link-text-decoration)}.button-link,.button-link:hover:not(:disabled){background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button-link:hover:not(:disabled){color:var(--link-color-hover);-webkit-text-decoration:var(--link-text-decoration-hover);text-decoration:var(--link-text-decoration-hover)}label.button input[type=file]{display:none} +/*! Buttons */.button,button{font-family:var(--button-font-family);font-size:var(--button-font-size);font-weight:var(--button-font-weight);text-align:center;text-decoration:none;color:var(--button-color);background-color:var(--button-bg-color-primary);border-radius:var(--button-border-radius);border:none;height:var(--button-height);line-height:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;padding:calc(var(--component-spacing) * .5) calc(var(--component-spacing) * .75);-webkit-box-shadow:var(--button-box-shadow);box-shadow:var(--button-box-shadow);cursor:pointer;display:inline-block;-webkit-transition:box-shadow .1s,background-color .1s,color .1s;transition:box-shadow .1s,background-color .1s,color .1s}.button-small{--button-font-size:var(--button-font-size-small);--button-height:var(--button-height-small);padding:calc(var(--component-spacing) * .25) calc(var(--component-spacing) * .5)}.button-big{--button-font-size:var(--button-font-size-big);--button-height:var(--button-height-big);padding:calc(var(--component-spacing) * .75) calc(var(--component-spacing) * 1)}.button-block{width:100%!important;display:block}.button:hover,button:hover{color:var(--button-color);text-decoration:none}.button:hover:not(.disabled),button:hover:not(:disabled){-webkit-box-shadow:var(--button-box-shadow-hover);box-shadow:var(--button-box-shadow-hover)}.button.active:not(.disabled),button.active:not(:disabled),button:active:not(:disabled){color:var(--button-color);-webkit-box-shadow:var(--button-box-shadow-active);box-shadow:var(--button-box-shadow-active)}.button.disabled,button.disabled,button:disabled{opacity:.5;cursor:not-allowed}.button-success{background-color:var(--button-bg-color-success)}.button-info{background-color:var(--button-bg-color-info)}.button-warning{background-color:var(--button-bg-color-warning)}.button-danger{background-color:var(--button-bg-color-danger)}.button-inverse{background-color:var(--button-bg-color-inverse)}.button-link{color:var(--link-color);-webkit-text-decoration:var(--link-text-decoration);text-decoration:var(--link-text-decoration)}.button-link,.button-link:hover:not(:disabled){background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button-link:hover:not(:disabled){color:var(--link-color-hover);-webkit-text-decoration:var(--link-text-decoration-hover);text-decoration:var(--link-text-decoration-hover)}label.button input[type=file]{display:none} /*! Dropdowns */.dropdown{position:relative;display:inline-block}.dropdown-trigger:after{content:"▼";font-family:var(--font-system);font-size:.6em;vertical-align:middle;margin-left:.5em;display:inline-block;-webkit-transform:scaleY(.75);transform:scaleY(.75)}.dropdown-top .dropdown-trigger:after{-webkit-transform:scaleY(.75) rotate(180deg);transform:scaleY(.75) rotate(180deg)}.dropdown-menu{position:absolute;top:calc(100% + var(--dropdown-offset-y));left:var(--dropdown-offset-x);z-index:var(--dropdown-z-index);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height);background-color:var(--dropdown-bg-color);border:solid var(--dropdown-border-width) var(--dropdown-border-color);border-radius:var(--dropdown-border-radius);-webkit-box-shadow:var(--dropdown-box-shadow);box-shadow:var(--dropdown-box-shadow);display:none;padding:calc(var(--dropdown-spacing-y) / 2) 0;overflow-y:auto}.dropdown-top .dropdown-menu{top:auto;bottom:calc(100% + var(--dropdown-offset-y))}.dropdown-left .dropdown-menu{left:auto;right:var(--dropdown-offset-x)}.dropdown.active .dropdown-menu{display:block}.dropdown-menu a{position:relative;color:var(--dropdown-color);text-decoration:none;padding:var(--dropdown-spacing-y) calc(var(--dropdown-spacing-x) + .5em);display:block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis}.dropdown-menu a:hover:not(.disabled){color:var(--dropdown-color-hover);background-color:var(--dropdown-bg-color-hover)}.dropdown-menu a.disabled{cursor:not-allowed;opacity:.5}.dropdown-menu a.checked:before{position:absolute;left:calc(var(--dropdown-spacing-x) / 2 - .1em);content:"✓";font-family:var(--font-system);font-weight:600}.dropdown-menu hr{width:100%;border-top:solid var(--dropdown-divider-border-width) var(--dropdown-divider-border-color);margin:calc(var(--dropdown-spacing-y) / 2) 0} diff --git a/source/css/buttons.css b/source/css/buttons.css index 0aa721b3..06e49c08 100644 --- a/source/css/buttons.css +++ b/source/css/buttons.css @@ -11,7 +11,7 @@ button, background-color: var(--button-bg-color-primary); border-radius: var(--button-border-radius); border: none; - height: var(--input-height); + height: var(--button-height); line-height: 1; user-select: none; vertical-align: middle; @@ -24,14 +24,14 @@ button, } .button-small { - font-size: calc(var(--button-font-size) * .8); - height: var(--input-height-small); + --button-font-size: var(--button-font-size-small); + --button-height: var(--button-height-small); padding: calc(var(--component-spacing) * .25) calc(var(--component-spacing) * .5); } .button-big { - font-size: calc(var(--button-font-size) * 1.2); - height: var(--input-height-big); + --button-font-size: var(--button-font-size-big); + --button-height: var(--button-height-big); padding: calc(var(--component-spacing) * .75) calc(var(--component-spacing) * 1); } diff --git a/source/css/variables.css b/source/css/variables.css index 6357cb58..17a9b5ec 100644 --- a/source/css/variables.css +++ b/source/css/variables.css @@ -133,9 +133,14 @@ --badge-spacing-y: .2em; /* Buttons */ - --button-font-family: inherit; - --button-font-weight: inherit; - --button-font-size: var(--font-size); + --button-font-family: var(--input-font-family); + --button-font-weight: var(--input-font-weight); + --button-font-size: var(--input-font-size); + --button-font-size-small: var(--input-font-size-small); + --button-font-size-big: var(--input-font-size-big); + --button-height: var(--input-height); + --button-height-small: var(--input-height-small); + --button-height-big: var(--input-height-big); --button-color: var(--color-white); --button-border-radius: var(--component-border-radius); --button-box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);