wetrade-design/lib/calendar/style/index-pure.less

一款多语言支持Vue3的UI框架

@import '../../style/themes/index';
@import '../../style/mixins/index';

@calendar-prefix-cls: ~'@{wd-prefix}-picker-calendar';
@calendar-picker-prefix-cls: ~'@{wd-prefix}-picker';

.@{calendar-prefix-cls} {
  .reset-component();
  background: @calendar-full-bg;

  .@{calendar-picker-prefix-cls}-cell-hidden {
    visibility: hidden;
  }

  // ========================= Header =========================
  &-header {
    display: flex;
    justify-content: space-between;
    padding: @padding-sm 0;

    &-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .@{calendar-prefix-cls}-date-picker {
      width: @calendar-header-date-picker-width;
    }

    .@{calendar-prefix-cls}-mode-switch {
      margin-right: @calendar-header-mode-switch-margin-right;
      height: @calendar-header-mode-switch-height;
    }
  }

  .@{calendar-picker-prefix-cls}-wrapper {
    .@{calendar-picker-prefix-cls}-month-panel,
    .@{calendar-picker-prefix-cls}-date-panel {
      height: @calendar-full-content-height;
      tbody {
        tr td:nth-child(1) {
          padding-left: @calendar-date-panel-padding-none;
        }
      }
    }

    .@{calendar-picker-prefix-cls}-body,
    .@{calendar-picker-prefix-cls}-content {
      height: @calendar-full-content-height;
    }

    .@{calendar-picker-prefix-cls}-date-panel {
      thead {
        th {
          padding: @calendar-date-panel-thead-th-padding;

          .@{calendar-picker-prefix-cls}-cell-header {
            background-color: @fill-fill;
            // position: relative;
            padding: 0;
            text-align: center;
            border-radius: @calendar-date-panel-border-radius;
            line-height: @calendar-thead-line-height !important;
            font-size: @font-size-sm !important;
            border-top: 0;
          }
        }

        tr th:nth-child(1) {
          padding-left: @calendar-date-panel-padding-none;
        }

        tr th:nth-child(7) {
          padding-right: @calendar-date-panel-padding-none !important;
        }
      }

      tbody {
        tr td:nth-child(5) {
          padding-right: @calendar-date-panel-padding-none;
        }
      }
    }

    .@{calendar-picker-prefix-cls}-panel {
      background: @calendar-full-panel-bg;
      border: 0;
      border-top: @border-width-base @border-style-base @border-color-split;
      border-radius: 0;

      .@{calendar-picker-prefix-cls}-month-panel,
      .@{calendar-picker-prefix-cls}-date-panel {
        width: auto;
      }

      .@{calendar-picker-prefix-cls}-body {
        padding: 0;
      }

      .@{calendar-picker-prefix-cls}-content {
        width: 100%;
      }
    }

    .@{calendar-picker-prefix-cls}-month-panel {
      .@{calendar-picker-prefix-cls}-body {
        height: 100% !important;

        tbody {
          display: table-row-group;
          tr:nth-child(1) {
            td {
              padding-top: 0;
            }
          }

          .@{calendar-picker-prefix-cls}-cell {
            &-inner {
              // border-radius: @calendar-date-panel-border-radius !important;
              // background-color: @filled-color-gray-1;

              .@{calendar-picker-prefix-cls}-calendar-date-content {
                padding: @calendar-date-content-padding;
                line-height: @calendar-date-content-line-height;
              }
            }
          }

          tr {
            display: table-row;

            td {
              display: table-cell;
            }
          }
        }
      }
    }
  }

  .@{calendar-picker-prefix-cls}-month-panel {
    .@{calendar-picker-prefix-cls}-header-view {
      button {
        cursor: inherit;
      }
    }
  }

  // ========================== Full ==========================
  &-full {
    .@{calendar-picker-prefix-cls}-wrapper {
      .@{calendar-picker-prefix-cls}-panel {
        display: block;
        width: 100%;
        text-align: right;
        background: @calendar-full-bg;
        border: 0;

        .@{calendar-picker-prefix-cls}-cell-disabled {
          pointer-events: initial;
        }

        .@{calendar-picker-prefix-cls}-body {
          // th {
          //   padding: 0;
          // }

          th {
            height: auto;
            // padding: @calendar-picker-body-th-padding;
            line-height: @calendar-picker-body-th-line-height;
          }
          tr:last-child {
            td {
              padding-bottom: @calendar-date-panel-padding-none;
            }
          }
        }

        // Cell
        .@{calendar-picker-prefix-cls}-cell {
          padding: @calendar-date-panel-padding;
          &::before {
            display: none;
          }

          // &:hover {
          //   .@{calendar-prefix-cls}-date {
          //     background: @item-hover-bg;
          //   }
          // }

          .@{calendar-prefix-cls}-date-today::before {
            display: none;
          }

          // &-selected,
          // &-selected:hover {
          //   .@{calendar-prefix-cls}-date,
          //   .@{calendar-prefix-cls}-date-today {
          //     background: @calendar-item-active-bg;

          //     .@{calendar-prefix-cls}-date-value {
          //       color: @brand-primary;
          //     }
          //   }
          // }
        }

        // Cell date
        .@{calendar-prefix-cls}-date {
          display: block;
          width: @calendar-full-date-width;
          height: @calendar-full-content-height;
          padding: @calendar-date-padding;
          border: 0;
          border-radius: @calendar-date-panel-border-radius;
          transition: background 0.3s;
          user-select: none;

          &-value {
            transition: color 0.3s;
            text-align: left;
            line-height: @calendar-date-value-line-height;
            color: @text-secondary;
            font-weight: 500;
            font-size: @font-size-base;
            text-align: center;
            width: @calendar-date-value-width;
          }

          &-content {
            position: static;
            width: auto;
            overflow-y: auto;
            line-height: @line-height-base;
            text-align: left;
            font-weight: 500;
            font-size: @font-size-base;
          }

          &-today {
            background-color: @fill-fill-deep;

            .@{calendar-prefix-cls}-date-value {
              width: @calendar-date-value-width;
              color: @text-white;
              background-color: @brand-hover;
              border-radius: @calendar-date-today-border-radius;
            }
          }
        }

        .@{calendar-picker-prefix-cls}-month-panel {
          .@{calendar-prefix-cls}-date {
            width: 100%;
          }
        }

        .@{calendar-picker-prefix-cls}-cell-today {
          .@{calendar-prefix-cls}-date {
            &::before {
              border: 0;
            }
          }
        }

        // 红涨绿跌  ru red up
        .@{calendar-prefix-cls}-ru-up,
        .@{calendar-prefix-cls}-gu-down {
          color: @calendar-date-content-error-color;
          background-color: @calendar-date-content-error-background-color;
          &:hover {
            background-color: @calendar-date-content-error-background-color-hover;
            box-shadow: @calendar-date-content-shadow-hover;
          }
        }

        .@{calendar-prefix-cls}-ru-down,
        .@{calendar-prefix-cls}-gu-up {
          color: @calendar-date-content-success-color;
          background-color: @calendar-date-content-success-background-color;
          &:hover {
            background-color: @calendar-date-content-success-background-color-hover;
            box-shadow: @calendar-date-content-shadow-hover;
          }
        }

        .@{calendar-prefix-cls}-zero,
        .@{calendar-prefix-cls}-future {
          background-color: @calendar-date-content-background-color;
          color: @calendar-date-content-future-color;
          &:hover {
            background-color: @calendar-date-content-background-color-hover;
            box-shadow: @calendar-date-content-shadow-hover;
          }
        }

        .@{calendar-prefix-cls}-close-market {
          background-color: @calendar-date-content-background-color;
          color: @calendar-close-market-color;
          &:hover {
            background-color: @calendar-date-content-background-color-hover;
            box-shadow: @calendar-date-content-shadow-hover;
          }
        }

        .@{calendar-prefix-cls}-amount {
          .@{calendar-prefix-cls}-date-content {
            text-align: center;
            padding-top: @calendar-date-content-padding-top;
          }
        }
      }
    }
  }

  &-btn-current-time {
    text-align: center;
    cursor: pointer;
  }
}

.@{calendar-picker-prefix-cls}-hidden-weekend {
  thead,
  tbody {
    tr {
      th,
      td {
        &:nth-child(6),
        &:nth-child(7) {
          display: none !important;
        }

        &:nth-child(5) {
          padding-right: @calendar-date-panel-padding-none;
        }
      }
    }
  }

  .@{calendar-picker-prefix-cls}-month-panel {
    tbody {
      tr {
        td:nth-child(3) {
          padding-right: @calendar-date-panel-padding-none !important;
        }
      }
    }
  }

  thead tr th:nth-child(5) {
    padding-right: @calendar-date-panel-padding-none !important;
  }
}

// ========================== Mini ==========================
.@{calendar-prefix-cls}-mini {
  border-radius: @calendar-date-panel-border-radius;

  .@{calendar-picker-prefix-cls}-wrapper {
    .@{calendar-picker-prefix-cls}-month-panel {
      .@{calendar-picker-prefix-cls}-body tbody tr td {
        height: @calendar-mini-tbody-td-height !important;
      }

      .@{calendar-picker-prefix-cls}-body tbody tr td .@{calendar-picker-prefix-cls}-cell-inner {
        width: 100%;
      }

      .@{calendar-picker-prefix-cls}-body
        tbody
        .@{calendar-picker-prefix-cls}-cell-inner
        .@{calendar-picker-prefix-cls}-calendar-date-content {
        height: auto !important;
        line-height: @calendar-mini-date-content-line-height;
      }
    }

    .@{calendar-picker-prefix-cls}-panel {
      border-radius: 0 0 @calendar-date-panel-border-radius @calendar-date-panel-border-radius;
    }
  }

  .@{calendar-picker-prefix-cls}-calendar-header {
    padding-right: @padding-xs;
    padding-left: @padding-xs;
  }

  .@{calendar-picker-prefix-cls}-content {
    height: @calendar-mini-th-height;

    th {
      height: auto;
      padding: 0;
      line-height: @calendar-mini-content-th-height;
    }
  }
}

@media only screen and (max-width: @screen-xs) {
  .@{calendar-prefix-cls} {
    &-header {
      display: block;

      .@{calendar-prefix-cls}-year-select {
        width: 50%;
      }

      .@{calendar-prefix-cls}-month-select {
        width: ~'calc(50% - @{padding-xs})';
      }

      .@{calendar-prefix-cls}-mode-switch {
        width: 100%;
        margin-top: @padding-xs;
        margin-left: 0;

        > label {
          width: 50%;
          text-align: center;
        }
      }
    }
  }
}

@import './rtl';