feat(input): add --input-label-font-size css var (#209) (#213)

close #209
globalbrain · Jan 31, 2023 · 4a199ac · 4a199ac
1 parent 2125e02
commit 4a199ac
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/docs/styles/input-styles.md b/docs/styles/input-styles.md
@@ -17,14 +17,20 @@ Customize the font size of the generic input value. The font size is different d
    * undefined and size specific values defined below is used.
    */
   --input-font-size: undefined;
+  --input-label-font-size: undefined;
 
   /**
    * Set the font size of different `size` of inputs. When
    * `--button-font-size` is set, these values gets ignored.
    */
   --input-mini-font-size: 14px;
+  --input-mini-label-font-size: 12px;
+
   --input-small-font-size: 16px;
+  --input-small-label-font-size: 14px;
+
   --input-medium-font-size: 16px;
+  --input-medium-label-font-size: 14px;
 }
 ```
 

diff --git a/lib/components/SInputBase.vue b/lib/components/SInputBase.vue
@@ -88,21 +88,19 @@ function getErrorMsg(validation: Validatable) {
 
 <style scoped lang="postcss">
 .SInputBase.mini {
-  .label            { padding-bottom: 6px; }
-  .label-text-value { font-size: 12px; }
+  .label            { padding-bottom: 6px; height: 22px; }
+  .label-text-value { font-size: var(--input-label-font-size, var(--input-mini-label-font-size)); }
   .label-text-info  { width: 14px; height: 14px; }
 }
 
 .SInputBase.small {
-  .label              { padding-bottom: 8px; }
-  .label-text-value   { font-size: 14px; }
-  .label-note, .check { transform: translateY(1px); }
+  .label              { padding-bottom: 8px; height: 24px; }
+  .label-text-value   { font-size: var(--input-label-font-size, var(--input-small-label-font-size)); }
 }
 
 .SInputBase.medium {
-  .label              { padding-bottom: 8px; }
-  .label-text-value   { font-size: 14px; }
-  .label-note, .check { transform: translateY(1px); }
+  .label              { padding-bottom: 8px; height: 24px; }
+  .label-text-value   { font-size: var(--input-label-font-size, var(--input-medium-label-font-size)); }
 }
 
 .SInputBase.has-error {
@@ -113,7 +111,7 @@ function getErrorMsg(validation: Validatable) {
 
 .label {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   width: 100%;
   line-height: 16px;
   font-weight: 500;

diff --git a/lib/styles/variables.css b/lib/styles/variables.css
@@ -658,4 +658,8 @@
   --input-mini-font-size: 14px;
   --input-small-font-size: 16px;
   --input-medium-font-size: 16px;
+
+  --input-mini-label-font-size: 12px;
+  --input-small-label-font-size: 14px;
+  --input-medium-label-font-size: 14px;
 }