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

✨ Add options to sidebar

Browse source
This commit is contained in:
Eva 2023-02-21 09:12:30 +01:00 • committed by alonso.torres
parent eb425dc4f2
commit cc8347a871
13 changed files with 794 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

144
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -1649,6 +1649,12 @@
align-items: start;
margin-top: 4px;
}
&.align-items-grid,
&.jusfiy-content-grid {
align-items: start;
margin-top: 11px;
}
}
.btn-wrapper {
display: flex;
@ -1748,6 +1754,34 @@
width: 30px;
}
}
.edit-mode {
display: flex;
justify-content: center;
align-items: center;
margin-left: 5px;
button {
display: flex;
justify-content: center;
align-items: center;
background: transparent;
border: none;
cursor: pointer;
&.active,
&:hover {
svg {
fill: $color-primary;
}
}
}
}
&.align-grid {
flex-direction: column;
gap: 7px;
margin: 7px 0;
}
}
}
.no-wrap {
@ -2076,6 +2110,116 @@
}
}
}
.grid-columns {
border: 1px solid $color-gray-60;
padding: 5px;
min-height: 38px;
display: flex;
flex-direction: column;
align-items: center;
&:not(:first-child) {
margin-top: 5px;
}
.grid-columns-header {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
flex-grow: 1;
min-height: 36px;
.columns-info {
flex-grow: 1;
font-size: 12px;
}
.expand-icon,
.add-column {
cursor: pointer;
background-color: transparent;
border: none;
display: flex;
justify-content: center;
align-items: center;
&.active,
&:hover {
svg {
fill: $color-primary;
}
}
}
.add-column svg {
height: 12px;
width: 12px;
fill: $color-gray-20;
}
}
.columns-info-wrapper {
.column-info {
display: grid;
grid-template-columns: 35px 1fr 1fr auto;
background-color: $color-gray-60;
padding: 3px;
&:not(:first-child) {
margin-top: 3px;
}
.direction-grid-icon {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
}
input {
background-color: $color-gray-60;
}
.grid-column-value,
.grid-column-unit {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
&.active,
&:focus,
&:focus-within {
border-bottom: 1px solid $color-primary;
}
}
.grid-column-unit-selector {
border: none;
border-bottom: 1px solid $color-gray-30;
margin: 0.25rem 0;
height: 23px;
width: 100%;
&:hover {
border-bottom: 1px solid $color-gray-20;
}
}
.remove-grid-column {
cursor: pointer;
background-color: transparent;
border: none;
display: flex;
justify-content: center;
align-items: center;
margin-left: 40px;
svg {
height: 12px;
width: 12px;
fill: $color-gray-20;
}
&.active,
&:hover {
svg {
fill: $color-primary;
}
}
}
}
}
}
}
.advanced-ops {