Refactor: Enable new swap_buttons feature to proper button order by d…

…efault #CCM-51
lmc-eu · Dec 21, 2021 · cf2d3c4 · cf2d3c4
1 parent b547900
commit cf2d3c4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/src/LmcCookieConsentManager.ts b/src/LmcCookieConsentManager.ts
@@ -102,6 +102,7 @@ const LmcCookieConsentManager: CookieConsentManager = (serviceName, args) => {
  layout: VanillaCookieConsent.GuiConsentLayout.BAR, // box/cloud/bar
  position: VanillaCookieConsent.GuiConsentPosition.BOTTOM_CENTER, // bottom/middle/top + left/right/center
  transition: VanillaCookieConsent.Transition.SLIDE, // zoom/slide
+ swap_buttons: true,
  },
  },
  onAccept: (cookie: VanillaCookieConsent.Cookie<CookieConsentCategory>) => {

diff --git a/src/scss/_style.scss b/src/scss/_style.scss
@@ -77,7 +77,8 @@
 
 #cm .c_link,
 #s-c-bn,
-#s-cnt button + button {
+#s-cnt button + button,
+#c-bns.swap button:first-child {
  color: var(--lmcccm-p-link-text);
 
  &:hover {
@@ -119,8 +120,6 @@
 }
 
 #cm.bar #c-bns {
- display: flex;
- flex-flow: row-reverse;
  flex-shrink: 0;
  align-items: baseline;
  max-width: none;
@@ -152,26 +151,27 @@
  }
 
  #cm.bar #c-bns {
- flex-flow: column-reverse;
  align-self: stretch;
  }
-
- #cm.bar .c-bn:not(:last-child) {
- margin-top: tools.rem2em(tokens.$space-5);
- }
 }
 
 //
 // Buttons
 // =======
 
 .cc_div .c-bn {
+ flex: none;
  padding: tools.rem2em(tokens.$space-4) tools.rem2em(tokens.$space-7);
  border-radius: var(--lmcccm-p-btn-border-radius);
 }
 
-#c-bns button:first-child,
-#s-bns button:first-child {
+#cm .c-bn {
+ width: auto;
+ font-size: inherit;
+}
+
+#cm .c-bn:not(.c_link),
+#c-bns.swap button:last-child {
  font-weight: var(--lmcccm-p-btn-font-weight);
  text-transform: var(--lmcccm-p-btn-text-transform);
  border: var(--lmcccm-p-btn-border-width) var(--lmcccm-p-btn-border-style) var(--lmcccm-p-btn-primary-border);
@@ -188,15 +188,9 @@
  }
 }
 
-#cm .c-bn {
- width: auto;
- font-size: inherit;
-}
-
 #cm .c-bn.c_link {
  padding-right: 0;
  padding-left: 0;
- margin-right: tools.rem2em(tokens.$space-7);
  font-weight: inherit;
  font-size: inherit;
  text-decoration: var(--lmcccm-p-link-text-decoration);
@@ -206,6 +200,11 @@
  }
 }
 
+#c-bns button + button,
+#s-cnt button + button {
+ margin-left: tools.rem2em(tokens.$space-7);
+}
+
 @media screen and (max-width: settings.$breakpoint-tablet-down) {
  #cm .c-bn,
  .cc_div .c-bn {
@@ -214,6 +213,7 @@
 
  #c-bns button + button,
  #s-cnt button + button {
- margin-top: 0;
+ margin-top: tools.rem2em(tokens.$space-5);
+ margin-left: 0;
  }
 }