Skip to content

Commit

Permalink
feat(alert): Eva theme (#1406)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:

NbAlertComponent 'closableValue' replaced with 'closable'.

All NbAlertComponent static fields removed.
SIZE_XXSMALL, SIZE_XSMALL, SIZE_SMALL, SIZE_MEDIUM, SIZE_LARGE,
SIZE_XLARGE, SIZE_XXLARGE, STATUS_ACTIVE, STATUS_DISABLED,
STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING,
STATUS_DANGER, ACCENT_ACTIVE, ACCENT_DISABLED, ACCENT_PRIMARY,
ACCENT_INFO, ACCENT_SUCCESS, ACCENT_WARNING, ACCENT_DANGER,
OUTLINE_ACTIVE, OUTLINE_DISABLED, OUTLINE_PRIMARY, OUTLINE_INFO,
OUTLINE_SUCCESS, OUTLINE_WARNING, OUTLINE_DANGE.

Active status removed.
Disabled become input instead of status value. Disabled class renamed to
'disabled'.

NbAlertComponent 'hasAccent', 'hasStatus', 'hasOutline' getters removed.

Status class names changed to 'status-[status-name]'.
Outline class names changed to 'outline-[status-name]'.
Accent class names changed to 'accent-[status-name]'.

Following theme properties were renamed:

alert-font-size -> alert-text-font-size
alert-line-height -> alert-text-line-height
alert-font-weight -> alert-text-font-weight
alert-fg -> alert-text-color
alert-bg -> alert-background-color
alert-disabled-bg -> alert-disabled-background-color
alert-disabled-fg -> alert-disabled-text-color
alert-primary-bg -> alert-primary-background-color
alert-info-bg -> alert-info-background-color
alert-success-bg -> alert-success-background-color
alert-warning-bg -> alert-warning-background-color
alert-danger-bg -> alert-danger-background-color
alert-height-xsmall -> alert-tiny-height
alert-height-small -> alert-small-height
alert-height-medium -> alert-medium-height
alert-height-large -> alert-medium-padding
alert-height-xlarge -> alert-large-height
alert-closable-padding -> alert-closable-start-padding
alert-margin -> alert-bottom-margin

Following theme properties removed:
alert-outline-fg
alert-active-bg
alert-height-xxsmall
alert-height-xxlarge
alert-button-padding
  • Loading branch information
@yggg
yggg committed May 27, 2019
1 parent 2d841d0 commit 8c6c677
Show file tree
Hide file tree
Showing 11 changed files with 242 additions and 386 deletions.
149 changes: 36 additions & 113 deletions src/framework/theme/components/alert/_alert.component.theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,123 +16,27 @@

@mixin nb-alert-theme() {
nb-alert {
font-size: nb-theme(alert-font-size);
line-height: nb-theme(alert-line-height);
font-weight: nb-theme(alert-font-weight);

background: nb-theme(alert-bg);
color: nb-theme(alert-outline-fg);
// TODO: move alert margin style to layout
margin-bottom: nb-theme(alert-margin);
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);
line-height: nb-theme(alert-text-line-height);
padding: nb-theme(alert-padding);

@include nb-scrollbars(
nb-theme(scrollbar-fg),
nb-theme(scrollbar-bg),
nb-theme(scrollbar-width));

&.status {
color: nb-theme(alert-fg);
}

&.xxsmall-alert {
height: nb-theme(alert-height-xxsmall);
}
&.xsmall-alert {
height: nb-theme(alert-height-xsmall);
}
&.small-alert {
height: nb-theme(alert-height-small);
}
&.medium-alert {
height: nb-theme(alert-height-medium);
}
&.large-alert {
height: nb-theme(alert-height-large);
}
&.xlarge-alert {
height: nb-theme(alert-height-xlarge);
}
&.xxlarge-alert {
height: nb-theme(alert-height-xxlarge);
}

&.active-alert {
background-color: nb-theme(alert-active-bg);
}
&.disabled-alert {
background-color: nb-theme(alert-disabled-bg);
color: nb-theme(alert-disabled-fg);
}
&.primary-alert {
background-color: nb-theme(alert-primary-bg);
}
&.info-alert {
background-color: nb-theme(alert-info-bg);
}
&.success-alert {
background-color: nb-theme(alert-success-bg);
}
&.warning-alert {
background-color: nb-theme(alert-warning-bg);
}
&.danger-alert {
background-color: nb-theme(alert-danger-bg);
}

&.accent {
border-top-style: solid;
border-top-width: nb-theme(alert-border-radius);

& nb-alert-header {
border-radius: 0;
}
}
// TODO: move alert margin style to layout
margin-bottom: nb-theme(alert-bottom-margin);

&.accent-active {
border-top-color: nb-theme(alert-active-bg);
}
&.accent-disabled {
border-top-color: nb-theme(alert-disabled-bg);
}
&.accent-primary {
border-top-color: nb-theme(alert-primary-bg);
}
&.accent-success {
border-top-color: nb-theme(alert-success-bg);
}
&.accent-info {
border-top-color: nb-theme(alert-info-bg);
}
&.accent-warning {
border-top-color: nb-theme(alert-warning-bg);
}
&.accent-danger {
border-top-color: nb-theme(alert-danger-bg);
}
@include nb-scrollbars(
nb-theme(alert-scrollbar-color),
nb-theme(alert-scrollbar-background-color),
nb-theme(alert-scrollbar-width));

&.outline-active {
border: 2px solid nb-theme(alert-active-bg);
}
&.outline-disabled {
border: 2px solid nb-theme(alert-disabled-bg);
}
&.outline-primary {
border: 2px solid nb-theme(alert-primary-bg);
}
&.outline-success {
border: 2px solid nb-theme(alert-success-bg);
}
&.outline-info {
border: 2px solid nb-theme(alert-info-bg);
}
&.outline-warning {
border: 2px solid nb-theme(alert-warning-bg);
}
&.outline-danger {
border: 2px solid nb-theme(alert-danger-bg);
&.closable {
@include nb-ltr(padding-right, nb-theme(alert-closable-start-padding));
@include nb-rtl(padding-left, nb-theme(alert-closable-start-padding));
}

.close {
Expand All @@ -142,9 +46,28 @@
cursor: pointer;
font-family: monospace;
}
}

&.closable {
padding-right: nb-theme(alert-closable-padding);
@each $size in nb-get-sizes() {
nb-alert.size-#{$size} {
height: nb-theme(alert-#{$size}-height);
}
}

@each $status in nb-get-statuses() {
nb-alert {
&.status-#{$status} {
color: nb-theme(alert-#{$status}-text-color);
background-color: nb-theme(alert-#{$status}-background-color);
}

&.accent-#{$status} {
border-top: nb-theme(alert-border-radius) solid nb-theme(alert-accent-#{$status}-color);
}

&.outline-#{$status} {
border: nb-theme(alert-outline-width) solid nb-theme(alert-outline-#{$status}-color);
}
}
}
}
Expand Down
10 changes: 8 additions & 2 deletions src/framework/theme/components/alert/alert.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,24 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*/

@import '../../styles/core/mixins';

:host {
display: flex;
flex-direction: column;
position: relative;

.close {
@include nb-ltr(right, 0);
@include nb-rtl(left, 0);
}
}

.close {
position: absolute;
top: 0;
right: 0;
color: inherit;
background-color: transparent;
border: 0;
-webkit-appearance: none;
appearance: none;
}
Loading

0 comments on commit 8c6c677

Please sign in to comment.