Update JSON API
[src/app-framework-demo.git] / afm-client / bower_components / foundation-apps / scss / components / _accordion.scss
diff --git a/afm-client/bower_components/foundation-apps/scss/components/_accordion.scss b/afm-client/bower_components/foundation-apps/scss/components/_accordion.scss
new file mode 100644 (file)
index 0000000..032bd02
--- /dev/null
@@ -0,0 +1,72 @@
+/*\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