mirror of
https://github.com/penpot/penpot.git
synced 2025-08-04 06:48:33 +02:00
💄 New UI for Swap Component
This commit is contained in:
parent
de3605356c
commit
5cf93e7a3d
4 changed files with 449 additions and 263 deletions
|
@ -187,10 +187,14 @@
|
|||
--assets-item-background-color-hover: var(--color-background-quaternary);
|
||||
--assets-item-name-foreground-color: var(--color-foreground-secondary);
|
||||
--assets-item-name-foreground-color-hover: var(--color-foreground-primary);
|
||||
--assets-item-name-foreground-color-disabled: var(--color-foreground-disabled);
|
||||
--assets-item-border-color: var(--color-accent-primary);
|
||||
--assets-item-background-color-drag: var(--color-accent-primary-muted);
|
||||
--assets-item-border-color-drag: var(--color-select);
|
||||
--assets-component-background-color: var(--white); // We don't want this color to change with palette
|
||||
--assets-component-background-color-disabled: var(
|
||||
--off-white
|
||||
); // We don't want this color to change with palette
|
||||
|
||||
--radio-btns-background-color: var(--color-background-tertiary);
|
||||
--radio-btn-background-color-selected: var(--color-background-quaternary);
|
||||
|
|
|
@ -2591,128 +2591,3 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.component-swap {
|
||||
.search-block {
|
||||
margin: 0.7rem 0.5rem 0.2rem 0.2rem;
|
||||
height: 2.1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
height: 0.7rem;
|
||||
width: 0.7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-block {
|
||||
border: 1px solid $color-gray-30;
|
||||
margin: 0.6rem 0.5rem 0.2rem 0.2rem;
|
||||
padding: $size-1 $size-2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-gray-20;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: $color-primary;
|
||||
}
|
||||
|
||||
& .search-input {
|
||||
background-color: $color-gray-50;
|
||||
border: none;
|
||||
color: $color-gray-10;
|
||||
font-size: $fs12;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
&:focus {
|
||||
color: lighten($color-gray-10, 8%);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .search-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-30;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&.close {
|
||||
transform: rotate(45deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.component-path {
|
||||
display: flex;
|
||||
margin: 0.4rem 0 0 0.4rem;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
margin-right: 0.5rem;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.component-list {
|
||||
margin: 0.7rem 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.component-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
svg,
|
||||
img {
|
||||
background-color: $color-canvas;
|
||||
border-radius: $br4;
|
||||
border: 2px solid transparent;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: $size-2;
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
cursor: auto;
|
||||
color: $color-gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
.component-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
svg {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
}
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue