diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/app/blocks/components/live-example-block/live-example-block.component.scss
index 655aff9fb6..2182194854 100644
--- a/docs/app/blocks/components/live-example-block/live-example-block.component.scss
+++ b/docs/app/blocks/components/live-example-block/live-example-block.component.scss
@@ -9,6 +9,7 @@
$block-bg-default: #ebeff5;
$block-bg-cosmic: #2f296b;
$block-fg-cosmic: #7d838b;
+ $block-bg-corporate: #f1f5f8;
display: flex;
flex-direction: column;
@@ -106,6 +107,10 @@
}
}
+ &.theme-corporate {
+ background-color: $block-bg-corporate;
+ }
+
.iframe-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.ts b/docs/app/blocks/components/live-example-block/live-example-block.component.ts
index ddcc968f03..1025e99de5 100644
--- a/docs/app/blocks/components/live-example-block/live-example-block.component.ts
+++ b/docs/app/blocks/components/live-example-block/live-example-block.component.ts
@@ -40,12 +40,18 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
return this.currentTheme === 'cosmic';
}
+ @HostBinding('class.theme-corporate')
+ private get isCorporate() {
+ return this.currentTheme === 'corporate';
+ }
+
iframeHeight: number;
alive: boolean = true;
themes: {label: string; value: string}[] = [
{ label: 'Default', value: 'default' },
{ label: 'Cosmic', value: 'cosmic' },
+ { label: 'Corporate', value: 'corporate' },
];
currentTheme: string = 'default';
diff --git a/docs/structure.ts b/docs/structure.ts
index 6e77578442..7bd7852e05 100644
--- a/docs/structure.ts
+++ b/docs/structure.ts
@@ -369,6 +369,18 @@ export const structure = [
},
],
},
+ {
+ type: 'page',
+ name: 'Corporate',
+ children: [
+ {
+ type: 'block',
+ block: 'theme',
+ name: 'Corporate',
+ source: 'corporate',
+ },
+ ],
+ },
],
},
{
diff --git a/src/framework/icons/css/nebular-icons.css b/src/framework/icons/css/nebular-icons.css
index 2718377df2..19830db473 100644
--- a/src/framework/icons/css/nebular-icons.css
+++ b/src/framework/icons/css/nebular-icons.css
@@ -5,11 +5,11 @@
*/
@font-face {
font-family: 'nebular';
- src: url('../fonts/nebular.eot?jaecku');
- src: url('../fonts/nebular.eot?jaecku#iefix') format('embedded-opentype'),
- url('../fonts/nebular.ttf?jaecku') format('truetype'),
- url('../fonts/nebular.woff?jaecku') format('woff'),
- url('../fonts/nebular.svg?jaecku#nebular') format('svg');
+ src: url('../fonts/nebular.eot?nboapd');
+ src: url('../fonts/nebular.eot?nboapd#iefix') format('embedded-opentype'),
+ url('../fonts/nebular.ttf?nboapd') format('truetype'),
+ url('../fonts/nebular.woff?nboapd') format('woff'),
+ url('../fonts/nebular.svg?nboapd#nebular') format('svg');
font-weight: normal;
font-style: normal;
}
@@ -100,7 +100,10 @@
.nb-title,
.nb-trash,
.nb-volume-high,
-.nb-volume-mute {
+.nb-volume-mute,
+.nb-drop,
+.nb-drops,
+.nb-info {
/* use !important to prevent issues with browser extensions that change ../fonts */
font-family: 'nebular' !important;
speak: none;
@@ -121,258 +124,271 @@
.nb-angle-double-left::before {
content: '\e901';
}
-.nb-arrow-down::before {
+.nb-angle-double-right::before {
content: '\e902';
}
-.nb-arrow-dropdown::before {
+.nb-arrow-down::before {
content: '\e903';
}
-.nb-arrow-dropleft::before {
+.nb-arrow-dropdown::before {
content: '\e904';
}
-.nb-arrow-dropright::before {
+.nb-arrow-dropleft::before {
content: '\e905';
}
-.nb-arrow-dropup::before {
+.nb-arrow-dropright::before {
content: '\e906';
}
-.nb-arrow-left::before {
+.nb-arrow-dropup::before {
content: '\e907';
}
-.nb-arrow-retweet::before {
+.nb-arrow-left::before {
content: '\e908';
}
-.nb-arrow-right::before {
+.nb-arrow-retweet::before {
content: '\e909';
}
-.nb-arrow-thin-down::before {
+.nb-arrow-right::before {
content: '\e90a';
}
-.nb-arrow-thin-left::before {
+.nb-arrow-thin-down::before {
content: '\e90b';
}
-.nb-arrow-thin-right::before {
+.nb-arrow-thin-left::before {
content: '\e90c';
}
-.nb-arrow-thin-up::before {
+.nb-arrow-thin-right::before {
content: '\e90d';
}
-.nb-arrow-up::before {
+.nb-arrow-thin-up::before {
content: '\e90e';
}
-.nb-audio::before {
+.nb-arrow-up::before {
content: '\e90f';
}
-.nb-bar-chart::before {
+.nb-audio::before {
content: '\e910';
}
-.nb-checkmark::before {
+.nb-bar-chart::before {
content: '\e911';
}
-.nb-chevron-down::before {
+.nb-checkmark::before {
content: '\e912';
}
-.nb-chevron-down-outline::before {
+.nb-chevron-down::before {
content: '\e913';
}
-.nb-chevron-left::before {
+.nb-chevron-down-outline::before {
content: '\e914';
}
-.nb-chevron-left-outline::before {
+.nb-chevron-left::before {
content: '\e915';
}
-.nb-chevron-right::before {
+.nb-chevron-left-outline::before {
content: '\e916';
}
-.nb-chevron-right-outline::before {
+.nb-chevron-right::before {
content: '\e917';
}
-.nb-chevron-up::before {
+.nb-chevron-right-outline::before {
content: '\e918';
}
-.nb-chevron-up-outline::before {
+.nb-chevron-up::before {
content: '\e919';
}
-.nb-close::before {
+.nb-chevron-up-outline::before {
content: '\e91a';
}
-.nb-close-circled::before {
+.nb-close::before {
content: '\e91b';
}
-.nb-cloudy::before {
+.nb-close-circled::before {
content: '\e91c';
}
-.nb-coffee-maker::before {
+.nb-cloudy::before {
content: '\e91d';
}
-.nb-compose::before {
+.nb-coffee-maker::before {
content: '\e91e';
}
-.nb-edit::before {
+.nb-compose::before {
content: '\e91f';
}
-.nb-email::before {
+.nb-drop::before {
content: '\e920';
}
-.nb-flame-circled::before {
+.nb-drops::before {
content: '\e921';
}
-.nb-gear::before {
+.nb-edit::before {
content: '\e922';
}
-.nb-grid-a::before {
+.nb-email::before {
content: '\e923';
}
-.nb-grid-a-outline::before {
+.nb-flame-circled::before {
content: '\e924';
}
-.nb-grid-b::before {
+.nb-gear::before {
content: '\e925';
}
-.nb-grid-b-outline::before {
+.nb-grid-a::before {
content: '\e926';
}
-.nb-heart::before {
+.nb-grid-a-outline::before {
content: '\e927';
}
-.nb-home::before {
+.nb-grid-b::before {
content: '\e928';
}
-.nb-keypad::before {
+.nb-grid-b-outline::before {
content: '\e929';
}
-.nb-layout-centre::before {
+.nb-heart::before {
content: '\e92a';
}
-.nb-layout-default::before {
+.nb-home::before {
content: '\e92b';
}
-.nb-layout-one-column::before {
+.nb-info::before {
content: '\e92c';
+ color: #fff;
}
-.nb-layout-sidebar-left::before {
+.nb-keypad::before {
content: '\e92d';
}
-.nb-layout-sidebar-right::before {
+.nb-layout-centre::before {
content: '\e92e';
}
-.nb-layout-two-column::before {
+.nb-layout-default::before {
content: '\e92f';
}
-.nb-lightbulb::before {
+.nb-layout-one-column::before {
content: '\e930';
}
-.nb-list::before {
+.nb-layout-sidebar-left::before {
content: '\e931';
}
-.nb-location::before {
+.nb-layout-sidebar-right::before {
content: '\e932';
}
-.nb-locked::before {
+.nb-layout-two-column::before {
content: '\e933';
}
-.nb-loop::before {
+.nb-lightbulb::before {
content: '\e934';
}
-.nb-loop-circled::before {
+.nb-list::before {
content: '\e935';
}
-.nb-menu::before {
+.nb-location::before {
content: '\e936';
}
-.nb-notifications::before {
+.nb-locked::before {
content: '\e937';
}
-.nb-paper-plane::before {
+.nb-loop::before {
content: '\e938';
}
-.nb-partlysunny::before {
+.nb-loop-circled::before {
content: '\e939';
}
-.nb-pause::before {
+.nb-menu::before {
content: '\e93a';
}
-.nb-pause-outline::before {
+.nb-notifications::before {
content: '\e93b';
}
-.nb-person::before {
+.nb-paper-plane::before {
content: '\e93c';
}
-.nb-phone::before {
+.nb-partlysunny::before {
content: '\e93d';
}
-.nb-play::before {
+.nb-pause::before {
content: '\e93e';
}
-.nb-play-outline::before {
+.nb-pause-outline::before {
content: '\e93f';
}
-.nb-plus::before {
+.nb-person::before {
content: '\e940';
}
-.nb-plus-circled::before {
+.nb-phone::before {
content: '\e941';
}
-.nb-power::before {
+.nb-play::before {
content: '\e942';
}
-.nb-power-circled::before {
+.nb-play-outline::before {
content: '\e943';
}
-.nb-rainy::before {
+.nb-plus::before {
content: '\e944';
}
-.nb-roller-shades::before {
+.nb-plus-circled::before {
content: '\e945';
}
-.nb-search::before {
+.nb-power::before {
content: '\e946';
}
-.nb-shuffle::before {
+.nb-power-circled::before {
content: '\e947';
}
-.nb-skip-backward::before {
+.nb-rainy::before {
content: '\e948';
}
-.nb-skip-backward-outline::before {
+.nb-roller-shades::before {
content: '\e949';
}
-.nb-skip-forward::before {
+.nb-search::before {
content: '\e94a';
}
-.nb-skip-forward-outline::before {
+.nb-shuffle::before {
content: '\e94b';
}
-.nb-snowy-circled::before {
+.nb-skip-backward::before {
content: '\e94c';
}
-.nb-square::before {
+.nb-skip-backward-outline::before {
content: '\e94d';
}
-.nb-square-outline::before {
+.nb-skip-forward::before {
content: '\e94e';
}
-.nb-star::before {
+.nb-skip-forward-outline::before {
content: '\e94f';
}
-.nb-sunny::before {
+.nb-snowy-circled::before {
content: '\e950';
}
-.nb-sunny-circled::before {
+.nb-square::before {
content: '\e951';
}
-.nb-tables::before {
+.nb-square-outline::before {
content: '\e952';
}
-.nb-title::before {
+.nb-star::before {
content: '\e953';
}
-.nb-trash::before {
+.nb-sunny::before {
content: '\e954';
}
-.nb-volume-high::before {
+.nb-sunny-circled::before {
content: '\e955';
}
-.nb-volume-mute::before {
+.nb-tables::before {
content: '\e956';
}
+.nb-title::before {
+ content: '\e957';
+}
+.nb-trash::before {
+ content: '\e958';
+}
+.nb-volume-high::before {
+ content: '\e959';
+}
+.nb-volume-mute::before {
+ content: '\e95a';
+}
diff --git a/src/framework/icons/fonts/nebular.eot b/src/framework/icons/fonts/nebular.eot
index 82ade0a44f..a0b60fd1ac 100644
Binary files a/src/framework/icons/fonts/nebular.eot and b/src/framework/icons/fonts/nebular.eot differ
diff --git a/src/framework/icons/fonts/nebular.svg b/src/framework/icons/fonts/nebular.svg
index a91fadb165..13a351a27a 100644
--- a/src/framework/icons/fonts/nebular.svg
+++ b/src/framework/icons/fonts/nebular.svg
@@ -9,89 +9,93 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/framework/icons/fonts/nebular.ttf b/src/framework/icons/fonts/nebular.ttf
index a82457a277..b85a5e133e 100644
Binary files a/src/framework/icons/fonts/nebular.ttf and b/src/framework/icons/fonts/nebular.ttf differ
diff --git a/src/framework/icons/fonts/nebular.woff b/src/framework/icons/fonts/nebular.woff
index 850e9669d7..6b0bd058ec 100644
Binary files a/src/framework/icons/fonts/nebular.woff and b/src/framework/icons/fonts/nebular.woff differ
diff --git a/src/framework/icons/package.json b/src/framework/icons/package.json
index 1fbee3e82f..6fbbce439a 100644
--- a/src/framework/icons/package.json
+++ b/src/framework/icons/package.json
@@ -1,6 +1,6 @@
{
"name": "nebular-icons",
- "version": "1.0.6",
+ "version": "1.0.7",
"description": "Nebular icons - amazing icons crafted with love by Akveo team",
"author": "akveo",
"license": "MIT",
diff --git a/src/framework/icons/scss/_nebular-icons-font.scss b/src/framework/icons/scss/_nebular-icons-font.scss
index 458b75dfcd..4142b833c1 100644
--- a/src/framework/icons/scss/_nebular-icons-font.scss
+++ b/src/framework/icons/scss/_nebular-icons-font.scss
@@ -5,11 +5,11 @@
*/
@font-face {
font-family: #{$nebular-icons-font-family};
- src: url('#{$nebular-icons-font-path}/nebular.eot?jaecku');
- src: url('#{$nebular-icons-font-path}/nebular.eot?jaecku#iefix') format('embedded-opentype'),
- url('#{$nebular-icons-font-path}/nebular.ttf?jaecku') format('truetype'),
- url('#{$nebular-icons-font-path}/nebular.woff?jaecku') format('woff'),
- url('#{$nebular-icons-font-path}/nebular.svg?jaecku#nebular') format('svg');
+ src: url('#{$nebular-icons-font-path}/nebular.eot?nboapd');
+ src: url('#{$nebular-icons-font-path}/nebular.eot?nboapd#iefix') format('embedded-opentype'),
+ url('#{$nebular-icons-font-path}/nebular.ttf?nboapd') format('truetype'),
+ url('#{$nebular-icons-font-path}/nebular.woff?nboapd') format('woff'),
+ url('#{$nebular-icons-font-path}/nebular.svg?nboapd#nebular') format('svg');
font-weight: normal;
font-style: normal;
}
@@ -100,7 +100,10 @@
.nb-title,
.nb-trash,
.nb-volume-high,
-.nb-volume-mute {
+.nb-volume-mute,
+.nb-drop,
+.nb-drops,
+.nb-info {
/* use !important to prevent issues with browser extensions that change #{$nebular-icons-font-path} */
font-family: #{$nebular-icons-font-family};
speak: none;
@@ -121,258 +124,271 @@
.nb-angle-double-left::before {
content: '\e901';
}
-.nb-arrow-down::before {
+.nb-angle-double-right::before {
content: '\e902';
}
-.nb-arrow-dropdown::before {
+.nb-arrow-down::before {
content: '\e903';
}
-.nb-arrow-dropleft::before {
+.nb-arrow-dropdown::before {
content: '\e904';
}
-.nb-arrow-dropright::before {
+.nb-arrow-dropleft::before {
content: '\e905';
}
-.nb-arrow-dropup::before {
+.nb-arrow-dropright::before {
content: '\e906';
}
-.nb-arrow-left::before {
+.nb-arrow-dropup::before {
content: '\e907';
}
-.nb-arrow-retweet::before {
+.nb-arrow-left::before {
content: '\e908';
}
-.nb-arrow-right::before {
+.nb-arrow-retweet::before {
content: '\e909';
}
-.nb-arrow-thin-down::before {
+.nb-arrow-right::before {
content: '\e90a';
}
-.nb-arrow-thin-left::before {
+.nb-arrow-thin-down::before {
content: '\e90b';
}
-.nb-arrow-thin-right::before {
+.nb-arrow-thin-left::before {
content: '\e90c';
}
-.nb-arrow-thin-up::before {
+.nb-arrow-thin-right::before {
content: '\e90d';
}
-.nb-arrow-up::before {
+.nb-arrow-thin-up::before {
content: '\e90e';
}
-.nb-audio::before {
+.nb-arrow-up::before {
content: '\e90f';
}
-.nb-bar-chart::before {
+.nb-audio::before {
content: '\e910';
}
-.nb-checkmark::before {
+.nb-bar-chart::before {
content: '\e911';
}
-.nb-chevron-down::before {
+.nb-checkmark::before {
content: '\e912';
}
-.nb-chevron-down-outline::before {
+.nb-chevron-down::before {
content: '\e913';
}
-.nb-chevron-left::before {
+.nb-chevron-down-outline::before {
content: '\e914';
}
-.nb-chevron-left-outline::before {
+.nb-chevron-left::before {
content: '\e915';
}
-.nb-chevron-right::before {
+.nb-chevron-left-outline::before {
content: '\e916';
}
-.nb-chevron-right-outline::before {
+.nb-chevron-right::before {
content: '\e917';
}
-.nb-chevron-up::before {
+.nb-chevron-right-outline::before {
content: '\e918';
}
-.nb-chevron-up-outline::before {
+.nb-chevron-up::before {
content: '\e919';
}
-.nb-close::before {
+.nb-chevron-up-outline::before {
content: '\e91a';
}
-.nb-close-circled::before {
+.nb-close::before {
content: '\e91b';
}
-.nb-cloudy::before {
+.nb-close-circled::before {
content: '\e91c';
}
-.nb-coffee-maker::before {
+.nb-cloudy::before {
content: '\e91d';
}
-.nb-compose::before {
+.nb-coffee-maker::before {
content: '\e91e';
}
-.nb-edit::before {
+.nb-compose::before {
content: '\e91f';
}
-.nb-email::before {
+.nb-drop::before {
content: '\e920';
}
-.nb-flame-circled::before {
+.nb-drops::before {
content: '\e921';
}
-.nb-gear::before {
+.nb-edit::before {
content: '\e922';
}
-.nb-grid-a::before {
+.nb-email::before {
content: '\e923';
}
-.nb-grid-a-outline::before {
+.nb-flame-circled::before {
content: '\e924';
}
-.nb-grid-b::before {
+.nb-gear::before {
content: '\e925';
}
-.nb-grid-b-outline::before {
+.nb-grid-a::before {
content: '\e926';
}
-.nb-heart::before {
+.nb-grid-a-outline::before {
content: '\e927';
}
-.nb-home::before {
+.nb-grid-b::before {
content: '\e928';
}
-.nb-keypad::before {
+.nb-grid-b-outline::before {
content: '\e929';
}
-.nb-layout-centre::before {
+.nb-heart::before {
content: '\e92a';
}
-.nb-layout-default::before {
+.nb-home::before {
content: '\e92b';
}
-.nb-layout-one-column::before {
+.nb-info::before {
content: '\e92c';
+ color: #fff;
}
-.nb-layout-sidebar-left::before {
+.nb-keypad::before {
content: '\e92d';
}
-.nb-layout-sidebar-right::before {
+.nb-layout-centre::before {
content: '\e92e';
}
-.nb-layout-two-column::before {
+.nb-layout-default::before {
content: '\e92f';
}
-.nb-lightbulb::before {
+.nb-layout-one-column::before {
content: '\e930';
}
-.nb-list::before {
+.nb-layout-sidebar-left::before {
content: '\e931';
}
-.nb-location::before {
+.nb-layout-sidebar-right::before {
content: '\e932';
}
-.nb-locked::before {
+.nb-layout-two-column::before {
content: '\e933';
}
-.nb-loop::before {
+.nb-lightbulb::before {
content: '\e934';
}
-.nb-loop-circled::before {
+.nb-list::before {
content: '\e935';
}
-.nb-menu::before {
+.nb-location::before {
content: '\e936';
}
-.nb-notifications::before {
+.nb-locked::before {
content: '\e937';
}
-.nb-paper-plane::before {
+.nb-loop::before {
content: '\e938';
}
-.nb-partlysunny::before {
+.nb-loop-circled::before {
content: '\e939';
}
-.nb-pause::before {
+.nb-menu::before {
content: '\e93a';
}
-.nb-pause-outline::before {
+.nb-notifications::before {
content: '\e93b';
}
-.nb-person::before {
+.nb-paper-plane::before {
content: '\e93c';
}
-.nb-phone::before {
+.nb-partlysunny::before {
content: '\e93d';
}
-.nb-play::before {
+.nb-pause::before {
content: '\e93e';
}
-.nb-play-outline::before {
+.nb-pause-outline::before {
content: '\e93f';
}
-.nb-plus::before {
+.nb-person::before {
content: '\e940';
}
-.nb-plus-circled::before {
+.nb-phone::before {
content: '\e941';
}
-.nb-power::before {
+.nb-play::before {
content: '\e942';
}
-.nb-power-circled::before {
+.nb-play-outline::before {
content: '\e943';
}
-.nb-rainy::before {
+.nb-plus::before {
content: '\e944';
}
-.nb-roller-shades::before {
+.nb-plus-circled::before {
content: '\e945';
}
-.nb-search::before {
+.nb-power::before {
content: '\e946';
}
-.nb-shuffle::before {
+.nb-power-circled::before {
content: '\e947';
}
-.nb-skip-backward::before {
+.nb-rainy::before {
content: '\e948';
}
-.nb-skip-backward-outline::before {
+.nb-roller-shades::before {
content: '\e949';
}
-.nb-skip-forward::before {
+.nb-search::before {
content: '\e94a';
}
-.nb-skip-forward-outline::before {
+.nb-shuffle::before {
content: '\e94b';
}
-.nb-snowy-circled::before {
+.nb-skip-backward::before {
content: '\e94c';
}
-.nb-square::before {
+.nb-skip-backward-outline::before {
content: '\e94d';
}
-.nb-square-outline::before {
+.nb-skip-forward::before {
content: '\e94e';
}
-.nb-star::before {
+.nb-skip-forward-outline::before {
content: '\e94f';
}
-.nb-sunny::before {
+.nb-snowy-circled::before {
content: '\e950';
}
-.nb-sunny-circled::before {
+.nb-square::before {
content: '\e951';
}
-.nb-tables::before {
+.nb-square-outline::before {
content: '\e952';
}
-.nb-title::before {
+.nb-star::before {
content: '\e953';
}
-.nb-trash::before {
+.nb-sunny::before {
content: '\e954';
}
-.nb-volume-high::before {
+.nb-sunny-circled::before {
content: '\e955';
}
-.nb-volume-mute::before {
+.nb-tables::before {
content: '\e956';
}
+.nb-title::before {
+ content: '\e957';
+}
+.nb-trash::before {
+ content: '\e958';
+}
+.nb-volume-high::before {
+ content: '\e959';
+}
+.nb-volume-mute::before {
+ content: '\e95a';
+}
diff --git a/src/framework/icons/src/icons/nb-drop.svg b/src/framework/icons/src/icons/nb-drop.svg
new file mode 100644
index 0000000000..5c5962c698
--- /dev/null
+++ b/src/framework/icons/src/icons/nb-drop.svg
@@ -0,0 +1,32 @@
+
+
\ No newline at end of file
diff --git a/src/framework/icons/src/icons/nb-drops.svg b/src/framework/icons/src/icons/nb-drops.svg
new file mode 100644
index 0000000000..277d3ae325
--- /dev/null
+++ b/src/framework/icons/src/icons/nb-drops.svg
@@ -0,0 +1,22 @@
+
+
\ No newline at end of file
diff --git a/src/framework/icons/src/icons/nb-info.svg b/src/framework/icons/src/icons/nb-info.svg
new file mode 100644
index 0000000000..ad8c6f7f71
--- /dev/null
+++ b/src/framework/icons/src/icons/nb-info.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/src/framework/theme/components/card/_card.component.theme.scss b/src/framework/theme/components/card/_card.component.theme.scss
index af53cb96fa..02ec443135 100644
--- a/src/framework/theme/components/card/_card.component.theme.scss
+++ b/src/framework/theme/components/card/_card.component.theme.scss
@@ -6,7 +6,9 @@
@mixin nb-card-header() {
padding: nb-theme(card-padding);
- border-bottom: 1px solid nb-theme(card-separator);
+ border-bottom-width: nb-theme(card-header-border-width);
+ border-bottom-style: nb-theme(card-header-border-type);
+ border-bottom-color: nb-theme(card-header-border-color);
border-top-left-radius: nb-theme(card-border-radius);
border-top-right-radius: nb-theme(card-border-radius);
color: nb-theme(card-header-fg-heading);
@@ -30,6 +32,7 @@
border-radius: nb-theme(card-border-radius);
box-shadow: nb-theme(card-shadow);
font-weight: nb-theme(card-font-weight);
+ border: nb-theme(card-border-width) nb-theme(card-border-type) nb-theme(card-border-color);
@include nb-scrollbars(
nb-theme(scrollbar-fg),
diff --git a/src/framework/theme/components/layout/_layout.component.theme.scss b/src/framework/theme/components/layout/_layout.component.theme.scss
index a9c3262f5d..41447f60a6 100644
--- a/src/framework/theme/components/layout/_layout.component.theme.scss
+++ b/src/framework/theme/components/layout/_layout.component.theme.scss
@@ -170,10 +170,10 @@
border-top: 1px solid nb-theme(footer-separator);
a {
- color: nb-theme(footer-fg);
+ color: nb-theme(footer-fg-highlight);
@include hover-focus-active {
- color: nb-theme(footer-fg);
+ color: nb-theme(footer-fg-highlight);
}
}
}
diff --git a/src/framework/theme/services/js-themes-registry.service.ts b/src/framework/theme/services/js-themes-registry.service.ts
index 4e3ed4792b..9f62a3f040 100644
--- a/src/framework/theme/services/js-themes-registry.service.ts
+++ b/src/framework/theme/services/js-themes-registry.service.ts
@@ -10,11 +10,13 @@ import { Inject, Injectable } from '@angular/core';
import { NbJSThemeOptions } from './js-themes/theme.options';
import { DEFAULT_THEME } from './js-themes/default.theme';
import { COSMIC_THEME } from './js-themes/cosmic.theme';
+import { CORPORATE_THEME } from './js-themes/corporate.theme';
import { NB_BUILT_IN_JS_THEMES, NB_JS_THEMES } from '../theme.options';
export const BUILT_IN_THEMES: NbJSThemeOptions[] = [
DEFAULT_THEME,
COSMIC_THEME,
+ CORPORATE_THEME,
];
/**
diff --git a/src/framework/theme/services/js-themes-registry.spec.ts b/src/framework/theme/services/js-themes-registry.spec.ts
index ca4327d815..6f6574b1be 100644
--- a/src/framework/theme/services/js-themes-registry.spec.ts
+++ b/src/framework/theme/services/js-themes-registry.spec.ts
@@ -28,6 +28,13 @@ describe('js-themes-registry-service', () => {
someNewValueForCosmic: 'red',
},
},
+ {
+ name: 'corporate',
+ base: 'default',
+ variables: {
+ someNewValueForCorporate: 'green',
+ },
+ },
{
name: 'super-new-theme',
variables: {
@@ -57,9 +64,11 @@ describe('js-themes-registry-service', () => {
it('has built in themes', () => {
expect(jsThemesRegistry.get('default')).not.toBeUndefined();
expect(jsThemesRegistry.get('cosmic')).not.toBeUndefined();
+ expect(jsThemesRegistry.get('corporate')).not.toBeUndefined();
expect(jsThemesRegistry.has('default')).toBeTruthy();
expect(jsThemesRegistry.has('cosmic')).toBeTruthy();
+ expect(jsThemesRegistry.has('corporate')).toBeTruthy();
});
it('has built in themes with inherited font', () => {
@@ -67,6 +76,8 @@ describe('js-themes-registry-service', () => {
.toEqual('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
expect(jsThemesRegistry.get('cosmic').variables.fontMain)
.toEqual('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
+ expect(jsThemesRegistry.get('corporate').variables.fontMain)
+ .toEqual('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');
});
it('has also new themes', () => {
@@ -82,5 +93,6 @@ describe('js-themes-registry-service', () => {
it('has new values from custom settings', () => {
expect(jsThemesRegistry.get('cosmic').variables.someNewValueForCosmic).toEqual('red');
expect(jsThemesRegistry.get('default').variables.someNewValue).toEqual('black');
+ expect(jsThemesRegistry.get('corporate').variables.someNewValueForCorporate).toEqual('green');
});
});
diff --git a/src/framework/theme/services/js-themes/corporate.theme.ts b/src/framework/theme/services/js-themes/corporate.theme.ts
new file mode 100644
index 0000000000..5dc91b1eaa
--- /dev/null
+++ b/src/framework/theme/services/js-themes/corporate.theme.ts
@@ -0,0 +1,36 @@
+import { NbJSThemeOptions } from './theme.options';
+import { NbColorHelper } from '../color.helper';
+
+const palette = {
+ primary: '#73a1ff',
+ success: '#5dcfe3',
+ info: '#ba7fec',
+ warning: '#ffa36b',
+ danger: '#ff6b83',
+};
+
+export const CORPORATE_THEME: NbJSThemeOptions = {
+ name: 'corporate',
+ base: 'default',
+ variables: {
+ fg: '#f1f5f8',
+ bg: '#ffffff',
+ fgHeading: '#181818',
+ fgText: '#4b4b4b',
+ fgHighlight: '#a4abb3',
+ layoutBg: '#f1f5f8',
+ separator: '#cdd5dc',
+
+ primary: palette.primary,
+ success: palette.success,
+ info: palette.info,
+ warning: palette.warning,
+ danger: palette.danger,
+
+ primaryLight: NbColorHelper.tint(palette.primary, 15),
+ successLight: NbColorHelper.tint(palette.success, 15),
+ infoLight: NbColorHelper.tint(palette.info, 15),
+ warningLight: NbColorHelper.tint(palette.warning, 15),
+ dangerLight: NbColorHelper.tint(palette.danger, 15),
+ },
+};
diff --git a/src/framework/theme/services/theme.spec.ts b/src/framework/theme/services/theme.spec.ts
index d40c6cd334..3b35cbf513 100644
--- a/src/framework/theme/services/theme.spec.ts
+++ b/src/framework/theme/services/theme.spec.ts
@@ -120,9 +120,11 @@ describe('theme-service', () => {
expect(current.bg).toEqual('#ffffff');
themeService.changeTheme('cosmic');
-
expect(current.bg).toEqual('#3d3780');
+ themeService.changeTheme('corporate');
+ expect(current.bg).toEqual('#ffffff');
+
} finally {
subscription.unsubscribe();
}
diff --git a/src/framework/theme/styles/_themes.scss b/src/framework/theme/styles/_themes.scss
index 4f09abc7a1..b0475fe714 100644
--- a/src/framework/theme/styles/_themes.scss
+++ b/src/framework/theme/styles/_themes.scss
@@ -1,2 +1,3 @@
@import 'themes/default';
@import 'themes/cosmic';
+@import 'themes/corporate';
diff --git a/src/framework/theme/styles/global/bootstrap/_buttons.scss b/src/framework/theme/styles/global/bootstrap/_buttons.scss
index bc48e80e53..752faeef4d 100644
--- a/src/framework/theme/styles/global/bootstrap/_buttons.scss
+++ b/src/framework/theme/styles/global/bootstrap/_buttons.scss
@@ -28,6 +28,11 @@
color: nb-theme(btn-fg);
cursor: nb-theme(btn-cursor);
}
+
+ &:not(:disabled):not(.disabled) {
+ cursor: nb-theme(btn-cursor);
+ }
+
@include btn-md();
}
diff --git a/src/framework/theme/styles/global/bootstrap/_hero-buttons.scss b/src/framework/theme/styles/global/bootstrap/_hero-buttons.scss
index fa92228b59..de57b159da 100644
--- a/src/framework/theme/styles/global/bootstrap/_hero-buttons.scss
+++ b/src/framework/theme/styles/global/bootstrap/_hero-buttons.scss
@@ -33,6 +33,7 @@
@mixin btn-hero-primary() {
@include btn-hero-primary-gradient();
@include btn-hero-primary-bevel-glow-shadow();
+ @include btn-hero-border-radius();
@include btn-hero-text();
@include btn-hero-primary-focus();
@include btn-hero-primary-hover();
@@ -46,6 +47,7 @@
@mixin btn-hero-success() {
@include btn-hero-success-gradient();
@include btn-hero-success-bevel-glow-shadow();
+ @include btn-hero-border-radius();
@include btn-hero-text();
@include btn-hero-success-focus();
@include btn-hero-success-hover();
@@ -59,6 +61,7 @@
@mixin btn-hero-warning() {
@include btn-hero-warning-gradient();
@include btn-hero-warning-bevel-glow-shadow();
+ @include btn-hero-border-radius();
@include btn-hero-text();
@include btn-hero-warning-focus();
@include btn-hero-warning-hover();
@@ -72,6 +75,7 @@
@mixin btn-hero-info() {
@include btn-hero-info-gradient();
@include btn-hero-info-bevel-glow-shadow();
+ @include btn-hero-border-radius();
@include btn-hero-text();
@include btn-hero-info-focus();
@include btn-hero-info-hover();
@@ -85,6 +89,7 @@
@mixin btn-hero-danger() {
@include btn-hero-danger-gradient();
@include btn-hero-danger-bevel-glow-shadow();
+ @include btn-hero-border-radius();
@include btn-hero-text();
@include btn-hero-danger-focus();
@include btn-hero-danger-hover();
@@ -99,6 +104,7 @@
color: nb-theme(btn-outline-fg);
@include btn-hero-secondary-bg();
@include btn-hero-secondary-bevel-glow-shadow();
+ @include btn-hero-border-radius();
@include btn-hero-text();
@include btn-hero-secondary-focus();
@include btn-hero-secondary-hover();
@@ -117,33 +123,33 @@
@return nb-theme(btn-hero-bevel-size) shade($color, 14%);
}
-@function btn-hero-glow($color) {
- @return nb-theme(btn-hero-glow-size) $color;
+@function btn-hero-glow($hero-glow-size, $color) {
+ @return nb-theme($hero-glow-size) $color;
}
// Left colors
@function btn-hero-primary-left-color() {
- @return btn-hero-gradient-left(nb-theme(btn-primary-bg));
+ @return btn-hero-gradient-left(nb-theme(btn-primary-bg), nb-theme(btn-hero-primary-degree));
}
@function btn-hero-success-left-color() {
- @return btn-hero-gradient-left(nb-theme(btn-success-bg));
+ @return btn-hero-gradient-left(nb-theme(btn-success-bg), nb-theme(btn-hero-success-degree));
}
@function btn-hero-warning-left-color() {
- @return btn-hero-gradient-left(nb-theme(btn-warning-bg), 10deg);
+ @return btn-hero-gradient-left(nb-theme(btn-warning-bg), nb-theme(btn-hero-warning-degree));
}
@function btn-hero-info-left-color() {
- @return btn-hero-gradient-left(nb-theme(btn-info-bg), -10deg);
+ @return btn-hero-gradient-left(nb-theme(btn-info-bg), nb-theme(btn-hero-info-degree));
}
@function btn-hero-danger-left-color() {
- @return btn-hero-gradient-left(nb-theme(btn-danger-bg), -20deg);
+ @return btn-hero-gradient-left(nb-theme(btn-danger-bg), nb-theme(btn-hero-danger-degree));
}
@function btn-hero-secondary-left-color() {
- @return btn-hero-gradient-left(nb-theme(btn-secondary-border));
+ @return btn-hero-gradient-left(nb-theme(btn-secondary-border), nb-theme(btn-hero-secondary-degree));
}
// Middle colors
@@ -215,6 +221,13 @@
@return btn-hero-light-gradient($color-left, $color-right);
}
+@function btn-hero-secondary-light-gradient() {
+ $color-right: nb-theme(btn-secondary-bg);
+ $color-left: btn-hero-secondary-left-color();
+
+ @return btn-hero-light-gradient($color-left, $color-right);
+}
+
// dark gradients
@function btn-hero-dark-gradient($color-left, $color-right) {
@@ -287,6 +300,10 @@
border-color: transparent;
}
}
+
+@mixin btn-hero-border-radius() {
+ border-radius: nb-theme(btn-hero-border-radius);
+}
// End help mixins
@@ -359,27 +376,27 @@
// Glow
@function btn-hero-primary-glow() {
- @return btn-hero-glow(btn-hero-primary-middle-color());
+ @return btn-hero-glow(btn-hero-primary-glow-size, btn-hero-primary-middle-color());
}
@function btn-hero-success-glow() {
- @return btn-hero-glow(btn-hero-success-middle-color());
+ @return btn-hero-glow(btn-hero-success-glow-size, btn-hero-success-middle-color());
}
@function btn-hero-warning-glow() {
- @return btn-hero-glow(btn-hero-warning-middle-color());
+ @return btn-hero-glow(btn-hero-warning-glow-size, btn-hero-warning-middle-color());
}
@function btn-hero-info-glow() {
- @return btn-hero-glow(btn-hero-info-middle-color());
+ @return btn-hero-glow(btn-hero-info-glow-size, btn-hero-info-middle-color());
}
@function btn-hero-danger-glow() {
- @return btn-hero-glow(btn-hero-danger-middle-color());
+ @return btn-hero-glow(btn-hero-danger-glow-size, btn-hero-danger-middle-color());
}
@function btn-hero-secondary-glow() {
- @return btn-hero-glow(btn-hero-secondary-middle-color());
+ @return btn-hero-glow(btn-hero-secondary-glow-size, btn-hero-secondary-middle-color());
}
@@ -464,6 +481,10 @@
@mixin btn-hero-secondary-border() {
border: 2px solid nb-theme(btn-secondary-border);
+
+ @include nb-for-theme(corporate) {
+ border: none;
+ }
}
diff --git a/src/framework/theme/styles/prebuilt/corporate.scss b/src/framework/theme/styles/prebuilt/corporate.scss
new file mode 100644
index 0000000000..8fd3f8ba4d
--- /dev/null
+++ b/src/framework/theme/styles/prebuilt/corporate.scss
@@ -0,0 +1,7 @@
+@import '../all';
+
+$nb-enabled-themes: (corporate);
+
+@include nb-install() {
+ @include nb-theme-global();
+};
diff --git a/src/framework/theme/styles/themes/_corporate.scss b/src/framework/theme/styles/themes/_corporate.scss
new file mode 100644
index 0000000000..8a50636ab4
--- /dev/null
+++ b/src/framework/theme/styles/themes/_corporate.scss
@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../core/functions';
+@import '../core/mixins';
+@import 'default';
+
+// default the base theme
+$theme: (
+ header-fg: #f7fafb,
+ header-bg: #111218,
+
+ layout-bg: #f1f5f8,
+
+ color-fg-heading: #181818,
+ color-fg-text: #4b4b4b,
+ color-fg-highlight: color-fg,
+
+ separator: #cdd5dc,
+
+ radius: 0.17rem,
+
+ scrollbar-bg: #e3e9ee,
+
+ color-primary: #73a1ff,
+ color-success: #5dcfe3,
+ color-info: #ba7fec,
+ color-warning: #ffa36b,
+ color-danger: #ff6b83,
+
+ btn-secondary-bg: #edf2f5,
+ btn-secondary-border: #edf2f5,
+
+ actions-fg: #d3dbe5,
+ actions-bg: color-bg,
+
+ sidebar-bg: #e3e9ee,
+
+ layout-padding: 2.5rem 2.5rem 0.75rem 1.5rem,
+
+ border-color: #e7ecef,
+
+ menu-font-weight: font-weight-bolder,
+ menu-fg: color-fg-text,
+ menu-bg: #e3e9ee,
+ menu-active-fg: color-fg-heading,
+ menu-active-bg: menu-bg,
+
+ menu-submenu-bg: menu-bg,
+ menu-submenu-fg: color-fg-text,
+ menu-submenu-active-fg: color-fg-heading,
+ menu-submenu-active-bg: #cdd5dc,
+ menu-submenu-active-border-color: menu-submenu-active-bg,
+ menu-submenu-active-shadow: none,
+ menu-submenu-hover-fg: menu-submenu-active-fg,
+ menu-submenu-hover-bg: menu-bg,
+ menu-submenu-item-border-width: 0.125rem,
+ menu-submenu-item-border-radius: radius,
+ menu-submenu-item-padding: 0.5rem 1rem,
+ menu-submenu-item-container-padding: 0 1.25rem,
+ menu-submenu-padding: 0.5rem,
+
+ btn-border-radius: btn-semi-round-border-radius,
+
+ btn-hero-degree: 0deg,
+ btn-hero-primary-degree: btn-hero-degree,
+ btn-hero-success-degree: btn-hero-degree,
+ btn-hero-warning-degree: btn-hero-degree,
+ btn-hero-info-degree: btn-hero-degree,
+ btn-hero-danger-degree: btn-hero-degree,
+ btn-hero-secondary-degree: btn-hero-degree,
+ btn-hero-glow-size: 0 0 20px 0,
+ btn-hero-primary-glow-size: btn-hero-glow-size,
+ btn-hero-success-glow-size: btn-hero-glow-size,
+ btn-hero-warning-glow-size: btn-hero-glow-size,
+ btn-hero-info-glow-size: btn-hero-glow-size,
+ btn-hero-danger-glow-size: btn-hero-glow-size,
+ btn-hero-secondary-glow-size: 0 0 0 0,
+ btn-hero-border-radius: btn-border-radius,
+
+ card-shadow: none,
+ card-border-width: 1px,
+ card-border-color: border-color,
+ card-header-border-width: 0,
+
+ link-color: #5dcfe3,
+ link-color-hover: #7dcfe3,
+ link-color-visited: link-color,
+
+ actions-separator: #f1f4f5,
+
+ modal-separator: border-color,
+
+ tabs-selected: color-primary,
+ tabs-separator: #ebecee,
+
+ smart-table-paging-bg-active: color-primary,
+
+ route-tabs-selected: color-primary,
+
+ popover-border: color-primary,
+
+ footer-shadow: none,
+ footer-separator: border-color,
+ footer-fg-highlight: #2a2a2a,
+);
+
+// register the theme
+$nb-themes: nb-register-theme($theme, corporate, default);
diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss
index 2af51dee73..6f8c62ba09 100644
--- a/src/framework/theme/styles/themes/_cosmic.scss
+++ b/src/framework/theme/styles/themes/_cosmic.scss
@@ -91,6 +91,12 @@ $theme: (
btn-hero-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
btn-hero-bevel-size: 0 3px 0 0,
btn-hero-glow-size: 0 2px 8px 0,
+ btn-hero-primary-glow-size: btn-hero-glow-size,
+ btn-hero-success-glow-size: btn-hero-glow-size,
+ btn-hero-warning-glow-size: btn-hero-glow-size,
+ btn-hero-info-glow-size: btn-hero-glow-size,
+ btn-hero-danger-glow-size: btn-hero-glow-size,
+ btn-hero-secondary-glow-size: btn-hero-glow-size,
btn-secondary-border: color-primary,
btn-outline-fg: color-fg-heading,
btn-outline-hover-fg: color-fg-heading,
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index b0d87c99e5..25cd928059 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/src/framework/theme/styles/themes/_default.scss
@@ -92,6 +92,9 @@ $theme: (
card-height-xlarge: 696px,
card-height-xxlarge: 816px,
card-shadow: shadow,
+ card-border-width: 0,
+ card-border-type: solid,
+ card-border-color: color-bg,
card-border-radius: radius,
card-padding: padding,
card-margin: margin,
@@ -109,6 +112,9 @@ $theme: (
card-header-success-bg: color-success,
card-header-warning-bg: color-warning,
card-header-danger-bg: color-danger,
+ card-header-border-width: 1px,
+ card-header-border-type: solid,
+ card-header-border-color: card-separator,
header-font-family: font-secondary,
header-font-size: font-size,
@@ -122,6 +128,7 @@ $theme: (
footer-height: 4.725rem,
footer-padding: 1.25rem,
footer-fg: color-fg-heading,
+ footer-fg-highlight: color-fg-heading,
footer-bg: color-bg,
footer-separator: separator,
footer-shadow: shadow,
@@ -339,6 +346,20 @@ $theme: (
btn-hero-text-shadow: none,
btn-hero-bevel-size: 0 0 0 0,
btn-hero-glow-size: 0 0 0 0,
+ btn-hero-primary-glow-size: btn-hero-glow-size,
+ btn-hero-success-glow-size: btn-hero-glow-size,
+ btn-hero-warning-glow-size: btn-hero-glow-size,
+ btn-hero-info-glow-size: btn-hero-glow-size,
+ btn-hero-danger-glow-size: btn-hero-glow-size,
+ btn-hero-secondary-glow-size: btn-hero-glow-size,
+ btn-hero-degree: 20deg,
+ btn-hero-primary-degree: btn-hero-degree,
+ btn-hero-success-degree: btn-hero-degree,
+ btn-hero-warning-degree: 10deg,
+ btn-hero-info-degree: -10deg,
+ btn-hero-danger-degree: -20deg,
+ btn-hero-secondary-degree: btn-hero-degree,
+ btn-hero-border-radius: radius,
btn-outline-fg: color-fg-heading,
btn-outline-hover-fg: #ffffff,
diff --git a/src/playground/styles/themes.scss b/src/playground/styles/themes.scss
index e04e516bcc..b89e2f8f1f 100644
--- a/src/playground/styles/themes.scss
+++ b/src/playground/styles/themes.scss
@@ -4,7 +4,7 @@
@import '~bootstrap/scss/mixins/breakpoints';
@import '../../framework/theme/styles/global/bootstrap/breakpoints';
-$nb-enabled-themes: (default, cosmic);
+$nb-enabled-themes: (default, cosmic, corporate);
$nb-themes: nb-register-theme((
), default, default);
@@ -12,3 +12,7 @@ $nb-themes: nb-register-theme((
$nb-themes: nb-register-theme((
), cosmic, cosmic);
+
+$nb-themes: nb-register-theme((
+
+), corporate, corporate);