scss 标签dot.scss

Posted 2021-05-18

.label-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: 1px solid transparent;

  &._none {
    background: transparent;
    border-color: #bbb;
  }

  &._red {
    background: #FF625C;
    border-color: #FF443B;
  }

  &._orange {
    background: #FFAA47;
    border-color: #FF9A19;
  }

  &._yellow {
    background: #F4CE4A;
    border-color: #F2C51C;
  }

  &._green {
    background: #83E163;
    border-color: #6BDB42;
  }

  &._blue {
    background: #4EBDFA;
    border-color: #29B0F8;
  }

  &._purple {
    background: #D189E2;
    border-color: #CE7AE2;
  }

  &._gray {
    background: #A4A4A7;
    border-color: #939396;
  }
}

.label-color-picker {

  ._picker-item {
    position: relative;
    padding: 5px 7px 5px 27px;
    cursor: pointer;
    font-size: .9em;
    border-radius: 3px;

    &:hover,
    &.selected {
      background: #ddd;
    }

    .label-dot {
      position: absolute;
      left: 7px;
      top: 7px;
    }
  }
}