penpot/frontend/resources/styles/main/partials/sidebar-interactions.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

.interactions-help {
  font-size: $fs12;
  padding: 7px $size-4;
  margin: 0 -7px;
  text-align: center;

  &.separator {
    padding-bottom: $size-4;
    border-bottom: 1px solid $color-black;
  }
}

.interactions-help-icon {
  height: 32px;
  width: 32px;
  margin: $size-4 auto;

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

.interactions-summary {
  cursor: pointer;
  flex-basis: 0;
  flex-grow: 1;

  .trigger-name {
    font-size: $fs12;
    color: $color-white;
  }

  .action-summary {
    font-size: $fs12;
    color: $color-gray-20;
  }
}

.interactions-element {
  display: flex;
  align-items: center;
  margin: 0 -7px;
  padding: 0 7px;

  .element-label {
    color: $color-gray-20;
    font-size: $fs12;
    width: 64px;
  }

  &.separator {
    border-top: 1px solid $color-black;
    margin-top: $size-1;
  }
}

.interactions-pos-buttons {
  margin-top: $size-2;
  padding-top: $size-2;
  padding-bottom: $size-2;
  justify-content: space-between;

  .element-set-actions-button {
    min-width: 18px;
    min-height: 18px;
  }

  svg {
    height: 18px;
    width: 18px;
  }
}

.interactions-way-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;

  & .input-radio {
    margin-bottom: 0;

    & label {
      color: $color-gray-20;

      &:before {
        background-color: unset;
      }
    }

    & input[type="radio"]:checked {
      & + label {
        &:before {
          background-color: $color-primary;
          box-shadow: inset 0 0 0 5px $color-gray-50;
        }
      }
    }
  }
}

.interactions-direction-buttons {
  margin-top: $size-2;
  padding-top: $size-2;
  padding-bottom: $size-2;
  justify-content: space-around;

  .element-set-actions-button {
    min-width: 40px;
    min-height: 13px;
  }

  svg {
    height: 13px;
    width: 13px;
  }
}

.interactions-easing-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
  min-height: 30px;

  & svg {
    width: 12px;
    height: 12px;
    stroke: $color-gray-20;
  }
}

.flow-element {
  display: flex;
  align-items: center;
  padding: $size-1;

  .element-label {
    font-size: $fs11;
  }

  .flow-name {
    cursor: pointer;
  }

  & input.element-name {
    background: transparent;
    border-color: $color-primary;
    color: $color-white;
    font-size: $fs11;
  }
}

.flow-button {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: $size-2;

  & svg {
    height: 12px;
    width: 12px;
    fill: $color-gray-20;
  }

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

.flow-badge {
  cursor: pointer;
  display: flex;

  & .content {
    align-items: center;
    background-color: $color-gray-50;
    border-radius: $br4;
    display: flex;
    height: 24px;

    & svg {
      height: 12px;
      margin: 0 $size-2;
      width: 12px;
      fill: $color-gray-20;
    }

    & span {
      color: $color-gray-20;
      font-size: $fs12;
      margin-right: $size-4;
    }
  }

  &.selected .content,
  &:hover .content {
    background-color: $color-primary;

    & svg {
      fill: $color-gray-60;
    }

    & span {
      color: $color-gray-60;
    }
  }
}