mirror of
https://github.com/penpot/penpot.git
synced 2025-01-08 07:50:43 -05:00
♻️ Remove new-css-system from interaction tab
This commit is contained in:
Eva
Alonso Torres
parent
452289b726
commit
7da949610d
3 changed files with 147 additions and 349 deletions
|
|
@ -71,7 +71,6 @@
|
||||||
@import "main/partials/project-bar";
|
@import "main/partials/project-bar";
|
||||||
@import "main/partials/sidebar";
|
@import "main/partials/sidebar";
|
||||||
@import "main/partials/sidebar-document-history";
|
@import "main/partials/sidebar-document-history";
|
||||||
@import "main/partials/sidebar-interactions";
|
|
||||||
@import "main/partials/tab-container";
|
@import "main/partials/tab-container";
|
||||||
@import "main/partials/tool-bar";
|
@import "main/partials/tool-bar";
|
||||||
@import "main/partials/user-settings";
|
@import "main/partials/user-settings";
|
||||||
|
|
|
||||||
|
|
@ -1,215 +0,0 @@
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -10,69 +10,76 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: $s-8;
|
gap: $s-8;
|
||||||
.interaction-options {
|
}
|
||||||
@include flexColumn;
|
|
||||||
.element-title {
|
|
||||||
.add-interaction-btn {
|
|
||||||
@extend .button-tertiary;
|
|
||||||
height: $s-32;
|
|
||||||
width: $s-28;
|
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
stroke: var(--icon-foreground);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.help-content {
|
.interaction-options {
|
||||||
padding: $s-20;
|
@include flexColumn;
|
||||||
.help-group {
|
}
|
||||||
margin-bottom: $s-40;
|
|
||||||
.interactions-help-icon {
|
.add-interaction-btn {
|
||||||
@include flexCenter;
|
@extend .button-tertiary;
|
||||||
width: $s-48;
|
height: $s-32;
|
||||||
height: $s-48;
|
width: $s-28;
|
||||||
border-radius: $br-circle;
|
svg {
|
||||||
background-color: var(--pill-background-color);
|
@extend .button-icon;
|
||||||
margin: 0 auto $s-12 auto;
|
stroke: var(--icon-foreground);
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
stroke: var(--icon-foreground);
|
|
||||||
height: $s-32;
|
|
||||||
width: $s-32;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.interactions-help {
|
|
||||||
@include titleTipography;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.element-set {
|
}
|
||||||
@include flexColumn;
|
|
||||||
.add-flow-btn {
|
.help-content {
|
||||||
@extend .button-tertiary;
|
padding: $s-20;
|
||||||
height: $s-32;
|
}
|
||||||
width: $s-28;
|
|
||||||
svg {
|
.help-group {
|
||||||
@extend .button-icon;
|
margin-bottom: $s-40;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.interactions-help-icon {
|
||||||
|
@include flexCenter;
|
||||||
|
width: $s-48;
|
||||||
|
height: $s-48;
|
||||||
|
border-radius: $br-circle;
|
||||||
|
background-color: var(--pill-background-color);
|
||||||
|
margin: 0 auto $s-12 auto;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
|
stroke: var(--icon-foreground);
|
||||||
|
height: $s-32;
|
||||||
|
width: $s-32;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interactions-help {
|
||||||
|
@include titleTipography;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--title-foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.element-set {
|
||||||
|
@include flexColumn;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-flow-btn {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
height: $s-32;
|
||||||
|
width: $s-28;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.interactions-info {
|
.interactions-info {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
display: grid;
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
.trigger-name {
|
.trigger-name {
|
||||||
color: var(--color-foreground-primary);
|
color: var(--color-foreground-primary);
|
||||||
}
|
}
|
||||||
.action-summary {
|
|
||||||
color: var(--color-foreground-secondary);
|
.action-summary {
|
||||||
@include textEllipsis;
|
color: var(--color-foreground-secondary);
|
||||||
}
|
@include textEllipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.groups {
|
.groups {
|
||||||
|
|
@ -96,6 +103,7 @@
|
||||||
width: $s-92;
|
width: $s-92;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
grid-area: name;
|
grid-area: name;
|
||||||
|
color: var(--title-foreground-color);
|
||||||
}
|
}
|
||||||
.select-wrapper {
|
.select-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -231,91 +239,97 @@
|
||||||
|
|
||||||
.flow-element {
|
.flow-element {
|
||||||
@include flexRow;
|
@include flexRow;
|
||||||
.flow-info {
|
}
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: $s-2;
|
|
||||||
border-radius: $s-8;
|
|
||||||
background-color: var(--input-details-color);
|
|
||||||
height: $s-32;
|
|
||||||
width: 100%;
|
|
||||||
flex-grow: 1;
|
|
||||||
.flow-name-wrapper {
|
|
||||||
@include titleTipography;
|
|
||||||
@include focusInput;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: $s-4;
|
|
||||||
flex-grow: 1;
|
|
||||||
height: $s-32;
|
|
||||||
width: 100%;
|
|
||||||
border-radius: $br-8;
|
|
||||||
padding: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
background-color: var(--input-background-color);
|
|
||||||
border: $s-1 solid var(--input-background-color);
|
|
||||||
color: var(--input-foreground-color);
|
|
||||||
.start-flow-btn {
|
|
||||||
@include buttonStyle;
|
|
||||||
height: $s-32;
|
|
||||||
width: $s-28;
|
|
||||||
padding: 0 $s-2 0 $s-8;
|
|
||||||
border-radius: $br-8 0 0 $br-8;
|
|
||||||
background-color: transparent;
|
|
||||||
svg {
|
|
||||||
@extend .button-icon;
|
|
||||||
stroke: var(--icon-foreground);
|
|
||||||
&:hover {
|
|
||||||
stroke: var(--input-foreground-color-active);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.flow-input {
|
|
||||||
@extend .input-base;
|
|
||||||
background-color: transparent;
|
|
||||||
height: $s-28;
|
|
||||||
}
|
|
||||||
.flow-input-wrapper {
|
|
||||||
@include titleTipography;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: $s-28;
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
flex-grow: 1;
|
|
||||||
background-color: transparent;
|
|
||||||
color: var(--input-foreground-color);
|
|
||||||
border-radius: $br-8;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--input-background-color-hover);
|
|
||||||
border: $s-1 solid var(--input-background-color-hover);
|
|
||||||
&:active {
|
|
||||||
background-color: var(--input-background-color-active);
|
|
||||||
.flow-input-wrapper {
|
|
||||||
background-color: var(--input-background-color-active);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:focus,
|
|
||||||
&:focus-within {
|
|
||||||
background-color: var(--input-background-color-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.editing {
|
.flow-info {
|
||||||
background-color: var(--input-background-color-active);
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
}
|
gap: $s-2;
|
||||||
}
|
border-radius: $s-8;
|
||||||
|
background-color: var(--input-details-color);
|
||||||
|
height: $s-32;
|
||||||
|
width: 100%;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.remove-flow-btn {
|
.flow-name-wrapper {
|
||||||
@extend .button-tertiary;
|
@include titleTipography;
|
||||||
|
@include focusInput;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: $s-4;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: $s-32;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: $br-8;
|
||||||
|
padding: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
background-color: var(--input-background-color);
|
||||||
|
border: $s-1 solid var(--input-background-color);
|
||||||
|
color: var(--input-foreground-color);
|
||||||
|
.start-flow-btn {
|
||||||
|
@include buttonStyle;
|
||||||
height: $s-32;
|
height: $s-32;
|
||||||
width: $s-28;
|
width: $s-28;
|
||||||
min-width: $s-28;
|
padding: 0 $s-2 0 $s-8;
|
||||||
|
border-radius: $br-8 0 0 $br-8;
|
||||||
|
background-color: transparent;
|
||||||
svg {
|
svg {
|
||||||
@extend .button-icon;
|
@extend .button-icon;
|
||||||
|
stroke: var(--icon-foreground);
|
||||||
|
&:hover {
|
||||||
|
stroke: var(--input-foreground-color-active);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.flow-input {
|
||||||
|
@extend .input-base;
|
||||||
|
background-color: transparent;
|
||||||
|
height: $s-28;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-input-wrapper {
|
||||||
|
@include titleTipography;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: $s-28;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--input-foreground-color);
|
||||||
|
border-radius: $br-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--input-background-color-hover);
|
||||||
|
border: $s-1 solid var(--input-background-color-hover);
|
||||||
|
&:active {
|
||||||
|
background-color: var(--input-background-color-active);
|
||||||
|
.flow-input-wrapper {
|
||||||
|
background-color: var(--input-background-color-active);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:focus-within {
|
||||||
|
background-color: var(--input-background-color-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.editing {
|
||||||
|
background-color: var(--input-background-color-active);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-flow-btn {
|
||||||
|
@extend .button-tertiary;
|
||||||
|
height: $s-32;
|
||||||
|
width: $s-28;
|
||||||
|
min-width: $s-28;
|
||||||
|
svg {
|
||||||
|
@extend .button-icon;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue