_new-items.scss in katalyst-content-2.0.0

- old
+ new

@@ -1,34 +1,48 @@
 @use "icon" as *;
 
+// provide size for container queries
+#content--editor--item-frame {
+  container-type: inline-size;
+}
+
 .content--editor--new-items {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, calc((100% - 1rem) / 3));
+  grid-auto-rows: minmax(5rem, auto);
   gap: 0.5rem;
 
   [role="listitem"] {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    display: grid;
+    grid-template-rows: 1fr auto;
     text-align: center;
     transform: translate3d(0, 0, 0);
     cursor: grab;
     background: white;
-    box-shadow: rgb(0 0 0 / 25%) 0 1px 1px, rgb(0 0 0 / 31%) 0 0 2px;
-    min-height: 5rem;
-    padding: 1.5rem;
+    padding: 0.5rem;
+    white-space: nowrap;
+    border-radius: 0.5rem;
 
+    label {
+      font-weight: 400;
+      font-size: 0.8rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 0;
+    }
+
     &:hover {
       box-shadow: rgb(0 0 0 / 25%) 0 1px 2px, rgb(0 0 0 / 31%) 0 0 5px;
     }
 
     &::before {
+      display: block;
       @extend %icon;
-      width: 2.5rem;
-      height: 2.5rem;
+      width: 2rem;
+      height: 2rem;
       position: unset;
+      margin: 0 auto;
     }
 
     &[data-item-type="content"]:before {
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 49 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.9 0C2.28667 0 0 2.28667 0 4.9C0 6.86 1.30667 8.82008 3.26667 9.47341V39.5266C1.30667 40.1799 0 42.14 0 44.1C0 46.7133 2.28667 49 4.9 49C6.86 49 8.82 47.6933 9.47333 45.7333H39.5267C40.18 47.6933 42.14 49 44.1 49C46.7133 49 49 46.7133 49 44.1C49 42.14 47.6933 40.1799 45.7333 39.5266V9.47341C47.6933 8.82008 49 6.86 49 4.9C49 2.28667 46.7133 0 44.1 0C42.14 0 40.18 1.30667 39.5267 3.26667H9.47333C8.82 1.30667 7.18667 0 4.9 0ZM4.9 3.26667C5.88 3.26667 6.53333 3.92 6.53333 4.9C6.53333 5.88 5.88 6.53333 4.9 6.53333C3.92 6.53333 3.26667 5.88 3.26667 4.9C3.26667 3.92 3.92 3.26667 4.9 3.26667ZM44.1 3.26667C45.08 3.26667 45.7333 3.92 45.7333 4.9C45.7333 5.88 45.08 6.53333 44.1 6.53333C43.12 6.53333 42.4667 5.88 42.4667 4.9C42.4667 3.92 43.12 3.26667 44.1 3.26667ZM9.47333 6.53333H39.5267C40.18 7.84 41.16 9.14675 42.4667 9.47341V39.5266C41.16 40.1799 39.8533 41.16 39.5267 42.4667H9.47333C8.82 41.16 7.84 39.8533 6.53333 39.5266V9.47341C7.84 8.82008 8.82 7.84 9.47333 6.53333ZM4.9 42.4667C5.88 42.4667 6.53333 43.12 6.53333 44.1C6.53333 45.08 5.88 45.7333 4.9 45.7333C3.92 45.7333 3.26667 45.08 3.26667 44.1C3.26667 43.12 3.92 42.4667 4.9 42.4667ZM44.1 42.4667C45.08 42.4667 45.7333 43.12 45.7333 44.1C45.7333 45.08 45.08 45.7333 44.1 45.7333C43.12 45.7333 42.4667 45.08 42.4667 44.1C42.4667 43.12 43.12 42.4667 44.1 42.4667Z' /%3E%3Cpath d='M13 19.1667V11H35.8667V19.1667H32.6V14.2667H26.0667V33.8667H29.3333V37.1333H19.5333V33.8667H22.8V14.2667H16.2667V19.1667H13Z' /%3E%3C/svg%3E");
     }
@@ -50,7 +64,19 @@
     }
 
     &[data-item-type="aside"]:before {
       background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' fill='none' stroke='black' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='12' width='36' height='44' stroke-width='4' /%3E%3Crect x='42' y='12' width='16' height='44' stroke-width='4' /%3E%3C/svg%3E");
     }
+  }
+}
+
+@media (max-width: 75rem) {
+  .content--editor--new-items {
+    grid-template-columns: repeat(2, calc((100% - 0.5rem) / 2));
+  }
+}
+
+@media (max-width: 60rem) {
+  .content--editor--new-items {
+    grid-template-columns: 1fr;
   }
 }