0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
penpot/frontend/resources/styles/main/partials/sidebar-interactions.scss
2023-08-25 11:40:56 +02:00

215 lines
3.4 KiB
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;
}
}
}