feat: support more css vars for date-picker and time-picker

varletjs · Sep 22, 2024 · d1bc44b · d1bc44b
1 parent f786eaf
commit d1bc44b
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 3 deletions.
diff --git a/packages/varlet-ui/src/date-picker/date-picker.less b/packages/varlet-ui/src/date-picker/date-picker.less
@@ -12,6 +12,7 @@
   --date-picker-title-year-font-size: var(--font-size-md);
   --date-picker-title-year-font-weight: 500;
   --date-picker-title-year-margin-bottom: 8px;
+  --date-picker-title-year-min-height: 21px;
   --date-picker-title-date-height: 48px;
   --date-picker-title-date-font-size: 34px;
   --date-picker-title-date-font-weight: 500;
@@ -33,6 +34,7 @@
   --year-picker-item-height: 56px;
   --year-picker-item-button-max-width: 140px;
   --day-picker-content-item-width: 14.28%;
+  --day-picker-content-item-min-height: 21px;
   --day-picker-content-item-font-size: var(--font-size-sm);
   --day-picker-content-item-padding: 2px 0;
   --day-picker-content-item-button-width: 32px;
@@ -76,7 +78,7 @@
       align-items: center;
       justify-content: space-between;
       margin-bottom: var(--date-picker-title-year-margin-bottom);
-      min-height: 21px;
+      min-height: var(--date-picker-title-year-min-height);
     }
 
     &-hint {
@@ -247,7 +249,7 @@
           width: var(--day-picker-content-item-width);
           font-size: var(--day-picker-content-item-font-size);
           padding: var(--day-picker-content-item-padding);
-          min-height: 21px;
+          min-height: var(--day-picker-content-item-min-height);
         }
       }
     }

diff --git a/packages/varlet-ui/src/date-picker/docs/en-US.md b/packages/varlet-ui/src/date-picker/docs/en-US.md
@@ -147,6 +147,7 @@ Here are the CSS variables used by the component. Styles can be customized using
 | `--date-picker-title-year-font-size` | `var(--font-size-md)`  |
 | `--date-picker-title-year-font-weight` | `500`                  |
 | `--date-picker-title-year-margin-bottom` | `8px`                  |
+| `--date-picker-title-year-min-height` | `21px`                  |
 | `--date-picker-title-date-height` | `48px`                 |
 | `--date-picker-title-date-font-size` | `34px`                 |
 | `--date-picker-title-date-font-weight` | `500`                  |
@@ -168,6 +169,7 @@ Here are the CSS variables used by the component. Styles can be customized using
 | `--year-picker-item-height` | `56px`                 |
 | `--year-picker-item-button-max-width` | `140px`                |
 | `--day-picker-content-item-width` | `14.28%`               |
+| `--day-picker-content-item-min-height` | `21px`               |
 | `--day-picker-content-item-font-size` | `var(--font-size-sm)`  |
 | `--day-picker-content-item-padding` | `2px 0`                |
 | `--day-picker-content-item-button-width` | `32px`                 |

diff --git a/packages/varlet-ui/src/date-picker/docs/zh-CN.md b/packages/varlet-ui/src/date-picker/docs/zh-CN.md
@@ -149,6 +149,7 @@ const allowedDates = val => parseInt(val.split('-')[2], 10) % 2 === 1
 | `--date-picker-title-year-font-size` | `var(--font-size-md)`  |
 | `--date-picker-title-year-font-weight` | `500`                  |
 | `--date-picker-title-year-margin-bottom` | `8px`                  |
+| `--date-picker-title-year-min-height` | `21px`                  |
 | `--date-picker-title-date-height` | `48px`                 |
 | `--date-picker-title-date-font-size` | `34px`                 |
 | `--date-picker-title-date-font-weight` | `500`                  |
@@ -170,6 +171,7 @@ const allowedDates = val => parseInt(val.split('-')[2], 10) % 2 === 1
 | `--year-picker-item-height` | `56px`                 |
 | `--year-picker-item-button-max-width` | `140px`                |
 | `--day-picker-content-item-width` | `14.28%`               |
+| `--day-picker-content-item-min-height` | `21px`               |
 | `--day-picker-content-item-font-size` | `var(--font-size-sm)`  |
 | `--day-picker-content-item-padding` | `2px 0`                |
 | `--day-picker-content-item-button-width` | `32px`                 |

diff --git a/packages/varlet-ui/src/time-picker/docs/en-US.md b/packages/varlet-ui/src/time-picker/docs/en-US.md
@@ -166,6 +166,7 @@ Here are the CSS variables used by the component. Styles can be customized using
 | `--time-picker-title-background` | `var(--color-primary)` |
 | `--time-picker-title-hint-color` | `'#fff'` |
 | `--time-picker-title-hint-font-size` | `14px` |
+| `--time-picker-title-hint-min-height` | `21px` |
 | `--time-picker-title-inactive-opacity` | `0.6` |
 | `--time-picker-title-time-font-size` | `50px` |
 | `--time-picker-title-time-margin` | `0 5px` |

diff --git a/packages/varlet-ui/src/time-picker/docs/zh-CN.md b/packages/varlet-ui/src/time-picker/docs/zh-CN.md
@@ -167,6 +167,7 @@ const date = ref('17:36:22')
 | `--time-picker-title-background` | `var(--color-primary)` |
 | `--time-picker-title-hint-color` | `'#fff'` |
 | `--time-picker-title-hint-font-size` | `14px` |
+| `--time-picker-title-hint-min-height` | `21px` |
 | `--time-picker-title-inactive-opacity` | `0.6` |
 | `--time-picker-title-time-font-size` | `50px` |
 | `--time-picker-title-time-margin` | `0 5px` |

diff --git a/packages/varlet-ui/src/time-picker/timePicker.less b/packages/varlet-ui/src/time-picker/timePicker.less
@@ -9,6 +9,7 @@
   --time-picker-title-background: var(--color-primary);
   --time-picker-title-hint-color: '#fff';
   --time-picker-title-hint-font-size: 14px;
+  --time-picker-title-hint-min-height: 21px;
   --time-picker-title-inactive-opacity: 0.6;
   --time-picker-title-time-font-size: 50px;
   --time-picker-title-time-margin: 0 5px;
@@ -94,7 +95,7 @@
       color: var(--time-picker-title-hint-color);
       font-size: var(--time-picker-title-hint-font-size);
       margin-bottom: var(--time-picker-title-margin-bottom);
-      min-height: 21px;
+      min-height: var(--time-picker-title-hint-min-height);
     }
 
     &-time-container {