feat: update button styles on marketo form

newrelic · Sep 26, 2020 · d60bde5 · d60bde5
1 parent 5a670d5
commit d60bde5
Showing 1 changed file with 19 additions and 30 deletions.
diff --git a/src/components/MarketoForm/marketo.scss b/src/components/MarketoForm/marketo.scss
@@ -5,9 +5,8 @@
   box-shadow: none;
   padding-left: 0;
   padding-right: 0;
-  padding-bottom: 40px;
-  width: 100% !important;
-  font-family: 'Open Sans' !important;
+  padding-bottom: 0;
+  width: 100%;
 }
 .mktoForm div {
   float: none;
@@ -123,40 +122,30 @@
   display: none;
 }
 body .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
-  display: inline-block;
   font-weight: 600;
-  text-align: center;
-  vertical-align: middle;
+  font-size: 0.875rem;
   cursor: pointer;
   white-space: nowrap;
-  border: 1px solid var(--color-teal-400);
+  border: 1px solid transparent;
   color: var(--color-white);
-  text-decoration: none;
-  text-shadow: none;
-  background-color: var(--color-teal-400) !important;
-  background-image: url('') !important;
   margin: 0;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
-  -webkit-font-smoothing: antialiased;
-  padding: 16px 32px;
-  font-size: 12px;
-  line-height: 2;
-  border-radius: 0;
-}
-@media (min-width: 991px) {
-  body .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton {
-    padding: 16px 32px;
-    font-size: 16px;
-    line-height: 1.625;
-    border-radius: 0;
-  }
-  body .mktoForm .mktoButtonRow .mktoButtonWrap .mktoButton:hover {
-    background-color: var(--color-teal-300) !important;
-    border: 1px solid var(--color-teal-300);
+  padding: 0.5rem 1rem;
+  line-height: 1;
+  border-radius: 3px;
+  transition: all 0.15s ease-out;
+
+  color: var(--color-white);
+  background-color: var(--color-brand-600);
+
+  &:hover {
+    color: var(--color-white);
+    background-color: var(--color-brand-500);
+    transform: translate3d(0, -1px, 0);
   }
 }
 @media (max-width: 767px) {