From dc80d0687bbe4dc57a837e9891880ae48ec74543 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Fri, 10 Jan 2020 10:56:19 +0300 Subject: [PATCH] style(theme-shared): move modal styles to modal.component.scss and remove confirmation and toaster styles --- .../theme-basic/src/lib/constants/styles.ts | 6 - .../lib/components/modal/modal.component.scss | 25 ++++ .../lib/components/modal/modal.component.ts | 14 +- .../theme-shared/src/lib/constants/styles.ts | 130 ------------------ 4 files changed, 36 insertions(+), 139 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.scss diff --git a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts index 269fd0071a..24c3e84e42 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts +++ b/npm/ng-packs/packages/theme-basic/src/lib/constants/styles.ts @@ -48,12 +48,6 @@ export default ` .container > .card { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } -.abp-confirm .abp-confirm-footer { - background-color: #f4f4f7 !important; -} -.abp-confirm .ui-toast-message-content { - background-color: #fff !important; -} @media screen and (min-width: 768px) { .navbar .dropdown:hover > .dropdown-menu { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.scss new file mode 100644 index 0000000000..023830ceeb --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.scss @@ -0,0 +1,25 @@ +.modal { + &.show { + display: block !important; + } + + &-backdrop { + background-color: rgba(0, 0, 0, 0.6); + } + + &::-webkit-scrollbar { + width: 7px; + } + + &::-webkit-scrollbar-track { + background: #ddd; + } + + &::-webkit-scrollbar-thumb { + background: #8a8686; + } + + &-dialog { + z-index: 1050; + } +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts index f95e0093b9..c3bdc2fecb 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts @@ -24,6 +24,7 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl'; selector: 'abp-modal', templateUrl: './modal.component.html', animations: [fadeAnimation], + styleUrls: ['./modal.component.scss'], }) export class ModalComponent implements OnDestroy { @Input() @@ -115,7 +116,8 @@ export class ModalComponent implements OnDestroy { } const nodes = getFlatNodes( - ((node || this.modalContent.nativeElement).querySelector('#abp-modal-body') as HTMLElement).childNodes, + ((node || this.modalContent.nativeElement).querySelector('#abp-modal-body') as HTMLElement) + .childNodes, ); if (hasNgDirty(nodes)) { @@ -123,7 +125,10 @@ export class ModalComponent implements OnDestroy { this.isConfirmationOpen = true; this.confirmationService - .warn('AbpAccount::AreYouSureYouWantToCancelEditingWarningMessage', 'AbpAccount::AreYouSure') + .warn( + 'AbpAccount::AreYouSureYouWantToCancelEditingWarningMessage', + 'AbpAccount::AreYouSure', + ) .subscribe((status: Toaster.Status) => { this.isConfirmationOpen = false; if (status === Toaster.Status.confirm) { @@ -162,7 +167,10 @@ export class ModalComponent implements OnDestroy { function getFlatNodes(nodes: NodeList): HTMLElement[] { return Array.from(nodes).reduce( - (acc, val) => [...acc, ...(val.childNodes && val.childNodes.length ? getFlatNodes(val.childNodes) : [val])], + (acc, val) => [ + ...acc, + ...(val.childNodes && val.childNodes.length ? getFlatNodes(val.childNodes) : [val]), + ], [], ); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts index 24f7a9a8ea..4458117d16 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/constants/styles.ts @@ -41,30 +41,6 @@ export default ` background: #8a8686; } -.modal.show { - display: block !important; -} - -.modal-backdrop { - background-color: rgba(0, 0, 0, 0.6); -} - -.modal::-webkit-scrollbar { - width: 7px; -} - -.modal::-webkit-scrollbar-track { - background: #ddd; -} - -.modal::-webkit-scrollbar-thumb { - background: #8a8686; -} - -.modal-dialog { - z-index: 1050; -} - .abp-ellipsis-inline { display: inline-block; overflow: hidden; @@ -78,112 +54,6 @@ export default ` white-space: nowrap; } -.abp-toast .ui-toast-message { - box-sizing: border-box; - border: 2px solid transparent; - border-radius: 4px; - color: #1b1d29; -} - -.abp-toast .ui-toast-message-content { - padding: 10px; -} - -.abp-toast .ui-toast-message-content .ui-toast-icon { - top: 0; - left: 0; - padding: 10px; -} - -.abp-toast .ui-toast-summary { - margin: 0; - font-weight: 700; -} - -body abp-toast .ui-toast .ui-toast-message.ui-toast-message-error { - border: 2px solid #ba1659; - background-color: #f4f4f7; -} - -body abp-toast .ui-toast .ui-toast-message.ui-toast-message-error .ui-toast-message-content .ui-toast-icon { - color: #ba1659; -} - -body abp-toast .ui-toast .ui-toast-message.ui-toast-message-warn { - border: 2px solid #ed5d98; - background-color: #f4f4f7; -} - -body abp-toast .ui-toast .ui-toast-message.ui-toast-message-warn .ui-toast-message-content .ui-toast-icon { - color: #ed5d98; -} - -body abp-toast .ui-toast .ui-toast-message.ui-toast-message-success { - border: 2px solid #1c9174; - background-color: #f4f4f7; -} - -body abp-toast .ui-toast .ui-toast-message.ui-toast-message-success .ui-toast-message-content .ui-toast-icon { - color: #1c9174; -} - -body abp-toast .ui-toast .ui-toast-message.ui-toast-message-info { - border: 2px solid #fccb31; - background-color: #f4f4f7; -} - -body abp-toast .ui-toast .ui-toast-message.ui-toast-message-info .ui-toast-message-content .ui-toast-icon { - color: #fccb31; -} - -.abp-confirm .ui-toast-message { - box-sizing: border-box; - padding: 0px; - border:0 none; - border-radius: 4px; - background-color: transparent !important; - font-family: "Poppins", sans-serif; - text-align: center; -} - -.abp-confirm .ui-toast-message-content { - padding: 0px; -} - -.abp-confirm .abp-confirm-icon { - margin: 32px 50px 5px !important; - color: #f8bb86 !important; - font-size: 52px !important; -} - -.abp-confirm .ui-toast-close-icon { - display: none !important; -} - -.abp-confirm .abp-confirm-summary { - display: block !important; - margin-bottom: 13px !important; - padding: 13px 16px 0px !important; - font-weight: 600 !important; - font-size: 18px !important; -} - -.abp-confirm .abp-confirm-body { - display: inline-block !important; - padding: 0px 10px !important; -} - -.abp-confirm .abp-confirm-footer { - display: block; - margin-top: 30px; - padding: 16px; - text-align: right; -} - -.abp-confirm .abp-confirm-footer .btn { - margin-left: 10px !important; -} - .ui-widget-overlay { z-index: 1000; }