mirror of
https://github.com/penpot/penpot.git
synced 2025-12-11 22:14:05 +01:00
💄 Update desing tab phase 2 (#3621)
* 💄 Update constraint component * 💄 Update fill and selected color components * 💄 Update stroke component * 💄 Update text component * 💄 Update frame grid component * 💄 Update export component * 💄 Update shadow and blur components * 💄 Update colorpicker component UI * 💄 Update svg attrs and componets components UI * 💄 Small UI changes * 🐛 Fix shadow functions
This commit is contained in:
Eva Marco
GitHub
@@ -4,6 +4,36 @@
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
|
||||
// SCROLLBAR
|
||||
.new-scrollbar {
|
||||
::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(170, 181, 186, 0.3);
|
||||
background-clip: content-box;
|
||||
border: $s-2 solid transparent;
|
||||
border-radius: $br-8;
|
||||
&:hover {
|
||||
background-color: rgba(170, 181, 186, 0.7);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--color-accent-primary-muted);
|
||||
}
|
||||
}
|
||||
|
||||
// BUTTONS
|
||||
.button-primary {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@@ -235,14 +265,130 @@
|
||||
stroke-width: 1.33px;
|
||||
}
|
||||
|
||||
.link {
|
||||
background: unset;
|
||||
border: none;
|
||||
color: var(--link-foreground-color);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
.button-constraint {
|
||||
@include buttonStyle;
|
||||
width: $s-32;
|
||||
height: $s-4;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--button-constraint-background-color-rest);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
&:hover,
|
||||
&:focus {
|
||||
outline: $s-4 solid var(--button-constraint-border-color-hover);
|
||||
background-color: var(--button-constraint-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// INPUTS
|
||||
|
||||
.input-base {
|
||||
@include removeInputStyle;
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
height: $s-28;
|
||||
width: 100%;
|
||||
margin: $s-2 0;
|
||||
padding: 0 0 0 $s-4;
|
||||
color: var(--input-foreground-color-active);
|
||||
&:focus-within,
|
||||
&:active {
|
||||
color: var(--input-foreground-color-active);
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
.input-icon {
|
||||
@include flexCenter;
|
||||
min-width: $s-12;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@include tabTitleTipography;
|
||||
@include flexCenter;
|
||||
min-width: $s-12;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
|
||||
.input-element {
|
||||
@include titleTipography;
|
||||
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 {
|
||||
@extend .input-label;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--input-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@extend .input-base;
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
&:hover {
|
||||
span {
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
|
||||
&:focus-within,
|
||||
&:active {
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
background-color: var(--input-background-color-active);
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled-input {
|
||||
background-color: var(--input-background-color-disabled);
|
||||
border: 1px solid var(--input-border-color-disabled);
|
||||
color: var(--input-foreground-color-disabled);
|
||||
input {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
color: var(--input-foreground-color-disabled);
|
||||
}
|
||||
span svg {
|
||||
stroke: var(--input-foreground-color-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
//MODALS
|
||||
.modal-background {
|
||||
@include menuShadow;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $s-12;
|
||||
border-radius: $br-8;
|
||||
z-index: $z-index-10;
|
||||
color: var(--color-foreground-primary);
|
||||
background-color: var(--modal-background-color);
|
||||
}
|
||||
|
||||
// UI ELEMENTS
|
||||
.asset-element {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
@@ -259,89 +405,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.input-element {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--input-background-color);
|
||||
color: var(--input-foreground-color);
|
||||
span {
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
input {
|
||||
@include removeInputStyle;
|
||||
@include titleTipography;
|
||||
color: var(--input-foreground-color);
|
||||
height: $s-32;
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
span {
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
input {
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
}
|
||||
.new-scrollbar {
|
||||
::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-corner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(170, 181, 186, 0.3);
|
||||
background-clip: content-box;
|
||||
border: $s-2 solid transparent;
|
||||
border-radius: $br-8;
|
||||
&:hover {
|
||||
background-color: rgba(170, 181, 186, 0.7);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
@include menuShadow;
|
||||
color: var(--title-foreground-color-hover);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-4;
|
||||
width: $s-192;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--menu-background-color);
|
||||
z-index: $z-index-10;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: $s-28;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.shortcut {
|
||||
@include flexCenter;
|
||||
gap: $s-2;
|
||||
@@ -368,3 +431,114 @@
|
||||
border: $s-2 solid var(--user-count-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.mixed-bar {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
border-radius: $br-8;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
background-color: var(--input-background-color);
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
|
||||
.link {
|
||||
background: unset;
|
||||
border: none;
|
||||
color: var(--link-foreground-color);
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.colorpicker-handler {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: $s-24;
|
||||
height: $s-24;
|
||||
border: $s-2 solid var(--colorpicker-details-color);
|
||||
border-radius: $br-circle;
|
||||
transform: translate(calc(-1 * $s-12), calc(-1 * $s-12));
|
||||
z-index: $z-index-1;
|
||||
&:hover,
|
||||
&:active {
|
||||
border-color: var(--colorpicker-details-color-selected);
|
||||
}
|
||||
}
|
||||
// SELECTS AND DROPDOWNS
|
||||
|
||||
.menu-dropdown {
|
||||
@include menuShadow;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-4;
|
||||
padding: $s-4;
|
||||
border-radius: $br-8;
|
||||
z-index: $z-index-10;
|
||||
color: var(--title-foreground-color-hover);
|
||||
background-color: var(--menu-background-color);
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: $s-28;
|
||||
width: 100%;
|
||||
padding: $s-6;
|
||||
border-radius: $br-8;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-element-base {
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-8;
|
||||
height: $s-32;
|
||||
padding: 0 $s-8;
|
||||
border-radius: $br-6;
|
||||
cursor: pointer;
|
||||
color: var(--menu-foreground-color-rest);
|
||||
|
||||
span {
|
||||
@include flexCenter;
|
||||
@include textEllipsis;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--menu-background-color-hover);
|
||||
color: var(--menu-foreground-color);
|
||||
span svg {
|
||||
stroke: var(--menu-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-wrapper {
|
||||
@include menuShadow;
|
||||
position: absolute;
|
||||
top: $s-32;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-height: $s-300;
|
||||
padding: $s-2;
|
||||
margin: 0;
|
||||
margin-top: $s-4;
|
||||
border-radius: $br-8;
|
||||
z-index: $z-index-3;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--menu-background-color);
|
||||
color: var(--menu-foreground-color);
|
||||
}
|
||||
|
||||
@@ -77,6 +77,13 @@
|
||||
--button-disabled-border-color-rest: var(--color-background-disabled);
|
||||
--button-disabled-foreground-color-rest: var(--color-foreground-disabled);
|
||||
|
||||
--button-constraint-background-color-rest: var(--color-foreground-secondary);
|
||||
--button-constraint-border-color-rest: var(--color-background-tertiary);
|
||||
--button-constraint-border-color-hover: var(--color-accent-primary-muted);
|
||||
--button-constraint-background-color-hover: var(--color-accent-primary);
|
||||
--constraint-widget-background-color: var(--color-background-tertiary);
|
||||
--constraint-center-area-background-color: var(--color-background-primary);
|
||||
|
||||
--icon-foreground: var(--color-foreground-secondary);
|
||||
--icon-foreground-hover: var(--color-foreground-primary);
|
||||
|
||||
@@ -111,18 +118,19 @@
|
||||
--search-bar-input-border-color: var(--color-background-tertiary);
|
||||
|
||||
--input-background-color: var(--color-background-tertiary);
|
||||
--input-background-color-active: var(--color-background-primary);
|
||||
--input-foreground-color: var(--color-foreground-secondary);
|
||||
--input-placeholder-color: var(--color-foreground-secondary);
|
||||
--input-background-color-hover: var(--color-background-quaternary);
|
||||
--input-background-color-focus: var(--color-background-tertiary);
|
||||
--input-background-color-disabled: var(--color-background-primary);
|
||||
--input-placeholder-color: var(--color-foreground-secondary);
|
||||
--input-foreground-color: var(--color-foreground-secondary);
|
||||
--input-foreground-color-active: var(--color-foreground-primary);
|
||||
--input-foreground-color-disabled: var(--color-foreground-secondary);
|
||||
--input-border-color-active: var(--color-accent-primary);
|
||||
--input-border-color-disabled: var(--color-background-quaternary);
|
||||
--input-border-outline-color-active: var(--color-accent-primary-muted);
|
||||
--input-border-color-focus: var(--color-accent-primary);
|
||||
--input-background-color-active: var(--color-background-primary);
|
||||
--input-foreground-color-active: var(--color-foreground-primary);
|
||||
--input-border-outline-color-active: var(--color-accent-primary-muted);
|
||||
--input-border-color-active: var(--color-accent-primary);
|
||||
--input-background-color-disabled: var(--color-background-primary);
|
||||
--input-foreground-color-disabled: var(--color-foreground-secondary);
|
||||
--input-border-color-disabled: var(--color-background-quaternary);
|
||||
--input-details-color: var(--color-background-primary);
|
||||
|
||||
--pill-background-color: var(--color-background-tertiary);
|
||||
--pill-foreground-color: var(--color-foreground-primary);
|
||||
@@ -130,17 +138,20 @@
|
||||
--menu-background-color: var(--color-background-tertiary);
|
||||
--menu-foreground-color: var(--color-foreground-primary);
|
||||
--menu-background-color-selected: var(--color-background-tertiary);
|
||||
--menu-foreground-color-selected: var(--color-foreground-primary);
|
||||
--menu-background-color-hover: var(--color-background-quaternary);
|
||||
--menu-foreground-color-hover: var(--color-foreground-primary);
|
||||
--menu-background-color-focus: var(--color-background-tertiary);
|
||||
--menu-foreground-color-focus: var(--color-foreground-primary);
|
||||
--menu-foreground-color-rest: var(--color-foreground-secondary);
|
||||
--menu-border-color-focus: var(--color-accent-primary);
|
||||
--menu-shortcut-background-color: var(--color-background-primary);
|
||||
--menu-shortcut-foreground-color: var(--color-foreground-secondary);
|
||||
--menu-shortcut-foreground-color-selected: var(--color-foreground-primary);
|
||||
--menu-shortcut-foreground-color-hover: var(--color-foreground-primary);
|
||||
--menu-shadow-color: var(--color-background-subtle);
|
||||
--menu-background-color-disabled: var(--color-background-primary);
|
||||
--menu-foreground-color-disabled: var(--color-foreground-secondary);
|
||||
--menu-border-color-disabled: var(--color-background-quaternary);
|
||||
|
||||
--tag-background-color: var(--color-accent-primary);
|
||||
|
||||
@@ -210,4 +221,8 @@
|
||||
--modal-background-color: var(--color-background-primary);
|
||||
--modal-foreground-color: var(--color-foreground-primary);
|
||||
--modal-foreground-color-secondary: var(--color-foreground-secondary);
|
||||
|
||||
--colorpicker-details-color: var(--color-background-quaternary);
|
||||
--colorpicker-details-color-selected: var(--color-accent-primary);
|
||||
--colorpicker-handlers-color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
@@ -33,11 +33,13 @@ $s-80: calc(var(--s-4) * 20);
|
||||
$s-84: calc(var(--s-4) * 21);
|
||||
$s-92: calc(var(--s-4) * 23);
|
||||
$s-96: calc(var(--s-4) * 24);
|
||||
$s-100: calc(var(--s-4) * 25);
|
||||
$s-104: calc(var(--s-4) * 26);
|
||||
$s-108: calc(var(--s-4) * 27);
|
||||
$s-116: calc(var(--s-4) * 29);
|
||||
$s-120: calc(var(--s-4) * 30);
|
||||
$s-124: calc(var(--s-4) * 31);
|
||||
$s-128: calc(var(--s-4) * 32);
|
||||
$s-136: calc(var(--s-4) * 34);
|
||||
$s-140: calc(var(--s-4) * 35);
|
||||
$s-148: calc(var(--s-4) * 37);
|
||||
@@ -45,6 +47,7 @@ $s-156: calc(var(--s-4) * 39);
|
||||
$s-152: calc(var(--s-4) * 38);
|
||||
$s-160: calc(var(--s-4) * 40);
|
||||
$s-168: calc(var(--s-4) * 42);
|
||||
$s-172: calc(var(--s-4) * 43);
|
||||
$s-180: calc(var(--s-4) * 45);
|
||||
$s-184: calc(var(--s-4) * 46);
|
||||
$s-188: calc(var(--s-4) * 47);
|
||||
@@ -53,10 +56,12 @@ $s-196: calc(var(--s-4) * 49);
|
||||
$s-200: calc(var(--s-4) * 50);
|
||||
$s-216: calc(var(--s-4) * 54);
|
||||
$s-220: calc(var(--s-4) * 55);
|
||||
$s-228: calc(var(--s-4) * 57);
|
||||
$s-240: calc(var(--s-4) * 60);
|
||||
$s-248: calc(var(--s-4) * 62);
|
||||
$s-252: calc(var(--s-4) * 63);
|
||||
$s-256: calc(var(--s-4) * 64);
|
||||
$s-260: calc(var(--s-4) * 65);
|
||||
$s-272: calc(var(--s-4) * 68);
|
||||
$s-276: calc(var(--s-4) * 69);
|
||||
$s-280: calc(var(--s-4) * 70);
|
||||
|
||||
Reference in New Issue
Block a user