ecard styling

4site-interactive-studios · Feb 29, 2024 · 2b4aa1f · 2b4aa1f
1 parent c3e7c5a
commit 2b4aa1f
Show file tree

Hide file tree

Showing 5 changed files with 241 additions and 30 deletions.
diff --git a/dist/engrid.css b/dist/engrid.css
@@ -19,10 +19,10 @@
  *
  *  ENGRID PAGE TEMPLATE ASSETS
  *
- *  Date: Wednesday, February 28, 2024 @ 07:37:38 ET
+ *  Date: Thursday, February 29, 2024 @ 06:40:54 ET
  *  By: michael
- *  ENGrid styles: v0.17.9
- *  ENGrid scripts: v0.17.10
+ *  ENGrid styles: v0.17.16
+ *  ENGrid scripts: v0.17.16
  *
  *  Created by 4Site Studios
  *  Come work with us or join our team, we would love to hear from you
@@ -450,13 +450,13 @@ template{
 }
 
 .en__additional__amount,.en__additional__label{
-  padding:.625rem;
+  padding:0;
 }
 
 .en__additional__input{
-  border:1px solid #bfbfbf;
+  border:var(--input_border-width) solid var(--input_border-color);
   border-radius:var(--input_border-radius);
-  margin-right:.75rem;
+  margin-right:0;
   padding:.6rem 0;
   width:4rem;
 }
@@ -466,7 +466,7 @@ template{
 }
 
 .en__additional__code{
-  border:1px solid #bfbfbf;
+  border:var(--input_border-width) solid var(--input_border-color);
   border-radius:var(--input_border-radius);
   padding:.6rem 0;
   text-align:center;
@@ -3968,10 +3968,19 @@ body:not[data-engrid-show-ecard-options] .show-if-ecard{
   border-color:var(--error__color);
 }
 
+[data-engrid-theme]{
+  --ticket_selector-top-offset:-4px;
+}
+
 .en__additional__amount,.en__additional__label,.en__ticket__currency,.en__ticket__name,.en__ticket__price{
   font-size:inherit;
 }
 
+.en__ticket__selector{
+  position:relative;
+  top:var(--ticket_selector-top-offset);
+}
+
 .en__additional__amount,.en__ticket__field--cost{
   width:auto;
 }
@@ -3980,6 +3989,10 @@ body:not[data-engrid-show-ecard-options] .show-if-ecard{
   display:inline;
 }
 
+.en__additional__input{
+  margin-right:.25rem;
+}
+
 .en__additional__promo{
   display:flex;
   flex-wrap:wrap;
@@ -3994,6 +4007,22 @@ body:not[data-engrid-show-ecard-options] .show-if-ecard{
   background-color:initial;
 }
 
+.en__ticket__minus{
+  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAGlJREFUWEftlcENwCAMAzHLJzu3qlF4oapfcB9mAR9HgtHEB+L8ZgAbsAEbsAFExLV+xwBIsgPoJLcbKoD73QfAzD0DkJnPVyGduH3llgEqG1EP8Icn0A6hfA2VAzi3wAA2YAM2YANqAwPwPy7Boa/oUQAAAABJRU5ErkJggg==);
+  background-position:right .25rem center;
+  margin-left:2rem;
+}
+
+.en__ticket__minus,.en__ticket__plus{
+  background-size:16px;
+  width:calc(16px + .25rem);
+}
+
+.en__ticket__plus{
+  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAMBJREFUWEftllEKAyEMRB1pe2ZzguTMbTElRWGRsiVQ1y7E76jjc8yI5BzMrHtTiAieJV3FtnAICAJBIAgEgZ8TYObHtncDUFXNALKqulu1JwesFsz8HCcB732PESAi9ZPqI07fCezGqxept96uYK2Af7iCtSZc/gy9pvnmmfgTBoHpBHrfGFu1hZgZupSSPcZ2p52F1xhWbfOqqomILlMFiMh9jOsW4RVALaXcpgpojQvb/0IXkFJSIrqGgFMReAHAxsrBRHWuKgAAAABJRU5ErkJggg==);
+  background-position:left .25rem center;
+}
+
 .en__ticket__minus:focus,.en__ticket__minus:hover,.en__ticket__plus:focus,.en__ticket__plus:hover{
   background-color:#fff;
 }
@@ -4094,6 +4123,164 @@ button.en__eventOccurrence__select{
 button.en__eventOccurrence__select>label{
   font-family:var(--button_font-family);
 }
+
+.en__tickets{
+  display:block;
+}
+
+.en__ticket{
+  border-bottom:1px solid #bfbfbf;
+  display:grid;
+  gap:1em;
+  grid-auto-flow:column;
+  grid-template-areas:"en__ticket__field--info en__ticket__field--cost en__ticket__field--quantity";
+  grid-template-columns:1fr minmax(5ch, max-content) min-content;
+  grid-template-rows:1fr;
+  margin-bottom:1rem;
+  padding-bottom:1rem;
+}
+
+.en__ticket__field--info{
+  grid-area:en__ticket__field--info;
+  justify-self:start;
+  padding:0;
+}
+
+.en__ticket__field--cost{
+  grid-area:en__ticket__field--cost;
+  justify-self:center;
+  padding:0;
+}
+
+.en__ticket__field--quantity{
+  grid-area:en__ticket__field--quantity;
+  justify-self:end;
+  padding:0;
+}
+
+.en__additional__amount,.en__ticket__field--cost{
+  width:max-content;
+}
+
+.en__ticket__field{
+  border-bottom:none;
+}
+
+.en__ticket__selector{
+  display:grid;
+  gap:0 0;
+  grid-template-areas:"en__ticket__minus en__ticket__quantity en__ticket__plus" "en__ticket__remaining en__ticket__remaining en__ticket__remaining";
+  grid-template-columns:auto 1fr auto;
+  grid-template-rows:auto auto;
+  margin-left:auto;
+  width:min-content;
+}
+
+.en__ticket__minus{
+  grid-area:en__ticket__minus;
+  justify-self:end;
+}
+
+.en__ticket__plus{
+  grid-area:en__ticket__plus;
+  justify-self:start;
+}
+
+.en__ticket__remaining{
+  grid-area:en__ticket__remaining;
+}
+
+.en__ticket__quantity{
+  align-self:center;
+  grid-area:en__ticket__quantity;
+  justify-self:center;
+}
+
+.en__ticket__name{
+  word-break:normal;
+}
+
+.en__additional{
+  display:grid;
+  gap:1em;
+  grid-auto-flow:column;
+  grid-template-areas:"en__additional__label en__additional__amount en__additional__promo";
+  grid-template-columns:minmax(5ch, max-content) min-content auto;
+  grid-template-rows:1fr;
+  margin-bottom:1rem;
+  padding-bottom:1rem;
+}
+
+.en__additional__label{
+  align-self:center;
+  grid-area:en__additional__label;
+  justify-self:start;
+}
+
+.en__additional__amount{
+  grid-area:en__additional__amount;
+  justify-self:center;
+}
+
+.en__additional__promo{
+  grid-area:en__additional__promo;
+  justify-self:end;
+}
+
+@media screen and (max-width:600px){
+  .en__ticket{
+    display:flex;
+    flex-direction:column;
+    gap:1ch;
+    margin-bottom:2rem;
+    padding-bottom:2rem;
+  }
+
+  .en__ticket__desc,.en__ticket__field--cost,.en__ticket__name{
+    text-align:center;
+  }
+
+  .en__ticket__field--cost{
+    width:100%;
+  }
+
+  .en__ticket__selector{
+    margin-right:auto;
+  }
+
+  .en__ticket__remaining{
+    justify-self:center;
+    padding-top:.5rem;
+  }
+
+  .en__additional{
+    display:flex;
+    flex-direction:column;
+    gap:1ch;
+    margin-bottom:2rem;
+    padding-bottom:2rem;
+  }
+
+  .en__additional__amount,.en__additional__promo{
+    align-self:center;
+  }
+
+  .en__additional__promo{
+    flex-direction:column;
+  }
+
+  .en__additional__promo:before{
+    content:"Promo Code";
+    display:block;
+    font-weight:700;
+    margin-bottom:1ch;
+    margin-top:1rem;
+  }
+
+  .en__ticket__plus{
+    margin-right:2rem;
+  }
+}
 [data-engrid-errors=fancy] .en__field__error{
   background-color:var(--error__color);
   border-radius:var(--input_border-radius);
@@ -4663,7 +4850,6 @@ div[id^=nb-field-],div[id^=nb-field-] div.nb-feedback{
 div[id^=nb-field-] div.nb-feedback{
   display:block !important;
   font-family:HarmoniaSansStd !important;
-  font-size:1.125em !important;
   font-size:.75rem !important;
   font-stretch:normal !important;
   font-style:normal !important;
@@ -4748,7 +4934,6 @@ div[id^=nb-field-].nb-success input{
 [data-engrid-theme] .en__pg .en__pg__body{
   align-items:center;
   background-color:var(--premium__item_background-color);
-  border-radius:var(--fields_border-radius);
   border-radius:var(--premium__border-radius);
   display:grid;
   gap:0 max(var(--fields_spacing-inline), .5rem);
@@ -5303,14 +5488,20 @@ body:not(#en__pagebuilder):not([data-engrid-debug]):not([data-engrid-merge-tags-
   --exit-intent__button_padding:var(--button_padding);
   --exit-intent__button_padding-bottom:var(--submit__button_padding-bottom);
   --exit-intent__button_padding-top:var(--submit__button_padding-top);
-  --exit-intent__button_background-color:var(--submit__button_background-color);
+  --exit-intent__button_background-color:var(
+    --submit__button_background-color
+  );
   --exit-intent__button_color:var(--submit__button_color);
   --exit-intent__button_border-radius:var(--submit__button_border-radius);
   --exit-intent__button_border-color:var(--submit__button_border-color);
   --exit-intent__button_border-width:var(--submit__button_border-width);
-  --exit-intent__button_background-color_hover:var(--submit__button_background-color_hover);
+  --exit-intent__button_background-color_hover:var(
+    --submit__button_background-color_hover
+  );
   --exit-intent__button_color_hover:var(--submit__button_color_hover);
-  --exit-intent__button_border-color_hover:var(--submit__button_border-color_hover);
+  --exit-intent__button_border-color_hover:var(
+    --submit__button_border-color_hover
+  );
 }
 
 .ExitIntent__button:hover{
@@ -7675,6 +7866,13 @@ body[data-engrid-debug]:before{
 [data-engrid-theme=engrid-ran3] .content-footer{
   grid-column:bc;
 }
+[data-engrid-theme=engrid-ran3]:not(#en__pagebuilder) .content-footer{
+  z-index:3;
+}
+[data-engrid-theme=engrid-ran3] .en__ecarditems__prevwrap{
+  height:inherit;
+  width:800px;
+}
 [data-engrid-theme=engrid-ran3] .tippy-box[data-theme~=RAN]{
   background-color:var(--engrid__body_background-color);
   border-radius:0;

diff --git a/dist/engrid.js b/dist/engrid.js
@@ -17,10 +17,10 @@
  *
  *  ENGRID PAGE TEMPLATE ASSETS
  *
- *  Date: Wednesday, February 28, 2024 @ 07:37:38 ET
+ *  Date: Thursday, February 29, 2024 @ 06:40:54 ET
  *  By: michael
- *  ENGrid styles: v0.17.9
- *  ENGrid scripts: v0.17.10
+ *  ENGrid styles: v0.17.16
+ *  ENGrid scripts: v0.17.16
  *
  *  Created by 4Site Studios
  *  Come work with us or join our team, we would love to hear from you
@@ -13002,7 +13002,7 @@ class UpsellLightbox {
     this.options = Object.assign(Object.assign({}, UpsellOptionsDefaults), options); //Disable for "applepay" via Vantiv payment method. Adding it to the array like this so it persists
     //even if the client provides custom options.
 
-    this.options.disablePaymentMethods.push('applepay');
+    this.options.disablePaymentMethods.push("applepay");
 
     if (!this.shouldRun()) {
       this.logger.log("Upsell script should NOT run"); // If we're not on a Donation Page, get out
@@ -18321,14 +18321,12 @@ class EventTickets {
       };
       let ticketAmountAsCurrency = Intl.NumberFormat(undefined, formatterOptions).format(Number(ticketAmountElement.innerText));
 
-      if (ticketAmountAsCurrency.slice(-3) === '.00') {
+      if (ticketAmountAsCurrency.slice(-3) === ".00") {
         ticketAmountAsCurrency = ticketAmountAsCurrency.slice(0, -3);
       }
 
       ticketAmountElement.innerText = ticketAmountAsCurrency;
     }
-
-    ;
   }
 
 }
@@ -20817,7 +20815,7 @@ class EcardToTarget {
 
 }
 ;// CONCATENATED MODULE: ../engrid-scripts/packages/common/dist/version.js
-const AppVersion = "0.17.14";
+const AppVersion = "0.17.16";
 ;// CONCATENATED MODULE: ../engrid-scripts/packages/common/dist/index.js
  // Runs first so it can change the DOM markup before any markup dependent code fires
 

diff --git a/dist/engrid.min.css b/dist/engrid.min.css
diff --git a/dist/engrid.min.js b/dist/engrid.min.js
diff --git a/src/sass/themes/ran3.scss b/src/sass/themes/ran3.scss
@@ -193,6 +193,15 @@
     grid-column: bc;
   }
 
+  &:not(#en__pagebuilder) .content-footer {
+    z-index: 3;
+  }
+
+  .en__ecarditems__prevwrap {
+    height: inherit;
+    width: 800px;
+  }
+
   .tippy-box[data-theme~="RAN"] {
     background-color: var(--engrid__body_background-color);
     color: #000;