iep-ui/es/scroll-bar-params/style/index.less

An enterprise-class UI design language and Vue-based implementation

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

.scroll-bar-params {
  .light {
    color: #666;
  }

  .dark {
    color: #999;
  }

  .active {
    color: #0f6eff;
  }

  .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-horizontal {
      justify-content: flex-start;

      .bar-text {
        padding: 0 10px 0 0;
      }

      .bar-core {
        height: 54px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-btn {
          width: 30px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          svg {
            color: #8a97a0;
          }
        }

        &-params {
          width: 560px;
          overflow-y: hidden;
          overflow-x: scroll;

          &-inner {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            transition: all 300ms;

            &::-webkit-scrollbar {
              display: none;
            }
          }

          &-item {
            flex-shrink: 0;
            min-width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }
        }
      }
    }

    &-vertical {
      flex-direction: column;

      .bar-text {
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .bar-core {
        width: 54px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;

        &-btn {
          height: 30px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          svg {
            color: #8a97a0;
          }
        }

        &-params {
          height: 440px;
          overflow-x: hidden;
          overflow-y: scroll;

          &-inner {
            transition: all 300ms;

            &::-webkit-scrollbar {
              display: none;
            }
          }

          &-item {
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
          }
        }
      }
    }

    &-text {
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      color: #333;
    }

    &-core {
      background: #eff6ff;
      border-radius: @border-radius-base;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .disable {
    cursor: not-allowed !important;

    .anticon {
      color: #ccc;
    }
  }
}