add ecard recipient list styles

4site-interactive-studios · Apr 2, 2024 · b91ef24 · b91ef24
1 parent 9f9fcd2
commit b91ef24
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 9 deletions.
diff --git a/dist/engrid.css b/dist/engrid.css
@@ -19,8 +19,8 @@
  *
  *  ENGRID PAGE TEMPLATE ASSETS
  *
- *  Date: Tuesday, March 12, 2024 @ 21:30:46 ET
- *  By: fernando
+ *  Date: Tuesday, April 2, 2024 @ 11:21:26 ET
+ *  By: michael
  *  ENGrid styles: v0.17.19
  *  ENGrid scripts: v0.17.20
  *
@@ -8799,6 +8799,48 @@ body[data-engrid-debug]:before{
   position:static;
   width:auto;
 }
+[data-engrid-theme=engrid-ran3] .en__ecardrecipients__list{
+  background-color:var(--engrid__body-main_background-color);
+}
+[data-engrid-theme=engrid-ran3] .en__ecardrecipients__list:has(>.en__ecardrecipients__recipient):before{
+  content:"Recipients:";
+}
+[data-engrid-theme=engrid-ran3] .en__ecardrecipients__recipient{
+  align-items:center;
+  background-color:var(--engrid__body-main_background-color);
+  padding:10px 0;
+}
+[data-engrid-theme=engrid-ran3] .en__ecardrecipients__recipient input.ecardrecipient__email,[data-engrid-theme=engrid-ran3] .en__ecardrecipients__recipient input.ecardrecipient__name{
+  background-color:var(--engrid__body-main_background-color);
+}
+@media screen and (min-width:600px){
+  [data-engrid-theme=engrid-ran3] .en__ecardrecipients__recipient input.ecardrecipient__email,[data-engrid-theme=engrid-ran3] .en__ecardrecipients__recipient input.ecardrecipient__name{
+    width:47.5% !important;
+  }
+}
+[data-engrid-theme=engrid-ran3] .ecardrecipient__remove button{
+  background:var(--error__color);
+  color:#fff;
+  margin:0;
+}
+[data-engrid-theme=engrid-ran3] .ecardrecipient__remove button:hover{
+  color:#fff;
+}
+@media screen and (max-width:600px){
+  [data-engrid-theme=engrid-ran3] .en__ecardrecipients__recipient{
+    align-items:flex-start;
+    flex-direction:column;
+    position:relative;
+  }
+  [data-engrid-theme=engrid-ran3] .en__ecardrecipients__recipient input{
+    width:calc(100% - 50px) !important;
+  }
+  [data-engrid-theme=engrid-ran3] .en__ecardrecipients__recipient .ecardrecipient__remove{
+    position:absolute;
+    right:15px;
+    top:calc(50% - 15px);
+  }
+}
 [data-engrid-theme=engrid-ran3] .engrid-welcome-back{
   margin-bottom:-50px;
   position:relative;

diff --git a/dist/engrid.js b/dist/engrid.js
@@ -17,8 +17,8 @@
  *
  *  ENGRID PAGE TEMPLATE ASSETS
  *
- *  Date: Tuesday, March 12, 2024 @ 21:30:46 ET
- *  By: fernando
+ *  Date: Tuesday, April 2, 2024 @ 11:21:26 ET
+ *  By: michael
  *  ENGrid styles: v0.17.19
  *  ENGrid scripts: v0.17.20
  *

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
@@ -1431,6 +1431,57 @@
     padding: 12px !important;
   }
 
+  .en__ecardrecipients__list {
+    background-color: var(--engrid__body-main_background-color);
+  }
+
+  .en__ecardrecipients__list:has(> .en__ecardrecipients__recipient):before {
+    content: "Recipients:";
+  }
+
+  .en__ecardrecipients__recipient {
+    align-items: center;
+    padding: 10px 0px;
+    background-color: var(--engrid__body-main_background-color);
+
+    input.ecardrecipient__name,
+    input.ecardrecipient__email {
+      background-color: var(--engrid__body-main_background-color);
+      @media screen and (min-width: 600px) {
+        width: 47.5% !important;
+      }
+    }
+  }
+
+  .ecardrecipient__remove button {
+    margin: 0;
+
+    background: var(--error__color);
+    color: white;
+
+    &:hover {
+      color: white;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .en__ecardrecipients__recipient {
+      position: relative;
+      flex-direction: column;
+      align-items: flex-start;
+
+      input {
+        width: calc(100% - 50px) !important;
+      }
+
+      .ecardrecipient__remove {
+        position: absolute;
+        right: 15px;
+        top: calc(50% - 15px);
+      }
+    }
+  }
+
   .engrid-welcome-back {
     margin-bottom: -50px;
     position: relative;