3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-18 13:17:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Update desing tab phase 2 (#3621)

Browse source 
* 💄 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 2023-09-27 12:10:36 +02:00 • committed by GitHub
parent 95f1a8b9ee
commit fb36b77bd1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
92 changed files with 6014 additions and 2132 deletions
Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/app/main/ui/components/select.scss
View file

@ -7,11 +7,18 @@
@import "refactor/common-refactor.scss";
.custom-select {
@include titleTipography;
position: relative;
display: flex;
align-items: center;
height: $s-32;
width: 100%;
margin: 0;
padding: $s-8;
border-radius: $br-8;
background-color: var(--menu-background-color);
border: $s-1 solid var(--menu-background-color);
color: var(--menu-foreground-color);
cursor: pointer;
.current-label {
width: 100%;
@ -26,26 +33,15 @@
}
}
.custom-select-dropdown {
@include menuShadow;
position: absolute;
top: $s-32;
left: 0;
width: 100%;
padding: $s-2;
margin: 0;
margin-top: $s-4;
border-radius: $br-8;
z-index: $z-index-3;
overflow-y: auto;
background-color: var(--menu-background-color);
@extend .dropdown-wrapper;
.separator {
margin: 0;
height: $s-12;
}
}
.checked-element {
display: flex;
align-items: center;
height: $s-32;
padding: 0 $s-8;
border-radius: $br-6;
color: var(--menu-foreground-color);
@extend .dropdown-element-base;
.label {
flex-grow: 1;
width: 100%;
@ -61,26 +57,35 @@
}
&.is-selected {
color: var(--menu-foreground-color);
.check-icon svg {
stroke: var(--menu-foreground-color);
visibility: visible;
}
}
&:hover {
background-color: var(--menu-background-color-hover);
color: var(--menu-foreground-color-hover);
.check-icon svg {
stroke: var(--menu-foreground-color-hover);
}
}
}
&:hover {
background-color: var(--menu-background-color-hover);
border: $s-1 solid var(--menu-background-color-hover);
.dropdown-button {
color: var(--menu-foreground-color-hover);
svg {
stroke: var(--menu-foreground-color-hover);
}
}
}
&:focus {
background-color: var(--menu-background-color-focus);
border: $s-1 solid var(--menu-border-color-focus);
}
&.disabled {
background-color: var(--menu-background-color-disabled);
color: var(--menu-foreground-color-disabled);
border: $s-1 solid var(--menu-border-color-disabled);
pointer-events: none;
cursor: default;
.dropdown-button svg {
stroke: var(--menu-foreground-color-disabled);
}
}
}