+++ /dev/null
-// 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;
- }
-}
+++ /dev/null
-/* 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; }
- }
-}
+++ /dev/null
-// 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;
- }
-}
+++ /dev/null
-// 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 <vast@whiteants.net>
-.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;
-}
+++ /dev/null
-// 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; }
-}
+++ /dev/null
-.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;
- }
- }
-}
+++ /dev/null
-// 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));
- }
-}
+++ /dev/null
-// 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;
- }
-}
+++ /dev/null
-// 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
+++ /dev/null
-// 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;
- }
-}
+++ /dev/null
-// 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;
- }
-}
+++ /dev/null
-// 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;
- }
- }
-}
+++ /dev/null
-.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;
- }
-}
+++ /dev/null
-// 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;
- }
-}
+++ /dev/null
-// 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;
- }
-}
+++ /dev/null
-// 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;
- }
-}
+++ /dev/null
-$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;
-// }
-// }
+++ /dev/null
-// 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;
-}
-@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';
var PATHS = [
'scss',
- 'node_modules/motion-ui/src'
+ 'node_modules/motion-ui/src',
+ 'node_modules/foundation-docs/scss'
];
var COMPATIBILITY = [
projects / thirdparty / foundation / foundation-sites.git / commitdiff
