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

.element-options {
  display: flex;
  position: absolute;
  transition: all .1s ease;

  .element-icons {
    background-color: $color-white;
    border: 1px solid darken($color-gray-lighter, 5%);
    border-radius: $br-small;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;

    li {
      align-items: center;
      border-bottom: 1px solid $color-gray-lighter;
      border-radius: $br-small;
      cursor: pointer;
      display: flex;
      padding: $small;

      svg {
        fill: $color-gray;
        height: 15px;
        width: 15px;
      }

      &:hover {

        svg {
          fill: $color-primary;
        }

      }

      &.selected {
        background-color: $color-gray-darker;

        svg {
          fill: $color-primary;
        }

      }

      &:last-child {
        border: none;
      }

    }

  }

  .element-set {
    background-color: $color-gray-darker;
    border-radius: $br-small;
    color: $color-gray-light;
    margin-left: $x-small;
    width: 220px;

    .element-set-title {
      background-color: $color-gray-dark;
      border-top-left-radius: $br-small;
      border-top-right-radius: $br-small;
      box-sizing: border-box;
      color: $color-gray-lighter;
      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: $color-gray;
    box-sizing: border-box;
    font-size: $fs13;
    margin: $x-small;
    padding: $x-small;
    width: 100%;

    &:focus {
      color: $color-white;
      border-color: $color-white;
    }

  }

  .input-select {

    &:focus {
      color: $color-gray;
    }

  }

  span {
    color: darken($color-gray-darker, 20%);
    font-size: $fs12;
  }

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

    svg {
      fill: $color-gray-light;
      height: 15px;
      width: 15px;

      &:hover {
        fill: $color-primary;
      }

    }

    &.selected {

      svg {
        fill: $color-white;
      }

    }

  }

}

.color-th {
  background-color: $color-gray-light;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  height: 25px;
  margin: 5px 4px 0 4px;
  width: 25px;
  &.palette-th {
    align-items: center;
    background-color: $color-gray-darker;
    border: 2px solid $color-gray-light;
    display: flex;
    justify-content: center;
    svg {
      fill: $color-gray-light;
      height: 18px;
      width: 18px;
    }
    &:hover {
      border-color: $color-primary;
      svg {
        fill: $color-primary;
      }
    }
  }
}

// .border-element {
//   align-items: center;
//   display: flex;
//   flex-direction: column;
//   margin: 5px 2% 0 2%;
//   svg {
//     fill: $color-gray-light;
//     height: 12px;
//     width: 12px;
//   }
//   &.top-left {
//     svg {
//       transform: rotate(270deg);
//     }
//   }
//   &.bottom-left {
//     svg {
//       transform: rotate(180deg);
//     }
//   }
//   &.bottom-right {
//     svg {
//       transform: rotate(90deg);
//     }
//   }
// }

.align-icons {
  cursor: pointer;
  svg {
    fill: $color-gray-light;
    height: 20px;
    margin: 5px 7px 0 7px;
    width: 20px;
  }
  &:hover,
  &.current {
    svg {
      fill: $color-primary;
    }
  }
}

.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%;
    }
  }
}