mirror of
https://github.com/penpot/penpot.git
synced 2025-06-11 15:51:39 +02: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
|
|
@ -10,69 +10,76 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
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 {
|
||||
padding: $s-20;
|
||||
.help-group {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.interaction-options {
|
||||
@include flexColumn;
|
||||
}
|
||||
|
||||
.add-interaction-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
.element-set {
|
||||
@include flexColumn;
|
||||
.add-flow-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-content {
|
||||
padding: $s-20;
|
||||
}
|
||||
|
||||
.help-group {
|
||||
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 {
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.trigger-name {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
.action-summary {
|
||||
color: var(--color-foreground-secondary);
|
||||
@include textEllipsis;
|
||||
}
|
||||
.trigger-name {
|
||||
color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
.action-summary {
|
||||
color: var(--color-foreground-secondary);
|
||||
@include textEllipsis;
|
||||
}
|
||||
|
||||
.groups {
|
||||
|
|
@ -96,6 +103,7 @@
|
|||
width: $s-92;
|
||||
margin: auto 0;
|
||||
grid-area: name;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
.select-wrapper {
|
||||
display: flex;
|
||||
|
|
@ -231,91 +239,97 @@
|
|||
|
||||
.flow-element {
|
||||
@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 {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.remove-flow-btn {
|
||||
@extend .button-tertiary;
|
||||
.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;
|
||||
min-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 {
|
||||
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…
Add table
Add a link
Reference in a new issue