feat: add less variable of time-picker, date-picker

varletjs · Apr 4, 2021 · 28f6131 · 28f6131
1 parent 4dafdb9
commit 28f6131
Show file tree

Hide file tree

Showing 9 changed files with 393 additions and 92 deletions.
diff --git a/packages/varlet-ui/src/date-picker/date-picker.less b/packages/varlet-ui/src/date-picker/date-picker.less
@@ -1,15 +1,54 @@
 @import '../styles/var';
 @import '../styles/elevation';
 
+@date-picker-border-radius: 4px;
+@date-picker-font-size: @font-size-md;
+@date-picker-min-width: 290px;
+@date-picker-height: 385px;
+@date-picker-title-padding: 16px;
+@date-picker-title-background: @color-primary;
+@date-picker-title-color: #fff;
+@date-picker-title-year-font-size: @font-size-md;
+@date-picker-title-year-font-weight: 500;
+@date-picker-title-year-margin-bottom: 8px;
+@date-picker-title-date-height: 48px;
+@date-picker-title-date-font-size: 34px;
+@date-picker-title-date-font-weight: 500;
+@date-picker-title-date-range-font-size: 20px;
+
+@picker-header-padding: 4px 16px;
+
+@month-picker-padding: 0 12px;
+@month-picker-item-width: 33%;
+@month-picker-item-height: 56px;
+@month-picker-item-button-max-width: 140px;
+
+@year-picker-font-weight: 400;
+@year-picker-item-padding: 8px 0;
+@year-picker-item-active-font-size: 26px;
+@year-picker-item-active-font-weight: 500;
+@year-picker-item-active-font-padding: 10px 0;
+@year-picker-item-active-color: @color-primary;
+
+@day-picker-content-item-width: 14.28%;
+@day-picker-content-item-font-size: @font-size-sm;
+@day-picker-content-item-padding: 2px 0;
+@day-picker-content-item-button-width: 32px;
+@day-picker-content-item-button-height: 32px;
+@day-picker-content-item-button-font-size: @font-size-sm;
+@day-picker-head-item-color: rgba(0, 0, 0, 0.38);
+@day-picker-head-item-padding: 8px 0;
+@day-picker-head-item-font-weight: 600;
+
 .var-date-picker {
-  border-radius: 4px;
+  border-radius: @date-picker-border-radius;
   contain: layout style;
   display: flex;
   flex-direction: column;
-  font-size: @font-size-md;
+  font-size: @date-picker-font-size;
   position: relative;
-  min-width: 290px;
-  height: 385px;
+  min-width: @date-picker-min-width;
+  height: @date-picker-height;
   overflow: hidden;
 
   ul {
@@ -19,9 +58,9 @@
   }
 
   &-title {
-    padding: 16px;
-    color: white;
-    background: @color-primary;
+    padding: @date-picker-title-padding;
+    color: @date-picker-title-color;
+    background: @date-picker-title-background;
     display: flex;
     justify-content: space-between;
     flex-direction: column;
@@ -32,9 +71,9 @@
       cursor: pointer;
       align-items: center;
       display: inline-flex;
-      font-size: 14px;
-      font-weight: 500;
-      margin-bottom: 8px;
+      font-size: @date-picker-title-year-font-size;
+      font-weight: @date-picker-title-year-font-weight;
+      margin-bottom: @date-picker-title-year-margin-bottom;
       transition: 0.3s @cubic-bezier;
 
       &--active {
@@ -43,11 +82,11 @@
     }
 
     &__date {
-      height: 48px;
+      height: @date-picker-title-date-height;
       overflow: hidden;
-      font-size: 34px;
+      font-size: @date-picker-title-date-font-size;
       text-align: left;
-      font-weight: 500;
+      font-weight: @date-picker-title-date-font-weight;
       position: relative;
       cursor: pointer;
       display: flex;
@@ -60,7 +99,7 @@
       }
 
       &--range {
-        font-size: 20px;
+        font-size: @date-picker-title-date-range-font-size;
       }
     }
   }
@@ -72,7 +111,7 @@
   }
 
   .var-picker-header {
-    padding: 4px 16px;
+    padding: @picker-header-padding;
     align-items: center;
     display: flex;
     justify-content: space-between;
@@ -92,27 +131,24 @@
   }
 
   .var-month-picker {
-    &__panel {
-    }
-
     &__content {
-      padding: 0 12px;
+      padding: @month-picker-padding;
 
       ul {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
 
         li {
-          width: 33%;
+          width: @month-picker-item-width;
           display: flex;
-          height: 56px;
+          height: @month-picker-item-height;
           align-items: center;
           justify-content: center;
 
           .var-button {
             width: 100%;
-            max-width: 140px;
+            max-width: @month-picker-item-button-max-width;
           }
         }
       }
@@ -123,31 +159,28 @@
     &__panel {
       width: 100%;
       height: 100%;
-      font-weight: 400;
+      font-weight: @year-picker-font-weight;
       padding: 0;
       margin: 0;
       list-style-type: none;
       overflow: auto;
       text-align: center;
 
       li {
-        padding: 8px 0;
+        padding: @year-picker-item-padding;
         cursor: pointer;
       }
 
       &--active {
-        font-size: 26px;
-        font-weight: 500;
-        padding: 10px 0;
-        color: @color-primary;
+        font-size: @year-picker-item-active-font-size;
+        font-weight: @year-picker-item-active-font-weight;
+        padding: @year-picker-item-active-font-padding;
+        color: @year-picker-item-active-color;
       }
     }
   }
 
   .var-day-picker {
-    &__panel {
-    }
-
     &__content {
       ul {
         display: flex;
@@ -157,26 +190,26 @@
           position: relative;
           display: flex;
           justify-content: center;
-          width: 14.28%;
-          font-size: @font-size-sm;
-          padding: 2px 0;
+          width: @day-picker-content-item-width;
+          font-size: @day-picker-content-item-font-size;
+          padding: @day-picker-content-item-padding;
         }
       }
     }
 
     &__head {
       li {
-        color: rgba(0, 0, 0, 0.38);
-        padding: 8px 0;
-        font-weight: 600;
+        color: @day-picker-head-item-color;
+        padding: @day-picker-head-item-padding;
+        font-weight: @day-picker-head-item-font-weight;
       }
     }
 
     &__body {
       .var-button {
-        width: 32px;
-        height: 32px;
-        font-size: @font-size-sm;
+        width: @day-picker-content-item-button-width;
+        height: @day-picker-content-item-button-height;
+        font-size: @day-picker-content-item-button-font-size;
       }
     }
   }

diff --git a/packages/varlet-ui/src/date-picker/docs/en-US.md b/packages/varlet-ui/src/date-picker/docs/en-US.md
@@ -170,3 +170,64 @@ export default {
 | `range` | Custom the range in the title | `choose: [startData, endDate]` |
 | `multiple` | Custom the multiple in the title  | `choose: ['YYYY-MM-DD' \| 'YYYY-MM']` |
 
+### Theme Variables
+#### The following LESS variables can be overridden at build time to modify the theme style
+
+**date-picker**
+
+| Variable | Default |
+| --- | --- |
+| `@date-picker-border-radius` | `4px` |
+| `@date-picker-font-size` | `@font-size-md` |
+| `@date-picker-min-width` | `290px` |
+| `@date-picker-height` | `385px` |
+| `@date-picker-title-padding` | `16px` |
+| `@date-picker-title-background` | `@color-primary` |
+| `@date-picker-title-color` | `#fff` |
+| `@date-picker-title-year-font-size` | `@font-size-md` |
+| `@date-picker-title-year-font-weight` | `500` |
+| `@date-picker-title-year-margin-bottom` | `8px` |
+| `@date-picker-title-date-height` | `48px` |
+| `@date-picker-title-date-font-size` | `34px` |
+| `@date-picker-title-date-font-weight` | `500` |
+| `@date-picker-title-date-range-font-size` | `20px` |
+
+**picker-header**
+
+| Variable | Default |
+| --- | --- |
+| `@picker-header-padding` | `4px 16px` |
+
+**month-picker**
+
+| Variable | Default |
+| --- | --- |
+| `@month-picker-padding` | `0 12px` |
+| `@month-picker-item-width` | `33%` |
+| `@month-picker-item-height` | `56px` |
+| `@month-picker-item-button-max-width` | `140px` |
+
+**year-picker**
+
+| Variable | Default |
+| --- | --- |
+| `@year-picker-font-weight` | `400` |
+| `@year-picker-item-padding` | `8px 0` |
+| `@year-picker-item-active-font-size` | `26px` |
+| `@year-picker-item-active-font-weight` | `500` |
+| `@year-picker-item-active-font-padding` | `10px 0` |
+| `@year-picker-item-active-color` | `@color-primary` |
+
+**day-picker**
+
+| Variable | Default |
+| --- | --- |
+| `@day-picker-content-item-width` | `14.28%` |
+| `@day-picker-content-item-font-size` | `@font-size-sm` |
+| `@day-picker-content-item-padding` | `2px 0` |
+| `@day-picker-content-item-button-width` | `32px` |
+| `@day-picker-content-item-button-height` | `32px` |
+| `@day-picker-content-item-button-font-size` | `@font-size-sm` |
+| `@day-picker-head-item-color` | `rgba(0, 0, 0, 0.38)` |
+| `@day-picker-head-item-padding` | `8px 0` |
+| `@day-picker-head-item-font-weight` | `600` |
diff --git a/packages/varlet-ui/src/date-picker/docs/zh-CN.md b/packages/varlet-ui/src/date-picker/docs/zh-CN.md
@@ -170,3 +170,65 @@ export default {
 | `range` | 自定义标题中的范围 | `choose: [startData, endDate]` |
 | `multiple` | 自定义标题中的多选 | `choose: ['YYYY-MM-DD' \| 'YYYY-MM']` |
 
+### 主题变量
+#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式
+
+**date-picker**
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@date-picker-border-radius` | `4px` |
+| `@date-picker-font-size` | `@font-size-md` |
+| `@date-picker-min-width` | `290px` |
+| `@date-picker-height` | `385px` |
+| `@date-picker-title-padding` | `16px` |
+| `@date-picker-title-background` | `@color-primary` |
+| `@date-picker-title-color` | `#fff` |
+| `@date-picker-title-year-font-size` | `@font-size-md` |
+| `@date-picker-title-year-font-weight` | `500` |
+| `@date-picker-title-year-margin-bottom` | `8px` |
+| `@date-picker-title-date-height` | `48px` |
+| `@date-picker-title-date-font-size` | `34px` |
+| `@date-picker-title-date-font-weight` | `500` |
+| `@date-picker-title-date-range-font-size` | `20px` |
+
+**picker-header**
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@picker-header-padding` | `4px 16px` |
+
+**month-picker**
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@month-picker-padding` | `0 12px` |
+| `@month-picker-item-width` | `33%` |
+| `@month-picker-item-height` | `56px` |
+| `@month-picker-item-button-max-width` | `140px` |
+
+**year-picker**
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@year-picker-font-weight` | `400` |
+| `@year-picker-item-padding` | `8px 0` |
+| `@year-picker-item-active-font-size` | `26px` |
+| `@year-picker-item-active-font-weight` | `500` |
+| `@year-picker-item-active-font-padding` | `10px 0` |
+| `@year-picker-item-active-color` | `@color-primary` |
+
+**day-picker**
+
+| 变量名 | 默认值 |
+| --- | --- |
+| `@day-picker-content-item-width` | `14.28%` |
+| `@day-picker-content-item-font-size` | `@font-size-sm` |
+| `@day-picker-content-item-padding` | `2px 0` |
+| `@day-picker-content-item-button-width` | `32px` |
+| `@day-picker-content-item-button-height` | `32px` |
+| `@day-picker-content-item-button-font-size` | `@font-size-sm` |
+| `@day-picker-head-item-color` | `rgba(0, 0, 0, 0.38)` |
+| `@day-picker-head-item-padding` | `8px 0` |
+| `@day-picker-head-item-font-weight` | `600` |
+