naive-ui/styles/DatePicker.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include themes-mixin {
  @include once {
    @include b(date-picker) {
      position: relative;
      // width: 200px;
      @include m(range) {
        // width: 382px;
      }
      @include m (error) {
        @include b(input) {
          @include e(input) {
            color: red;
          }
        }
      }
    }  
  }
  
  @include b(date-picker-panel) {
    @include once {
      outline: none;
      @include fade-in-scale-up-transition(date-picker-panel);
      margin-top: 4px;
      margin-bottom: 4px;
      width: 350px;
      border-radius: 6px;
      @include b(time-picker) {
        z-index: 1;
      }
      @include b(date-picker-panel-calendar) {
        width: 350px;
        @include b(date-picker-panel-month-modifier) {
          margin-top: 12px;
        }
      }
    }
    background: $--date-picker-background-color;
    box-shadow: $--date-picker-box-shadow;
    color: $--date-picker-text-color;
    @include m(datetimerange, daterange) {
      @include once {
        width: 701px;
        display: flex;
        flex-wrap: wrap;
        @include m(daterange) {
          @include e(vertical-divider) {
            height: 100%;
            margin-top: 0;
          }
        }
      }
      @include b(date-picker-panel-input-wrapper) {
        @include once {
          flex: 1;
          align-items: center;
        }
        @include e(arrow) {
          @include once {
            width: 20px;
            height: 20px;
            position: relative;
          }
          @include b(base-icon) {
            @include once {
              position: absolute;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
            }
            path {
              fill: $--date-picker-icon-color;
            }
          }
        }
      }
      @include e(vertical-divider) {
        @include once {
          width: 1px;
          height: calc(100% - 62px);
          margin-top: 62px;
        }
        background: $--date-picker-divider-color;
      }
    }
    @include b(date-picker-panel-input-wrapper) {
      @include once {
        padding: 14px 24px;
        display: flex;
        justify-content: space-between;
        @include b(input) {
          width: 145px;
        }
        @include b(time-picker) {
          width: 145px;
        }
        @include b(input) {
          @include m(error) {
            color: red;
            @include e(input) {
              color: red;
            }
          }
        }
      }
      border-bottom: 1px solid $--date-picker-divider-color;
    }
    @include b(date-picker-panel-month-modifier) {
      @include once {
        display: flex;
        height: 41px;
        align-items: center;
        padding-left: 24px;
        padding-right: 24px;
        @include e(prev, next, fast-prev, fast-next) {
          cursor: pointer;
          width: 14px;
          height: 14px;
        }
        @include e(fast-prev, next) {
          margin-right: 10px;
        }
      }
      @include e(prev, next, fast-prev, fast-next) {
        path {
          fill: $--date-picker-icon-color;
        }
      }
      @include e(month-year) {
        @include once {
          font-size: 14px;
          font-weight: 500;
          line-height: 17px;
          flex-grow: 1;
          text-align: center;
        }
        color: $--date-picker-month-text-color;
      }
    }
    @include b(date-picker-panel-weekdays) {
      @include once {
        padding: 8px 24px 14px 24px;
        display: flex;
        justify-content: space-between;
      }
      @include e(day) {
        @include once {
          line-height: 15px;
          width: 30px;
          text-align: center;
          font-size: 12px;
        }
        color: $--date-picker-text-color;
      }
    }
    @include b(date-picker-panel-dates) {
      @include once {
        padding: 8px 14px 8px 14px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        @include e(date-input) {
          color: red;
          @include m(error) {
            color: red;
          }
        }
      }
      @include e(date) {
        @include once {
          position: relative;
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          font-size: 12px;
          margin: 8px 11px;
          border-radius: 3px;
          z-index: 0;
          cursor: pointer;
          transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .2s $--n-ease-in-out-cubic-bezier;
          @include m(no-transition) {
            transition: none!important;
          }
        }
        
        &:hover {
          background-color: map-get($--date-picker-item-background-color, 'hover');
        }
        @include not-m(in-display-month) {
          color: map-get($--date-picker-item-text-color, 'inactive');
        }
        @include m(current) {
          color: map-get($--date-picker-item-text-color, 'current');
          &::after {
            @include once {
              position: absolute;
              top: 3px;
              right: 2px;
              content: "";
              height: 4px;
              width: 4px;
              border-radius: 2px;
              transition: background-color .2s $--n-ease-in-out-cubic-bezier;
            }
            background-color: map-get($--date-picker-item-background-color, 'active');
          }
        }
        @include m(in-display-month) {
          @include m(in-span) {
            @include not-m(selected) {
              &::before {
                @include once {
                  content: "";
                  z-index: -1;
                  position: absolute;
                  left: -11px;
                  right: -11px;
                  top: 0;
                  bottom: 0;
                }
                background: map-get($--date-picker-item-background-color, 'hover');
              }
            }
          }
        }
        @include m(selected) {
          @include once {
            border-radius: 3px;
            width: 24px;
            margin: 8px 11px;
          }
          color: map-get($--date-picker-item-text-color, 'active');
          background-color: map-get($--date-picker-item-background-color, 'active');
          &::after {
            background-color: map-get($--date-picker-item-sup-color, 'active');
          }
        }
        @include m(disabled) {
          cursor: not-allowed;
          opacity: 0.45;
        }
      }
    }
    @include e(divider) {
      @include once {
        margin: 0 24px;
        height: 1px;
        background-color: $--date-picker-divider-color;
      }
    }
    @include b(date-picker-panel-actions) {
      @include once {
        flex: 1;
        height: 47px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        @include b(button) {
          margin-bottom: 0;
          margin-right: 12px;
        }
        @include e(confirm) {
          @include m(disabled) {
            cursor: not-allowed;
            opacity: 0.5;
          }
        }
      }
      border-top: 1px solid $--date-picker-divider-color;
    }
  }
}