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) {
    @include m(invalid) {
      & > {
        @include b(input) {
          @include e(input) {
            text-decoration: line-through;
            text-decoration-color: map-get($--time-picker-text-decoration-color, 'default');
          }
        }
      }
    }
    @include m(transition-disabled) {
      & > {
        @include b(input) {
          input {
            transition: none;
          }
        }
      }
    }
  }
  @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;
    @include b(time-picker-selector-time) {
      @include once {
        height: 245px;
        display: flex;
        position: relative;
      }
      border-bottom: 1px solid $--time-picker-divider-color;
    }
    @include b(time-picker-selector-time-row) {
      @include once {
        width: 60px;
        height: 245px;
        flex-direction: column;
        transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
        @include m(transition-disabled) {
          @include e(item) {
            transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
          }
        }
      }
      @include e(item) {
        @include once {
          cursor: pointer;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
          background: transparent; 
        }
        text-decoration-color: transparent;
        color: map-get($--time-picker-text-color, 'default');
        @include not-m(disabled) {
          &:hover {
            background-color:  map-get($--time-picker-item-background-color, 'hover');
          }
        }
        @include m(active) {
          background-color: map-get($--time-picker-item-background-color, 'hover');
          color: map-get($--time-picker-text-color, 'active');
        }
        @include m(disabled) {
          opacity: 0.45;
          cursor: not-allowed;
        }
      }
      @include m(invalid) {
        @include e(item) {
          @include m(active) {
            background-color: map-get($--time-picker-item-background-color, 'invalid');
            text-decoration: line-through;
            text-decoration-color: map-get($--time-picker-text-decoration-color, 'active');
          }
        }
      }
    }
  }
}