Skip to content

Commit 8c6c677

Browse files
ygggyggg
committed
feat(alert): Eva theme (#1406)
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
1 parent 2d841d0 commit 8c6c677

File tree

11 files changed

+242
-386
lines changed

11 files changed

+242
-386
lines changed

‎src/framework/theme/components/alert/_alert.component.theme.scss‎

Lines changed: 36 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -16,123 +16,27 @@
1616

1717
@mixin nb-alert-theme() {
1818
nb-alert {
19-
font-size: nb-theme(alert-font-size);
20-
line-height: nb-theme(alert-line-height);
21-
font-weight: nb-theme(alert-font-weight);
22-
23-
background: nb-theme(alert-bg);
24-
color: nb-theme(alert-outline-fg);
25-
// TODO: move alert margin style to layout
26-
margin-bottom: nb-theme(alert-margin);
19+
background-color: nb-theme(alert-background-color);
2720
border-radius: nb-theme(alert-border-radius);
2821
box-shadow: nb-theme(alert-shadow);
22+
color: nb-theme(alert-text-color);
23+
font-family: nb-theme(alert-text-font-family);
24+
font-size: nb-theme(alert-text-font-size);
25+
font-weight: nb-theme(alert-text-font-weight);
26+
line-height: nb-theme(alert-text-line-height);
2927
padding: nb-theme(alert-padding);
3028

31-
@include nb-scrollbars(
32-
nb-theme(scrollbar-fg),
33-
nb-theme(scrollbar-bg),
34-
nb-theme(scrollbar-width));
35-
36-
&.status {
37-
color: nb-theme(alert-fg);
38-
}
39-
40-
&.xxsmall-alert {
41-
height: nb-theme(alert-height-xxsmall);
42-
}
43-
&.xsmall-alert {
44-
height: nb-theme(alert-height-xsmall);
45-
}
46-
&.small-alert {
47-
height: nb-theme(alert-height-small);
48-
}
49-
&.medium-alert {
50-
height: nb-theme(alert-height-medium);
51-
}
52-
&.large-alert {
53-
height: nb-theme(alert-height-large);
54-
}
55-
&.xlarge-alert {
56-
height: nb-theme(alert-height-xlarge);
57-
}
58-
&.xxlarge-alert {
59-
height: nb-theme(alert-height-xxlarge);
60-
}
61-
62-
&.active-alert {
63-
background-color: nb-theme(alert-active-bg);
64-
}
65-
&.disabled-alert {
66-
background-color: nb-theme(alert-disabled-bg);
67-
color: nb-theme(alert-disabled-fg);
68-
}
69-
&.primary-alert {
70-
background-color: nb-theme(alert-primary-bg);
71-
}
72-
&.info-alert {
73-
background-color: nb-theme(alert-info-bg);
74-
}
75-
&.success-alert {
76-
background-color: nb-theme(alert-success-bg);
77-
}
78-
&.warning-alert {
79-
background-color: nb-theme(alert-warning-bg);
80-
}
81-
&.danger-alert {
82-
background-color: nb-theme(alert-danger-bg);
83-
}
84-
85-
&.accent {
86-
border-top-style: solid;
87-
border-top-width: nb-theme(alert-border-radius);
88-
89-
& nb-alert-header {
90-
border-radius: 0;
91-
}
92-
}
29+
// TODO: move alert margin style to layout
30+
margin-bottom: nb-theme(alert-bottom-margin);
9331

94-
&.accent-active {
95-
border-top-color: nb-theme(alert-active-bg);
96-
}
97-
&.accent-disabled {
98-
border-top-color: nb-theme(alert-disabled-bg);
99-
}
100-
&.accent-primary {
101-
border-top-color: nb-theme(alert-primary-bg);
102-
}
103-
&.accent-success {
104-
border-top-color: nb-theme(alert-success-bg);
105-
}
106-
&.accent-info {
107-
border-top-color: nb-theme(alert-info-bg);
108-
}
109-
&.accent-warning {
110-
border-top-color: nb-theme(alert-warning-bg);
111-
}
112-
&.accent-danger {
113-
border-top-color: nb-theme(alert-danger-bg);
114-
}
32+
@include nb-scrollbars(
33+
nb-theme(alert-scrollbar-color),
34+
nb-theme(alert-scrollbar-background-color),
35+
nb-theme(alert-scrollbar-width));
11536

116-
&.outline-active {
117-
border: 2px solid nb-theme(alert-active-bg);
118-
}
119-
&.outline-disabled {
120-
border: 2px solid nb-theme(alert-disabled-bg);
121-
}
122-
&.outline-primary {
123-
border: 2px solid nb-theme(alert-primary-bg);
124-
}
125-
&.outline-success {
126-
border: 2px solid nb-theme(alert-success-bg);
127-
}
128-
&.outline-info {
129-
border: 2px solid nb-theme(alert-info-bg);
130-
}
131-
&.outline-warning {
132-
border: 2px solid nb-theme(alert-warning-bg);
133-
}
134-
&.outline-danger {
135-
border: 2px solid nb-theme(alert-danger-bg);
37+
&.closable {
38+
@include nb-ltr(padding-right, nb-theme(alert-closable-start-padding));
39+
@include nb-rtl(padding-left, nb-theme(alert-closable-start-padding));
13640
}
13741

13842
.close {
@@ -142,9 +46,28 @@
14246
cursor: pointer;
14347
font-family: monospace;
14448
}
49+
}
14550

146-
&.closable {
147-
padding-right: nb-theme(alert-closable-padding);
51+
@each $size in nb-get-sizes() {
52+
nb-alert.size-#{$size} {
53+
height: nb-theme(alert-#{$size}-height);
54+
}
55+
}
56+
57+
@each $status in nb-get-statuses() {
58+
nb-alert {
59+
&.status-#{$status} {
60+
color: nb-theme(alert-#{$status}-text-color);
61+
background-color: nb-theme(alert-#{$status}-background-color);
62+
}
63+
64+
&.accent-#{$status} {
65+
border-top: nb-theme(alert-border-radius) solid nb-theme(alert-accent-#{$status}-color);
66+
}
67+
68+
&.outline-#{$status} {
69+
border: nb-theme(alert-outline-width) solid nb-theme(alert-outline-#{$status}-color);
70+
}
14871
}
14972
}
15073
}

‎src/framework/theme/components/alert/alert.component.scss‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,24 @@
44
* Licensed under the MIT License. See License.txt in the project root for license information.
55
*/
66

7+
@import '../../styles/core/mixins';
8+
79
:host {
810
display: flex;
911
flex-direction: column;
1012
position: relative;
13+
14+
.close {
15+
@include nb-ltr(right, 0);
16+
@include nb-rtl(left, 0);
17+
}
1118
}
1219

1320
.close {
1421
position: absolute;
1522
top: 0;
16-
right: 0;
1723
color: inherit;
1824
background-color: transparent;
1925
border: 0;
20-
-webkit-appearance: none;
26+
appearance: none;
2127
}

0 commit comments

Comments
 (0)