wikijs/client/scss/components/color-picker.scss

.colorpicker {
  display: flex;
  align-items: center;
  height: 60px;

  &-choice {
    width: 40px;
    height: 40px;
    border: 0 solid #FFF;
    transition: all .2s ease;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1px;

    &:first-child {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    &:last-child {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    &.is-active, &:hover {
      border-width: 5px;
      border-radius: 5px;
      width: 55px;
      height: 55px;
    }

    &.is-active::before {
      content: '|';
      font-weight: 700;
      color: rgba(255,255,255,.5);
      margin-bottom: 3px;
    }

    @each $color, $colorvalue in $material-colors {
		  &.is-#{$color} {
        background-color: mc($color, '500');
        background-image: linear-gradient(45deg, mc($color, '400'), mc($color, '700'));
        border-color: mc($color,'500');

        &.is-active, &:hover {
          border-color: mc($color,'300');
        }
      }
    }

  }

}