@varlet/ui 2.20.5 → 3.0.0-alpha.1704352780759

package/es/themes/md3-dark/tooltip.mjs

@@ -0,0 +1,13 @@
+var stdin_default = {
+  "--tooltip-default-color": "#E6E0E9",
+  "--tooltip-opacity": "1",
+  "--tooltip-default-text-color": "#322F35",
+  "--tooltip-primary-text-color": "#381E72",
+  "--tooltip-danger-text-color": "#601410",
+  "--tooltip-success-text-color": "#273500",
+  "--tooltip-warning-text-color": "#492532",
+  "--tooltip-info-text-color": "#332D41"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-dark/uploader.mjs

@@ -0,0 +1,11 @@
+var stdin_default = {
+  "--uploader-file-border-radius": "8px",
+  "--uploader-action-background": "#36343B",
+  "--uploader-file-name-background": "#36343B",
+  "--uploader-file-cover-background": "#36343B",
+  "--uploader-action-icon-color": "#CAC4D0",
+  "--uploader-file-name-color": "#CAC4D0"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-dark/watermark.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--watermark-content-color": "#ffffff"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/actionSheet.mjs

@@ -0,0 +1,9 @@
+var stdin_default = {
+  "--action-sheet-background": "#ECE6F0",
+  "--action-sheet-title-color": "#49454F",
+  "--action-sheet-action-item-color": "#1D1B20",
+  "--action-sheet-border-radius": "0px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/avatar.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--avatar-text-color": "#fff",
+  "--avatar-background-color": "var(--color-primary)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/backTop.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--back-top-button-border-radius": "12px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/badge.mjs

@@ -0,0 +1,10 @@
+var stdin_default = {
+  "--badge-primary-text-color": "#fff",
+  "--badge-danger-text-color": "#fff",
+  "--badge-success-text-color": "#fff",
+  "--badge-warning-text-color": "#fff",
+  "--badge-info-text-color": "#fff"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/bottomNavigation.mjs

@@ -0,0 +1,8 @@
+var stdin_default = {
+  "--bottom-navigation-background-color": "#F3EDF7",
+  "--bottom-navigation-border-color": "#CAC4D0",
+  "--bottom-navigation-fab-border-radius": "12px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/bottomNavigationItem.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--bottom-navigation-item-active-background-color": "#E8DEF8",
+  "--bottom-navigation-item-inactive-color": "#49454F"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/breadcrumb.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--breadcrumb-inactive-color": "#49454F"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/button.mjs

@@ -0,0 +1,8 @@
+var stdin_default = {
+  "--button-default-color": "#F7F2FA",
+  "--button-default-text-color": "var(--color-primary)",
+  "--button-border-radius": "100px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/card.mjs

@@ -0,0 +1,27 @@
+var stdin_default = {
+  "--card-border-radius": "12px",
+  "--card-background": "#F7F2FA",
+  "--card-outline-color": "#CAC4D0",
+  "--card-image-height": "188px",
+  "--card-title-color": "#1D1B20",
+  "--card-title-font-size": "16px",
+  "--card-title-padding": "0 16px",
+  "--card-title-margin": "16px 0 0 0",
+  "--card-subtitle-color": "#49454F",
+  "--card-subtitle-padding": "0 16px",
+  "--card-subtitle-margin": "4px 0 0 0",
+  "--card-description-margin": "32px 0 0 0",
+  "--card-description-padding": "0 16px",
+  "--card-description-color": "#49454F",
+  "--card-padding": "0 0 16px 0",
+  "--card-footer-margin": "32px 0 0 0",
+  "--card-title-row-margin": "16px 0 0 0",
+  "--card-subtitle-row-margin": "4px 0 0 0",
+  "--card-footer-padding": "0 16px",
+  "--card-close-button-size": "56px",
+  "--card-close-button-primary-color": "var(--color-primary)",
+  "--card-close-button-border-radius": "12px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/cell.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--cell-description-color": "#49454F",
+  "--cell-border-color": "#CAC4D0"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/checkbox.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--checkbox-unchecked-color": "#49454F",
+  "--checkbox-text-color": "#49454F"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/chip.mjs

@@ -0,0 +1,18 @@
+var stdin_default = {
+  "--chip-round-radius": "8px",
+  "--chip-default-color": "#ECE6F0",
+  "--chip-default-text-color": "#1D192B",
+  "--chip-primary-color": "#EADDFF",
+  "--chip-primary-text-color": "#21005D",
+  "--chip-info-color": "#E8DEF8",
+  "--chip-info-text-color": "#1D192B",
+  "--chip-warning-color": "#FFD8E4",
+  "--chip-warning-text-color": "#31111D",
+  "--chip-danger-color": "#F9DEDC",
+  "--chip-danger-text-color": "#410E0B",
+  "--chip-success-text-color": "#151F00",
+  "--chip-success-color": "#D5EC9C"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/collapse.mjs

@@ -0,0 +1,8 @@
+var stdin_default = {
+  "--collapse-background": "#F7F2FA",
+  "--collapse-border-top": "thin solid #CAC4D0",
+  "--collapse-text-color": "#1D1B20"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/countdown.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--countdown-text-color": "#000"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/datePicker.mjs

@@ -0,0 +1,19 @@
+var stdin_default = {
+  "--date-picker-title-background": "#ECE6F0",
+  "--date-picker-title-color": "#1D1B20",
+  "--date-picker-title-hint-color": "#49454F",
+  "--date-picker-body-background-color": "#ECE6F0",
+  "--date-picker-main-color": "#1D1B20",
+  "--date-picker-border-radius": "20px",
+  "--date-picker-title-padding": "20px 20px 16px",
+  "--date-picker-actions-padding": "20px",
+  "--day-picker-head-item-color": "#1D1B20",
+  "--date-picker-header-arrow-filter": "opacity(1)",
+  "--date-picker-header-padding": "0 0 16px",
+  "--date-picker-body-height": "300px",
+  "--date-picker-body-padding": "0 14px 16px",
+  "--date-picker-header-color": "#49454F"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/dialog.mjs

@@ -0,0 +1,15 @@
+var stdin_default = {
+  "--dialog-width": "312px",
+  "--dialog-background": "#ECE6F0",
+  "--dialog-title-color": "#1D1B20",
+  "--dialog-message-color": "#49454F",
+  "--dialog-border-radius": "28px",
+  "--dialog-title-padding": "24px 24px 0",
+  "--dialog-message-padding": "16px 24px 24px",
+  "--dialog-actions-padding": "0 24px 24px",
+  "--dialog-title-font-size": "20px",
+  "--dialog-button-margin-left": "8px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/divider.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--divider-color": "#CAC4D0"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/fab.mjs

@@ -0,0 +1,8 @@
+var stdin_default = {
+  "--fab-trigger-border-radius": "16px",
+  "--fab-action-size": "40px",
+  "--fab-action-border-radius": "12px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/fieldDecorator.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--field-decorator-text-color": "#1D1B20",
+  "--field-decorator-blur-color": "#79747E"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/floatingPanel.mjs

@@ -0,0 +1,10 @@
+var stdin_default = {
+  "--floating-panel-background": "#F7F2FA",
+  "--floating-panel-toolbar-background": "#79747E",
+  "--floating-panel-toolbar-width": "32px",
+  "--floating-panel-toolbar-height": "4px",
+  "--floating-panel-header-height": "36px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/hoverOverlay.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--hover-overlay-opacity": "0.12"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/index.d.ts

@@ -0,0 +1,5 @@
+import { StyleVars } from '../../../types'
+
+declare const md3Light: StyleVars
+
+export default md3Light

package/es/themes/md3-light/index.mjs

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import button from "./button.mjs";
+import hoverOverlay from "./hoverOverlay.mjs";
+import menu from "./menu.mjs";
+import menuSelect from "./menuSelect.mjs";
+import menuOption from "./menuOption.mjs";
+import fab from "./fab.mjs";
+import breadcrumb from "./breadcrumb.mjs";
+import link from "./link.mjs";
+import cell from "./cell.mjs";
+import paper from "./paper.mjs";
+import avatar from "./avatar.mjs";
+import fieldDecorator from "./fieldDecorator.mjs";
+import checkbox from "./checkbox.mjs";
+import radio from "./radio.mjs";
+import card from "./card.mjs";
+import chip from "./chip.mjs";
+import badge from "./badge.mjs";
+import tooltip from "./tooltip.mjs";
+import tabs from "./tabs.mjs";
+import tab from "./tab.mjs";
+import divider from "./divider.mjs";
+import table from "./table.mjs";
+import pagination from "./pagination.mjs";
+import collapse from "./collapse.mjs";
+import result from "./result.mjs";
+import bottomNavigation from "./bottomNavigation.mjs";
+import bottomNavigationItem from "./bottomNavigationItem.mjs";
+import snackbar from "./snackbar.mjs";
+import actionSheet from "./actionSheet.mjs";
+import dialog from "./dialog.mjs";
+import pullRefresh from "./pullRefresh.mjs";
+import popup from "./popup.mjs";
+import picker from "./picker.mjs";
+import countdown from "./countdown.mjs";
+import floatingPanel from "./floatingPanel.mjs";
+import backTop from "./backTop.mjs";
+import select from "./select.mjs";
+import option from "./option.mjs";
+import slider from "./slider.mjs";
+import uploader from "./uploader.mjs";
+import timePicker from "./timePicker.mjs";
+import datePicker from "./datePicker.mjs";
+var stdin_default = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+  // common
+  "--color-body": "#fef7ff",
+  "--color-text": "#000",
+  "--color-primary": "#6750A4",
+  "--color-info": "#625B71",
+  "--color-success": "#536525",
+  "--color-warning": "#7D5260",
+  "--color-danger": "#B3261E"
+}, button), hoverOverlay), menu), menuSelect), menuOption), fab), breadcrumb), link), cell), paper), avatar), fieldDecorator), checkbox), radio), card), chip), badge), tooltip), tabs), tab), divider), table), pagination), collapse), result), bottomNavigation), bottomNavigationItem), snackbar), actionSheet), dialog), pullRefresh), popup), picker), countdown), floatingPanel), backTop), select), option), slider), uploader), timePicker), datePicker);
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/link.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--link-default-color": "#000"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/menu.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--menu-background-color": "#F3EDF7",
+  "--menu-border-radius": "4px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/menuOption.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--menu-option-text-color": "#1D1B20"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/menuSelect.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--menu-select-menu-background-color": "#F3EDF7",
+  "--menu-select-menu-border-radius": "4px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/option.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--option-text-color": "#1D1B20"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/pagination.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--pagination-list-active-bg-color": "#EADDFF"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/paper.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--paper-background": "#F7F2FA"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/picker.mjs

@@ -0,0 +1,8 @@
+var stdin_default = {
+  "--picker-background": "#fef7ff",
+  "--picker-cancel-button-text-color": "var(--color-primary)",
+  "--picker-mask-background-image": "linear-gradient(180deg, rgba(254, 247, 255, 0.9), rgba(254, 247, 255, 0.4)), linear-gradient(0deg, rgba(254, 247, 255, 0.9), rgba(254, 247, 255, 0.4)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/popup.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--popup-content-background-color": "#ECE6F0"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/pullRefresh.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--pull-refresh-background": "#FEF7FF"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/radio.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--radio-unchecked-color": "#49454F",
+  "--radio-text-color": "#49454F"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/result.mjs

@@ -0,0 +1,12 @@
+var stdin_default = {
+  "--result-background": "#fef7ff",
+  "--result-title-color": "#1D1B20",
+  "--result-description-color": "#49454F",
+  "--result-info-border-color": "rgba(98, 91, 113, 0.3)",
+  "--result-success-border-color": "rgba(83, 101, 37, 0.3)",
+  "--result-error-border-color": "rgba(179, 38, 30, 0.3)",
+  "--result-warning-border-color": "rgba(125, 82, 96, 0.3)"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/select.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--select-scroller-background": "#F3EDF7",
+  "--select-scroller-border-radius": "4px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/slider.mjs

@@ -0,0 +1,10 @@
+var stdin_default = {
+  "--slider-thumb-size": "16px",
+  "--slider-track-height": "4px",
+  "--slider-track-background": "#E6E0E9",
+  "--slider-track-fill-border-radius": "4px",
+  "--slider-track-border-radius": "4px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/snackbar.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--snackbar-color": "#F5EFF7",
+  "--snackbar-background": "#322F35"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/tab.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--tab-inactive-color": "#49454F"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/table.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--table-background": "#F7F2FA",
+  "--table-tbody-tr-hover-background": "#F7F2FA"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/tabs.mjs

@@ -0,0 +1,6 @@
+var stdin_default = {
+  "--tabs-background": "#FEF7FF"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/timePicker.mjs

@@ -0,0 +1,15 @@
+var stdin_default = {
+  "--time-picker-title-color": "#1D1B20",
+  "--time-picker-title-hint-color": "#49454F",
+  "--time-picker-clock-container-background": "#E6E0E9",
+  "--time-picker-title-background": "#ECE6F0",
+  "--time-picker-body-background": "#ECE6F0",
+  "--time-picker-clock-item-active-color": "#fff",
+  "--time-picker-clock-item-text-color": "#1D1B20",
+  "--time-picker-border-radius": "20px",
+  "--time-picker-title-padding": "20px 20px 16px",
+  "--time-picker-actions-padding": "20px"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/tooltip.mjs

@@ -0,0 +1,7 @@
+var stdin_default = {
+  "--tooltip-default-color": "#322F35",
+  "--tooltip-opacity": "1"
+};
+export {
+  stdin_default as default
+};

package/es/themes/md3-light/uploader.mjs

@@ -0,0 +1,11 @@
+var stdin_default = {
+  "--uploader-file-border-radius": "8px",
+  "--uploader-action-background": "#F7F2FA",
+  "--uploader-file-name-background": "#F7F2FA",
+  "--uploader-file-cover-background": "#F7F2FA",
+  "--uploader-action-icon-color": "#49454F",
+  "--uploader-file-name-color": "#49454F"
+};
+export {
+  stdin_default as default
+};

package/es/time-picker/TimePicker.mjs

@@ -32,7 +32,7 @@ function __render__(_ctx, _cache) {
         "div",
         {
           class: _normalizeClass(_ctx.n("title")),
-          style: _normalizeStyle({ background: _ctx.titleColor || _ctx.headerColor || _ctx.color })
+          style: _normalizeStyle({ background: _ctx.titleColor || _ctx.color })
         },
         [
           _createElementVNode(

package/es/time-picker/clock.mjs

@@ -183,9 +183,9 @@ const __sfc__ = defineComponent({
         return props.color;
       const hour = props.isInner ? hours24[activeItemIndex.value] : timeScales.value[activeItemIndex.value];
       if (timeScales.value === minSec) {
-        return isDisableMinSec() ? "#bdbdbd" : props.color;
+        return isDisableMinSec() ? "var(--time-picker-clock-item-disable-background)" : props.color;
       }
-      return isDisable(hour) ? "#bdbdbd" : props.color;
+      return isDisable(hour) ? "var(--time-picker-clock-item-disable-background)" : props.color;
     };
     const isActive = (index, inner2) => {
       if (inner2)
@@ -214,8 +214,8 @@ const __sfc__ = defineComponent({
         }
         if (isDisable(hour)) {
           return {
-            backgroundColor: "#bdbdbd",
-            color: "#fff"
+            backgroundColor: "var(--time-picker-clock-item-disable-background)",
+            color: "var(--time-picker-clock-item-disable-color)"
           };
         }
         return {

package/es/time-picker/props.mjs

@@ -10,8 +10,6 @@ const props = {
   },
   hint: String,
   color: String,
-  /** @deprecated Use titleColor to instead. */
-  headerColor: String,
   titleColor: String,
   format: {
     type: String,

package/es/time-picker/timePicker.css

@@ -1 +1 @@
-:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-title-height: 105px; --time-picker-title-padding: 16px; --time-picker-title-margin-bottom: 8px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-hint-font-size: 14px; --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 256px; --time-picker-clock-container-height: 256px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-clock-item-text-color: #555; --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff; --time-picker-body-height: calc(var(--time-picker-clock-container-height) + 32px); --time-picker-actions-padding: 0 8px 12px 8px;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { min-height: var(--time-picker-title-height); padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); display: block;}.var-time-picker__title-hint { font-size: var(--time-picker-title-hint-font-size); margin-bottom: var(--time-picker-title-margin-bottom);}.var-time-picker__title-time-container { display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker__title-btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker__title-btn--active { opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker__body { display: flex; align-items: center; justify-content: center; height: var(--time-picker-body-height); background-color: var(--time-picker-body-background);}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%); color: var(--time-picker-clock-item-text-color);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker__actions { display: flex; justify-content: flex-end; align-items: center; background-color: var(--time-picker-body-background); padding: var(--time-picker-actions-padding);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}
+:root { --time-picker-border-radius: 4px; --time-picker-font-size: var(--font-size-md); --time-picker-min-width: 290px; --time-picker-title-height: 105px; --time-picker-title-padding: 16px; --time-picker-title-margin-bottom: 8px; --time-picker-title-color: #fff; --time-picker-title-background: var(--color-primary); --time-picker-title-hint-color: '#fff'; --time-picker-title-hint-font-size: 14px; --time-picker-title-time-font-size: 50px; --time-picker-title-time-margin: 0 5px; --time-picker-title-ampm-margin-left: 5px; --time-picker-clock-left: 27px; --time-picker-clock-right: 27px; --time-picker-clock-top: 27px; --time-picker-clock-bottom: 27px; --time-picker-clock-container-width: 256px; --time-picker-clock-container-height: 256px; --time-picker-clock-container-background: #e0e0e0; --time-picker-clock-hand-height: calc(50% - 4px); --time-picker-clock-hand-width: 2px; --time-picker-clock-hand-bottom: 50%; --time-picker-clock-hand-left: calc(50% - 1px); --time-picker-clock-hand-background: var(--color-primary); --time-picker-clock-hand-border-color: var(--color-primary); --time-picker-clock-hand-before-width: 10px; --time-picker-clock-hand-before-height: 10px; --time-picker-clock-hand-before-border-width: 2px; --time-picker-clock-hand-after-width: 4px; --time-picker-clock-hand-after-height: 4px; --time-picker-clock-item-height: 32px; --time-picker-clock-item-width: 32px; --time-picker-clock-item-active-background: var(--color-primary); --time-picker-clock-item-active-color: #fff; --time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26); --time-picker-clock-item-disable-background: #bdbdbd; --time-picker-clock-item-text-color: #555; --time-picker-inner-left: 36px; --time-picker-inner-right: 36px; --time-picker-inner-top: 36px; --time-picker-inner-bottom: 36px; --time-picker-body-background: #fff; --time-picker-body-height: calc(var(--time-picker-clock-container-height) + 32px); --time-picker-actions-padding: 0 8px 12px 8px;}.after-before-basic { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%);}.var-time-picker { border-radius: var(--time-picker-border-radius); contain: layout style; display: flex; width: 100%; flex-direction: column; font-size: var(--time-picker-font-size); position: relative; min-width: var(--time-picker-min-width); overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-time-picker__title { min-height: var(--time-picker-title-height); padding: var(--time-picker-title-padding); color: var(--time-picker-title-color); background: var(--time-picker-title-background); transition: 0.25s background-color; display: block;}.var-time-picker__title-hint { color: var(--time-picker-title-hint-color); font-size: var(--time-picker-title-hint-font-size); margin-bottom: var(--time-picker-title-margin-bottom);}.var-time-picker__title-time-container { display: flex; align-items: flex-end; justify-content: flex-end;}.var-time-picker__title-btn { opacity: 0.6; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier); white-space: nowrap;}.var-time-picker__title-btn--active { opacity: 1;}.var-time-picker__title-time { display: flex; justify-content: flex-end; font-size: var(--time-picker-title-time-font-size);}.var-time-picker__title-time .var-time-picker__title-btn { align-items: center; margin: var(--time-picker-title-time-margin);}.var-time-picker__title-ampm { margin-left: var(--time-picker-title-ampm-margin-left);}.var-time-picker__body { display: flex; align-items: center; justify-content: center; height: var(--time-picker-body-height); background-color: var(--time-picker-body-background); transition: 0.25s background-color;}.var-time-picker__clock { position: absolute; bottom: var(--time-picker-clock-bottom); left: var(--time-picker-clock-left); right: var(--time-picker-clock-right); top: var(--time-picker-clock-top);}.var-time-picker__clock-container { width: var(--time-picker-clock-container-width); height: var(--time-picker-clock-container-height); background: var(--time-picker-clock-container-background); border-radius: 50%; position: relative;}.var-time-picker__clock-hand { height: var(--time-picker-clock-hand-height); width: var(--time-picker-clock-hand-width); bottom: var(--time-picker-clock-hand-bottom); left: var(--time-picker-clock-hand-left); transform-origin: center bottom; position: absolute; will-change: transform; z-index: 1; background-color: var(--time-picker-clock-hand-background); border-color: var(--time-picker-clock-hand-border-color);}.var-time-picker__clock-hand::before { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: var(--time-picker-clock-hand-before-border-width) solid; width: var(--time-picker-clock-hand-before-width); height: var(--time-picker-clock-hand-before-height); top: -5px; border-color: inherit;}.var-time-picker__clock-hand::after { content: ''; position: absolute; border-radius: 100%; left: 50%; transform: translate(-50%, -50%); border-color: inherit; height: var(--time-picker-clock-hand-after-height); width: var(--time-picker-clock-hand-after-width); top: 100%; border-style: solid; background-color: inherit;}.var-time-picker__clock-item { align-items: center; border-radius: 100%; display: flex; justify-content: center; height: var(--time-picker-clock-item-height); position: absolute; width: var(--time-picker-clock-item-width); user-select: none; transform: translate(-50%, -50%); color: var(--time-picker-clock-item-text-color);}.var-time-picker__clock-item--active { background: var(--time-picker-clock-item-active-background); z-index: 2; color: var(--time-picker-clock-item-active-color);}.var-time-picker__clock-item--disable { color: var(--time-picker-clock-item-disable-color);}.var-time-picker__clock-inner { position: absolute; bottom: var(--time-picker-inner-bottom); left: var(--time-picker-inner-left); right: var(--time-picker-inner-right); top: var(--time-picker-inner-top);}.var-time-picker__actions { display: flex; justify-content: flex-end; align-items: center; background-color: var(--time-picker-body-background); padding: var(--time-picker-actions-padding);}.var-time-picker-panel-fade-enter-from,.var-time-picker-panel-fade-leave-to { transition: 0.3s var(--cubic-bezier); opacity: 0;}.var-time-picker-panel-fade-leave-active { position: absolute;}