From 12cd2a911f9f31faf29b34dce9c8aabf68546d2d Mon Sep 17 00:00:00 2001 From: Geoff Kimball Date: Mon, 14 Dec 2015 11:29:01 -0800 Subject: [PATCH] Reference Sass in foundation-docs library --- docs/assets/scss/_anchor.scss | 42 -- docs/assets/scss/_banner.scss | 66 --- docs/assets/scss/_building-blocks.scss | 32 -- docs/assets/scss/_code.scss | 225 ---------- docs/assets/scss/_color-block.scss | 29 -- docs/assets/scss/_compatibility.scss | 40 -- docs/assets/scss/_examples.scss | 137 ------- docs/assets/scss/_footer.scss | 542 ------------------------- docs/assets/scss/_header.scss | 71 ---- docs/assets/scss/_index.scss | 31 -- docs/assets/scss/_navigation.scss | 99 ----- docs/assets/scss/_newsletter.scss | 48 --- docs/assets/scss/_notices.scss | 23 -- docs/assets/scss/_page.scss | 51 --- docs/assets/scss/_reference.scss | 66 --- docs/assets/scss/_search.scss | 104 ----- docs/assets/scss/_topbar.scss | 171 -------- docs/assets/scss/_typography.scss | 21 - docs/assets/scss/docs.scss | 44 +- gulp/sass.js | 3 +- 20 files changed, 3 insertions(+), 1842 deletions(-) delete mode 100644 docs/assets/scss/_anchor.scss delete mode 100644 docs/assets/scss/_banner.scss delete mode 100644 docs/assets/scss/_building-blocks.scss delete mode 100644 docs/assets/scss/_code.scss delete mode 100644 docs/assets/scss/_color-block.scss delete mode 100644 docs/assets/scss/_compatibility.scss delete mode 100644 docs/assets/scss/_examples.scss delete mode 100644 docs/assets/scss/_footer.scss delete mode 100644 docs/assets/scss/_header.scss delete mode 100644 docs/assets/scss/_index.scss delete mode 100644 docs/assets/scss/_navigation.scss delete mode 100644 docs/assets/scss/_newsletter.scss delete mode 100644 docs/assets/scss/_notices.scss delete mode 100644 docs/assets/scss/_page.scss delete mode 100644 docs/assets/scss/_reference.scss delete mode 100644 docs/assets/scss/_search.scss delete mode 100644 docs/assets/scss/_topbar.scss delete mode 100644 docs/assets/scss/_typography.scss diff --git a/docs/assets/scss/_anchor.scss b/docs/assets/scss/_anchor.scss deleted file mode 100644 index 61e9bdf6c..000000000 --- a/docs/assets/scss/_anchor.scss +++ /dev/null @@ -1,42 +0,0 @@ -// Every heading has a hidden icon with a link to the anchor for that section. - -// The heading itself needs position: relative to make the positioning work -.docs-heading { - position: relative; -} - -.docs-heading-icon { - display: none; - position: absolute; - right: 100%; - width: 2rem; - font-size: 2rem; - top: 0.4rem; - margin-right: -0.1rem; - - // Link icon - &::before { - font-family: 'foundation-icons'; - content: '\f165'; - color: #999; - } - - // When the title or the icon itself is hovered on, display the icon - &:hover, - .docs-heading:hover & { - display: block; - } - - // Adjust the icon's size and position for smaller headings - h3 > & { - font-size: 1.6rem; - top: 0.25rem; - margin-right: -0.3rem; - } - - h4 > & { - font-size: 1.6rem; - top: 0.25rem; - margin-right: -0.3rem; - } -} diff --git a/docs/assets/scss/_banner.scss b/docs/assets/scss/_banner.scss deleted file mode 100644 index 47ad698cf..000000000 --- a/docs/assets/scss/_banner.scss +++ /dev/null @@ -1,66 +0,0 @@ -/* Banner for announcements */ -a#notice { - display:block; - overflow: hidden; - position: relative; - padding: 1rem 0; - width:100%; - color: white; - // background: #FF6908    ; /* Old browsers */ - // background: -moz-linear-gradient(left, #C9025C     0%, #DB0A5B     100%); /* FF3.6+ */ - // background: -webkit-gradient(linear, left top, right top, color-stop(0%,#81CFE0    ), color-stop(100%,#DB0A5B    )); /* Chrome,Safari4+ */ - // background: -webkit-linear-gradient(left, #C9025C     0%,#DB0A5B     100%); /* Chrome10+,Safari5.1+ */ - // background: -o-linear-gradient(left, #C9025C     0%,#DB0A5B     100%); /* Opera 11.10+ */ - // background: -ms-linear-gradient(left, #C9025C     0%,#DB0A5B    100%); /* IE10+ */ - // background: linear-gradient(to right, #C9025C     0%,#DB0A5B    100%); /* W3C */ - // filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C9025C    ', endColorstr='#DB0A5B   ',GradientType=1 ); /* IE6-9 */ - background: rgba(15,28,33,1); -background: -moz-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%); -background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(15,28,33,1)), color-stop(45%, rgba(38,54,62,1)), color-stop(76%, rgba(79,88,99,1)), color-stop(100%, rgba(198,134,127,1))); -background: -webkit-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%); -background: -o-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%); -background: -ms-linear-gradient(top, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%); -background: linear-gradient(to bottom, rgba(15,28,33,1) 0%, rgba(38,54,62,1) 45%, rgba(79,88,99,1) 76%, rgba(198,134,127,1) 100%); -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f1c21    ', endColorstr='#c6867f    ', GradientType=0 ); - // span { - // border-bottom: #fff 4px dashed; - // width: 36%; - // position: absolute; - // bottom: 25px; - // &.left-side { left: 0; } - // &.right-side { right: 0; } - // @media only screen and (max-width: 1000px) { width: 30%; } - // @media only screen and (max-width: 675px) { width: 16%; } - // } - - .countdown { - display: inline; - color: #ffffff    ; - font-size: 16px; - font-weight: 700; - margin-left: 3px; - } - - .timer-colon { - margin: 0px -2px 0px -4px; - padding: 0; - } - - .timer-hour, .timer-minute, .timer-second { - letter-spacing: 2px; - } - - .info { - left: 0; - right: 0; - // top: 15px; - z-index: 20; - // width: 75%; - margin-left: auto; - margin-right: auto; - // position: absolute; - h5 { color: #ffffff    ; } - text-align: center; - @media only screen and (max-width: 675px) { width: 100%; padding: 0 15px 0px 15px; position: relative; } - } -} diff --git a/docs/assets/scss/_building-blocks.scss b/docs/assets/scss/_building-blocks.scss deleted file mode 100644 index 0efd3519b..000000000 --- a/docs/assets/scss/_building-blocks.scss +++ /dev/null @@ -1,32 +0,0 @@ -// Styles for Building Blocks previews. - -.docs-bb { - @include grid-row($behavior: nest); - margin-bottom: 1rem; -} - -.docs-bb-thumb { - @include grid-col(4); - - a { - display: block; - } - - img { - border: 1px solid $medium-gray; - - &:hover { - border-color: $primary-color; - } - } -} - -.docs-bb-main { - @include grid-col(8); - - h3 { - font-size: 1.25rem; - font-weight: bold; - margin-bottom: 0.5rem; - } -} diff --git a/docs/assets/scss/_code.scss b/docs/assets/scss/_code.scss deleted file mode 100644 index d4faa3359..000000000 --- a/docs/assets/scss/_code.scss +++ /dev/null @@ -1,225 +0,0 @@ -// Styles for code examples are here. - -.docs-code, pre { - position: relative; - - code { - display: block; - overflow-x: auto; - padding: 1rem; - background: #f9f9f9; - margin-bottom: 1.5rem; - } - - .docs-reference & code { - padding: 0.75rem; - margin-bottom: 0.75rem; - } -} - -.docs-code.kitchen-sink { - border: $code-border; - max-height: 300px; - overflow-y: scroll; - margin-bottom: 1rem; - - code { - border: 0; - } -} - -.docs-code .bash { - border: 0; - background: #333; - color: white; - border-radius: 4px; - position: relative; - padding-top: 2rem; - - &::before { - content: '$ '; - color: #ccc; - } - - &::after { - content: ''; - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 1.25rem; - background: #777; - border-radius: 4px 4px 0 0; - } -} - -// Styles for the copy button shown on every code sample -.docs-code-copy { - position: absolute; - top: 0; - right: 0; - background: $primary-color; - color: white; - font-size: 0.8rem; - padding: 0.75rem 1rem; - z-index: 1; - - &:hover, - &.zeroclipboard-is-hover { - background: scale-color($primary-color, $lightness: -5%); - } -} - -.docs-code-toggle { - display: block; - margin-bottom: 1rem; - font-weight: bold; -} - -.global-zeroclipboard-container { - z-index: auto !important; -} - -// github.com style for highlight.js -// Created by Vasily Polovnyov -.hljs { - display: block; - overflow-x: auto; - padding: 0.5em; - color: #333; - background: #f8f8f8; - -webkit-text-size-adjust: none; -} - -.hljs-comment, -.diff .hljs-header, -.hljs-javadoc { - color: #998; - font-style: italic; -} - -.hljs-keyword, -.css .rule .hljs-keyword, -.hljs-winutils, -.nginx .hljs-title, -.hljs-subst, -.hljs-request, -.hljs-status { - color: #333; - font-weight: bold; -} - -.hljs-number, -.hljs-hexcolor, -.ruby .hljs-constant { - color: #008080; -} - -.hljs-string, -.hljs-tag .hljs-value, -.hljs-phpdoc, -.hljs-dartdoc, -.tex .hljs-formula { - color: #d14; -} - -.hljs-title, -.hljs-id, -.scss .hljs-preprocessor { - color: #900; - font-weight: bold; -} - -.hljs-list .hljs-keyword, -.hljs-subst { - font-weight: normal; -} - -.hljs-class .hljs-title, -.hljs-type, -.vhdl .hljs-literal, -.tex .hljs-command { - color: #458; - font-weight: bold; -} - -.hljs-tag, -.hljs-tag .hljs-title, -.hljs-rule .hljs-property, -.django .hljs-tag .hljs-keyword { - color: #000080; - font-weight: normal; -} - -.hljs-attribute, -.hljs-variable, -.lisp .hljs-body, -.hljs-name { - color: #008080; -} - -.hljs-regexp { - color: #009926; -} - -.hljs-symbol, -.ruby .hljs-symbol .hljs-string, -.lisp .hljs-keyword, -.clojure .hljs-keyword, -.scheme .hljs-keyword, -.tex .hljs-special, -.hljs-prompt { - color: #990073; -} - -.hljs-built_in { - color: #0086b3; -} - -.hljs-preprocessor, -.hljs-pragma, -.hljs-pi, -.hljs-doctype, -.hljs-shebang, -.hljs-cdata { - color: #999; - font-weight: bold; -} - -.hljs-deletion { - background: #fdd; -} - -.hljs-addition { - background: #dfd; -} - -.diff .hljs-change { - background: #0086b3; -} - -.hljs-chunk { - color: #aaa; -} - -.hljs-at_rule { - color: #333; -} -.hljs-at_rule .hljs-keyword { - color: #a71d5d; - font-weight: normal; -} -.hljs-at_rule .hljs-preprocessor { - color: #0086b3; - font-weight: normal; -} -.scss .hljs-attribute { - color: #008080; -} -.scss .hljs-function { - color: #008080; -} -.scss .hljs-class { - color: #795da3; -} diff --git a/docs/assets/scss/_color-block.scss b/docs/assets/scss/_color-block.scss deleted file mode 100644 index 50da9145c..000000000 --- a/docs/assets/scss/_color-block.scss +++ /dev/null @@ -1,29 +0,0 @@ -// Color blocks used on the Global Styles page. - -.docs-color-block { - border: 1px solid #ccc; - padding: 0.5rem; - margin-bottom: 1rem; - text-align: center; - - > div:first-child { - width: 100%; - height: 50px; - margin-bottom: 0.5rem; - } - - > p { - margin: 0; - } - - &-primary { background: $primary-color; } - &-secondary { background: $secondary-color; } - &-success { background: $success-color; } - &-warning { background: $warning-color; } - &-alert { background: $alert-color; } - &-white { background: $white; } - &-light-gray { background: $light-gray; } - &-medium-gray { background: $medium-gray; } - &-dark-gray { background: $dark-gray; } - &-black { background: $black; } -} diff --git a/docs/assets/scss/_compatibility.scss b/docs/assets/scss/_compatibility.scss deleted file mode 100644 index c8f17c280..000000000 --- a/docs/assets/scss/_compatibility.scss +++ /dev/null @@ -1,40 +0,0 @@ -.docs-compat-table { - width: 100%; - background: transparent; - margin-bottom: 2rem; - - tbody { - border-color: $medium-gray; - } - - tr { - border-bottom: 1px solid $medium-gray; - } - - tr, - tr:nth-child(even) { - background: transparent; - } - - tr:nth-child(even) td:first-child { - background: $light-gray; - } - - td:first-child { - border-right: 1px solid $medium-gray; - } - - .works { - background: rgba($success-color, 0.15); - color: $success-color; - font-size: 1.25rem; - font-weight: bold; - text-align: center; - - &::before { - display: inline-block; - content: '✔'; - margin-right: 0.5rem; - } - } -} diff --git a/docs/assets/scss/_examples.scss b/docs/assets/scss/_examples.scss deleted file mode 100644 index ba3d24701..000000000 --- a/docs/assets/scss/_examples.scss +++ /dev/null @@ -1,137 +0,0 @@ -// Style overrides for component examples. - -// 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 -// - - - - - - - - - - - - - - - - -#docs-flex-grid .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; - } - } -} - -// Modal -// - - - - - - - - - - - - - - - - -.docs-example-modal { - display: block; - position: static; - width: 100%; - max-width: none; - margin-bottom: 1rem; -} - -// Menu Icon -// - - - - - - - - - - - - - - - - -.docs-example-burger { - @include hamburger; -} - -// Off-canvas -// - - - - - - - - - - - - - - - - -body > .off-canvas { - padding-top: 2rem; -} - -// Motion UI -// - - - - - - - - - - - - - - - - -.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/_footer.scss b/docs/assets/scss/_footer.scss deleted file mode 100644 index 35cf891f7..000000000 --- a/docs/assets/scss/_footer.scss +++ /dev/null @@ -1,542 +0,0 @@ -// The ZURB footer. - -.zurb-footer-top { - padding: 40px 0; - color: white; - - .row .columns { - @include clearfix(); - } - - &.zurb { - background-position: 10px 7px; - } - - .property { - text-align: center; - - .property-info { - padding-top: 37px; - } - - h2 { - margin: 0; - padding: 0 !important; - - a { - transition: all .25s ease-in-out; - font-family: 'zurb-logo'; - font-weight: normal; - font-size: em-calc(18px); - padding: 0; - - &:hover { - opacity: 0.8; - } - - &.services { - width: 190px; - } - - span { - display: none; - } - - strong { - font-size: 17px; - margin-left: -7px; - } - } - } - - h3 { - font-size: 1.4rem; - font-weight: bold; - color: white; - margin-bottom: 20px; - } - - h4 { - font-size: 1.1rem; - font-weight: 200; - color: white; - margin-bottom: 10px; - text-transform: none; - } - - p, li, a { - font-size: 13px; - line-height: 21px; - color: white; - } - - a { - font-weight: bold; - color: white; - } - } - - .learn-links, - .support-links, - .connect-links { - padding: 50px 0 0 0; - border-left: 1px solid rgba(255, 255, 255, 0.2); - background: url('../img/icons/footer-top-icons.png') no-repeat center 0; - height: 220px; - margin-bottom: 30px; - - ul { - margin-left: 0px !important; - list-style: none; - } - - li { - line-height: 20px; - } - } - - .learn-links { - background-position: center -325px; - } - - .support-links { - background-position: center -635px; - } - - .connect-links { - padding: 50px 20px 0; - background-position: center -9px; - - .button { - font-size: 12px; - font-weight: normal; - background: rgba(0, 0, 0, 0.1); - color: #FFF !important; - font-weight: bold; - text-shadow: none; - box-shadow: none; - border: none; - padding: 6px 16px; - } - } - - .global { - border-top: 1px solid rgba(255, 255, 255, 0.2); - - .footer-link-block { - font-weight: normal; - display: block; - margin: 30px 0 0 0; - - &.services { - background: url('../img/icons/footer-studios.png') left top no-repeat; - } - - &.foundation { - background: url('../img/icons/footer-foundation.png') left top no-repeat; - } - - &.apps { - background: url('../img/icons/footer-products.png') left top no-repeat; - } - - &.expo { - background: url('../img/icons/footer-expo.png') left top no-repeat; - } - - span { - display: block; - color: white; - font-size: 0.75rem; - padding-left: 40px; - line-height: 18px; - - &.title { - font-size: 1.0rem; - margin-bottom: 5px; - } - } - } - } -} - -.zurb-footer-bottom { - background: #333; - padding: 24px 0 10px; - - .design-border { - border-bottom: 1px solid #484848; - padding-bottom: 5px; - margin-bottom: 25px; - } - - .zurb-logo { - color: #858585; - font-weight: normal; - background: url('../img/icons/footer-icons.png') no-repeat 0 3px; - padding: 23px 0 0 0 !important; - font-size: em-calc(16px); - display: inline-block; - width: 90px; - - &:hover { - opacity: 0.8; - } - } - - .zurb-links { - margin: 0; - display: inline-block; - padding-bottom: 0px; - - li { - display: block; - float: left; - margin-left: 6px; - text-transform: uppercase; - font-weight: 700; - font-size: 0.75rem; - } - - a { - color: #666; - padding: 3px 6px; - - &:hover { - color: #777; - } - } - } - - .copyright { - margin: 6px 0 0; - font-size: 0.75rem; - color: #666; - } - - .home-social { - display: block; - float: right; - margin-bottom: 8px; - - li { - list-style: none; - display: block; - float: left; - margin-left: 10px; - - &:first-child { - margin-left: 0; - } - } - - a { - display: block; - height: 50px; - width: 50px; - background: url('../img/icons/social.png') no-repeat center 0; - - &:hover { - opacity: 0.8; - } - - &.twitter { - background-position: center 0; - } - - &.facebook { - background-position: center -200px; - } - - &.mail { - background-position: center -400px; - } - } - } -} - -@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { - .zurb-footer-top .property { - padding-top: 0px; - - .learn-links, - .support-links, - .connect-links { - height: 240px; - padding: 50px 10px 0; - } - } -} -@media only screen and (max-width: 767px) { - .zurb-footer-top { - .property { - .property-info { - padding-top: 0px; - } - - .learn-links, - .support-links, - .connect-links { - border: none; - height: auto; - padding: 80px 20px 0; - margin: 4px 0 0 0; - border-top: 1px dotted rgba(255, 255, 255, 0.2); - - li a { - font-size: 15px; - line-height: 2; - } - - p, a { - font-size: 16px; - } - } - - .learn-links { - background-position: center -300px; - padding-top: 76px 20px 0; - } - - .support-links { - padding: 76px 20px 0; - background-position: center -618px; - } - - .connect-links { - padding: 76px 20px 14px; - background-position: center 10px; - } - } - - .global { - border: none; - } - - .footer-link-block { - &.services { - border-top: 1px dotted rgba(255, 255, 255, 0.2); - padding-top: 40px; - margin-top: 0; - background-position: center 10px !important; - } - - span { - font-size: em-calc(11px); - line-height: 16px; - } - } - } - - .zurb-footer-bottom { - text-align: center; - - .columns { - padding: 0; - } - - .zurb-logo { - display: block; - margin: 0 auto; - } - - .zurb-links { - margin: 16px 0 10px; - } - - .home-social { - float: none; - margin: 0 0 20px 0; - text-align: center; - height: 44px; - display: inline-block; - } - } -} - -// Reformating pillars -@media only screen and (max-width: 767px) { - .zurb-footer-top .property .connect-links { - border-bottom: 1px dotted rgba(255, 255, 255, 0.2); - margin-bottom: 20px; - } - - .zurb-footer-top .global { - .footer-link-block { - padding-top: 50px; - text-align: center; - margin: 0 !important; - clear: both; - - span { - padding-left: 0px; - } - - &.services { - border-top: 0; - background-position: center 15px !important; - } - - &.foundation { - background-position: center 15px !important; - } - - &.apps { - padding-top: 80px; - background-position: center 45px !important; - } - - &.expo { - padding-top: 80px; - background-position: center 45px !important; - } - } - } - - .zurb-footer-top .property .learn-links { - background: none; - border: none; - padding-top: 0; - margin: 0; - } -} - -// Retina images -@media only screen and (min--moz-device-pixel-ratio: 2), -only screen and (-o-min-device-pixel-ratio: 2 / 1), -only screen and (-webkit-min-device-pixel-ratio: 2), -only screen and (min-device-pixel-ratio: 2) { - .zurb-footer-top .info-padding { - background-image: url('../img/icons/footer-large-icon-retina.png'); - background-size: 100px 400px; - } - .zurb-footer-bottom ul.home-social li a { - background-image: url('../img/icons/social-retina.png'); - background-size: 50px 600px; - } - .zurb-footer-top .global .footer-link-block { - font-weight: normal; - display: block; - margin: 30px 0 0 0; - - &.services { - background: url('../img/icons/footer-studios-retina.png') left top no-repeat; - } - - &.foundation { - background-image: url('../img/icons/footer-foundation-retina.png') left top no-repeat; - } - - &.apps { - background-image: url('../img/icons/footer-products-retina.png') left top no-repeat; - } - - &.expo { - background-image: url('../img/icons/footer-expo-retina.png') left top no-repeat; - } - } - - .zurb-footer-bottom a.zurb-logo { - background-image: url('../img/icons/footer-icons-retina.png'); - background-size: 100px 1400px; - } - - .zurb-footer-top .property .learn-links, - .zurb-footer-top .property .support-links, - .zurb-footer-top .property .connect-links { - background-image: url('../img/icons/footer-top-icons-retina.png'); - background-size: 100px 1400px; - } -} - -@media only screen and (max-width: 320px), - only screen and (min--moz-device-pixel-ratio: 2), - only screen and (-o-min-device-pixel-ratio: 2 / 1), - only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min-device-pixel-ratio: 2) { - .zurb-footer-top .info-padding { - background-image: url('../img/icons/footer-large-icon-retina.png'); - background-size: 100px 400px; - } - - .zurb-footer-bottom ul.home-social li a { - background-image: url('../img/icons/social-retina.png'); - background-size: 50px 600px; - } - - .zurb-footer-top .global .footer-link-block { - font-weight: normal; - display: block; - margin: 30px 0 0 0; - - &.services { - background: url('../img/icons/footer-studios-retina.png') left top no-repeat; - background-size: 30px; - } - - &.foundation { - background: url('../img/icons/footer-foundation-retina.png') left top no-repeat; - background-size: 30px; - } - - &.apps { - background: url('../img/icons/footer-products-retina.png') left top no-repeat; - background-size: 30px; - } - - &.expo { - background: url('../img/icons/footer-expo-retina.png') left top no-repeat; - background-size: 30px; - } - } - - .zurb-footer-bottom .zurb-logo { - background-image: url('../img/icons/footer-icons-retina.png'); - background-size: 100px 1400px; - } - - .zurb-footer-top .property .support-links, - .zurb-footer-top .property .connect-links { - background-image: url('../img/icons/footer-top-icons-retina.png'); - background-size: 100px 1400px; - } -} - -@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { - .zurb-footer-top .property .learn-links { - background: none; - } -} - -.zurb-footer-top { - &.bg-blue { - background: #2DAEBF; - } - &.bg-fblue { - background: #074e68; - } - &.bg-green { - background: #B8D30B; - } - &.bg-dgreen { - background: #afc908; - } - &.bg-magenta { - background: #A9014B; - } - &.bg-orange { - background: #FF5C00; - } - &.bg-lorange { - background: #FF6908; - } - &.bg-oyellow { - background: #FC9200; - } - &.bg-loyellow { - background: #FFB515; - } - &.bg-navy { - background: #074e68; - } -} diff --git a/docs/assets/scss/_header.scss b/docs/assets/scss/_header.scss deleted file mode 100644 index 2dcbb5aa3..000000000 --- a/docs/assets/scss/_header.scss +++ /dev/null @@ -1,71 +0,0 @@ -// Styles specific to the layout of the docs are here. - -.docs-header { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - max-width: none; -} - -.docs-site-title { - font-size: 1rem; - font-weight: bold; - margin: 0; - display: inline-block; - margin-right: 1rem; - - a { - color: $black; - - &:hover { - color: $primary-color; - } - } - - em { - font-style: normal; - font-weight: normal; - color: $dark-gray; - } -} - -.docs-header-link { - position: relative; - color: $white; - font-weight: bold; - padding-right: 16px; - font-size: 0.75rem; - display: block; - margin-top: 0.5rem; - - &::after { - @include css-triangle(5px, $white, down); - position: absolute; - top: 3px; - right: 0; - } - - &:hover { - opacity: 0.75 - } - - @include breakpoint(medium) { - font-size: 1rem; - float: right; - margin-top: 4px; - - &::after { - top: 6px; - } - } -} - -.docs-versions-menu { - background: #fff; - width: 200px; - box-shadow: 0 2px 10px rgba($black, 0.25); - position: absolute; - top: 5.3rem; - right: 0; - z-index: 1; -} - \ No newline at end of file diff --git a/docs/assets/scss/_index.scss b/docs/assets/scss/_index.scss deleted file mode 100644 index 34ccc16fc..000000000 --- a/docs/assets/scss/_index.scss +++ /dev/null @@ -1,31 +0,0 @@ -// Index used on the... index page. - -.docs-big-index { - .column a { - color: $black; - } - .column strong { - color: $primary-color; - font-size: 1.25rem; - display: block; - margin-bottom: 0.25rem; - } - .column a:hover { - color: $primary-color; - - strong { - color: lighten($primary-color, 10%); - } - } -} - -.docs-small-index { - ul { - list-style-type: none; - margin-left: 0; - } - - li { - margin-bottom: 0.25rem; - } -} diff --git a/docs/assets/scss/_navigation.scss b/docs/assets/scss/_navigation.scss deleted file mode 100644 index 6cd18037d..000000000 --- a/docs/assets/scss/_navigation.scss +++ /dev/null @@ -1,99 +0,0 @@ -// Component navigation menu seen on every page. - -.docs-menu.menu { - margin-top: 0.5rem; - background: #fafafa; - padding-top: 1rem; - padding-bottom: 1rem; - - li small { - color: #999; - text-transform: uppercase; - font-weight: bold; - font-size: 60%; - display: block; - margin-top: 5px; - } - - a { - font-size: .85rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - - &:hover { - background: rgba(#000, 0.05); - } - } - - .current a { - background: rgba(#000, 0.05); - } - .label { - background-color: #DDDDDD; - color: #777; - margin-left: 5px; - padding: 0.22222rem 0.44444rem 0.22222rem; - font-size: 0.61111rem; - } -} - -.docs-menu-title { - text-transform: uppercase; - font-size: 0.75rem; - color: #999; - font-weight: bold; - line-height: 1; - padding-left: 0.9rem; - margin-bottom: 0.5rem; - border-top: 1px solid #e9e9e9; - margin-top: 1rem; - padding-top: 1.5rem; -} - -.docs-version-number { - padding-left: 0.9rem; - font-weight: bold; - font-size: 0.75rem; - margin-bottom: -0.5rem; - margin-top: -0.4rem; - - .menu & a { - margin-left: 6px; - - &:hover { - background: transparent; - } - } -} - -.docs-menu-ph { - opacity: 0.5; - pointer-events: none; -} - -.docs-sub-menu { - font-size: 0.85rem; - margin-top: 1rem; -} - -.docs-toc { - padding-bottom: 1rem; - margin-bottom: 1rem; - border-bottom: 1px solid $medium-gray; - - @include breakpoint(large) { - display: block !important; - border-bottom: 0; - } - - .active { - background: $primary-color; - color: white; - } - - .docs-sub-menu:first-child .docs-menu-title { - margin-top: 0; - border-top: 0; - padding-top: 0; - } -} diff --git a/docs/assets/scss/_newsletter.scss b/docs/assets/scss/_newsletter.scss deleted file mode 100644 index bd85e64d7..000000000 --- a/docs/assets/scss/_newsletter.scss +++ /dev/null @@ -1,48 +0,0 @@ -// Responsive newsletter callout above the footer. - -.docs-newsletter { - padding: 20px 0; - background: #085a78; - padding: 10px 0 10px 0; - margin-top: 2rem; - - h5 { - font-size: 20px; - font-family: 'Helvetica Neue', 'Helvetica', Arial, Verdana, sans-serif; - font-weight: 400; - margin-bottom: 0px; - margin-top: 10px; - color: #fff; - line-height: 24px; - } - - p { - clear: both; - font-size: 13px; - padding-top: 2px; - color: #fff; - } - - a { - color: #fff; - } - - .row.collapse form { - input[type='text'] { - font-size: 17px; - font-weight: 200; - color: #999; - border: 0; - } - - .button { - border: 0; - box-shadow: none; - background: #257696; - } - - .button:hover { - background: #1b566d; - } - } -} diff --git a/docs/assets/scss/_notices.scss b/docs/assets/scss/_notices.scss deleted file mode 100644 index 2420dbc6d..000000000 --- a/docs/assets/scss/_notices.scss +++ /dev/null @@ -1,23 +0,0 @@ -.docs-notice-added { - position: absolute; - top: 0; - right: 0; - font-weight: bold; - color: $warning-color; - font-size: 0.8rem; - line-height: 2.8; // Aligns the text with the section title -} - -.docs-notice-deprecated { - @extend .docs-notice-added; - color: $alert-color; -} - -.docs-deprecated { - opacity: 0.25; - transition: opacity 0.1s ease-out; - - &:hover { - opacity: 1; - } -} diff --git a/docs/assets/scss/_page.scss b/docs/assets/scss/_page.scss deleted file mode 100644 index dfc1e92f1..000000000 --- a/docs/assets/scss/_page.scss +++ /dev/null @@ -1,51 +0,0 @@ -// Styles specific to the main page content. - -.docs-page-title { - margin-top: 0.5rem; - display: inline-block; - vertical-align: middle; -} - -.docs-component section { - position: relative; -} - -.docs-component hr { - max-width: none; -} - -.docs-component .thumbnail { - margin-left: auto; - margin-right: auto; - display: block; -} - -.docs-component .callout code { - background: rgba($code-background, 0.5); -} - -.docs-js.has-tip { - border-bottom: 0; -} - -.docs-js.label { - background: #F0DB4F; - color: black; - margin-left: 10px; - vertical-align: middle; -} - -.docs-mui.label { - background: #c6538c; - margin-left: 10px; - vertical-align: middle; -} - -.docs-lib.label { - margin-left: 10px; - vertical-align: middle; - - a { - color: white; - } -} diff --git a/docs/assets/scss/_reference.scss b/docs/assets/scss/_reference.scss deleted file mode 100644 index 6fd3b5602..000000000 --- a/docs/assets/scss/_reference.scss +++ /dev/null @@ -1,66 +0,0 @@ -// Styles for the Sass and JavaScript reference sections. - -.docs-variable-table { - @include breakpoint(medium down) { - @include table-stack; - } - - width: 100%; - border: 0; - - thead { - border: 0; - background: transparent; - border-bottom: 2px solid $medium-gray; - - th { - text-align: left; - white-space: nowrap; - } - } - - tbody { - border: 0; - } - - // Reset code styles to look like plain text - code { - background: transparent; - color: #222; - border: 0; - padding: 0; - } - - // Make the first column's text bold, and don't wrap text - td:first-child { - white-space: nowrap; - - code { - font-weight: bold; - } - } - - // Don't let key/value pairs in a Sass map wrap - .map { - white-space: nowrap; - } - - // Don't add margin to Markdown-formatted text - td > p:last-child { - margin-bottom: 0; - } - - // For when a cell has the text "None" and no actual value - code > span { - font-family: $body-font-family; - } - - // Prevent hover state - tbody tr:hover { - background: transparent; - } - - tbody tr:nth-of-type(even):hover { - background: $light-gray; - } -} diff --git a/docs/assets/scss/_search.scss b/docs/assets/scss/_search.scss deleted file mode 100644 index 544c42afd..000000000 --- a/docs/assets/scss/_search.scss +++ /dev/null @@ -1,104 +0,0 @@ -// Styles for the search bar and results list. - -.twitter-typeahead { - display: block !important; - position: relative; - - &::before { - content: '\f16c'; - display: block; - position: absolute; - top: 0.4rem; - left: 0.9rem; - z-index: 1; - font-family: 'foundation-icons'; - font-size: 1.75rem; - color: $primary-color; - } -} - -.tt-input, -.tt-hint { - right: 0; - padding-left: 3rem; - margin-bottom: 0.5rem; - box-shadow: none; - border-width: 1px 0; - font-size: 1.3rem; - height: 3.5rem; - font-weight: 300; - - &:hover { - box-shadow: none; - } - - &:focus { - border-width: 1px 0; - } -} - -.tt-menu { - background: white; - width: 100%; - border: 1px solid #ccc; -} - -.tt-suggestion { - @include clearfix; - padding: 0.5rem; - - &:hover, - &.tt-cursor { - background: $primary-color; - color: #fff; - cursor: pointer; - - .meta { - color: #fff; - } - } - - .name { - font-weight: bold; - } - - .meta { - text-transform: uppercase; - font-size: 0.8rem; - color: $dark-gray; - margin-left: 0.5rem; - } - - .desc { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - @include breakpoint(medium) { - padding: 1rem; - - .name { - float: left; - width: 40%; - } - - .desc { - float: left; - width: 60%; - } - } -} - -.tt-empty { - padding: 1rem; - - &:before { - content: ':('; - font-weight: bold; - font-size: 2rem; - color: #999; - margin-left: 1rem; - margin-right: 2rem; - } -} diff --git a/docs/assets/scss/_topbar.scss b/docs/assets/scss/_topbar.scss deleted file mode 100644 index 9152c1bb8..000000000 --- a/docs/assets/scss/_topbar.scss +++ /dev/null @@ -1,171 +0,0 @@ -$topbar-background: #121212; -$topbar-hover-color: darken($topbar-background, 20%); - -.marketing-topbar { - background: $topbar-background; - font-size: rem-calc(13); - font-weight: bold; - z-index: 2; - position: relative; - - @include clearfix; - - ul:first-child { float: left; } - ul:last-child { float: right; } - - .topbar-title > a { - font-size: rem-calc(16); - opacity: 0.9; - - > img { - position: relative; - top: -1px; - } - } - - .menu a { - height: 45px; - line-height: 45px !important; - color: $light-gray; - padding-top: 0 !important; - padding-bottom: 0 !important; - - &:hover:not(.button), - &:focus { - background: darken($topbar-background, 20%); - } - - &.button { - border-radius: 0; - box-shadow: 0 0 0 rgba(0, 0, 0, 0); - } - } - - .title { - color: $dark-gray; - padding: 10px; - padding-left: 15px; - font-size: 0.8em; - background: lighten($topbar-background, 10%); - } - - .is-active a { - background: darken($topbar-background, 20%); - } - - // ZURB logo - .menu img { - position: relative; - top: -2px; - } - - .menu:last-child { - border-left: 1px solid #4e4e4e; - } - - .menu { - li:not(:last-child) { - border-right: 1px solid #4e4e4e; - } - } - - .dropdown.menu .submenu { - border: 0; - } - - .is-down-arrow a { - padding-right: 1rem !important; - } - - .is-down-arrow a::after { - display: none !important; - } -} - -.mobile-ofc { - background: $topbar-background; - font-size: rem-calc(13); - font-weight: bold; - - .menu a { - height: 45px; - line-height: 45px; - color: $light-gray; - padding-top: 0; - padding-bottom: 0; - - &:hover:not(.button), - &:focus { - background: darken($topbar-background, 20%); - } - - &.button { - border-radius: 0; - box-shadow: 0 0 0 rgba(0, 0, 0, 0); - } - } - - .title { - color: $dark-gray; - padding: 10px; - padding-left: 15px; - font-size: 0.8em; - background: lighten($topbar-background, 10%); - } -} - -.off-canvas { - a.close-button { - color: $light-gray; - } - .close-button:hover, .close-button:focus { - color: $light-gray; - } -} - -// .docs-topbar { -// background: #333; -// font-size: rem-calc(13); -// font-weight: bold; - -// .menu a { -// height: 45px; -// line-height: 45px; -// color: white; -// padding-top: 0; -// padding-bottom: 0; - -// &:hover, -// &:focus { -// background: #222; -// } -// } - -// .is-active a { -// background: #222; -// } - -// // ZURB logo -// .menu img { -// position: relative; -// top: -2px; -// } - -// .menu:first-child { -// border-right: 1px solid #4e4e4e; -// } - -// .menu:last-child { -// border-left: 1px solid #4e4e4e; -// } - -// .menu { -// li:not(:last-child) { -// border-right: 1px solid #4e4e4e; -// } -// } - -// .docs-menu-title { -// margin: 0; -// } -// } diff --git a/docs/assets/scss/_typography.scss b/docs/assets/scss/_typography.scss deleted file mode 100644 index d1af237ea..000000000 --- a/docs/assets/scss/_typography.scss +++ /dev/null @@ -1,21 +0,0 @@ -// Specific text uses Proxima Nova instead of the framework's default of Helvetica Neue. We should only apply Proxima Nova to docs-specific elements, like section titles, and never to elements of the framework itself. - -.docs-header, -.docs-site-title, -.docs-page-title, -.docs-page-lead, -.docs-heading, -.docs-menu, -.docs-sub-menu, -.docs-big-index strong, -.docs-small-index h4, -.twitter-typeahead { - font-family: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif; -} - -a > code { - background: transparent; - border: 0; - padding: 0; - color: $primary-color; -} diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index da6014261..c8ee59d32 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -1,49 +1,7 @@ -@charset 'UTF-8'; - @import 'foundation'; @import 'motion-ui'; @include foundation-everything; @include motion-ui-transitions; -@import 'typography'; -@import 'header'; -@import 'footer'; -@import 'navigation'; -@import 'newsletter'; -@import 'page'; -@import 'anchor'; -@import 'code'; -@import 'reference'; -@import 'examples'; -@import 'color-block'; -@import 'index'; -@import 'building-blocks'; -@import 'search'; -@import 'compatibility'; -@import 'notices'; -@import 'topbar'; -@import 'banner'; - -.menu-group { - @include clearfix; - - ul:first-child { float: left; } - ul:last-child { float: right; } -} -.sticky-mag { - background-color: white; - &.stuck-mag { - border-bottom: 2px solid #121212; - } -} - -// .docs-component { -// .callout { -// border-left-width: 10px; - -// &.primary { border-left-color: $primary-color; } -// &.warning { border-left-color: $warning-color; } -// &.alert { border-left-color: $alert-color; } -// } -// } +@import 'foundation-docs'; diff --git a/gulp/sass.js b/gulp/sass.js index 0ba6163fb..d63ace79b 100644 --- a/gulp/sass.js +++ b/gulp/sass.js @@ -10,7 +10,8 @@ var sourcemaps = require('gulp-sourcemaps'); var PATHS = [ 'scss', - 'node_modules/motion-ui/src' + 'node_modules/motion-ui/src', + 'node_modules/foundation-docs/scss' ]; var COMPATIBILITY = [ -- 2.47.2