--- /dev/null
+/*\r
+ ACCORDION\r
+ ---------\r
+\r
+ The trusy accordion allows you to create a series of vertical tabs.\r
+*/\r
+\r
+/// @Foundation.settings\r
+// Accordion\r
+$accordion-border: 1px solid $gray-dark !default;\r
+\r
+$accordion-title-background: $gray-light !default;\r
+$accordion-title-background-hover: smartscale($accordion-title-background, 5%) !default;\r
+$accordion-title-background-active: smartscale($accordion-title-background, 3%) !default;\r
+$accordion-title-color: isitlight($accordion-title-background) !default;\r
+$accordion-title-color-active: isitlight($accordion-title-background) !default;\r
+\r
+$accordion-title-padding: $global-padding !default;\r
+$accordion-content-padding: $global-padding !default;\r
+///\r
+\r
+@mixin accordion-title(\r
+ $background: $accordion-title-background,\r
+ $background-hover: $accordion-title-background-hover,\r
+ $background-active: $accordion-title-background-active,\r
+ $color: $accordion-title-color,\r
+ $color-active: $accordion-title-color-active,\r
+ $padding: $accordion-title-padding\r
+) {\r
+ padding: $padding;\r
+ background: $background;\r
+ color: $color;\r
+ line-height: 1;\r
+ cursor: pointer;\r
+\r
+ &:hover {\r
+ background: $background-hover;\r
+ }\r
+\r
+ .is-active > & {\r
+ background: $background-active;\r
+ color: $color-active;\r
+ }\r
+}\r
+\r
+@mixin accordion-content(\r
+ $padding: $accordion-content-padding\r
+) {\r
+ padding: $padding;\r
+\r
+ display: none;\r
+ .is-active > & {\r
+ display: block;\r
+ }\r
+}\r
+\r
+@include exports(accordion) {\r
+ .accordion {\r
+ @if hasvalue($accordion-border) {\r
+ border: $accordion-border;\r
+ }\r
+ }\r
+ .accordion-item {\r
+\r
+ }\r
+ .accordion-title {\r
+ @include accordion-title;\r
+ }\r
+ .accordion-content {\r
+ @include accordion-content;\r
+ }\r
+}\r