3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-02 05:41:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add new flex layout menu

Browse source
This commit is contained in:
Eva 2022-10-03 09:50:25 +02:00 • committed by Alonso Torres
parent 5463671db1
commit e16da8bd2d
63 changed files with 955 additions and 586 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/align-content-column-around.svg Normal file
View file

@ -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 0v132.292h11.207V0H0zm121.085 0v132.292h11.207V0h-11.207zM36.023 38.842c-6.487 0-11.745 5.258-11.745 11.744 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.259 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm30.04 0c-6.486 0-11.744 5.258-11.744 11.744 0 6.487 5.258 11.745 11.744 11.745 6.487 0 11.745-5.259 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744zm30.496 0c-6.487 0-11.745 5.258-11.745 11.744 0 6.487 5.258 11.745 11.745 11.745 6.486 0 11.744-5.259 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm-60.536 31.12c-6.487 0-11.745 5.259-11.745 11.745 0 6.486 5.258 11.745 11.745 11.745 6.486 0 11.744-5.259 11.744-11.745 0-6.486-5.258-11.744-11.744-11.744zm30.04 0c-6.486 0-11.744 5.259-11.744 11.745 0 6.486 5.258 11.745 11.744 11.745 6.487 0 11.745-5.259 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 941 B

3
frontend/resources/images/icons/align-content-column-between.svg Normal file
View file

@ -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 0v132.292h11.207V0H0zm121.085 0v132.292h11.207V0h-11.207zM30.731 28.258c-6.486 0-11.744 5.259-11.745 11.745 0 6.486 5.259 11.744 11.745 11.744 6.486 0 11.745-5.258 11.745-11.744S37.217 28.258 30.73 28.258zm35.332 0c-6.486 0-11.744 5.259-11.744 11.745 0 6.486 5.258 11.744 11.744 11.744 6.487 0 11.745-5.258 11.745-11.744s-5.259-11.745-11.745-11.745zm35.787 0c-6.486 0-11.744 5.259-11.744 11.745 0 6.486 5.258 11.744 11.744 11.744 6.487 0 11.745-5.258 11.745-11.744s-5.258-11.745-11.745-11.745zM30.731 80.546c-6.486 0-11.744 5.258-11.745 11.744 0 6.487 5.259 11.745 11.745 11.745 6.486 0 11.745-5.258 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744zm35.332 0c-6.486 0-11.744 5.258-11.744 11.744 0 6.487 5.258 11.745 11.744 11.745 6.487 0 11.745-5.258 11.745-11.745 0-6.486-5.259-11.744-11.745-11.744z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 921 B

3
frontend/resources/images/icons/align-content-column-center.svg Normal file
View file

@ -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 0v132.292h11.207V0H0zm121.085 0v132.292h11.207V0h-11.207zM20.724 29.578v30.218H44.09V29.578H20.724zm33.276 0v30.218h23.366V29.578H54zm33.276 0v30.218h23.367V29.578H87.276zM20.724 71.003v31.71H44.09v-31.71H20.724zm33.276 0v31.71h23.366v-31.71H54z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 366 B

3
frontend/resources/images/icons/align-content-column-end.svg Normal file
View file

@ -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="M121.085 0v132.292h11.207V0h-11.207zM20.724 29.578v30.218H44.09V29.578H20.724zm33.276 0v30.218h23.366V29.578H54zm33.276 0v30.218h23.367V29.578H87.276zM20.724 71.003v31.71H44.09v-31.71H20.724zm33.276 0v31.71h23.366v-31.71H54z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 342 B

3
frontend/resources/images/icons/align-content-column-start.svg Normal file
View file

@ -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 0v132.292h11.207V0H0zm21.65 29.578v30.218h23.365V29.578H21.65zm33.275 0v30.218h23.367V29.578H54.925zm33.277 0v30.218h23.366V29.578H88.202zM21.649 71.003v31.71h23.366v-31.71H21.65zm33.276 0v31.71h23.367v-31.71H54.925z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 337 B

3
frontend/resources/images/icons/align-content-row-around.svg Normal file
View file

@ -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 0v11.207h132.292V0Zm25.961 33.039c-7.54 0-13.654 6.113-13.654 13.654 0 7.541 6.113 13.654 13.654 13.654 7.541 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654zm40.217 0c-7.541 0-13.654 6.113-13.654 13.654 0 7.541 6.113 13.654 13.654 13.654 7.541 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654zm40.217 0c-7.541 0-13.655 6.113-13.655 13.654 0 7.541 6.114 13.654 13.655 13.654 7.54 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654zm-80.434 38.1c-7.54 0-13.654 6.113-13.654 13.654 0 7.541 6.113 13.655 13.654 13.654 7.541 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654zm40.217 0c-7.541 0-13.654 6.113-13.654 13.654 0 7.541 6.113 13.655 13.654 13.654 7.541 0 13.654-6.113 13.654-13.654 0-7.54-6.113-13.654-13.654-13.654ZM0 121.085v11.207h132.292v-11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 930 B

3
frontend/resources/images/icons/align-content-row-between.svg Normal file
View file

@ -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 0v11.207h132.292V0H0zm23.845 20.868A13.654 13.654 0 0 0 10.19 34.522a13.654 13.654 0 0 0 13.655 13.655 13.654 13.654 0 0 0 13.654-13.655 13.654 13.654 0 0 0-13.654-13.654zm42.333 0a13.654 13.654 0 0 0-13.654 13.654 13.654 13.654 0 0 0 13.654 13.655 13.654 13.654 0 0 0 13.654-13.655 13.654 13.654 0 0 0-13.654-13.654zm42.333 0a13.654 13.654 0 0 0-13.654 13.654 13.654 13.654 0 0 0 13.654 13.655 13.654 13.654 0 0 0 13.654-13.655 13.654 13.654 0 0 0-13.654-13.654zM23.845 83.31A13.654 13.654 0 0 0 10.19 96.964a13.654 13.654 0 0 0 13.655 13.654 13.654 13.654 0 0 0 13.654-13.654A13.654 13.654 0 0 0 23.845 83.31zm42.333 0a13.654 13.654 0 0 0-13.654 13.654 13.654 13.654 0 0 0 13.654 13.654 13.654 13.654 0 0 0 13.654-13.654A13.654 13.654 0 0 0 66.178 83.31zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 913 B

3
frontend/resources/images/icons/align-content-row-center.svg Normal file
View file

@ -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 0v11.207h132.292V0H0zm8.95 29.578v30.218h29.725V29.578H8.95zm42.333 0v30.218h29.726V29.578H51.283zm42.333 0v30.218h29.727V29.578H93.616zM8.95 71.003v31.71h29.726v-31.71H8.95zm42.334 0v31.71H81.01v-31.71H51.283zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 367 B

3
frontend/resources/images/icons/align-content-row-end.svg Normal file
View file

@ -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="M8.95 36.986v30.218h29.725V36.986H8.95zm42.333 0v30.218h29.726V36.986H51.283zm42.333 0v30.218h29.727V36.986H93.616zM8.95 78.411v31.711h29.726V78.411H8.95zm42.334 0v31.711H81.01V78.411H51.283zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 345 B

3
frontend/resources/images/icons/align-content-row-start.svg Normal file
View file

@ -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 0v11.207h132.292V0H0zm8.95 23.228v30.218h29.725V23.228H8.95zm42.333 0v30.218h29.726V23.228H51.283zm42.333 0v30.218h29.727V23.228H93.616zM8.95 64.653v31.71h29.726v-31.71H8.95zm42.334 0v31.71H81.01v-31.71H51.283z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 331 B

3
frontend/resources/images/icons/align-items-column-baseline.svg Normal file
View file

@ -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="M25.345 29.008h35.198V0h11.206v29.008h35.198v29.726H71.75v14.724h25.673v29.726H71.75v29.108H60.543v-29.108H34.87V73.458h25.673V58.734H25.345Zm46.176 9.139v11.736h25.781V38.147Zm0 44.45v11.737h16.338V82.597Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 324 B

3
frontend/resources/images/icons/align-items-column-center.svg Normal file
View file

@ -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="M60.543 0v29.008H25.345v29.726h35.198v14.724H34.87v29.726h25.673v29.108h11.206v-29.108h25.673V73.458H71.75V58.734h35.198V29.008H71.75V0Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 254 B

3
frontend/resources/images/icons/align-items-column-end.svg Normal file
View file

@ -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="M132.292 132.292h-11.207V0h11.207Zm-23.228-29.108h-57.26V73.458h57.26zm0-44.45H35.928V29.008h73.136Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 218 B

3
frontend/resources/images/icons/align-items-column-start.svg Normal file
View file

@ -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 132.292h11.207V0H0Zm23.228-29.108h57.26V73.458h-57.26Zm0-44.45h73.136V29.008H23.228Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 205 B

3
frontend/resources/images/icons/align-items-column-strech.svg Normal file
View file

@ -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="M132.292 0h-11.207v132.292h11.207Zm-22.699 29.008H23.228v29.726h86.365zm0 44.45H23.228v29.726h86.365zM11.207 0H0v132.292h11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 246 B

3
frontend/resources/images/icons/align-items-row-baseline.svg Normal file
View file

@ -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="M29.008 25.345v35.198H0v11.206h29.008v35.198h29.726V71.75h14.724v25.673h29.726V71.75h29.108V60.543h-29.108V34.87H73.458v25.673H58.734V25.345Zm9.139 46.176h11.736v25.781H38.147Zm44.45 0h11.736v16.338H82.597Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 324 B

3
frontend/resources/images/icons/align-items-row-center.svg Normal file
View file

@ -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 71.75h29.008v35.197h29.726V71.75h14.724v25.673h29.726V71.75h29.108V60.543h-29.108V34.87H73.458v25.673H58.734V25.345H29.008v35.198H0Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 253 B

3
frontend/resources/images/icons/align-items-row-end.svg Normal file
View file

@ -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="M132.292 132.292v-11.207H0v11.207Zm-29.108-23.228v-57.26H73.458v57.26Zm-44.45 0V35.928H29.008v73.136Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 219 B

3
frontend/resources/images/icons/align-items-row-start.svg Normal file
View file

@ -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 0v11.207h132.292V0Zm29.108 23.228v57.26h29.726v-57.26Zm44.45 0v73.136h29.726V23.228Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 205 B

3
frontend/resources/images/icons/align-items-row-strech.svg Normal file
View file

@ -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 0v11.207h132.292V0H0zm29.008 22.699v86.365h29.726V22.699H29.008zm44.45 0v86.365h29.726V22.699H73.458zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 258 B

3
frontend/resources/images/icons/align-self-column-baseline.svg Normal file
View file

@ -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="M50.704 22.964V60.59H0v11.206h50.704v37.532H80.43V71.796h51.862V60.59H80.43V22.964H50.704zm8.794 48.9h12.688v28.855H59.498V71.865z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 248 B

3
frontend/resources/images/icons/align-self-column-bottom.svg Normal file
View file

@ -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="M132.292 132.292v-11.207H0v11.207Zm-50.704-22.699V23.228H51.862v86.365z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 189 B

3
frontend/resources/images/icons/align-self-column-center.svg Normal file
View file

@ -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 60.59v11.206h132.292V60.59Zm50.704-37.626v86.364H80.43V22.964Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 183 B

3
frontend/resources/images/icons/align-self-column-strech.svg Normal file
View file

@ -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="M132.292 132.292v-11.207H0v11.207Zm-50.704-22.699V23.228H51.862v86.365zm50.704-98.386V0H0v11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 215 B

3
frontend/resources/images/icons/align-self-column-top.svg Normal file
View file

@ -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 0v11.207h132.292V0Zm50.704 22.699v86.365H80.43V22.699Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 175 B

3
frontend/resources/images/icons/align-self-row-baseline.svg Normal file
View file

@ -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="M22.964 81.588H60.59v50.704h11.206V81.588h37.532V51.862H71.796V0H60.59v51.862H22.964Zm48.9-8.794V60.106h28.855v12.688z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 236 B

3
frontend/resources/images/icons/align-self-row-center.svg Normal file
View file

@ -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="M71.967 0H60.76v132.292h11.207zm37.626 50.704H23.228V80.43h86.365z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 184 B

3
frontend/resources/images/icons/align-self-row-left.svg Normal file
View file

@ -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 132.292h11.207V0H0Zm22.699-50.704h86.365V51.862H22.699Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 176 B

3
frontend/resources/images/icons/align-self-row-right.svg Normal file
View file

@ -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="M132.292 0h-11.207v132.292h11.207Zm-22.699 50.704H23.228V80.43h86.365z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 188 B

3
frontend/resources/images/icons/align-self-row-strech.svg Normal file
View file

@ -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="M132.292 0h-11.207v132.292h11.207Zm-22.699 50.704H23.228V80.43h86.365zM11.207 0H0v132.292h11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 215 B

2
frontend/resources/images/icons/auto-direction.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zM72.28 25.457l-7.77 7.274L91.517 60.33l-69.134.12v11.181l69.134.12L64.51 99.346l7.48 7.49 39.507-40.791L72.28 25.457z"/>
<path d="m72.28 25.457-7.77 7.274L91.517 60.33l-69.134.12v11.181l69.134.12L64.51 99.346l7.48 7.49 39.507-40.791z"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 304 B

After

Width:  |  Height:  |  Size: 221 B

Before After
Before After

4
frontend/resources/images/icons/auto-fix.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
<path d="M500 136.36406V0H363.6375v45.45469H136.36406V0H0v136.36406h45.454687V363.6375H0V500h136.36406v-45.45313H363.6375V500H500V363.6375h-45.45313V136.36406zM45.454687 45.45469h45.454688v45.45469H45.454687zm45.454688 409.09218H45.454687v-45.45625h45.454688zM363.6375 409.09062H136.36406V363.6375H90.909375V136.36406h45.454685V90.90938H363.6375v45.45468h45.45312V363.6375H363.6375zm90.90937 45.45625h-45.45624v-45.45625h45.45624zM409.09062 90.90938V45.45469h45.45625v45.45469zM289.4325 295.45531h-79.20469l-16.59094 45.45407H156.705l77.27281-204.54532h31.93188l77.38718 204.54532h-37.04624zm-69.31844-28.63656h59.31844l-29.65937-87.04562z"/>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M38.399 0v11.232h22.136v109.827H38.4v11.233h55.494v-11.233H71.757V11.232h22.136V0Z"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 740 B

After

Width:  |  Height:  |  Size: 200 B

Before After
Before After

3
frontend/resources/images/icons/auto-flex.svg Normal file
View file

@ -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 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v73.136h29.726V29.578H29.108zm44.45 0v73.136h29.726V29.578H73.558z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 267 B

2
frontend/resources/images/icons/auto-gap.svg
View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
<path d="M0 0v31.832h12.82v-20.6h.005V0H0zm26.458 0v132.292h79.376V0H26.458zm93.177 0v31.832h12.657V0h-12.657zM37.69 11.232h56.912v109.827H37.69V11.232zM0 47.543V84.75h12.82V47.543H0zm119.635 0V84.75h12.657V47.543h-12.657zM0 100.461v31.831h12.825v-11.233h-.006v-20.598H0zm119.635 0v31.831h12.657v-31.831h-12.657z"/>
<path d="M0 0v58.29h16.524V11.233h.005V0H0zm37.041 0v132.292h58.21V0H37.04zm78.722 0v58.29h16.524V11.233h.005V0h-16.53zM51.977 14.936h28.338v102.419H51.977V14.936zM0 74.002v58.29h16.53v-11.233h-.007V74.002H0zm115.763 0v58.29h16.529v-11.233h-.006V74.002h-16.523z"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 421 B

After

Width:  |  Height:  |  Size: 370 B

Before After
Before After

3
frontend/resources/images/icons/auto-grid.svg Normal file
View file

@ -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 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v27.294h29.726V29.578H29.108zm44.45 0v27.294h29.726V29.578H73.558zM29.108 75.42v27.294h29.726V75.42H29.108zm44.45 0v27.294h29.726V75.42H73.558z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 344 B

3
frontend/resources/images/icons/auto-wrap.svg Normal file
View file

@ -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="m91.143 15.609-.093.001v.032H.29V26.81h91.855v-.015a29.606 29.606 0 0 1 28.693 29.677 29.611 29.611 0 0 1-29.695 29.695l-.093-.001v.007l-70.622-.12 19.6-20.19-7.771-7.275L.449 91.767l32.098 33.383 7.48-7.49-19.599-20.187 70.722-.12v-.021c22.497-.004 40.852-18.364 40.852-40.862 0-22.5-18.359-40.861-40.859-40.861z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 431 B

3
frontend/resources/images/icons/justify-content-column-around.svg Normal file
View file

@ -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 0v11.207h132.292V0Zm29.53 30.91v29.726h73.234V30.91Zm.098 40.746v29.726h73.136V71.656ZM0 121.086v11.206h132.292v-11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 241 B

3
frontend/resources/images/icons/justify-content-column-between.svg Normal file
View file

@ -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 0v11.207h132.292V0H0zm29.53 21.914V51.64h73.234V21.914H29.53zm.098 58.738v29.726h73.136V80.652H29.628zM0 121.085v11.207h132.292v-11.207H0z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 259 B

3
frontend/resources/images/icons/justify-content-column-center.svg Normal file
View file

@ -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="M132.292 71.532H0V60.325h132.292Zm-29.528 41.227H29.628V83.033h73.136zm0-63.5H29.53V19.533h73.234z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 216 B

3
frontend/resources/images/icons/justify-content-column-end.svg Normal file
View file

@ -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 121.085h132.292v11.207H0Zm29.528-85.677h73.136v29.726H29.528Zm0 44.45h73.234v29.726H29.528Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 212 B

3
frontend/resources/images/icons/justify-content-column-start.svg Normal file
View file

@ -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="M132.292 11.207H0V0h132.292Zm-29.528 85.677H29.628V67.158h73.136zm0-44.45H29.53V22.708h73.234z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 212 B

3
frontend/resources/images/icons/justify-content-row-around.svg Normal file
View file

@ -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 132.292h11.207V0H0Zm30.91-29.53h29.726V29.528H30.91Zm40.746-.098h29.726V29.528H71.656Zm49.43 29.628h11.206V0h-11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 238 B

3
frontend/resources/images/icons/justify-content-row-between.svg Normal file
View file

@ -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 132.292h11.207V0H0Zm21.914-29.53H51.64V29.528H21.914Zm58.738-.098h29.726V29.528H80.652Zm40.433 29.628h11.207V0h-11.207z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 240 B

3
frontend/resources/images/icons/justify-content-row-center.svg Normal file
View file

@ -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="M71.532 0v132.292H60.325V0Zm41.227 29.528v73.136H83.033V29.528Zm-63.5 0v73.234H19.533V29.528Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 211 B

3
frontend/resources/images/icons/justify-content-row-end.svg Normal file
View file

@ -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="M121.085 0v132.292h11.207V0h-11.207zM35.408 29.528v73.136h29.726V29.528H35.408zm44.45 0v73.234h29.726V29.528H79.858z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 234 B

3
frontend/resources/images/icons/justify-content-row-start.svg Normal file
View file

@ -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="M11.207 0v132.292H0V0Zm85.677 29.528v73.136H67.158V29.528Zm-44.45 0v73.234H22.708V29.528Z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 207 B

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

@ -59,6 +59,7 @@
padding: $size-2 $size-1;
.element-set-title {
height: 35px;
color: $color-gray-20;
display: flex;
font-size: $fs14;
@ -1165,12 +1166,6 @@
fill: $color-primary;
}
}
svg {
}
.multiple-typography-button:hover svg {
}
}
.font-selector {
@ -1588,58 +1583,133 @@
}
}
.layout-menu {
.layout-menu,
.layout-item-menu {
font-family: "worksans", sans-serif;
svg {
height: 16px;
width: 16px;
fill: $color-gray-30;
}
.direction-gap {
display: flex;
justify-content: space-between;
.direction {
.layout-row {
display: grid;
grid-template-columns: 60px 1fr;
margin-bottom: 5px;
.row-title {
font-size: $fs12;
display: flex;
.dir {
margin-right: 4px;
justify-content: start;
align-items: center;
margin-right: 5px;
font-family: "worksans", sans-serif;
}
.btn-wrapper {
display: flex;
width: 100%;
.direction,
.wrap-type,
.align-items-style,
.align-self-style,
.justify-content-style,
.align-content-style,
.layout-behavior {
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
&.right {
svg {
transform: rotate(180deg);
}
}
&.top {
svg {
transform: rotate(-90deg);
}
}
&.bottom {
svg {
border-radius: 4px;
border: 1px solid $color-gray-60;
height: 26px;
margin-right: 5px;
flex-grow: 1;
&.horizontal {
button svg {
transform: rotate(90deg);
}
}
&.active,
&:hover {
svg {
fill: $color-primary;
button {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
border-right: 1px solid $color-gray-60;
&.active,
&:hover {
svg {
fill: $color-primary;
}
}
}
.dir {
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
border-right: 1px solid $color-gray-60;
padding: 4px;
&.reverse-row {
svg {
transform: rotate(180deg);
}
}
&.reverse-column {
svg {
transform: rotate(-90deg);
}
}
&.column {
svg {
transform: rotate(90deg);
}
}
&.active,
&:hover {
svg {
fill: $color-primary;
}
}
}
:last-child {
border-right: none;
}
}
}
.gap {
}
.no-wrap {
display: flex;
align-items: center;
justify-content: center;
height: 21px;
width: 21px;
svg {
height: 0.7rem;
width: 0.7rem;
}
}
.gap-group {
display: flex;
margin-top: 3px;
margin-bottom: 8px;
height: 26px;
.gap-row,
.gap-column {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
.icon {
display: flex;
justify-content: center;
align-items: center;
margin-right: 7px;
svg {
height: 14px;
width: 14px;
}
&.rotated {
transform: rotate(90deg);
}
@ -1653,11 +1723,79 @@
font-size: 0.75rem;
min-width: 0;
padding: 0.25rem;
width: 50px;
width: 70px;
height: 20px;
margin: 0;
}
}
button {
display: flex;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
border-radius: $br-small;
&.active {
svg {
fill: $color-primary;
}
}
&:hover {
background-color: $color-primary;
svg {
fill: $color-gray-60;
}
}
}
}
.padding-row,
.margin-row {
display: grid;
grid-template-columns: 65px auto;
height: 26px;
.padding-icons,
.margin-icons {
display: flex;
padding: 0;
border: 1px solid $color-gray-60;
border-radius: 3px;
.padding-icon,
.margin-icon {
display: flex;
justify-content: center;
align-items: center;
padding: 6px;
flex-grow: 1;
border-right: 1px solid $color-gray-60;
cursor: pointer;
&:hover,
&.selected {
svg {
fill: $color-primary;
}
}
svg {
height: 14px;
width: 14px;
fill: $color-gray-30;
}
}
:last-child {
border: none;
}
}
.wrapper {
display: flex;
height: 26px;
.input-element {
margin: 0;
height: 26px;
}
}
}
.layout-container {
@ -1783,69 +1921,40 @@
}
}
.layout-item-menu {
.layout-behavior {
.advanced-ops {
margin: 10px 0;
display: flex;
align-items: center;
cursor: pointer;
font-size: $fs12;
color: $color-gray-30;
border: none;
background-color: transparent;
padding: 0;
.icon {
display: flex;
justify-content: start;
align-items: center;
margin: 9px 0;
.button-wrapper {
border: 1px solid $color-gray-60;
border-radius: 4px;
display: flex;
align-items: center;
.behavior-btn {
background: none;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
.icon {
display: flex;
justify-content: center;
align-items: center;
height: 26px;
width: 26px;
svg {
height: 16px;
width: 16px;
fill: $color-gray-30;
}
}
&:hover,
&.activated {
svg {
fill: $color-primary;
}
}
}
&.horizontal {
margin-right: 8px;
svg {
transform: rotate(90deg);
}
}
margin-right: 10px;
svg {
fill: $color-gray-20;
}
}
.advanced-ops {
display: flex;
align-items: center;
cursor: pointer;
font-size: $fs12;
color: $color-gray-30;
&:hover {
svg {
fill: $color-primary;
}
&:hover {
svg {
fill: $color-primary;
}
}
.advanced-ops-body {
}
.advanced-ops-body {
.input-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
.input-element {
width: 100%;
&::after {
content: attr(alt);
width: 100px;
}
}

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

@ -156,6 +156,53 @@
}
}
.title-actions {
align-items: center;
display: flex;
justify-content: center;
margin-left: auto;
.layout-btns {
display: flex;
align-items: center;
justify-content: end;
}
.remove-layout {
display: flex;
align-items: center;
justify-content: center;
height: 21px;
width: 21px;
padding: 4px;
svg {
height: 0.7rem;
width: 0.7rem;
}
}
button {
background-color: transparent;
border-radius: $br-small;
border: 1px solid transparent;
cursor: pointer;
color: $color-gray-20;
svg {
fill: $color-gray-20;
height: 0.7rem;
width: 0.7rem;
}
&.active {
color: $color-primary;
}
&:hover {
background-color: $color-primary;
color: $color-gray-60;
svg {
fill: $color-gray-60 !important;
}
}
}
}
.element-set-title-actions {
display: flex;
flex-direction: row;