From e1d31772e093899b61a215802cae8e39cce184c0 Mon Sep 17 00:00:00 2001
From: jackahl <kahl@kitconcept.com>
Date: Tue, 5 Dec 2023 15:32:17 +0100
Subject: [PATCH] added styling

---
 src/components/Logo/View.jsx |  1 +
 src/index.js                 |  5 +++
 src/theme/main.less          | 82 ++++++++++++++++++++++++++++++++++++
 3 files changed, 88 insertions(+)
 create mode 100644 src/theme/main.less

diff --git a/src/components/Logo/View.jsx b/src/components/Logo/View.jsx
index a81cf9e..6e4a606 100644
--- a/src/components/Logo/View.jsx
+++ b/src/components/Logo/View.jsx
@@ -29,6 +29,7 @@ const View = (props) => {
         <img
           src={flattenToAppURL(`${logo["@id"]}/@@images/image/teaser`)}
           alt="placeholder"
+          className="logo-image"
         />
       )}
       <h3 className="logo-heading headline">{data.heading}</h3>
diff --git a/src/index.js b/src/index.js
index f46baf3..48f9a1b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,8 @@ import { LogoBlockSchema } from "./components/Logo/schema";
 
 import freedomSVG from "@plone/volto/icons/freedom.svg";
 
+import "./theme/main.less";
+
 const applyConfig = (config) => {
   config.blocks.blocksConfig.logo = {
     id: "logo",
@@ -28,6 +30,9 @@ const applyConfig = (config) => {
     allowedBlocks: ["logo"],
     sidebarTab: 1,
   };
+  config.blocks.blocksConfig.logos.blocksConfig = {
+    ...config.blocks.blocksConfig,
+  };
   console.log(config);
   return config;
 };
diff --git a/src/theme/main.less b/src/theme/main.less
new file mode 100644
index 0000000..228b2bc
--- /dev/null
+++ b/src/theme/main.less
@@ -0,0 +1,82 @@
+@blueArctic: #e2f1fd;
+@greySnow: #f3f5f7;
+@greySmoke: #e4e8ec;
+
+.block.logos {
+  .grid-items [data-rbd-droppable-id] {
+    display: flex;
+  }
+
+  // general spacing in the Row block wrapper
+  & [class^="block-editor-"],
+  [class^="block-editor-"].contained {
+    padding-right: 1rem;
+    padding-left: 1rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .one.grid-items [class^="block-editor-"] {
+    width: 100%;
+  }
+
+  .two.grid-items [class^="block-editor-"] {
+    width: 50%;
+  }
+
+  .three.grid-items [class^="block-editor-"] {
+    width: 33.33333333%;
+  }
+
+  .four.grid-items [class^="block-editor-"] {
+    width: 25%;
+  }
+
+  .ui.basic.button.remove-block-button {
+    position: absolute;
+    z-index: 3;
+    top: 6px;
+    right: 2px;
+    display: none;
+
+    .icon {
+      height: 18px !important;
+    }
+
+    .circled {
+      padding: 8px;
+      border: 1px solid @greySmoke;
+      background: @greySnow;
+
+      &:hover {
+        background-color: @greySmoke;
+      }
+    }
+
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+
+  [class^="block-editor-"].selected .ui.basic.button.remove-block-button,
+  [class^="block-editor-"]:hover .ui.basic.button.remove-block-button {
+    display: block;
+  }
+
+  .cell-wrapper {
+    position: relative;
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .logo-image {
+    width: 100%;
+  }
+}
+
+.block.logo {
+  .logo-image {
+    width: 100%;
+    object-position: top left;
+  }
+}