penpot/resources/public/styles/partials/sidebar-element-options.scss

.element-options {
  display: flex;

  .element-icons {
    background-color: $primary-ui-bg;
    border: 1px solid $bright-ui-border;
    border-radius: $br-small;
    display: flex;
    height: 100%;
    margin: $x-small 0 $x-small $x-small;

    li {
      align-items: center;
      border-right: 1px solid $bright-ui-border;
      border-radius: $br-small;
      cursor: pointer;
      display: flex;
      flex: 1;
      justify-content: center;
      padding: $small;

      svg {
        fill: $dark-ui-icons;
        height: 15px;
        width: 15px;
      }

      &:hover {

        svg {
          fill: $main-ui-color;
        }

      }

      &.selected {
        background-color: $main-ui-color;

        svg {
          fill: $color-white;
        }

      }

      &:last-child {
        border: none;
      }

    }

  }

  .element-set {
    color: $light-ui-text;
    margin-left: $x-small;

    .element-set-title {
      box-sizing: border-box;
      border-bottom: 1px dashed $bright-ui-border;
      color: $light-ui-text;
      font-weight: bold;
      padding: 2px $x-small;
      width: 100%;
    }

  }

}

.element-set-content {
  display: flex;
  flex-direction: column;
  padding: $small;

  .input-text {
    background-color: transparent;
    border-color: $bright-ui-border;
    box-sizing: border-box;
    color: $dark-ui-text;
    font-size: $fs13;
    margin: $x-small;
    padding: $x-small;
    width: 100%;

    &:focus {
      color: darken($dark-ui-text, 8%);
      border-color: $dark-ui-border;
    }

  }

  .input-select {
    color: $dark-ui-text;

    &:focus {
      color: darken($dark-ui-text, 8%);
    }

  }

  span {
    color: $light-ui-text;
    font-size: $fs12;
  }

  .lock-size {
    cursor: pointer;
    width: 20%;

    svg {
      fill: $light-ui-text;
      height: 15px;
      width: 15px;

      &:hover {
        fill: $main-ui-color;
      }

    }

    &.selected {

      svg {
        fill: $color-white;
      }

    }

  }

}

.color-th {
  background-color: $color-gray-lighter;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  height: 25px;
  margin: 5px 4px 0 4px;
  width: 25px;

  &.palette-th {
    align-items: center;
    border: 2px solid $light-ui-icons;
    display: flex;
    justify-content: center;

    svg {
      fill: $light-ui-icons;
      height: 18px;
      width: 18px;
    }

    &:hover {
      border-color: $main-ui-color;
      svg {
        fill: $main-ui-color;
      }

    }

  }

}

.align-icons {
  cursor: pointer;

  svg {
    fill: $light-ui-icons;
    height: 20px;
    margin: 5px 7px 0 7px;
    width: 20px;
  }

  &:hover,
  &.current {

    svg {
      fill: $main-ui-color;
    }

  }

}

.element-color-picker {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0 4px;

  .color-picker-body {
    height: 100%;
    margin-right: 15px;
  }

  .color-picker-bar {
    height: 165px;
    position: relative;
    width: 15px;

    .color-bar-select {
      background-color: $color-white;
      height: 3px;
      left: -4px;
      position: absolute;
      width: 23px;
      top: 30%;
    }

  }

}