Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(hs forms): move duplicated styles into mixin

Browse source
This commit is contained in:
Sergey Andrievskiy 2020-10-09 13:59:12 +03:00
parent 44f7227412
commit c92ebbbbee
6 changed files with 116 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

105
docs/app/@theme/styles/_hs-forms.scss Normal file
View file

@ -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);
}
}
}
}

3
docs/app/@theme/styles/styles.scss
View file

@ -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();
};

98
docs/app/shared/components/download-form/download-form.component.scss
View file

@ -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;
}
}

4
docs/app/shared/components/download-form/download-form.component.ts
View file

@ -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',
});
}

98
docs/app/shared/components/premium-form/premium-form.component.scss
View file

@ -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;
}
}

4
docs/app/shared/components/premium-form/premium-form.component.ts
View file

@ -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',
});
}