Copy framework-specific docs example CSS from foundation-docs repo

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index b2031c2e37526f0162b2b93f8573d7ce80d01afc..ffe952c8b2a1c20cd63e4d4caf3cefa90196b7f3 100644 (file)
--- 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 (file)
index 0000000..d11829d
--- /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 (file)
index 0000000..15cc87f
--- /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 (file)
index 0000000..0be535b
--- /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 (file)
index 0000000..591407a
--- /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 (file)
index 0000000..8c82068
--- /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;
+}