Ninja Forms compatibility styles (#37)

Introduce Ninja Forms compatibility styles. Style response messages.
godaddy-wordpress · Mar 31, 2017 · f489908 · f489908
1 parent 5ce96a1
commit f489908
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 29 deletions.
diff --git a/.dev/sass/compat/ninja-forms.scss b/.dev/sass/compat/ninja-forms.scss
@@ -0,0 +1,9 @@
+.nf-response-msg,
+.widget-area .nf-response-msg {
+	font-weight: bold;
+
+	p:first-child {
+		font-style: italic;
+		font-weight: normal;
+	}
+}
diff --git a/.dev/sass/compat/woocommerce.scss b/.dev/sass/compat/woocommerce.scss
@@ -159,9 +159,21 @@
 	}
 }
 
+body.primer-woocommerce-l10n.woocommerce ul.products li.product .button,
+.woocommerce a.added_to_cart {
+	max-width: 100%;
+	white-space: normal;
+	text-align: center;
+	display: block;
+
+	@media #{$large-up} {
+		font-size: 0.75rem;
+	}
+
+}
+
 body.post-type-archive,
 body.single-product {
-	/* On Sale Badge */
 	span.onsale,
 	ul.products li.product .onsale {
 		padding: 2px 8px;

diff --git a/.dev/sass/components/_forms.scss b/.dev/sass/components/_forms.scss
@@ -1,3 +1,5 @@
+@import "../compat/ninja-forms.scss";
+
 fieldset {
 	background-color: transparent;
 	border: 0;

diff --git a/editor-style-rtl.css b/editor-style-rtl.css
@@ -287,6 +287,14 @@ blockquote {
 #content {
   font-size: 1.25em; }
 
+.nf-response-msg,
+.widget-area .nf-response-msg {
+  font-weight: bold; }
+  .nf-response-msg p:first-child,
+  .widget-area .nf-response-msg p:first-child {
+    font-style: italic;
+    font-weight: normal; }
+
 fieldset {
   background-color: transparent;
   border: 0;

diff --git a/editor-style.css b/editor-style.css
@@ -287,6 +287,14 @@ blockquote {
 #content {
   font-size: 1.25em; }
 
+.nf-response-msg,
+.widget-area .nf-response-msg {
+  font-weight: bold; }
+  .nf-response-msg p:first-child,
+  .widget-area .nf-response-msg p:first-child {
+    font-style: italic;
+    font-weight: normal; }
+
 fieldset {
   background-color: transparent;
   border: 0;

diff --git a/style-rtl.css b/style-rtl.css
@@ -715,6 +715,14 @@ input[type="reset"] {
   .comments-area .comment .comment-content {
     clear: both; }
 
+.nf-response-msg,
+.widget-area .nf-response-msg {
+  font-weight: bold; }
+  .nf-response-msg p:first-child,
+  .widget-area .nf-response-msg p:first-child {
+    font-style: italic;
+    font-weight: normal; }
+
 fieldset {
   background-color: transparent;
   border: 0;
@@ -1927,20 +1935,28 @@ body.no-max-width .main-navigation {
     .primer-wc-cart-menu:hover a {
       background: transparent; }
 
-body.post-type-archive,
-body.single-product {
-  /* On Sale Badge */ }
-  body.post-type-archive span.onsale,
-  body.post-type-archive ul.products li.product .onsale,
-  body.single-product span.onsale,
-  body.single-product ul.products li.product .onsale {
-    padding: 2px 8px;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    margin: 0;
-    min-height: auto;
-    min-width: auto;
-    line-height: inherit; }
+body.primer-woocommerce-l10n.woocommerce ul.products li.product .button, body.primer-woocommerce-l10n.woocommerce ul.products li.product .social-menu a, .social-menu body.primer-woocommerce-l10n.woocommerce ul.products li.product a,
+.woocommerce a.added_to_cart {
+  max-width: 100%;
+  white-space: normal;
+  text-align: center;
+  display: block; }
+  @media only screen and (min-width: 61.063em) {
+    body.primer-woocommerce-l10n.woocommerce ul.products li.product .button, body.primer-woocommerce-l10n.woocommerce ul.products li.product .social-menu a, .social-menu body.primer-woocommerce-l10n.woocommerce ul.products li.product a,
+    .woocommerce a.added_to_cart {
+      font-size: 0.75rem; } }
+
+body.post-type-archive span.onsale,
+body.post-type-archive ul.products li.product .onsale,
+body.single-product span.onsale,
+body.single-product ul.products li.product .onsale {
+  padding: 2px 8px;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+  margin: 0;
+  min-height: auto;
+  min-width: auto;
+  line-height: inherit; }
 
 body.single-product span.onsale {
   padding: 3px 18px;

diff --git a/style.css b/style.css
@@ -715,6 +715,14 @@ input[type="reset"] {
   .comments-area .comment .comment-content {
     clear: both; }
 
+.nf-response-msg,
+.widget-area .nf-response-msg {
+  font-weight: bold; }
+  .nf-response-msg p:first-child,
+  .widget-area .nf-response-msg p:first-child {
+    font-style: italic;
+    font-weight: normal; }
+
 fieldset {
   background-color: transparent;
   border: 0;
@@ -1927,20 +1935,28 @@ body.no-max-width .main-navigation {
     .primer-wc-cart-menu:hover a {
       background: transparent; }
 
-body.post-type-archive,
-body.single-product {
-  /* On Sale Badge */ }
-  body.post-type-archive span.onsale,
-  body.post-type-archive ul.products li.product .onsale,
-  body.single-product span.onsale,
-  body.single-product ul.products li.product .onsale {
-    padding: 2px 8px;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    margin: 0;
-    min-height: auto;
-    min-width: auto;
-    line-height: inherit; }
+body.primer-woocommerce-l10n.woocommerce ul.products li.product .button, body.primer-woocommerce-l10n.woocommerce ul.products li.product .social-menu a, .social-menu body.primer-woocommerce-l10n.woocommerce ul.products li.product a,
+.woocommerce a.added_to_cart {
+  max-width: 100%;
+  white-space: normal;
+  text-align: center;
+  display: block; }
+  @media only screen and (min-width: 61.063em) {
+    body.primer-woocommerce-l10n.woocommerce ul.products li.product .button, body.primer-woocommerce-l10n.woocommerce ul.products li.product .social-menu a, .social-menu body.primer-woocommerce-l10n.woocommerce ul.products li.product a,
+    .woocommerce a.added_to_cart {
+      font-size: 0.75rem; } }
+
+body.post-type-archive span.onsale,
+body.post-type-archive ul.products li.product .onsale,
+body.single-product span.onsale,
+body.single-product ul.products li.product .onsale {
+  padding: 2px 8px;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+  margin: 0;
+  min-height: auto;
+  min-width: auto;
+  line-height: inherit; }
 
 body.single-product span.onsale {
   padding: 3px 18px;