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

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.

-
<button type="button">Default</button>
-<button type="button" class="button-success">Success</button>
+
<button type="button">Primary</button>
+<button type="button" class="button-secondary">Secondary</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>
-<button type="button" class="button-inverse">Inverse</button>
-<button type="button" class="button button-link">Link</button>
+<button type="button" class="button-light">Light</button>
+<button type="button" class="button-dark">Dark</button>
 

 

-  
+  
+  
   
   
   
   
-  
-  
+  
+  
 

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

@@ -89,22 +90,36 @@
 
 
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.

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

+

+  
+  
 

 
 
File Buttons

diff --git a/source/css/buttons.css b/source/css/buttons.css
index 912b827a..09235f1c 100644
--- a/source/css/buttons.css
+++ b/source/css/buttons.css
@@ -8,7 +8,7 @@ button,
   text-align: center;
   text-decoration: none;
   color: var(--button-color);
-  background-color: var(--button-bg-color-primary);
+  background-color: var(--button-bg-color);
   border-radius: var(--button-border-radius);
   border: none;
   height: var(--button-height);
@@ -40,9 +40,57 @@ 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);
+  text-decoration: var(--link-text-decoration);
+  box-shadow: none;
+}
+
+.button-link:hover:not(:disabled):not(.disabled) {
+  background-color: transparent;
+  color: var(--link-color-hover);
+  text-decoration: var(--link-text-decoration-hover);
+  box-shadow: none;
+}
+
 button:hover,
 .button:hover {
-  color: var(--button-color);
   text-decoration: none;
 }
 
@@ -54,7 +102,6 @@ button:hover:not(:disabled),
 button:active:not(.button-link):not(:disabled),
 button.active:not(.button-link):not(:disabled),
 .button.active:not(.button-link):not(.disabled) {
-  color: var(--button-color);
   box-shadow: var(--button-box-shadow-active);
 }
 
@@ -65,26 +112,6 @@ button.disabled,
   cursor: not-allowed;
 }
 
-.button-success { background-color: var(--button-bg-color-success); }
-.button-info { background-color: var(--button-bg-color-info); }
-.button-warning { background-color: var(--button-bg-color-warning); }
-.button-danger { background-color: var(--button-bg-color-danger); }
-.button-inverse { background-color: var(--button-bg-color-inverse); }
-
-.button-link {
-  background-color: transparent;
-  color: var(--link-color);
-  text-decoration: var(--link-text-decoration);
-  box-shadow: none;
-}
-
-.button-link:hover:not(:disabled) {
-  background-color: transparent;
-  color: var(--link-color-hover);
-  text-decoration: var(--link-text-decoration-hover);
-  box-shadow: none;
-}
-
 label.button input[type="file"] {
   display: none;
 }
diff --git a/source/css/variables.css b/source/css/variables.css
index 17a9b5ec..de846a5d 100644
--- a/source/css/variables.css
+++ b/source/css/variables.css
@@ -9,6 +9,7 @@
 
   /* Colors (most courtesy of http://clrs.cc/) */
   --color-primary: tomato;
+  --color-secondary: #a5a5a5;
   --color-white: white;
   --color-navy: #001f3f;
   --color-blue: #0074d9;
@@ -29,10 +30,12 @@
 
   /* States */
   --state-success: var(--color-green);
-  --state-info: var(--color-aqua);
+  --state-info: var(--color-teal);
   --state-warning: var(--color-orange);
   --state-danger: var(--color-red);
   --state-inverse: var(--color-black);
+  --state-light: var(--color-white);
+  --state-dark: var(--color-black);
 
   /* Components */
   --component-bg-color: #f2f2f2;
@@ -141,17 +144,34 @@
   --button-height: var(--input-height);
   --button-height-small: var(--input-height-small);
   --button-height-big: var(--input-height-big);
-  --button-color: var(--color-white);
   --button-border-radius: var(--component-border-radius);
   --button-box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
   --button-box-shadow-hover: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
   --button-box-shadow-active: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 2px 0 rgba(0, 0, 0, .1);
-  --button-bg-color-primary: var(--color-primary);
+
+  --button-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-bg-color-inverse: var(--state-inverse);
+
+  --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;
diff --git a/source/docs/buttons.md b/source/docs/buttons.md
index 31e46114..573e7ec8 100644
--- a/source/docs/buttons.md
+++ b/source/docs/buttons.md
@@ -9,23 +9,24 @@ description: Add styled buttons to your app with minimal effort.
 To create a button, use the `
-
+
+
 
 
 
-
-
+
+
 ```
 
 

-  
+  
+  
   
   
   
   
-  
-  
+  
+  
 

 
 Use the `button-small` and `button-big` modifiers to change the size of a button.
@@ -53,23 +54,41 @@ Use the `button-block` modifier to make the button span the entire width of its
 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. + +```html + + +``` + +
+ +
### File Buttons