From 3ddf61959288aeb5fca532ec16d34660bd77c70e Mon Sep 17 00:00:00 2001 From: KostyaDanovsky Date: Mon, 17 Jul 2017 19:43:25 +0300 Subject: [PATCH] fix(demo): fix button sizes, fix modals --- src/app/@theme/styles/global.scss | 12 +++ .../pages/dashboard/solar/solar.component.ts | 4 +- .../pages/dashboard/team/team.component.scss | 4 +- .../size-buttons/size-buttons.component.html | 81 +++++++++---------- .../size-buttons/size-buttons.component.scss | 6 ++ .../ui-features/icons/icons.component.html | 13 +-- .../ui-features/icons/icons.component.scss | 26 +++--- .../ui-features/icons/icons.component.ts | 2 +- .../modals/modal/modal.component.html | 15 +--- .../modals/modal/modal.component.ts | 25 ++++-- .../ui-features/modals/modals.component.scss | 9 +-- 11 files changed, 105 insertions(+), 92 deletions(-) diff --git a/src/app/@theme/styles/global.scss b/src/app/@theme/styles/global.scss index 67316dd5..02b909fd 100644 --- a/src/app/@theme/styles/global.scss +++ b/src/app/@theme/styles/global.scss @@ -7,6 +7,18 @@ nga-card nga-card-header + nga-card-body { padding-top: 0; } + + nga-card nga-card-body + nga-card-footer { + padding-top: 0; + } + + .modal-content .modal-header + .modal-body { + padding-top: 0; + } + + .modal-content .modal-body + .modal-footer { + padding-top: 0; + } } //global styles for the whole application diff --git a/src/app/pages/dashboard/solar/solar.component.ts b/src/app/pages/dashboard/solar/solar.component.ts index d6d1b862..b28d17c3 100644 --- a/src/app/pages/dashboard/solar/solar.component.ts +++ b/src/app/pages/dashboard/solar/solar.component.ts @@ -47,9 +47,7 @@ export class SolarComponent { position: 'center', formatter: '{d}%', textStyle: { - fontSize: '20', - fontWeight: 'bold', - color: 'red', + fontSize: '22', fontFamily: 'Exo', }, }, diff --git a/src/app/pages/dashboard/team/team.component.scss b/src/app/pages/dashboard/team/team.component.scss index ae634364..2aacf1e7 100644 --- a/src/app/pages/dashboard/team/team.component.scss +++ b/src/app/pages/dashboard/team/team.component.scss @@ -39,12 +39,14 @@ .team-subtitle { margin-bottom: 1rem; - color: nga-theme(color-fg-hint); + color: nga-theme(color-fg); + font-weight: nga-theme(font-weight-light); } .team-bio { text-align: justify; color: nga-theme(color-fg-text); + font-weight: nga-theme(font-weight-light); } } diff --git a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html index 972a1485..2fd39d97 100644 --- a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html +++ b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.html @@ -1,50 +1,49 @@ Button Sizes + -
-
-
- Rectangle Button -
-
- 1.25rem 1.75rem -
-
- -
+
+
+ Large Button
-
-
- Medium Button -
-
- 1rem 1.5rem -
-
- -
+
+ 0.875rem 1.75rem
-
-
- Small Button -
-
- 0.875rem 1.5rem -
-
- -
+
+
-
-
- Tiny Button -
-
- 0.625rem 1.25rem -
-
- -
+
+
+
+ Medium Button +
+
+ 0.75rem 1.5rem +
+
+ +
+
+
+
+ Small Button +
+
+ 0.675rem 1.5rem +
+
+ +
+
+
+
+ Tiny Button +
+
+ 0.5rem 1.25rem +
+
+
diff --git a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss index 347c1d58..b60c0e77 100644 --- a/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss +++ b/src/app/pages/ui-features/buttons/size-buttons/size-buttons.component.scss @@ -2,6 +2,12 @@ @import '~@akveo/nga-theme/styles/global/bootstrap/buttons'; @include nga-install-component() { + + .size-container { + display: inline-block; + margin: 0 1rem 1rem 0; + } + .subheader { margin-bottom: 1rem; color: nga-theme(color-fg-heading); diff --git a/src/app/pages/ui-features/icons/icons.component.html b/src/app/pages/ui-features/icons/icons.component.html index b14c1009..9a1b98c5 100644 --- a/src/app/pages/ui-features/icons/icons.component.html +++ b/src/app/pages/ui-features/icons/icons.component.html @@ -1,27 +1,30 @@
-
+
Ionicons -
+
See all ionicons icons
-
+ +
Font awesome icons -
+
- See all Font Awesome icons + + See all Font Awesome icons +
diff --git a/src/app/pages/ui-features/icons/icons.component.scss b/src/app/pages/ui-features/icons/icons.component.scss index 0046b004..7c7d07df 100644 --- a/src/app/pages/ui-features/icons/icons.component.scss +++ b/src/app/pages/ui-features/icons/icons.component.scss @@ -1,16 +1,18 @@ +.icon { + display: inline-block; + width: 4rem; + padding: 1.25rem 0; + text-align: center; + font-size: 1.25rem; +} + :host { - display: block; + nga-card-header, nga-card-body { + padding-bottom: 0; + } - nga-card { - nga-card-body { - .icon { - float: left; - text-align: center; - } - } - - nga-card-footer { - text-align: right; - } + nga-card-footer { + text-align: right; + padding-top: 0; } } diff --git a/src/app/pages/ui-features/icons/icons.component.ts b/src/app/pages/ui-features/icons/icons.component.ts index a1e5e3f7..7e5e85b5 100644 --- a/src/app/pages/ui-features/icons/icons.component.ts +++ b/src/app/pages/ui-features/icons/icons.component.ts @@ -1,4 +1,4 @@ -import { Component, Pipe, PipeTransform } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'ngx-icons', diff --git a/src/app/pages/ui-features/modals/modal/modal.component.html b/src/app/pages/ui-features/modals/modal/modal.component.html index dde05d39..8b137891 100644 --- a/src/app/pages/ui-features/modals/modal/modal.component.html +++ b/src/app/pages/ui-features/modals/modal/modal.component.html @@ -1,14 +1 @@ -
-
-

{{ modalHeader }}

- -
-
- {{ modalContent }} -
-
- -
-
+ diff --git a/src/app/pages/ui-features/modals/modal/modal.component.ts b/src/app/pages/ui-features/modals/modal/modal.component.ts index d0042352..617409ec 100644 --- a/src/app/pages/ui-features/modals/modal/modal.component.ts +++ b/src/app/pages/ui-features/modals/modal/modal.component.ts @@ -3,22 +3,31 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; @Component({ selector: 'ngx-modal', - templateUrl: './modal.component.html', + template: ` +
+ {{ modalHeader }} + +
+
+ {{ modalContent }} +
+
+ +
+ `, }) export class ModalComponent { modalHeader: string; - modalContent: string = `Lorem ipsum dolor sit amet, - consectetuer adipiscing elit, sed diam nonummy - nibh euismod tincidunt ut laoreet dolore magna aliquam - erat volutpat. Ut wisi enim ad minim veniam, quis - nostrud exerci tation ullamcorper suscipit lobortis - nisl ut aliquip ex ea commodo consequat.`; + modalContent: string = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy + nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis + nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`; constructor(private activeModal: NgbActiveModal) { } closeModal() { this.activeModal.close(); } - } diff --git a/src/app/pages/ui-features/modals/modals.component.scss b/src/app/pages/ui-features/modals/modals.component.scss index c71a34ee..85575e4d 100644 --- a/src/app/pages/ui-features/modals/modals.component.scss +++ b/src/app/pages/ui-features/modals/modals.component.scss @@ -1,9 +1,4 @@ -:host { - display: block; - nga-card-body { - button { - margin-right: 10px; - } - } +button { + margin-right: 0.75rem; }