ant-design/components/date-picker/style/rtl.less

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

@picker-prefix-cls: ~'@{ant-prefix}-picker';
@picker-cell-inner-cls: ~'@{picker-prefix-cls}-cell-inner';

.@{picker-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-suffix {
    .@{picker-prefix-cls}-rtl & {
      margin-right: @padding-xs / 2;
      margin-left: 0;
    }
  }

  &-clear {
    .@{picker-prefix-cls}-rtl & {
      right: auto;
      left: 0;
    }
  }

  &-separator {
    .@{picker-prefix-cls}-rtl & {
      transform: rotate(180deg);
    }
  }

  &-header {
    &-view {
      button {
        &:not(:first-child) {
          .@{picker-prefix-cls}-panel-rtl & {
            margin-right: @padding-xs;
            margin-left: 0;
          }
        }
      }
    }
  }

  // ======================== Range =========================
  &-range {
    // Clear
    .@{picker-prefix-cls}-clear {
      .@{picker-prefix-cls}-rtl& {
        right: auto;
        left: @input-padding-horizontal-base;
      }
    }

    // Active bar
    .@{picker-prefix-cls}-active-bar {
      .@{picker-prefix-cls}-rtl& {
        margin-right: @input-padding-horizontal-base;
        margin-left: 0;
      }
    }
  }

  // ======================== Ranges ========================
  &-ranges {
    .@{picker-prefix-cls}-dropdown-rtl & {
      text-align: right;
    }

    .@{picker-prefix-cls}-ok {
      .@{picker-prefix-cls}-dropdown-rtl & {
        float: left;
        margin-right: @padding-xs;
        margin-left: 0;
      }
    }
  }

  // ======================== Panel ========================
  &-panel {
    &-rtl {
      direction: rtl;
    }
  }

  &-prev-icon,
  &-super-prev-icon {
    .@{picker-prefix-cls}-panel-rtl & {
      transform: rotate(135deg);
    }
  }

  &-next-icon,
  &-super-next-icon {
    .@{picker-prefix-cls}-panel-rtl & {
      transform: rotate(-45deg);
    }
  }

  &-cell {
    .picker-cell-inner(~'@{picker-cell-inner-cls}');
  }

  // ======================== Body ==========================
  .picker-cell-inner(@cellClassName) {
    .@{cellClassName} {
      position: relative;
      z-index: 2;
      display: inline-block;
      min-width: @picker-panel-cell-height;
      height: @picker-panel-cell-height;
      line-height: @picker-panel-cell-height;
      border-radius: @border-radius-base;
      transition: background @animation-duration-slow, border @animation-duration-slow;
    }

    &-in-view&-range-start::before {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 50%;
        left: 0;
      }
    }

    &-in-view&-range-end::before {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 0;
        left: 50%;
      }
    }

    &-in-view&-range-start&-range-end::before {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 50%;
        left: 50%;
      }
    }

    .@{picker-prefix-cls}-date-panel
      &-in-view&-in-range&-range-hover-start
      .@{cellClassName}::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 0;
        left: -6px - @border-width-base;
      }
    }

    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: -6px - @border-width-base;
        left: 0;
      }
    }

    // Hover with range start & end
    &-range-hover&-range-start::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 0;
        left: 50%;
      }
    }

    &-range-hover&-range-end::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 50%;
        left: 0;
      }
    }

    // range start border-radius
    &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
      .@{picker-prefix-cls}-panel-rtl & {
        border-radius: 0 @border-radius-base @border-radius-base 0;
      }
    }

    // range end border-radius
    &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
      .@{picker-prefix-cls}-panel-rtl & {
        border-radius: @border-radius-base 0 0 @border-radius-base;
      }
    }

    // Edge start
    tr > &-in-view&-range-hover:first-child::after,
    tr > &-in-view&-range-hover-end:first-child::after,
    &-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after,
    &-in-view&-range-hover-start::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 6px;
        left: 0;
        border-right: @border-width-base dashed @picker-date-hover-range-border-color;
        border-left: none;
        border-top-left-radius: 0;
        border-top-right-radius: @border-radius-base;
        border-bottom-right-radius: @border-radius-base;
        border-bottom-left-radius: 0;
      }
    }

    // Edge end
    tr > &-in-view&-range-hover:last-child::after,
    tr > &-in-view&-range-hover-start:last-child::after,
    &-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after,
    &-in-view&-range-hover-end::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 0;
        left: 6px;
        border-right: none;
        border-left: @border-width-base dashed @picker-date-hover-range-border-color;
        border-top-left-radius: @border-radius-base;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: @border-radius-base;
      }
    }

    tr > &-in-view&-range-hover-start:last-child::after,
    &-in-view&-range-hover-start&-in-view&-range-hover-end::after {
      .@{picker-prefix-cls}-panel-rtl & {
        right: 6px;
        border-right: @border-width-base dashed @picker-date-hover-range-border-color;
        border-top-right-radius: @border-radius-base;
        border-bottom-right-radius: @border-radius-base;
      }
    }

    tr > &-in-view&-range-hover-end:first-child::after {
      .@{picker-prefix-cls}-panel-rtl & {
        left: 6px;
        border-left: @border-width-base dashed @picker-date-hover-range-border-color;
        border-top-left-radius: @border-radius-base;
        border-bottom-left-radius: @border-radius-base;
      }
    }
  }

  // ======================== Footer ========================
  &-footer {
    &-extra {
      .@{picker-prefix-cls}-dropdown-rtl & {
        direction: rtl;
        text-align: right;
      }
    }
  }

  // ====================== Time Panel ======================
  &-time-panel {
    .@{picker-prefix-cls}-panel-rtl & {
      direction: ltr;
    }
  }
}