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((