mirror of
https://github.com/penpot/penpot.git
synced 2025-08-02 15:38:29 +02:00
🐛 Fix several fronted errors related with new UI (#3691)
* 🐛 Fix title toggle arrow without content * 🐛 Fix export dropdowns * 🐛 Fix colorpicker eyedrop * 🐛 Fix hover state on color row * 🐛 Fix color bullet on color row * 🐛 Fix some css errors in new UI * 🐛 Fix text and typography component * 🐛 Fix some icons * 💄 Update ui in feedback page, webhooks page and access token page
This commit is contained in:
parent
25c60f3e0f
commit
c9ba4aea46
75 changed files with 896 additions and 454 deletions
|
@ -168,14 +168,13 @@
|
|||
@include flexCenter;
|
||||
border-radius: $br-8;
|
||||
color: var(--button-radio-foreground-color-rest);
|
||||
background-color: var(--button-radio-background-color-rest);
|
||||
border: $s-1 solid var(--button-radio-background-color-rest);
|
||||
svg,
|
||||
span svg {
|
||||
stroke: var(--button-radio-foreground-color-rest);
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
background-color: var(--button-radio-background-color-rest);
|
||||
color: var(--button-radio-foreground-color-hover);
|
||||
border: $s-1 solid transparent;
|
||||
svg,
|
||||
|
@ -288,8 +287,10 @@
|
|||
@include textEllipsis;
|
||||
height: $s-28;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
margin: $s-2 0;
|
||||
padding: 0 0 0 $s-4;
|
||||
padding: 0 0 0 $s-6;
|
||||
border-radius: $br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
&:focus-within,
|
||||
&:active {
|
||||
|
@ -302,18 +303,17 @@
|
|||
@include flexCenter;
|
||||
min-width: $s-12;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@include tabTitleTipography;
|
||||
@include flexCenter;
|
||||
min-width: $s-12;
|
||||
width: $s-20;
|
||||
padding-left: $s-8;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
|
||||
|
@ -322,15 +322,15 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
padding: 0 $s-4;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--input-background-color);
|
||||
border: $s-1 solid var(--input-background-color);
|
||||
color: var(--input-foreground-color);
|
||||
span {
|
||||
span,
|
||||
label {
|
||||
@extend .input-label;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--input-foreground-color);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -176,6 +176,7 @@
|
|||
|
||||
--color-bullet-background-color: var(--white); // We don't want this color to change with palette
|
||||
--color-bullet-border-color: var(--color-background-quaternary);
|
||||
--color-bullet-border-color-selected: var(--color-accent-primary);
|
||||
--palette-handler-background-color: var(--color-background-quaternary);
|
||||
|
||||
--assets-title-background-color: var(--color-background-primary);
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
$s-0: 0px;
|
||||
$s-1: 1px;
|
||||
$s-2: math.div(0.25rem, 2);
|
||||
$s-3: calc($s-1 + $s-2);
|
||||
$s-4: var(--s-4);
|
||||
$s-6: calc($s-2 + $s-4);
|
||||
$s-8: calc(var(--s-4) * 2);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue