From 0a7afe79ac3da5486892083b048fc6583f8e253e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Sun, 13 Aug 2017 11:18:30 -0400 Subject: [PATCH] Remove badge inverse, add secondary/light/dark --- dist/shoelace.css | 4 ++-- docs/badges.html | 22 ++++++++++++++++++++++ source/css/badges.css | 15 +++++++++++++++ source/css/variables.css | 1 + source/docs/badges.md | 25 +++++++++++++++++++++++++ 5 files changed, 65 insertions(+), 2 deletions(-) diff --git a/dist/shoelace.css b/dist/shoelace.css index a4644f22..e1684632 100644 --- a/dist/shoelace.css +++ b/dist/shoelace.css @@ -8,13 +8,13 @@ /*! 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-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)} +/*! 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 */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} /*! 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 */.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}.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} +/*! 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{color:var(--badge-color);text-decoration:none;-webkit-box-shadow:var(--badge-box-shadow-hover);box-shadow:var(--badge-box-shadow-hover)}a.badge-secondary:hover{color:var(--badge-color-secondary)}a.badge-success:hover{color:var(--badge-color-success)}a.badge-info:hover{color:var(--badge-color-info)}a.badge-warning:hover{color:var(--badge-color-warning)}a.badge-danger:hover{color:var(--badge-color-danger)}a.badge-dark:hover{color:var(--badge-color-dark)}a.badge-light:hover{color:var(--badge-color-light)} /*! 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} diff --git a/docs/badges.html b/docs/badges.html index 6f85ba52..b2a19b12 100644 --- a/docs/badges.html +++ b/docs/badges.html @@ -80,6 +80,28 @@

Heading 3 Badge

Paragraph Badge

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

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

+ diff --git a/source/css/badges.css b/source/css/badges.css index 01ce6d81..b287dda7 100644 --- a/source/css/badges.css +++ b/source/css/badges.css @@ -9,6 +9,7 @@ padding: var(--badge-spacing-y) var(--badge-spacing-x); vertical-align: baseline; display: inline-block; + transition: .1s box-shadow, .1s background-color, .1s color; } .badge-secondary { @@ -49,3 +50,17 @@ .badge:empty { display: none; } + +a.badge:hover { + color: var(--badge-color); + text-decoration: none; + box-shadow: var(--badge-box-shadow-hover); +} + +a.badge-secondary:hover { color: var(--badge-color-secondary) } +a.badge-success:hover { color: var(--badge-color-success) } +a.badge-info:hover { color: var(--badge-color-info) } +a.badge-warning:hover { color: var(--badge-color-warning) } +a.badge-danger:hover { color: var(--badge-color-danger) } +a.badge-dark:hover { color: var(--badge-color-dark) } +a.badge-light:hover { color: var(--badge-color-light) } diff --git a/source/css/variables.css b/source/css/variables.css index 1c10ac07..5bd93f6d 100644 --- a/source/css/variables.css +++ b/source/css/variables.css @@ -141,6 +141,7 @@ --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; diff --git a/source/docs/badges.md b/source/docs/badges.md index 59138a09..dc7f2906 100644 --- a/source/docs/badges.md +++ b/source/docs/badges.md @@ -43,3 +43,28 @@ By default, badges are sized relative to their parent element.

Heading 2 Badge

Heading 3 Badge

Paragraph Badge

+ + +### Badge Links + +```html +Primary +Secondary +Success +Info +Warning +Danger +Light +Dark +``` + +

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