From 0a27c875e383314fb6ad4ce869281ed67cd83221 Mon Sep 17 00:00:00 2001 From: zombieFox Date: Sun, 17 Nov 2019 17:16:57 +0000 Subject: [PATCH] [refactor] improve style guide --- src/css/variables.css | 473 +++++++++++++++++++++--------------------- src/style-guide.html | 2 + 2 files changed, 242 insertions(+), 233 deletions(-) diff --git a/src/css/variables.css b/src/css/variables.css index eabc9d48..e91a1ad6 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -1,270 +1,277 @@ :root { /* theme */ - --theme-root-font-size: 14px; - --theme-accent: 250, 130, 0; - --theme-radius: 0.2rem; - --theme-black: 0, 0, 0; - --theme-white: 255, 255, 255; - --theme-shade-01: 38, 40, 49; - --theme-shade-02: 47, 51, 62; - --theme-shade-03: 57, 62, 75; - --theme-shade-04: 67, 73, 88; - --theme-shade-05: 77, 84, 101; - --theme-shade-06: 87, 95, 114; - --theme-shade-07: 97, 106, 127; - --theme-shade-08: 107, 117, 140; - --theme-shade-09: 117, 128, 153; - --theme-shade-10: 127, 139, 166; - --theme-shade-11: 137, 151, 180; - --theme-shade-12: 149, 162, 187; - --theme-shade-13: 162, 173, 195; - --theme-shade-14: 174, 184, 203; - --theme-shade-15: 187, 195, 211; - --theme-shade-16: 199, 206, 218; - --theme-shade-17: 212, 217, 226; - --theme-shade-18: 224, 228, 234; - --theme-shade-19: 237, 239, 242; - --theme-shade-20: 250, 250, 250; + --theme-root-font-size: 14px; + --theme-accent: 250, 130, 0; + --theme-radius: 0.2rem; + --theme-black: 0, 0, 0; + --theme-white: 255, 255, 255; + --theme-shade-01: 38, 40, 49; + --theme-shade-02: 47, 51, 62; + --theme-shade-03: 57, 62, 75; + --theme-shade-04: 67, 73, 88; + --theme-shade-05: 77, 84, 101; + --theme-shade-06: 87, 95, 114; + --theme-shade-07: 97, 106, 127; + --theme-shade-08: 107, 117, 140; + --theme-shade-09: 117, 128, 153; + --theme-shade-10: 127, 139, 166; + --theme-shade-11: 137, 151, 180; + --theme-shade-12: 149, 162, 187; + --theme-shade-13: 162, 173, 195; + --theme-shade-14: 174, 184, 203; + --theme-shade-15: 187, 195, 211; + --theme-shade-16: 199, 206, 218; + --theme-shade-17: 212, 217, 226; + --theme-shade-18: 224, 228, 234; + --theme-shade-19: 237, 239, 242; + --theme-shade-20: 250, 250, 250; /* header */ - --header-area-width: 100%; - --header-shade-color: var(--theme-gray-01); - --header-shade-opacity: 0.95; - --header-search-width: 0%; - --header-border-top: 0; - --header-border-bottom: 0; - --header-date-size: 1em; - --header-clock-size: 1em; - --header-search-size: 1em; - --header-button-size: 1em; - --header-greeting-size: 1em; - --header-transitional-size: 1em; + --header-area-width: 100%; + --header-shade-color: var(--theme-gray-01); + --header-shade-opacity: 0.95; + --header-search-width: 0%; + --header-border-top: 0; + --header-border-bottom: 0; + --header-date-size: 1em; + --header-clock-size: 1em; + --header-search-size: 1em; + --header-button-size: 1em; + --header-greeting-size: 1em; + --header-transitional-size: 1em; /* group */ - --group-name-size: 1em; - --group-border: 0; + --group-name-size: 1em; + --group-border: 0; /* link */ - --link-area-width: 100%; - --link-item-size: 1em; - --link-item-display-letter-size: 2em; - --link-item-display-icon-size: 2.5em; - --link-item-name-size: 0.9em; - --link-item-border: 1; + --link-area-width: 100%; + --link-item-size: 1em; + --link-item-display-letter-size: 2em; + --link-item-display-icon-size: 2.5em; + --link-item-name-size: 0.9em; + --link-item-border: 1; /* layout */ - --layout-width: 80%; - --layout-line-width: 0.2em; - --layout-space: 0.5rem; - --layout-padding: 4; - --layout-gutter: 4; - --layout-duration-02: 0.2s; - --layout-duration-04: 0.4s; - --layout-duration-06: 0.6s; - --layout-duration-08: 0.8s; - --layout-duration-10: 1s; - --layout-timing-extra-fast: var(--layout-duration-02) ease-in-out; - --layout-timing-fast: var(--layout-duration-04) ease-in-out; - --layout-timing-medium: var(--layout-duration-06) ease-in-out; - --layout-timing-slow: var(--layout-duration-08) ease-in-out; - --layout-timing-extra-slow: var(--layout-duration-10) ease-in-out; - --layout-shadow-small: 0 0 0.25em rgba(0, 0, 0, 0.2), 0 0 0.5em rgba(0, 0, 0, 0.1); - --layout-shadow-medium: 0 0 0.5em rgba(0, 0, 0, 0.2), 0 0 1em rgba(0, 0, 0, 0.1); - --layout-shadow-large: 0 0 1em rgba(0, 0, 0, 0.2), 0 0 2em rgba(0, 0, 0, 0.1); + --layout-width: 80%; + --layout-line-width: 0.2em; + --layout-space: 0.5rem; + --layout-padding: 4; + --layout-gutter: 4; + --layout-duration-02: 0.2s; + --layout-duration-04: 0.4s; + --layout-duration-06: 0.6s; + --layout-duration-08: 0.8s; + --layout-duration-10: 1s; + --layout-timing-extra-fast: var(--layout-duration-02) ease-in-out; + --layout-timing-fast: var(--layout-duration-04) ease-in-out; + --layout-timing-medium: var(--layout-duration-06) ease-in-out; + --layout-timing-slow: var(--layout-duration-08) ease-in-out; + --layout-timing-extra-slow: var(--layout-duration-10) ease-in-out; + --layout-shadow-small: 0 0 0.25em rgba(0, 0, 0, 0.2), + 0 0 0.5em rgba(0, 0, 0, 0.1); + --layout-shadow-medium: 0 0 0.5em rgba(0, 0, 0, 0.2), + 0 0 1em rgba(0, 0, 0, 0.1); + --layout-shadow-large: 0 0 1em rgba(0, 0, 0, 0.2), + 0 0 2em rgba(0, 0, 0, 0.1); /* background */ - --background-color-theme: var(--theme-gray-01); - --background-color-custom: rgb(0, 0, 0); - --background-image: none; - --background-opacity: 1; - --background-scale: 1; - --background-accent: 0; - --background-blur: 0; + --background-color-theme: var(--theme-gray-01); + --background-color-custom: rgb(0, 0, 0); + --background-image: none; + --background-opacity: 1; + --background-scale: 1; + --background-accent: 0; + --background-blur: 0; /* form */ - --form-label: var(--theme-gray-16); - --form-label-hover: var(--theme-gray-20); - --form-label-focus-active: var(--theme-style-text); - --form-label-checked: var(--theme-style-text); - --form-label-disabled: var(--theme-gray-04); - --form-input-text: var(--theme-gray-16); - --form-input-text-hover: var(--theme-gray-18); - --form-input-text-focus-active: var(--theme-style-text); - --form-input-text-disabled: var(--theme-gray-04); - --form-input-background: var(--theme-gray-02); - --form-input-background-hover: var(--theme-gray-02); - --form-input-background-focus-active: var(--theme-gray-01); - --form-input-background-disabled: var(--theme-gray-01); - --form-input-border: var(--theme-gray-02); - --form-input-border-hover: var(--theme-gray-02); - --form-input-border-focus-active: var(--theme-gray-01); - --form-input-border-disabled: var(--theme-gray-01); - --form-group-text-background: var(--theme-gray-02); - --form-group-text-background-focus-hover: var(--theme-gray-02); - --form-group-text-background-active: var(--theme-gray-02); - --form-group-text-background-disabled: var(--theme-gray-01); - --form-group-text-border: var(--theme-gray-02); - --form-group-text-border-focus-hover: var(--theme-gray-02); - --form-group-text-border-active: var(--theme-gray-02); - --form-group-text-border-disabled: var(--theme-gray-01); - --form-border-disabled: var(--theme-gray-02); - --form-icon: var(--theme-gray-08); - --form-icon-hover: var(--theme-gray-16); - --form-icon-focus: var(--theme-gray-18); - --form-icon-active: var(--theme-style-text); - --form-icon-checked: var(--theme-style-text); - --form-icon-disabled: var(--theme-gray-04); - --form-icon-symbol: var(--theme-gray-01); - --form-icon-symbol-active: var(--theme-gray-01); - --form-icon-symbol-disabled: var(--theme-gray-01); - --form-placeholder: var(--theme-gray-06); - --form-placeholder-focus-hover: var(--theme-gray-10); - --form-placeholder-disabled: var(--theme-gray-03); - --form-checkbox-radio-label: var(--theme-gray-12); - --form-checkbox-radio-checked-label: var(--theme-gray-16); - --form-checkbox-radio-disabled-label: var(--theme-gray-04); - --form-feedback-text: var(--theme-gray-16); - --form-feedback-text-muted: var(--theme-gray-12); - --form-feedback-text-disabled: var(--theme-gray-04); - --form-feedback-background: var(--theme-gray-02); - --form-feedback-background-disabled: var(--theme-gray-01); - --form-feedback-border: var(--theme-gray-04); - --form-feedback-border-disabled: var(--theme-gray-02); - --form-helper: var(--theme-gray-12); - --form-helper-disabled: var(--theme-gray-04); - --form-thumb-size: 1.25em; - --form-range-thumb-background: var(--theme-gray-16); - --form-range-thumb-background-hover: var(--theme-gray-18); - --form-range-thumb-background-focus: var(--theme-style-text); - --form-range-thumb-background-active: var(--theme-style-text); - --form-range-thumb-background-disabled: var(--theme-gray-03); - --form-range-track-background: var(--theme-gray-06); - --form-range-track-background-focus-hover: var(--theme-gray-04); - --form-range-track-background-active: var(--theme-gray-03); - --form-range-track-background-disabled: var(--theme-gray-02); - --form-range-progress-background: var(--theme-gray-08); - --form-range-progress-background-active: var(--theme-accent); - --form-range-progress-background-disabled: var(--theme-gray-02); - --form-grid-background: var(--theme-gray-02); - --form-grid-background-hover: var(--theme-gray-02); - --form-grid-background-focus: var(--theme-gray-02); - --form-grid-background-disabled: var(--theme-gray-01); - --form-grid-border: var(--theme-gray-08); - --form-grid-border-hover-focus: var(--theme-gray-20); - --form-grid-border-active: var(--theme-accent); - --form-grid-border-checked: var(--theme-accent); - --form-grid-border-disabled: var(--theme-gray-04); - --form-dropdown-background: var(--theme-gray-02); - --form-ring-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06)); - --form-ring-focus: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25); - --form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25); + --form-label: var(--theme-gray-16); + --form-label-hover: var(--theme-gray-20); + --form-label-focus-active: var(--theme-style-text); + --form-label-checked: var(--theme-style-text); + --form-label-disabled: var(--theme-gray-04); + --form-input-text: var(--theme-gray-16); + --form-input-text-hover: var(--theme-gray-18); + --form-input-text-focus-active: var(--theme-style-text); + --form-input-text-disabled: var(--theme-gray-04); + --form-input-background: var(--theme-gray-02); + --form-input-background-hover: var(--theme-gray-02); + --form-input-background-focus-active: var(--theme-gray-01); + --form-input-background-disabled: var(--theme-gray-01); + --form-input-border: var(--theme-gray-02); + --form-input-border-hover: var(--theme-gray-02); + --form-input-border-focus-active: var(--theme-gray-01); + --form-input-border-disabled: var(--theme-gray-01); + --form-group-text-background: var(--theme-gray-02); + --form-group-text-background-focus-hover: var(--theme-gray-02); + --form-group-text-background-active: var(--theme-gray-02); + --form-group-text-background-disabled: var(--theme-gray-01); + --form-group-text-border: var(--theme-gray-02); + --form-group-text-border-focus-hover: var(--theme-gray-02); + --form-group-text-border-active: var(--theme-gray-02); + --form-group-text-border-disabled: var(--theme-gray-01); + --form-border-disabled: var(--theme-gray-02); + --form-icon: var(--theme-gray-08); + --form-icon-hover: var(--theme-gray-16); + --form-icon-focus: var(--theme-gray-18); + --form-icon-active: var(--theme-style-text); + --form-icon-checked: var(--theme-style-text); + --form-icon-disabled: var(--theme-gray-04); + --form-icon-symbol: var(--theme-gray-01); + --form-icon-symbol-active: var(--theme-gray-01); + --form-icon-symbol-disabled: var(--theme-gray-01); + --form-placeholder: var(--theme-gray-06); + --form-placeholder-focus-hover: var(--theme-gray-10); + --form-placeholder-disabled: var(--theme-gray-03); + --form-checkbox-radio-label: var(--theme-gray-12); + --form-checkbox-radio-checked-label: var(--theme-gray-16); + --form-checkbox-radio-disabled-label: var(--theme-gray-04); + --form-feedback-text: var(--theme-gray-16); + --form-feedback-text-muted: var(--theme-gray-12); + --form-feedback-text-disabled: var(--theme-gray-04); + --form-feedback-background: var(--theme-gray-02); + --form-feedback-background-disabled: var(--theme-gray-01); + --form-feedback-border: var(--theme-gray-04); + --form-feedback-border-disabled: var(--theme-gray-02); + --form-helper: var(--theme-gray-12); + --form-helper-disabled: var(--theme-gray-04); + --form-thumb-size: 1.25em; + --form-range-thumb-background: var(--theme-gray-16); + --form-range-thumb-background-hover: var(--theme-gray-18); + --form-range-thumb-background-focus: var(--theme-style-text); + --form-range-thumb-background-active: var(--theme-style-text); + --form-range-thumb-background-disabled: var(--theme-gray-03); + --form-range-track-background: var(--theme-gray-06); + --form-range-track-background-focus-hover: var(--theme-gray-04); + --form-range-track-background-active: var(--theme-gray-03); + --form-range-track-background-disabled: var(--theme-gray-02); + --form-range-progress-background: var(--theme-gray-08); + --form-range-progress-background-active: var(--theme-accent); + --form-range-progress-background-disabled: var(--theme-gray-02); + --form-grid-background: var(--theme-gray-02); + --form-grid-background-hover: var(--theme-gray-02); + --form-grid-background-focus: var(--theme-gray-02); + --form-grid-background-disabled: var(--theme-gray-01); + --form-grid-border: var(--theme-gray-08); + --form-grid-border-hover-focus: var(--theme-gray-20); + --form-grid-border-active: var(--theme-accent); + --form-grid-border-checked: var(--theme-accent); + --form-grid-border-disabled: var(--theme-gray-04); + --form-dropdown-background: var(--theme-gray-02); + --form-ring-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06)); + --form-ring-focus: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10)), + 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-gray-10), 0.25); + --form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), + 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25); /* button */ - --button-background: var(--theme-gray-02); - --button-background-focus-hover: var(--theme-gray-03); - --button-background-active: var(--theme-gray-04); - --button-background-disabled: var(--theme-gray-01); - --button-border: var(--theme-gray-02); - --button-border-focus-hover: var(--theme-gray-06); - --button-border-active: var(--theme-accent); - --button-border-disabled: var(--theme-gray-01); - --button-text: var(--theme-gray-12); - --button-text-focus-hover: var(--theme-gray-20); - --button-text-active: var(--theme-style-text); - --button-text-disabled: var(--theme-gray-04); - --button-link-text: var(--theme-gray-12); - --button-link-text-focus-hover: var(--theme-style-text); - --button-link-text-active: var(--theme-style-text); - --button-link-text-disabled: var(--theme-gray-04); + --button-background: var(--theme-gray-02); + --button-background-focus-hover: var(--theme-gray-03); + --button-background-active: var(--theme-gray-04); + --button-background-disabled: var(--theme-gray-01); + --button-border: var(--theme-gray-02); + --button-border-focus-hover: var(--theme-gray-06); + --button-border-active: var(--theme-accent); + --button-border-disabled: var(--theme-gray-01); + --button-text: var(--theme-gray-12); + --button-text-focus-hover: var(--theme-gray-20); + --button-text-active: var(--theme-style-text); + --button-text-disabled: var(--theme-gray-04); + --button-link-text: var(--theme-gray-12); + --button-link-text-focus-hover: var(--theme-style-text); + --button-link-text-active: var(--theme-style-text); + --button-link-text-disabled: var(--theme-gray-04); /* edge */ - --edge-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1); + --edge-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), + inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), + inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1); /* font */ - --font-regular: "Open Sans Regular", sans-serif; - --font-bold: "Open Sans Bold", sans-serif; - --font-light: "Open Sans Light", sans-serif; - --font-fjalla: "Fjalla One Regular", sans-serif; + --font-regular: "Open Sans Regular", sans-serif; + --font-bold: "Open Sans Bold", sans-serif; + --font-light: "Open Sans Light", sans-serif; + --font-fjalla: "Fjalla One Regular", sans-serif; /* z index */ - --z-index-background: 1000; - --z-index-link: 2000; - --z-index-header: 3000; - --z-index-tip: 4000; - --z-index-shade: 5000; - --z-index-modal: 6000; - --z-index-menu: 7000; - --z-index-auto-suggest-list: 8000; - --z-index-dropdown: 9000; - --z-index-edge: 10000; + --z-index-background: 1000; + --z-index-link: 2000; + --z-index-header: 3000; + --z-index-tip: 4000; + --z-index-shade: 5000; + --z-index-modal: 6000; + --z-index-menu: 7000; + --z-index-auto-suggest-list: 8000; + --z-index-dropdown: 9000; + --z-index-edge: 10000; /* breakpoint */ /* can not be used in @media as of yet */ - --breakpoint-sm: 550px; - --breakpoint-md: 700px; - --breakpoint-lg: 900px; - --breakpoint-xl: 1100px; - --breakpoint-xxl: 1600px; + --breakpoint-sm: 550px; + --breakpoint-md: 700px; + --breakpoint-lg: 900px; + --breakpoint-xl: 1100px; + --breakpoint-xxl: 1600px; } .is-theme-style-dark { /* theme */ - --theme-gray-01: var(--theme-shade-01); - --theme-gray-02: var(--theme-shade-02); - --theme-gray-03: var(--theme-shade-03); - --theme-gray-04: var(--theme-shade-04); - --theme-gray-05: var(--theme-shade-05); - --theme-gray-06: var(--theme-shade-06); - --theme-gray-07: var(--theme-shade-07); - --theme-gray-08: var(--theme-shade-08); - --theme-gray-09: var(--theme-shade-09); - --theme-gray-10: var(--theme-shade-10); - --theme-gray-11: var(--theme-shade-11); - --theme-gray-12: var(--theme-shade-12); - --theme-gray-13: var(--theme-shade-13); - --theme-gray-14: var(--theme-shade-14); - --theme-gray-15: var(--theme-shade-15); - --theme-gray-16: var(--theme-shade-16); - --theme-gray-17: var(--theme-shade-17); - --theme-gray-18: var(--theme-shade-18); - --theme-gray-19: var(--theme-shade-19); - --theme-gray-20: var(--theme-shade-20); - --theme-style-text: var(--theme-white); + --theme-gray-01: var(--theme-shade-01); + --theme-gray-02: var(--theme-shade-02); + --theme-gray-03: var(--theme-shade-03); + --theme-gray-04: var(--theme-shade-04); + --theme-gray-05: var(--theme-shade-05); + --theme-gray-06: var(--theme-shade-06); + --theme-gray-07: var(--theme-shade-07); + --theme-gray-08: var(--theme-shade-08); + --theme-gray-09: var(--theme-shade-09); + --theme-gray-10: var(--theme-shade-10); + --theme-gray-11: var(--theme-shade-11); + --theme-gray-12: var(--theme-shade-12); + --theme-gray-13: var(--theme-shade-13); + --theme-gray-14: var(--theme-shade-14); + --theme-gray-15: var(--theme-shade-15); + --theme-gray-16: var(--theme-shade-16); + --theme-gray-17: var(--theme-shade-17); + --theme-gray-18: var(--theme-shade-18); + --theme-gray-19: var(--theme-shade-19); + --theme-gray-20: var(--theme-shade-20); + --theme-style-text: var(--theme-white); } .is-theme-style-light { /* theme */ - --theme-gray-01: var(--theme-shade-20); - --theme-gray-02: var(--theme-shade-19); - --theme-gray-03: var(--theme-shade-18); - --theme-gray-04: var(--theme-shade-17); - --theme-gray-05: var(--theme-shade-16); - --theme-gray-06: var(--theme-shade-15); - --theme-gray-07: var(--theme-shade-14); - --theme-gray-08: var(--theme-shade-13); - --theme-gray-09: var(--theme-shade-12); - --theme-gray-10: var(--theme-shade-11); - --theme-gray-11: var(--theme-shade-10); - --theme-gray-12: var(--theme-shade-09); - --theme-gray-13: var(--theme-shade-08); - --theme-gray-14: var(--theme-shade-07); - --theme-gray-15: var(--theme-shade-06); - --theme-gray-16: var(--theme-shade-05); - --theme-gray-17: var(--theme-shade-04); - --theme-gray-18: var(--theme-shade-03); - --theme-gray-19: var(--theme-shade-02); - --theme-gray-20: var(--theme-shade-01); - --theme-style-text: var(--theme-black); + --theme-gray-01: var(--theme-shade-20); + --theme-gray-02: var(--theme-shade-19); + --theme-gray-03: var(--theme-shade-18); + --theme-gray-04: var(--theme-shade-17); + --theme-gray-05: var(--theme-shade-16); + --theme-gray-06: var(--theme-shade-15); + --theme-gray-07: var(--theme-shade-14); + --theme-gray-08: var(--theme-shade-13); + --theme-gray-09: var(--theme-shade-12); + --theme-gray-10: var(--theme-shade-11); + --theme-gray-11: var(--theme-shade-10); + --theme-gray-12: var(--theme-shade-09); + --theme-gray-13: var(--theme-shade-08); + --theme-gray-14: var(--theme-shade-07); + --theme-gray-15: var(--theme-shade-06); + --theme-gray-16: var(--theme-shade-05); + --theme-gray-17: var(--theme-shade-04); + --theme-gray-18: var(--theme-shade-03); + --theme-gray-19: var(--theme-shade-02); + --theme-gray-20: var(--theme-shade-01); + --theme-style-text: var(--theme-black); } .is-link-style-block { /* link */ - --link-item-width: 11em; - --link-item-height: 10em; - --link-item-url-height: 20%; - --link-item-edit-height: 50%; + --link-item-width: 11em; + --link-item-height: 10em; + --link-item-url-height: 20%; + --link-item-edit-height: 50%; } .is-link-style-list { /* link */ - --link-item-width: 20em; - --link-item-height: 4em; - --link-item-url-height: 30%; - --link-item-edit-height: 50%; + --link-item-width: 20em; + --link-item-height: 4em; + --link-item-url-height: 30%; + --link-item-edit-height: 50%; } @media (min-width: 700px) { :root { /* theme */ - --theme-root-font-size: 16px; + --theme-root-font-size: 16px; } } diff --git a/src/style-guide.html b/src/style-guide.html index 905efb5d..380a463e 100644 --- a/src/style-guide.html +++ b/src/style-guide.html @@ -324,6 +324,8 @@ }, false); helper.e(".style-guide-form-dropdown").addEventListener("click", function() { helper.toggleClass(helper.e(".form-dropdown"), "form-dropdown-open"); + helper.toggleClass(helper.e(".form-dropdown-menu"), "form-dropdown-menu-right"); + helper.toggleClass(helper.e(".form-dropdown-menu"), "form-dropdown-menu-bottom"); }, false); helper.e(".theme-color").addEventListener("change", function() { var color = helper.hexToRgb(this.value);