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,