From 727770e34a98baf399662284a4ac39a2d3145247 Mon Sep 17 00:00:00 2001 From: zombieFox Date: Sun, 18 Oct 2020 19:27:13 +0100 Subject: [PATCH] [design] improve style guide --- src/css/form.css | 5 + src/style-guide.html | 652 +++++++++++++++++++++++++++---------------- 2 files changed, 410 insertions(+), 247 deletions(-) diff --git a/src/css/form.css b/src/css/form.css index bf0d8e04..0a03ef89 100755 --- a/src/css/form.css +++ b/src/css/form.css @@ -1410,6 +1410,11 @@ input[type="range"]:disabled::-moz-range-progress { border-radius: var(--theme-radius); } +.form-grid-1x3 { + grid-template-rows: repeat(3, 1fr); + border-radius: var(--theme-radius); +} + .form-grid .form-wrap { margin-top: 0; margin-bottom: 0; diff --git a/src/style-guide.html b/src/style-guide.html index 6283e986..1480789c 100644 --- a/src/style-guide.html +++ b/src/style-guide.html @@ -39,27 +39,53 @@ @@ -70,25 +96,108 @@
+
-
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+ +
+ + +
+
- +
+
- +
+
- +
@@ -97,35 +206,39 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
@@ -138,147 +251,9 @@
- - - -
-
- - -
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
-
- - -
-
- - -
-
- - -
-
-
-
- -
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
-
- - -
-
- - -
-
- - -
-
-
-
- -
-
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
    -
  • - -
    • -
  • - -
    • -
-
+ + +
@@ -316,59 +291,214 @@
+ + +
-
-
- - +
+
+ +
-
- - + -
- - + -
- - +
+
+
+ +
+
+
+
+ + +
+ + + +
+ +
    +
  • + +
    • +
  • + +
    • +
@@ -383,25 +513,9 @@ -
- - -
-
- - -
-
- - -
-
+
@@ -419,6 +533,31 @@
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
- - @@ -490,10 +627,14 @@ var shadeSteps = 10; var saturationShift = 0; var lightShift = 4; + var contrastNegative = parseInt(helper.e(".input-theme-contrast-dark").value, 10) / 100; + var contrastPositive = parseInt(helper.e(".input-theme-contrast-light").value, 10) / 100; var html = helper.e("html"); - var rgb = helper.convertColor.hex.rgb(helper.e(".theme-color").value); + var rgb = helper.convertColor.hex.rgb(helper.e(".input-theme-color").value); var hsl = helper.convertColor.rgb.hsl(rgb); + html.style.setProperty("--theme-shade", rgb.r + ", " + rgb.g + ", " + rgb.b); + var renderShade = function(name, index, rgb) { for (var key in rgb) { if (rgb[key] < 0) { @@ -513,54 +654,71 @@ for (var i = 1; i <= shadeSteps; i++) { var rgb = helper.convertColor.hsl.rgb({ h: hsl.h, - s: hsl.s - (saturationShift * i), - l: hsl.l - (lightShift * i) + s: hsl.s, + l: hsl.l - (contrastNegative * i) }); renderShade("--theme-shade-negative-", i, rgb); }; for (var i = 1; i <= shadeSteps; i++) { var rgb = helper.convertColor.hsl.rgb({ h: hsl.h, - s: hsl.s + (saturationShift * i), - l: hsl.l + (lightShift * i) + s: hsl.s, + l: hsl.l + (contrastPositive * i) }); renderShade("--theme-shade-positive-", i, rgb); }; } }, accent: function() { - var color = helper.convertColor.hex.rgb(helper.e(".theme-accent").value); + var color = helper.convertColor.hex.rgb(helper.e(".input-theme-accent").value); helper.e("html").style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b); } } }; + helper.e(".disable-on").addEventListener("click", function() { disable.on(); }, false); + helper.e(".disable-off").addEventListener("click", function() { disable.off(); }, false); + helper.e(".theme-dark").addEventListener("click", function() { theme.dark(); }, false); + helper.e(".theme-light").addEventListener("click", function() { theme.light(); }, false); - helper.e(".radius").addEventListener("input", function() { + + helper.e(".input-theme-radius").addEventListener("input", function() { var html = helper.e("html"); html.style.setProperty("--theme-radius", (parseInt(this.value, 10) / 100) + "rem"); }, 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-accent").addEventListener("change", function() { + + helper.e(".input-theme-accent").addEventListener("change", function() { theme.render.accent(); }, false); - helper.e(".theme-color").addEventListener("change", function() { + + helper.e(".input-theme-color").addEventListener("change", function() { theme.render.color.shade(); }, false); + + helper.e(".input-theme-contrast-light").addEventListener("input", function() { + theme.render.color.shade(); + }, false); + + helper.e(".input-theme-contrast-dark").addEventListener("input", function() { + theme.render.color.shade(); + }, false); + theme.render.color.shade(); theme.render.accent();