From a25f6152d3b7d1017b951cf5d3b2c311ee537cd9 Mon Sep 17 00:00:00 2001 From: Nikita Poltoratsky Date: Wed, 12 Sep 2018 15:03:55 +0300 Subject: [PATCH] refactor(theme): separate bootstrap styles into @nebular/bootstrap (#707) Closes #230 BREAKING CHANGE: All bootstrap override styles were moved from the @nebular/theme package to the new @nebular/bootstrap package. If you don't need bootstrap support you can simply no use this package. @nebular/theme package introduced a dependency of normalize.css. @nebular/auth package now depends on @nebular/bootstrap (temporary). How To Update: - install Nebular Bootstrap `npm i @nebular/bootstrap` - then add it into your `styles.scss` ```scss @import '~@nebular/bootstrap/styles/globals'; // ... @include nb-install() { // ... @include nb-bootstrap-global(); } ``` --- angular.json | 3 +- docs/app/@theme/styles/styles.scss | 9 +-- docs/app/@theme/styles/themes.scss | 4 +- docs/articles/bootstrap-integration.md | 63 ++++++++++++++++ docs/articles/concept-3rd-party.md | 3 +- docs/articles/index.md | 3 +- docs/articles/install-into-existing.md | 9 +-- docs/structure.ts | 11 +++ package-lock.json | 6 +- package.json | 2 +- scripts/gulp/tasks/bump-versions.ts | 14 ++++ src/framework/auth/package.json | 1 + src/framework/bootstrap/package.json | 27 +++++++ .../styles}/_button-group.scss | 2 +- .../styles}/_buttons.scss | 10 +-- .../styles}/_custom-forms.scss | 0 .../styles}/_default-buttons.scss | 0 .../styles}/_default-form-control.scss | 0 .../styles}/_dropdowns.scss | 2 +- .../styles}/_forms.scss | 8 +- .../styles/_globals.scss} | 19 +++-- .../styles}/_hero-buttons.scss | 0 .../styles}/_icon-buttons.scss | 0 .../styles}/_input-group.scss | 2 +- .../styles}/_layout.scss | 0 .../styles}/_modals.scss | 2 +- .../styles}/_outline-buttons.scss | 2 +- .../styles}/_shape-buttons.scss | 6 +- .../styles}/_size-buttons.scss | 0 .../styles}/_size-form-control.scss | 0 .../bootstrap/styles/prebuilt/corporate.scss | 14 ++++ .../bootstrap/styles/prebuilt/cosmic.scss | 14 ++++ .../bootstrap/styles/prebuilt/default.scss | 14 ++++ .../components/button/_button-shapes.scss | 6 +- .../components/button/_button-sizes.scss | 7 ++ .../layout/_layout.component.theme.scss | 3 - .../_route-tabset.component.theme.scss | 2 - .../tabset/_tabset.component.theme.scss | 2 - src/framework/theme/package.json | 6 +- src/framework/theme/styles/_globals.scss | 1 + .../theme/styles/global/_breakpoints.scss | 74 +++++++++++++++++++ .../theme/styles/global/_normalize.scss | 8 ++ .../theme/styles/global/_overrides.scss | 4 +- .../styles/global/bootstrap/_breakpoints.scss | 37 ---------- .../styles/global/typography/_typography.scss | 7 ++ src/playground/styles/styles.scss | 2 + src/playground/styles/themes.scss | 3 - 47 files changed, 304 insertions(+), 108 deletions(-) create mode 100644 docs/articles/bootstrap-integration.md create mode 100644 src/framework/bootstrap/package.json rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_button-group.scss (99%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_buttons.scss (86%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_custom-forms.scss (100%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_default-buttons.scss (100%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_default-form-control.scss (100%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_dropdowns.scss (99%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_forms.scss (97%) rename src/framework/{theme/styles/global/bootstrap/_bootstrap.theme.scss => bootstrap/styles/_globals.scss} (71%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_hero-buttons.scss (100%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_icon-buttons.scss (100%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_input-group.scss (98%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_layout.scss (100%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_modals.scss (97%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_outline-buttons.scss (99%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_shape-buttons.scss (69%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_size-buttons.scss (100%) rename src/framework/{theme/styles/global/bootstrap => bootstrap/styles}/_size-form-control.scss (100%) create mode 100644 src/framework/bootstrap/styles/prebuilt/corporate.scss create mode 100644 src/framework/bootstrap/styles/prebuilt/cosmic.scss create mode 100644 src/framework/bootstrap/styles/prebuilt/default.scss create mode 100644 src/framework/theme/styles/global/_breakpoints.scss create mode 100644 src/framework/theme/styles/global/_normalize.scss delete mode 100644 src/framework/theme/styles/global/bootstrap/_breakpoints.scss diff --git a/angular.json b/angular.json index 263d1c7696..74e542b05a 100644 --- a/angular.json +++ b/angular.json @@ -265,7 +265,7 @@ "docs/google46533d2e7a851062.html" ], "styles": [ - "node_modules/bootstrap/scss/bootstrap-reboot.scss", + "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/docsearch.js/dist/cdn/docsearch.min.css", "node_modules/highlight.js/styles/dracula.css", "node_modules/nebular-icons/scss/nebular-icons.scss", @@ -322,7 +322,6 @@ "scripts": [ ], "styles": [ - "node_modules/bootstrap/scss/bootstrap-reboot.scss", "node_modules/highlight.js/styles/dracula.css", "node_modules/nebular-icons/scss/nebular-icons.scss", "docs/app/@theme/styles/styles.scss" diff --git a/docs/app/@theme/styles/styles.scss b/docs/app/@theme/styles/styles.scss index 2f02ed3ce0..5fe412de0e 100644 --- a/docs/app/@theme/styles/styles.scss +++ b/docs/app/@theme/styles/styles.scss @@ -3,13 +3,10 @@ @import 'small-social'; @import 'feather'; -// TODO refactor after bootstrap removal +@import '../../../../src/framework/theme/styles/global/normalize'; @import '../../../../src/framework/theme/styles/global/components'; @import '../../../../src/framework/theme/styles/global/typography/typography'; -@import '../../../../src/framework/theme/styles/global/bootstrap/buttons'; -@import '~bootstrap/scss/functions'; -@import '~bootstrap/scss/variables'; -@import '~bootstrap/scss/mixins'; +@import '../../../../src/framework/bootstrap/styles/globals'; @include nb-install-global() { @include nb-layout-theme(); @@ -18,9 +15,9 @@ @include nb-menu-theme(); @include nb-actions-theme(); @include nb-search-theme(); + @include nb-bootstrap-global(); @include nb-typography(); - @include nb-b-buttons-theme(); @include nbd-common(); }; diff --git a/docs/app/@theme/styles/themes.scss b/docs/app/@theme/styles/themes.scss index 19a9c4697d..5850d34af1 100644 --- a/docs/app/@theme/styles/themes.scss +++ b/docs/app/@theme/styles/themes.scss @@ -1,8 +1,6 @@ @import '../../../../src/framework/theme/styles/theming'; @import '../../../../src/framework/theme/styles/themes/default'; - -@import '~bootstrap/scss/mixins/breakpoints'; -@import '../../../../src/framework/theme/styles/global/bootstrap/breakpoints'; +@import '../../../../src/framework/theme/styles/global/breakpoints'; $grid-breakpoints: map-merge($grid-breakpoints, (macpro: 1280px)); diff --git a/docs/articles/bootstrap-integration.md b/docs/articles/bootstrap-integration.md new file mode 100644 index 0000000000..89fb425bd5 --- /dev/null +++ b/docs/articles/bootstrap-integration.md @@ -0,0 +1,63 @@ +# Bootstrap Integration + +Nebular provides an additional module to override bootstrap styles according our themes. + +
+
Note
+
+ If you use our [ngx-admin starter kit](docs/guides/install-based-on-starter-kit) then you already have the bootstrap module in place. +
+
+ +To enable bootstrap support you have to do the following: + +- Install nebular bootstrap and bootstrap itself packages: + +```bash +npm i @nebular/bootstrap bootstrap +``` + +- Add bootstrap in `angular.json`: + +```json +"styles": [ + "node_modules/bootstrap/dist/css/bootstrap.css", +] +``` + +Then if you just want to use predefined themes you have to import prebuilt styles for required theme in `angular.json`: + +```json +"styles": [ + "node_modules/@nebular/bootstrap/styles/prebuilt/cosmic.css", + "node_modules/@nebular/bootstrap/styles/prebuilt/default.css", + "node_modules/@nebular/bootstrap/styles/prebuilt/corporate.css", +] +``` + +Another way, if you need to customize themes you have to do the following steps: + +- Import nebular bootstrap into `styles.scss`: + +```scss +@import '~@nebular/bootstrap/styles/globals'; +``` + +- Include `nb-bootstrap-global` in styles.scss: + +```scss +@import '~@nebular/bootstrap/styles/globals'; + +@include nb-install() { + @include nb-bootstrap-global(); +} +``` + +And that's it. Bootstrap is installed now. + +
+ +## Related Articles + +- [Enable Theme System](docs/guides/enable-theme-system) +- [Theme System Concepts](docs/guides/theme-system) diff --git a/docs/articles/concept-3rd-party.md b/docs/articles/concept-3rd-party.md index 5243898dbf..bae5378c12 100644 --- a/docs/articles/concept-3rd-party.md +++ b/docs/articles/concept-3rd-party.md @@ -2,12 +2,11 @@ Currently Nebular Theme system is integrated with the following 3rd party modules: -- Bootstrap 4; - 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, bootstrap components using this color will be changed accordingly. +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: diff --git a/docs/articles/index.md b/docs/articles/index.md index 5bdaba34ab..102265ffc6 100644 --- a/docs/articles/index.md +++ b/docs/articles/index.md @@ -19,7 +19,6 @@ Nebular modules are distributed as separated `npm` packages, here's a list of cu - Nebular Theme `@nebular/theme` - Theme System - set of SCSS rules, which allows you to modify application look & feel by changing variables, with fewer custom styles. - UI Kit - pure Angular components with two style themes and no 3rd party dependencies. - - Style overriding for Bootstrap, so that the application has a consistent look & feel across libraries. - Server-side rendering compatibility! - Right-to-left writing system support for all components. - Nebular Auth `@nebular/auth` @@ -28,6 +27,8 @@ Nebular modules are distributed as separated `npm` packages, here's a list of cu - Helpers for token management (storing, passing with HTTP requests, etc). - Nebular Security `@nebular/security` - module for roles and permissions management. +- Nebular Bootstrap `@nebular/bootstrap` + - Style overriding for Bootstrap, so that the application has a consistent look & feel across libraries. - Admin dashboard starter kit ngx-admin - Angular application based on Nebular modules with beautiful IOT components. Other ideas diff --git a/docs/articles/install-into-existing.md b/docs/articles/install-into-existing.md index dea9afe9a7..6770030d0e 100644 --- a/docs/articles/install-into-existing.md +++ b/docs/articles/install-into-existing.md @@ -14,12 +14,8 @@ In case you want to start based on our ngx-admin starter kit, please check out [
## Installing dependencies -At this step, we assume you already have Angular modules installed. Now let's install Angular Bootstrap which is the only peer dependency left: -```bash -npm i -S bootstrap -``` -
+At this step, we assume you already have Angular modules installed. ## Install Nebular modules @@ -54,11 +50,10 @@ Same way you can enable Auth Module (more details under [Auth Module Concepts & ## Install Styles Now, let's import Nebular styles -Include Bootstrap and default Nebular theme CSS files into your `angular.json` file (or `.angular-cli.json` for Angular < 6.0): +Include default Nebular theme CSS files into your `angular.json` file: ```scss "styles": [ - "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/@nebular/theme/styles/prebuilt/default.css", // or cosmic.css ], ``` diff --git a/docs/structure.ts b/docs/structure.ts index e0133246ae..929b463cab 100644 --- a/docs/structure.ts +++ b/docs/structure.ts @@ -85,6 +85,17 @@ export const structure = [ }, ], }, + { + type: 'page', + name: 'Bootstrap Integration', + children: [ + { + type: 'block', + block: 'markdown', + source: 'bootstrap-integration.md', + }, + ], + }, { type: 'page', name: '3rd-party components', diff --git a/package-lock.json b/package-lock.json index 3e65eeba01..f6a3b4294e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12761,9 +12761,9 @@ } }, "normalize.css": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-6.0.0.tgz", - "integrity": "sha1-IhiMJwfJEfs608GqwGd/9oZhvqg=" + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.0.tgz", + "integrity": "sha512-iXcbM3NWr0XkNyfiSBsoPezi+0V92P9nj84yVV1/UZxRUrGczgX/X91KMAGM0omWLY2+2Q1gKD/XRn4gQRDB2A==" }, "npm-package-arg": { "version": "6.1.0", diff --git a/package.json b/package.json index f4d82d07bc..84f2015ec1 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "leaflet": "1.0.3", "marked": "0.3.9", "nebular-icons": "1.0.6", - "normalize.css": "6.0.0", + "normalize.css": "8.0.0", "rxjs": "^6.1.0", "socicon": "3.0.5", "zone.js": "^0.8.26" diff --git a/scripts/gulp/tasks/bump-versions.ts b/scripts/gulp/tasks/bump-versions.ts index 7ba24bbd24..6f3eaf1ec1 100644 --- a/scripts/gulp/tasks/bump-versions.ts +++ b/scripts/gulp/tasks/bump-versions.ts @@ -12,6 +12,7 @@ task('bump', () => { './src/framework/theme/package.json', './src/framework/auth/package.json', './src/framework/security/package.json', + './src/framework/bootstrap/package.json', ], { base: './' }) .pipe(modify({ key: 'version', @@ -21,6 +22,15 @@ task('bump', () => { }); task('bump-peer', () => { + src([ + './src/framework/bootstrap/package.json', + ], { base: './' }) + .pipe(modify({ + key: 'peerDependencies.@nebular/theme', + value: VERSION, + })) + .pipe(dest('./')); + src([ './src/framework/auth/package.json', ], { base: './' }) @@ -28,5 +38,9 @@ task('bump-peer', () => { key: 'peerDependencies.@nebular/theme', value: VERSION, })) + .pipe(modify({ + key: 'peerDependencies.@nebular/bootstrap', + value: VERSION, + })) .pipe(dest('./')); }); diff --git a/src/framework/auth/package.json b/src/framework/auth/package.json index d6b68df8e2..118c9f2d77 100644 --- a/src/framework/auth/package.json +++ b/src/framework/auth/package.json @@ -33,6 +33,7 @@ "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@nebular/theme": "2.0.0-rc.10", + "@nebular/bootstrap": "2.0.0-rc.10", "rxjs": "^6.1.0" } } diff --git a/src/framework/bootstrap/package.json b/src/framework/bootstrap/package.json new file mode 100644 index 0000000000..74f67e673a --- /dev/null +++ b/src/framework/bootstrap/package.json @@ -0,0 +1,27 @@ +{ + "name": "@nebular/bootstrap", + "version": "2.0.0-rc.10", + "description": "@nebular/bootstrap", + "author": "akveo", + "license": "MIT", + "repository": { + "type": "git", + "url": "git+https://github.com/akveo/nebular.git" + }, + "bugs": { + "url": "https://github.com/akveo/nebular/issues" + }, + "homepage": "https://github.com/akveo/nebular#readme", + "keywords": [ + "angular", + "typescript", + "ng2-admin", + "ngx-admin", + "theme", + "nebular" + ], + "peerDependencies": { + "bootstrap": "^4.0.0", + "@nebular/theme": "2.0.0-rc.10" + } +} diff --git a/src/framework/theme/styles/global/bootstrap/_button-group.scss b/src/framework/bootstrap/styles/_button-group.scss similarity index 99% rename from src/framework/theme/styles/global/bootstrap/_button-group.scss rename to src/framework/bootstrap/styles/_button-group.scss index 3f3e7d4499..e0a3285eab 100644 --- a/src/framework/theme/styles/global/bootstrap/_button-group.scss +++ b/src/framework/bootstrap/styles/_button-group.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import './default-buttons'; +@import 'default-buttons'; @mixin btn-group-separator($color) { background-color: shade($color, 20%); diff --git a/src/framework/theme/styles/global/bootstrap/_buttons.scss b/src/framework/bootstrap/styles/_buttons.scss similarity index 86% rename from src/framework/theme/styles/global/bootstrap/_buttons.scss rename to src/framework/bootstrap/styles/_buttons.scss index 752faeef4d..9ee8327e06 100644 --- a/src/framework/theme/styles/global/bootstrap/_buttons.scss +++ b/src/framework/bootstrap/styles/_buttons.scss @@ -4,11 +4,11 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import './shape-buttons'; -@import './size-buttons'; -@import './default-buttons'; -@import './hero-buttons'; -@import './outline-buttons'; +@import 'shape-buttons'; +@import 'size-buttons'; +@import 'default-buttons'; +@import 'hero-buttons'; +@import 'outline-buttons'; @mixin nb-b-buttons-theme() { diff --git a/src/framework/theme/styles/global/bootstrap/_custom-forms.scss b/src/framework/bootstrap/styles/_custom-forms.scss similarity index 100% rename from src/framework/theme/styles/global/bootstrap/_custom-forms.scss rename to src/framework/bootstrap/styles/_custom-forms.scss diff --git a/src/framework/theme/styles/global/bootstrap/_default-buttons.scss b/src/framework/bootstrap/styles/_default-buttons.scss similarity index 100% rename from src/framework/theme/styles/global/bootstrap/_default-buttons.scss rename to src/framework/bootstrap/styles/_default-buttons.scss diff --git a/src/framework/theme/styles/global/bootstrap/_default-form-control.scss b/src/framework/bootstrap/styles/_default-form-control.scss similarity index 100% rename from src/framework/theme/styles/global/bootstrap/_default-form-control.scss rename to src/framework/bootstrap/styles/_default-form-control.scss diff --git a/src/framework/theme/styles/global/bootstrap/_dropdowns.scss b/src/framework/bootstrap/styles/_dropdowns.scss similarity index 99% rename from src/framework/theme/styles/global/bootstrap/_dropdowns.scss rename to src/framework/bootstrap/styles/_dropdowns.scss index 284326380a..68d6761ef5 100644 --- a/src/framework/theme/styles/global/bootstrap/_dropdowns.scss +++ b/src/framework/bootstrap/styles/_dropdowns.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import './outline-buttons'; +@import 'outline-buttons'; @mixin dropdown-menu-background($color) { background-color: $color; diff --git a/src/framework/theme/styles/global/bootstrap/_forms.scss b/src/framework/bootstrap/styles/_forms.scss similarity index 97% rename from src/framework/theme/styles/global/bootstrap/_forms.scss rename to src/framework/bootstrap/styles/_forms.scss index b480191371..c088def245 100644 --- a/src/framework/theme/styles/global/bootstrap/_forms.scss +++ b/src/framework/bootstrap/styles/_forms.scss @@ -3,10 +3,10 @@ * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import './size-form-control'; -@import './default-form-control'; -@import '../../core/mixins'; -@import './custom-forms'; +@import 'size-form-control'; +@import 'default-form-control'; +@import '../../theme/styles/core/mixins'; +@import 'custom-forms'; // locally used mixin @mixin checkmark($size, $color, $wight, $opacity: 1) { diff --git a/src/framework/theme/styles/global/bootstrap/_bootstrap.theme.scss b/src/framework/bootstrap/styles/_globals.scss similarity index 71% rename from src/framework/theme/styles/global/bootstrap/_bootstrap.theme.scss rename to src/framework/bootstrap/styles/_globals.scss index ca408533e6..94694a8998 100644 --- a/src/framework/theme/styles/global/bootstrap/_bootstrap.theme.scss +++ b/src/framework/bootstrap/styles/_globals.scss @@ -4,21 +4,20 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import './breakpoints'; @import '~bootstrap/scss/functions'; @import '~bootstrap/scss/variables'; @import '~bootstrap/scss/mixins'; @import '~bootstrap/scss/grid'; -@import './buttons'; -@import './button-group'; -@import './dropdowns'; -@import './icon-buttons'; -@import './forms'; -@import './input-group'; -@import './modals'; -@import './layout'; +@import 'buttons'; +@import 'button-group'; +@import 'dropdowns'; +@import 'icon-buttons'; +@import 'forms'; +@import 'input-group'; +@import 'modals'; +@import 'layout'; -@mixin nb-bootstrap-theme() { +@mixin nb-bootstrap-global() { @include nb-b-buttons-theme(); @include nb-b-button-group-theme(); @include nb-b-dropdowns-theme(); diff --git a/src/framework/theme/styles/global/bootstrap/_hero-buttons.scss b/src/framework/bootstrap/styles/_hero-buttons.scss similarity index 100% rename from src/framework/theme/styles/global/bootstrap/_hero-buttons.scss rename to src/framework/bootstrap/styles/_hero-buttons.scss diff --git a/src/framework/theme/styles/global/bootstrap/_icon-buttons.scss b/src/framework/bootstrap/styles/_icon-buttons.scss similarity index 100% rename from src/framework/theme/styles/global/bootstrap/_icon-buttons.scss rename to src/framework/bootstrap/styles/_icon-buttons.scss diff --git a/src/framework/theme/styles/global/bootstrap/_input-group.scss b/src/framework/bootstrap/styles/_input-group.scss similarity index 98% rename from src/framework/theme/styles/global/bootstrap/_input-group.scss rename to src/framework/bootstrap/styles/_input-group.scss index 46c928951d..253eae4cc1 100644 --- a/src/framework/theme/styles/global/bootstrap/_input-group.scss +++ b/src/framework/bootstrap/styles/_input-group.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../core/mixins'; +@import '../../theme/styles/core/mixins'; @mixin nb-b-input-group-theme() { diff --git a/src/framework/theme/styles/global/bootstrap/_layout.scss b/src/framework/bootstrap/styles/_layout.scss similarity index 100% rename from src/framework/theme/styles/global/bootstrap/_layout.scss rename to src/framework/bootstrap/styles/_layout.scss diff --git a/src/framework/theme/styles/global/bootstrap/_modals.scss b/src/framework/bootstrap/styles/_modals.scss similarity index 97% rename from src/framework/theme/styles/global/bootstrap/_modals.scss rename to src/framework/bootstrap/styles/_modals.scss index d1a0491ce9..76b1781800 100644 --- a/src/framework/theme/styles/global/bootstrap/_modals.scss +++ b/src/framework/bootstrap/styles/_modals.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../core/mixins'; +@import '../../theme/styles/core/mixins'; @mixin nb-b-modals-theme() { diff --git a/src/framework/theme/styles/global/bootstrap/_outline-buttons.scss b/src/framework/bootstrap/styles/_outline-buttons.scss similarity index 99% rename from src/framework/theme/styles/global/bootstrap/_outline-buttons.scss rename to src/framework/bootstrap/styles/_outline-buttons.scss index fc50d50948..7dbe28d5b6 100644 --- a/src/framework/theme/styles/global/bootstrap/_outline-buttons.scss +++ b/src/framework/bootstrap/styles/_outline-buttons.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import './default-buttons'; +@import 'default-buttons'; @mixin btn-outline() { .btn.btn-outline-primary { diff --git a/src/framework/theme/styles/global/bootstrap/_shape-buttons.scss b/src/framework/bootstrap/styles/_shape-buttons.scss similarity index 69% rename from src/framework/theme/styles/global/bootstrap/_shape-buttons.scss rename to src/framework/bootstrap/styles/_shape-buttons.scss index fceea2f927..86fe19536d 100644 --- a/src/framework/theme/styles/global/bootstrap/_shape-buttons.scss +++ b/src/framework/bootstrap/styles/_shape-buttons.scss @@ -19,13 +19,13 @@ } @mixin btn-rectangle() { - @include border-radius(nb-theme(btn-rectangle-border-radius)); + border-radius: nb-theme(btn-rectangle-border-radius); } @mixin btn-semi-round() { - @include border-radius(nb-theme(btn-semi-round-border-radius)); + border-radius: nb-theme(btn-semi-round-border-radius); } @mixin btn-round() { - @include border-radius(nb-theme(btn-round-border-radius)); + border-radius: nb-theme(btn-round-border-radius); } diff --git a/src/framework/theme/styles/global/bootstrap/_size-buttons.scss b/src/framework/bootstrap/styles/_size-buttons.scss similarity index 100% rename from src/framework/theme/styles/global/bootstrap/_size-buttons.scss rename to src/framework/bootstrap/styles/_size-buttons.scss diff --git a/src/framework/theme/styles/global/bootstrap/_size-form-control.scss b/src/framework/bootstrap/styles/_size-form-control.scss similarity index 100% rename from src/framework/theme/styles/global/bootstrap/_size-form-control.scss rename to src/framework/bootstrap/styles/_size-form-control.scss diff --git a/src/framework/bootstrap/styles/prebuilt/corporate.scss b/src/framework/bootstrap/styles/prebuilt/corporate.scss new file mode 100644 index 0000000000..c5f91fa479 --- /dev/null +++ b/src/framework/bootstrap/styles/prebuilt/corporate.scss @@ -0,0 +1,14 @@ +/* + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '../../../theme/styles/all'; +@import '../globals'; + +$nb-enabled-themes: (corporate); + +@include nb-install() { + @include nb-bootstrap-global(); +}; diff --git a/src/framework/bootstrap/styles/prebuilt/cosmic.scss b/src/framework/bootstrap/styles/prebuilt/cosmic.scss new file mode 100644 index 0000000000..99923e0636 --- /dev/null +++ b/src/framework/bootstrap/styles/prebuilt/cosmic.scss @@ -0,0 +1,14 @@ +/* + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '../../../theme/styles/all'; +@import '../globals'; + +$nb-enabled-themes: (cosmic); + +@include nb-install() { + @include nb-bootstrap-global(); +}; diff --git a/src/framework/bootstrap/styles/prebuilt/default.scss b/src/framework/bootstrap/styles/prebuilt/default.scss new file mode 100644 index 0000000000..cb4a7fe926 --- /dev/null +++ b/src/framework/bootstrap/styles/prebuilt/default.scss @@ -0,0 +1,14 @@ +/* + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '../../../theme/styles/all'; +@import '../globals'; + +$nb-enabled-themes: (default); + +@include nb-install() { + @include nb-bootstrap-global(); +}; diff --git a/src/framework/theme/components/button/_button-shapes.scss b/src/framework/theme/components/button/_button-shapes.scss index 4f5aa109c8..dc84376a4d 100644 --- a/src/framework/theme/components/button/_button-shapes.scss +++ b/src/framework/theme/components/button/_button-shapes.scss @@ -19,13 +19,13 @@ } @mixin btn-rectangle() { - @include border-radius(nb-theme(btn-rectangle-border-radius)); + border-radius: nb-theme(btn-rectangle-border-radius); } @mixin btn-semi-round() { - @include border-radius(nb-theme(btn-semi-round-border-radius)); + border-radius: nb-theme(btn-semi-round-border-radius); } @mixin btn-round() { - @include border-radius(nb-theme(btn-round-border-radius)); + border-radius: nb-theme(btn-round-border-radius); } diff --git a/src/framework/theme/components/button/_button-sizes.scss b/src/framework/theme/components/button/_button-sizes.scss index e7b6ca334b..ddf93fdab3 100644 --- a/src/framework/theme/components/button/_button-sizes.scss +++ b/src/framework/theme/components/button/_button-sizes.scss @@ -4,6 +4,13 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ +@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { + padding: $padding-y $padding-x; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; +} + @mixin btn-large() { @include button-size(nb-theme(btn-padding-y-lg), nb-theme(btn-padding-x-lg), diff --git a/src/framework/theme/components/layout/_layout.component.theme.scss b/src/framework/theme/components/layout/_layout.component.theme.scss index a38948213e..3e6e42bb85 100644 --- a/src/framework/theme/components/layout/_layout.component.theme.scss +++ b/src/framework/theme/components/layout/_layout.component.theme.scss @@ -4,9 +4,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/global/bootstrap/breakpoints'; -@import '~bootstrap/scss/mixins/breakpoints'; - @mixin window-mode($padding-top) { padding-top: $padding-top; diff --git a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss index ac8ecf3310..b26c163c65 100644 --- a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss +++ b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss @@ -4,8 +4,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/global/bootstrap/hero-buttons'; - @mixin nb-route-tabset-theme() { nb-route-tabset { diff --git a/src/framework/theme/components/tabset/_tabset.component.theme.scss b/src/framework/theme/components/tabset/_tabset.component.theme.scss index 37eddd3e79..53c5a79af6 100644 --- a/src/framework/theme/components/tabset/_tabset.component.theme.scss +++ b/src/framework/theme/components/tabset/_tabset.component.theme.scss @@ -4,8 +4,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import '../../styles/global/bootstrap/hero-buttons'; - @mixin nb-tabset-theme() { nb-tabset { diff --git a/src/framework/theme/package.json b/src/framework/theme/package.json index 12f8da6290..16f820e9e8 100644 --- a/src/framework/theme/package.json +++ b/src/framework/theme/package.json @@ -29,10 +29,10 @@ "@angular/core": "^6.0.0", "@angular/router": "^6.0.0", "@angular/cdk": "^6.0.0", - "rxjs": "^6.1.0", - "bootstrap": "^4.0.0" + "rxjs": "^6.1.0" }, "dependencies": { - "intersection-observer": "0.5.0" + "intersection-observer": "0.5.0", + "normalize.css": "8.0.0" } } diff --git a/src/framework/theme/styles/_globals.scss b/src/framework/theme/styles/_globals.scss index bb408eedd8..1e95490abe 100644 --- a/src/framework/theme/styles/_globals.scss +++ b/src/framework/theme/styles/_globals.scss @@ -6,6 +6,7 @@ @import 'global/components'; @import 'global/overrides'; +@import 'global/breakpoints'; @mixin nb-theme-global() { @include nb-theme-components(); diff --git a/src/framework/theme/styles/global/_breakpoints.scss b/src/framework/theme/styles/global/_breakpoints.scss new file mode 100644 index 0000000000..f71e2d0b61 --- /dev/null +++ b/src/framework/theme/styles/global/_breakpoints.scss @@ -0,0 +1,74 @@ +/*! + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +$grid-columns: 12 !default; +$grid-gutter-width-base: 24px !default; +$grid-gutter-widths: ( + xs: $grid-gutter-width-base, + sm: $grid-gutter-width-base, + md: $grid-gutter-width-base, + lg: $grid-gutter-width-base, + xl: $grid-gutter-width-base +) !default; + + +$grid-breakpoints: ( + xs: 0, + is: 400px, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px, + xxxl: 1600px +); + +$container-max-widths: ( + is: 380px, + sm: 540px, + md: 720px, + lg: 960px, + xl: 1140px, + xxl: 1320px, + xxxl: 1500px +); + +@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { + $min: map-get($breakpoints, $name); + @return if($min != 0, $min, null); +} + +@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +} + +@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { + $next: breakpoint-next($name, $breakpoints); + @return if($next, breakpoint-min($next, $breakpoints) - 0.02px, null); +} + +@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { + $max: breakpoint-max($name, $breakpoints); + @if $max { + @media (max-width: $max) { + @content; + } + } @else { + @content; + } +} + +@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + @if $min { + @media (min-width: $min) { + @content; + } + } @else { + @content; + } +} diff --git a/src/framework/theme/styles/global/_normalize.scss b/src/framework/theme/styles/global/_normalize.scss new file mode 100644 index 0000000000..70ebb3e245 --- /dev/null +++ b/src/framework/theme/styles/global/_normalize.scss @@ -0,0 +1,8 @@ +/*! + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '~normalize.css/normalize.css'; + diff --git a/src/framework/theme/styles/global/_overrides.scss b/src/framework/theme/styles/global/_overrides.scss index b5f51e66f4..a8a2333395 100644 --- a/src/framework/theme/styles/global/_overrides.scss +++ b/src/framework/theme/styles/global/_overrides.scss @@ -4,7 +4,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@import 'bootstrap/bootstrap.theme'; +@import 'normalize.scss'; @import 'components/tree.theme'; @import 'components/toaster.theme'; @import 'maps/leaflet.theme'; @@ -14,8 +14,6 @@ @mixin nb-theme-overrides() { @include nb-typography(); - - @include nb-bootstrap-theme(); @include nb-components-tree-theme(); @include nb-maps-leaflet-theme(); @include nb-tables-smart-table-theme(); diff --git a/src/framework/theme/styles/global/bootstrap/_breakpoints.scss b/src/framework/theme/styles/global/bootstrap/_breakpoints.scss deleted file mode 100644 index a80d0928ee..0000000000 --- a/src/framework/theme/styles/global/bootstrap/_breakpoints.scss +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ - -$grid-columns: 12 !default; -$grid-gutter-width-base: 24px !default; -$grid-gutter-widths: ( - xs: $grid-gutter-width-base, - sm: $grid-gutter-width-base, - md: $grid-gutter-width-base, - lg: $grid-gutter-width-base, - xl: $grid-gutter-width-base -) !default; - - -$grid-breakpoints: ( - xs: 0, - is: 400px, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1400px, - xxxl: 1600px -); - -$container-max-widths: ( - is: 380px, - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px, - xxl: 1320px, - xxxl: 1500px -); diff --git a/src/framework/theme/styles/global/typography/_typography.scss b/src/framework/theme/styles/global/typography/_typography.scss index 37c2791f4b..e6ae6d2ec2 100644 --- a/src/framework/theme/styles/global/typography/_typography.scss +++ b/src/framework/theme/styles/global/typography/_typography.scss @@ -1,3 +1,10 @@ +@mixin hover-focus { + &:hover, + &:focus { + @content; + } +} + @function main-to-text-color($color, $count: 15%) { @return tint($color, $count); } diff --git a/src/playground/styles/styles.scss b/src/playground/styles/styles.scss index f17cbcd962..459de8ec70 100644 --- a/src/playground/styles/styles.scss +++ b/src/playground/styles/styles.scss @@ -1,8 +1,10 @@ @import 'themes'; @import '../../framework/theme/styles/globals'; +@import '../../framework/bootstrap/styles/globals'; @include nb-install() { @include nb-theme-global(); + @include nb-bootstrap-global(); }; body { diff --git a/src/playground/styles/themes.scss b/src/playground/styles/themes.scss index b89e2f8f1f..f5a7abd3be 100644 --- a/src/playground/styles/themes.scss +++ b/src/playground/styles/themes.scss @@ -1,9 +1,6 @@ @import '../../framework/theme/styles/theming'; @import '../../framework/theme/styles/themes'; -@import '~bootstrap/scss/mixins/breakpoints'; -@import '../../framework/theme/styles/global/bootstrap/breakpoints'; - $nb-enabled-themes: (default, cosmic, corporate); $nb-themes: nb-register-theme((