From 2b701378713f58f3312c3eaae6d6ab29a05936d9 Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Fri, 29 Apr 2016 14:51:20 -0400 Subject: [PATCH] fix radius and hover on Accordion --- scss/components/_accordion.scss | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss index 3d07bad01..e6e4da7bc 100644 --- a/scss/components/_accordion.scss +++ b/scss/components/_accordion.scss @@ -46,12 +46,19 @@ $accordion-content-padding: 1rem !default; @mixin accordion-container { list-style-type: none; background: $accordion-background; - border: $accordion-content-border; - border-bottom: 0; - border-radius: $global-radius; margin-#{$global-left}: 0; } +/// Adds styles for the accordion item. Apply this to the list item within an accordion ul. +@mixin accordion-item { + &:first-child > :first-child { + border-radius: $global-radius $global-radius 0 0; + } + &:last-child > :last-child { + border-radius: 0 0 $global-radius $global-radius; + } +} + /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item. @mixin accordion-title { display: block; @@ -60,7 +67,12 @@ $accordion-content-padding: 1rem !default; font-size: rem-calc(12); color: $accordion-item-color; position: relative; - border-bottom: $accordion-content-border; + border: $accordion-content-border; + border-bottom: 0; + :last-child:not(.is-active) > & { + border-radius: 0 0 $global-radius $global-radius; + border-bottom: $accordion-content-border; + } &:hover, &:focus { @@ -86,9 +98,13 @@ $accordion-content-padding: 1rem !default; @mixin accordion-content { padding: $accordion-content-padding; display: none; - border-bottom: $accordion-content-border; + border: $accordion-content-border; + border-bottom: 0; background-color: $accordion-content-background; color: $accordion-content-color; + :last-child > &:last-child { + border-bottom: $accordion-content-border; + } } @mixin foundation-accordion { @@ -97,7 +113,7 @@ $accordion-content-padding: 1rem !default; } .accordion-item { - // This class doesn't need styles! + @include accordion-item; } .accordion-title { -- 2.47.2