Merge pull request #769 from adobecom/2434

DC MILO 0.2434
adobecom · Aug 20, 2024 · dc4672f · dc4672f
2 parents c23e7b1 + d8276ed
commit dc4672f
Show file tree

Hide file tree

Showing 34 changed files with 996 additions and 267 deletions.
diff --git a/acrobat/blocks/acom-widget/acom-widget.css b/acrobat/blocks/acom-widget/acom-widget.css
@@ -5,61 +5,29 @@
   min-height: 623px;
 }
 
-.demo-text {
-  text-align: center;
-  font-size: 8px;
-  margin: 0;
-  background: #7396ff;
-}
-
 .acom-widget.ready {
   color: initial;
 }
 
-.widget-sub {
-  margin: 0;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  max-width: 300px;
-  padding: 40px 0 0 40px;
-  font-size: 22px;
-  font-weight: 600;
-  line-height: 28px;
-}
-
-.widget-center {
-  border: 3px #e1e1e1 dashed;
-  width: calc(100% - 48px);
-  margin: auto;
-  height: 70%;
-  border-radius: 8px;
-}
-
-.widget-center.dragging {
-  border: 3px #7396ff solid;
-}
-
-.widget-legal {
+.acom-legal {
   margin-top: 30px;
   font-size: 14px;
   line-height: 20px;
   max-width: 527px;
   text-align: left;
   display: inline-block;
-
+  color: #2c2c2c;
 }
 
-.widget-icon {
-  width: 20px;
-  height: 20px;
+.acom-icon {
+  height: 56px;
+  min-width: 56px;
   background-image: url('../../img/icons/widget-icon.png');
   background-size: cover;
-  display: inline-block;
-  margin-right: 10px;
+  display: inline-flex;
 }
 
-.widget-big-icon {
+.acom-big-icon {
   width: 500px;
   height: 500px;
   background-image: url('../../img/icons/chat-pdf.svg');
@@ -82,9 +50,7 @@
   display: inline-block;
 }
 
-.widget-footer {
-  padding-top: 24px;
-  margin-top: 70px;
+.acom-footer {
   text-align: center;
 }
 
@@ -105,88 +71,127 @@
   transition: visibility 0s, opacity 0.5s linear;
 }
 
-.status-bar {
-  margin-left: 40px;
-  font-size: 16px;
-  color: #464646;
-  display: inline-flex;
-  max-width: 550px;
-  justify-content: space-between;
-}
 
-.status-bar.hide {
-  display: none;
+
+/* new css */
+
+.acom-widget {
+  padding: 19px;
 }
 
-.pBar-wrapper {
-  height: 8px;
-  width: 550px;
-  background: #d5d5d5;
-  margin-left: 40px;
-  margin-top: 20px;
-  border-radius: 25px;
+.acom-wrapper {
+  width: 75%;
+  max-width: 75%;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 20px;
+  border: 3px dashed #d5d5d5;
+  position: relative;
+  background-color: #fff;
+  min-height: 560px;
 }
 
+.acom-wrapper.dragging {
+  background-color: #ecf5ff;
+  border: 3px #0265dc solid;
+}
 
-.pBar {
-  position: relative;
-  height: 8px;
-  width: 0%;
-  background: #6338ee;
-  border-radius: 25px;
-  max-width: 100% !important;
+.acom-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.widget-heading {
-  font-size: 72px;
-  font-weight: 600;
-  line-height: 130%;
-  margin: 0;
-  padding: 0 0 0 40px;
-  text-align: left;
+.acom-col {
+  flex: 100%;
 }
 
-.widget-copy {
+.acom-copy {
+  text-align: left;
   font-size: 22px;
   font-weight: 400;
   line-height: 33px;
-  text-align: left;
-  padding: 0 0 0 40px;
-  width: 466px;
+  color: #2c2c2c;
+  margin: revert;
 }
 
-.widget-wrapper {
-  margin: 5px;
-  background-color: #fff;
-  min-height: 443px;
-  height: 100%;
-  width: 100%;
+.acom-cta {
+  background: #1473e6;
+  border-radius: 8px;
+  padding: 11px 27px;
+  color: white;
+  white-space: nowrap;
+  font-weight: 700;
   display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  border: 2px dashed #d5d5d5;
-  border-radius: 20px;
-}
-
-.action-area {
-  margin-top: 32px;
-  padding: 0 40px;
+  justify-content: center;
+  align-items: center;
+  width: 30%;
 }
 
-.widget-button {
-  border-radius: 24px;
-  font-size: 18px;
-  font-weight: 700;
-  height: 48px;
-  padding: 12px 24px;
-  white-space: nowrap;
-  background-color: #0265dc;
-  color: white;
-  border-color: transparent;
+.acom-cta::before {
+  content: '';
+  background-image: url('/acrobat/img/icons/upload-icon.svg');
+  background-repeat: no-repeat;
+  background-size: 32px 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  width: 32px;
+  height: 28px;
 }
 
-.widget-button:hover {
+.acom-cta:hover {
   text-decoration: none;
   color: #fff;
   background: #0054b6;
 }
+
+.acom-error {
+  background: #d8120b;
+  width: fit-content;
+  border-radius: 8px;
+  padding: 11px 27px;
+  color: white;
+  white-space: nowrap;
+  font-weight: 700;
+  display: flex;
+}
+
+.acom-heading {
+  color: #2c2c2c;
+  text-align: left;
+  font-weight: 600;
+  font-size: 44px;
+  margin: revert;
+  margin-bottom: 16px;
+}
+
+.acom-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.acom-title {
+  font-size: 30px;
+  font-weight: bold;
+  color: black;
+  margin-left: 15px;
+}
+
+@media screen and (min-width: 768px) {
+  .acom-container {
+    align-items: center;
+    display: flex;
+    flex: 1 1 55%;
+    flex-direction: row;
+    padding: 48px 0 48px 48px;
+  }
+
+}