diff --git a/.stylelintrc.json b/.stylelintrc.json index 6c59911f7d..8c380df683 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -19,7 +19,7 @@ "unit-case": "lower", "unit-no-unknown": true, - "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "s", "rem"], + "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "vmax", "s", "rem"], "value-list-comma-space-after": "always-single-line", "value-list-comma-space-before": "never", diff --git a/e2e/layout-theme.e2e-spec.ts b/e2e/layout-theme.e2e-spec.ts index a44d4425ff..e631613def 100644 --- a/e2e/layout-theme.e2e-spec.ts +++ b/e2e/layout-theme.e2e-spec.ts @@ -57,7 +57,7 @@ describe('nb-layout theme', () => { expect(value).toEqual(themeDefault); }); cardHeader.getCssValue('color').then(value => { - expect(value).toEqual('rgba(25, 32, 56, 1)'); + expect(value).toEqual('rgba(34, 43, 69, 1)'); }); cardHeader.getCssValue('text-decoration').then(value => { expect(value).toMatch('none'); diff --git a/src/app/components-list/components-overlay.component.scss b/src/app/components-list/components-overlay.component.scss index f3b4cdece8..09b14ec4bd 100644 --- a/src/app/components-list/components-overlay.component.scss +++ b/src/app/components-list/components-overlay.component.scss @@ -6,7 +6,7 @@ left: 0; width: 100vw; height: 100vh; - z-index: 9999; + z-index: 99999; overflow-y: auto; padding: 2rem; } diff --git a/src/framework/bootstrap/styles/_button-group.scss b/src/framework/bootstrap/styles/_button-group.scss index f00832eee4..5189ce6f8d 100644 --- a/src/framework/bootstrap/styles/_button-group.scss +++ b/src/framework/bootstrap/styles/_button-group.scss @@ -251,7 +251,7 @@ color: nb-theme(button-filled-#{$status}-text-color); } .btn-outline-#{$status} { - background-color: nb-theme(button-outline-background-color); + background-color: nb-theme(button-outline-#{$status}-background-color); border-color: nb-theme(button-outline-#{$status}-border-color); color: nb-theme(button-outline-#{$status}-text-color); } diff --git a/src/framework/bootstrap/styles/_buttons.scss b/src/framework/bootstrap/styles/_buttons.scss index 6709ed4cad..01069491ee 100644 --- a/src/framework/bootstrap/styles/_buttons.scss +++ b/src/framework/bootstrap/styles/_buttons.scss @@ -18,7 +18,7 @@ font-weight: nb-theme(button-text-font-weight); &:focus { - box-shadow: 0 0 0 nb-theme(button-outline-width) nb-theme(button-outline-color); + @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color)); outline: none; } diff --git a/src/framework/bootstrap/styles/_dropdowns.scss b/src/framework/bootstrap/styles/_dropdowns.scss index 2236ff6e04..53f93db734 100644 --- a/src/framework/bootstrap/styles/_dropdowns.scss +++ b/src/framework/bootstrap/styles/_dropdowns.scss @@ -19,7 +19,7 @@ background-color: nb-theme(select-option-background-color); color: nb-theme(select-option-text-color); font-family: nb-theme(select-text-font-family); - font-weight: nb-theme(select-text-font-weight); + font-weight: nb-theme(select-medium-text-font-weight); font-size: nb-theme(select-medium-text-font-size); line-height: nb-theme(select-medium-text-line-height); diff --git a/src/framework/bootstrap/styles/_forms.scss b/src/framework/bootstrap/styles/_forms.scss index d634d7c9a7..a096216526 100644 --- a/src/framework/bootstrap/styles/_forms.scss +++ b/src/framework/bootstrap/styles/_forms.scss @@ -10,36 +10,36 @@ @mixin nb-b-forms-theme() { .form-control { - background-color: nb-theme(input-background-color); - border-color: nb-theme(input-border-color); + background-color: nb-theme(input-basic-background-color); + border-color: nb-theme(input-basic-border-color); border-style: nb-theme(input-border-style); border-width: nb-theme(input-border-width); - color: nb-theme(input-text-color); + color: nb-theme(input-basic-text-color); font-family: nb-theme(input-text-font-family); @include nb-component-animation(border, background-color, color); &::placeholder { - color: nb-theme(input-placeholder-text-color); + color: nb-theme(input-basic-placeholder-text-color); font-family: nb-theme(input-placeholder-text-font-family); text-overflow: ellipsis; } &:focus { outline: none; - border-color: nb-theme(input-focus-border-color); + border-color: nb-theme(input-basic-focus-border-color); } &:hover { - border-color: nb-theme(input-hover-border-color); + border-color: nb-theme(input-basic-hover-border-color); } &:disabled { - background-color: nb-theme(input-disabled-background-color); - border-color: nb-theme(input-disabled-border-color); - color: nb-theme(input-disabled-text-color); + background-color: nb-theme(input-basic-disabled-background-color); + border-color: nb-theme(input-basic-disabled-border-color); + color: nb-theme(input-basic-disabled-text-color); &::placeholder { - color: nb-theme(input-disabled-placeholder-text-color); + color: nb-theme(input-basic-disabled-placeholder-text-color); } } diff --git a/src/framework/bootstrap/styles/_outline-buttons.scss b/src/framework/bootstrap/styles/_outline-buttons.scss index aa110abd7d..c8938aae2c 100644 --- a/src/framework/bootstrap/styles/_outline-buttons.scss +++ b/src/framework/bootstrap/styles/_outline-buttons.scss @@ -7,7 +7,7 @@ @import 'status-buttons'; @mixin b-btn-outline($status) { - background-color: nb-theme(button-outline-background-color); + background-color: nb-theme(button-outline-#{$status}-background-color); border-style: nb-theme(button-outline-border-style); border-width: nb-theme(button-outline-border-width); text-transform: nb-theme(button-outline-text-transform); @@ -15,25 +15,25 @@ color: nb-theme(button-outline-#{$status}-text-color); &:focus { - background-color: nb-theme(button-outline-background-color); + background-color: nb-theme(button-outline-#{$status}-background-color); border-color: nb-theme(button-outline-#{$status}-focus-border-color); color: nb-theme(button-outline-#{$status}-focus-text-color); } &:hover { - background-color: nb-theme(button-outline-background-color); + background-color: nb-theme(button-outline-#{$status}-background-color); border-color: nb-theme(button-outline-#{$status}-hover-border-color); color: nb-theme(button-outline-#{$status}-hover-text-color); } &:active { - background-color: nb-theme(button-outline-background-color); + background-color: nb-theme(button-outline-#{$status}-background-color); border-color: nb-theme(button-outline-#{$status}-active-border-color); color: nb-theme(button-outline-#{$status}-active-text-color); } &[disabled] { - background-color: nb-theme(button-outline-background-color); + background-color: nb-theme(button-outline-#{$status}-disabled-background-color); border-color: nb-theme(button-outline-#{$status}-disabled-border-color); color: nb-theme(button-outline-#{$status}-disabled-text-color); } diff --git a/src/framework/theme/components/alert/_alert.component.theme.scss b/src/framework/theme/components/alert/_alert.component.theme.scss index 7bd2ea770a..74423733c6 100644 --- a/src/framework/theme/components/alert/_alert.component.theme.scss +++ b/src/framework/theme/components/alert/_alert.component.theme.scss @@ -4,22 +4,10 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -@mixin nb-alert-header() { - padding: nb-theme(alert-padding); - border-bottom: 1px solid nb-theme(alert-separator); - border-top-left-radius: nb-theme(alert-border-radius); - border-top-right-radius: nb-theme(alert-border-radius); - color: nb-theme(alert-fg-heading); - - @include nb-headings(); -} - @mixin nb-alert-theme() { nb-alert { - background-color: nb-theme(alert-background-color); border-radius: nb-theme(alert-border-radius); box-shadow: nb-theme(alert-shadow); - color: nb-theme(alert-text-color); font-family: nb-theme(alert-text-font-family); font-size: nb-theme(alert-text-font-size); font-weight: nb-theme(alert-text-font-weight); diff --git a/src/framework/theme/components/alert/alert.component.ts b/src/framework/theme/components/alert/alert.component.ts index ceed6bbfa1..e3843fa410 100644 --- a/src/framework/theme/components/alert/alert.component.ts +++ b/src/framework/theme/components/alert/alert.component.ts @@ -8,7 +8,7 @@ import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/co import { NbComponentSize } from '../component-size'; import { NbComponentStatus } from '../component-status'; -import { convertToBoolProperty } from '../helpers'; +import { convertToBoolProperty, emptyStatusWarning } from '../helpers'; /** @@ -46,11 +46,11 @@ import { convertToBoolProperty } from '../helpers'; * ``` * * Colored alerts could be simply configured by providing a `status` property: - * @stacked-example(Colored Alert, alert/alert-colors.component) + * @stacked-example(Alert status, alert/alert-colors.component) * * It is also possible to assign an `accent` property for a slight alert highlight * as well as combine it with `status`: - * @stacked-example(Accent Alert, alert/alert-accents.component) + * @stacked-example(Alert accent, alert/alert-accents.component) * * And `outline` property: * @stacked-example(Outline Alert, alert/alert-outline.component) @@ -59,7 +59,6 @@ import { convertToBoolProperty } from '../helpers'; * * @styles * - * alert-background-color: * alert-border-radius: * alert-bottom-margin: * alert-padding: @@ -67,7 +66,6 @@ import { convertToBoolProperty } from '../helpers'; * alert-scrollbar-background-color: * alert-scrollbar-width: * alert-shadow: - * alert-text-color: * alert-text-font-family: * alert-text-font-size: * alert-text-font-weight: @@ -79,6 +77,8 @@ import { convertToBoolProperty } from '../helpers'; * alert-medium-padding: * alert-large-height: * alert-giant-height: + * alert-basic-background-color: + * alert-basic-text-color: * alert-primary-background-color: * alert-primary-text-color: * alert-success-background-color: @@ -89,17 +89,23 @@ import { convertToBoolProperty } from '../helpers'; * alert-warning-text-color: * alert-danger-background-color: * alert-danger-text-color: + * alert-control-background-color: + * alert-control-text-color: + * alert-accent-basic-color: * alert-accent-primary-color: * alert-accent-info-color: * alert-accent-success-color: * alert-accent-warning-color: * alert-accent-danger-color: + * alert-accent-control-color: * alert-outline-width: + * alert-outline-basic-color: * alert-outline-primary-color: * alert-outline-info-color: * alert-outline-success-color: * alert-outline-warning-color: * alert-outline-danger-color: + * alert-outline-control-color: */ @Component({ selector: 'nb-alert', @@ -122,21 +128,31 @@ export class NbAlertComponent { /** * Alert status (adds specific styles): - * `primary`, `success`, `info`, `warning`, `danger`. - * Unset by default. + * `basic` (default), `primary`, `success`, `info`, `warning`, `danger`, `control`. */ - @Input() status: '' | NbComponentStatus = ''; + @Input() + get status(): NbComponentStatus { + return this._status; + } + set status(value: NbComponentStatus) { + if ((value as string) === '') { + emptyStatusWarning('NbAlert'); + value = 'basic'; + } + this._status = value; + } + protected _status: NbComponentStatus = 'basic'; /** * Alert accent (color of the top border): - * `primary`, `success`, `info`, `warning`, `danger`. + * `basic`, `primary`, `success`, `info`, `warning`, `danger`, `control`. * Unset by default. */ @Input() accent: '' | NbComponentStatus = ''; /** * Alert outline (color of the border): - * `primary`, `success`, `info`, `warning`, `danger`. + * `basic`, `primary`, `success`, `info`, `warning`, `danger`, `control`. * Unset by default. */ @Input() outline: '' | NbComponentStatus = ''; @@ -217,6 +233,16 @@ export class NbAlertComponent { return this.status === 'danger'; } + @HostBinding('class.status-basic') + get basic() { + return this.status === 'basic'; + } + + @HostBinding('class.status-control') + get control() { + return this.status === 'control'; + } + @HostBinding('class.accent-primary') get primaryAccent() { return this.accent === 'primary'; @@ -242,6 +268,16 @@ export class NbAlertComponent { return this.accent === 'danger'; } + @HostBinding('class.accent-basic') + get basicAccent() { + return this.accent === 'basic'; + } + + @HostBinding('class.accent-control') + get controlAccent() { + return this.accent === 'control'; + } + @HostBinding('class.outline-primary') get primaryOutline() { return this.outline === 'primary'; @@ -266,4 +302,14 @@ export class NbAlertComponent { get dangerOutline() { return this.outline === 'danger'; } + + @HostBinding('class.outline-basic') + get basicOutline() { + return this.outline === 'basic'; + } + + @HostBinding('class.outline-control') + get controlOutline() { + return this.outline === 'control'; + } } diff --git a/src/framework/theme/components/badge/badge.component.ts b/src/framework/theme/components/badge/badge.component.ts index 07781c2915..b03de3a156 100644 --- a/src/framework/theme/components/badge/badge.component.ts +++ b/src/framework/theme/components/badge/badge.component.ts @@ -60,6 +60,8 @@ export type NbBadgePosition = NbBadgePhysicalPosition | NbBadgeLogicalPosition; * badge-text-font-weight: * badge-text-line-height: * badge-padding: + * badge-basic-background-color: + * badge-basic-text-color: * badge-primary-background-color: * badge-primary-text-color: * badge-success-background-color: @@ -70,6 +72,8 @@ export type NbBadgePosition = NbBadgePhysicalPosition | NbBadgeLogicalPosition; * badge-warning-text-color: * badge-danger-background-color: * badge-danger-text-color: + * badge-control-background-color: + * badge-control-text-color: */ @Component({ selector: 'nb-badge', @@ -104,7 +108,7 @@ export class NbBadgeComponent { /** * Badge status (adds specific styles): - * 'primary', 'info', 'success', 'warning', 'danger' + * 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control' */ @Input() status: NbComponentStatus = 'primary'; @@ -133,6 +137,16 @@ export class NbBadgeComponent { return this.status === 'danger'; } + @HostBinding('class.status-basic') + get basic(): boolean { + return this.status === 'basic'; + } + + @HostBinding('class.status-control') + get control(): boolean { + return this.status === 'control'; + } + @HostBinding('class.position-top') get top(): boolean { return this.position.includes('top'); diff --git a/src/framework/theme/components/button/_button-ghost.scss b/src/framework/theme/components/button/_button-ghost.scss index e8b970d228..b3c872e4e0 100644 --- a/src/framework/theme/components/button/_button-ghost.scss +++ b/src/framework/theme/components/button/_button-ghost.scss @@ -12,6 +12,10 @@ border-width: nb-theme(button-ghost-border-width); text-transform: nb-theme(button-ghost-text-transform); + &:focus { + @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color), (inset-shadow: true)); + } + @each $size in nb-get-sizes() { &.size-#{$size} { padding: nb-theme(button-ghost-#{$size}-padding); diff --git a/src/framework/theme/components/button/_button-outline.scss b/src/framework/theme/components/button/_button-outline.scss index 7eec61f6fa..7037b355aa 100644 --- a/src/framework/theme/components/button/_button-outline.scss +++ b/src/framework/theme/components/button/_button-outline.scss @@ -6,11 +6,14 @@ @mixin button-outline() { [nbButton].appearance-outline { - background-color: nb-theme(button-outline-background-color); border-style: nb-theme(button-outline-border-style); border-width: nb-theme(button-outline-border-width); text-transform: nb-theme(button-outline-text-transform); + &:focus { + @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color), (inset-shadow: true)); + } + @each $size in nb-get-sizes() { &.size-#{$size} { padding: nb-theme(button-outline-#{$size}-padding); @@ -19,6 +22,7 @@ @each $status in nb-get-statuses() { &.status-#{$status} { + background-color: nb-theme(button-outline-#{$status}-background-color); border-color: nb-theme(button-outline-#{$status}-border-color); color: nb-theme(button-outline-#{$status}-text-color); diff --git a/src/framework/theme/components/button/_button.component.theme.scss b/src/framework/theme/components/button/_button.component.theme.scss index c365ec7fb2..8b5a2e1ea7 100644 --- a/src/framework/theme/components/button/_button.component.theme.scss +++ b/src/framework/theme/components/button/_button.component.theme.scss @@ -16,8 +16,8 @@ font-weight: nb-theme(button-text-font-weight); &:focus { - box-shadow: 0 0 0 nb-theme(button-outline-width) nb-theme(button-outline-color); outline: none; + @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color)); } &[disabled] { @@ -28,6 +28,12 @@ &.size-#{$size} { font-size: nb-theme(button-#{$size}-text-font-size); line-height: nb-theme(button-#{$size}-text-line-height); + + nb-icon { + font-size: nb-theme(button-#{$size}-text-font-size); + height: nb-theme(button-#{$size}-text-line-height); + width: nb-theme(button-#{$size}-text-line-height); + } } } diff --git a/src/framework/theme/components/button/button.component.ts b/src/framework/theme/components/button/button.component.ts index 0e6b57d97e..316f0a5bd4 100644 --- a/src/framework/theme/components/button/button.component.ts +++ b/src/framework/theme/components/button/button.component.ts @@ -59,7 +59,7 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * * and `hero`: * - * @stacked-example(Button Colors, button/button-hero.component.html) + * @stacked-example(Button Hero, button/button-hero.component.html) * * Buttons available in different shapes, which could be combined with the other properties: * @stacked-example(Button Shapes, button/button-shapes.component) @@ -105,9 +105,22 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * button-filled-medium-padding: * button-filled-large-padding: * button-filled-giant-padding: + * button-filled-basic-background-color: + * button-filled-basic-border-color: + * button-filled-basic-text-color: + * button-filled-basic-focus-background-color: + * button-filled-basic-focus-border-color: + * button-filled-basic-hover-background-color: + * button-filled-basic-hover-border-color: + * button-filled-basic-active-background-color: + * button-filled-basic-active-border-color: + * button-filled-basic-disabled-background-color: + * button-filled-basic-disabled-border-color: + * button-filled-basic-disabled-text-color: * button-filled-primary-background-color: * button-filled-primary-border-color: * button-filled-primary-text-color: + * button-filled-primary-focus-background-color: * button-filled-primary-focus-border-color: * button-filled-primary-hover-background-color: * button-filled-primary-hover-border-color: @@ -119,6 +132,7 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * button-filled-success-background-color: * button-filled-success-border-color: * button-filled-success-text-color: + * button-filled-success-focus-background-color: * button-filled-success-focus-border-color: * button-filled-success-hover-background-color: * button-filled-success-hover-border-color: @@ -130,6 +144,7 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * button-filled-info-background-color: * button-filled-info-border-color: * button-filled-info-text-color: + * button-filled-info-focus-background-color: * button-filled-info-focus-border-color: * button-filled-info-hover-background-color: * button-filled-info-hover-border-color: @@ -141,6 +156,7 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * button-filled-warning-background-color: * button-filled-warning-border-color: * button-filled-warning-text-color: + * button-filled-warning-focus-background-color: * button-filled-warning-focus-border-color: * button-filled-warning-hover-background-color: * button-filled-warning-hover-border-color: @@ -152,6 +168,7 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * button-filled-danger-background-color: * button-filled-danger-border-color: * button-filled-danger-text-color: + * button-filled-danger-focus-background-color: * button-filled-danger-focus-border-color: * button-filled-danger-hover-background-color: * button-filled-danger-hover-border-color: @@ -160,65 +177,131 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * button-filled-danger-disabled-background-color: * button-filled-danger-disabled-border-color: * button-filled-danger-disabled-text-color: + * button-filled-control-background-color: + * button-filled-control-border-color: + * button-filled-control-text-color: + * button-filled-control-focus-background-color: + * button-filled-control-focus-border-color: + * button-filled-control-hover-background-color: + * button-filled-control-hover-border-color: + * button-filled-control-active-background-color: + * button-filled-control-active-border-color: + * button-filled-control-disabled-background-color: + * button-filled-control-disabled-border-color: + * button-filled-control-disabled-text-color: * button-outline-border-style: * button-outline-border-width: - * button-outline-background-color: * button-outline-text-transform: * button-outline-tiny-padding: * button-outline-small-padding: * button-outline-medium-padding: * button-outline-large-padding: * button-outline-giant-padding: + * button-outline-basic-background-color: + * button-outline-basic-border-color: + * button-outline-basic-text-color: + * button-outline-basic-focus-background-color: + * button-outline-basic-focus-border-color: + * button-outline-basic-focus-text-color: + * button-outline-basic-hover-background-color: + * button-outline-basic-hover-border-color: + * button-outline-basic-hover-text-color: + * button-outline-basic-active-background-color: + * button-outline-basic-active-border-color: + * button-outline-basic-active-text-color: + * button-outline-basic-disabled-background-color: + * button-outline-basic-disabled-border-color: + * button-outline-basic-disabled-text-color: + * button-outline-primary-background-color: * button-outline-primary-border-color: * button-outline-primary-text-color: + * button-outline-primary-focus-background-color: * button-outline-primary-focus-border-color: * button-outline-primary-focus-text-color: + * button-outline-primary-hover-background-color: * button-outline-primary-hover-border-color: * button-outline-primary-hover-text-color: + * button-outline-primary-active-background-color: * button-outline-primary-active-border-color: * button-outline-primary-active-text-color: + * button-outline-primary-disabled-background-color: * button-outline-primary-disabled-border-color: * button-outline-primary-disabled-text-color: + * button-outline-success-background-color: * button-outline-success-border-color: * button-outline-success-text-color: + * button-outline-success-focus-background-color: * button-outline-success-focus-border-color: * button-outline-success-focus-text-color: + * button-outline-success-hover-background-color: * button-outline-success-hover-border-color: * button-outline-success-hover-text-color: + * button-outline-success-active-background-color: * button-outline-success-active-border-color: * button-outline-success-active-text-color: + * button-outline-success-disabled-background-color: * button-outline-success-disabled-border-color: * button-outline-success-disabled-text-color: + * button-outline-info-background-color: * button-outline-info-border-color: * button-outline-info-text-color: + * button-outline-info-focus-background-color: * button-outline-info-focus-border-color: * button-outline-info-focus-text-color: + * button-outline-info-hover-background-color: * button-outline-info-hover-border-color: * button-outline-info-hover-text-color: + * button-outline-info-active-background-color: * button-outline-info-active-border-color: * button-outline-info-active-text-color: + * button-outline-info-disabled-background-color: * button-outline-info-disabled-border-color: * button-outline-info-disabled-text-color: + * button-outline-warning-background-color: * button-outline-warning-border-color: * button-outline-warning-text-color: + * button-outline-warning-focus-background-color: * button-outline-warning-focus-border-color: * button-outline-warning-focus-text-color: + * button-outline-warning-hover-background-color: * button-outline-warning-hover-border-color: * button-outline-warning-hover-text-color: + * button-outline-warning-active-background-color: * button-outline-warning-active-border-color: * button-outline-warning-active-text-color: + * button-outline-warning-disabled-background-color: * button-outline-warning-disabled-border-color: * button-outline-warning-disabled-text-color: + * button-outline-danger-background-color: * button-outline-danger-border-color: * button-outline-danger-text-color: + * button-outline-danger-focus-background-color: * button-outline-danger-focus-border-color: * button-outline-danger-focus-text-color: + * button-outline-danger-hover-background-color: * button-outline-danger-hover-border-color: * button-outline-danger-hover-text-color: + * button-outline-danger-active-background-color: * button-outline-danger-active-border-color: * button-outline-danger-active-text-color: + * button-outline-danger-disabled-background-color: * button-outline-danger-disabled-border-color: * button-outline-danger-disabled-text-color: + * button-outline-control-background-color: + * button-outline-control-border-color: + * button-outline-control-text-color: + * button-outline-control-focus-background-color: + * button-outline-control-focus-border-color: + * button-outline-control-focus-text-color: + * button-outline-control-hover-background-color: + * button-outline-control-hover-border-color: + * button-outline-control-hover-text-color: + * button-outline-control-active-background-color: + * button-outline-control-active-border-color: + * button-outline-control-active-text-color: + * button-outline-control-disabled-background-color: + * button-outline-control-disabled-border-color: + * button-outline-control-disabled-text-color: * button-ghost-background-color: * button-ghost-border-color: * button-ghost-border-style: @@ -229,31 +312,97 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * button-ghost-medium-padding: * button-ghost-large-padding: * button-ghost-giant-padding: + * button-ghost-basic-text-color: + * button-ghost-basic-focus-background-color: + * button-ghost-basic-focus-border-color: + * button-ghost-basic-focus-text-color: + * button-ghost-basic-hover-background-color: + * button-ghost-basic-hover-border-color: + * button-ghost-basic-hover-text-color: + * button-ghost-basic-active-background-color: + * button-ghost-basic-active-border-color: + * button-ghost-basic-active-text-color: + * button-ghost-basic-disabled-background-color: + * button-ghost-basic-disabled-border-color: + * button-ghost-basic-disabled-text-color: * button-ghost-primary-text-color: + * button-ghost-primary-focus-background-color: + * button-ghost-primary-focus-border-color: * button-ghost-primary-focus-text-color: - * button-ghost-primary-hover-color: + * button-ghost-primary-hover-background-color: + * button-ghost-primary-hover-border-color: + * button-ghost-primary-hover-text-color: + * button-ghost-primary-active-background-color: + * button-ghost-primary-active-border-color: * button-ghost-primary-active-text-color: + * button-ghost-primary-disabled-background-color: + * button-ghost-primary-disabled-border-color: * button-ghost-primary-disabled-text-color: * button-ghost-success-text-color: + * button-ghost-success-focus-background-color: + * button-ghost-success-focus-border-color: * button-ghost-success-focus-text-color: - * button-ghost-success-hover-color: + * button-ghost-success-hover-background-color: + * button-ghost-success-hover-border-color: + * button-ghost-success-hover-text-color: + * button-ghost-success-active-background-color: + * button-ghost-success-active-border-color: * button-ghost-success-active-text-color: + * button-ghost-success-disabled-background-color: + * button-ghost-success-disabled-border-color: * button-ghost-success-disabled-text-color: * button-ghost-info-text-color: + * button-ghost-info-focus-background-color: + * button-ghost-info-focus-border-color: * button-ghost-info-focus-text-color: - * button-ghost-info-hover-color: + * button-ghost-info-hover-background-color: + * button-ghost-info-hover-border-color: + * button-ghost-info-hover-text-color: + * button-ghost-info-active-background-color: + * button-ghost-info-active-border-color: * button-ghost-info-active-text-color: + * button-ghost-info-disabled-background-color: + * button-ghost-info-disabled-border-color: * button-ghost-info-disabled-text-color: * button-ghost-warning-text-color: + * button-ghost-warning-focus-background-color: + * button-ghost-warning-focus-border-color: * button-ghost-warning-focus-text-color: - * button-ghost-warning-hover-color: + * button-ghost-warning-hover-background-color: + * button-ghost-warning-hover-border-color: + * button-ghost-warning-hover-text-color: + * button-ghost-warning-active-background-color: + * button-ghost-warning-active-border-color: * button-ghost-warning-active-text-color: + * button-ghost-warning-disabled-background-color: + * button-ghost-warning-disabled-border-color: * button-ghost-warning-disabled-text-color: * button-ghost-danger-text-color: + * button-ghost-danger-focus-background-color: + * button-ghost-danger-focus-border-color: * button-ghost-danger-focus-text-color: - * button-ghost-danger-hover-color: + * button-ghost-danger-hover-background-color: + * button-ghost-danger-hover-border-color: + * button-ghost-danger-hover-text-color: + * button-ghost-danger-active-background-color: + * button-ghost-danger-active-border-color: * button-ghost-danger-active-text-color: + * button-ghost-danger-disabled-background-color: + * button-ghost-danger-disabled-border-color: * button-ghost-danger-disabled-text-color: + * button-ghost-control-text-color: + * button-ghost-control-focus-background-color: + * button-ghost-control-focus-border-color: + * button-ghost-control-focus-text-color: + * button-ghost-control-hover-background-color: + * button-ghost-control-hover-border-color: + * button-ghost-control-hover-text-color: + * button-ghost-control-active-background-color: + * button-ghost-control-active-border-color: + * button-ghost-control-active-text-color: + * button-ghost-control-disabled-background-color: + * button-ghost-control-disabled-border-color: + * button-ghost-control-disabled-text-color: * button-hero-border-color: * button-hero-border-style: * button-hero-border-width: @@ -269,6 +418,19 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * button-hero-glow-size: * button-hero-outline-color: * button-hero-outline-width: + * button-hero-basic-text-color: + * button-hero-basic-bevel-color: + * button-hero-basic-glow-color: + * button-hero-basic-left-background-color: + * button-hero-basic-right-background-color: + * button-hero-basic-focus-left-background-color: + * button-hero-basic-focus-right-background-color: + * button-hero-basic-hover-left-background-color: + * button-hero-basic-hover-right-background-color: + * button-hero-basic-active-left-background-color: + * button-hero-basic-active-right-background-color: + * button-hero-basic-disabled-background-color: + * button-hero-basic-disabled-text-color: * button-hero-primary-text-color: * button-hero-primary-bevel-color: * button-hero-primary-glow-color: @@ -334,6 +496,19 @@ export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero'; * button-hero-danger-active-right-background-color: * button-hero-danger-disabled-background-color: * button-hero-danger-disabled-text-color: + * button-hero-control-text-color: + * button-hero-control-bevel-color: + * button-hero-control-glow-color: + * button-hero-control-left-background-color: + * button-hero-control-right-background-color: + * button-hero-control-focus-left-background-color: + * button-hero-control-focus-right-background-color: + * button-hero-control-hover-left-background-color: + * button-hero-control-hover-right-background-color: + * button-hero-control-active-left-background-color: + * button-hero-control-active-right-background-color: + * button-hero-control-disabled-background-color: + * button-hero-control-disabled-text-color: */ @Component({ selector: 'button[nbButton],a[nbButton],input[type="button"][nbButton],input[type="submit"][nbButton]', @@ -355,7 +530,7 @@ export class NbButtonComponent implements AfterViewInit { /** * Button status (adds specific styles): - * `primary`, `info`, `success`, `warning`, `danger` + * `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control`. */ @Input() status: NbComponentStatus = 'primary'; @@ -509,6 +684,16 @@ export class NbButtonComponent implements AfterViewInit { return this.status === 'danger'; } + @HostBinding('class.status-basic') + get basic() { + return this.status === 'basic'; + } + + @HostBinding('class.status-control') + get control() { + return this.status === 'control'; + } + @HostBinding('class.shape-rectangle') get rectangle() { return this.shape === 'rectangle'; diff --git a/src/framework/theme/components/calendar/calendar-range.component.ts b/src/framework/theme/components/calendar/calendar-range.component.ts index d954333e12..722ca2aa1c 100644 --- a/src/framework/theme/components/calendar/calendar-range.component.ts +++ b/src/framework/theme/components/calendar/calendar-range.component.ts @@ -34,7 +34,7 @@ export interface NbCalendarRange { * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbCalendarRangeModule, * ], * }) diff --git a/src/framework/theme/components/card/card.component.ts b/src/framework/theme/components/card/card.component.ts index 3b02509ac9..4d507d3a8d 100644 --- a/src/framework/theme/components/card/card.component.ts +++ b/src/framework/theme/components/card/card.component.ts @@ -20,6 +20,8 @@ import { NbComponentStatus } from '../component-status'; * card-header-text-font-size: * card-header-text-font-weight: * card-header-text-line-height: + * card-header-basic-background-color: + * card-header-basic-text-color: * card-header-primary-background-color: * card-header-primary-text-color: * card-header-info-background-color: @@ -30,6 +32,8 @@ import { NbComponentStatus } from '../component-status'; * card-header-warning-text-color: * card-header-danger-background-color: * card-header-danger-text-color: + * card-header-control-background-color: + * card-header-control-text-color: */ @Component({ selector: 'nb-card-header', @@ -167,29 +171,17 @@ export class NbCardComponent { /** * Card status: - * primary, info, success, warning, danger + * `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control` */ @Input() - get status(): '' | NbComponentStatus { - return this._status; - } - set status(value: '' | NbComponentStatus) { - this._status = value; - } - _status: '' | NbComponentStatus = ''; + status: '' | NbComponentStatus = ''; /** * Card accent (color of the top border): - * primary, info, success, warning, danger + * `basic`, `primary`, `info`, `success`, `warning`, `danger`, `control` */ @Input() - get accent(): '' | NbComponentStatus { - return this._accent; - } - set accent(value: '' | NbComponentStatus) { - this._accent = value; - } - _accent: '' | NbComponentStatus; + accent: '' | NbComponentStatus = ''; @HostBinding('class.size-tiny') get tiny() { @@ -241,6 +233,16 @@ export class NbCardComponent { return this.status === 'danger'; } + @HostBinding('class.status-basic') + get basic() { + return this.status === 'basic'; + } + + @HostBinding('class.status-control') + get control() { + return this.status === 'control'; + } + @HostBinding('class.accent') get hasAccent() { return this.accent; @@ -270,4 +272,14 @@ export class NbCardComponent { get dangerAccent() { return this.accent === 'danger'; } + + @HostBinding('class.accent-basic') + get basicAccent() { + return this.accent === 'basic'; + } + + @HostBinding('class.accent-control') + get controlAccent() { + return this.accent === 'control'; + } } diff --git a/src/framework/theme/components/card/reveal-card/reveal-card.component.ts b/src/framework/theme/components/card/reveal-card/reveal-card.component.ts index dd7f79ef3e..3d8f04cbb1 100644 --- a/src/framework/theme/components/card/reveal-card/reveal-card.component.ts +++ b/src/framework/theme/components/card/reveal-card/reveal-card.component.ts @@ -34,7 +34,7 @@ import { Component, Input, HostBinding } from '@angular/core'; * ```ts * @NgModule({ * imports: [ - * // ... + * // ... * NbCardModule, * ], * }) diff --git a/src/framework/theme/components/chat/_chat.component.theme.scss b/src/framework/theme/components/chat/_chat.component.theme.scss index 9cb9776a0d..b2f51426fa 100644 --- a/src/framework/theme/components/chat/_chat.component.theme.scss +++ b/src/framework/theme/components/chat/_chat.component.theme.scss @@ -28,7 +28,6 @@ border-top-right-radius: nb-theme(chat-border-radius); padding: nb-theme(chat-padding); - color: nb-theme(chat-header-text-color); font-family: nb-theme(chat-header-text-font-family); font-size: nb-theme(chat-header-text-font-size); font-weight: nb-theme(chat-header-text-font-weight); @@ -39,9 +38,9 @@ overflow: auto; flex: 1; @include nb-scrollbars( - nb-theme(chart-scrollbar-color), - nb-theme(chart-scrollbar-background-color), - nb-theme(chart-scrollbar-width)); + nb-theme(chat-scrollbar-color), + nb-theme(chat-scrollbar-background-color), + nb-theme(chat-scrollbar-width)); } .messages { diff --git a/src/framework/theme/components/chat/chat-form.component.spec.ts b/src/framework/theme/components/chat/chat-form.component.spec.ts index 61f3afa8ba..d679cbcaae 100644 --- a/src/framework/theme/components/chat/chat-form.component.spec.ts +++ b/src/framework/theme/components/chat/chat-form.component.spec.ts @@ -18,8 +18,8 @@ describe('NbChatFormComponent', () => { describe('getInputStatus', () => { - it('should return no status by default', () => { - expect(chatFormComponent.getInputStatus()).toEqual(''); + it('should return basic status by default', () => { + expect(chatFormComponent.getInputStatus()).toEqual('basic'); }); it('should return component status if input focused', () => { @@ -36,17 +36,34 @@ describe('NbChatFormComponent', () => { expect(chatFormComponent.getInputStatus()).toEqual('info'); }); - it('should return component status if file over', () => { + it('should return primary if file over and status is basic or control', () => { + chatFormComponent.fileOver = true; + + expect(chatFormComponent.getInputStatus()).toEqual('primary'); + }); + + it('should return status if file over and status is not basic nor control', () => { chatFormComponent.status = 'info'; chatFormComponent.fileOver = true; expect(chatFormComponent.getInputStatus()).toEqual('info'); }); + }); - it('should return primary status if file over and no status set', () => { - chatFormComponent.fileOver = true; + describe('getButtonStatus', () => { - expect(chatFormComponent.getInputStatus()).toEqual('primary'); + it('should return primary if status is basic or control', () => { + chatFormComponent.status = 'basic'; + expect(chatFormComponent.getButtonStatus()).toEqual('primary'); + + chatFormComponent.status = 'control'; + expect(chatFormComponent.getButtonStatus()).toEqual('primary'); + }); + + it('should return status if status is not basic nor control', () => { + chatFormComponent.status = 'info'; + + expect(chatFormComponent.getButtonStatus()).toEqual('info'); }); }); }); diff --git a/src/framework/theme/components/chat/chat-form.component.ts b/src/framework/theme/components/chat/chat-form.component.ts index e16512f7c3..4c26862ee8 100644 --- a/src/framework/theme/components/chat/chat-form.component.ts +++ b/src/framework/theme/components/chat/chat-form.component.ts @@ -75,7 +75,7 @@ import { NbComponentStatus } from '../component-status'; placeholder="{{ fileOver ? 'Drop file to send' : 'Type a message' }}" (keyup.enter)="sendMessage()"> +
+ +
diff --git a/src/playground/with-layout/button/button-colors.component.ts b/src/playground/with-layout/button/button-colors.component.ts index 1a7c0ae0ed..0989693db9 100644 --- a/src/playground/with-layout/button/button-colors.component.ts +++ b/src/playground/with-layout/button/button-colors.component.ts @@ -10,6 +10,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; selector: 'nb-button-colors', changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './button-colors.component.html', + styles: [`.example-items-rows { align-items: center; }`], }) export class ButtonColorsComponent { } diff --git a/src/playground/with-layout/button/button-interactive.component.html b/src/playground/with-layout/button/button-interactive.component.html index fa2eb5fe75..dd957abc61 100644 --- a/src/playground/with-layout/button/button-interactive.component.html +++ b/src/playground/with-layout/button/button-interactive.component.html @@ -1,34 +1,49 @@ - Button Colors
- Size: + Size: {{ size }}
- Shape: + Shape: {{ shape }}
- + -
-

{{ appearance }}:

- - - - +
+

{{ appearance }}:

+
+
+ +
+
+
+
+ +
+
diff --git a/src/playground/with-layout/button/button-interactive.component.scss b/src/playground/with-layout/button/button-interactive.component.scss index 8fa034b947..bb80e97b60 100644 --- a/src/playground/with-layout/button/button-interactive.component.scss +++ b/src/playground/with-layout/button/button-interactive.component.scss @@ -1,5 +1,8 @@ +@import '../../styles/themes'; + fieldset { border: 0; + padding: 0; } nb-radio-group { @@ -8,11 +11,28 @@ nb-radio-group { margin-bottom: 1rem; } +.appearance-container { + display: flex; + flex-wrap: wrap; +} + +.appearance-row { + display: flex; + flex: 1 0 100%; + + &:not(:last-child) { + padding-bottom: 1rem; + } +} + .appearance-name { + margin-top: 1.5rem; + margin-bottom: 0; text-transform: capitalize; + flex: 1 0 100%; } -[nbButton] { - margin-right: 0.75rem; - margin-bottom: 1rem; +.status-container { + padding: 1rem; + border-radius: 0.25rem; } diff --git a/src/playground/with-layout/button/button-interactive.component.ts b/src/playground/with-layout/button/button-interactive.component.ts index 9a8f18ca33..ea0fd2e5b1 100644 --- a/src/playground/with-layout/button/button-interactive.component.ts +++ b/src/playground/with-layout/button/button-interactive.component.ts @@ -8,10 +8,10 @@ import { NbButtonAppearance, NbComponentStatus, NbComponentShape, NbComponentSiz export class ButtonInteractiveComponent { appearances: NbButtonAppearance[] = [ 'filled', 'outline', 'ghost', 'hero' ]; shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ]; - statuses: NbComponentStatus[] = [ 'primary', 'success', 'info', 'warning', 'danger' ]; + statuses: NbComponentStatus[] = [ 'basic', 'primary', 'success', 'info', 'warning', 'danger', 'control' ]; sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; selectedShape: NbComponentShape = 'rectangle'; selectedSize: NbComponentSize = 'medium'; - enableAll: boolean = false; + showDisabledRow = true; } diff --git a/src/playground/with-layout/checkbox/checkbox-disabled.component.html b/src/playground/with-layout/checkbox/checkbox-disabled.component.html index 67fb22744a..d0ea4ae3f8 100644 --- a/src/playground/with-layout/checkbox/checkbox-disabled.component.html +++ b/src/playground/with-layout/checkbox/checkbox-disabled.component.html @@ -1,5 +1,5 @@ - + Disabled Indeterminate disabled Checked disabled diff --git a/src/playground/with-layout/checkbox/checkbox-indeterminate.component.ts b/src/playground/with-layout/checkbox/checkbox-indeterminate.component.ts index efe5211bc7..b84fb76feb 100644 --- a/src/playground/with-layout/checkbox/checkbox-indeterminate.component.ts +++ b/src/playground/with-layout/checkbox/checkbox-indeterminate.component.ts @@ -2,11 +2,21 @@ import { Component } from '@angular/core'; @Component({ template: ` - Indeterminate + + + Indeterminate -
- -
+ + + `, + styles: [` + button { + display: block; + margin-top: 1rem; + } + `], }) export class CheckboxIndeterminateComponent {} diff --git a/src/playground/with-layout/checkbox/checkbox-status.component.html b/src/playground/with-layout/checkbox/checkbox-status.component.html index 92284a23e0..8cf62627f1 100644 --- a/src/playground/with-layout/checkbox/checkbox-status.component.html +++ b/src/playground/with-layout/checkbox/checkbox-status.component.html @@ -1,9 +1,13 @@ - + + Basic Primary Success Danger Warning Info +
+ Control +
diff --git a/src/playground/with-layout/checkbox/checkbox-status.component.scss b/src/playground/with-layout/checkbox/checkbox-status.component.scss new file mode 100644 index 0000000000..f7dc96d6cf --- /dev/null +++ b/src/playground/with-layout/checkbox/checkbox-status.component.scss @@ -0,0 +1,9 @@ +@import '../../styles/themes'; + +nb-card-body.example-items-rows { + align-items: center; +} + +nb-checkbox:not(:only-child) { + margin-right: 1.5rem; +} diff --git a/src/playground/with-layout/checkbox/checkbox-status.component.ts b/src/playground/with-layout/checkbox/checkbox-status.component.ts index 9150059867..851b148121 100644 --- a/src/playground/with-layout/checkbox/checkbox-status.component.ts +++ b/src/playground/with-layout/checkbox/checkbox-status.component.ts @@ -3,7 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-checkbox-status', templateUrl: './checkbox-status.component.html', + styleUrls: ['./checkbox-status.component.scss'], }) - export class CheckboxStatusComponent { } diff --git a/src/playground/with-layout/icon/icon-colors.component.html b/src/playground/with-layout/icon/icon-colors.component.html index 2ebd99cb30..152055298c 100644 --- a/src/playground/with-layout/icon/icon-colors.component.html +++ b/src/playground/with-layout/icon/icon-colors.component.html @@ -1,9 +1,14 @@ + + +
+ +
diff --git a/src/playground/with-layout/icon/icon-colors.component.scss b/src/playground/with-layout/icon/icon-colors.component.scss new file mode 100644 index 0000000000..ef6c334c5a --- /dev/null +++ b/src/playground/with-layout/icon/icon-colors.component.scss @@ -0,0 +1,6 @@ +@import '../../styles/themes'; + +.control-status-example { + padding: 0.25rem; + margin: 0.25rem; +} diff --git a/src/playground/with-layout/icon/icon-colors.component.ts b/src/playground/with-layout/icon/icon-colors.component.ts index f5825d1b58..f4d4edf464 100644 --- a/src/playground/with-layout/icon/icon-colors.component.ts +++ b/src/playground/with-layout/icon/icon-colors.component.ts @@ -10,6 +10,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; selector: 'nb-icon-colors', changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './icon-colors.component.html', + styleUrls: ['./icon-colors.component.scss'], }) export class IconColorsComponent { } diff --git a/src/playground/with-layout/infinite-list/news-post-placeholder.component.scss b/src/playground/with-layout/infinite-list/news-post-placeholder.component.scss index 0261956159..a782d8fd8e 100644 --- a/src/playground/with-layout/infinite-list/news-post-placeholder.component.scss +++ b/src/playground/with-layout/infinite-list/news-post-placeholder.component.scss @@ -2,6 +2,7 @@ :host { display: block; + width: 100%; } .title-placeholder { diff --git a/src/playground/with-layout/input/input-colors.component.scss b/src/playground/with-layout/input/input-colors.component.scss new file mode 100644 index 0000000000..6ea1f100d0 --- /dev/null +++ b/src/playground/with-layout/input/input-colors.component.scss @@ -0,0 +1,5 @@ +@import '../../styles/themes'; + +nb-card-body.example-items-col { + align-items: stretch; +} diff --git a/src/playground/with-layout/input/input-colors.component.ts b/src/playground/with-layout/input/input-colors.component.ts index d4906ad069..427cedafcc 100644 --- a/src/playground/with-layout/input/input-colors.component.ts +++ b/src/playground/with-layout/input/input-colors.component.ts @@ -10,14 +10,18 @@ import { Component } from '@angular/core'; template: ` - + +
+ +
`, + styleUrls: [`./input-colors.component.scss`], }) export class InputColorsComponent {} diff --git a/src/playground/with-layout/progress-bar/progress-bar-status.component.html b/src/playground/with-layout/progress-bar/progress-bar-status.component.html index af9e36650c..56c46a7fc8 100644 --- a/src/playground/with-layout/progress-bar/progress-bar-status.component.html +++ b/src/playground/with-layout/progress-bar/progress-bar-status.component.html @@ -1,9 +1,13 @@ - primary - info + basic + primary + info success - warning - danger + warning + danger +
+ control +
diff --git a/src/playground/with-layout/progress-bar/progress-bar-status.component.scss b/src/playground/with-layout/progress-bar/progress-bar-status.component.scss new file mode 100644 index 0000000000..72b5c7829b --- /dev/null +++ b/src/playground/with-layout/progress-bar/progress-bar-status.component.scss @@ -0,0 +1,9 @@ +@import '../../styles/themes'; + +nb-progress-bar ~ nb-progress-bar { + margin-top: 1rem; +} + +.control-status-example { + margin-top: 1rem; +} diff --git a/src/playground/with-layout/progress-bar/progress-bar-status.component.ts b/src/playground/with-layout/progress-bar/progress-bar-status.component.ts index 1ae3a5e6ba..cba01f6f9c 100644 --- a/src/playground/with-layout/progress-bar/progress-bar-status.component.ts +++ b/src/playground/with-layout/progress-bar/progress-bar-status.component.ts @@ -3,11 +3,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-progress-bar-status', templateUrl: './progress-bar-status.component.html', - styles: [` - nb-progress-bar ~ nb-progress-bar { - margin-top: 1rem; - } - `], + styleUrls: ['./progress-bar-status.component.scss'], }) export class ProgressBarStatusComponent { diff --git a/src/playground/with-layout/radio/radio-statuses.component.ts b/src/playground/with-layout/radio/radio-statuses.component.ts index daa87d4f07..fb5d08cb0e 100644 --- a/src/playground/with-layout/radio/radio-statuses.component.ts +++ b/src/playground/with-layout/radio/radio-statuses.component.ts @@ -1,10 +1,14 @@ import { Component } from '@angular/core'; +import { NbComponentStatus } from '../../../framework/theme/components/component-status'; @Component({ template: ` - + {{ appearance }} - - Reset value - Option 1 - Option 2 - Option 3 (disabled) - Option 4 - - Option 5 - Option 6 - - - Option 7 - Option 8 - - +
+ + Reset value + Option 1 + Option 2 + Option 3 (disabled) + Option 4 + + Option 5 + Option 6 + + + Option 7 + Option 8 + + +
- - Reset - Option 1 - Option 2 - Option 3 (disabled) - Option 4 - - Option 5 - Option 6 - - - Option 7 - Option 8 - - +
+ + Reset + Option 1 + Option 2 + Option 3 (disabled) + Option 4 + + Option 5 + Option 6 + + + Option 7 + Option 8 + + +
- - +
+ + +
- - Option 1 - +
+ + Option 1 + +
diff --git a/src/playground/with-layout/select/select-interactive.component.scss b/src/playground/with-layout/select/select-interactive.component.scss index 04bec070cc..bff9099cd9 100644 --- a/src/playground/with-layout/select/select-interactive.component.scss +++ b/src/playground/with-layout/select/select-interactive.component.scss @@ -37,10 +37,10 @@ nb-radio-group { .select-column { display: flex; flex-direction: column; - align-items: flex-start; + align-items: stretch; } -nb-select { +.select-container { margin: 0.5rem 0; &:first-child { diff --git a/src/playground/with-layout/select/select-interactive.component.ts b/src/playground/with-layout/select/select-interactive.component.ts index 62c07b800f..c6b776e29b 100644 --- a/src/playground/with-layout/select/select-interactive.component.ts +++ b/src/playground/with-layout/select/select-interactive.component.ts @@ -26,7 +26,7 @@ export class SelectInteractiveComponent { appearances: NbSelectAppearance[] = [ 'outline', 'filled', 'hero' ]; sizes: NbComponentSize[] = [ 'tiny', 'small', 'medium', 'large', 'giant' ]; shapes: NbComponentShape[] = [ 'rectangle', 'semi-round', 'round' ]; - statuses: ('' | NbComponentStatus)[] = [ '', 'primary', 'success', 'info', 'warning', 'danger' ]; + statuses: NbComponentStatus[] = [ 'basic', 'primary', 'success', 'info', 'warning', 'danger', 'control' ]; selectDisabledOption(): void { this.singleSelectValue = this.disabledOptionValue; diff --git a/src/playground/with-layout/select/select-status.component.html b/src/playground/with-layout/select/select-status.component.html index c5e3936dff..91f8bb1e53 100644 --- a/src/playground/with-layout/select/select-status.component.html +++ b/src/playground/with-layout/select/select-status.component.html @@ -1,5 +1,12 @@ - + + + Option 1 + Option 2 + Option 3 + Option 4 + + Option 1 Option 2 @@ -34,5 +41,14 @@ Option 3 Option 4 + +
+ + Option 1 + Option 2 + Option 3 + Option 4 + +
diff --git a/src/playground/with-layout/spinner/spinner-button.component.ts b/src/playground/with-layout/spinner/spinner-button.component.ts index 987334ee6a..9ee05de10d 100644 --- a/src/playground/with-layout/spinner/spinner-button.component.ts +++ b/src/playground/with-layout/spinner/spinner-button.component.ts @@ -9,25 +9,21 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-app-spinner-button', template: ` - + - - - - diff --git a/src/playground/with-layout/spinner/spinner-colors.component.html b/src/playground/with-layout/spinner/spinner-colors.component.html index a5d8336afc..375c1a8ccf 100644 --- a/src/playground/with-layout/spinner/spinner-colors.component.html +++ b/src/playground/with-layout/spinner/spinner-colors.component.html @@ -1,3 +1,9 @@ + + + Some card content. + + + Some card content. @@ -27,3 +33,9 @@ Some card content. + + + + Some card content. + + diff --git a/src/playground/with-layout/spinner/spinner-colors.component.scss b/src/playground/with-layout/spinner/spinner-colors.component.scss new file mode 100644 index 0000000000..b78f121d74 --- /dev/null +++ b/src/playground/with-layout/spinner/spinner-colors.component.scss @@ -0,0 +1,5 @@ +@import '../../styles/themes'; + +.control-status-example { + color: nb-theme(color-basic-100); +} diff --git a/src/playground/with-layout/spinner/spinner-colors.component.ts b/src/playground/with-layout/spinner/spinner-colors.component.ts index d06e942fae..5ee220deb5 100644 --- a/src/playground/with-layout/spinner/spinner-colors.component.ts +++ b/src/playground/with-layout/spinner/spinner-colors.component.ts @@ -10,6 +10,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; selector: 'nb-spinner-colors', changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './spinner-colors.component.html', + styleUrls: ['./spinner-colors.component.scss'], }) export class SpinnerColorsComponent { } diff --git a/src/playground/with-layout/toastr/toastr-statuses.component.ts b/src/playground/with-layout/toastr/toastr-statuses.component.ts index eedc5d8a30..8585070691 100644 --- a/src/playground/with-layout/toastr/toastr-statuses.component.ts +++ b/src/playground/with-layout/toastr/toastr-statuses.component.ts @@ -1,15 +1,20 @@ import { Component, HostBinding } from '@angular/core'; -import { NbToastrService } from '@nebular/theme'; +import { NbToastrService, NbComponentStatus } from '@nebular/theme'; @Component({ selector: 'nb-toastr-statuses', template: ` - - - - - - + + + + + + + + + + + `, styles: [ ` @@ -28,7 +33,7 @@ export class ToastrStatusesComponent { constructor(private toastrService: NbToastrService) { } - showToast(status) { + showToast(status: NbComponentStatus) { this.toastrService.show(status, `Toast: ${++this.index}`, { status }); } } diff --git a/src/playground/with-layout/toastr/toastr.module.ts b/src/playground/with-layout/toastr/toastr.module.ts index 748f562c3d..38903cb551 100644 --- a/src/playground/with-layout/toastr/toastr.module.ts +++ b/src/playground/with-layout/toastr/toastr.module.ts @@ -5,7 +5,7 @@ */ import { NgModule } from '@angular/core'; -import { NbButtonModule, NbRadioModule, NbToastrModule } from '@nebular/theme'; +import { NbButtonModule, NbRadioModule, NbToastrModule, NbCardModule } from '@nebular/theme'; import { ToastrRoutingModule } from './toastr-routing.module'; import { ToastrDestroyByClickComponent } from './toastr-destroy-by-click.component'; import { ToastrDurationComponent } from './toastr-duration.component'; @@ -37,6 +37,7 @@ import { FormsModule } from '@angular/forms'; NbToastrModule.forRoot(), NbButtonModule, NbRadioModule, + NbCardModule, ToastrRoutingModule, ], }) diff --git a/src/playground/with-layout/toggle/toggle-status.component.ts b/src/playground/with-layout/toggle/toggle-status.component.ts index 48f5785741..fa72706c8f 100644 --- a/src/playground/with-layout/toggle/toggle-status.component.ts +++ b/src/playground/with-layout/toggle/toggle-status.component.ts @@ -10,15 +10,24 @@ import { Component } from '@angular/core'; selector: 'nb-toggle-status', template: ` - - - - - - + + Basic + Primary + Success + Info + Warning + Danger +
+ Control +
`, + styles: [` + .example-items-rows { + align-items: center; + } + `], }) export class ToggleStatusComponent { } diff --git a/src/playground/with-layout/tooltip/tooltip-colors.component.html b/src/playground/with-layout/tooltip/tooltip-colors.component.html index df9ae9f34e..1852b83941 100644 --- a/src/playground/with-layout/tooltip/tooltip-colors.component.html +++ b/src/playground/with-layout/tooltip/tooltip-colors.component.html @@ -1,6 +1,28 @@ - - - - - - + + + + + + + + + + + + diff --git a/src/playground/with-layout/tooltip/tooltip-colors.component.ts b/src/playground/with-layout/tooltip/tooltip-colors.component.ts index 2b845b8fd3..0b4e4b321e 100644 --- a/src/playground/with-layout/tooltip/tooltip-colors.component.ts +++ b/src/playground/with-layout/tooltip/tooltip-colors.component.ts @@ -10,16 +10,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-tooltip-colors', templateUrl: './tooltip-colors.component.html', - styles: [` - ::ng-deep nb-layout-column { - justify-content: center; - align-items: center; - display: flex; - } - button { - margin: 0.5rem; - } - `], + styleUrls: ['./tooltip-examples.scss'], }) export class TooltipColorsComponent { } diff --git a/src/playground/with-layout/tooltip/tooltip-examples.scss b/src/playground/with-layout/tooltip/tooltip-examples.scss new file mode 100644 index 0000000000..8457a9ccd5 --- /dev/null +++ b/src/playground/with-layout/tooltip/tooltip-examples.scss @@ -0,0 +1,10 @@ +:host { + display: flex; + justify-content: center; + align-items: center; + height: 100%; +} + +nb-card { + margin: 0; +} diff --git a/src/playground/with-layout/tooltip/tooltip-placements.component.html b/src/playground/with-layout/tooltip/tooltip-placements.component.html index 9196ac25ff..771865844f 100644 --- a/src/playground/with-layout/tooltip/tooltip-placements.component.html +++ b/src/playground/with-layout/tooltip/tooltip-placements.component.html @@ -1,6 +1,10 @@ - - - - - - + + + + + + + + + + diff --git a/src/playground/with-layout/tooltip/tooltip-placements.component.ts b/src/playground/with-layout/tooltip/tooltip-placements.component.ts index 101d1967cd..2953ce7b8a 100644 --- a/src/playground/with-layout/tooltip/tooltip-placements.component.ts +++ b/src/playground/with-layout/tooltip/tooltip-placements.component.ts @@ -10,17 +10,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-tooltip-placements', templateUrl: './tooltip-placements.component.html', - styles: [` - :host { - justify-content: center; - align-items: center; - display: flex; - height: 10rem; - } - button { - margin: 0.5rem; - } - `], + styleUrls: ['./tooltip-examples.scss'], }) export class TooltipPlacementsComponent { } diff --git a/src/playground/with-layout/tooltip/tooltip-showcase.component.html b/src/playground/with-layout/tooltip/tooltip-showcase.component.html index c99cfb9414..166c2fce61 100644 --- a/src/playground/with-layout/tooltip/tooltip-showcase.component.html +++ b/src/playground/with-layout/tooltip/tooltip-showcase.component.html @@ -1 +1,5 @@ - + + + + + diff --git a/src/playground/with-layout/tooltip/tooltip-showcase.component.ts b/src/playground/with-layout/tooltip/tooltip-showcase.component.ts index b2eb1ec008..ccf433d4c8 100644 --- a/src/playground/with-layout/tooltip/tooltip-showcase.component.ts +++ b/src/playground/with-layout/tooltip/tooltip-showcase.component.ts @@ -10,13 +10,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-tooltip-showcase', templateUrl: './tooltip-showcase.component.html', - styles: [` - ::ng-deep nb-layout-column { - justify-content: center; - align-items: center; - display: flex; - } - `], + styleUrls: ['./tooltip-examples.scss'], }) export class TooltipShowcaseComponent { } diff --git a/src/playground/with-layout/tooltip/tooltip-with-icon.component.html b/src/playground/with-layout/tooltip/tooltip-with-icon.component.html index 26094a13d6..158a1990e9 100644 --- a/src/playground/with-layout/tooltip/tooltip-with-icon.component.html +++ b/src/playground/with-layout/tooltip/tooltip-with-icon.component.html @@ -1,7 +1,11 @@ - + + + - + - + + + diff --git a/src/playground/with-layout/tooltip/tooltip-with-icon.component.ts b/src/playground/with-layout/tooltip/tooltip-with-icon.component.ts index 156676342d..7142b4a505 100644 --- a/src/playground/with-layout/tooltip/tooltip-with-icon.component.ts +++ b/src/playground/with-layout/tooltip/tooltip-with-icon.component.ts @@ -10,16 +10,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'nb-tooltip-with-icon', templateUrl: './tooltip-with-icon.component.html', - styles: [` - ::ng-deep nb-layout-column { - justify-content: center; - align-items: center; - display: flex; - } - button { - margin: 0.5rem; - } - `], + styleUrls: ['./tooltip-examples.scss'], }) export class TooltipWithIconComponent { } diff --git a/src/playground/with-layout/tooltip/tooltip.module.ts b/src/playground/with-layout/tooltip/tooltip.module.ts index 008be5ebc9..4970b5dab4 100644 --- a/src/playground/with-layout/tooltip/tooltip.module.ts +++ b/src/playground/with-layout/tooltip/tooltip.module.ts @@ -5,7 +5,7 @@ */ import { NgModule } from '@angular/core'; -import { NbButtonModule, NbTooltipModule } from '@nebular/theme'; +import { NbButtonModule, NbTooltipModule, NbCardModule } from '@nebular/theme'; import { TooltipRoutingModule } from './tooltip-routing.module'; import { TooltipColorsComponent } from './tooltip-colors.component'; import { TooltipPlacementsComponent } from './tooltip-placements.component'; @@ -19,6 +19,6 @@ import { TooltipWithIconComponent } from './tooltip-with-icon.component'; TooltipShowcaseComponent, TooltipWithIconComponent, ], - imports: [ NbButtonModule, NbTooltipModule, TooltipRoutingModule ], + imports: [ NbCardModule, NbButtonModule, NbTooltipModule, TooltipRoutingModule ], }) export class TooltipModule {}