extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-18 19:20:53 +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

19
src/css/variables.css
View File

@ -64,9 +64,12 @@
--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-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);
@ -150,8 +153,10 @@
--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-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);
@ -170,7 +175,9 @@
--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;

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