extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-27 02:24:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve style guide

Browse Source
This commit is contained in:
zombieFox 2019-11-17 17:16:57 +00:00
parent 1bcaa0406a
commit 0a27c875e3
2 changed files with 242 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

473
src/css/variables.css
View File

@ -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;
}
}

2
src/style-guide.html
View File

@ -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);