Merge pull request #761 from adobecom/MWPW-155784

Project Unity: New Block for UI
adobecom · Aug 19, 2024 · 47faa3b · 47faa3b
2 parents f6db8b9 + 35029da
commit 47faa3b
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 248 deletions.
diff --git a/acrobat/blocks/acom-widget/acom-widget.css b/acrobat/blocks/acom-widget/acom-widget.css
@@ -5,61 +5,34 @@
   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 {
+.acom-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;
+  margin-bottom: 24px;
+  display: inline-flex;
 }
 
-.widget-big-icon {
+.acom-big-icon {
   width: 500px;
   height: 500px;
   background-image: url('../../img/icons/chat-pdf.svg');
@@ -82,9 +55,7 @@
   display: inline-block;
 }
 
-.widget-footer {
-  padding-top: 24px;
-  margin-top: 70px;
+.acom-footer {
   text-align: center;
 }
 
@@ -105,88 +76,80 @@
   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;
-}
 
-.pBar-wrapper {
-  height: 8px;
-  width: 550px;
-  background: #d5d5d5;
-  margin-left: 40px;
-  margin-top: 20px;
-  border-radius: 25px;
-}
+/* new css */
 
+.acom-widget {
+  padding: 19px;
+}
 
-.pBar {
+.acom-wrapper {
+  max-width: 1349px;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 20px;
+  border-style: dashed;
+  border-color: #d5d5d5;
+  border-width: 3px;
   position: relative;
-  height: 8px;
-  width: 0%;
-  background: #6338ee;
-  border-radius: 25px;
-  max-width: 100% !important;
+  background-color: #fff;
+  padding: 25px;
+  min-height: 560px;
 }
 
-.widget-heading {
-  font-size: 72px;
-  font-weight: 600;
-  line-height: 130%;
-  margin: 0;
-  padding: 0 0 0 40px;
-  text-align: left;
+.acom-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.widget-copy {
+.acom-col {
+  flex: 100%;
+}
+
+.acom-copy {
+  text-align: left;
   font-size: 22px;
   font-weight: 400;
   line-height: 33px;
-  text-align: left;
-  padding: 0 0 0 40px;
-  width: 466px;
-}
-
-.widget-wrapper {
-  margin: 5px;
-  background-color: #fff;
-  min-height: 443px;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  border: 2px dashed #d5d5d5;
-  border-radius: 20px;
+  color: #2c2c2c;
+  margin: revert;
 }
 
-.action-area {
-  margin-top: 32px;
-  padding: 0 40px;
-}
-
-.widget-button {
-  border-radius: 24px;
-  font-size: 18px;
-  font-weight: 700;
-  height: 48px;
-  padding: 12px 24px;
-  white-space: nowrap;
-  background-color: #0265dc;
+.acom-cta {
+  background: #1473e6;
+  border-radius: 8px;
+  padding: 11px 27px;
   color: white;
-  border-color: transparent;
+  white-space: nowrap;
+  font-weight: 700;
+  display: inline-flex;
 }
 
-.widget-button:hover {
+.acom-cta:hover {
   text-decoration: none;
   color: #fff;
   background: #0054b6;
 }
+
+.acom-heading {
+  color: #2c2c2c;
+  text-align: left;
+  font-weight: 600;
+  font-size: 44px;
+  margin: revert;
+  margin-bottom: 16px;
+}
+
+@media screen and (min-width: 768px) {
+  .acom-container {
+    padding-left: 133px;
+    padding-right: 133px;
+  }
+
+}