tntd 2.7.29-beta.1 → 2.7.30

package/es/date-picker/style/Picker.less

@@ -0,0 +1,113 @@
+@import '../../button/style/mixin';
+
+.@{calendar-prefix-cls}-picker-container {
+  .reset-component;
+
+  position: absolute;
+  z-index: @zindex-picker;
+  font-family: @font-family;
+
+  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
+    animation-name: antSlideDownIn;
+  }
+
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
+  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
+  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
+    animation-name: antSlideUpIn;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
+    animation-name: antSlideDownOut;
+  }
+
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
+  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
+    animation-name: antSlideUpOut;
+  }
+}
+
+.@{calendar-prefix-cls}-picker {
+  .reset-component;
+
+  position: relative;
+  display: inline-block;
+  outline: none;
+  cursor: text;
+  transition: opacity 0.3s;
+
+  &-input {
+    outline: none;
+
+    &.@{ant-prefix}-input {
+      line-height: @line-height-base;
+    }
+  }
+
+  &-input.@{ant-prefix}-input-sm {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &:hover &-input:not(.@{ant-prefix}-input-disabled) {
+    border-color: @input-hover-border-color;
+  }
+
+  &:focus &-input:not(.@{ant-prefix}-input-disabled) {
+    .active();
+  }
+
+  &-clear,
+  &-icon {
+    position: absolute;
+    top: 50%;
+    right: @control-padding-horizontal;
+    z-index: 1;
+    width: 14px;
+    height: 14px;
+    margin-top: -7px;
+    font-size: @font-size-sm;
+    line-height: 14px;
+    transition: all 0.3s;
+    user-select: none;
+  }
+
+  &-clear {
+    z-index: 2;
+    color: @disabled-color;
+    font-size: @font-size-base;
+    background: @input-bg;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    &:hover {
+      color: @text-color-secondary;
+    }
+  }
+
+  &:hover &-clear {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  &-icon {
+    display: inline-block;
+    color: @disabled-color;
+    font-size: @font-size-base;
+    line-height: 1;
+  }
+
+  .@{ant-prefix}-input-disabled + &-icon {
+    cursor: not-allowed;
+  }
+
+  &-small &-clear,
+  &-small &-icon {
+    right: @control-padding-horizontal-sm;
+  }
+}

package/es/date-picker/style/RangePicker.less

@@ -0,0 +1,248 @@
+@input-box-height: 34px;
+
+.@{calendar-prefix-cls}-range-picker-input {
+  width: 44%;
+  height: 99%;
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  .placeholder();
+
+  &[disabled] {
+    cursor: not-allowed;
+  }
+}
+
+.@{calendar-prefix-cls}-range-picker-separator {
+  display: inline-block;
+  min-width: 10px;
+  height: 100%;
+  color: @text-color-secondary;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: top;
+  pointer-events: none;
+}
+
+.@{calendar-prefix-cls}-range {
+  width: 552px;
+  overflow: hidden;
+
+  .@{calendar-prefix-cls}-date-panel {
+    &::after {
+      display: block;
+      clear: both;
+      height: 0;
+      visibility: hidden;
+      content: '.';
+    }
+  }
+  &-part {
+    position: relative;
+    width: 50%;
+  }
+
+  &-left {
+    float: left;
+    .@{calendar-prefix-cls} {
+      &-time-picker-inner {
+        border-right: 1px solid @border-color-split;
+      }
+    }
+  }
+
+  &-right {
+    float: right;
+    .@{calendar-prefix-cls} {
+      &-time-picker-inner {
+        border-left: 1px solid @border-color-split;
+      }
+    }
+  }
+
+  &-middle {
+    position: absolute;
+    left: 50%;
+    z-index: 1;
+    height: @input-box-height;
+    margin: 1px 0 0 0;
+    padding: 0 200px 0 0;
+    color: @text-color-secondary;
+    line-height: @input-box-height;
+    text-align: center;
+    transform: translateX(-50%);
+    pointer-events: none;
+  }
+
+  &-right .@{calendar-prefix-cls}-date-input-wrap {
+    margin-left: -90px;
+  }
+
+  &.@{calendar-prefix-cls}-time &-middle {
+    padding: 0 10px 0 0;
+    transform: translateX(-50%);
+  }
+
+  .@{calendar-prefix-cls}-today
+    :not(.@{calendar-prefix-cls}-disabled-cell)
+    :not(.@{calendar-prefix-cls}-last-month-cell)
+    :not(.@{calendar-prefix-cls}-next-month-btn-day) {
+    .@{calendar-prefix-cls}-date {
+      color: @primary-color;
+      background: @primary-2;
+      border-color: @primary-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-selected-start-date,
+  .@{calendar-prefix-cls}-selected-end-date {
+    .calendar-selected-cell;
+  }
+
+  &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
+    margin-left: 0;
+  }
+
+  .@{calendar-prefix-cls}-input-wrap {
+    position: relative;
+    height: @input-box-height;
+  }
+
+  .@{calendar-prefix-cls}-input,
+  .@{calendar-timepicker-prefix-cls}-input {
+    .input;
+    height: @input-height-sm;
+    padding-right: 0;
+    padding-left: 0;
+    line-height: @input-height-sm;
+    border: 0;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .@{calendar-timepicker-prefix-cls}-icon {
+    display: none;
+  }
+
+  &.@{calendar-prefix-cls}-week-number {
+    width: 574px;
+
+    .@{calendar-prefix-cls}-range-part {
+      width: 286px;
+    }
+  }
+
+  .@{calendar-prefix-cls}-year-panel,
+  .@{calendar-prefix-cls}-month-panel,
+  .@{calendar-prefix-cls}-decade-panel {
+    top: @input-box-height;
+  }
+  .@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
+    top: 0;
+  }
+  .@{calendar-prefix-cls}-decade-panel-table,
+  .@{calendar-prefix-cls}-year-panel-table,
+  .@{calendar-prefix-cls}-month-panel-table {
+    height: 208px;
+  }
+
+  .@{calendar-prefix-cls}-in-range-cell {
+    position: relative;
+    border-radius: 0;
+    > div {
+      position: relative;
+      z-index: 1;
+    }
+    &::before {
+      position: absolute;
+      top: 4px;
+      right: 0;
+      bottom: 4px;
+      left: 0;
+      display: block;
+      background: @item-active-bg;
+      border: 0;
+      border-radius: 0;
+      content: '';
+    }
+  }
+
+  .@{calendar-prefix-cls}-footer-extra {
+    float: left;
+  }
+
+  // `div` for selector specificity
+  div&-quick-selector {
+    text-align: left;
+
+    > a {
+      margin-right: 8px;
+    }
+  }
+
+  .@{calendar-prefix-cls},
+  .@{calendar-prefix-cls}-month-panel,
+  .@{calendar-prefix-cls}-year-panel,
+  .@{calendar-prefix-cls}-decade-panel {
+    &-header {
+      border-bottom: 0;
+    }
+    &-body {
+      border-top: @border-width-base @border-style-base @border-color-split;
+    }
+  }
+
+  &.@{calendar-prefix-cls}-time {
+    .@{calendar-timepicker-prefix-cls} {
+      top: 68px;
+      z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
+      width: 100%;
+      height: 207px;
+      &-panel {
+        height: 267px;
+        margin-top: -34px;
+      }
+
+      &-inner {
+        height: 100%;
+        padding-top: 40px;
+        background: none;
+      }
+
+      &-combobox {
+        display: inline-block;
+        height: 100%;
+        background-color: @component-background;
+        border-top: @border-width-base @border-style-base @border-color-split;
+      }
+      &-select {
+        height: 100%;
+        ul {
+          max-height: 100%;
+        }
+      }
+    }
+    .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
+      margin-right: 8px;
+    }
+    .@{calendar-prefix-cls}-today-btn {
+      height: 22px;
+      margin: 8px 12px;
+      line-height: 22px;
+    }
+  }
+
+  &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
+    height: 233px;
+  }
+}
+
+.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
+  .@{calendar-prefix-cls}-body {
+    border-top-color: transparent;
+  }
+}

package/es/date-picker/style/TimePicker.less

@@ -0,0 +1,151 @@
+.@{calendar-timepicker-prefix-cls} {
+  position: absolute;
+  top: 40px;
+  width: 100%;
+  background-color: @component-background;
+
+  &-panel {
+    position: absolute;
+    z-index: @zindex-picker;
+    width: 100%;
+  }
+
+  &-inner {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    font-size: @font-size-base;
+    line-height: 1.5;
+    text-align: left;
+    list-style: none;
+    background-color: @component-background;
+    background-clip: padding-box;
+    outline: none;
+  }
+  &-combobox {
+    width: 100%;
+  }
+
+  &-column-1,
+  &-column-1 &-select {
+    width: 100%;
+  }
+  &-column-2 &-select {
+    width: 50%;
+  }
+  &-column-3 &-select {
+    width: 33.33%;
+  }
+  &-column-4 &-select {
+    width: 25%;
+  }
+
+  &-input-wrap {
+    display: none;
+  }
+
+  &-select {
+    position: relative; // Fix chrome weird render bug
+    float: left;
+    height: 226px;
+    overflow: hidden;
+    font-size: @font-size-base;
+    border-right: @border-width-base @border-style-base @border-color-split;
+
+    &:hover {
+      overflow-y: auto;
+    }
+
+    &:first-child {
+      margin-left: 0;
+      border-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+
+    ul {
+      width: 100%;
+      max-height: 206px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    li {
+      width: 100%;
+      height: 24px;
+      margin: 0;
+      line-height: 24px;
+      text-align: center;
+      list-style: none;
+      cursor: pointer;
+      transition: all .3s;
+      user-select: none;
+
+      &:last-child::after {
+        display: block;
+        height: 202px;
+        content: '';
+      }
+
+      &:hover {
+        background: @item-hover-bg;
+      }
+
+      &:focus {
+        color: @primary-color;
+        font-weight: 600;
+        outline: none;
+      }
+    }
+
+    li&-option-selected {
+      font-weight: 600;
+      background: @time-picker-selected-bg;
+    }
+
+    li&-option-disabled {
+      color: @btn-disable-color;
+      &:hover {
+        background: transparent;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.@{calendar-prefix-cls}-time {
+  .@{calendar-prefix-cls}-day-select {
+    display: inline-block;
+    padding: 0 2px;
+    color: @heading-color;
+    font-weight: 500;
+    line-height: 34px;
+  }
+
+  .@{calendar-prefix-cls}-footer {
+    position: relative;
+    height: auto;
+
+    &-btn {
+      text-align: right;
+    }
+
+    .@{calendar-prefix-cls}-today-btn {
+      float: left;
+      margin: 0;
+    }
+
+    .@{calendar-prefix-cls}-time-picker-btn {
+      display: inline-block;
+      margin-right: 8px;
+
+      &-disabled {
+        color: @disabled-color;
+      }
+    }
+  }
+}

package/es/date-picker/style/WeekPicker.less

@@ -0,0 +1,21 @@
+.@{calendar-prefix-cls}-week-number {
+  &-cell {
+    opacity: 0.5;
+  }
+  .@{calendar-prefix-cls}-body tr {
+    cursor: pointer;
+    transition: all 0.3s;
+    &:hover {
+      background: @primary-1;
+    }
+    &.@{calendar-prefix-cls}-active-week {
+      font-weight: bold;
+      background: @primary-2;
+    }
+    .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
+    .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
+      color: @text-color;
+      background: transparent;
+    }
+  }
+}

package/es/date-picker/style/YearPanel.less

@@ -0,0 +1,85 @@
+.@{calendar-prefix-cls}-year-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-picker-panel;
+  background: @component-background;
+  border-radius: @border-radius-base;
+  outline: none;
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    // TODO: this is a useless wrapper, and we need to remove it in rc-calendar
+    height: 100%;
+  }
+}
+
+.@{calendar-prefix-cls}-year-panel-hidden {
+  display: none;
+}
+
+.@{calendar-prefix-cls}-year-panel-header {
+  .calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel');
+  position: relative;
+}
+
+.@{calendar-prefix-cls}-year-panel-body {
+  flex: 1;
+}
+
+.@{calendar-prefix-cls}-year-panel-footer {
+  border-top: @border-width-base @border-style-base @border-color-split;
+  .@{calendar-prefix-cls}-footer-extra {
+    padding: 0 12px;
+  }
+}
+
+.@{calendar-prefix-cls}-year-panel-table {
+  width: 100%;
+  height: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+}
+
+.@{calendar-prefix-cls}-year-panel-cell {
+  text-align: center;
+}
+
+.@{calendar-prefix-cls}-year-panel-year {
+  display: inline-block;
+  height: 24px;
+  margin: 0 auto;
+  padding: 0 8px;
+  color: @text-color;
+  line-height: 24px;
+  text-align: center;
+  background: transparent;
+  border-radius: @border-radius-sm;
+  transition: background 0.3s ease;
+
+  &:hover {
+    background: @item-hover-bg;
+    cursor: pointer;
+  }
+}
+
+.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
+  color: @text-color-inverse;
+  background: @primary-color;
+
+  &:hover {
+    color: @text-color-inverse;
+    background: @primary-color;
+  }
+}
+
+.@{calendar-prefix-cls}-year-panel-last-decade-cell,
+.@{calendar-prefix-cls}-year-panel-next-decade-cell {
+  .@{calendar-prefix-cls}-year-panel-year {
+    color: @disabled-color;
+    user-select: none;
+  }
+}

package/es/date-picker/style/index.js

@@ -0,0 +1,7 @@
+import '../../style/index.less';
+import './index.less';
+// style dependencies
+// deps-lint-skip: input
+import '../../input/style';
+import '../../time-picker/style';
+import '../../tag/style';

package/es/date-picker/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/date-picker/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAA;AAC/B,OAAO,cAAc,CAAA;AAErB,qBAAqB;AACrB,wBAAwB;AACxB,OAAO,mBAAmB,CAAA;AAC1B,OAAO,yBAAyB,CAAA;AAChC,OAAO,iBAAiB,CAAA","sourcesContent":["import '../../style/index.less'\nimport './index.less'\n\n// style dependencies\n// deps-lint-skip: input\nimport '../../input/style'\nimport '../../time-picker/style'\nimport '../../tag/style'\n"]}

package/es/date-picker/style/index.less

@@ -0,0 +1,17 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+@import '../../button/style/mixin';
+
+@calendar-prefix-cls: ~'@{ant-prefix}-calendar';
+@calendar-timepicker-prefix-cls: ~'@{ant-prefix}-calendar-time-picker';
+
+@import 'Picker';
+@import 'Calendar';
+@import 'RangePicker';
+@import 'TimePicker';
+@import 'MonthPanel';
+@import 'YearPanel';
+@import 'DecadePanel';
+@import 'MonthPicker';
+@import 'WeekPicker';