Merge branch 'develop'

changelog.md

@@ -1,3 +1,10 @@
+## 0.14.1
+
+- Fixed incorrect `interval` height and background
+- Made component height `2rem` by default
+    - Should fix component height issues on some pages
+- Reduced line height for `display` component
+
 ## 0.14.0
 
 - Allow setting input listening mode on `text` components using a new `listenMode` option. New values are `"input"` (default) and `"change"`.

package.json

@@ -2,7 +2,7 @@
   "//": "--------------- Script Info --------------- ",
   "name": "guify",
   "author": "Jonathan Cole <[email protected]>",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "A simple GUI for inspecting and changing JS variables",
   "keywords": [
     "gui",

src/components/partials/container.css

@@ -0,0 +1,8 @@
+@import "../variables.css";
+
+.guify-component-container {
+    position: relative;
+    min-height: var(--size-component-height);
+    line-height: var(--size-component-height);
+    margin-bottom: var(--size-component-spacing);
+}

src/components/partials/container.js

@@ -1,13 +1,9 @@
-import css from "dom-css";
+import "./container.css";
 
+// eslint-disable-next-line no-unused-vars
 let Container = (root, label, theme) => {
     let container = root.appendChild(document.createElement("div"));
     container.classList.add("guify-component-container");
-    css(container, {
-        position: "relative",
-        "min-height": theme.sizing.componentHeight,
-        "margin-bottom": theme.sizing.componentSpacing
-    });
     return container;
 };
 

src/components/partials/label.css

@@ -6,17 +6,13 @@
     display: inline-block;
     margin-right: 2%;
     vertical-align: top;
-}
-
-.guify-component-label-text {
-    color: var(--color-text-primary);
-    display: inline-block;
-    vertical-align: sub;
     min-height: var(--size-component-height);
     line-height: var(--size-component-height);
+
+    color: var(--color-text-primary);
 }
 
 /* Disabled styles */
-.disabled .guify-component-label-text {
+.disabled .guify-component-label {
     color: var(--color-text-disabled);
 }

src/components/partials/label.js

@@ -2,11 +2,8 @@ import "./label.css";
 
 // eslint-disable-next-line no-unused-vars
 export default (root, text, theme) => {
-    var background = root.appendChild(document.createElement("div"));
-    background.classList.add("guify-component-label");
-
-    var label = background.appendChild(document.createElement("div"));
-    label.classList.add("guify-component-label-text");
+    var label = root.appendChild(document.createElement("div"));
+    label.classList.add("guify-component-label");
     label.innerHTML = text;
     return label;
 };

src/components/public/display.css

@@ -3,6 +3,7 @@
 .guify-display {
     display: inline-block;
     height: unset;
+    min-height: var(--size-component-height);
     width: calc(100% - var(--size-label-width));
     border: none;
     color: var(--color-text-secondary);
@@ -11,7 +12,7 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     vertical-align: sub;
-    line-height: var(--size-component-height);
+    line-height: 1rem;
     user-select: text;
 }
 

src/components/public/interval.css

@@ -12,7 +12,7 @@
 .guify-interval {
     -webkit-appearance: none;
     position: absolute;
-    height: 20px;
+    height: var(--size-component-height);
     margin: 0px 0;
     width: 33%;
     left: 54.5%;
@@ -38,9 +38,9 @@
 
 .disabled .guify-interval {
     pointer-events: none;
-    background-color: var(--range-track-color-disabled);
+    background-color: var(--interval-track-color-disabled);
 }
 
 .disabled .guify-interval .guify-interval-handle {
-    background: var(--range-thumb-color-disabled);
+    background: var(--interval-thumb-color-disabled);
 }

src/components/variables.css

@@ -16,7 +16,7 @@
     --color-text-disabled: "black";
 
     --size-menu-bar-height: 25px;
-    --size-component-height: 20px;
+    --size-component-height: 2rem;
     --size-component-spacing: 5px;
     --size-label-width: 42%;
 }