Adjusts the labels for small / large cases.

AgnosticUI · Oct 3, 2020 · 0d2d7c5 · 0d2d7c5
1 parent 6bf3bbc
commit 0d2d7c5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/agnosticui-css/input.css b/agnosticui-css/input.css
@@ -25,6 +25,7 @@
   --agnosticui-input-font-color: var(--agnosticui-font-color, #333333);
   --agnosticui-input-font-weight: var(--agnosticui-font-weight, 300);
   --agnosticui-input-font-size: var(--agnosticui-font-size, 16px);
+  --agnosticui-input-label-font-size: calc(var(--agnosticui-input-font-size) - 2px);
   --agnosticui-input-border-size: var(--agnosticui-border-size, 1px);
   --agnosticui-input-border-color: var(--agnosticui-border-color, #e9e9e9);
   --agnosticui-input-radius: var(--agnosticui-border-radius, 4px);
@@ -79,6 +80,12 @@
   vertical-align: initial;
 }
 
+/* Reset labels to be 2px less then input font size */
+.label,
+.label-skin {
+  font-size: var(--agnosticui-input-label-font-size);
+}
+
 .label-inline,
 .input-inline {
   width: auto;
@@ -146,12 +153,27 @@
   */
 .input-large {
   font-size: calc(var(--agnosticui-input-font-size) + 4px);
+}
+.label-large {
+  font-size: calc(var(--agnosticui-input-label-font-size) + 2px);
+}
+
+.input-large {
   height: 48px;
   line-height: 48px;
 }
 
+
 .input-small {
   font-size: calc(var(--agnosticui-input-font-size) - 4px);
+}
+.label-small {
+  /* Since labels are already smaller, bringing them down 4px here
+  just looks too small to my eye. */
+  font-size: calc(var(--agnosticui-input-label-font-size) - 2px);
+}
+
+.input-small {
   height: 32px;
   line-height: 32px;
 }

diff --git a/agnosticui-css/input.html b/agnosticui-css/input.html
@@ -63,12 +63,12 @@ <h3>Text Input</h3>
           <input placeholder="disabled" class="input" id="input-disabled" name="input-disabled" type="text" disabled>
         </div>
         <div>
-          <label class="label" for="input-text-small">Input small label</label>
+          <label class="label label-small" for="input-text-small">Input small label</label>
           <input placeholder="Placeholder text" class="input input-small" id="input-text-small" name="input-text-small"
             type="text">
         </div>
         <div>
-          <label class="label" for="input-text-large">Input large label</label>
+          <label class="label label-large" for="input-text-large">Input large label</label>
           <input placeholder="Placeholder text" class="input input-large" id="input-text-large" name="input-text-large"
             type="text">
         </div>