Merge pull request #783 from adobecom/2436

DC MILO 0.2436
adobecom · Sep 3, 2024 · 9dd4d07 · 9dd4d07
2 parents dc4672f + db7032a
commit 9dd4d07
Show file tree

Hide file tree

Showing 17 changed files with 1,029 additions and 92 deletions.
diff --git a/acrobat/blocks/acom-widget/acom-widget.css b/acrobat/blocks/acom-widget/acom-widget.css
@@ -3,6 +3,7 @@
   background-color: #fff;
   background-image: radial-gradient(at 1% 0,#ff715b 0,transparent 50%),radial-gradient(at 48% 89%,#fff 0,transparent 50%),radial-gradient(at 100% 88%,#fff 0,transparent 50%),radial-gradient(at 1% 85%,#fff 0,transparent 50%),radial-gradient(at 93% 33%,#6d51f9 0,transparent 50%),radial-gradient(at 44% 55%,#c8e1fd 0,transparent 50%),radial-gradient(at 11% 22%,#fe4b38 0,transparent 50%),radial-gradient(at 88% 4%,#ea0f00 0,transparent 50%),radial-gradient(at 45% 0,#fe4b38 0,transparent 50%);
   min-height: 623px;
+  padding: 19px;
 }
 
 .acom-widget.ready {
@@ -75,10 +76,6 @@
 
 /* new css */
 
-.acom-widget {
-  padding: 19px;
-}
-
 .acom-wrapper {
   width: 75%;
   max-width: 75%;
@@ -101,6 +98,7 @@
 }
 
 .acom-row {
+  width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -110,6 +108,11 @@
   flex: 100%;
 }
 
+.acom-col.right {
+  display: flex;
+  justify-content: center;
+}
+
 .acom-copy {
   text-align: left;
   font-size: 22px;
@@ -130,6 +133,7 @@
   justify-content: center;
   align-items: center;
   width: 30%;
+  min-width: 130px;
 }
 
 .acom-cta::before {
@@ -152,14 +156,61 @@
 }
 
 .acom-error {
-  background: #d8120b;
-  width: fit-content;
-  border-radius: 8px;
+  background: #D31510;
+  min-width: 506px;
   padding: 11px 27px;
   color: white;
   white-space: nowrap;
-  font-weight: 700;
   display: flex;
+  position: absolute;
+  top: 90px;
+  justify-content: center;
+  transform: translate(-50%, -50%);
+  left: 50%;
+  font-size: 14px;
+  font-weight: 400; 
+}
+
+.acom-errorText {
+  margin: 0 25px;
+  width: 100%;
+}
+
+.acom-errorBtn {
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.acom-errorBtn::after {
+  content: '';
+  background-image: url('/acrobat/img/icons/ui/close.svg');
+  background-repeat: no-repeat;
+  background-size: 45px 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+}
+
+.acom-errorIcon {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.acom-errorIcon::after {
+  content: '';
+  background-image: url('/acrobat/img/icons/ui/alert.svg');
+  background-repeat: no-repeat;
+  background-size: 65px 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
 }
 
 .acom-heading {
@@ -194,4 +245,69 @@
     padding: 48px 0 48px 48px;
   }
 
+  .acom-mobile-cta {
+    /* display: none; */
+    background: #1473e6;
+    border-radius: 8px;
+    padding: 11px 27px;
+    color: white;
+    white-space: nowrap;
+    font-weight: 700;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 30%;
+  }
 }
+
+/* responsive design */
+
+@media screen and (max-width: 768px) {
+  .acom-wrapper {
+    width: unset;
+    max-width: unset;
+    padding: 20px;
+  }
+
+  .acom-row {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .acom-icon {
+    height: 40px;
+    min-width: 40px;
+  }
+
+  .acom-title {
+    font-size: 27px;
+  }
+
+  .acom-heading {
+    font-size: 36px;
+  }
+
+  .acom-copy {
+    font-size: 18px;
+  }
+
+  .acom-cta {
+    /* display: none; */
+  }
+
+  .acom-mobile-cta {
+    display: flex;
+    top: 324px;
+    left: 40px;
+    padding: 11px 25px;
+    border-radius: 47px;
+    background: #1473e6;
+    color: white;
+    white-space: nowrap;
+    font-weight: 700;
+    justify-content: center;
+    align-items: center;
+    width: 30%;
+  }
+}
+