mirror of
https://github.com/penpot/penpot.git
synced 2025-05-29 08:06:15 +02:00
✨ Changes to the flex UI
This commit is contained in:
parent
f2fe1dd6f8
commit
de6cba8c0b
7 changed files with 127 additions and 54 deletions
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="M0 22.608v87.272h11.232V22.608Zm22.399 0V60.45h-.016v11.181h.016v38.147h87.557v-87.17zm98.661 0v87.272h11.232V22.608Z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 235 B |
|
@ -396,6 +396,10 @@ ul.slider-dots {
|
|||
width: 43px;
|
||||
}
|
||||
|
||||
&.auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Input amounts
|
||||
|
||||
&.pixels {
|
||||
|
|
|
@ -1612,11 +1612,23 @@
|
|||
align-items: center;
|
||||
margin-right: 5px;
|
||||
font-family: "worksans", sans-serif;
|
||||
|
||||
&.justify-content {
|
||||
align-items: start;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 185px;
|
||||
|
||||
&.justify-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.direction,
|
||||
.wrap-type,
|
||||
.align-items-style,
|
||||
|
@ -1711,7 +1723,8 @@
|
|||
margin-bottom: 8px;
|
||||
height: 26px;
|
||||
.gap-row,
|
||||
.gap-column {
|
||||
.gap-column,
|
||||
.padding-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -1751,6 +1764,13 @@
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
border-radius: $br-small;
|
||||
|
||||
&.lock {
|
||||
border: 1px solid $color-gray-60;
|
||||
border-radius: $br-small;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
&.active {
|
||||
svg {
|
||||
fill: $color-primary;
|
||||
|
@ -1765,10 +1785,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
.padding-row {
|
||||
grid-template-columns: auto 30px;
|
||||
}
|
||||
|
||||
.margin-row {
|
||||
grid-template-columns: 65px auto;
|
||||
}
|
||||
|
||||
.padding-row,
|
||||
.margin-row {
|
||||
display: grid;
|
||||
grid-template-columns: 65px auto;
|
||||
height: 26px;
|
||||
.padding-icons,
|
||||
.margin-icons {
|
||||
|
@ -1799,15 +1826,27 @@
|
|||
fill: $color-gray-30;
|
||||
}
|
||||
}
|
||||
|
||||
:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.padding-icons {
|
||||
margin-bottom: 8px;
|
||||
margin-top: 3px;
|
||||
margin-right: 1px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
height: 26px;
|
||||
|
||||
.input-element {
|
||||
margin: 0;
|
||||
margin-top: 3px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue