♻️ Remove new-css-system from interaction tab

This commit is contained in:
Eva 2024-01-02 17:57:20 +01:00 committed by Alonso Torres
parent 452289b726
commit 7da949610d
3 changed files with 147 additions and 349 deletions

View file

@ -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;
}
}