Skip to content

Commit 98a159c

Browse files
ygggyggg
committed
feat(accordion): Eva styles (#1362)
BREAKING CHANGE: NbAccordionComponent static properties were unused and removed. STATUS_ACTIVE, STATUS_DISABLED, STATUS_PRIMARY, STATUS_INFO, STATUS_SUCCESS, STATUS_WARNING,STATUS_DANGER. Following theme properties were renamed: accordion-header-font-family -> accordion-header-text-font-family accordion-header-font-size -> accordion-header-text-font-size accordion-header-font-weight -> accordion-header-text-font-weight accordion-header-fg-heading -> accordion-header-text-color accordion-header-disabled-fg -> accordion-header-disabled-text-color accordion-header-border-type -> accordion-header-border-style accordion-item-bg -> accordion-item-background-color accordion-item-font-size -> accordion-item-text-font-size accordion-item-font-weight -> accordion-item-text-font-weight accordion-item-font-family -> accordion-item-text-font-family accordion-item-fg-text -> accordion-item-text-color accordion-item-shadow -> accordion-shadow 'accordion-separator' removed.
1 parent 06fccf7 commit 98a159c

File tree

3 files changed

+55
-58
lines changed

3 files changed

+55
-58
lines changed

‎src/framework/theme/components/accordion/_accordion.component.theme.scss

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
*/
66

77
@mixin nb-accordion-item-header() {
8-
padding: nb-theme(accordion-padding);
98
border-bottom-width: nb-theme(accordion-header-border-width);
10-
border-bottom-style: nb-theme(accordion-header-border-type);
9+
border-bottom-style: nb-theme(accordion-header-border-style);
1110
border-bottom-color: nb-theme(accordion-header-border-color);
12-
color: nb-theme(accordion-header-fg-heading);
13-
14-
font-family: nb-theme(accordion-header-font-family);
15-
font-size: nb-theme(accordion-header-font-size);
16-
font-weight: nb-theme(accordion-header-font-weight);
11+
color: nb-theme(accordion-header-text-color);
12+
font-family: nb-theme(accordion-header-text-font-family);
13+
font-size: nb-theme(accordion-header-text-font-size);
14+
font-weight: nb-theme(accordion-header-text-font-weight);
15+
line-height: nb-theme(accordion-header-text-line-height);
16+
padding: nb-theme(accordion-padding);
1717

1818
@include nb-headings();
1919
}
@@ -22,7 +22,7 @@
2222

2323
nb-accordion {
2424
display: block;
25-
box-shadow: nb-theme(accordion-item-shadow);
25+
box-shadow: nb-theme(accordion-shadow);
2626
border-radius: nb-theme(accordion-border-radius);
2727

2828
nb-accordion-item-header {
@@ -37,13 +37,15 @@
3737
}
3838

3939
nb-accordion-item {
40-
font-family: nb-theme(accordion-item-font-family);
41-
font-weight: nb-theme(accordion-item-font-weight);
42-
background: nb-theme(accordion-item-bg);
43-
color: nb-theme(accordion-item-fg-text);
40+
background-color: nb-theme(accordion-item-background-color);
41+
color: nb-theme(accordion-item-text-color);
42+
font-family: nb-theme(accordion-item-text-font-family);
43+
font-size: nb-theme(accordion-item-text-font-size);
44+
font-weight: nb-theme(accordion-item-text-font-weight);
45+
line-height: nb-theme(accordion-item-text-line-height);
4446

4547
&.disabled nb-accordion-item-header {
46-
color: nb-theme(accordion-header-disabled-fg);
48+
color: nb-theme(accordion-header-disabled-text-color);
4749
cursor: default;
4850
}
4951

@@ -61,16 +63,16 @@
6163
}
6264
}
6365
nb-accordion-item:not(.collapsed) + nb-accordion-item nb-accordion-item-header {
64-
border-top-width: nb-theme(accordion-header-border-width);
65-
border-top-style: nb-theme(accordion-header-border-type);
6666
border-top-color: nb-theme(accordion-header-border-color);
67+
border-top-style: nb-theme(accordion-header-border-style);
68+
border-top-width: nb-theme(accordion-header-border-width);
6769
}
6870

6971
nb-accordion-item-body .item-body {
7072
flex: 1;
7173
-ms-flex: 1 1 auto;
7274
overflow: auto;
73-
padding: nb-theme(card-padding);
75+
padding: nb-theme(accordion-padding);
7476
position: relative;
7577
}
7678
}

‎src/framework/theme/components/accordion/accordion.component.ts

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -30,38 +30,40 @@ import { convertToBoolProperty } from '../helpers';
3030
* ```ts
3131
* @NgModule({
3232
* imports: [
33-
* // ...
33+
* // ...
3434
* NbAccordionModule,
3535
* ],
3636
* })
3737
* export class PageModule { }
3838
* ```
3939
* ### Usage
4040
*
41-
* With `multi` mode acordion can have multiple items expanded:
42-
* @stacked-example(Showcase, accordion/accordion-multi.component)
41+
* With `multi` mode accordion can have multiple items expanded:
42+
* @stacked-example(Multiple expanded items, accordion/accordion-multi.component)
4343
*
44-
* `NbAccordionItemComponent` has several method, for example it is possible to trigger item click/toggle:
45-
* @stacked-example(Showcase, accordion/accordion-toggle.component)
44+
* `NbAccordionItemComponent` has several methods, for example it is possible to trigger item click/toggle:
45+
* @stacked-example(Expand API, accordion/accordion-toggle.component)
4646
*
4747
* @styles
4848
*
49+
* accordion-border-radius:
4950
* accordion-padding:
50-
* accordion-separator:
51-
* accordion-header-font-family:
52-
* accordion-header-font-size:
53-
* accordion-header-font-weight:
54-
* accordion-header-fg-heading:
55-
* accordion-header-disabled-fg:
56-
* accordion-header-border-width:
57-
* accordion-header-border-type:
51+
* accordion-shadow:
52+
* accordion-header-text-color:
53+
* accordion-header-text-font-family:
54+
* accordion-header-text-font-size:
55+
* accordion-header-text-font-weight:
56+
* accordion-header-text-line-height:
57+
* accordion-header-disabled-text-color:
5858
* accordion-header-border-color:
59-
* accordion-item-bg:
60-
* accordion-item-font-size:
61-
* accordion-item-font-weight:
62-
* accordion-item-font-family:
63-
* accordion-item-fg-text:
64-
* accordion-item-shadow:
59+
* accordion-header-border-style:
60+
* accordion-header-border-width:
61+
* accordion-item-background-color:
62+
* accordion-item-text-color:
63+
* accordion-item-text-font-family:
64+
* accordion-item-text-font-size:
65+
* accordion-item-text-font-weight:
66+
* accordion-item-text-line-height:
6567
*/
6668
@Component({
6769
selector: 'nb-accordion',
@@ -72,14 +74,6 @@ import { convertToBoolProperty } from '../helpers';
7274
})
7375
export class NbAccordionComponent {
7476

75-
static readonly STATUS_ACTIVE = 'active';
76-
static readonly STATUS_DISABLED = 'disabled';
77-
static readonly STATUS_PRIMARY = 'primary';
78-
static readonly STATUS_INFO = 'info';
79-
static readonly STATUS_SUCCESS = 'success';
80-
static readonly STATUS_WARNING = 'warning';
81-
static readonly STATUS_DANGER = 'danger';
82-
8377
openCloseItems = new Subject<boolean>();
8478

8579
/**

‎src/framework/theme/styles/themes/_default.scss

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1227,23 +1227,24 @@ $theme: (
12271227
stepper-completed-icon-weight: font-weight-ultra-bold,
12281228
stepper-step-padding: padding,
12291229

1230+
accordion-border-radius: 0.75rem,
12301231
accordion-padding: padding,
1231-
accordion-separator: separator,
1232-
accordion-header-font-family: font-secondary,
1233-
accordion-header-font-size: font-size-lg,
1234-
accordion-header-font-weight: font-weight-normal,
1235-
accordion-header-fg-heading: color-fg-heading,
1236-
accordion-header-disabled-fg: color-fg,
1232+
accordion-shadow: none,
1233+
accordion-header-text-color: text-dark-color,
1234+
accordion-header-text-font-family: text-subtitle-font-family,
1235+
accordion-header-text-font-size: text-subtitle-font-size,
1236+
accordion-header-text-font-weight: text-subtitle-font-weight,
1237+
accordion-header-text-line-height: text-subtitle-line-height,
1238+
accordion-header-disabled-text-color: text-disabled-color,
1239+
accordion-header-border-color: divider-color,
1240+
accordion-header-border-style: solid,
12371241
accordion-header-border-width: 1px,
1238-
accordion-header-border-type: solid,
1239-
accordion-header-border-color: accordion-separator,
1240-
accordion-border-radius: radius,
1241-
accordion-item-bg: color-bg,
1242-
accordion-item-font-size: font-size,
1243-
accordion-item-font-weight: font-weight-normal,
1244-
accordion-item-font-family: font-main,
1245-
accordion-item-fg-text: color-fg-text,
1246-
accordion-item-shadow: shadow,
1242+
accordion-item-background-color: color-white,
1243+
accordion-item-text-color: text-dark-color,
1244+
accordion-item-text-font-family: text-paragraph-font-weight,
1245+
accordion-item-text-font-size: text-paragraph-font-family,
1246+
accordion-item-text-font-weight: text-paragraph-font-size,
1247+
accordion-item-text-line-height: text-paragraph-line-height,
12471248

12481249
list-item-border-color: divider-color,
12491250
list-item-padding: 1rem,

0 commit comments

Comments
 (0)