✨ Resizable color palette

frontend/resources/styles/main/partials/color-bullet.scss

@@ -5,30 +5,26 @@
 // Copyright (c) UXBOX Labs SL
 
 .color-cell {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: 1fr auto;
+  height: 100%;
+  justify-items: center;
+  width: 65px;
+
   .color-bullet {
-    // Creates strange artifacts
     border: 2px solid $color-gray-60;
-    // box-shadow: 0 0 0 2px $color-gray-60;
-    border-radius: 50%;
+    position: relative;
+    width: var(--bullet-size);
+    height: var(--bullet-size);
 
     &:hover {
       border-color: $color-primary;
     }
   }
 
-  &.cell-big .color-bullet {
-    width: 50px;
-    height: 50px;
-  }
-
-  &.cell-small .color-bullet {
-    width: 40px;
-    height: 40px;
-  }
-
-  .color-bullet.color-big {
-    width: 50px;
-    height: 50px;
+  & > * {
+    overflow: hidden;
   }
 }
 
@@ -38,10 +34,10 @@
   }
 }
 
+
 ul.palette-menu .color-bullet {
   width: 20px;
   height: 20px;
-  border-radius: 12px;
   border: 1px solid $color-gray-10;
   margin-right: 5px;
   background-size: 8px;
@@ -67,14 +63,12 @@ ul.palette-menu .color-bullet {
   grid-area: color;
   width: 20px;
   height: 20px;
-  border-radius: 12px;
   border: 1px solid $color-gray-10;
   background-size: 8px;
 }
 
 .asset-section .asset-list-item .color-bullet {
   border: 1px solid $color-gray-20;
-  border-radius: 10px;
   height: 20px;
   margin-right: $size-1;
   width: 20px;
@@ -91,38 +85,29 @@ ul.palette-menu .color-bullet {
 .color-bullet {
   display: flex;
   flex-direction: row;
-  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=")
-    left center;
-  background-color: $color-white;
+  border-radius: 50%;
 
-  & > * {
+  & .color-bullet-wrapper {
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+    background-color: $color-white;
+    clip-path: circle(50%);
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    width: 100%;
+  }
+
+  &.is-gradient {
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAADFJREFUOE9jZGBgEAFifOANPknGUQMYhkkYEEgG+NMJKAwIAbwJbdQABnBCIgRoG4gAIF8IsXB/Rs4AAAAASUVORK5CYII=") left center;
+    background-color: $color-white;
+  }
+
+  & .color-bullet-wrapper > * {
     width: 100%;
     height: 100%;
   }
 }
 
-.color-bullet.is-library-color .color-bullet-left,
-.selected-colors .color-bullet .color-bullet-left {
-  border-radius: 10px 0 0 10px;
-}
-
-.color-bullet.is-library-color .color-bullet-right,
-.selected-colors .color-bullet .color-bullet-right {
-  border-radius: 0 10px 10px 0;
-}
-
-.color-palette .color-bullet .color-bullet-left {
-  border-radius: 25px 0 0 25px;
-}
-
-.color-palette .color-bullet .color-bullet-right {
-  border-radius: 0 25px 25px 0;
-}
-
-.color-data .color-bullet.is-library-color {
-  border-radius: 50%;
-}
-
 .color-data .color-bullet.multiple {
   background: transparent;
 
@@ -133,7 +118,7 @@ ul.palette-menu .color-bullet {
 
 .color-data .color-bullet {
   border: 1px solid $color-gray-30;
-  border-radius: $br-small;
+  border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -144,10 +129,6 @@ ul.palette-menu .color-bullet {
   margin: 5px 4px 0 0;
   width: 20px;
 
-  &.color-name {
-    border-radius: 10px;
-  }
-
   &.palette-th {
     align-items: center;
     border: 1px solid $color-gray-30;
@@ -198,3 +179,11 @@ ul.palette-menu .color-bullet {
     fill: $color-black;
   }
 }
+
+.color-data .color-bullet.is-not-library-color {
+  border-radius: $br-small;
+
+  & .color-bullet-wrapper {
+    clip-path: none;
+  }
+}

frontend/resources/styles/main/partials/color-palette.scss

@@ -122,6 +122,7 @@
   overflow: hidden;
   width: 100%;
   padding: 0.25rem;
+  height: 100%;
 
   &.size-small {
     height: 3.5rem;
@@ -135,6 +136,7 @@
   transition: all 0.6s ease;
   width: 100%;
   scroll-behavior: smooth;
+  height: 100%;
 }
 
 .color-cell {
@@ -145,24 +147,21 @@
   flex-shrink: 0;
   position: relative;
 
-  &.cell-big {
-    flex-basis: 66px;
-  }
-
-  &.cell-small {
-    flex-basis: 52px;
-  }
-
   .color-text {
     color: $color-gray-20;
     font-size: $fs12;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    width: 66px;
+    width: 65px;
     text-align: center;
     margin-top: 0.25rem;
+
+    .no-text & {
+      display: none;
+    }
   }
+
   &.current {
     .color-text {
       color: $color-gray-50;

frontend/resources/styles/main/partials/sidebar-assets.scss

@@ -231,15 +231,23 @@
 
     .asset-grid {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-template-columns: repeat(4, 1fr);
       grid-auto-rows: 6vh;
       column-gap: 0.5rem;
       row-gap: 0.5rem;
 
       &.big {
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(2, 1fr);
         grid-auto-rows: 10vh;
 
+        .three-row & {
+          grid-template-columns: repeat(3, 1fr);
+        }
+
+        .four-row & {
+          grid-template-columns: repeat(4, 1fr);
+        }
+
         .grid-cell {
           padding: $size-1;
 

frontend/resources/styles/main/partials/sidebar-layers.scss

@@ -207,6 +207,11 @@ span.element-name {
   margin-left: auto;
   position: relative;
   width: 32px;
+  right: 20px;
+
+  &.is-parent {
+    right: 0;
+  }
 
   svg {
     height: 13px;
@@ -242,7 +247,7 @@ span.element-name {
 }
 
 .toggle-content {
-  margin-left: auto;
+  margin-left: 8px;
   width: 12px;
 
   svg {