From 9be04f1ad5d11b0713066133c49a09edb3e005e4 Mon Sep 17 00:00:00 2001
From: Jonas Thelemann <e-mail@jonas-thelemann.de>
Date: Mon, 30 Jan 2023 00:41:14 +0100
Subject: [PATCH] feat(styles)!: use gap

BREAKING CHANGE:
- change padding, margins and gap for display flex
---
 src/runtime/components/CookieControl.vue |  6 +++---
 src/runtime/styles.css                   | 24 ++++++++++++------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/runtime/components/CookieControl.vue b/src/runtime/components/CookieControl.vue
index 2e70789b..c857b586 100644
--- a/src/runtime/components/CookieControl.vue
+++ b/src/runtime/components/CookieControl.vue
@@ -52,14 +52,14 @@
             v-text="localeStrings?.settingsUnsaved"
           />
           <div class="cookieControl__ModalContent">
-            <div>
+            <div class="cookieControl__ModalContentInner">
               <slot name="modal" />
               <button
                 class="cookieControl__ModalClose"
                 @click="isModalActive = false"
                 v-text="localeStrings?.close"
               />
-              <div v-for="cookieType in CookieType" :key="cookieType">
+              <template v-for="cookieType in CookieType" :key="cookieType">
                 <template v-if="moduleOptions.cookies[cookieType].length">
                   <h3
                     v-text="
@@ -128,7 +128,7 @@
                     </li>
                   </ul>
                 </template>
-              </div>
+              </template>
               <div class="cookieControl__ModalButtons">
                 <button
                   @click="
diff --git a/src/runtime/styles.css b/src/runtime/styles.css
index 0904cdf6..9da2213a 100644
--- a/src/runtime/styles.css
+++ b/src/runtime/styles.css
@@ -175,7 +175,6 @@
 }
 .cookieControl__Modal > div {
   font-size: initial;
-  padding-top: 80px;
 }
 .cookieControl__Modal button {
   color: var(--cookie-control-modalButtonColor);
@@ -203,7 +202,7 @@
 }
 .cookieControl__ModalContent h3 {
   font-size: 24px;
-  margin: 50px 0 25px;
+  margin: 15px 0px;
 }
 .cookieControl__ModalContent h3:first-of-type {
   margin-top: 0;
@@ -265,6 +264,11 @@
   transform: translate3d(0, -50%, 0);
   background-color: var(--cookie-control-checkboxInactiveCircleBackground);
 }
+.cookieControl__ModalContentInner {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
 .cookieControl__ModalInputWrapper {
   display: flex;
   align-items: flex-start;
@@ -278,17 +282,15 @@
   text-transform: none;
 }
 .cookieControl__ModalClose {
-  position: absolute;
+  align-self: flex-end;
   top: 20px;
   right: 20px;
 }
 .cookieControl__ModalButtons {
   display: flex;
-  margin-top: 80px;
-  align-items: flex-start;
-}
-.cookieControl__ModalButtons button + button {
-  margin-left: 20px;
+  margin-top: 40px;
+  align-items: stretch;
+  gap: 20px;
 }
 .cookieControl__ModalUnsaved {
   position: absolute;
@@ -335,7 +337,7 @@
     bottom: 0;
     max-width: none;
     max-height: 100%;
-    padding: 80px 20px 20px;
+    padding: 20px;
   }
   .cookieControl__BarButtons {
     width: 100%;
@@ -352,13 +354,11 @@
   .cookieControl__BarContainer,
   .cookieControl__ModalButtons {
     flex-direction: column;
+    gap: 0;
   }
   .cookieControl__ModalButtons button {
     width: 100%;
   }
-  .cookieControl__ModalButtons button + button {
-    margin: 10px 0 0;
-  }
 }
 .cookieControl__ControlButton {
   position: fixed;