Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

🐛 Fix focus title on layers sidebar

Browse source
This commit is contained in:
Eva 2023-07-03 12:52:08 +02:00 • committed by Alejandro Alonso
parent 02466d603c
commit 9a880f007c
2 changed files with 66 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
frontend/resources/styles/main/partials/sidebar-layers.scss
View file

@ -355,10 +355,12 @@ span.element-name {
.pages-tool-bar { .pages-tool-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 32px; height: 40px;
margin-top: 8px; padding: 0;
&.search { &.search {
margin-top: 8px;
padding: 8px;
.search-box { .search-box {
border: 1px solid $color-gray-20; border: 1px solid $color-gray-20;
border-radius: $br4; border-radius: $br4;
@ -403,6 +405,67 @@ span.element-name {
margin: 0 2px 0 5px; margin: 0 2px 0 5px;
cursor: pointer; cursor: pointer;
} }
.page-name {
padding: 8px;
margin-top: 8px;
}
.icon-search {
margin-top: 8px;
}
.focus-title {
width: 100%;
height: 100%;
display: grid;
align-items: center;
grid-template-columns: 16px 1fr auto;
grid-column-gap: 8px;
cursor: pointer;
.back-button {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: none;
border: none;
padding: 0;
margin: 0;
svg {
width: 12px;
height: 12px;
fill: $color-gray-20;
transform: rotate(180deg);
}
&:hover {
svg {
fill: $color-primary;
}
}
}
.focus-name {
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.focus-mode {
color: $color-primary;
border: 1px solid $color-primary;
border-radius: $br3;
font-size: $fs10;
text-transform: uppercase;
padding: 0px 4px;
display: flex;
align-items: center;
}
}
} }
} }
.active-filters { .active-filters {

47
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -40,6 +40,7 @@
flex-shrink: 0; flex-shrink: 0;
padding: $size-2; padding: $size-2;
overflow: hidden; overflow: hidden;
margin: 0;
svg { svg {
fill: $color-gray-20; fill: $color-gray-20;
@ -136,52 +137,6 @@
padding: 0.25rem; padding: 0.25rem;
} }
} }
& .focus-title {
width: 100%;
height: 100%;
display: grid;
align-items: center;
grid-template-columns: auto 1fr auto;
grid-column-gap: 8px;
cursor: pointer;
& .back-button {
background: none;
border: none;
padding: 0;
margin: 0;
& svg {
fill: $color-white;
transform: rotate(180deg);
margin-top: 3px;
}
&:hover {
svg {
fill: $color-primary;
}
}
}
& .focus-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
& .focus-mode {
color: $color-primary;
border: 1px solid $color-primary;
border-radius: $br3;
font-size: $fs10;
text-transform: uppercase;
padding: 0px 4px;
display: flex;
align-items: center;
}
}
} }
.assets-bar .tool-window { .assets-bar .tool-window {