naive-ui/styles/TimePicker.scss

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

@include themes-mixin {
  @include once {
    @include b(time-picker) {
      position: relative;
      display: inline-block;
      width: 180px;
    }
    @include b(time-picker-input) {
      @include m(error) {
        color: red;
        input {
          color: red!important;
        }
        // @include b(input) {
        //   @include e(input) {
        //     color: red
        //   }
        // }
      }
    }
  }
  @include b(time-picker-selector) {
    @include once {
      outline: none;
      font-size: 12px;
      border-radius: 6px;
      margin: 4px 0;
      width: 180px;
      overflow: hidden;
      @include fade-in-scale-up-transition(time-picker);
      @include b(time-picker-selector-actions) {
        padding: 10px 15px;
        display: flex;
        justify-content: space-around;
        @include e(confirm) {
          @include m(disabled) {
            cursor: not-allowed;
            opacity: 0.5;
          }
        }
      }
    }
    background-color: $--time-picker-background-color;
    box-shadow: $--time-picker-box-shadow;// 0px 2px 20px 0px rgba(0,0,0,0.16);
    @include b(time-picker-selector-time) {
      @include once {
        height: 244px;
        display: flex;
        position: relative;
      }
      border-bottom: 1px solid $--time-picker-divider-color;
    }
    @include b(time-picker-selector-time-row) {
      @include once {
        width: 60px;
        height: 244px;
        flex-direction: column;
      }
      @include e(item) {
        @include once {
          cursor: pointer;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background-color .3s $--n-ease-in-out-cubic-bezier;
          background: transparent;        
        }
        color: map-get($--time-picker-text-color, 'default');
        &:hover {
          background-color:  $--time-picker-item-background-color;
        }
        @include m(active) {
          background-color: $--time-picker-item-background-color;
          color: map-get($--time-picker-text-color, 'active');
        }
        @include m(disabled) {
          opacity: 0.45;
          cursor: not-allowed;
        }
      }
    }
  }
}