From f0478e77e6cc92267b4addcce30999dce8715637 Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Tue, 29 Mar 2016 13:43:00 -0700 Subject: [PATCH] Copy framework-specific docs example CSS from foundation-docs repo --- docs/assets/scss/docs.scss | 121 +------------------- docs/assets/scss/examples/_grid.scss | 77 +++++++++++++ docs/assets/scss/examples/_motion-ui.scss | 25 ++++ docs/assets/scss/examples/_off-canvas.scss | 7 ++ docs/assets/scss/{ => examples}/_orbit.scss | 0 docs/assets/scss/examples/_reveal.scss | 7 ++ docs/assets/scss/examples/_top-bar.scss | 5 + 7 files changed, 127 insertions(+), 115 deletions(-) create mode 100644 docs/assets/scss/examples/_grid.scss create mode 100644 docs/assets/scss/examples/_motion-ui.scss create mode 100644 docs/assets/scss/examples/_off-canvas.scss rename docs/assets/scss/{ => examples}/_orbit.scss (100%) create mode 100644 docs/assets/scss/examples/_reveal.scss create mode 100644 docs/assets/scss/examples/_top-bar.scss diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index b2031c2e3..ffe952c8b 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -19,118 +19,9 @@ @include motion-ui-transitions; @import 'foundation-docs'; -@import 'orbit'; - -.docs-newsletter { margin-top: 0 !important; } -#subForm { margin-top: 1rem; } - -#studiosCallout { - border-top: 1px solid #f6f4f4; - padding: 45px 45px 20px 45px !important; - background-color: #fafafa !important; - - .property-label { - font-family: "Proxima Nova Condensed Bold","Proxima Nova Condensed","proxima-nova-condensed","Helvetica Neue",Helvetica,Arial,sans-serif; - text-transform: uppercase; - font-weight: bold; - } - - h3 { - font-size: 26px; - margin-top: 20px; - color: #333; - } - - .lead { - font-size: 18px; - color: #333; - } - - img { - width: 100%; - height: 250px; - overflow: hidden; - } - - - /* -= Button + Label Colors Based on Property =- */ - - &.university { - .button { background: #ff6908; - &:hover { - background-color: #de5700; - transition: .25 ease all; - } - } - .property-label { color: #ff6908; } - } - &.foundation { - .button { background: #2CADBE; - &:hover { - background-color: #228795; - transition: .25 ease all; - } - } - .property-label { color: #2CADBE; } - } - &.studios { - .button { background: #2CADBE; - &:hover { - background-color: #228795; - transition: .25 ease all; - } - } - .property-label { color: #2CADBE; } - } - } - - #studiosCallout { - @media (max-width: 650px) { - text-align: left; - - .button { - width: auto; - } - - h1 { - margin-top: 0; - } - } - } - - /* Banner for announcements */ -a.notice { - display:block; - overflow: hidden; - position: relative; - padding: 1rem 0; - width:100%; - background: url(../img/inky-banner-bg-boat.svg) no-repeat center center; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - - @include breakpoint(medium down) { - background: url(../img/inky-banner-bg-clear.svg) no-repeat center center; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - - } - - .info { - left: 0; - right: 0; - z-index: 20; - margin-left: auto; - margin-right: auto; - - h5 { - color: #ffffff; - text-align: center; - margin-bottom: 0 !important; - } - } -} +@import 'examples/grid'; +@import 'examples/motion-uo'; +@import 'examples/off-canvas'; +@import 'examples/orbit'; +@import 'examples/reveal'; +@import 'examples/top-bar'; diff --git a/docs/assets/scss/examples/_grid.scss b/docs/assets/scss/examples/_grid.scss new file mode 100644 index 000000000..d11829d1c --- /dev/null +++ b/docs/assets/scss/examples/_grid.scss @@ -0,0 +1,77 @@ +// Grid +.row.display { + background: #eee; + font-size: 11px; + margin-bottom: 10px; + line-height: 2rem; + border: solid 1px #c6c6c6; + margin-left: 0 !important; + margin-right: 0 !important; + + .columns { + &:nth-child(2), + &.small-centered, + &.large-centered { + background: darken(#eee, 5%); + } + + &.color-end { + background: darken(#eee, 10%) + } + } +} + +.row.display-end { + background: #fff; + font-size: 11px; + margin-bottom: 10px; + line-height: 2rem; + border: solid 1px #c6c6c6; + margin-left: 0 !important; + margin-right: 0 !important; + + .columns { + background: darken(#eee, 5%); + border-left: 1px solid #c6c6c6; + + &.color-end { + background: darken(#eee, 10%) + } + } +} + +// Flex Grid +[id^="docs-flex"].docs-component .docs-code-live { + @include foundation-flex-grid; + + .row { + background: #f9f9f9; + font-size: 11px; + margin-bottom: 10px; + line-height: 2rem; + border: solid 1px #c6c6c6; + margin-left: 0; + margin-right: 0; + margin-bottom: 1.5rem; + + // Disable clearfix + &::before, + &::after { + display: none; + } + } + + .column, + .columns { + float: none; + width: auto; + margin-right: -1px; // Not sure why this has to be here + + &:nth-child(odd) { + background: #eee; + } + &:nth-child(even) { + background: #ddd; + } + } +} diff --git a/docs/assets/scss/examples/_motion-ui.scss b/docs/assets/scss/examples/_motion-ui.scss new file mode 100644 index 000000000..15cc87f78 --- /dev/null +++ b/docs/assets/scss/examples/_motion-ui.scss @@ -0,0 +1,25 @@ +.docs-transitions { + max-width: 400px; +} + +.docs-transition-demo { + @include thumbnail; + display: block; + max-width: 400px; + margin: 0 auto; + backface-visibility: hidden; +} + +@include mui-series { + #series-example-1 { + @include mui-queue(0.5s, 0s, fade, slide(in, up)); + } + + #series-example-2 { + @include mui-queue(0.5s, 0.5s, fade, spin); + } + + #series-example-3 { + @include mui-queue(0.5s, 0s, fade, hinge(in, bottom)); + } +} diff --git a/docs/assets/scss/examples/_off-canvas.scss b/docs/assets/scss/examples/_off-canvas.scss new file mode 100644 index 000000000..0be535bbd --- /dev/null +++ b/docs/assets/scss/examples/_off-canvas.scss @@ -0,0 +1,7 @@ +body > .off-canvas { + padding-top: 2rem; +} + +.docs-example-burger { + @include hamburger; +} diff --git a/docs/assets/scss/_orbit.scss b/docs/assets/scss/examples/_orbit.scss similarity index 100% rename from docs/assets/scss/_orbit.scss rename to docs/assets/scss/examples/_orbit.scss diff --git a/docs/assets/scss/examples/_reveal.scss b/docs/assets/scss/examples/_reveal.scss new file mode 100644 index 000000000..591407af1 --- /dev/null +++ b/docs/assets/scss/examples/_reveal.scss @@ -0,0 +1,7 @@ +.docs-example-modal { + display: block; + position: static; + width: 100%; + max-width: none; + margin-bottom: 1rem; +} diff --git a/docs/assets/scss/examples/_top-bar.scss b/docs/assets/scss/examples/_top-bar.scss new file mode 100644 index 000000000..8c8206841 --- /dev/null +++ b/docs/assets/scss/examples/_top-bar.scss @@ -0,0 +1,5 @@ +.docs-code-live .top-bar-title strong { + margin-top: 7px; + display: inline-block; + margin-left: 8px; +} -- 2.47.2