From c92ebbbbeeb4d9cc8d213dc8687ece9736ef4f80 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Fri, 9 Oct 2020 13:59:12 +0300
Subject: [PATCH] refactor(hs forms): move duplicated styles into mixin

---
 docs/app/@theme/styles/_hs-forms.scss         | 105 ++++++++++++++++++
 docs/app/@theme/styles/styles.scss            |   3 +
 .../download-form.component.scss              |  98 +---------------
 .../download-form/download-form.component.ts  |   4 +-
 .../premium-form/premium-form.component.scss  |  98 +---------------
 .../premium-form/premium-form.component.ts    |   4 +-
 6 files changed, 116 insertions(+), 196 deletions(-)
 create mode 100644 docs/app/@theme/styles/_hs-forms.scss

diff --git a/docs/app/@theme/styles/_hs-forms.scss b/docs/app/@theme/styles/_hs-forms.scss
new file mode 100644
index 00000000..beed45ac
--- /dev/null
+++ b/docs/app/@theme/styles/_hs-forms.scss
@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@mixin hs-custom-form() {
+  .hs-custom-form {
+    .modal-header {
+      display: none;
+    }
+
+    .modal-body {
+      padding-bottom: 0;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    input.hs-input {
+      width: 100%;
+      color: nb-theme(input-basic-text-color);
+      font-size: nb-theme(input-medium-text-font-size);
+      font-weight: nb-theme(input-medium-text-font-weight);
+      line-height: nb-theme(input-medium-text-line-height);
+      padding: nb-theme(input-medium-padding) !important;
+      border: nb-theme(input-border-width) nb-theme(input-border-style) nb-theme(input-basic-border-color);
+      border-radius: nb-theme(input-rectangle-border-radius);
+      background-color: nb-theme(input-basic-background-color);
+
+      &.hover {
+        background-color: nb-theme(input-basic-hover-background-color);
+        border-color: nb-theme(input-basic-hover-border-color);
+      }
+
+      &.invalid {
+        box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6);
+      }
+
+      &::placeholder {
+        color: nb-theme(input-basic-placeholder-text-color);
+        font-size: nb-theme(input-medium-placeholder-text-font-size);
+        font-weight: nb-theme(input-medium-placeholder-text-font-weight);
+        line-height: nb-theme(input-medium-placeholder-text-line-height);
+      }
+
+      &:focus {
+        outline: none;
+        background-color: nb-theme(input-basic-focus-background-color);
+        border-color: nb-theme(input-basic-focus-border-color);
+      }
+    }
+
+    .hs-richtext .modal-body {
+      padding: 0;
+      margin-bottom: 1rem;
+
+      p {
+        margin-bottom: 0;
+        text-align: left !important;
+        height: auto;
+      }
+    }
+
+    .hs-recaptcha {
+      margin-top: 1rem;
+    }
+
+    .hs-error-msgs {
+      list-style-type: none;
+      padding: 0;
+    }
+
+    .hs-form-required, .hs-error-msg {
+      margin-top: 0.5rem;
+      color: nb-theme(text-danger-color);
+    }
+
+    .hs_error_rollup {
+      display: none;
+    }
+
+    .hs-submit-btn {
+      font-family: nb-theme(font-family-primary);
+      border-radius: 3px;
+      border: none;
+      background-color: nb-theme(color-active-fg);
+      color: #ffffff;
+      padding: 1rem 2rem;
+      box-shadow: nb-theme(shadow-btn);
+      cursor: pointer;
+      text-transform: uppercase;
+
+      &:hover {
+        box-shadow: nb-theme(shadow-hover-green-btn);
+      }
+
+      &:active {
+        box-shadow: nb-theme(shadow-active-green-btn);
+      }
+    }
+  }
+}
diff --git a/docs/app/@theme/styles/styles.scss b/docs/app/@theme/styles/styles.scss
index f81dc20f..35f5b850 100644
--- a/docs/app/@theme/styles/styles.scss
+++ b/docs/app/@theme/styles/styles.scss
@@ -10,7 +10,10 @@
 @import '~@nebular/theme/styles/globals';
 @import '~@nebular/bootstrap/styles/globals';
 
+@import 'hs-forms';
+
 @include nb-install() {
   @include nb-theme-global();
   @include nb-bootstrap-global();
+  @include hs-custom-form();
 };
diff --git a/docs/app/shared/components/download-form/download-form.component.scss b/docs/app/shared/components/download-form/download-form.component.scss
index 8fc83cbc..8f5f85d5 100644
--- a/docs/app/shared/components/download-form/download-form.component.scss
+++ b/docs/app/shared/components/download-form/download-form.component.scss
@@ -25,101 +25,7 @@
     padding: 0;
   }
 
-  ::ng-deep .custom-form {
-    .modal-header {
-      display: none;
-    }
-
-    .modal-body {
-      padding-bottom: 0;
-    }
-
-    .actions {
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    input.hs-input {
-      width: 100%;
-      color: nb-theme(input-basic-text-color);
-      font-size: nb-theme(input-medium-text-font-size);
-      font-weight: nb-theme(input-medium-text-font-weight);
-      line-height: nb-theme(input-medium-text-line-height);
-      padding: nb-theme(input-medium-padding) !important;
-      border: nb-theme(input-border-width) nb-theme(input-border-style) nb-theme(input-basic-border-color);
-      border-radius: nb-theme(input-rectangle-border-radius);
-      background-color: nb-theme(input-basic-background-color);
-
-      &.hover {
-        background-color: nb-theme(input-basic-hover-background-color);
-        border-color: nb-theme(input-basic-hover-border-color);
-      }
-
-      &.invalid {
-        box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6);
-      }
-
-      &::placeholder {
-        color: nb-theme(input-basic-placeholder-text-color);
-        font-size: nb-theme(input-medium-placeholder-text-font-size);
-        font-weight: nb-theme(input-medium-placeholder-text-font-weight);
-        line-height: nb-theme(input-medium-placeholder-text-line-height);
-      }
-
-      &:focus {
-        outline: none;
-        background-color: nb-theme(input-basic-focus-background-color);
-        border-color: nb-theme(input-basic-focus-border-color);
-      }
-    }
-
-    .hs-richtext .modal-body {
-      padding: 0;
-      margin-bottom: 1rem;
-      p {
-        margin-bottom: 0;
-        text-align: left !important;
-        height: auto;
-      }
-    }
-
-    .hs-recaptcha {
-      margin-top: 1rem;
-    }
-
-    .hs-error-msgs {
-      list-style-type: none;
-      padding: 0;
-    }
-
-    .hs-form-required, .hs-error-msg {
-      margin-top: 0.5rem;
-      color: nb-theme(text-danger-color);
-    }
-
-    .hs_error_rollup {
-      display: none;
-    }
-
-    .btn {
-      margin-top: 2rem;
-      font-family: nb-theme(font-main), sans-serif;
-      border-radius: 3px;
-      border: none;
-      background-color: nb-theme(color-active-fg);
-      color: #ffffff;
-      padding: 1rem 2rem;
-      box-shadow: nb-theme(shadow-btn);
-      cursor: pointer;
-      text-transform: uppercase;
-
-      &:hover {
-        box-shadow: nb-theme(shadow-hover-green-btn);
-      }
-
-      &:active {
-        box-shadow: nb-theme(shadow-active-green-btn);
-      }
-    }
+  ::ng-deep .hs-custom-form .btn {
+    margin-top: 2rem;
   }
 }
diff --git a/docs/app/shared/components/download-form/download-form.component.ts b/docs/app/shared/components/download-form/download-form.component.ts
index f22cacc6..629663e6 100644
--- a/docs/app/shared/components/download-form/download-form.component.ts
+++ b/docs/app/shared/components/download-form/download-form.component.ts
@@ -22,9 +22,9 @@ export class DownloadFormComponent implements AfterViewInit {
       portalId: '2452262',
       formId: '93007d7b-5f11-4dd8-bcfd-f8b99d31f31e',
       target: '#hubspotForm',
-      submitButtonClass: 'btn',
+      submitButtonClass: 'hs-submit-btn',
       css: '',
-      cssClass: 'custom-form',
+      cssClass: 'hs-custom-form',
       redirectUrl: 'https://github.com/akveo/ngx-admin',
     });
   }
diff --git a/docs/app/shared/components/premium-form/premium-form.component.scss b/docs/app/shared/components/premium-form/premium-form.component.scss
index a1f31f7c..c489802c 100644
--- a/docs/app/shared/components/premium-form/premium-form.component.scss
+++ b/docs/app/shared/components/premium-form/premium-form.component.scss
@@ -25,101 +25,7 @@
     padding: 0;
   }
 
-  ::ng-deep .custom-form {
-    .modal-header {
-      display: none;
-    }
-
-    .modal-body {
-      padding-bottom: 0;
-    }
-
-    .actions {
-      display: flex;
-      justify-content: flex-end;
-    }
-
-    input.hs-input {
-      width: 100%;
-      color: nb-theme(input-basic-text-color);
-      font-size: nb-theme(input-medium-text-font-size);
-      font-weight: nb-theme(input-medium-text-font-weight);
-      line-height: nb-theme(input-medium-text-line-height);
-      padding: nb-theme(input-medium-padding) !important;
-      border: nb-theme(input-border-width) nb-theme(input-border-style) nb-theme(input-basic-border-color);
-      border-radius: nb-theme(input-rectangle-border-radius);
-      background-color: nb-theme(input-basic-background-color);
-
-      &.hover {
-        background-color: nb-theme(input-basic-hover-background-color);
-        border-color: nb-theme(input-basic-hover-border-color);
-      }
-
-      &.invalid {
-        box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6);
-      }
-
-      &::placeholder {
-        color: nb-theme(input-basic-placeholder-text-color);
-        font-size: nb-theme(input-medium-placeholder-text-font-size);
-        font-weight: nb-theme(input-medium-placeholder-text-font-weight);
-        line-height: nb-theme(input-medium-placeholder-text-line-height);
-      }
-
-      &:focus {
-        outline: none;
-        background-color: nb-theme(input-basic-focus-background-color);
-        border-color: nb-theme(input-basic-focus-border-color);
-      }
-    }
-
-    .hs-richtext .modal-body {
-      padding: 0;
-      margin-bottom: 1rem;
-      p {
-        margin-bottom: 0;
-        text-align: left !important;
-        height: auto;
-      }
-    }
-
-    .hs-recaptcha {
-      margin-top: 1rem;
-    }
-
-    .hs-error-msgs {
-      list-style-type: none;
-      padding: 0;
-    }
-
-    .hs-form-required, .hs-error-msg {
-      margin-top: 0.5rem;
-      color: nb-theme(text-danger-color);
-    }
-
-    .hs_error_rollup {
-      display: none;
-    }
-
-    .btn {
-      margin-top: 1rem;
-      font-family: nb-theme(font-main), sans-serif;
-      border-radius: 3px;
-      border: none;
-      background-color: nb-theme(color-active-fg);
-      color: #ffffff;
-      padding: 1rem 2rem;
-      box-shadow: nb-theme(shadow-btn);
-      cursor: pointer;
-      text-transform: uppercase;
-
-      &:hover {
-        box-shadow: nb-theme(shadow-hover-green-btn);
-      }
-
-      &:active {
-        box-shadow: nb-theme(shadow-active-green-btn);
-      }
-    }
+  ::ng-deep .hs-custom-form .btn {
+    margin-top: 1rem;
   }
 }
diff --git a/docs/app/shared/components/premium-form/premium-form.component.ts b/docs/app/shared/components/premium-form/premium-form.component.ts
index d55058fd..06a507c8 100644
--- a/docs/app/shared/components/premium-form/premium-form.component.ts
+++ b/docs/app/shared/components/premium-form/premium-form.component.ts
@@ -23,9 +23,9 @@ export class PremiumFormComponent implements AfterViewInit {
       portalId: '2452262',
       formId: 'b066428e-c41a-4dce-bbc2-5690cf084a8f',
       target: '#hubspotForm',
-      submitButtonClass: 'btn',
+      submitButtonClass: 'hs-submit-btn',
       css: '',
-      cssClass: 'custom-form',
+      cssClass: 'hs-custom-form',
       redirectUrl: 'https://github.com/akveo/ngx-admin',
     });
   }