From afa95589eb73fb4bdfcbd69dc83366a6f7e79871 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Sun, 13 Aug 2017 15:41:38 -0400 Subject: [PATCH] 1.0.0-beta14 --- dist/shoelace.css | 28 ++- dist/shoelace.js | 4 +- docs/alerts.html | 18 +- docs/attribution.html | 10 +- docs/badges.html | 72 ++++---- docs/browser-support.html | 10 +- docs/buttons.html | 113 ++++++------ docs/content.html | 14 +- docs/customizing.html | 27 +-- docs/dropdowns.html | 26 ++- docs/forms.html | 50 +++--- docs/grid-system.html | 10 +- docs/icons.html | 12 +- docs/installing.html | 14 +- docs/loaders.html | 29 ++- docs/progress-bars.html | 76 +++++++- docs/switches.html | 50 +++++- docs/tables.html | 10 +- docs/tabs.html | 10 +- docs/utilities.html | 41 ++++- index.html | 6 +- package.json | 2 +- source/css/_docs.css | 6 +- source/css/alerts.css | 76 ++++---- source/css/badges.css | 79 ++++---- source/css/buttons.css | 101 ++++++----- source/css/content.css | 62 +++++++ source/css/dropdowns.css | 21 +++ source/css/forms.css | 35 +++- source/css/loaders.css | 60 ++++++- source/css/progress-bars.css | 51 ++++++ source/css/shoelace.css | 52 +++++- source/css/switches.css | 53 ++++++ source/css/tables.css | 12 +- source/css/tabs.css | 19 ++ source/css/utilities.css | 85 +++++---- source/css/variables.css | 338 ----------------------------------- source/docs/alerts.md | 12 +- source/docs/badges.md | 65 ++++--- source/docs/buttons.md | 123 +++++++------ source/docs/content.md | 4 +- source/docs/customizing.md | 19 +- source/docs/dropdowns.md | 18 ++ source/docs/forms.md | 40 ++--- source/docs/icons.md | 2 +- source/docs/loaders.md | 24 +++ source/docs/progress-bars.md | 70 ++++++++ source/docs/switches.md | 50 ++++++ source/docs/utilities.md | 35 +++- source/layouts/default.html | 8 +- 50 files changed, 1300 insertions(+), 852 deletions(-) delete mode 100644 source/css/variables.css diff --git a/dist/shoelace.css b/dist/shoelace.css index e0219a85..f3c99225 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -1,5 +1,5 @@ /*! - Shoelace.css 1.0.0-beta13 + Shoelace.css 1.0.0-beta14 (c) A Beautiful Site, LLC Released under the MIT license @@ -8,28 +8,26 @@ /*! 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-secondary:#a5a5a5;--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-teal);--state-warning:var(--color-orange);--state-danger:var(--color-red);--state-light:#f2f2f2;--state-dark: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-border-radius:var(--component-border-radius);--alert-spacing-x:var(--component-spacing);--alert-spacing-y:var(--component-spacing);--alert-color:var(--color-white);--alert-bg-color:var(--color-primary);--alert-color-secondary:var(--color-white);--alert-bg-color-secondary:var(--color-secondary);--alert-color-success:var(--color-white);--alert-bg-color-success:var(--state-success);--alert-color-info:var(--color-white);--alert-bg-color-info:var(--state-info);--alert-color-warning:var(--color-white);--alert-bg-color-warning:var(--state-warning);--alert-color-danger:var(--color-white);--alert-bg-color-danger:var(--state-danger);--alert-color-light:var(--color-black);--alert-bg-color-light:var(--state-light);--alert-color-dark:var(--color-white);--alert-bg-color-dark:var(--state-dark);--badge-font-size:.8em;--badge-font-weight:var(--font-weight);--badge-border-radius:1em;--badge-box-shadow-hover:inset 0 0 0 1em rgba(0,0,0,.1);--badge-spacing-x:.6em;--badge-spacing-y:.2em;--badge-color:var(--color-white);--badge-bg-color:var(--color-primary);--badge-color-secondary:var(--color-white);--badge-bg-color-secondary:var(--color-secondary);--badge-color-success:var(--color-white);--badge-bg-color-success:var(--state-success);--badge-color-info:var(--color-white);--badge-bg-color-info:var(--state-info);--badge-color-warning:var(--color-white);--badge-bg-color-warning:var(--state-warning);--badge-color-danger:var(--color-white);--badge-bg-color-danger:var(--state-danger);--badge-color-light:var(--color-black);--badge-bg-color-light:var(--state-light);--badge-color-dark:var(--color-white);--badge-bg-color-dark:var(--state-dark);--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-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-color:var(--color-white);--button-bg-color:var(--color-primary);--button-color-secondary:var(--color-white);--button-bg-color-secondary:var(--color-secondary);--button-color-success:var(--color-white);--button-bg-color-success:var(--state-success);--button-color-info:var(--color-white);--button-bg-color-info:var(--state-info);--button-color-warning:var(--color-white);--button-bg-color-warning:var(--state-warning);--button-color-danger:var(--color-white);--button-bg-color-danger:var(--state-danger);--button-color-light:var(--color-black);--button-bg-color-light:var(--state-light);--button-color-dark:var(--color-white);--button-bg-color-dark:var(--state-dark);--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 */:root{--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;--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(--state-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(--state-secondary);--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(--state-primary)}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} -/*! 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:not(.badge,.button){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} +/*! Alerts */:root{--alert-color:var(--color-white);--alert-bg-color:var(--state-primary);--alert-padding-x:var(--component-spacing);--alert-padding-y:var(--component-spacing)}.alert{color:var(--alert-color);background-color:var(--alert-bg-color);border-radius:var(--component-border-radius);padding:var(--alert-padding-y) var(--alert-padding-x);margin-top:0;margin-bottom:1rem}.alert:empty{display:none}.alert a{color:inherit;text-decoration:underline}.alert :last-child{margin-bottom:0}.alert-secondary{background-color:var(--state-secondary)}.alert-success{background-color:var(--state-success)}.alert-info{background-color:var(--state-info)}.alert-warning{background-color:var(--state-warning)}.alert-danger{background-color:var(--state-danger)}.alert-light{color:var(--state-dark);background-color:var(--state-light)}.alert-dark{color:var(--state-light);background-color:var(--state-dark)} -/*! Alerts */.alert{color:var(--alert-color);background-color:var(--alert-bg-color);border-radius:var(--alert-border-radius);padding:var(--alert-spacing-y) var(--alert-spacing-x);margin-top:0;margin-bottom:1rem}.alert-secondary{color:var(--alert-color-secondary);background-color:var(--alert-bg-color-secondary)}.alert-success{color:var(--alert-color-success);background-color:var(--alert-bg-color-success)}.alert-info{color:var(--alert-color-info);background-color:var(--alert-bg-color-info)}.alert-warning{color:var(--alert-color-warning);background-color:var(--alert-bg-color-warning)}.alert-danger{color:var(--alert-color-danger);background-color:var(--alert-bg-color-danger)}.alert-light{color:var(--alert-color-light);background-color:var(--alert-bg-color-light)}.alert-dark{color:var(--alert-color-dark);background-color:var(--alert-bg-color-dark)}.alert:empty{display:none}.alert a{color:inherit;text-decoration:underline}.alert :last-child{margin-bottom:0} +/*! Badges */:root{--badge-font-size:.8em;--badge-color:var(--color-white);--badge-bg-color:var(--state-primary);--badge-border-radius:1em;--badge-box-shadow-hover:inset 0 0 0 1em rgba(0,0,0,.1)}.badge{font-size:var(--badge-font-size);color:var(--badge-color);background-color:var(--badge-bg-color);border-radius:var(--badge-border-radius);padding:.2em .6em;vertical-align:baseline;display:inline-block;-webkit-transition:box-shadow .1s,background-color .1s,color .1s;transition:box-shadow .1s,background-color .1s,color .1s}.badge:empty{display:none}a.badge:hover{color:var(--badge-color);text-decoration:none;-webkit-box-shadow:var(--badge-box-shadow-hover);box-shadow:var(--badge-box-shadow-hover)}.badge-secondary{background-color:var(--state-secondary)}.badge-success{background-color:var(--state-success)}.badge-info{background-color:var(--state-info)}.badge-warning{background-color:var(--state-warning)}.badge-danger{background-color:var(--state-danger)}.badge-light,a.badge-light:hover{color:var(--state-dark);background-color:var(--state-light)}.badge-dark,a.badge-dark:hover{color:var(--state-light);background-color:var(--state-dark)} -/*! Badges */.badge{font-size:var(--badge-font-size);font-weight:var(--badge-font-weight);color:var(--badge-color);background-color:var(--badge-bg-color);border-radius:var(--badge-border-radius);padding:var(--badge-spacing-y) var(--badge-spacing-x);vertical-align:baseline;display:inline-block;-webkit-transition:box-shadow .1s,background-color .1s,color .1s;transition:box-shadow .1s,background-color .1s,color .1s}.badge-secondary{color:var(--badge-color-secondary);background-color:var(--badge-bg-color-secondary)}.badge-success{color:var(--badge-color-success);background-color:var(--badge-bg-color-success)}.badge-info{color:var(--badge-color-info);background-color:var(--badge-bg-color-info)}.badge-warning{color:var(--badge-color-warning);background-color:var(--badge-bg-color-warning)}.badge-danger{color:var(--badge-color-danger);background-color:var(--badge-bg-color-danger)}.badge-light{color:var(--badge-color-light);background-color:var(--badge-bg-color-light)}.badge-dark{color:var(--badge-color-dark);background-color:var(--badge-bg-color-dark)}.badge:empty{display:none}a.badge:hover{text-decoration:none;-webkit-box-shadow:var(--badge-box-shadow-hover);box-shadow:var(--badge-box-shadow-hover)} +/*! Buttons */:root{--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-color:var(--color-white);--button-bg-color:var(--state-primary);--button-height:var(--input-height);--button-height-small:var(--input-height-small);--button-height-big:var(--input-height-big);--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,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);border-radius:var(--button-border-radius);border:none;height:var(--button-height);line-height:var(--button-height);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;padding:0 .75em;-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:var(--button-font-size-small);height:var(--button-height-small);line-height:var(--button-height-small)}.button-big{font-size:var(--button-font-size-big);height:var(--button-height-big);line-height:var(--button-height-big)}.button-block{width:100%!important;display:block}.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)}a.button:hover,button:hover{color:var(--button-color);text-decoration:none}button:hover:not(:disabled){color:var(--button-color);-webkit-box-shadow:var(--button-box-shadow-hover);box-shadow:var(--button-box-shadow-hover)}a.button.active:not(.button-link),button.active:not(.button-link):not(:disabled),button:active:not(.button-link):not(:disabled){-webkit-box-shadow:var(--button-box-shadow-active);box-shadow:var(--button-box-shadow-active)}button:disabled{opacity:.5;cursor:not-allowed}label.button input[type=file]{display:none}.button-secondary{background-color:var(--state-secondary)}.button-success{background-color:var(--state-success)}.button-info{background-color:var(--state-info)}.button-warning{background-color:var(--state-warning)}.button-danger{background-color:var(--state-danger)}.button-light,a.button-light:hover,button.button-light:hover:not(:disabled){color:var(--state-dark);background-color:var(--state-light)}.button-dark,a.button-dark,button.button-dark:hover:not(:disabled){color:var(--state-light);background-color:var(--state-dark)} -/*! 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);border-radius:var(--button-border-radius);border:none;height:var(--button-height);line-height:var(--button-height);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;padding:0 .75em;-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:var(--button-font-size-small);height:var(--button-height-small);line-height:var(--button-height-small)}.button-big{font-size:var(--button-font-size-big);height:var(--button-height-big);line-height:var(--button-height-big)}.button-block{width:100%!important;display:block}.button-secondary{color:var(--button-color-secondary);background-color:var(--button-bg-color-secondary)}.button-success{color:var(--button-color-success);background-color:var(--button-bg-color-success)}.button-info{color:var(--button-color-info);background-color:var(--button-bg-color-info)}.button-warning{color:var(--button-color-warning);background-color:var(--button-bg-color-warning)}.button-danger{color:var(--button-color-danger);background-color:var(--button-bg-color-danger)}.button-light{color:var(--button-color-light);background-color:var(--button-bg-color-light)}.button-dark{color:var(--button-color-dark);background-color:var(--button-bg-color-dark)}.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):not(.disabled){background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.button-link:hover:not(:disabled):not(.disabled){color:var(--link-color-hover);-webkit-text-decoration:var(--link-text-decoration-hover);text-decoration:var(--link-text-decoration-hover)}.button:hover,button:hover{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(.button-link):not(.disabled),button.active:not(.button-link):not(:disabled),button:active:not(.button-link):not(:disabled){-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}label.button input[type=file]{display:none} +/*! Dropdowns */:root{--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(--state-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:1rem;--dropdown-spacing-y:.25rem;--dropdown-z-index:100}.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);margin-top:-.2em}.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} -/*! 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} +/*! Forms */:root{--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(--state-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(--state-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)}fieldset{border:solid var(--fieldset-border-width) var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--component-spacing) calc(var(--component-spacing) * 1.5);margin-bottom:1rem}fieldset legend{font-weight:var(--font-weight-bold);padding:0 .25rem}label{display:inline-block;margin-bottom:.25rem}label+label{margin-left:1rem}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:100%;font-family:var(--input-font-family);font-size:var(--input-font-size);font-weight:var(--input-font-weight);color:var(--input-color);border:solid var(--input-border-width) var(--input-border-color);border-radius:var(--input-border-radius);-webkit-box-shadow:var(--input-box-shadow);box-shadow:var(--input-box-shadow);background-color:var(--input-bg-color);height:var(--input-height);line-height:var(--input-height);vertical-align:middle;display:block;padding-left:calc(var(--component-spacing) * .5);padding-right:calc(var(--component-spacing) * .5);margin:0;-webkit-transition:border-color .1s,background-color .1s,color .1s;transition:border-color .1s,background-color .1s,color .1s;white-space:nowrap;-moz-appearance:none;-webkit-appearance:none}input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{outline:none;border-color:var(--input-border-color-focus)}select{position:relative;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='41' height='26' viewBox='0 0 41 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 5.382l19.983 19.983L40.14 5.208 34.932 0 19.869 15.062 4.84.032z' fill-rule='evenodd'/%3E%3C/svg%3E");background-position:right .4rem center;background-repeat:no-repeat;background-size:.75rem;padding-top:0;padding-bottom:0;padding-right:calc(var(--component-spacing) * .5 + 1rem)}textarea{height:auto;resize:vertical;line-height:var(--line-height);white-space:normal}input[type=color]{padding:calc(var(--component-spacing) * .5)}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--input-border-radius)}input[type=checkbox],input[type=radio]{padding:0}input[disabled]{opacity:.5;cursor:not-allowed}input[readonly]{background-color:var(--input-readonly-bg-color)}input[type=color].input-small,input[type=date].input-small,input[type=datetime-local].input-small,input[type=email].input-small,input[type=month].input-small,input[type=number].input-small,input[type=password].input-small,input[type=search].input-small,input[type=tel].input-small,input[type=text].input-small,input[type=time].input-small,input[type=url].input-small,input[type=week].input-small,select.input-small{font-size:var(--input-font-size-small);height:var(--input-height-small);line-height:var(--input-height-small)}textarea.input-small{font-size:var(--input-font-size-small)}input[type=color].input-big,input[type=date].input-big,input[type=datetime-local].input-big,input[type=email].input-big,input[type=month].input-big,input[type=number].input-big,input[type=password].input-big,input[type=search].input-big,input[type=tel].input-big,input[type=text].input-big,input[type=time].input-big,input[type=url].input-big,input[type=week].input-big,select.input-big{font-size:var(--input-font-size-big);height:var(--input-height-big);line-height:var(--input-height-big)}textarea.input-big{font-size:var(--input-font-size-big)}input[type=range]{-webkit-appearance:none;width:100%;margin:1rem 0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:.5rem;cursor:pointer;background:var(--input-range-track-color);border-radius:var(--input-border-radius);border:none;-webkit-box-shadow:var(--input-range-track-box-shadow);box-shadow:var(--input-range-track-box-shadow)}input[type=range]::-webkit-slider-thumb{border:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--input-range-thumb-color);cursor:pointer;-webkit-appearance:none;margin-top:-.5rem}input[type=range]:focus::-webkit-slider-runnable-track{background:var(--input-range-track-color)}input[type=range]::-moz-range-track{width:100%;height:.5rem;cursor:pointer;background:var(--input-range-track-color);border-radius:var(--input-border-radius);border:none;box-shadow:var(--input-range-track-box-shadow)}input[type=range]::-moz-range-thumb{border:none;height:1.5rem;width:1.5rem;border-radius:50%;background:var(--input-range-thumb-color);cursor:pointer}input[type=range]::-ms-track{width:100%;height:.5rem;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower{background:#2f6ea5;border:none;border-radius:var(--input-border-radius)}input[type=range]::-ms-fill-upper{background:var(--input-range-track-color);border:none;border-radius:var(--input-border-radius)}input[type=range]::-ms-thumb{border:none;height:.5rem;width:.5rem;border-radius:50%;background:var(--input-range-thumb-color);cursor:pointer}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:var(--input-range-track-color)}progress{width:100%;vertical-align:middle}.input-group,.input-single{margin-bottom:1rem}.input-group{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.input-group>.button,.input-group>.dropdown .button,.input-group>.dropdown button,.input-group>button,.input-group>input{border-radius:0}.input-group>.button:first-child,.input-group>.dropdown:first-child .button,.input-group>.dropdown:first-child button,.input-group>button:first-child,.input-group>input:first-child{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius)}.input-group>.button:last-child,.input-group>.dropdown:last-child .button,.input-group>.dropdown:last-child button,.input-group>button:last-child,.input-group>input:last-child{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius)}.input-group>input+input{border-left-width:0}.input-group>input+input:focus{border-left-width:var(--input-border-width);margin-left:calc(var(--input-border-width) * -1)}.input-group :focus{-webkit-transform:translateZ(0);transform:translateZ(0)}.input-addon{font-size:var(--input-font-size);color:var(--state-secondary);height:var(--input-height);line-height:var(--input-height);border-top:solid var(--input-border-width) var(--input-border-color);border-bottom:solid var(--input-border-width) var(--input-border-color);background:#f8f8f8;padding:0 calc(var(--component-spacing) * .5);white-space:nowrap}.input-addon-small{font-size:var(--input-font-size-small);height:var(--input-height-small);line-height:var(--input-height-small)}.input-addon-big{font-size:var(--input-font-size-big);height:var(--input-height-big);line-height:var(--input-height-big)}.input-addon:first-child{border-left:solid var(--input-border-width) var(--input-border-color);border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius)}.input-addon:last-child{border-right:solid var(--input-border-width) var(--input-border-color);border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius)}.input-invalid label{color:var(--input-invalid-color)!important}.input-invalid,.input-invalid input,.input-invalid select{color:var(--input-invalid-color)!important;border-color:var(--input-invalid-border-color)!important}.input-valid label{color:var(--input-valid-color)!important}.input-valid,.input-valid input,.input-valid select{color:var(--input-valid-color)!important;border-color:var(--input-valid-border-color)!important} -/*! Forms */fieldset{border:solid var(--fieldset-border-width) var(--fieldset-border-color);border-radius:var(--fieldset-border-radius);padding:var(--component-spacing) calc(var(--component-spacing) * 1.5);margin-bottom:1rem}fieldset legend{font-weight:var(--font-weight-bold);padding:0 .25rem}label{display:inline-block;margin-bottom:.25rem}label+label{margin-left:1rem}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{width:100%;font-family:var(--input-font-family);font-size:var(--input-font-size);font-weight:var(--input-font-weight);color:var(--input-color);border:solid var(--input-border-width) var(--input-border-color);border-radius:var(--input-border-radius);-webkit-box-shadow:var(--input-box-shadow);box-shadow:var(--input-box-shadow);background-color:var(--input-bg-color);height:var(--input-height);line-height:var(--input-height);vertical-align:middle;display:block;padding-left:calc(var(--component-spacing) * .5);padding-right:calc(var(--component-spacing) * .5);margin:0;-webkit-transition:border-color .1s,background-color .1s,color .1s;transition:border-color .1s,background-color .1s,color .1s;white-space:nowrap;-moz-appearance:none;-webkit-appearance:none}input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{outline:none;border-color:var(--input-border-color-focus)}select{position:relative;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='41' height='26' viewBox='0 0 41 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 5.382l19.983 19.983L40.14 5.208 34.932 0 19.869 15.062 4.84.032z' fill-rule='evenodd'/%3E%3C/svg%3E");background-position:right .4rem center;background-repeat:no-repeat;background-size:.75rem;padding-top:0;padding-bottom:0;padding-right:calc(var(--component-spacing) * .5 + 1rem)}textarea{height:auto;resize:vertical;line-height:var(--line-height);white-space:normal}input[type=color]{padding:calc(var(--component-spacing) * .5)}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--input-border-radius)}input[type=checkbox],input[type=radio]{padding:0}input[disabled]{opacity:.5;cursor:not-allowed}input[readonly]{background-color:var(--input-readonly-bg-color)}input[type=color].input-small,input[type=date].input-small,input[type=datetime-local].input-small,input[type=email].input-small,input[type=month].input-small,input[type=number].input-small,input[type=password].input-small,input[type=search].input-small,input[type=tel].input-small,input[type=text].input-small,input[type=time].input-small,input[type=url].input-small,input[type=week].input-small,select.input-small{font-size:var(--input-font-size-small);height:var(--input-height-small);line-height:var(--input-height-small)}textarea.input-small{font-size:var(--input-font-size-small)}input[type=color].input-big,input[type=date].input-big,input[type=datetime-local].input-big,input[type=email].input-big,input[type=month].input-big,input[type=number].input-big,input[type=password].input-big,input[type=search].input-big,input[type=tel].input-big,input[type=text].input-big,input[type=time].input-big,input[type=url].input-big,input[type=week].input-big,select.input-big{font-size:var(--input-font-size-big);height:var(--input-height-big);line-height:var(--input-height-big)}textarea.input-big{font-size:var(--input-font-size-big)}input[type=range]{-webkit-appearance:none;width:100%;margin:1rem 0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:.5rem;cursor:pointer;background:var(--input-range-track-color);border-radius:var(--input-border-radius);border:none;-webkit-box-shadow:var(--input-range-track-box-shadow);box-shadow:var(--input-range-track-box-shadow)}input[type=range]::-webkit-slider-thumb{border:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--input-range-thumb-color);cursor:pointer;-webkit-appearance:none;margin-top:-.5rem}input[type=range]:focus::-webkit-slider-runnable-track{background:var(--input-range-track-color)}input[type=range]::-moz-range-track{width:100%;height:.5rem;cursor:pointer;background:var(--input-range-track-color);border-radius:var(--input-border-radius);border:none;box-shadow:var(--input-range-track-box-shadow)}input[type=range]::-moz-range-thumb{border:none;height:1.5rem;width:1.5rem;border-radius:50%;background:var(--input-range-thumb-color);cursor:pointer}input[type=range]::-ms-track{width:100%;height:.5rem;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower{background:#2f6ea5;border:none;border-radius:var(--input-border-radius)}input[type=range]::-ms-fill-upper{background:var(--input-range-track-color);border:none;border-radius:var(--input-border-radius)}input[type=range]::-ms-thumb{border:none;height:.5rem;width:.5rem;border-radius:50%;background:var(--input-range-thumb-color);cursor:pointer}input[type=range]:focus::-ms-fill-lower,input[type=range]:focus::-ms-fill-upper{background:var(--input-range-track-color)}progress{width:100%;vertical-align:middle}.input-group,.input-single{margin-bottom:1rem}.input-group{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.input-group>.button,.input-group>.dropdown .button,.input-group>.dropdown button,.input-group>button,.input-group>input{border-radius:0}.input-group>.button:first-child,.input-group>.dropdown:first-child .button,.input-group>.dropdown:first-child button,.input-group>button:first-child,.input-group>input:first-child{border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius)}.input-group>.button:last-child,.input-group>.dropdown:last-child .button,.input-group>.dropdown:last-child button,.input-group>button:last-child,.input-group>input:last-child{border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius)}.input-group>input+input{border-left-width:0}.input-group>input+input:focus{border-left-width:var(--input-border-width);margin-left:calc(var(--input-border-width) * -1)}.input-group :focus{-webkit-transform:translateZ(0);transform:translateZ(0)}.input-addon{font-size:var(--input-font-size);color:var(--text-muted);height:var(--input-height);line-height:var(--input-height);border-top:solid var(--input-border-width) var(--input-border-color);border-bottom:solid var(--input-border-width) var(--input-border-color);background:#f8f8f8;padding:0 calc(var(--component-spacing) * .5);white-space:nowrap}.input-addon-small{font-size:var(--input-font-size-small);height:var(--input-height-small);line-height:var(--input-height-small)}.input-addon-big{font-size:var(--input-font-size-big);height:var(--input-height-big);line-height:var(--input-height-big)}.input-addon:first-child{border-left:solid var(--input-border-width) var(--input-border-color);border-top-left-radius:var(--input-border-radius);border-bottom-left-radius:var(--input-border-radius)}.input-addon:last-child{border-right:solid var(--input-border-width) var(--input-border-color);border-top-right-radius:var(--input-border-radius);border-bottom-right-radius:var(--input-border-radius)}.input-invalid label{color:var(--input-invalid-color)!important}.input-invalid,.input-invalid input,.input-invalid select{color:var(--input-invalid-color)!important;border-color:var(--input-invalid-border-color)!important}.input-valid label{color:var(--input-valid-color)!important}.input-valid,.input-valid input,.input-valid select{color:var(--input-valid-color)!important;border-color:var(--input-valid-border-color)!important} +/*! Loaders */:root{--loader-bg-color:var(--component-bg-color);--loader-border-color:var(--state-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-margin-x:var(--component-spacing-small);--loader-margin-y:0}@-webkit-keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loader,.loader-bg:after{width:var(--loader-size);height:var(--loader-size);border-radius:50%;border:solid var(--loader-border-width) var(--loader-bg-color);border-top-color:var(--loader-border-color);border-left-color:var(--loader-border-color);display:inline-block;-webkit-animation:loader var(--loader-speed) linear infinite;animation:loader var(--loader-speed) linear infinite;vertical-align:middle;margin:var(--loader-margin-y) var(--loader-margin-x)}.loader-bg{position:relative!important}.loader-bg:after{content:"";position:absolute;top:calc(50% - var(--loader-size) / 2);left:calc(50% - var(--loader-size) / 2);margin:0}.loader-bg-small:after,.loader-small{width:var(--loader-size-small);height:var(--loader-size-small);border-width:var(--loader-border-width-small)}.loader-bg-big:after,.loader-big{width:var(--loader-size-big);height:var(--loader-size-big);border-width:var(--loader-border-width-big)}.loader-bg-small:after{top:calc(50% - var(--loader-size-small) / 2);left:calc(50% - var(--loader-size-small) / 2)}.loader-bg-big:after{top:calc(50% - var(--loader-size-big) / 2);left:calc(50% - var(--loader-size-big) / 2)}.loader-secondary,.loader-secondary.loader-bg:after{border-top-color:var(--state-secondary);border-left-color:var(--state-secondary)}.loader-success,.loader-success.loader-bg:after{border-top-color:var(--state-success);border-left-color:var(--state-success)}.loader-info,.loader-info.loader-bg:after{border-top-color:var(--state-info);border-left-color:var(--state-info)}.loader-warning,.loader-warning.loader-bg:after{border-top-color:var(--state-warning);border-left-color:var(--state-warning)}.loader-danger,.loader-danger.loader-bg:after{border-top-color:var(--state-danger);border-left-color:var(--state-danger)}.loader-light,.loader-light.loader-bg:after{border-top-color:var(--state-light);border-left-color:var(--state-light);border-bottom-color:var(--state-dark);border-right-color:var(--state-dark)}.loader-dark,.loader-dark.loader-bg:after{border-top-color:var(--state-dark);border-left-color:var(--state-dark)} -/*! Loaders */@-webkit-keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loader,.loader-bg:after{width:var(--loader-size);height:var(--loader-size);border-radius:50%;border:solid var(--loader-border-width) var(--loader-bg-color);border-top-color:var(--loader-border-color);border-left-color:var(--loader-border-color);display:inline-block;-webkit-animation:loader var(--loader-speed) linear infinite;animation:loader var(--loader-speed) linear infinite;vertical-align:middle;margin:var(--loader-spacing-y) var(--loader-spacing-x)}.loader-bg{position:relative!important}.loader-bg:after{content:"";position:absolute;top:calc(50% - var(--loader-size) / 2);left:calc(50% - var(--loader-size) / 2);margin:0}.loader-bg-small:after,.loader-small{width:var(--loader-size-small);height:var(--loader-size-small);border-width:var(--loader-border-width-small)}.loader-bg-big:after,.loader-big{width:var(--loader-size-big);height:var(--loader-size-big);border-width:var(--loader-border-width-big)}.loader-bg-small:after{top:calc(50% - var(--loader-size-small) / 2);left:calc(50% - var(--loader-size-small) / 2)}.loader-bg-big:after{top:calc(50% - var(--loader-size-big) / 2);left:calc(50% - var(--loader-size-big) / 2)} +/*! Progress Bars */:root{--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(--state-primary);--progress-border-radius:var(--component-border-radius);--progress-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);--progress-speed-change:.2s;--progress-speed-indeterminate:1.5s}@-webkit-keyframes progress-indeterminate{0%{left:-50%}to{left:100%}}@keyframes progress-indeterminate{0%{left:-50%}to{left:100%}}.progress{position:relative;width:100%;height:var(--progress-height);line-height:var(--progress-height);font-size:var(--progress-font-size);background-color:var(--progress-bg-color);border-radius:var(--progress-border-radius);display:block;overflow:hidden;margin-bottom:1rem;-webkit-box-shadow:var(--progress-box-shadow);box-shadow:var(--progress-box-shadow)}.progress-bar{position:absolute;top:0;left:0;width:0;height:100%;text-align:center;color:var(--progress-color);background-color:var(--progress-bar-bg-color);-webkit-transition:var(--progress-speed-change) width;transition:var(--progress-speed-change) width;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.progress-small{font-size:var(--progress-font-size-small);height:var(--progress-height-small);line-height:var(--progress-height-small)}.progress-big{font-size:var(--progress-font-size-big);height:var(--progress-height-big);line-height:var(--progress-height-big)}.progress-indeterminate .progress-bar{width:50%!important;-webkit-animation:progress-indeterminate linear var(--progress-speed-indeterminate) infinite;animation:progress-indeterminate linear var(--progress-speed-indeterminate) infinite}.progress-secondary .progress-bar{background-color:var(--state-secondary)}.progress-success .progress-bar{background-color:var(--state-success)}.progress-info .progress-bar{background-color:var(--state-info)}.progress-warning .progress-bar{background-color:var(--state-warning)}.progress-danger .progress-bar{background-color:var(--state-danger)}.progress-light{background-color:var(--state-dark)}.progress-light .progress-bar{color:var(--state-dark);background-color:var(--state-light)}.progress-dark .progress-bar{color:var(--state-light);background-color:var(--state-dark)} -/*! Progress Bars */@-webkit-keyframes progress-indeterminate{0%{left:-50%}to{left:100%}}@keyframes progress-indeterminate{0%{left:-50%}to{left:100%}}.progress{position:relative;width:100%;height:var(--progress-height);line-height:var(--progress-height);font-size:var(--progress-font-size);background-color:var(--progress-bg-color);border-radius:var(--progress-border-radius);display:block;overflow:hidden;margin-bottom:1rem}.progress-bar{position:absolute;top:0;left:0;width:0;height:100%;text-align:center;color:var(--progress-color);background-color:var(--progress-bar-bg-color);-webkit-transition:var(--progress-speed-change) width;transition:var(--progress-speed-change) width;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.progress-small{font-size:var(--progress-font-size-small);height:var(--progress-height-small);line-height:var(--progress-height-small)}.progress-big{font-size:var(--progress-font-size-big);height:var(--progress-height-big);line-height:var(--progress-height-big)}.progress-indeterminate .progress-bar{width:50%!important;-webkit-animation:progress-indeterminate linear var(--progress-speed-indeterminate) infinite;animation:progress-indeterminate linear var(--progress-speed-indeterminate) infinite} +/*! Switches */:root{--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(--state-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}.switch{font-size:var(--switch-font-size)}.switch input{display:none}.switch input+label{position:relative;min-width:calc(var(--switch-height) * 2);height:var(--switch-height);line-height:var(--switch-height);display:inline-block;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;text-indent:calc(var(--switch-height) * 2 + .5rem)}.switch input+label:after,.switch input+label:before{content:"";position:absolute;top:0;left:0;width:calc(var(--switch-height) * 2);bottom:0;display:block}.switch input+label:before{right:0;background-color:var(--switch-bg-color);border-radius:var(--switch-border-radius);-webkit-transition:background-color var(--switch-speed);transition:background-color var(--switch-speed)}.switch input+label:after{top:var(--switch-thumb-spacing);left:var(--switch-thumb-spacing);width:calc(var(--switch-height) - var(--switch-thumb-spacing) * 2);height:calc(var(--switch-height) - var(--switch-thumb-spacing) * 2);border-radius:var(--switch-thumb-border-radius);background-color:var(--switch-thumb-bg-color);-webkit-transition:margin var(--switch-speed);transition:margin var(--switch-speed)}.switch input:checked+label:before{background-color:var(--switch-bg-color-checked)}.switch input:checked+label:after{margin-left:var(--switch-height)}.switch input:disabled+label{opacity:.5;cursor:not-allowed}.switch-small{font-size:var(--switch-font-size-small)}.switch-small input+label{height:var(--switch-height-small);line-height:var(--switch-height-small);text-indent:calc(var(--switch-height-small) * 2 + .5rem)}.switch-small input+label:after,.switch-small input+label:before{width:calc(var(--switch-height-small) * 2)}.switch-small input+label:after{width:calc(var(--switch-height-small) - var(--switch-thumb-spacing) * 2);height:calc(var(--switch-height-small) - var(--switch-thumb-spacing) * 2)}.switch-small input:checked+label:after{margin-left:var(--switch-height-small)}.switch-big{font-size:var(--switch-font-size-big)}.switch-big input+label{height:var(--switch-height-big);line-height:var(--switch-height-big);text-indent:calc(var(--switch-height-big) * 2 + .5rem)}.switch-big input+label:after,.switch-big input+label:before{width:calc(var(--switch-height-big) * 2)}.switch-big input+label:after{width:calc(var(--switch-height-big) - var(--switch-thumb-spacing) * 2);height:calc(var(--switch-height-big) - var(--switch-thumb-spacing) * 2)}.switch-big input:checked+label:after{margin-left:var(--switch-height-big)}.switch+.switch{margin-left:1rem}.switch-secondary input:checked+label:before{background-color:var(--state-secondary)}.switch-success input:checked+label:before{background-color:var(--state-success)}.switch-info input:checked+label:before{background-color:var(--state-info)}.switch-warning input:checked+label:before{background-color:var(--state-warning)}.switch-danger input:checked+label:before{background-color:var(--state-danger)}.switch-light input+label:before{background-color:var(--state-dark)}.switch-dark input+label:before,.switch-light input:checked+label:before{background-color:var(--state-light)}.switch-dark input:checked+label:before{background-color:var(--state-dark)} -/*! Switches */.switch{font-size:var(--switch-font-size)}.switch input{display:none}.switch input+label{position:relative;min-width:calc(var(--switch-height) * 2);height:var(--switch-height);line-height:var(--switch-height);display:inline-block;cursor:pointer;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;text-indent:calc(var(--switch-height) * 2 + .5rem)}.switch input+label:after,.switch input+label:before{content:"";position:absolute;top:0;left:0;width:calc(var(--switch-height) * 2);bottom:0;display:block}.switch input+label:before{right:0;background-color:var(--switch-bg-color);border-radius:var(--switch-border-radius);-webkit-transition:background-color var(--switch-speed);transition:background-color var(--switch-speed)}.switch input+label:after{top:var(--switch-thumb-spacing);left:var(--switch-thumb-spacing);width:calc(var(--switch-height) - var(--switch-thumb-spacing) * 2);height:calc(var(--switch-height) - var(--switch-thumb-spacing) * 2);border-radius:var(--switch-thumb-border-radius);background-color:var(--switch-thumb-bg-color);-webkit-transition:margin var(--switch-speed);transition:margin var(--switch-speed)}.switch input:checked+label:before{background-color:var(--switch-bg-color-checked)}.switch input:checked+label:after{margin-left:var(--switch-height)}.switch input:disabled+label{opacity:.5;cursor:not-allowed}.switch-small{font-size:var(--switch-font-size-small)}.switch-small input+label{height:var(--switch-height-small);line-height:var(--switch-height-small);text-indent:calc(var(--switch-height-small) * 2 + .5rem)}.switch-small input+label:after,.switch-small input+label:before{width:calc(var(--switch-height-small) * 2)}.switch-small input+label:after{width:calc(var(--switch-height-small) - var(--switch-thumb-spacing) * 2);height:calc(var(--switch-height-small) - var(--switch-thumb-spacing) * 2)}.switch-small input:checked+label:after{margin-left:var(--switch-height-small)}.switch-big{font-size:var(--switch-font-size-big)}.switch-big input+label{height:var(--switch-height-big);line-height:var(--switch-height-big);text-indent:calc(var(--switch-height-big) * 2 + .5rem)}.switch-big input+label:after,.switch-big input+label:before{width:calc(var(--switch-height-big) * 2)}.switch-big input+label:after{width:calc(var(--switch-height-big) - var(--switch-thumb-spacing) * 2);height:calc(var(--switch-height-big) - var(--switch-thumb-spacing) * 2)}.switch-big input:checked+label:after{margin-left:var(--switch-height-big)}.switch+.switch{margin-left:1rem} +/*! Tabs */:root{--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(--state-secondary);--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)}.tabs{width:100%}.tabs,.tabs-nav{margin-bottom:1rem}.tabs-nav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tabs-nav a{color:var(--tab-color);text-decoration:none;background-color:var(--tab-bg-color);border-radius:var(--tab-border-radius);padding:var(--tab-spacing-y) var(--tab-spacing-x);display:inline-block}.tabs-nav a:hover{color:var(--tab-color-hover);background-color:var(--tab-bg-color-hover);text-decoration:none}.tabs-nav a.active{color:var(--tab-color-active);background-color:var(--tab-bg-color-active);cursor:default}.tabs-nav a.disabled{color:var(--tab-color-disabled);background-color:var(--tab-bg-color-disabled);cursor:not-allowed}.tabs-pane{border:solid var(--tab-pane-border-width) var(--tab-pane-border-color);border-radius:.25rem;padding:var(--tab-pane-spacing-y) var(--tab-pane-spacing-x)}.tabs-pane:not(.active){display:none}.tabs-pane :last-child{margin-bottom:0} -/*! Tabs */.tabs{width:100%}.tabs,.tabs-nav{margin-bottom:1rem}.tabs-nav{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tabs-nav a{color:var(--tab-color);text-decoration:none;background-color:var(--tab-bg-color);border-radius:var(--tab-border-radius);padding:var(--tab-spacing-y) var(--tab-spacing-x);display:inline-block}.tabs-nav a:hover{color:var(--tab-color-hover);background-color:var(--tab-bg-color-hover);text-decoration:none}.tabs-nav a.active{color:var(--tab-color-active);background-color:var(--tab-bg-color-active);cursor:default}.tabs-nav a.disabled{color:var(--tab-color-disabled);background-color:var(--tab-bg-color-disabled);cursor:not-allowed}.tabs-pane{border:solid var(--tab-pane-border-width) var(--tab-pane-border-color);border-radius:.25rem;padding:var(--tab-pane-spacing-y) var(--tab-pane-spacing-x)}.tabs-pane:not(.active){display:none}.tabs-pane :last-child{margin-bottom:0} +/*! Tables */:root{--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(--state-primary);--table-spacing-x:calc(var(--component-spacing-small) * 1.5);--table-spacing-y:var(--component-spacing-small)}table{width:100%;border-collapse:collapse;margin-bottom:1rem}table caption{caption-side:bottom;font-size:var(--font-size-small);color:var(--state-secondary);text-align:center;padding-top:var(--table-spacing-y)}table th{text-align:left;background:var(--table-header-bg-color);border-bottom:solid calc(var(--table-border-width) * 2) var(--table-border-color)}table td,table th{padding:var(--table-spacing-y) var(--table-spacing-x)}table td{border-bottom:solid var(--table-border-width) var(--table-border-color)}table.table-striped tr:nth-child(odd) td{background-color:var(--table-stripe-bg-color)}table.table-bordered{border:solid var(--table-border-width) var(--table-border-color)}table.table-bordered td{border:var(--table-border-width) solid var(--table-border-color)}table.table-hoverable tbody tr:hover td{color:var(--table-hover-color);background-color:var(--table-hover-bg-color)} -/*! Tables */table{width:100%;border-collapse:collapse;margin-bottom:1rem}table caption{caption-side:bottom;font-size:var(--font-size-small);color:var(--text-muted);text-align:center;padding-top:var(--table-spacing-y)}table th{text-align:left;background:var(--table-header-bg-color);border-bottom:solid calc(var(--table-border-width) * 2) var(--table-border-color)}table td,table th{padding:var(--table-spacing-y) var(--table-spacing-x)}table td{border-bottom:solid var(--table-border-width) var(--table-border-color)}table.table-striped tr:nth-child(odd) td{background-color:var(--table-stripe-bg-color)}table.table-bordered{border:solid var(--table-border-width) var(--table-border-color)}table.table-bordered td{border:var(--table-border-width) solid var(--table-border-color)}table.table-hoverable tbody tr:hover td{color:var(--table-hover-color);background-color:var(--table-hover-bg-color)} - -/*! Utilties */.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}.float-left{float:left!important}.float-right{float:right!important}.width-0{width:0!important}.width-5{width:5%!important}.width-10{width:10%!important}.width-15{width:15%!important}.width-20{width:20%!important}.width-25{width:25%!important}.width-30{width:30%!important}.width-35{width:35%!important}.width-40{width:40%!important}.width-45{width:45%!important}.width-50{width:50%!important}.width-55{width:55%!important}.width-60{width:60%!important}.width-65{width:65%!important}.width-70{width:70%!important}.width-75{width:75%!important}.width-80{width:80%!important}.width-85{width:85%!important}.width-90{width:90%!important}.width-95{width:95%!important}.width-100{width:100%!important}.height-0{height:0%!important}.height-5{height:5%!important}.height-10{height:10%!important}.height-15{height:15%!important}.height-20{height:20%!important}.height-25{height:25%!important}.height-30{height:30%!important}.height-35{height:35%!important}.height-40{height:40%!important}.height-45{height:45%!important}.height-50{height:50%!important}.height-55{height:55%!important}.height-60{height:60%!important}.height-65{height:65%!important}.height-70{height:70%!important}.height-75{height:75%!important}.height-80{height:80%!important}.height-85{height:85%!important}.height-90{height:90%!important}.height-95{height:95%!important}.height-100{height:100%!important}.padding-none{padding:0!important}.padding-x-none{padding-left:0!important;padding-right:0!important}.padding-y-none{padding-bottom:0!important}.padding-top-none,.padding-y-none{padding-top:0!important}.padding-right-none{padding-right:0!important}.padding-bottom-none{padding-bottom:0!important}.padding-left-none{padding-left:0!important}.padding-small{padding:var(--spacing-small)!important}.padding-x-small{padding-left:var(--spacing-small)!important;padding-right:var(--spacing-small)!important}.padding-y-small{padding-bottom:var(--spacing-small)!important}.padding-top-small,.padding-y-small{padding-top:var(--spacing-small)!important}.padding-right-small{padding-right:var(--spacing-small)!important}.padding-bottom-small{padding-bottom:var(--spacing-small)!important}.padding-left-small{padding-left:var(--spacing-small)!important}.padding-medium{padding:var(--spacing-medium)!important}.padding-x-medium{padding-left:var(--spacing-medium)!important;padding-right:var(--spacing-medium)!important}.padding-y-medium{padding-bottom:var(--spacing-medium)!important}.padding-top-medium,.padding-y-medium{padding-top:var(--spacing-medium)!important}.padding-right-medium{padding-right:var(--spacing-medium)!important}.padding-bottom-medium{padding-bottom:var(--spacing-medium)!important}.padding-left-medium{padding-left:var(--spacing-medium)!important}.padding-big{padding:var(--spacing-big)!important}.padding-x-big{padding-left:var(--spacing-big)!important;padding-right:var(--spacing-big)!important}.padding-y-big{padding-bottom:var(--spacing-big)!important}.padding-top-big,.padding-y-big{padding-top:var(--spacing-big)!important}.padding-right-big{padding-right:var(--spacing-big)!important}.padding-bottom-big{padding-bottom:var(--spacing-big)!important}.padding-left-big{padding-left:var(--spacing-big)!important}.margin-none{margin:0!important}.margin-x-none{margin-left:0!important;margin-right:0!important}.margin-y-none{margin-bottom:0!important}.margin-top-none,.margin-y-none{margin-top:0!important}.margin-right-none{margin-right:0!important}.margin-bottom-none{margin-bottom:0!important}.margin-left-none{margin-left:0!important}.margin-small{margin:var(--spacing-small)!important}.margin-x-small{margin-left:var(--spacing-small)!important;margin-right:var(--spacing-small)!important}.margin-y-small{margin-bottom:var(--spacing-small)!important}.margin-top-small,.margin-y-small{margin-top:var(--spacing-small)!important}.margin-right-small{margin-right:var(--spacing-small)!important}.margin-bottom-small{margin-bottom:var(--spacing-small)!important}.margin-left-small{margin-left:var(--spacing-small)!important}.margin-medium{margin:var(--spacing-medium)!important}.margin-x-medium{margin-left:var(--spacing-medium)!important;margin-right:var(--spacing-medium)!important}.margin-y-medium{margin-bottom:var(--spacing-medium)!important}.margin-top-medium,.margin-y-medium{margin-top:var(--spacing-medium)!important}.margin-right-medium{margin-right:var(--spacing-medium)!important}.margin-bottom-medium{margin-bottom:var(--spacing-medium)!important}.margin-left-medium{margin-left:var(--spacing-medium)!important}.margin-big{margin:var(--spacing-big)!important}.margin-x-big{margin-left:var(--spacing-big)!important;margin-right:var(--spacing-big)!important}.margin-y-big{margin-bottom:var(--spacing-big)!important}.margin-top-big,.margin-y-big{margin-top:var(--spacing-big)!important}.margin-right-big{margin-right:var(--spacing-big)!important}.margin-bottom-big{margin-bottom:var(--spacing-big)!important}.margin-left-big{margin-left:var(--spacing-big)!important}.margin-x-auto{margin-left:auto!important;margin-right:auto!important}.margin-y-auto{margin-top:auto!important;margin-bottom:auto!important}.margin-xy-auto{margin:auto!important}.text-success{color:var(--state-success)!important}.text-info{color:var(--state-info)!important}.text-warning{color:var(--state-warning)!important}.text-danger{color:var(--state-danger)!important}.text-muted{color:var(--text-muted)!important}.text-small{font-size:var(--font-size-small)!important}.text-bold{font-weight:var(--font-weight-bold)!important}.text-italic{font-style:italic!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-nowrap{white-space:nowrap!important} \ No newline at end of file +/*! Utilties */:root{--spacing-small:var(--component-spacing);--spacing-medium:calc(var(--component-spacing) * 2);--spacing-big:calc(var(--component-spacing) * 4)}.text-primary{color:var(--state-primary)!important}.text-secondary{color:var(--state-secondary)!important}.text-success{color:var(--state-success)!important}.text-info{color:var(--state-info)!important}.text-warning{color:var(--state-warning)!important}.text-danger{color:var(--state-danger)!important}.text-light{color:var(--state-light)!important}.text-dark{color:var(--state-dark)!important}.text-small{font-size:var(--font-size-small)!important}.text-bold{font-weight:var(--font-weight-bold)!important}.text-italic{font-style:italic!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-nowrap{white-space:nowrap!important}.bg-primary{background-color:var(--state-primary)!important}.bg-secondary{background-color:var(--state-secondary)!important}.bg-success{background-color:var(--state-success)!important}.bg-info{background-color:var(--state-info)!important}.bg-warning{background-color:var(--state-warning)!important}.bg-danger{background-color:var(--state-danger)!important}.bg-light{background-color:var(--state-light)!important}.bg-dark{background-color:var(--state-dark)!important}.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}.float-left{float:left!important}.float-right{float:right!important}.width-0{width:0!important}.width-5{width:5%!important}.width-10{width:10%!important}.width-15{width:15%!important}.width-20{width:20%!important}.width-25{width:25%!important}.width-30{width:30%!important}.width-35{width:35%!important}.width-40{width:40%!important}.width-45{width:45%!important}.width-50{width:50%!important}.width-55{width:55%!important}.width-60{width:60%!important}.width-65{width:65%!important}.width-70{width:70%!important}.width-75{width:75%!important}.width-80{width:80%!important}.width-85{width:85%!important}.width-90{width:90%!important}.width-95{width:95%!important}.width-100{width:100%!important}.height-0{height:0%!important}.height-5{height:5%!important}.height-10{height:10%!important}.height-15{height:15%!important}.height-20{height:20%!important}.height-25{height:25%!important}.height-30{height:30%!important}.height-35{height:35%!important}.height-40{height:40%!important}.height-45{height:45%!important}.height-50{height:50%!important}.height-55{height:55%!important}.height-60{height:60%!important}.height-65{height:65%!important}.height-70{height:70%!important}.height-75{height:75%!important}.height-80{height:80%!important}.height-85{height:85%!important}.height-90{height:90%!important}.height-95{height:95%!important}.height-100{height:100%!important}.max-height-100,.max-width-100{max-width:100%!important}.padding-none{padding:0!important}.padding-x-none{padding-left:0!important;padding-right:0!important}.padding-y-none{padding-bottom:0!important}.padding-top-none,.padding-y-none{padding-top:0!important}.padding-right-none{padding-right:0!important}.padding-bottom-none{padding-bottom:0!important}.padding-left-none{padding-left:0!important}.padding-small{padding:var(--spacing-small)!important}.padding-x-small{padding-left:var(--spacing-small)!important;padding-right:var(--spacing-small)!important}.padding-y-small{padding-bottom:var(--spacing-small)!important}.padding-top-small,.padding-y-small{padding-top:var(--spacing-small)!important}.padding-right-small{padding-right:var(--spacing-small)!important}.padding-bottom-small{padding-bottom:var(--spacing-small)!important}.padding-left-small{padding-left:var(--spacing-small)!important}.padding-medium{padding:var(--spacing-medium)!important}.padding-x-medium{padding-left:var(--spacing-medium)!important;padding-right:var(--spacing-medium)!important}.padding-y-medium{padding-bottom:var(--spacing-medium)!important}.padding-top-medium,.padding-y-medium{padding-top:var(--spacing-medium)!important}.padding-right-medium{padding-right:var(--spacing-medium)!important}.padding-bottom-medium{padding-bottom:var(--spacing-medium)!important}.padding-left-medium{padding-left:var(--spacing-medium)!important}.padding-big{padding:var(--spacing-big)!important}.padding-x-big{padding-left:var(--spacing-big)!important;padding-right:var(--spacing-big)!important}.padding-y-big{padding-bottom:var(--spacing-big)!important}.padding-top-big,.padding-y-big{padding-top:var(--spacing-big)!important}.padding-right-big{padding-right:var(--spacing-big)!important}.padding-bottom-big{padding-bottom:var(--spacing-big)!important}.padding-left-big{padding-left:var(--spacing-big)!important}.margin-none{margin:0!important}.margin-x-none{margin-left:0!important;margin-right:0!important}.margin-y-none{margin-bottom:0!important}.margin-top-none,.margin-y-none{margin-top:0!important}.margin-right-none{margin-right:0!important}.margin-bottom-none{margin-bottom:0!important}.margin-left-none{margin-left:0!important}.margin-small{margin:var(--spacing-small)!important}.margin-x-small{margin-left:var(--spacing-small)!important;margin-right:var(--spacing-small)!important}.margin-y-small{margin-bottom:var(--spacing-small)!important}.margin-top-small,.margin-y-small{margin-top:var(--spacing-small)!important}.margin-right-small{margin-right:var(--spacing-small)!important}.margin-bottom-small{margin-bottom:var(--spacing-small)!important}.margin-left-small{margin-left:var(--spacing-small)!important}.margin-medium{margin:var(--spacing-medium)!important}.margin-x-medium{margin-left:var(--spacing-medium)!important;margin-right:var(--spacing-medium)!important}.margin-y-medium{margin-bottom:var(--spacing-medium)!important}.margin-top-medium,.margin-y-medium{margin-top:var(--spacing-medium)!important}.margin-right-medium{margin-right:var(--spacing-medium)!important}.margin-bottom-medium{margin-bottom:var(--spacing-medium)!important}.margin-left-medium{margin-left:var(--spacing-medium)!important}.margin-big{margin:var(--spacing-big)!important}.margin-x-big{margin-left:var(--spacing-big)!important;margin-right:var(--spacing-big)!important}.margin-y-big{margin-bottom:var(--spacing-big)!important}.margin-top-big,.margin-y-big{margin-top:var(--spacing-big)!important}.margin-right-big{margin-right:var(--spacing-big)!important}.margin-bottom-big{margin-bottom:var(--spacing-big)!important}.margin-left-big{margin-left:var(--spacing-big)!important}.margin-x-auto{margin-left:auto!important;margin-right:auto!important}.margin-y-auto{margin-top:auto!important;margin-bottom:auto!important}.margin-xy-auto{margin:auto!important}: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-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-primary:tomato;--state-secondary:#a5a5a5;--state-success:var(--color-green);--state-info:var(--color-teal);--state-warning:var(--color-orange);--state-danger:var(--color-red);--state-light:#eee;--state-dark: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} \ No newline at end of file diff --git a/dist/shoelace.js b/dist/shoelace.js index 801d25bf..aa7584f5 100644 --- a/dist/shoelace.js +++ b/dist/shoelace.js @@ -1,12 +1,12 @@ /*! - Shoelace.css dropdowns 1.0.0-beta13 + Shoelace.css dropdowns 1.0.0-beta14 (c) A Beautiful Site, LLC Released under the MIT license Source: https://github.com/claviska/shoelace-css */ !function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace dropdowns require either jQuery or Zepto.");("function"==typeof jQuery?jQuery:Zepto)(function(e){e(document).on("click",function(t){var i,o,r;if(e(t.target).is(".dropdown-trigger")){if(i=e(t.target).closest(".dropdown"),r=t.target,e(".dropdown.active").not(i).removeClass("active").trigger("hide"),e(r).is(".disabled, :disabled"))return;e(i).toggleClass("active").trigger(e(i).is(".active")?"show":"hide")}else e(t.target).closest(".dropdown-menu").length&&(i=e(t.target).closest(".dropdown"),(o=e(t.target).closest("a").get(0))&&!e(o).is(".disabled")&&e(i).trigger("select",o),t.preventDefault()),e(".dropdown.active").removeClass("active").trigger("hide")}).on("keydown",function(t){27===t.keyCode&&e(".dropdown.active").removeClass("active").trigger("hide")})})}(),/*! - Shoelace.css tabs 1.0.0-beta13 + Shoelace.css tabs 1.0.0-beta14 (c) A Beautiful Site, LLC Released under the MIT license diff --git a/docs/alerts.html b/docs/alerts.html index ba7a1241..39584c7c 100644 --- a/docs/alerts.html +++ b/docs/alerts.html @@ -19,7 +19,7 @@ Shoelace logo -

+

A back to the basics CSS starter kit. For when you don’t need the whole boot.

@@ -48,7 +48,13 @@

Alerts

-

Create an alert by applying the alert class to an element such as a <div>. You can change an alert’s appearance using the alert-* modifier.

+

Create an alert by applying the alert class to an element such as a <div>.

+
<div class="alert">This is an alert</div>
+
+
This is an alert
+ +

Variations

+

Use the alert-* modifier to create variations.

<div class="alert">Primary</div>
 <div class="alert alert-secondary">Secondary</div>
 <div class="alert alert-success">Success</div>
@@ -74,8 +80,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -86,8 +92,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/attribution.html b/docs/attribution.html
index 6a561da7..51fe5e2f 100644
--- a/docs/attribution.html
+++ b/docs/attribution.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -65,8 +65,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -77,8 +77,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/badges.html b/docs/badges.html
index b2a19b12..5155a838 100644
--- a/docs/badges.html
+++ b/docs/badges.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -48,27 +48,10 @@
 
     

       
Badges

-
Create a badge by applying the badge class to an element such as a <span>. You can change a badge’s appearance using the badge-* modifier.

-
<span class="badge">Primary</span>
-<span class="badge badge-secondary">Secondary</span>
-<span class="badge badge-success">Success</span>
-<span class="badge badge-info">Info</span>
-<span class="badge badge-warning">Warning</span>
-<span class="badge badge-danger">Danger</span>
-<span class="badge badge-light">Light</span>
-<span class="badge badge-dark">Dark</span>
+
Create a badge by applying the badge class to an element such as a <span>.

+
<span class="badge">Badge</span>
 

-

-  Primary
-  Secondary
-  Success
-  Info
-  Warning
-  Danger
-  Light
-  Dark
-

-
+
Badge

 
By default, badges are sized relative to their parent element.

 
<h1>Heading 1 <span class="badge">Badge</span></h1>
 <h2>Heading 2 <span class="badge">Badge</span></h2>
@@ -80,8 +63,27 @@
 
Heading 3 Badge

 
Paragraph Badge

 
-
+
Variations

+
Use the badge-* modifier to create variations.

+
<span class="badge">Primary</span>
+<span class="badge badge-secondary">Secondary</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-danger">Danger</span>
+<span class="badge badge-light">Light</span>
+<span class="badge badge-dark">Dark</span>
+

+
Primary
+Secondary
+Success
+Info
+Warning
+Danger
+Light
+Dark

 
+
Badges can also be made into links.

 
<a href="#" class="badge">Primary</a>
 <a href="#" class="badge badge-secondary">Secondary</a>
 <a href="#" class="badge badge-success">Success</a>
@@ -91,16 +93,14 @@
 <a href="#" class="badge badge-light">Light</a>
 <a href="#" class="badge badge-dark">Dark</a>
 

-

-  Primary
-  Secondary
-  Success
-  Info
-  Warning
-  Danger
-  Light
-  Dark
-

+
Primary
+Secondary
+Success
+Info
+Warning
+Danger
+Light
+Dark

 
     

   
@@ -109,8 +109,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -121,8 +121,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/browser-support.html b/docs/browser-support.html
index 295744e1..576e02f9 100644
--- a/docs/browser-support.html
+++ b/docs/browser-support.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -65,8 +65,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -77,8 +77,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/buttons.html b/docs/buttons.html
index 0197c264..c9a86d79 100644
--- a/docs/buttons.html
+++ b/docs/buttons.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -48,9 +48,60 @@
 
     

       
Buttons

-
To create a button, use the <button> element or apply the button class to another element such as an <a>. You can change a button’s appearance using the button-* modifier.

+
To create a button, use the <button> element or apply the button class to an <a>.

+
<button type="button">Button</button>
+

+

+  
+

+
+
Use the button-small and button-big modifiers to change the size of a button.

+
<button type="button" class="button-small">Small Button</button>
+<button type="button">Normal Button</button>
+<button type="button" class="button-big">Big Button</button>
+

+

+  
+  
+  
+

+
+
Use the button-block modifier to make a button span the entire width of its parent.

+
<button type="button" class="button-block button-small">Small Block Button</button>
+<button type="button" class="button-block">Normal Block Button</button>
+<button type="button" class="button-block button-big">Big Block Button</button>
+

+

+  
+

+
+

+  
+

+
+

+  
+

+
+
To disable a button set the disabled property on <button> elements.

+
<button type="button" disabled>Disabled</button>
+

+

+  
+

+
+
You can force buttons to have an active state by applying the active class.

+
<button type="button" class="active">Active</button>
+

+

+  
+

+
+
Variations

+
Use the button-* modifier to create variations.

 
<button type="button">Primary</button>
 <button type="button" class="button-secondary">Secondary</button>
+<button type="button" class="button-success">Success</button>
 <button type="button" class="button-info">Info</button>
 <button type="button" class="button-warning">Warning</button>
 <button type="button" class="button-danger">Danger</button>
@@ -68,57 +119,13 @@
   
 

 
-
Use the button-small and button-big modifiers to change the size of a button.

-

-  
-  
-  
-

-
-
Use the button-block modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed.

-

-  
-

-
-

-  
-

-
-

-  
-

-
-
Disabled buttons look like this. Set the disabled property on <button> elements to achieve this effect. For all other elements, apply class="disabled" instead.

-

-  
-  
-  
-  
-  
-  
-  
-  
-

-
-
You can force buttons to have an active state by applying the active class.

-

-  
-  
-  
-  
-  
-  
-  
-  
-

-
 
-
Buttons can be styled to look like normal links with the button-link modifier. The appropriate sizing is placed so they align properly with regular buttons.

-
<a href="#" class="button">Button</a>
+
Buttons can be styled to look like normal links with the button-link modifier. Button sizing is maintained so they align properly with other buttons.

+
<button type="button">Button</button>
 <a href="#" class="button button-link">Link</a>
 

 

-  Button
+  
   Link
 

 
@@ -141,8 +148,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -153,8 +160,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/content.html b/docs/content.html
index a3f68ddb..e58606ed 100644
--- a/docs/content.html
+++ b/docs/content.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -48,8 +48,8 @@
 
     

       
Content

-
Shoelace gives you an easy way to customize most HTML elements with variables. You don’t need to apply any classes to achieve these styles — just use the appropriate tags.

-
For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in rem units.

+
Shoelace provides default content styles that are easy to customize. You don’t need to apply any classes to achieve these styles — just use the appropriate tags.

+
For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in rem units. Shoelace also sets box-sizing: border-box globally to make it easier to properly size elements.

 
Headings <h1> – <h6>

 
Heading 1

 
Heading 2

@@ -191,8 +191,8 @@ PRINT "SHOELACE IS AWESOME"
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -203,8 +203,8 @@ PRINT "SHOELACE IS AWESOME"
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/customizing.html b/docs/customizing.html
index 39cfc9f4..b14ce12e 100644
--- a/docs/customizing.html
+++ b/docs/customizing.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -48,26 +48,29 @@
 
     

       
Customizing

-
You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in variables.css in your own stylesheet.

-
For example, you can customize the default text color and background like this:

+
You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in the :root block of shoelace.css.

+
For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet:

 
:root {
   --body-color: white;
   --body-bg-color: black;
+  --state-primary: #09d;
 }
 

+
You don’t need to include all of the variables. You only need to override the ones you actually want to customize.

+
Additional variables can be found in the :root block of each component’s stylesheet. For example, to customize alerts, refer to the top of alerts.css for a list of variables.

 
Using Variables

-
You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own custom components.

+
You can use any of Shoelace’s variables in your own stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own custom components.

 
.your-selector {
   color: var(--state-danger);
 }
 

-
Refer to variables.css for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, this article will bring you up to speed. There’s also an interactive demo if you want to experiment.

-
Custom Components

+
If you’re not familiar with CSS variables, this article will bring you up to speed. There’s also an interactive demo if you want to experiment.

+
Creating Custom Components

 
You can create custom components to extend Shoelace’s functionality. Here are some best practices to keep things consistent and easy for others to understand.

 
Familiarize yourself with Shoelace’s naming conventions. A custom accordion component, for example, would have a class name such as accordion, modifier classes such as accordion-open, and variable names that look like --accordion-bg-color. Try to follow similar patterns as much as possible.

-
Define new variables when it makes sense to. Take a look at variables.css to see how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.

+
Define new variables when it makes sense to. Take a look at how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.

 
Semantic markup is strongly encouraged. Custom components should use the most appropriate elements and the minimal amount of markup required.

-
Keep everything together. During development, each component should be in its own folder along with its stylesheets, scripts, and documentation. Components shouldn’t depend on other components’ styles or scripts. This makes it easier to add or remove components from your app without affecting others. Of course, it’s perfectly fine to bundle components for optimization purposes in production.

+
Keep everything together. Each component should be in its own folder along with its stylesheets, scripts, and documentation. Components can use core variables, but they shouldn’t depend on other components’ styles or scripts to work. This makes it easier to add or remove components from your app without worrying about dependencies.

 
     

   
@@ -76,8 +79,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -88,8 +91,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/dropdowns.html b/docs/dropdowns.html
index 59dd8f7e..cb4f71d4 100644
--- a/docs/dropdowns.html
+++ b/docs/dropdowns.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -122,9 +122,25 @@
 

 
 
Dropdowns with button triggers can be used inside input groups.

+
<div class="input-group">
+  <span class="input-addon">$</span>
+  <input type="text" placeholder="10.00">
+
+  <div class="dropdown dropdown-left">
+    <button type="button" class="dropdown-trigger">Currency</button>
+    <div class="dropdown-menu">
+      <a href="#" class="checked">USD</a>
+      <a href="#">AUD</a>
+      <a href="#">CAD</a>
+      <a href="#">GBP</a>
+    </div>
+  </div>
+</div>
+

 

   $
   
+
   

     
     

@@ -164,8 +180,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -176,8 +192,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/forms.html b/docs/forms.html
index 2b7c0950..dd564e08 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -82,7 +82,7 @@
       
         <input type="file">
         

-        
+        
           File inputs aren’t supported. Use a file button instead.
         
       
@@ -226,35 +226,27 @@
   <button type="button" class="button">Option 3</button>
 </div>
 

-

-  

-    
-    
-  

+

+  
+  
 

 
-

-  

-    
-    
-  

+

+  
+  
 

 
-

-  

-    
-    
-    
-    
-  

+

+  
+  
+  
+  
 

 
-

-  

-    
-    
-    
-  

+

+  
+  
+  
 

 
 
Input Addons

@@ -359,8 +351,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -371,8 +363,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/grid-system.html b/docs/grid-system.html
index 24f260a4..acae3b94 100644
--- a/docs/grid-system.html
+++ b/docs/grid-system.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -83,8 +83,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -95,8 +95,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/icons.html b/docs/icons.html
index 8db151bf..1cdad49c 100644
--- a/docs/icons.html
+++ b/docs/icons.html
@@ -20,7 +20,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -56,7 +56,7 @@
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
 

 
Then add icons as you normally would with <i class="fa fa-*"></i>:

-

+

   
   
   
@@ -87,8 +87,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -99,8 +99,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/installing.html b/docs/installing.html
index 9e9d6566..a994b5d7 100644
--- a/docs/installing.html
+++ b/docs/installing.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -52,10 +52,10 @@
 
To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load jQuery or Zepto along with shoelace.js.

 
CDN

 
The easiest way to use Shoelace is via CDN. Just add this to your <head>:

-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta13/shoelace.css">
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta14/shoelace.css">
 

 
And this before </body> but after jQuery/Zepto:

-
<script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta13/shoelace.js"></script>
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta14/shoelace.js"></script>
 

 
This service is provided free, courtesy of CDNJS. New releases can take up to 12 hours to appear on the CDN.

 
Download

@@ -76,8 +76,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -88,8 +88,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/loaders.html b/docs/loaders.html
index 57dac239..54a68db7 100644
--- a/docs/loaders.html
+++ b/docs/loaders.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -59,6 +59,7 @@
   
 

 
+
Background Loaders

 
You can simulate a background loader using loader-bg. This is achieved using position: relative on the container and the ::after pseudo-element. You can use the loader-bg-small and loader-bg-big modifiers to change the size.

 
<div class="loader-bg loader-bg-small"></div>
 <div class="loader-bg"></div>
@@ -70,6 +71,24 @@
   

 

 
+
Variations

+
Use the loader-* modifier to create variations.

+
<span class="loader loader-secondary"></span>
+<span class="loader loader-success"></span>
+<span class="loader loader-info"></span>
+<span class="loader loader-warning"></span>
+<span class="loader loader-danger"></span>
+<span class="loader loader-light"></span>
+<span class="loader loader-dark"></span>
+

+

+
+
+
+
+
+

+
     

   
 
@@ -77,8 +96,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -89,8 +108,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/progress-bars.html b/docs/progress-bars.html
index 7c3c3e8f..ed9e562c 100644
--- a/docs/progress-bars.html
+++ b/docs/progress-bars.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -84,6 +84,72 @@
   

 

 
+
Variations

+
Use the progress-* modifier to create variations.

+
<div class="progress">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-secondary">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-success">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-info">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-warning">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-danger">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-light">
+  <div class="progress-bar width-50">50%</div>
+</div>
+
+<div class="progress progress-dark">
+  <div class="progress-bar width-50">50%</div>
+</div>
+

+

+  
50%

+

+
+

+  
50%

+

+
+

+  
50%

+

+
+

+  
50%

+

+
+

+  
50%

+

+
+

+  
50%

+

+
+

+  
50%

+

+
+

+  
50%

+

+
     

   
 
@@ -91,8 +157,8 @@
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -103,8 +169,8 @@
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/docs/switches.html b/docs/switches.html
index 58dfed9b..9588b5c3 100644
--- a/docs/switches.html
+++ b/docs/switches.html
@@ -19,7 +19,7 @@
         Shoelace logo
       
     
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   
@@ -104,6 +104,46 @@
   
 

 
+
+
Variations

+
Use the switch-* modifier to create variations.

+
<span class="switch switch-secondary">...</span>
+<span class="switch switch-success">...</span>
+<span class="switch switch-info">...</span>
+<span class="switch switch-warning">...</span>
+<span class="switch switch-danger">...</span>
+<span class="switch switch-light">...</span>
+<span class="switch switch-dark">...</span>
+

+

+  
+  
+

+

+  
+  
+

+

+  
+  
+

+

+  
+  
+

+

+  
+  
+

+

+  
+  
+

+

+  
+  
+

+
@@ -111,8 +151,8 @@ Shoelace logo -

- Shoelace.css 1.0.0-beta13 · +

+ Shoelace.css 1.0.0-beta14 · © A Beautiful Site, LLC

@@ -123,8 +163,8 @@ Star

- Follow - Donate + Follow + Donate

diff --git a/docs/tables.html b/docs/tables.html index f3faa60c..2ef3ebf8 100644 --- a/docs/tables.html +++ b/docs/tables.html @@ -19,7 +19,7 @@ Shoelace logo -

+

A back to the basics CSS starter kit. For when you don’t need the whole boot.

@@ -134,8 +134,8 @@ Shoelace logo -

- Shoelace.css 1.0.0-beta13 · +

+ Shoelace.css 1.0.0-beta14 · © A Beautiful Site, LLC

@@ -146,8 +146,8 @@ Star

- Follow - Donate + Follow + Donate

diff --git a/docs/tabs.html b/docs/tabs.html index 1657e033..7de0dcca 100644 --- a/docs/tabs.html +++ b/docs/tabs.html @@ -19,7 +19,7 @@ Shoelace logo -

+

A back to the basics CSS starter kit. For when you don’t need the whole boot.

@@ -184,8 +184,8 @@ Shoelace logo -

- Shoelace.css 1.0.0-beta13 · +

+ Shoelace.css 1.0.0-beta14 · © A Beautiful Site, LLC

@@ -196,8 +196,8 @@ Star

- Follow - Donate + Follow + Donate

diff --git a/docs/utilities.html b/docs/utilities.html index b35c64eb..2af5e77c 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -19,7 +19,7 @@ Shoelace logo -

+

A back to the basics CSS starter kit. For when you don’t need the whole boot.

@@ -50,8 +50,7 @@

Utilities

Shoelace provides a number of helpful utility classes that make prototyping easier.

Text Utilities

-

Text utilities are classes that can be applied to just about any element. The text inside will be -formatted appropriately.

+

Text utility classes can be applied to change an element’s text.

@@ -60,6 +59,14 @@ formatted appropriately.

+ + + + + + + + @@ -77,8 +84,12 @@ formatted appropriately.

- - + + + + + + @@ -127,11 +138,23 @@ formatted appropriately.
text-primaryThis is primary text
text-secondaryThis is secondary text
text-success This is success text This is danger text
text-mutedThis is muted texttext-lightThis is light text
text-darkThis is dark text
text-small
+

Background Utilities

+

Background utility classes can be applied to change an element’s background color.

+
bg-primary
+
bg-secondary
+
bg-success
+
bg-info
+
bg-warning
+
bg-danger
+
bg-light
+
bg-dark
+

Float Utilities

Float utilities are provided to easily float elements to the left or right. Just apply the float-left or float-right class to an element to float it left or right.

A clearfix utility is also available to clear floated elements. Just apply the clearfix class to the appropriate element.

Sizing Utilities

Sizing utilities can be used to set a relative width or height on any element. Just apply a width-* or height-* class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.

+

You can also use the max-width-100 and max-height-100 classes to set a max width and height of 100%.

<div class="width-25">25%</div>
 <div class="width-50">50%</div>
 <div class="width-75">75%</div>
@@ -179,8 +202,8 @@ margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
     
       Shoelace logo
     
-    

-      Shoelace.css 1.0.0-beta13 ·
+    

+      Shoelace.css 1.0.0-beta14 ·
       © A Beautiful Site, LLC
     

 
@@ -191,8 +214,8 @@ margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
       Star
     

     

-      Follow
-      Donate
+      Follow
+      Donate
     

   
 
diff --git a/index.html b/index.html
index 223c6804..86fd0f83 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
   

     
Shoelace logo

 
-    

+    

       A back to the basics CSS starter kit. For when you don’t need the whole boot.
     

   

@@ -40,7 +40,7 @@
   :root {
     --body-color: white;
     --body-bg-color: black;
-    --color-primary: #09d;
+    --state-primary: #09d;
   }
 </style>
@@ -61,7 +61,7 @@ Star

-

+

© A Beautiful Site, LLC

diff --git a/package.json b/package.json index 96e92f7c..40611505 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "shoelace-css", "description": "A back to the basics CSS starter kit.", - "version": "1.0.0-beta13", + "version": "1.0.0-beta14", "author": "Cory LaViska", "homepage": "https://shoelace.style/", "license": "MIT", diff --git a/source/css/_docs.css b/source/css/_docs.css index 315bdecc..71be5f37 100644 --- a/source/css/_docs.css +++ b/source/css/_docs.css @@ -39,7 +39,7 @@ body { } #nav a.current { - color: var(--text-muted); + color: var(--state-secondary); cursor: default; } @@ -154,7 +154,7 @@ a code { } .width-sizing-example div { - background: var(--color-primary); + background: var(--state-primary); color: white; text-align: center; padding: .25rem; @@ -175,7 +175,7 @@ a code { .height-sizing-example div { width: calc(25% - 1rem); float: left; - background: var(--color-primary); + background: var(--state-primary); color: white; text-align: center; padding: .25rem; diff --git a/source/css/alerts.css b/source/css/alerts.css index 39daed47..bd3c80d3 100644 --- a/source/css/alerts.css +++ b/source/css/alerts.css @@ -1,49 +1,20 @@ /*! Alerts */ +:root { + --alert-color: var(--color-white); + --alert-bg-color: var(--state-primary); + --alert-padding-x: var(--component-spacing); + --alert-padding-y: var(--component-spacing); +} .alert { color: var(--alert-color); background-color: var(--alert-bg-color); - border-radius: var(--alert-border-radius); - padding: var(--alert-spacing-y) var(--alert-spacing-x); + border-radius: var(--component-border-radius); + padding: var(--alert-padding-y) var(--alert-padding-x); margin-top: 0; margin-bottom: 1rem; } -.alert-secondary { - color: var(--alert-color-secondary); - background-color: var(--alert-bg-color-secondary); -} - -.alert-success { - color: var(--alert-color-success); - background-color: var(--alert-bg-color-success); -} - -.alert-info { - color: var(--alert-color-info); - background-color: var(--alert-bg-color-info); -} - -.alert-warning { - color: var(--alert-color-warning); - background-color: var(--alert-bg-color-warning); -} - -.alert-danger { - color: var(--alert-color-danger); - background-color: var(--alert-bg-color-danger); -} - -.alert-light { - color: var(--alert-color-light); - background-color: var(--alert-bg-color-light); -} - -.alert-dark { - color: var(--alert-color-dark); - background-color: var(--alert-bg-color-dark); -} - .alert:empty { display: none; } @@ -56,3 +27,34 @@ .alert :last-child { margin-bottom: 0; } + +/* Variations */ +.alert-secondary { + background-color: var(--state-secondary); +} + +.alert-success { + background-color: var(--state-success); +} + +.alert-info { + background-color: var(--state-info); +} + +.alert-warning { + background-color: var(--state-warning); +} + +.alert-danger { + background-color: var(--state-danger); +} + +.alert-light { + color: var(--state-dark); + background-color: var(--state-light); +} + +.alert-dark { + color: var(--state-light); + background-color: var(--state-dark); +} diff --git a/source/css/badges.css b/source/css/badges.css index d6019e6f..03b37e2d 100644 --- a/source/css/badges.css +++ b/source/css/badges.css @@ -1,57 +1,62 @@ /*! Badges */ +:root { + --badge-font-size: .8em; /* ems for relative sizing */ + --badge-color: var(--color-white); + --badge-bg-color: var(--state-primary); + --badge-border-radius: 1em; /* ems for relative sizing */ + --badge-box-shadow-hover: inset 0 0 0 1em rgba(0, 0, 0, .1); +} .badge { font-size: var(--badge-font-size); - font-weight: var(--badge-font-weight); color: var(--badge-color); background-color: var(--badge-bg-color); border-radius: var(--badge-border-radius); - padding: var(--badge-spacing-y) var(--badge-spacing-x); + padding: .2em .6em; vertical-align: baseline; display: inline-block; transition: .1s box-shadow, .1s background-color, .1s color; } -.badge-secondary { - color: var(--badge-color-secondary); - background-color: var(--badge-bg-color-secondary); -} - -.badge-success { - color: var(--badge-color-success); - background-color: var(--badge-bg-color-success); -} - -.badge-info { - color: var(--badge-color-info); - background-color: var(--badge-bg-color-info); -} - -.badge-warning { - color: var(--badge-color-warning); - background-color: var(--badge-bg-color-warning); -} - -.badge-danger { - color: var(--badge-color-danger); - background-color: var(--badge-bg-color-danger); -} - -.badge-light { - color: var(--badge-color-light); - background-color: var(--badge-bg-color-light); -} - -.badge-dark { - color: var(--badge-color-dark); - background-color: var(--badge-bg-color-dark); -} - .badge:empty { display: none; } a.badge:hover { + color: var(--badge-color); text-decoration: none; box-shadow: var(--badge-box-shadow-hover); } + +/* Variations */ +.badge-secondary { + background-color: var(--state-secondary); +} + +.badge-success { + background-color: var(--state-success); +} + +.badge-info { + background-color: var(--state-info); +} + +.badge-warning { + background-color: var(--state-warning); +} + +.badge-danger { + background-color: var(--state-danger); +} + +.badge-light, +a.badge-light:hover { + color: var(--state-dark); + background-color: var(--state-light); +} + +.badge-dark, +a.badge-dark:hover { + color: var(--state-light); + background-color: var(--state-dark); +} diff --git a/source/css/buttons.css b/source/css/buttons.css index 5cdd366a..7895aa63 100644 --- a/source/css/buttons.css +++ b/source/css/buttons.css @@ -1,4 +1,20 @@ /*! Buttons */ +:root { + --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-color: var(--color-white); + --button-bg-color: var(--state-primary); + --button-height: var(--input-height); + --button-height-small: var(--input-height-small); + --button-height-big: var(--input-height-big); + --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); + --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, .button { @@ -40,41 +56,6 @@ button, display: block; } -.button-secondary { - color: var(--button-color-secondary); - background-color: var(--button-bg-color-secondary); -} - -.button-success { - color: var(--button-color-success); - background-color: var(--button-bg-color-success); -} - -.button-info { - color: var(--button-color-info); - background-color: var(--button-bg-color-info); -} - -.button-warning { - color: var(--button-color-warning); - background-color: var(--button-bg-color-warning); -} - -.button-danger { - color: var(--button-color-danger); - background-color: var(--button-bg-color-danger); -} - -.button-light { - color: var(--button-color-light); - background-color: var(--button-bg-color-light); -} - -.button-dark { - color: var(--button-color-dark); - background-color: var(--button-bg-color-dark); -} - .button-link { background-color: transparent; color: var(--link-color); @@ -82,7 +63,7 @@ button, box-shadow: none; } -.button-link:hover:not(:disabled):not(.disabled) { +.button-link:hover:not(:disabled) { background-color: transparent; color: var(--link-color-hover); text-decoration: var(--link-text-decoration-hover); @@ -90,24 +71,23 @@ button, } button:hover, -.button:hover { +a.button:hover { + color: var(--button-color); text-decoration: none; } -button:hover:not(:disabled), -.button:hover:not(.disabled) { +button:hover:not(:disabled) { + color: var(--button-color); box-shadow: var(--button-box-shadow-hover); } button:active:not(.button-link):not(:disabled), button.active:not(.button-link):not(:disabled), -.button.active:not(.button-link):not(.disabled) { +a.button.active:not(.button-link) { box-shadow: var(--button-box-shadow-active); } -button:disabled, -button.disabled, -.button.disabled { +button:disabled { opacity: .5; cursor: not-allowed; } @@ -115,3 +95,38 @@ button.disabled, label.button input[type="file"] { display: none; } + +/* Variations */ +.button-secondary { + background-color: var(--state-secondary); +} + +.button-success { + background-color: var(--state-success); +} + +.button-info { + background-color: var(--state-info); +} + +.button-warning { + background-color: var(--state-warning); +} + +.button-danger { + background-color: var(--state-danger); +} + +.button-light, +button.button-light:hover:not(:disabled), +a.button-light:hover { + color: var(--state-dark); + background-color: var(--state-light); +} + +.button-dark, +button.button-dark:hover:not(:disabled), +a.button-dark { + color: var(--state-light); + background-color: var(--state-dark); +} diff --git a/source/css/content.css b/source/css/content.css index 31eed9b8..b8cc7930 100644 --- a/source/css/content.css +++ b/source/css/content.css @@ -1,4 +1,66 @@ /*! Content */ +:root { + --body-bg-color: var(--color-white); + --body-color: var(--color-black); + --font-family: var(--font-system); + --font-size: 1rem; /* Most browsers use a default font size of 16px */ + --font-size-big: 1.25rem; + --font-size-small: .875rem; + --font-weight-light: 300; + --font-weight: 400; + --font-weight-bold: 700; + --line-height: 1.5; + + --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(--state-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(--state-secondary); + + --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(--state-primary); +} /* Box sizing reset */ html { diff --git a/source/css/dropdowns.css b/source/css/dropdowns.css index b80709e2..698d341e 100644 --- a/source/css/dropdowns.css +++ b/source/css/dropdowns.css @@ -1,4 +1,24 @@ /*! Dropdowns */ +:root { + --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(--state-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: 1rem; + --dropdown-spacing-y: .25rem; + --dropdown-z-index: 100; +} .dropdown { position: relative; @@ -13,6 +33,7 @@ margin-left: .5em; display: inline-block; transform: scaleY(.75); + margin-top: -.2em; } .dropdown-top .dropdown-trigger::after { diff --git a/source/css/forms.css b/source/css/forms.css index 8e2470c8..cdb84ecf 100644 --- a/source/css/forms.css +++ b/source/css/forms.css @@ -1,4 +1,37 @@ /*! Forms */ +:root { + --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(--state-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(--state-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); +} fieldset { border: solid var(--fieldset-border-width) var(--fieldset-border-color); @@ -322,7 +355,7 @@ progress { /* Input addons */ .input-addon { font-size: var(--input-font-size); - color: var(--text-muted); + color: var(--state-secondary); height: var(--input-height); line-height: var(--input-height); border-top: solid var(--input-border-width) var(--input-border-color); diff --git a/source/css/loaders.css b/source/css/loaders.css index 2f777cbe..1ae8091a 100644 --- a/source/css/loaders.css +++ b/source/css/loaders.css @@ -1,4 +1,17 @@ /*! Loaders */ +:root { + --loader-bg-color: var(--component-bg-color); + --loader-border-color: var(--state-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-margin-x: var(--component-spacing-small); + --loader-margin-y: 0; +} @keyframes loader { 0% { transform: rotate(0deg); } @@ -16,7 +29,7 @@ display: inline-block; animation: loader var(--loader-speed) linear infinite; vertical-align: middle; - margin: var(--loader-spacing-y) var(--loader-spacing-x); + margin: var(--loader-margin-y) var(--loader-margin-x); } .loader-bg { @@ -54,3 +67,48 @@ top: calc(50% - var(--loader-size-big) / 2); left: calc(50% - var(--loader-size-big) / 2); } + +/* Variations */ +.loader-secondary, +.loader-secondary.loader-bg::after { + border-top-color: var(--state-secondary); + border-left-color: var(--state-secondary); +} + +.loader-success, +.loader-success.loader-bg::after { + border-top-color: var(--state-success); + border-left-color: var(--state-success); +} + +.loader-info, +.loader-info.loader-bg::after { + border-top-color: var(--state-info); + border-left-color: var(--state-info); +} + +.loader-warning, +.loader-warning.loader-bg::after { + border-top-color: var(--state-warning); + border-left-color: var(--state-warning); +} + +.loader-danger, +.loader-danger.loader-bg::after { + border-top-color: var(--state-danger); + border-left-color: var(--state-danger); +} + +.loader-light, +.loader-light.loader-bg::after { + border-top-color: var(--state-light); + border-left-color: var(--state-light); + border-bottom-color: var(--state-dark); + border-right-color: var(--state-dark); +} + +.loader-dark, +.loader-dark.loader-bg::after { + border-top-color: var(--state-dark); + border-left-color: var(--state-dark); +} diff --git a/source/css/progress-bars.css b/source/css/progress-bars.css index 2a8ad1c2..ea92ee6a 100644 --- a/source/css/progress-bars.css +++ b/source/css/progress-bars.css @@ -1,4 +1,19 @@ /*! Progress Bars */ +:root { + --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(--state-primary); + --progress-border-radius: var(--component-border-radius); + --progress-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); + --progress-speed-change: .2s; + --progress-speed-indeterminate: 1.5s; +} @keyframes progress-indeterminate { 0% { @@ -21,6 +36,7 @@ display: block; overflow: hidden; margin-bottom: 1rem; + box-shadow: var(--progress-box-shadow); } .progress-bar { @@ -53,3 +69,38 @@ width: 50% !important; animation: progress-indeterminate linear var(--progress-speed-indeterminate) infinite; } + +/* Variations */ +.progress-secondary .progress-bar { + background-color: var(--state-secondary); +} + +.progress-success .progress-bar { + background-color: var(--state-success); +} + +.progress-info .progress-bar { + background-color: var(--state-info); +} + +.progress-warning .progress-bar { + background-color: var(--state-warning); +} + +.progress-danger .progress-bar { + background-color: var(--state-danger); +} + +.progress-light { + background-color: var(--state-dark); +} + +.progress-light .progress-bar { + color: var(--state-dark); + background-color: var(--state-light); +} + +.progress-dark .progress-bar { + color: var(--state-light); + background-color: var(--state-dark); +} diff --git a/source/css/shoelace.css b/source/css/shoelace.css index 57f69140..3783993a 100644 --- a/source/css/shoelace.css +++ b/source/css/shoelace.css @@ -6,14 +6,8 @@ Source: https://github.com/claviska/shoelace-css */ -/* Reset */ @import url('normalize.css'); - -/* Shoelace variables and base styles */ -@import url('variables.css'); @import url('content.css'); - -/* Components */ @import url('alerts.css'); @import url('badges.css'); @import url('buttons.css'); @@ -25,3 +19,49 @@ @import url('tabs.css'); @import url('tables.css'); @import url('utilities.css'); + +:root { + /* Fonts */ + --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; + + /* Colors (most courtesy of http://clrs.cc/) */ + --color-white: white; + --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; + + /* States */ + --state-primary: tomato; + --state-secondary: #a5a5a5; + --state-success: var(--color-green); + --state-info: var(--color-teal); + --state-warning: var(--color-orange); + --state-danger: var(--color-red); + --state-light: #eee; + --state-dark: var(--color-black); + + /* Components */ + --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; +} diff --git a/source/css/switches.css b/source/css/switches.css index ed436cbb..ea20a0e4 100644 --- a/source/css/switches.css +++ b/source/css/switches.css @@ -1,4 +1,20 @@ /*! Switches */ +:root { + --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(--state-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: white; + --switch-thumb-border-radius: 50%; + --switch-thumb-spacing: 2px; + --switch-speed: .2s; +} + .switch { font-size: var(--switch-font-size); } @@ -112,3 +128,40 @@ .switch + .switch { margin-left: 1rem; } + +/* Variations */ +.switch-secondary input:checked + label::before { + background-color: var(--state-secondary); +} + +.switch-success input:checked + label::before { + background-color: var(--state-success); +} + +.switch-info input:checked + label::before { + background-color: var(--state-info); +} + +.switch-warning input:checked + label::before { + background-color: var(--state-warning); +} + +.switch-danger input:checked + label::before { + background-color: var(--state-danger); +} + +.switch-light input + label::before { + background-color: var(--state-dark); +} + +.switch-light input:checked + label::before { + background-color: var(--state-light); +} + +.switch-dark input + label::before { + background-color: var(--state-light); +} + +.switch-dark input:checked + label::before { + background-color: var(--state-dark); +} diff --git a/source/css/tables.css b/source/css/tables.css index 2e47cfa7..9dd4e203 100644 --- a/source/css/tables.css +++ b/source/css/tables.css @@ -1,4 +1,14 @@ /*! Tables */ +:root { + --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(--state-primary); + --table-spacing-x: calc(var(--component-spacing-small) * 1.5); + --table-spacing-y: var(--component-spacing-small); +} table { width: 100%; @@ -9,7 +19,7 @@ table { table caption { caption-side: bottom; font-size: var(--font-size-small); - color: var(--text-muted); + color: var(--state-secondary); text-align: center; padding-top: var(--table-spacing-y); } diff --git a/source/css/tabs.css b/source/css/tabs.css index bc22d81c..8b55c65f 100644 --- a/source/css/tabs.css +++ b/source/css/tabs.css @@ -1,4 +1,23 @@ /*! Tabs */ +:root { + --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(--state-secondary); + --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); +} .tabs { width: 100%; diff --git a/source/css/utilities.css b/source/css/utilities.css index 0f6a7664..626b064d 100644 --- a/source/css/utilities.css +++ b/source/css/utilities.css @@ -1,4 +1,56 @@ /*! Utilties */ +:root { + --spacing-small: var(--component-spacing); + --spacing-medium: calc(var(--component-spacing) * 2); + --spacing-big: calc(var(--component-spacing) * 4); +} + +/*************************************************************************************************** +* Text utilities +***************************************************************************************************/ + +/* Text color */ +.text-primary { color: var(--state-primary) !important; } +.text-secondary { color: var(--state-secondary) !important; } +.text-success { color: var(--state-success) !important; } +.text-success { color: var(--state-success) !important; } +.text-info { color: var(--state-info) !important; } +.text-warning { color: var(--state-warning) !important; } +.text-danger { color: var(--state-danger) !important; } +.text-light { color: var(--state-light) !important; } +.text-dark { color: var(--state-dark) !important; } + +/* Text style */ +.text-small { font-size: var(--font-size-small) !important; } +.text-bold { font-weight: var(--font-weight-bold) !important; } +.text-italic { font-style: italic !important; } + +/* Text alignment */ +.text-left { text-align: left !important; } +.text-right { text-align: right !important; } +.text-center { text-align: center !important; } +.text-justify { text-align: justify !important; } + +/* Text case */ +.text-lowercase { text-transform: lowercase !important; } +.text-uppercase { text-transform: uppercase !important; } +.text-capitalize { text-transform: capitalize !important; } + +/* Text wrapping */ +.text-nowrap { white-space: nowrap !important; } + +/*************************************************************************************************** +* Background utilities +***************************************************************************************************/ + +.bg-primary { background-color: var(--state-primary) !important; } +.bg-secondary { background-color: var(--state-secondary) !important; } +.bg-success { background-color: var(--state-success) !important; } +.bg-info { background-color: var(--state-info) !important; } +.bg-warning { background-color: var(--state-warning) !important; } +.bg-danger { background-color: var(--state-danger) !important; } +.bg-light { background-color: var(--state-light) !important; } +.bg-dark { background-color: var(--state-dark) !important; } /*************************************************************************************************** * Float utilities @@ -70,6 +122,9 @@ .height-95 { height: 95% !important; } .height-100 { height: 100% !important; } +.max-width-100 { max-width: 100% !important; } +.max-height-100 { max-width: 100% !important; } + /*************************************************************************************************** * Spacing utilities ***************************************************************************************************/ @@ -141,33 +196,3 @@ .margin-x-auto { margin-left: auto !important; margin-right: auto !important; } .margin-y-auto { margin-top: auto !important; margin-bottom: auto !important; } .margin-xy-auto { margin: auto !important; } - -/*************************************************************************************************** -* Text utilities -***************************************************************************************************/ - -/* Text color */ -.text-success { color: var(--state-success) !important; } -.text-info { color: var(--state-info) !important; } -.text-warning { color: var(--state-warning) !important; } -.text-danger { color: var(--state-danger) !important; } -.text-muted { color: var(--text-muted) !important; } - -/* Text style */ -.text-small { font-size: var(--font-size-small) !important; } -.text-bold { font-weight: var(--font-weight-bold) !important; } -.text-italic { font-style: italic !important; } - -/* Text alignment */ -.text-left { text-align: left !important; } -.text-right { text-align: right !important; } -.text-center { text-align: center !important; } -.text-justify { text-align: justify !important; } - -/* Text case */ -.text-lowercase { text-transform: lowercase !important; } -.text-uppercase { text-transform: uppercase !important; } -.text-capitalize { text-transform: capitalize !important; } - -/* Text wrapping */ -.text-nowrap { white-space: nowrap !important; } diff --git a/source/css/variables.css b/source/css/variables.css deleted file mode 100644 index 5bd93f6d..00000000 --- a/source/css/variables.css +++ /dev/null @@ -1,338 +0,0 @@ -/*! Variables */ - -:root { - /* Fonts */ - --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; - - /* Colors (most courtesy of http://clrs.cc/) */ - --color-primary: tomato; - --color-secondary: #a5a5a5; - --color-white: white; - --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; - - /* States */ - --state-success: var(--color-green); - --state-info: var(--color-teal); - --state-warning: var(--color-orange); - --state-danger: var(--color-red); - --state-light: #f2f2f2; - --state-dark: var(--color-black); - - /* Components */ - --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; - - /* Content */ - --body-bg-color: var(--color-white); - --body-color: var(--color-black); - --font-family: var(--font-system); - --font-size: 1rem; /* Most browsers use a default font size of 16px */ - --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); - - /* Alerts */ - --alert-border-radius: var(--component-border-radius); - --alert-spacing-x: var(--component-spacing); - --alert-spacing-y: var(--component-spacing); - - --alert-color: var(--color-white); - --alert-bg-color: var(--color-primary); - - --alert-color-secondary: var(--color-white); - --alert-bg-color-secondary: var(--color-secondary); - - --alert-color-success: var(--color-white); - --alert-bg-color-success: var(--state-success); - - --alert-color-info: var(--color-white); - --alert-bg-color-info: var(--state-info); - - --alert-color-warning: var(--color-white); - --alert-bg-color-warning: var(--state-warning); - - --alert-color-danger: var(--color-white); - --alert-bg-color-danger: var(--state-danger); - - --alert-color-light: var(--color-black); - --alert-bg-color-light: var(--state-light); - - --alert-color-dark: var(--color-white); - --alert-bg-color-dark: var(--state-dark); - - /* Badges */ - --badge-font-size: .8em; /* ems for relative sizing */ - --badge-font-weight: var(--font-weight); - --badge-border-radius: 1em; /* ems for relative sizing */ - --badge-box-shadow-hover: inset 0 0 0 1em rgba(0, 0, 0, .1); - --badge-spacing-x: .6em; - --badge-spacing-y: .2em; - - --badge-color: var(--color-white); - --badge-bg-color: var(--color-primary); - - --badge-color-secondary: var(--color-white); - --badge-bg-color-secondary: var(--color-secondary); - - --badge-color-success: var(--color-white); - --badge-bg-color-success: var(--state-success); - - --badge-color-info: var(--color-white); - --badge-bg-color-info: var(--state-info); - - --badge-color-warning: var(--color-white); - --badge-bg-color-warning: var(--state-warning); - - --badge-color-danger: var(--color-white); - --badge-bg-color-danger: var(--state-danger); - - --badge-color-light: var(--color-black); - --badge-bg-color-light: var(--state-light); - - --badge-color-dark: var(--color-white); - --badge-bg-color-dark: var(--state-dark); - - /* Buttons */ - --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-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); - --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-color: var(--color-white); - --button-bg-color: var(--color-primary); - - --button-color-secondary: var(--color-white); - --button-bg-color-secondary: var(--color-secondary); - - --button-color-success: var(--color-white); - --button-bg-color-success: var(--state-success); - - --button-color-info: var(--color-white); - --button-bg-color-info: var(--state-info); - - --button-color-warning: var(--color-white); - --button-bg-color-warning: var(--state-warning); - - --button-color-danger: var(--color-white); - --button-bg-color-danger: var(--state-danger); - - --button-color-light: var(--color-black); - --button-bg-color-light: var(--state-light); - - --button-color-dark: var(--color-white); - --button-bg-color-dark: var(--state-dark); - - /* Dropdowns */ - --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; - - /* Forms */ - --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); - - /* Loaders */ - --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 */ - --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 Utilties */ - --spacing-small: var(--component-spacing); - --spacing-medium: calc(var(--component-spacing) * 2); - --spacing-big: calc(var(--component-spacing) * 4); - - /* Switches */ - --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: white; - --switch-thumb-border-radius: 50%; - --switch-thumb-spacing: 2px; - --switch-speed: .2s; - - /* Tabs */ - --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); - - /* Tables */ - --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); -} diff --git a/source/docs/alerts.md b/source/docs/alerts.md index f80bd7ad..ce6eb4d4 100644 --- a/source/docs/alerts.md +++ b/source/docs/alerts.md @@ -6,7 +6,17 @@ description: Call attention in your app with alerts. ## Alerts -Create an alert by applying the `alert` class to an element such as a `
`. You can change an alert’s appearance using the `alert-*` modifier. +Create an alert by applying the `alert` class to an element such as a `
`. + +```html +
This is an alert
+``` + +
This is an alert
+ +## Variations + +Use the `alert-*` modifier to create variations. ```html
Primary
diff --git a/source/docs/badges.md b/source/docs/badges.md index dc7f2906..2aef727f 100644 --- a/source/docs/badges.md +++ b/source/docs/badges.md @@ -6,29 +6,13 @@ description: Add badges to your app with minimal effort. ## Badges -Create a badge by applying the `badge` class to an element such as a ``. You can change a badge’s appearance using the `badge-*` modifier. +Create a badge by applying the `badge` class to an element such as a ``. ```html -Primary -Secondary -Success -Info -Warning -Danger -Light -Dark +Badge ``` -

- Primary - Secondary - Success - Info - Warning - Danger - Light - Dark -

+Badge By default, badges are sized relative to their parent element. @@ -44,9 +28,34 @@ By default, badges are sized relative to their parent element.

Heading 3 Badge

Paragraph Badge

+### Variations + +Use the `badge-*` modifier to create variations. + +```html +Primary +Secondary +Success +Info +Warning +Danger +Light +Dark +``` + +Primary +Secondary +Success +Info +Warning +Danger +Light +Dark ### Badge Links +Badges can also be made into links. + ```html Primary Secondary @@ -58,13 +67,11 @@ By default, badges are sized relative to their parent element. Dark ``` -

- Primary - Secondary - Success - Info - Warning - Danger - Light - Dark -

+Primary +Secondary +Success +Info +Warning +Danger +Light +Dark diff --git a/source/docs/buttons.md b/source/docs/buttons.md index ebf8f9c6..c110ec53 100644 --- a/source/docs/buttons.md +++ b/source/docs/buttons.md @@ -6,11 +6,78 @@ description: Add styled buttons to your app with minimal effort. ## Buttons -To create a button, use the ` +``` + +
+ +
+ +Use the `button-small` and `button-big` modifiers to change the size of a button. + +```html + + + +``` + +
+ + + +
+ +Use the `button-block` modifier to make a button span the entire width of its parent. + +```html + + + +``` + +
+ +
+ +
+ +
+ +
+ +
+ +To disable a button set the `disabled` property on ` +``` + +
+ +
+ +You can force buttons to have an active state by applying the `active` class. + +```html + +``` + +
+ +
+ +### Variations + +Use the `button-*` modifier to create variations. ```html + @@ -29,65 +96,17 @@ To create a button, use the `
-Use the `button-small` and `button-big` modifiers to change the size of a button. - -
- - - -
- -Use the `button-block` modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed. - -
- -
- -
- -
- -
- -
- -Disabled buttons look like this. Set the `disabled` property on ` - - - - - - - -
- -You can force buttons to have an active state by applying the `active` class. - -
- - - - - - - - -
- ### Link Buttons -Buttons can be styled to look like normal links with the `button-link` modifier. The appropriate sizing is placed so they align properly with regular buttons. +Buttons can be styled to look like normal links with the `button-link` modifier. Button sizing is maintained so they align properly with other buttons. ```html -Button + Link ```
- Button + Link
diff --git a/source/docs/content.md b/source/docs/content.md index f206af2e..0ae00a8f 100644 --- a/source/docs/content.md +++ b/source/docs/content.md @@ -6,9 +6,9 @@ description: Default content styles. ## Content -Shoelace gives you an easy way to customize most HTML elements with variables. You don’t need to apply any classes to achieve these styles — just use the appropriate tags. +Shoelace provides default content styles that are easy to customize. You don’t need to apply any classes to achieve these styles — just use the appropriate tags. -For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in `rem` units. +For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in `rem` units. Shoelace also sets `box-sizing: border-box` globally to make it easier to properly size elements. ### Headings `

–

` diff --git a/source/docs/customizing.md b/source/docs/customizing.md index e8949b8f..6ed2f74e 100644 --- a/source/docs/customizing.md +++ b/source/docs/customizing.md @@ -6,20 +6,25 @@ description: Learn how to customize Shoelace.css with CSS variables. ## Customizing -You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in [`variables.css`](../source/css/variables.css) in your own stylesheet. +You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in the `:root` block of [`shoelace.css`](../source/css/shoelace.css). -For example, you can customize the default text color and background like this: +For example, you can customize the default text color, background color, and the primary color by adding this to your stylesheet: ```css :root { --body-color: white; --body-bg-color: black; + --state-primary: #09d; } ``` +You don’t need to include all of the variables. You only need to override the ones you actually want to customize. + +Additional variables can be found in the `:root` block of each component’s stylesheet. For example, to customize alerts, refer to the top of [`alerts.css`](https://github.com/claviska/shoelace-css/blob/master/source/css/alerts.css) for a list of variables. + ### Using Variables -You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own [custom components](#custom-components). +You can use any of Shoelace’s variables in your own stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own [custom components](#creating-custom-components). ```css .your-selector { @@ -27,16 +32,16 @@ You can use any of Shoelace’s variables in your stylesheet. This makes it easy } ``` -Refer to [`variables.css`](../source/css/variables.css) for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, [this article](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) will bring you up to speed. There’s also an [interactive demo](https://codepen.io/claviska/pen/NvGVYM?editors=1100) if you want to experiment. +If you’re not familiar with CSS variables, [this article](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) will bring you up to speed. There’s also an [interactive demo](https://codepen.io/claviska/pen/NvGVYM?editors=1100) if you want to experiment. -### Custom Components +### Creating Custom Components You can create custom components to extend Shoelace’s functionality. Here are some best practices to keep things consistent and easy for others to understand. **Familiarize yourself with Shoelace’s naming conventions.** A custom accordion component, for example, would have a class name such as `accordion`, modifier classes such as `accordion-open`, and variable names that look like `--accordion-bg-color`. Try to follow similar patterns as much as possible. -**Define new variables when it makes sense to.** Take a look at [`variables.css`](../source/css/variables.css) to see how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components. +**Define new variables when it makes sense to.** Take a look at how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components. **Semantic markup is strongly encouraged.** Custom components should use the most appropriate elements and the minimal amount of markup required. -**Keep everything together.** During development, each component should be in its own folder along with its stylesheets, scripts, and documentation. Components shouldn’t depend on other components’ styles or scripts. This makes it easier to add or remove components from your app without affecting others. Of course, it’s perfectly fine to bundle components for optimization purposes in production. +**Keep everything together.** Each component should be in its own folder along with its stylesheets, scripts, and documentation. Components can use core variables, but they shouldn’t depend on other components’ styles or scripts to work. This makes it easier to add or remove components from your app without worrying about dependencies. diff --git a/source/docs/dropdowns.md b/source/docs/dropdowns.md index 4e9ca06c..1f99246d 100644 --- a/source/docs/dropdowns.md +++ b/source/docs/dropdowns.md @@ -89,9 +89,27 @@ Use the `dropdown-top` and `dropdown-left` modifiers to change the positioning o Dropdowns with button triggers can be used inside input groups. +```html
$ + +
+ +
+ USD + AUD + CAD + GBP +
+
+
+``` + +
+ $ + +
diff --git a/source/docs/forms.md b/source/docs/forms.md index 5e057262..08f39f76 100644 --- a/source/docs/forms.md +++ b/source/docs/forms.md @@ -43,7 +43,7 @@ Form controls are styled at 100% of the width of their parent element. <input type="file">
- + File inputs aren’t supported. Use a [file button](buttons.html#file-buttons) instead. @@ -200,35 +200,27 @@ Form controls and buttons can be grouped by wrapping them in `input-group` conta
``` -
-
- - -
+
+ +
-
-
- - -
+
+ +
-
-
- - - - -
+
+ + + +
-
-
- - - -
+
+ + +
### Input Addons diff --git a/source/docs/icons.md b/source/docs/icons.md index 37997c7d..fae7f127 100644 --- a/source/docs/icons.md +++ b/source/docs/icons.md @@ -22,7 +22,7 @@ You can load Font Awesome locally or via CDN. To use the CDN version, add this t Then add icons as you normally would with ``: -
+
diff --git a/source/docs/loaders.md b/source/docs/loaders.md index c4644aef..4ab7250b 100644 --- a/source/docs/loaders.md +++ b/source/docs/loaders.md @@ -19,6 +19,8 @@ Create a pure CSS loader by applying the `loader` class to an empty `` ele
+### Background Loaders + You can simulate a background loader using `loader-bg`. This is achieved using `position: relative` on the container and the `::after` pseudo-element. You can use the `loader-bg-small` and `loader-bg-big` modifiers to change the size. ```html @@ -32,3 +34,25 @@ You can simulate a background loader using `loader-bg`. This is achieved using `
+ +### Variations + +Use the `loader-*` modifier to create variations. + +```html + + + + + + + +``` + + + + + + + + diff --git a/source/docs/progress-bars.md b/source/docs/progress-bars.md index 3ef24b83..fbe7b913 100644 --- a/source/docs/progress-bars.md +++ b/source/docs/progress-bars.md @@ -49,3 +49,73 @@ When progress can’t be determined, use the `progress-indeterminate` modifier t
+ +### Variations + +Use the `progress-*` modifier to create variations. + +```html +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+``` + +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
+ +
+
50%
+
diff --git a/source/docs/switches.md b/source/docs/switches.md index 35784040..2c4c25d2 100644 --- a/source/docs/switches.md +++ b/source/docs/switches.md @@ -67,3 +67,53 @@ Disabled switches are dimmed out. To disable a switch, add the `disabled` attrib
+ + +### Variations + +Use the `switch-*` modifier to create variations. + +```html +... +... +... +... +... +... +... +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/source/docs/utilities.md b/source/docs/utilities.md index 9fc76563..e4179061 100644 --- a/source/docs/utilities.md +++ b/source/docs/utilities.md @@ -10,8 +10,7 @@ Shoelace provides a number of helpful utility classes that make prototyping easi ### Text Utilities -Text utilities are classes that can be applied to just about any element. The text inside will be -formatted appropriately. +Text utility classes can be applied to change an element’s text. @@ -21,6 +20,14 @@ formatted appropriately. + + + + + + + + @@ -38,8 +45,12 @@ formatted appropriately. - - + + + + + + @@ -88,7 +99,21 @@ formatted appropriately.
`text-primary`This is primary text
`text-secondary`This is secondary text
`text-success` This is success textThis is danger text
`text-muted`This is muted text`text-light`This is light text
`text-dark`This is dark text
`text-small`
+### Background Utilities + +Background utility classes can be applied to change an element’s background color. + +
bg-primary
+
bg-secondary
+
bg-success
+
bg-info
+
bg-warning
+
bg-danger
+
bg-light
+
bg-dark
+ ### Float Utilities + Float utilities are provided to easily float elements to the left or right. Just apply the `float-left` or `float-right` class to an element to float it left or right. A clearfix utility is also available to clear floated elements. Just apply the `clearfix` class to the appropriate element. @@ -97,6 +122,8 @@ A clearfix utility is also available to clear floated elements. Just apply the ` Sizing utilities can be used to set a relative width or height on any element. Just apply a `width-*` or `height-*` class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five. +You can also use the `max-width-100` and `max-height-100` classes to set a max width and height of 100%. + ```html
25%
50%
diff --git a/source/layouts/default.html b/source/layouts/default.html index ec4d32c5..714303da 100644 --- a/source/layouts/default.html +++ b/source/layouts/default.html @@ -22,7 +22,7 @@ Shoelace logo
-

+

A back to the basics CSS starter kit. For when you don’t need the whole boot.

@@ -58,7 +58,7 @@ Shoelace logo -

+

Shoelace.css {{version}} · © A Beautiful Site, LLC

@@ -70,8 +70,8 @@ Star

- Follow - Donate + Follow + Donate