From: Geoff Kimball Date: Fri, 26 Feb 2016 22:54:06 +0000 (-0800) Subject: Refine and clean up docs pages for accordion, equalizer, magellan, and orbit X-Git-Tag: v6.2.2-rc1~4^2~27 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=abefd648b0bc8c08cf7cdc529c83e9d788c66df4;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Refine and clean up docs pages for accordion, equalizer, magellan, and orbit --- diff --git a/docs/assets/scss/_orbit.scss b/docs/assets/scss/_orbit.scss new file mode 100644 index 000000000..c5be05864 --- /dev/null +++ b/docs/assets/scss/_orbit.scss @@ -0,0 +1,22 @@ +// Examples for the Orbit documentation. + +.docs-example-orbit-slide { + padding: 2rem 4rem; + color: $white; + + .orbit-slide:nth-of-type(1) & { + background: dodgerblue; + } + + .orbit-slide:nth-of-type(2) & { + background: rebeccapurple; + } + + .orbit-slide:nth-of-type(3) & { + background: darkgoldenrod; + } + + .orbit-slide:nth-of-type(4) & { + background: lightseagreen; + } +} diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index bff76b277..b2031c2e3 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -11,8 +11,6 @@ @import 'foundation'; @import 'motion-ui'; -$-zf-flex-classes-imported: true; - @include foundation-everything; @include foundation-flex-classes; @include foundation-range-input; @@ -21,6 +19,7 @@ $-zf-flex-classes-imported: true; @include motion-ui-transitions; @import 'foundation-docs'; +@import 'orbit'; .docs-newsletter { margin-top: 0 !important; } #subForm { margin-top: 1rem; } @@ -106,7 +105,7 @@ a.notice { position: relative; padding: 1rem 0; width:100%; - background: url(../img/inky-banner-bg-boat.svg) no-repeat center center; + background: url(../img/inky-banner-bg-boat.svg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; @@ -128,8 +127,8 @@ a.notice { margin-left: auto; margin-right: auto; - h5 { - color: #ffffff; + h5 { + color: #ffffff; text-align: center; margin-bottom: 0 !important; } diff --git a/docs/pages/accordion.md b/docs/pages/accordion.md index ac940b9bb..27a2078f5 100644 --- a/docs/pages/accordion.md +++ b/docs/pages/accordion.md @@ -13,13 +13,10 @@ The container for an accordion needs the class `.accordion`, and the attribute ` ``` -The default class for an accordion section is `.accordion-item`. Inside each section is a title, default `.accordion-title`, and corresponding content pane `.accordion-content`. Please note, the only opinionated component here is the use of an anchor `` for the title link, which controls the opening and closing of the pane. You can include your own attributes, or our JavaScript will assign it for you. JS assigned attributes include unique id's, aria attributes, and roles. You do still need to include the `data-tab-content` attribute for your content pane. +Inside the accordion, place a series of panes with the class `.accordion-item` and the attribute `data-accordion-item`. To mark which pane should be open by default, add the class `.is-active` to that pane. -Note that the `data-accordion-item` attribute on each list item is required when not using `
  • `. +Each pane has a **title**, an `` with the class `.accordion-title`, and a **content area**, an element with the class `.accordion-content` and the attribute `data-tab-content`. -Loading a page with an open pane is achieved by adding the `is-active` class to one, (or more, if using the multiExpand option), `.accordion-item` element. - -This is the minimum markup for creating an Accordion with Foundation, repeating the `accordion-item`, `accordion-title`, and `accordion-content` elements as many times as you require. ```html