diff --git a/docs/articles/concept-3rd-party.md b/docs/articles/concept-3rd-party.md index bae5378c12..e0f3ec1049 100644 --- a/docs/articles/concept-3rd-party.md +++ b/docs/articles/concept-3rd-party.md @@ -3,32 +3,11 @@ Currently Nebular Theme system is integrated with the following 3rd party modules: - ng2-smart-table; -- angular2-toaster. It means that we've created style overriding for these modules, so that you can change component's look & feel using Nebular theme variables. For example, if you change the `color-primary` variable, components using this color will be changed accordingly. - -Or that's how we described variables for the `angular2-toaster` module: - -```scss - ... - toaster-bg: color-primary, - toaster-fg-default: color-inverse, - toaster-btn-close-bg: transparent, - toaster-btn-close-fg: toaster-fg-default, - toaster-shadow: shadow, - - toaster-fg: color-white, - toaster-success: color-success, - toaster-info: color-info, - toaster-warning: color-warning, - toaster-wait: color-primary, - toaster-error: color-danger, - ... - -``` -
+
## Related Articles diff --git a/src/framework/theme/components/toastr/_toast.component.theme.scss b/src/framework/theme/components/toastr/_toast.component.theme.scss index 401012815b..9ac703ce69 100644 --- a/src/framework/theme/components/toastr/_toast.component.theme.scss +++ b/src/framework/theme/components/toastr/_toast.component.theme.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@mixin nb-toaster-theme() { +@mixin nb-toast-theme() { nb-toast { background-color: nb-theme(toastr-bg); padding: nb-theme(toastr-padding); diff --git a/src/framework/theme/styles/global/_components.scss b/src/framework/theme/styles/global/_components.scss index 8d032af01c..6157a0e9d6 100644 --- a/src/framework/theme/styles/global/_components.scss +++ b/src/framework/theme/styles/global/_components.scss @@ -66,7 +66,7 @@ @include nb-popover-theme(); @include nb-context-menu-theme(); @include nb-select-theme(); - @include nb-toaster-theme(); + @include nb-toast-theme(); @include nb-tooltip-theme(); @include nb-window-theme(); } diff --git a/src/framework/theme/styles/global/_overrides.scss b/src/framework/theme/styles/global/_overrides.scss index a8a2333395..8604353176 100644 --- a/src/framework/theme/styles/global/_overrides.scss +++ b/src/framework/theme/styles/global/_overrides.scss @@ -6,7 +6,6 @@ @import 'normalize.scss'; @import 'components/tree.theme'; -@import 'components/toaster.theme'; @import 'maps/leaflet.theme'; @import 'tables/smart-table.theme'; @@ -17,5 +16,4 @@ @include nb-components-tree-theme(); @include nb-maps-leaflet-theme(); @include nb-tables-smart-table-theme(); - @include nb-components-toaster-theme(); } diff --git a/src/framework/theme/styles/global/components/_toaster.theme.scss b/src/framework/theme/styles/global/components/_toaster.theme.scss deleted file mode 100644 index 5f138d3685..0000000000 --- a/src/framework/theme/styles/global/components/_toaster.theme.scss +++ /dev/null @@ -1,90 +0,0 @@ -/** - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ - -@mixin nb-components-toaster-theme() { - - .toast-close-button { - position: absolute; - @include nb-ltr(right, 0.15rem); - @include nb-rtl(left, 0.15rem); - top: 0.2rem; - opacity: 1; - background-color: nb-theme(toaster-btn-close-bg); - border-radius: 3px; - font-size: 1.5rem; - color: nb-theme(toaster-fg-default); - text-shadow: none; - button { - padding: 5px; - } - &:hover, - &:focus { - opacity: 1; - outline: none; - } - } - .toast { - color: nb-theme(toaster-fg-default) !important; - background-color: nb-theme(toaster-bg); - box-shadow: none !important; - opacity: 0.9 !important; - &:hover { - box-shadow: nb-theme(toaster-shadow); - opacity: 1 !important; - } - } - // have to use id selector for specifity - /* stylelint-disable-next-line selector-max-id */ - #toast-container > div.toast { - @include nb-rtl(padding-left, 15px); - @include nb-rtl(padding-right, 50px); - } - .toaster-icon { - @include nb-rtl(right, 0); - @include nb-rtl(background-position-x, 0); - } - .toast-success { - background-color: nb-theme(toaster-success); - color: nb-theme(toaster-fg) !important; - .toast-close-button { - color: nb-theme(toaster-fg); - } - } - .toast-error { - background-color: nb-theme(toaster-error); - color: nb-theme(toaster-fg) !important; - .toast-close-button { - color: nb-theme(toaster-fg); - } - } - .toast-info { - background-color: nb-theme(toaster-info); - color: nb-theme(toaster-fg-default) !important; - .toast-close-button { - color: nb-theme(toaster-fg); - } - } - .toast-wait { - background-color: yellow;//nb-theme(toastr-wait); - color: nb-theme(toaster-fg) !important; - .toast-close-button { - color: nb-theme(toaster-fg); - } - .icon-wait { - background-image: url('data:image/gif;base64,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') !important; - } - } - .toast-warning { - background-color: nb-theme(toaster-warning) !important; - color: nb-theme(toaster-fg); - .toast-close-button { - color: nb-theme(toaster-fg); - } - } - .toast-title { - word-wrap: break-word; - } -} diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss index a468a03bf1..8b59e0bafe 100644 --- a/src/framework/theme/styles/themes/_default.scss +++ b/src/framework/theme/styles/themes/_default.scss @@ -302,19 +302,6 @@ $theme: ( smart-table-paging-bg-active: color-success, smart-table-paging-hover: rgba(0, 0, 0, 0.05), - toaster-bg: color-primary, - toaster-fg-default: color-inverse, - toaster-btn-close-bg: transparent, - toaster-btn-close-fg: toaster-fg-default, - toaster-shadow: shadow, - - toaster-fg: color-white, - toaster-success: color-success, - toaster-info: color-info, - toaster-warning: color-warning, - toaster-wait: color-primary, - toaster-error: color-danger, - toastr-bg: color-bg, toastr-padding: 1.125rem, toastr-fg: color-fg-text,