fix(accordion): fix accordion border-radius and shadow (#584)

akveo · Jul 27, 2018 · 22ba6ef · 22ba6ef
1 parent 60bb79e
commit 22ba6ef
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/src/framework/theme/components/accordion/_accordion.component.theme.scss b/src/framework/theme/components/accordion/_accordion.component.theme.scss
@@ -9,8 +9,6 @@
  border-bottom-width: nb-theme(accordion-header-border-width);
  border-bottom-style: nb-theme(accordion-header-border-type);
  border-bottom-color: nb-theme(accordion-header-border-color);
- border-top-left-radius: nb-theme(accordion-border-radius);
- border-top-right-radius: nb-theme(accordion-border-radius);
  color: nb-theme(accordion-header-fg-heading);
 
  font-family: nb-theme(accordion-header-font-family);
@@ -23,6 +21,10 @@
 @mixin nb-accordion-theme() {
 
  nb-accordion {
+ display: block;
+ box-shadow: nb-theme(accordion-item-shadow);
+ border-radius: nb-theme(accordion-border-radius);
+
  nb-accordion-item-header {
  position: relative;
  @include nb-accordion-item-header();
@@ -39,12 +41,29 @@
  font-weight: nb-theme(accordion-item-font-weight);
  background: nb-theme(accordion-item-bg);
  color: nb-theme(accordion-item-fg-text);
- box-shadow: nb-theme(accordion-item-shadow);
 
  &.disabled nb-accordion-item-header {
  color: nb-theme(accordion-header-disabled-fg);
  cursor: default;
  }
+
+ &:first-child {
+ border-top-left-radius: nb-theme(accordion-border-radius);
+ border-top-right-radius: nb-theme(accordion-border-radius);
+ }
+ &:last-child {
+ border-bottom-left-radius: nb-theme(accordion-border-radius);
+ border-bottom-right-radius: nb-theme(accordion-border-radius);
+
+ &.collapsed nb-accordion-item-header {
+ border-bottom: none;
+ }
+ }
+ }
+ nb-accordion-item:not(.collapsed) + nb-accordion-item nb-accordion-item-header {
+ border-top-width: nb-theme(accordion-header-border-width);
+ border-top-style: nb-theme(accordion-header-border-type);
+ border-top-color: nb-theme(accordion-header-border-color);
  }
 
  nb-accordion-item-body .item-body {

diff --git a/src/framework/theme/components/accordion/accordion-item.component.scss b/src/framework/theme/components/accordion/accordion-item.component.scss
@@ -7,8 +7,4 @@
 :host {
  display: flex;
  flex-direction: column;
-
- &.collapsed + ::ng-deep nb-accordion-item.collapsed {
- border-radius: 0;
- }
 }
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -573,6 +573,7 @@ $theme: (
  accordion-header-border-width: 1px,
  accordion-header-border-type: solid,
  accordion-header-border-color: accordion-separator,
+ accordion-border-radius: radius,
  accordion-item-bg: color-bg,
  accordion-item-font-size: font-size,
  accordion-item-font-weight: font-weight-normal,