kui-vue/components/checkbox/styles/index.less

A lightweight desktop UI component library suitable for Vue.js 2.

@import "../../styles/var.less";

.k-checkbox {
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  user-select: none;
  line-height: 1;
  color: var(--kui-color-font);
  white-space: nowrap;
  outline: none;
  &:focus {
    .k-checkbox-symbol {
      outline: 2px solid var(--kui-color-main-80);
    }
  }
  // margin-right: 16px;
  .k-checkbox-symbol {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    outline: 0;
    line-height: 1;
    position: relative;
    margin: 0;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 1px solid var(--kui-color-border);
    background-color: var(--kui-color-back);
    color: #fff;
    overflow: hidden;
    outline: 2px solid transparent;
    outline-offset: 1px;
    border-radius: 3px;
  }

  .k-icon {
    font-size: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
  }

  .k-checkbox-input {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    opacity: 0;
    cursor: inherit;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    opacity: 0;
  }

  &.k-checkbox-indeterminate {
    .k-checkbox-symbol {
      // background: var(--kui-color-main);
      // border-color: var(--kui-color-main);
      position: relative;

      &:after {
        box-sizing: content-box;
        background-color: var(--kui-color-main);
        position: absolute;
        width: 8px;
        height: 8px;
        content: "";
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.2s ease-in-out;
        border-radius: 2px;
      }
    }
  }

  &:hover .k-checkbox-symbol {
    border-color: var(--kui-color-main);
  }

  .k-checkbox-label {
    padding-left: 8px;
    vertical-align: middle;
    font-size: 14px;
  }
}

.k-checkbox-sm {
  .k-checkbox-label {
    font-size: 12px;
  }
  .k-checkbox-symbol {
    width: 14px;
    height: 14px;
  }
}

.k-checkbox-lg {
  .k-checkbox-label {
    font-size: 16px;
  }

  .k-checkbox-symbol {
    width: 18px;
    height: 18px;
  }
}
.k-checkbox-light {
  .k-checkbox-symbol {
    background-color: var(--kui-color-gray-80);
  }
}
.k-checkbox-checked {
  .k-checkbox-symbol {
    background: var(--kui-color-main);
    border-color: var(--kui-color-main);
  }
}

.k-checkbox-disabled {
  cursor: not-allowed;
  color: var(--kui-color-disabled);

  &.k-checkbox {
    .k-checkbox-input {
      cursor: not-allowed;
    }

    .k-checkbox-symbol {
      background: var(--kui-color-disable-back);
      border-color: var(--kui-color-disable-border);
      color: var(--kui-color-disabled);

      &:after {
        background-color: var(--kui-color-disable-back);
        color: var(--kui-color-disabled);
      }
    }
  }

  &.k-checkbox-indeterminate .k-checkbox-symbol:after {
    background-color: var(--kui-color-disable-border);
  }
}

.k-checkbox-group {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.k-checkbox-group-vertical {
  flex-direction: column;
  align-items: self-start;
}