@blueking/date-picker 2.0.0-beta.9 → 3.0.0-beta.2

package/vue3/vue3.css

@@ -1 +1,796 @@
-.common-panel-tab{display:flex;align-items:center}.common-panel-tab .bk-tab-header{line-height:20px!important;border-bottom:0!important}.common-panel-tab .bk-tab-header .bk-tab-header-item{padding:0 0 4px;margin-right:28px}.common-panel-tab .bk-tab-header--active{font-weight:700;color:#63656e}.common-panel-tab .bk-tab-content{display:none;width:0;height:0}.common-panel-tab .delete-all{margin-left:auto}.common-panel-tab .delete-all:hover{color:#3a84ff;cursor:pointer}.common-submit{flex:0 0 64px;width:64px;margin-left:8px}.common-favorite{display:flex;flex:0 0 32px;align-items:center;justify-content:center;width:32px;height:32px;margin-left:8px;cursor:pointer;background:#f5f7fa;border-radius:2px}.common-favorite:hover svg path{fill:#3a84ff}.date-panel{display:flex;flex-direction:column;width:220px;-webkit-user-select:none;user-select:none;background:#fff;border:1px solid #dcdee5;box-shadow:0 2px 6px #0000001a}.date-panel-title{display:flex;flex:0 0 40px;align-items:center;height:40px;padding:0 12px;color:#63656e;border-bottom:1px solid #dcdee5}.date-panel-title .title-check{margin-left:auto}.date-panel-title .title-check .bk-checkbox{pointer-events:none}.date-panel-main{display:flex;flex:1;flex-direction:column;padding:8px 0 12px}.date-panel-main .date-header{display:flex;align-items:center;width:100%;height:24px}.date-panel-main .date-header-center{display:flex;flex:1;align-items:center;justify-content:center;height:100%;font-size:14px;font-weight:700}.date-panel-main .date-header-center .date-split{width:5px;height:2px;margin:0 10px;background-color:#63656e}.date-panel-main .date-header-right,.date-panel-main .date-header-left{display:flex;align-items:center;height:100%;padding:0 6px;font-size:16px}.date-panel-main .date-header-right .hand-icon,.date-panel-main .date-header-left .hand-icon{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#979ba5}.date-panel-main .date-header-right .hand-icon svg,.date-panel-main .date-header-left .hand-icon svg{width:20px!important;height:20px!important;font-weight:700}.date-panel-main .date-header-right .hand-icon:hover,.date-panel-main .date-header-left .hand-icon:hover{color:#3a84ff;cursor:pointer}.date-panel-main .date-header-right .hand-icon:hover svg,.date-panel-main .date-header-left .hand-icon:hover svg{fill:#3a84ff}.date-panel-main .date-header-right{margin-left:auto}.date-panel-main .date-content{display:flex;flex-direction:column}.date-panel-main .date-content .date-grid{display:flex;align-items:center;width:100%;padding:0 12px;margin:0}.date-panel-main .date-content .date-grid-item{display:flex;flex:0 0 14.285%;align-items:center;justify-content:center;width:14.285%;min-width:28px;height:24px}.date-panel-main .date-content .date-grid-item:not(.not-click):hover{cursor:pointer;background-color:#f0f1f5}.date-panel-main .date-content .date-grid-item.is-today{color:#3a84ff;border:1px solid #a3c5fd;border-radius:2px}.date-panel-main .date-content .date-grid-item.is-last-month{color:#c4c6cc;background-color:#f0f1f5}.date-panel-main .date-content .date-grid-item.is-next-month{color:#c4c6cc}.date-panel-main .date-content .date-grid-item.is-disabled{color:#c4c6cc!important;cursor:not-allowed!important;background-color:#f0f1f5!important}.date-panel-main .date-content .date-grid-item.is-selected{color:#fff!important;background-color:#3a84ff!important;border-radius:2px}.date-wrapper{display:flex;flex-direction:column}.date-wrapper .date-input{display:flex;align-items:center;width:100%;min-height:56px}.date-wrapper .date-input .date-picker{display:flex;align-items:center;width:100%;min-width:360px;height:32px;background:#fff;border:1px solid #c4c6cc;border-radius:2px}.date-wrapper .date-input .date-picker-icon{display:flex;align-items:center;justify-content:center;margin-right:6px;margin-left:8px}.date-wrapper .date-input .date-picker-start,.date-wrapper .date-input .date-picker-end{width:160px;height:24px;padding:0 4px;font-size:12px;color:#63656e;border:none;border-radius:2px}.date-wrapper .date-input .date-picker-start:focus,.date-wrapper .date-input .date-picker-end:focus{background:#e1ecff;border:none;outline:none;box-shadow:none}.date-wrapper .date-input .date-picker-split{display:flex;align-items:center;justify-content:center;padding:0 8px;color:#979ba5}.date-wrapper .date-input .date-picker-clear{display:none!important;flex:0 0 32px;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;color:#c4c6cc}.date-wrapper .date-input .date-picker-clear:hover{color:#63656e;cursor:pointer}.date-wrapper .date-input .date-picker:hover .date-picker-clear{display:flex!important}.date-wrapper .show-format{display:flex;align-items:center;width:100%;min-width:100%;margin-top:-8px;margin-bottom:12px;color:#979ba5}.date-wrapper .show-format .format-button{margin-left:8px}.date-format-wrapper{display:flex;flex-direction:column;width:520px;padding:12px 15px}.date-format-wrapper .content-title{margin-bottom:12px;font-weight:700;line-height:20px}.date-format-wrapper .content-table{display:flex;flex-direction:column;width:100%;border-collapse:collapse;background-color:#fff;border:1px solid #eaeefb;border-top:0;border-left:0}.date-format-wrapper .content-table th,.date-format-wrapper .content-table td{height:42px;padding:0 16px;line-height:42px;color:#63656e;text-align:left;border:1px solid #eaeefb;border-right:0;border-bottom:0}.date-format-wrapper .content-table thead,.date-format-wrapper .content-table tr{display:flex;align-items:center;width:100%}.date-format-wrapper .content-table thead th,.date-format-wrapper .content-table tr th{flex:1;background-color:#fafbfd}.date-format-wrapper .content-table tbody{display:block;width:calc(100% + 4px);max-height:300px;overflow:auto}.date-format-wrapper .content-table tbody td{display:flex;flex:1;align-items:center}.natural-picker{display:flex;align-items:center;min-height:56px}.natural-picker .natural-date{width:256px}.natural-picker .natural-unit{width:140px;margin-left:8px}.natural-custom-option{display:flex;align-items:center;width:100%;min-width:250px;height:100%;padding:0 12px;margin:0 -12px}.natural-custom-option .bk-input{background-color:#fff}.recent-picker{display:flex;align-items:center;min-height:56px}.recent-picker .recent-input{border-top-right-radius:0;border-bottom-right-radius:0}.recent-picker .recent-input.is-focused{z-index:2}.recent-picker .recent-unit{width:164px}.recent-picker .recent-unit .bk-input{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}.recent-picker .recent-unit .bk-input--text{border-radius:0}.timezone-picker{width:100%}.timezone-picker-option{display:flex;align-items:center;width:100%;color:#63656e}.timezone-picker-option .option-name{flex:1}.timezone-picker-option .option-country{display:flex;width:100%;margin-left:6px;color:#999}.timezone-picker-option .option-utc{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 8px;background:#f0f1f5;border-radius:2px}.timezone-picker-option.is-selected{color:#3a84ff}.timezone-picker-option.is-selected .option-country{color:#699df4}.timezone-picker-option.is-selected .option-utc{color:#fff;background-color:#699df4}.panel-wrapper{width:510px;padding:12px 16px 0;background:#fff;border:1px solid #dcdee5;border-radius:2px;box-shadow:0 2px 6px #0000001a}.panel-wrapper .common-date-list{height:136px;max-height:136px;padding:0 0 4px;margin:12px -10px 0 0;overflow:auto}.panel-wrapper .common-date-list .list-item{display:inline-flex;align-items:center;min-width:calc(33.33% - 8px);height:28px;padding:0 8px;margin-right:8px;margin-bottom:8px;color:#313238;cursor:pointer;background:#f5f7fa;border-radius:2px}.panel-wrapper .common-date-list .list-item.is-recent-item{min-width:inherit;height:24px;padding:0 6px;color:#63656e}.panel-wrapper .common-date-list .list-item.is-selected,.panel-wrapper .common-date-list .list-item:hover{color:#3a84ff;background:#e1ecff}.panel-wrapper .date-pick-tab{padding-top:12px;border-top:1px solid #eaebf0}.panel-wrapper .date-pick-tab .bk-tab-header-item{margin-right:20px!important}.panel-wrapper .time-zone-panel{display:flex;align-items:center;height:45px;padding:0 16px;margin:0 -16px;color:#313238;background:#fafbfd;border-top:1px solid #dcdee5}.panel-wrapper .time-zone-panel .time-zone{display:flex;align-items:center;margin:0 8px}.panel-wrapper .time-zone-panel .time-zone-area{display:flex;align-items:center;margin-left:8px;color:#979ba5}.panel-wrapper .time-zone-panel .time-zone-tag{display:flex;align-items:center;justify-content:center;width:79px;height:20px;color:#63656e;border:1px solid #dcdee5;border-radius:2px}.panel-wrapper .time-zone-panel .time-zone-btn{margin-left:auto}.panel-wrapper .time-zone-picker{margin:8px 0}.panel-wrapper .common-wrapper{display:flex;flex-direction:column;height:139px;max-height:139px;overflow:auto}.panel-wrapper .common-wrapper .empty-content{height:100px;max-height:100px}.panel-wrapper .common-wrapper .empty-tips{display:flex;align-items:center;justify-content:center}.__bk_date_picker__{box-sizing:border-box;display:inline-flex;align-items:center;height:32px;padding:0 4px;font-size:12px;color:#63656e;border:1px solid #c4c6cc;border-radius:2px}.__bk_date_picker__ div::-webkit-scrollbar,.__bk_date_picker__ ul::-webkit-scrollbar,.__bk_date_picker__ section::-webkit-scrollbar,.__bk_date_picker__ tbody::-webkit-scrollbar,.__bk_date_picker__ article::-webkit-scrollbar{width:4px;height:4px}.__bk_date_picker__ div::-webkit-scrollbar-thumb,.__bk_date_picker__ ul::-webkit-scrollbar-thumb,.__bk_date_picker__ section::-webkit-scrollbar-thumb,.__bk_date_picker__ tbody::-webkit-scrollbar-thumb,.__bk_date_picker__ article::-webkit-scrollbar-thumb{background:#ddd;border-radius:20px;box-shadow:inset 0 0 6px #cccccc4d}.__bk_date_picker__ .date-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:20px;font-weight:700;color:#989ca7;background:#f5f7fa;border-radius:2px}.__bk_date_picker__ .date-icon-left,.__bk_date_picker__ .date-icon-right{display:inline-flex}.__bk_date_picker__ .date-icon-left svg,.__bk_date_picker__ .date-icon-right svg{width:20px!important;height:20px!important}.__bk_date_picker__ .date-icon:hover{cursor:pointer;background-color:#f0f1f5}.__bk_date_picker__.is-simplicity{border-color:transparent}.__bk_date_picker__.is-simplicity .date-icon{background-color:transparent}.__bk_date_picker__.is-simplicity .date-icon:hover{cursor:pointer;background-color:#f0f1f5}.__bk_date_picker__.is-disabled{color:#c4c6cc;cursor:not-allowed}.__bk_date_picker__.is-disabled .date-icon{color:#c4c6cc;pointer-events:none}.__bk_date_picker__.is-disabled .date-content{pointer-events:none;cursor:not-allowed}.__bk_date_picker__ .date-content{display:flex;align-items:center;height:24px;padding:0 6px;margin:0 4px;-webkit-user-select:none;user-select:none;border-radius:2px}.__bk_date_picker__ .date-content-icon{margin-right:4px}.__bk_date_picker__ .date-content-utc{display:flex;align-items:center;margin-left:4px;font-weight:700;color:#ff9c01}.__bk_date_picker__ .date-content:hover{cursor:pointer;background:#f5f7fa}.__bk-date-picker-popover__{padding:0!important;margin:0!important;color:#63656e!important}.__bk-date-picker-popover__ div::-webkit-scrollbar,.__bk-date-picker-popover__ ul::-webkit-scrollbar,.__bk-date-picker-popover__ section::-webkit-scrollbar,.__bk-date-picker-popover__ tbody::-webkit-scrollbar,.__bk-date-picker-popover__ article::-webkit-scrollbar{width:4px;height:4px}.__bk-date-picker-popover__ div::-webkit-scrollbar-thumb,.__bk-date-picker-popover__ ul::-webkit-scrollbar-thumb,.__bk-date-picker-popover__ section::-webkit-scrollbar-thumb,.__bk-date-picker-popover__ tbody::-webkit-scrollbar-thumb,.__bk-date-picker-popover__ article::-webkit-scrollbar-thumb{background:#ddd;border-radius:20px;box-shadow:inset 0 0 6px #cccccc4d}.__bk-date-picker-popover__ ul{padding:0;margin:0}.__bk-date-picker-popover__ ul li{list-style:none}.__bk-date-picker-popover__ .bk-select-search-wrapper .icon-search:before{content:""!important}.__bk-date-picker-popover__ .bk-pop-confirm{margin:20px 16px 16px!important}.__date-tooltips__{display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:156px;line-height:20px}.__date-tooltips__ div::-webkit-scrollbar,.__date-tooltips__ ul::-webkit-scrollbar,.__date-tooltips__ section::-webkit-scrollbar,.__date-tooltips__ tbody::-webkit-scrollbar,.__date-tooltips__ article::-webkit-scrollbar{width:4px;height:4px}.__date-tooltips__ div::-webkit-scrollbar-thumb,.__date-tooltips__ ul::-webkit-scrollbar-thumb,.__date-tooltips__ section::-webkit-scrollbar-thumb,.__date-tooltips__ tbody::-webkit-scrollbar-thumb,.__date-tooltips__ article::-webkit-scrollbar-thumb{background:#ddd;border-radius:20px;box-shadow:inset 0 0 6px #cccccc4d}.__date-tooltips__ .date-tooltips-timezone{display:flex;align-items:center;justify-content:center;width:100%;margin-top:4px;color:#ff9c01}.__date-tooltips__ .date-tooltips-diff{display:flex;align-items:center;justify-content:center;padding:0 4px;margin-top:4px;color:#fff;background:#ffffff1f;border-radius:2px}
+.bk-timezone-picker {
+  width: 100%;
+}
+.bk-timezone-picker-option {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  color: #63656e;
+}
+.bk-timezone-picker-option .option-name {
+  flex: 1;
+}
+.bk-timezone-picker-option .option-country {
+  display: flex;
+  width: 100%;
+  margin-left: 6px;
+  color: #999;
+}
+.bk-timezone-picker-option .option-utc {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  padding: 0 8px;
+  background: #f0f1f5;
+  border-radius: 2px;
+}
+.bk-timezone-picker-option.is-selected {
+  color: #3a84ff;
+}
+.bk-timezone-picker-option.is-selected .option-country {
+  color: #699df4;
+}
+.bk-timezone-picker-option.is-selected .option-utc {
+  color: white;
+  background-color: #699df4;
+}
+
+/* stylelint-disable-next-line selector-class-pattern */
+.__bk-timezone-picker-popover__ {
+  width: fit-content !important;
+}.common-panel-tab {
+  display: flex;
+  align-items: center;
+}
+.common-panel-tab .bk-tab-header {
+  /* stylelint-disable-next-line declaration-no-important */
+  line-height: 20px !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  border-bottom: 0 !important;
+}
+.common-panel-tab .bk-tab-header .bk-tab-header-item {
+  padding: 0;
+  padding-bottom: 4px;
+  margin-right: 28px;
+}
+.common-panel-tab .bk-tab-header--active {
+  font-weight: 700;
+  color: #63656e;
+}
+.common-panel-tab .bk-tab-content {
+  display: none;
+  width: 0;
+  height: 0;
+}.common-date-list[data-v-ed496942] {
+  flex: 0 0 50%;
+}
+.common-date-list[data-v-ed496942]:last-child {
+  padding-left: 12px;
+}
+.common-date-list .list-item[data-v-ed496942] {
+  display: inline-flex;
+  align-items: center;
+  min-width: calc(33.33% - 8px);
+  height: 28px;
+  padding: 0 8px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  color: #313238;
+  cursor: pointer;
+  background: #f5f7fa;
+  border-radius: 2px;
+}
+.common-date-list .list-item.is-selected[data-v-ed496942] {
+  color: #3a84ff;
+  background: #e1ecff;
+}
+.common-date-list .list-item.is-disabled[data-v-ed496942] {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  background: #f5f7fa;
+}
+.common-date-list .list-item[data-v-ed496942]:not(.is-disabled):hover {
+  color: #3a84ff;
+  background: #e1ecff;
+}
+.common-wrapper[data-v-ed496942] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 139px;
+  max-height: 139px;
+  overflow: auto;
+}
+.common-wrapper .empty-content[data-v-ed496942] {
+  height: 100px;
+  max-height: 100px;
+}
+.common-wrapper .empty-tips[data-v-ed496942] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}.common-submit {
+  flex: 0 0 64px;
+  width: 64px;
+  margin-left: 8px;
+}
+.common-favorite {
+  display: flex;
+  flex: 0 0 32px;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin-left: 8px;
+  cursor: pointer;
+  background: #f5f7fa;
+  border-radius: 2px;
+}
+.common-favorite:hover svg path {
+  fill: #3a84ff;
+}/* stylelint-disable declaration-no-important */
+.date-panel {
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  user-select: none;
+  background: #fff;
+  border: 1px solid #dcdee5;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1019607843);
+}
+.date-panel-title {
+  display: flex;
+  flex: 0 0 40px;
+  align-items: center;
+  height: 40px;
+  padding: 0 12px;
+  color: #63656e;
+  border-bottom: 1px solid #dcdee5;
+}
+.date-panel-title .title-check {
+  margin-left: auto;
+}
+.date-panel-title .title-check .bk-checkbox {
+  pointer-events: none;
+}
+.date-panel-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  padding: 8px 0 12px;
+}
+.date-panel-main .date-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 24px;
+}
+.date-panel-main .date-header-center {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 14px;
+  font-weight: 700;
+}
+.date-panel-main .date-header-center .date-split {
+  width: 5px;
+  height: 2px;
+  margin: 0 10px;
+  background-color: #63656e;
+}
+.date-panel-main .date-header-right, .date-panel-main .date-header-left {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 6px;
+  font-size: 16px;
+}
+.date-panel-main .date-header-right .hand-icon, .date-panel-main .date-header-left .hand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #979ba5;
+}
+.date-panel-main .date-header-right .hand-icon svg, .date-panel-main .date-header-left .hand-icon svg {
+  width: 20px !important;
+  height: 20px !important;
+  font-weight: bold;
+}
+.date-panel-main .date-header-right .hand-icon:hover, .date-panel-main .date-header-left .hand-icon:hover {
+  color: #3a84ff;
+  cursor: pointer;
+}
+.date-panel-main .date-header-right .hand-icon:hover svg, .date-panel-main .date-header-left .hand-icon:hover svg {
+  fill: #3a84ff;
+}
+.date-panel-main .date-header-right {
+  margin-left: auto;
+}
+.date-panel-main .date-content {
+  display: flex;
+  flex-direction: column;
+}
+.date-panel-main .date-content .date-grid {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 12px;
+  margin: 0;
+}
+.date-panel-main .date-content .date-grid-item {
+  display: flex;
+  flex: 0 0 14.285%;
+  align-items: center;
+  justify-content: center;
+  width: 14.285%;
+  min-width: 28px;
+  height: 24px;
+}
+.date-panel-main .date-content .date-grid-item:not(.not-click):hover {
+  cursor: pointer;
+  background-color: #f0f1f5;
+}
+.date-panel-main .date-content .date-grid-item.is-today {
+  color: #3a84ff;
+  border: 1px solid #a3c5fd;
+  border-radius: 2px;
+}
+.date-panel-main .date-content .date-grid-item.is-last-month {
+  color: #c4c6cc;
+  background-color: #f0f1f5;
+}
+.date-panel-main .date-content .date-grid-item.is-next-month {
+  color: #c4c6cc;
+}
+.date-panel-main .date-content .date-grid-item.is-disabled {
+  color: #c4c6cc !important;
+  cursor: not-allowed !important;
+  background-color: #f5f7fa !important;
+}
+.date-panel-main .date-content .date-grid-item.is-selected {
+  color: #fff !important;
+  background-color: #3a84ff !important;
+  border-radius: 2px;
+}/* stylelint-disable declaration-no-important */
+.date-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+.date-wrapper .date-input {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 56px;
+}
+.date-wrapper .date-input .date-picker {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 376px;
+  height: 32px;
+  background: #fff;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+}
+.date-wrapper .date-input .date-picker-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  margin-left: 8px;
+}
+.date-wrapper .date-input .date-picker-start, .date-wrapper .date-input .date-picker-end {
+  flex: 1 1 160px;
+  min-width: 160px;
+  height: 24px;
+  padding: 0 4px;
+  font-size: 12px;
+  color: #63656e;
+  border: none;
+  border-radius: 2px;
+}
+.date-wrapper .date-input .date-picker-start:focus, .date-wrapper .date-input .date-picker-end:focus {
+  outline: none;
+  background: #e1ecff;
+  border: none;
+  box-shadow: none;
+}
+.date-wrapper .date-input .date-picker-split {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  color: #979ba5;
+}
+.date-wrapper .date-input .date-picker-clear {
+  visibility: hidden !important;
+  flex: 0 0 32px;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  font-size: 14px;
+  color: #c4c6cc;
+}
+.date-wrapper .date-input .date-picker-clear:hover {
+  color: #63656e;
+  cursor: pointer;
+}
+.date-wrapper .date-input .date-picker:hover .date-picker-clear {
+  visibility: visible !important;
+}
+.date-wrapper .show-format {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 100%;
+  margin: -4px 0 8px;
+  color: #979ba5;
+}
+.date-wrapper .show-format .format-button {
+  margin-left: 0;
+}
+.date-format-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+  background: #fff;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1019607843);
+}
+.date-format-wrapper .content-title {
+  margin-bottom: 12px;
+  font-weight: bold;
+  line-height: 20px;
+}
+.date-format-wrapper .content-table {
+  display: flex;
+  flex-direction: column;
+  padding: 6px 0;
+  border-collapse: collapse;
+  background-color: #fff;
+  border-top: 0;
+  border-left: 0;
+}
+.date-format-wrapper .content-table th,
+.date-format-wrapper .content-table td {
+  height: 32px;
+  padding: 0 10px;
+  line-height: 32px;
+  color: #63656e;
+  text-align: left;
+  border-right: 0;
+  border-bottom: 0;
+}
+.date-format-wrapper .content-table thead,
+.date-format-wrapper .content-table tr {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.date-format-wrapper .content-table thead th,
+.date-format-wrapper .content-table tr th {
+  flex: 1;
+  background-color: #fafbfd;
+}
+.date-format-wrapper .content-table tbody {
+  display: block;
+  width: 100%;
+  max-height: 300px;
+  overflow: auto;
+}
+.date-format-wrapper .content-table tbody td {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+.date-format-wrapper.enable-format-click tr {
+  cursor: pointer;
+}
+.date-format-wrapper.enable-format-click tr:hover {
+  background: #f0f5ff;
+}
+.date-format-wrapper.enable-format-click tr:hover td {
+  color: #3a84ff;
+}.date-title[data-v-03d5d182] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 20px;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  color: #313238;
+}
+.date-title .date-title-item[data-v-03d5d182] {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+.date-title .date-title-item[data-v-03d5d182]:last-child {
+  padding-left: 28px;
+}
+.date-title .date-title-item .delete-all[data-v-03d5d182] {
+  margin-left: 8px;
+  font-size: 12px;
+}
+.date-title .date-title-item .delete-all[data-v-03d5d182]:hover {
+  color: #3a84ff;
+  cursor: pointer;
+}.natural-picker {
+  display: flex;
+  align-items: center;
+  min-height: 56px;
+}
+.natural-picker .natural-date {
+  width: 256px;
+}
+.natural-picker .natural-unit {
+  width: 140px;
+  margin-left: 8px;
+}
+.natural-picker.is-invalid .bk-input {
+  border-color: #ea3636;
+}
+.natural-custom-option {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 250px;
+  height: 100%;
+  padding: 0 12px;
+  margin: 0 -12px;
+}
+.natural-custom-option .bk-input {
+  background-color: white;
+}.baseline-picker {
+  display: flex;
+  align-items: center;
+  min-height: 56px;
+  margin-right: -1px;
+}
+.baseline-picker-select {
+  width: 208px;
+}
+.baseline-picker-select .bk-input {
+  margin-right: -4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.baseline-custom-option {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 12px;
+  margin: 0 -12px;
+}
+.baseline-custom-option .bk-input {
+  background-color: white;
+}
+.baseline-custom-option .specific-date {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 174px;
+  height: 26px;
+  background: #fff;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+}
+.baseline-custom-option .specific-date-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 6px;
+  margin-left: 8px;
+}
+.baseline-custom-option .specific-date-input {
+  width: 140px;
+  height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  color: #63656e;
+  border: none;
+  border-radius: 2px;
+}
+.baseline-custom-option .specific-date-input:focus {
+  outline: none;
+  background: #e1ecff;
+  border: none;
+  box-shadow: none;
+}
+.baseline-custom-option .specific-date-panel {
+  position: fixed;
+  top: 166px;
+  left: 188px;
+  z-index: 1000;
+  border-radius: 2px;
+}.recent-picker {
+  display: flex;
+  align-items: center;
+  min-height: 56px;
+}
+.recent-picker .recent-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.recent-picker .recent-input.is-focused {
+  z-index: 2;
+}
+.recent-picker .recent-unit {
+  min-width: 64px;
+}
+.recent-picker .recent-unit .bk-input {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.recent-picker .recent-unit .bk-input--text {
+  border-radius: 0;
+}
+.recent-picker.is-invalid .recent-input {
+  border-color: #ea3636;
+}
+.recent-picker.is-invalid .bk-input {
+  border-color: #ea3636;
+}.panel-wrapper {
+  width: 618px;
+  padding: 12px 16px 0;
+  background: #fff;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1019607843);
+}
+.panel-wrapper .date-list-wrapper {
+  display: flex;
+  height: 160px;
+  max-height: 160px;
+  padding: 0;
+  padding-bottom: 4px;
+  margin: 8px -10px 0 0;
+  overflow: auto;
+}
+.panel-wrapper .date-pick-tab {
+  padding-top: 12px;
+  border-top: 1px solid #eaebf0;
+}
+.panel-wrapper .date-pick-tab .bk-tab-header-item {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin-right: 20px !important;
+}
+.panel-wrapper .time-zone-panel {
+  display: flex;
+  align-items: center;
+  height: 45px;
+  padding: 0 16px;
+  margin: 0 -16px;
+  color: #313238;
+  background: #fafbfd;
+  border-top: 1px solid #dcdee5;
+}
+.panel-wrapper .time-zone-panel .time-zone {
+  display: flex;
+  align-items: center;
+  margin: 0 8px;
+}
+.panel-wrapper .time-zone-panel .time-zone-area {
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+  color: #979ba5;
+}
+.panel-wrapper .time-zone-panel .time-zone-tag {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 79px;
+  height: 20px;
+  color: #63656e;
+  border: 1px solid #dcdee5;
+  border-radius: 2px;
+}
+.panel-wrapper .time-zone-panel .time-zone-btn {
+  margin-left: auto;
+}
+.panel-wrapper .time-zone-picker {
+  margin: 8px 0;
+}.__bk_date_picker__ {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 4px;
+  font-size: 12px;
+  color: #63656e;
+  border: 1px solid #c4c6cc;
+  border-radius: 2px;
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.__bk_date_picker__ div::-webkit-scrollbar,
+.__bk_date_picker__ ul::-webkit-scrollbar,
+.__bk_date_picker__ section::-webkit-scrollbar,
+.__bk_date_picker__ tbody::-webkit-scrollbar,
+.__bk_date_picker__ article::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.__bk_date_picker__ div::-webkit-scrollbar-thumb,
+.__bk_date_picker__ ul::-webkit-scrollbar-thumb,
+.__bk_date_picker__ section::-webkit-scrollbar-thumb,
+.__bk_date_picker__ tbody::-webkit-scrollbar-thumb,
+.__bk_date_picker__ article::-webkit-scrollbar-thumb {
+  background: #ddd;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
+}
+.__bk_date_picker__ .date-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 20px;
+  font-weight: bold;
+  color: #989ca7;
+  background: #f5f7fa;
+  border-radius: 2px;
+}
+.__bk_date_picker__ .date-icon-left, .__bk_date_picker__ .date-icon-right {
+  display: inline-flex;
+}
+.__bk_date_picker__ .date-icon-left svg, .__bk_date_picker__ .date-icon-right svg {
+  /* stylelint-disable-next-line declaration-no-important */
+  width: 20px !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  height: 20px !important;
+}
+.__bk_date_picker__ .date-icon:hover {
+  cursor: pointer;
+  background-color: #f0f1f5;
+}
+.__bk_date_picker__.is-simplicity {
+  border-color: transparent;
+}
+.__bk_date_picker__.is-simplicity .date-icon {
+  background-color: transparent;
+}
+.__bk_date_picker__.is-simplicity .date-icon:hover {
+  cursor: pointer;
+  background-color: #f0f1f5;
+}
+.__bk_date_picker__.is-disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.__bk_date_picker__.is-disabled .date-icon {
+  color: #c4c6cc;
+  pointer-events: none;
+}
+.__bk_date_picker__.is-disabled .date-content {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.__bk_date_picker__ .date-content {
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding: 0 6px;
+  margin: 0 4px;
+  user-select: none;
+  border-radius: 2px;
+}
+.__bk_date_picker__ .date-content-icon {
+  margin-right: 4px;
+}
+.__bk_date_picker__ .date-content-utc {
+  display: flex;
+  align-items: center;
+  margin-left: 4px;
+  font-weight: 700;
+  color: #ff9c01;
+}
+.__bk_date_picker__ .date-content:hover {
+  cursor: pointer;
+  background: #f5f7fa;
+}
+.__bk-date-picker-popover__ {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: 0 !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  margin: 0 !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  color: #63656e !important;
+}
+.__bk-date-picker-popover__ div::-webkit-scrollbar,
+.__bk-date-picker-popover__ ul::-webkit-scrollbar,
+.__bk-date-picker-popover__ section::-webkit-scrollbar,
+.__bk-date-picker-popover__ tbody::-webkit-scrollbar,
+.__bk-date-picker-popover__ article::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.__bk-date-picker-popover__ div::-webkit-scrollbar-thumb,
+.__bk-date-picker-popover__ ul::-webkit-scrollbar-thumb,
+.__bk-date-picker-popover__ section::-webkit-scrollbar-thumb,
+.__bk-date-picker-popover__ tbody::-webkit-scrollbar-thumb,
+.__bk-date-picker-popover__ article::-webkit-scrollbar-thumb {
+  background: #ddd;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
+}
+.__bk-date-picker-popover__.__bk-date-picker-baseline-popover__ {
+  /* stylelint-disable-next-line declaration-no-important */
+  overflow: inherit !important;
+}
+.__bk-date-picker-popover__.__bk-date-picker-baseline-popover__ .time-range-select-content {
+  transform: scale(1);
+}
+.__bk-date-picker-popover__.__date-picker-popover-specific__ {
+  position: absolute;
+}
+.__bk-date-picker-popover__ ul {
+  padding: 0;
+  margin: 0;
+}
+.__bk-date-picker-popover__ ul li {
+  list-style: none;
+}
+.__bk-date-picker-popover__ .bk-select-search-wrapper .icon-search::before {
+  /* stylelint-disable-next-line declaration-no-important */
+  content: "" !important;
+}
+.__bk-date-picker-popover__ .bk-pop-confirm {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin: 20px 16px 16px !important;
+}
+.__date-tooltips__ {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: 156px;
+  line-height: 20px;
+}
+.__date-tooltips__ div::-webkit-scrollbar,
+.__date-tooltips__ ul::-webkit-scrollbar,
+.__date-tooltips__ section::-webkit-scrollbar,
+.__date-tooltips__ tbody::-webkit-scrollbar,
+.__date-tooltips__ article::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+.__date-tooltips__ div::-webkit-scrollbar-thumb,
+.__date-tooltips__ ul::-webkit-scrollbar-thumb,
+.__date-tooltips__ section::-webkit-scrollbar-thumb,
+.__date-tooltips__ tbody::-webkit-scrollbar-thumb,
+.__date-tooltips__ article::-webkit-scrollbar-thumb {
+  background: #ddd;
+  border-radius: 20px;
+  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
+}
+.__date-tooltips__ .date-tooltips-timezone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-top: 4px;
+  color: #ff9c01;
+}
+.__date-tooltips__ .date-tooltips-diff {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  margin-top: 4px;
+  color: white;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 2px;
+}