diff --git a/_config.yml b/_config.yml index 7613b12239..76a1a88de0 100644 --- a/_config.yml +++ b/_config.yml @@ -22,6 +22,27 @@ defaults: version: "v1.6" githubbranch: "v1.6.8" docsbranch: "release-1.6" + versions: + - fullversion: "v1.7.3" + version: "v1.7" + githubbranch: "v1.7.3" + docsbranch: "release-1.7" + url: https://kubernetes.io/docs/home/ + - fullversion: "v1.6.8" + version: "v1.6" + githubbranch: "v1.6.8" + docsbranch: "release-1.6" + url: https://v1-6.docs.kubernetes.io/docs/home/ + - fullversion: "v1.5.7" + version: "v1.5" + githubbranch: "v1.5.7" + docsbranch: "release-1.5" + url: https://v1-5.docs.kubernetes.io/docs/ + - fullversion: "v1.4.12" + version: "v1.4" + githubbranch: "v1.4.12" + docsbranch: "release-1.4" + url: https://v1-4.docs.kubernetes.io/docs/ - scope: path: "docs" diff --git a/_includes/header.html b/_includes/header.html index 714056a347..a4c5250282 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -10,6 +10,17 @@
  • Partners
  • Community
  • Case Studies
  • +
  • + + {{page.version}} + + +
  • + Try Kubernetes diff --git a/_sass/_base.sass b/_sass/_base.sass index ca48b70ccb..71708e60c2 100644 --- a/_sass/_base.sass +++ b/_sass/_base.sass @@ -63,954 +63,982 @@ $video-section-height: 200px //////////////////////////////////////////////////////////////////////////////////////////////////// body - background-color: white + background-color: white section - position: relative - background-color: white + position: relative + background-color: white section, header, footer - main - position: relative - margin: auto + main + position: relative + margin: auto p - font-size: 14px - font-weight: 400 + font-size: 14px + font-weight: 400 .button - display: inline-block - border-radius: 6px - padding: 0 20px - line-height: 40px - color: white - background-color: $blue - text-decoration: none + display: inline-block + border-radius: 6px + padding: 0 20px + line-height: 40px + color: white + background-color: $blue + text-decoration: none #cellophane - position: fixed - top: 0 - left: 0 - width: 100% - height: 100% - display: none + position: fixed + top: 0 + left: 0 + width: 100% + height: 100% + display: none // HEADER header - position: fixed - top: 0 - left: 0 - width: 100% - z-index: 8888 - background-color: transparent - box-shadow: 0 0 0 transparent - overflow: hidden - transition: 0.3s - text-align: center + position: fixed + top: 0 + left: 0 + width: 100% + z-index: 8888 + background-color: transparent + box-shadow: 0 0 0 transparent + overflow: hidden + transition: 0.3s + text-align: center .logo - position: relative - float: left - display: block - width: 180px - height: 88px - top: 0 - left: 0 - transform: none - background-image: url(/images/nav_logo.svg) - background-size: contain - background-position: center center - background-repeat: no-repeat + position: relative + float: left + display: block + width: 180px + height: 88px + top: 0 + left: 0 + transform: none + background-image: url(/images/nav_logo.svg) + background-size: contain + background-position: center center + background-repeat: no-repeat #docs - .flyout-button - position: fixed - top: 20px - left: 20px - width: 50px - height: 50px - background-image: url(/images/toc_icon.png) - background-position: center center - background-repeat: no-repeat - background-size: auto - border-radius: 50% - transition: 0.3s - z-index: 99999 + .flyout-button + position: fixed + top: 20px + left: 20px + width: 50px + height: 50px + background-image: url(/images/toc_icon.png) + background-position: center center + background-repeat: no-repeat + background-size: auto + border-radius: 50% + transition: 0.3s + z-index: 99999 - &.open-nav .flyout-button - display: none + &.open-nav .flyout-button + display: none - .logo - position: absolute - top: 40px - left: 50% - transform: translate(-50%, -50%) - display: block - width: 45px - height: 44px - background-image: url(/images/favicon.png) + .logo + position: absolute + top: 40px + left: 50% + transform: translate(-50%, -50%) + display: block + width: 45px + height: 44px + background-image: url(/images/favicon.png) - &.flip-nav .flyout-button - background-image: url(/images/toc_icon_grey.png) + &.flip-nav .flyout-button + background-image: url(/images/toc_icon_grey.png) .nav-buttons - float: right + float: right #viewDocs, #tryKubernetes - display: none + display: none #viewDocs - border: 2px solid white - background-color: transparent - transition: 0.3s + border: 2px solid white + background-color: transparent + transition: 0.3s - &:hover - background-color: white - color: $dark-grey + &:hover + background-color: white + color: $dark-grey #tryKubernetes - width: 0 - padding: 0 0 - border: 1px solid transparent - background-color: transparent - text-align: center - white-space: nowrap - vertical-align: middle - overflow: hidden - transition: 0.3s + width: 0 + padding: 0 0 + border: 1px solid transparent + background-color: transparent + text-align: center + white-space: nowrap + vertical-align: middle + overflow: hidden + transition: 0.3s #hamburger - display: inline-block - position: relative - vertical-align: middle - padding: 0 - border: 0 - background: none + display: inline-block + position: relative + vertical-align: middle + padding: 0 + border: 0 + background: none - div, &:before, &:after - position: absolute - left: 15% - width: 70% - height: 2px - background-color: $blue - transition: 0.3s - content: "" + div, &:before, &:after + position: absolute + left: 15% + width: 70% + height: 2px + background-color: $blue + transition: 0.3s + content: "" - div - top: calc(50% - 1px) + div + top: calc(50% - 1px) - &:before - top: 24% + &:before + top: 24% - &:after - bottom: 24% + &:after + bottom: 24% - &:hover - div, &:before, &:after - background-color: white + &:hover + div, &:before, &:after + background-color: white #mainNav - h5 - color: $blue - font-weight: normal + h5 + color: $blue + font-weight: normal - main - white-space: nowrap - overflow: hidden - clear: both + main + white-space: nowrap + overflow: hidden + clear: both - .nav-box - float: left - white-space: normal + .nav-box + float: left + white-space: normal - h3 - a - color: $blue - text-decoration: none + h3 + a + color: $blue + text-decoration: none // Global Nav - 12/9/2016 Update ul.global-nav - display: none + display: none - li - display: inline-block - margin-right: 14px + li + display: inline-block + margin-right: 14px - a - color: #fff - font-weight: 400 - padding: 0 - position: relative + a + color: #fff + font-weight: 400 + padding: 0 + position: relative - &.active:after - position: absolute - width: 100% - height: 2px - content: '' - bottom: -4px - left: 0 - background: #fff + &.active:after + position: absolute + width: 100% + height: 2px + content: '' + bottom: -4px + left: 0 + background: #fff + + ul + display: none + position: fixed + top: 40px + text-align: left + + li + display: block + height: 28px + + a + background: $dark-grey + color: #fff + padding: 7px + + li:last-child + a + border-radius: 7px + + li:hover + ul + display: block .flip-nav ul.global-nav li a, .open-nav ul.global-nav li a, - color: #333 + color: $dark-grey + +.flip-nav ul.global-nav li ul li a, + background: #fff + color: $dark-grey .flip-nav ul.global-nav li a.active:after, +.flip-nav ul.global-nav li ul li a.active:after, .open-nav ul.global-nav li a.active:after, - background: $blue + background: $blue // FLIP NAV .flip-nav - header - background-color: white + header + background-color: white // OPEN NAV .open-nav - body - overflow: hidden + body + overflow: hidden - #cellophane - display: block - z-index: 9998 + #cellophane + display: block + z-index: 9998 - header - background-color: #e8e8e8 - z-index: 9999 + header + background-color: #e8e8e8 + z-index: 9999 - #hamburger - div - opacity: 0 + #hamburger + div + opacity: 0 - &:before, &:after - left: 12px - transform-origin: 0 1px + &:before, &:after + left: 12px + transform-origin: 0 1px - &:before - transform: rotate(45deg) + &:before + transform: rotate(45deg) - &:after - transform: rotate(-45deg) + &:after + transform: rotate(-45deg) .open-nav, .y-enough - #tryKubernetes - width: 150px - background-color: $blue - border-color: $blue + #tryKubernetes + width: 150px + background-color: $blue + border-color: $blue .flip-nav, .open-nav - header - box-shadow: 0 1px 2px $medium-grey + header + box-shadow: 0 1px 2px $medium-grey - #viewDocs - border-color: $dark-grey - color: $dark-grey + #viewDocs + border-color: $dark-grey + color: $dark-grey - &:hover - border-color: $blue - background-color: $blue - color: white + &:hover + border-color: $blue + background-color: $blue + color: white - #hamburger:hover - div, &:before, &:after - background-color: $dark-grey + #hamburger:hover + div, &:before, &:after + background-color: $dark-grey // HERO #hero - background-image: url(/images/texture.png) - background-color: $dark-grey - text-align: center - padding-left: 0 - padding-right: 0 - margin-bottom: 0 - position: relative + background-image: url(/images/texture.png) + background-color: $dark-grey + text-align: center + padding-left: 0 + padding-right: 0 + margin-bottom: 0 + position: relative - &.bot-bar:after - display: block - margin-bottom: -20px - height: 8px - width: 100% - background-color: transparentize(white, 0.9) - content: '' - - &.no-sub - - h5 - display: none - - h1 - margin-bottom: 20px + &.bot-bar:after + display: block + margin-bottom: -20px + height: 8px + width: 100% + background-color: transparentize(white, 0.9) + content: '' + + &.no-sub + + h5 + display: none + + h1 + margin-bottom: 20px #home #hero:after - display: none + display: none // VENDOR STRIP #vendorStrip - position: relative - background-color: transparentize(white, 0.9) - font-weight: 100 - white-space: nowrap - text-align: center + position: relative + background-color: transparentize(white, 0.9) + font-weight: 100 + white-space: nowrap + text-align: center - li a - color: transparentize(white, 0.5) + li a + color: transparentize(white, 0.5) - &.YAH - color: white - position: relative + &.YAH + color: white + position: relative // FOOTER footer - width: 100% - background-image: url(/images/texture.png) - background-color: $dark-grey + width: 100% + background-image: url(/images/texture.png) + background-color: $dark-grey - main - padding: 20px 0 + main + padding: 20px 0 - nav - a - width: 100% - text-align: center - display: inline-block - margin: 10px 0 - font-size: 24px - font-weight: 300 - color: white - text-decoration: none + nav + a + width: 100% + text-align: center + display: inline-block + margin: 10px 0 + font-size: 24px + font-weight: 300 + color: white + text-decoration: none - .social - margin: 20px 0 + .social + margin: 20px 0 - div - text-align: center - margin-bottom: 20px + div + text-align: center + margin-bottom: 20px - div:last-child - margin: 30px 0 + div:last-child + margin: 30px 0 - span - display: block - margin-bottom: 8px + span + display: block + margin-bottom: 8px - input - text-align: center + input + text-align: center #search, #wishField - background-color: transparent - padding: 10px - font-size: 16px - font-weight: 100 - color: white - border: 1px solid white - transition: 0.3s + background-color: transparent + padding: 10px + font-size: 16px + font-weight: 100 + color: white + border: 1px solid white + transition: 0.3s - &:focus - background-color: $light-grey - color: $dark-grey + &:focus + background-color: $light-grey + color: $dark-grey .social a - display: inline-block - background-image: url(/images/social_sprite.png) - background-repeat: no-repeat - background-size: auto - width: 50px - height: 50px - border-radius: 5px - margin-right: 10px + display: inline-block + background-image: url(/images/social_sprite.png) + background-repeat: no-repeat + background-size: auto + width: 50px + height: 50px + border-radius: 5px + margin-right: 10px - &:hover - background-color: #fff + &:hover + background-color: #fff - span - position: absolute - display: block - height: 0 - overflow: hidden - - &.button - background-image: none - width: auto - height: auto - - &:hover - color: $blue + span + position: absolute + display: block + height: 0 + overflow: hidden + + &.button + background-image: none + width: auto + height: auto + + &:hover + color: $blue a.twitter - background-position: 0 0 + background-position: 0 0 - &:hover - background-position: 0 100% + &:hover + background-position: 0 100% a.stack-overflow - background-position: -50px 0 + background-position: -50px 0 - &:hover - background-position: -50px 100% + &:hover + background-position: -50px 100% a.slack - background-position: -100px 0 + background-position: -100px 0 - &:hover - background-position: -100px 100% + &:hover + background-position: -100px 100% a.github - background-position: -150px 0 + background-position: -150px 0 - &:hover - background-position: -150px 100% + &:hover + background-position: -150px 100% a.mailing-list - background-position: -200px 0 + background-position: -200px 0 - &:hover - background-position: -200px 100% + &:hover + background-position: -200px 100% a.calendar - background-position: -250px 0 + background-position: -250px 0 - &:hover - background-position: -250px 100% + &:hover + background-position: -250px 100% #viewDocs - display: none + display: none section - background-color: white + background-color: white #hero - background-color: $dark-grey + background-color: $dark-grey - h5 - margin: 20px 0 - line-height: 28px + h5 + margin: 20px 0 + line-height: 28px #vendorStrip - position: relative + position: relative - ul - float: left + ul + float: left - li - display: inline-block - height: 100% + li + display: inline-block + height: 100% - a - display: block - height: 100% - color: white - font-size: 0.75em - font-weight: bold + a + display: block + height: 100% + color: white + font-size: 0.75em + font-weight: bold - li + li - margin-left: 20px + li + li + margin-left: 20px #docs - #vendorStrip - line-height: 44px + #vendorStrip + line-height: 44px - ul - float: none + ul + float: none - #searchBox - float: none - display: block - width: 80% - margin: 0 auto - height: 44px - line-height: 44px - position: relative - - &:before - position: absolute - width: 15px - height: 15px - content: '' - right: 8px - top: 7px - background-image: url(/images/search-icon.svg) - background-repeat: no-repeat - background-size: 100% 100% - z-index: 1 + #searchBox + float: none + display: block + width: 80% + margin: 0 auto + height: 44px + line-height: 44px + position: relative + + &:before + position: absolute + width: 15px + height: 15px + content: '' + right: 8px + top: 7px + background-image: url(/images/search-icon.svg) + background-repeat: no-repeat + background-size: 100% 100% + z-index: 1 - #search - width: 100% - padding: 0 10px - height: 30px - line-height: 30px - font-size: 16px - vertical-align: top - background: #fff - border: none - border-radius: 4px - position: relative + #search + width: 100% + padding: 0 10px + height: 30px + line-height: 30px + font-size: 16px + vertical-align: top + background: #fff + border: none + border-radius: 4px + position: relative #encyclopedia - position: relative - padding: 50px 20px 20px 20px - overflow: hidden - font-size: 14px + position: relative + padding: 50px 20px 20px 20px + overflow: hidden + font-size: 14px - & > div - height: 100% + & > div + height: 100% #docsToc - position: fixed - background-color: white - top: 0 - left: 0 - width: 0 - height: 100vh - overflow: hidden - padding: 50px 0 - z-index: 999999 - transition: 0.3s + position: fixed + background-color: white + top: 0 + left: 0 + width: 0 + height: 100vh + overflow: hidden + padding: 50px 0 + z-index: 999999 + transition: 0.3s - .yah - & > .title - background-color: $light-grey - border-left: 3px solid $blue - padding: 7.5px 10px 7.5px 18px - margin-left: -3px - color: $blue + .yah + & > .title + background-color: $light-grey + border-left: 3px solid $blue + padding: 7.5px 10px 7.5px 18px + margin-left: -3px + color: $blue .open-toc - body - overflow: hidden + body + overflow: hidden - #docsToc - padding: 50px 20px - width: 400px - max-width: 100vw - overflow-y: auto + #docsToc + padding: 50px 20px + width: 400px + max-width: 100vw + overflow-y: auto .pi-accordion - & > .container:first-child > .item:first-child > .title:first-child - padding-left: 0 - font-size: 1.5em - font-weight: 700 + & > .container:first-child > .item:first-child > .title:first-child + padding-left: 0 + font-size: 1.5em + font-weight: 700 - & > .container:first-child > .item.yah:first-child > .title:first-child - margin-left: -20px !important + & > .container:first-child > .item.yah:first-child > .title:first-child + margin-left: -20px !important - .item - overflow: hidden + .item + overflow: hidden - .title - color: $dark-grey - position: relative - padding: 7.5px 10px 7.5px 18px - cursor: pointer - transition: 0.3s + .title + color: $dark-grey + position: relative + padding: 7.5px 10px 7.5px 18px + cursor: pointer + transition: 0.3s - &:hover - color: $blue + &:hover + color: $blue - a.item > .title - color: black + a.item > .title + color: black - &:hover - color: $blue + &:hover + color: $blue - div.item > .title - &:before - content: "" - position: absolute - top: 12px - left: 2px - border-style: solid - border-width: 5px 0 5px 8px - border-color: transparent transparent transparent $blue - transform: rotate(0deg) - transition: 0.3s + div.item > .title + &:before + content: "" + position: absolute + top: 12px + left: 2px + border-style: solid + border-width: 5px 0 5px 8px + border-color: transparent transparent transparent $blue + transform: rotate(0deg) + transition: 0.3s - .wrapper - position: relative - width: 100% - transition: height 0.3s + .wrapper + position: relative + width: 100% + transition: height 0.3s - .content - padding-left: 20px - opacity: 0 - transition: 0.3s + .content + padding-left: 20px + opacity: 0 + transition: 0.3s - .item.on - & > .title:before - transform: rotate(90deg) + .item.on + & > .title:before + transform: rotate(90deg) - & > .wrapper > .content - opacity: 1 + & > .wrapper > .content + opacity: 1 dt - margin-bottom: 8px + margin-bottom: 8px dd - margin-bottom: 16px + margin-bottom: 16px .pi-pushmenu - display: none - position: fixed - top: 0 - width: 100% - height: 100% - opacity: 0 - transition: opacity 0.3s + display: none + position: fixed + top: 0 + width: 100% + height: 100% + opacity: 0 + transition: opacity 0.3s - &.on - opacity: 1 + &.on + opacity: 1 - .overlay - position: fixed - top: 0 - left: 0 - width: 100% - height: 100% - background-color: rgba(0, 0, 0, 0.4) + .overlay + position: fixed + top: 0 + left: 0 + width: 100% + height: 100% + background-color: rgba(0, 0, 0, 0.4) - .sled - position: absolute - top: 0 - width: 0 - height: 100% - background-color: white - overflow: auto - transition: 0.3s + .sled + position: absolute + top: 0 + width: 0 + height: 100% + background-color: white + overflow: auto + transition: 0.3s - &.on .sled - width: 400px - max-width: 100vw + &.on .sled + width: 400px + max-width: 100vw - .top-bar - height: 0 - line-height: 60px - background-color: #444 + .top-bar + height: 0 + line-height: 60px + background-color: #444 - ul - margin-top: 25px + ul + margin-top: 25px - li - position: relative - display: block - width: 100% - min-height: 45px - padding: 0 60px 0 20px - border-bottom: 1px solid #cccccc + li + position: relative + display: block + width: 100% + min-height: 45px + padding: 0 60px 0 20px + border-bottom: 1px solid #cccccc - a - display: inline-block - width: 100% - height: 45px - line-height: 45px - font-family: "Roboto", sans-serif - font-size: 20px - color: $blue + a + display: inline-block + width: 100% + height: 45px + line-height: 45px + font-family: "Roboto", sans-serif + font-size: 20px + color: $blue - .button - background: none - padding: 0 + .button + background: none + padding: 0 - ul ul - padding: 0 20px + ul ul + padding: 0 20px - li - min-height: 40px + li + min-height: 40px - a - height: 40px - line-height: 40px - font-size: 18px - color: lighten(#222222, 20%) + a + height: 40px + line-height: 40px + font-size: 18px + color: lighten(#222222, 20%) .push-menu-close-button - position: absolute - top: 0 - right: 0 - width: 50px - height: 50px + position: absolute + top: 0 + right: 0 + width: 50px + height: 50px - &:before, &:after - content: "" - position: absolute - top: calc(50% - 1px) - left: 25% - width: 50% - height: 2px - background-color: black + &:before, &:after + content: "" + position: absolute + top: calc(50% - 1px) + left: 25% + width: 50% + height: 2px + background-color: black - &:before - transform: rotate(45deg) + &:before + transform: rotate(45deg) - &:after - transform: rotate(-45deg) + &:after + transform: rotate(-45deg) #docsContent - position: relative - float: right - width: 100% + position: relative + float: right + width: 100% - $toc-margin: 15px - $header-clearance: $header-height + 20px + $toc-margin: 15px + $header-clearance: $header-height + 20px - * + h2, * + h3, * + h4, * + h5, * + h6 - margin-top: 30px + * + h2, * + h3, * + h4, * + h5, * + h6 + margin-top: 30px - h1, h2, h3, h4, h5, h6 - line-height: normal - font-weight: 500 - margin-bottom: 30px - padding-bottom: 10px + h1, h2, h3, h4, h5, h6 + line-height: normal + font-weight: 500 + margin-bottom: 30px + padding-bottom: 10px - // Make sure anchor links aren't hidden by the header - &:before - display: block - content: " " - margin-top: -$header-clearance - height: $header-clearance - visibility: hidden + // Make sure anchor links aren't hidden by the header + &:before + display: block + content: " " + margin-top: -$header-clearance + height: $header-clearance + visibility: hidden - h1,h2 - border-bottom: 1px solid #cccccc - - h1 - font-size: 32px - padding-right: 60px + h1,h2 + border-bottom: 1px solid #cccccc + + h1 + font-size: 32px + padding-right: 60px - h2 - font-size: 28px + h2 + font-size: 28px - h3 - font-size: 24px - font-weight: 300 - margin-bottom: 5px + h3 + font-size: 24px + font-weight: 300 + margin-bottom: 5px - h4 - font-size: 20px - margin-bottom: 0px + h4 + font-size: 20px + margin-bottom: 0px - h5, h6 - font-size: 16px - font-weight: 500 + h5, h6 + font-size: 16px + font-weight: 500 - p - font-size: 16px - font-weight: 300 - line-height: 1.75em + p + font-size: 16px + font-weight: 300 + line-height: 1.75em - p + p - margin-top: 10px + p + p + margin-top: 10px - code - display: inline-block - box-sizing: border-box - background-color: $light-grey - color: $dark-grey - font-family: $mono-font - vertical-align: baseline - font-size: 14px - font-weight: bold - padding: 2px 4px + code + display: inline-block + box-sizing: border-box + background-color: $light-grey + color: $dark-grey + font-family: $mono-font + vertical-align: baseline + font-size: 14px + font-weight: bold + padding: 2px 4px - a code - color: $blue - text-decoration: underline + a code + color: $blue + text-decoration: underline - pre .pi, pre .s - margin: 0 - padding: 0 + pre .pi, pre .s + margin: 0 + padding: 0 - .highlight code span, code, pre code - font-family: "Roboto Mono", monospace + .highlight code span, code, pre code + font-family: "Roboto Mono", monospace - code, pre code - color: #303030 + code, pre code + color: #303030 - pre code - padding: 0 + pre code + padding: 0 - pre - background-color: #f7f7f7 - display: block - margin: 20px 0 - padding: 15px - position: relative - overflow-x: auto + pre + background-color: #f7f7f7 + display: block + margin: 20px 0 + padding: 15px + position: relative + overflow-x: auto - h1 code, h2 code, h3 code, h4 code, h5 code, h6 code - font-family: inherit - font-size: inherit - background-color: transparent + h1 code, h2 code, h3 code, h4 code, h5 code, h6 code + font-family: inherit + font-size: inherit + background-color: transparent - .includecode - table-layout: fixed + .includecode + table-layout: fixed - .includecode, .includecode th, .includecode td - padding: 0 !important + .includecode, .includecode th, .includecode td + padding: 0 !important - .includecode th - text-align: right !important - padding: 10px !important + .includecode th + text-align: right !important + padding: 10px !important - .includecode th a, .includecode th a code - color: white !important - background-color: transparent !important + .includecode th a, .includecode th a code + color: white !important + background-color: transparent !important - .includecode pre - margin: 0 !important + .includecode pre + margin: 0 !important - ul li - list-style: disc + ul li + list-style: disc - ol li - list-style: decimal + ol li + list-style: decimal - ul, ol - margin: 20px 0 - padding-left: 30px - font-weight: 300 + ul, ol + margin: 20px 0 + padding-left: 30px + font-weight: 300 - ul ul, ol ol, ul ol, ol ul - margin: 0.75em 0 + ul ul, ol ol, ul ol, ol ul + margin: 0.75em 0 - li - margin-bottom: 0.75em - font-size: 16px - line-height: 1.75em + li + margin-bottom: 0.75em + font-size: 16px + line-height: 1.75em - table - width: 100% - border: 1px solid #ccc - border-spacing: 0 - margin-top: 30px - margin-bottom: 30px + table + width: 100% + border: 1px solid #ccc + border-spacing: 0 + margin-top: 30px + margin-bottom: 30px - thead, tr:nth-child(even) - background-color: $light-grey + thead, tr:nth-child(even) + background-color: $light-grey - thead - background-color: #555 - color: white + thead + background-color: #555 + color: white - th, td - padding: 8px - text-align: left - margin: 0 + th, td + padding: 8px + text-align: left + margin: 0 - th - font-weight: normal + th + font-weight: normal - td - font-size: 0.85em + td + font-size: 0.85em - #editPageButton - position: absolute - top: -25px - right: 5px - width: 50px - height: 50px - line-height: 50px - border-radius: 50% - white-space: nowrap - text-indent: 50px - overflow: hidden - background: $blue url(/images/icon-pencil.svg) no-repeat - background-position: 12px 10px - background-size: 29px 29px + #editPageButton + position: absolute + top: -25px + right: 5px + width: 50px + height: 50px + line-height: 50px + border-radius: 50% + white-space: nowrap + text-indent: 50px + overflow: hidden + background: $blue url(/images/icon-pencil.svg) no-repeat + background-position: 12px 10px + background-size: 29px 29px - #markdown-toc - margin-bottom: 20px + #markdown-toc + margin-bottom: 20px - ul, li - list-style: disc - color: $blue + ul, li + list-style: disc + color: $blue - ul - padding: 0 15px - margin: 0 + ul + padding: 0 15px + margin: 0 - li - padding: 0 - line-height: 1.5em - margin-bottom: 0 + li + padding: 0 + line-height: 1.5em + margin-bottom: 0 - a - position: relative - color: $blue - font-weight: 700 + a + position: relative + color: $blue + font-weight: 700 - img - max-width: 100% + img + max-width: 100% - a - //font-weight: 700 - text-decoration: underline + a + //font-weight: 700 + text-decoration: underline -// a:visited -// color: blueviolet +// a:visited +// color: blueviolet - a.button - border-radius: 2px - text-decoration: none - - &:visited - color: white + a.button + border-radius: 2px + text-decoration: none + + &:visited + color: white - a.issue - margin-left: 0px + a.issue + margin-left: 0px .fixed footer - position: fixed - bottom: 0 + position: fixed + bottom: 0 #miceType - clear: both + clear: both html.search #docsContent - position: relative - float: none - width: 90% - max-width: 850px - margin: 0 auto + position: relative + float: none + width: 90% + max-width: 850px + margin: 0 auto - #editPageButton - display: none + #editPageButton + display: none - table - border: 0 - margin-bottom: 0 + table + border: 0 + margin-bottom: 0 - td - padding: 0 + td + padding: 0 - h1 - margin-bottom: 0 - border-bottom: 0 - padding-bottom: 0 - padding-left: 8px + h1 + margin-bottom: 0 + border-bottom: 0 + padding-bottom: 0 + padding-left: 8px @@ -1035,197 +1063,197 @@ $feature-box-div-margin-bottom: 40px // Home-specific #home - &.flip-nav, &.open-nav - .logo - background-image: url(/images/nav_logo2.svg) + &.flip-nav, &.open-nav + .logo + background-image: url(/images/nav_logo2.svg) - #hero - margin-bottom: 0 - padding-bottom: 1px + #hero + margin-bottom: 0 + padding-bottom: 1px - main - padding: 0 10px - margin-bottom: 30px + main + padding: 0 10px + margin-bottom: 30px - #vendorStrip - display: none + #vendorStrip + display: none // OCEAN NODES #oceanNodes - padding-top: $ocean-nodes-padding-Y - padding-bottom: $ocean-nodes-padding-Y + padding-top: $ocean-nodes-padding-Y + padding-bottom: $ocean-nodes-padding-Y - a - color: $blue + a + color: $blue - main - margin-bottom: $ocean-nodes-padding-Y - min-height: 160px + main + margin-bottom: $ocean-nodes-padding-Y + min-height: 160px - .image-wrapper - max-width: 75% - margin: 0 auto 20px - text-align: center + .image-wrapper + max-width: 75% + margin: 0 auto 20px + text-align: center - img - width: 100% - max-width: 160px + img + width: 100% + max-width: 160px - main:first-child - .image-wrapper - max-width: 100% + main:first-child + .image-wrapper + max-width: 100% - img - max-width: 491px + img + max-width: 491px - h3 - margin-bottom: $ocean-nodes-h3-margin-bottom + h3 + margin-bottom: $ocean-nodes-h3-margin-bottom // Video thingy #video - height: $video-section-height + height: $video-section-height #video - width: 100% - position: relative - background-image: url(/images/kub_video_banner.jpg) - background-position: center center - background-size: cover + width: 100% + position: relative + background-image: url(/images/kub_video_banner.jpg) + background-position: center center + background-size: cover - & > .light-text - display: none - position: absolute - top: 50% - left: 75% - width: 50% - max-width: 600px - min-width: 500px - padding-right: 10% - transform: translate(-50%, -50%) - color: white + & > .light-text + display: none + position: absolute + top: 50% + left: 75% + width: 50% + max-width: 600px + min-width: 500px + padding-right: 10% + transform: translate(-50%, -50%) + color: white - h2 - font-size: 32px - line-height: 44px - margin-bottom: 20px + h2 + font-size: 32px + line-height: 44px + margin-bottom: 20px - p - margin-bottom: 20px + p + margin-bottom: 20px - #desktopShowVideoButton - position: relative - font-size: 24px - background-color: white - border-radius: 8px - color: $blue - padding: 15px 30px 15px 80px + #desktopShowVideoButton + position: relative + font-size: 24px + background-color: white + border-radius: 8px + color: $blue + padding: 15px 30px 15px 80px - &:before - content: "" - position: absolute - @include pureCenter(40px) - width: 0 - height: 0 - border-style: solid - border-width: 10px 0 10px 20px - border-color: transparent transparent transparent $blue + &:before + content: "" + position: absolute + @include pureCenter(40px) + width: 0 + height: 0 + border-style: solid + border-width: 10px 0 10px 20px + border-color: transparent transparent transparent $blue - #mobileShowVideoButton - @include pureCenter - width: 80px - height: 80px - border-radius: 50% - background-color: transparent - border: 5px solid rgba(255, 255, 255, 0.2) - overflow: visible + #mobileShowVideoButton + @include pureCenter + width: 80px + height: 80px + border-radius: 50% + background-color: transparent + border: 5px solid rgba(255, 255, 255, 0.2) + overflow: visible - &:after - @include pureCenter - left: 40px - content: "" - width: 0 - height: 0 - border-style: solid - border-width: 20px 0 20px 30px - border-color: transparent transparent transparent #ffffff + &:after + @include pureCenter + left: 40px + content: "" + width: 0 + height: 0 + border-style: solid + border-width: 20px 0 20px 30px + border-color: transparent transparent transparent #ffffff #videoPlayer - @include fullScreen - background-color: rgba(0, 0, 0, 0.9) - display: none + @include fullScreen + background-color: rgba(0, 0, 0, 0.9) + display: none - iframe - @include pureCenter - @include maintain-aspect-ratio + iframe + @include pureCenter + @include maintain-aspect-ratio - #closeButton - position: absolute - top: 20px - right: 20px - width: 50px - height: 50px - border: 2px solid transparent - transition: 0.3s + #closeButton + position: absolute + top: 20px + right: 20px + width: 50px + height: 50px + border: 2px solid transparent + transition: 0.3s - &:before, &:after - content: "" - position: absolute - top: calc(50% - 1px) - left: 10% - width: 80% - height: 2px - background-color: white + &:before, &:after + content: "" + position: absolute + top: calc(50% - 1px) + left: 10% + width: 80% + height: 2px + background-color: white - &:before - transform: rotate(45deg) + &:before + transform: rotate(45deg) - &:after - transform: rotate(-45deg) + &:after + transform: rotate(-45deg) - &:hover - border-color: white + &:hover + border-color: white // Features #features - padding-top: 140px - background-color: $light-grey - background-image: url(/images/wheel.png) - background-position: center 60px - background-repeat: no-repeat - background-size: auto + padding-top: 140px + background-color: $light-grey + background-image: url(/images/wheel.png) + background-position: center 60px + background-repeat: no-repeat + background-size: auto .feature-box - //padding: 50px 0 - width: 100% - overflow: hidden - clear: both + //padding: 50px 0 + width: 100% + overflow: hidden + clear: both - h4 - line-height: normal - margin-bottom: 15px + h4 + line-height: normal + margin-bottom: 15px - & > div:first-child - float: left + & > div:first-child + float: left - & > div:last-child - float: right + & > div:last-child + float: right #features - h3 - margin-bottom: $features-h3-margin-bottom + h3 + margin-bottom: $features-h3-margin-bottom - .feature-box - margin-bottom: $feature-box-margin-bottom + .feature-box + margin-bottom: $feature-box-margin-bottom - & > div - width: $feature-box-div-width - margin-bottom: $feature-box-div-margin-bottom + & > div + width: $feature-box-div-width + margin-bottom: $feature-box-div-margin-bottom @@ -1233,492 +1261,492 @@ $feature-box-div-margin-bottom: 40px // Community #community, .gridPage - &.open-nav, &.flip-nav - .logo - background-image: url(/images/nav_logo2.svg) + &.open-nav, &.flip-nav + .logo + background-image: url(/images/nav_logo2.svg) - #hero - padding-bottom: 20px + #hero + padding-bottom: 20px - #mainContent - padding: 20px 0 + #mainContent + padding: 20px 0 - main - max-width: none + main + max-width: none - a - color: $blue + a + color: $blue - .content - margin-bottom: 30px - padding: 30px 0 + .content + margin-bottom: 30px + padding: 30px 0 - h1, h2, h3, h4, h5, h6, p - line-height: normal - max-width: 1200px - padding: 0 20px - margin: 0 auto 20px + h1, h2, h3, h4, h5, h6, p + line-height: normal + max-width: 1200px + padding: 0 20px + margin: 0 auto 20px - &:nth-child(even) - background-color: $light-grey + &:nth-child(even) + background-color: $light-grey - .company-logos - text-align: center - max-width: 1200px - margin: 0 auto + .company-logos + text-align: center + max-width: 1200px + margin: 0 auto - img - width: auto - margin: 10px - background-color: $light-grey + img + width: auto + margin: 10px + background-color: $light-grey - .partner-logos - text-align: center - max-width: 1200px - margin: 0 auto + .partner-logos + text-align: center + max-width: 1200px + margin: 0 auto - img - width: auto - margin: 10px - background-color: $white - box-shadow: 0 5px 5px rgba(0,0,0,.24),0 0 5px rgba(0,0,0,.12) + img + width: auto + margin: 10px + background-color: $white + box-shadow: 0 5px 5px rgba(0,0,0,.24),0 0 5px rgba(0,0,0,.12) - #calendarMeetings - position: relative - width: 80vw - height: 60vw - max-width: 1200px - max-height: 900px - margin: 20px auto + #calendarMeetings + position: relative + width: 80vw + height: 60vw + max-width: 1200px + max-height: 900px + margin: 20px auto - #calendarEvents - position: relative - width: 80vw - height: 30vw - max-width: 1200px - max-height: 450px - margin: 20px auto + #calendarEvents + position: relative + width: 80vw + height: 30vw + max-width: 1200px + max-height: 450px + margin: 20px auto - iframe - position: absolute - border: 0 - width: 100% - height: 100% + iframe + position: absolute + border: 0 + width: 100% + height: 100% // Dialog .ui-icon - display: inline-block !important + display: inline-block !important #feature-state-dialog-link - text-decoration: none !important - padding: 5px !important - a:visited - color: #454545 !important - a code - display: inline-block !important - box-sizing: border-box !important - background-color: #f7f7f7 !important - color: #303030 !important - font-family: "Roboto Mono", monospace !important - vertical-align: baseline !important - font-size: 14px !important - font-weight: bold !important - padding: 0px 4px !important + text-decoration: none !important + padding: 5px !important + a:visited + color: #454545 !important + a code + display: inline-block !important + box-sizing: border-box !important + background-color: #f7f7f7 !important + color: #303030 !important + font-family: "Roboto Mono", monospace !important + vertical-align: baseline !important + font-size: 14px !important + font-weight: bold !important + padding: 0px 4px !important #feature-state-dialog - background: #fff !important - border: 1px solid #ddd !important - padding: 0.5em 1em !important + background: #fff !important + border: 1px solid #ddd !important + padding: 0.5em 1em !important - ul, li - list-style: disc !important - margin: 4px 12px !important + ul, li + list-style: disc !important + margin: 4px 12px !important - p - margin: 8px 0px !important + p + margin: 8px 0px !important - code - display: inline-block !important - box-sizing: border-box !important - background-color: #f7f7f7 !important - color: #303030 !important - font-family: "Roboto Mono", monospace !important - vertical-align: baseline !important - font-size: 14px !important - font-weight: bold !important - padding: 0px 4px !important + code + display: inline-block !important + box-sizing: border-box !important + background-color: #f7f7f7 !important + color: #303030 !important + font-family: "Roboto Mono", monospace !important + vertical-align: baseline !important + font-size: 14px !important + font-weight: bold !important + padding: 0px 4px !important .ui-dialog - background: #f7f7f7 !important - padding: 0.5em + background: #f7f7f7 !important + padding: 0.5em .ui-dialog-content - position: relative - float: right - width: 100% + position: relative + float: right + width: 100% - $toc-margin: 15px - $header-clearance: $header-height + 20px + $toc-margin: 15px + $header-clearance: $header-height + 20px - * + h2, * + h3, * + h4, * + h5, * + h6 - margin-top: 30px + * + h2, * + h3, * + h4, * + h5, * + h6 + margin-top: 30px - h1, h2, h3, h4, h5, h6 - line-height: normal - font-weight: 500 - margin-bottom: 30px - padding-bottom: 10px + h1, h2, h3, h4, h5, h6 + line-height: normal + font-weight: 500 + margin-bottom: 30px + padding-bottom: 10px - // Make sure anchor links aren't hidden by the header - &:before - display: block - content: " " - margin-top: -$header-clearance - height: $header-clearance - visibility: hidden + // Make sure anchor links aren't hidden by the header + &:before + display: block + content: " " + margin-top: -$header-clearance + height: $header-clearance + visibility: hidden - h1,h2 - border-bottom: 1px solid #cccccc - - h1 - font-size: 32px - padding-right: 60px + h1,h2 + border-bottom: 1px solid #cccccc + + h1 + font-size: 32px + padding-right: 60px - h2 - font-size: 28px + h2 + font-size: 28px - h3 - font-size: 24px - font-weight: 300 - margin-bottom: 5px + h3 + font-size: 24px + font-weight: 300 + margin-bottom: 5px - h4 - font-size: 20px - margin-bottom: 0px + h4 + font-size: 20px + margin-bottom: 0px - h5, h6 - font-size: 16px - font-weight: 500 + h5, h6 + font-size: 16px + font-weight: 500 - p - font-size: 16px - font-weight: 300 - line-height: 1.75em + p + font-size: 16px + font-weight: 300 + line-height: 1.75em - p + p - margin-top: 10px + p + p + margin-top: 10px - code - display: inline-block - box-sizing: border-box - background-color: $light-grey - color: $dark-grey - font-family: $mono-font - vertical-align: baseline - font-size: 14px - font-weight: bold - padding: 2px 4px + code + display: inline-block + box-sizing: border-box + background-color: $light-grey + color: $dark-grey + font-family: $mono-font + vertical-align: baseline + font-size: 14px + font-weight: bold + padding: 2px 4px - a code - color: $blue - text-decoration: underline + a code + color: $blue + text-decoration: underline - pre .pi, pre .s - margin: 0 - padding: 0 + pre .pi, pre .s + margin: 0 + padding: 0 - .highlight code span, code, pre code - font-family: "Roboto Mono", monospace + .highlight code span, code, pre code + font-family: "Roboto Mono", monospace - code, pre code - color: #303030 + code, pre code + color: #303030 - pre code - padding: 0 + pre code + padding: 0 - pre - background-color: #f7f7f7 - display: block - margin: 20px 0 - padding: 15px - position: relative - overflow-x: auto + pre + background-color: #f7f7f7 + display: block + margin: 20px 0 + padding: 15px + position: relative + overflow-x: auto - h1 code, h2 code, h3 code, h4 code, h5 code, h6 code - font-family: inherit - font-size: inherit - background-color: transparent + h1 code, h2 code, h3 code, h4 code, h5 code, h6 code + font-family: inherit + font-size: inherit + background-color: transparent - .includecode - table-layout: fixed + .includecode + table-layout: fixed - .includecode, .includecode th, .includecode td - padding: 0 !important + .includecode, .includecode th, .includecode td + padding: 0 !important - .includecode th - text-align: right !important - padding: 10px !important + .includecode th + text-align: right !important + padding: 10px !important - .includecode th a, .includecode th a code - color: white !important - background-color: transparent !important + .includecode th a, .includecode th a code + color: white !important + background-color: transparent !important - .includecode pre - margin: 0 !important + .includecode pre + margin: 0 !important - ul li - list-style: disc + ul li + list-style: disc - ol li - list-style: decimal + ol li + list-style: decimal - ul, ol - margin: 20px 0 - padding-left: 30px - font-weight: 300 + ul, ol + margin: 20px 0 + padding-left: 30px + font-weight: 300 - ul ul, ol ol, ul ol, ol ul - margin: 0.75em 0 + ul ul, ol ol, ul ol, ol ul + margin: 0.75em 0 - li - margin-bottom: 0.75em - font-size: 16px - line-height: 1.75em + li + margin-bottom: 0.75em + font-size: 16px + line-height: 1.75em - table - width: 100% - border: 1px solid #ccc - border-spacing: 0 - margin-top: 30px - margin-bottom: 30px + table + width: 100% + border: 1px solid #ccc + border-spacing: 0 + margin-top: 30px + margin-bottom: 30px - thead, tr:nth-child(even) - background-color: $light-grey + thead, tr:nth-child(even) + background-color: $light-grey - thead - background-color: #555 - color: white + thead + background-color: #555 + color: white - th, td - padding: 8px - text-align: left - margin: 0 + th, td + padding: 8px + text-align: left + margin: 0 - th - font-weight: normal + th + font-weight: normal - td - font-size: 0.85em + td + font-size: 0.85em - #editPageButton - position: absolute - top: -25px - right: 5px - width: 50px - height: 50px - line-height: 50px - border-radius: 50% - white-space: nowrap - text-indent: 50px - overflow: hidden - background: $blue url(/images/icon-pencil.svg) no-repeat - background-position: 12px 10px - background-size: 29px 29px + #editPageButton + position: absolute + top: -25px + right: 5px + width: 50px + height: 50px + line-height: 50px + border-radius: 50% + white-space: nowrap + text-indent: 50px + overflow: hidden + background: $blue url(/images/icon-pencil.svg) no-repeat + background-position: 12px 10px + background-size: 29px 29px - #markdown-toc - margin-bottom: 20px + #markdown-toc + margin-bottom: 20px - ul, li - list-style: disc - color: $blue + ul, li + list-style: disc + color: $blue - ul - padding: 0 15px - margin: 0 + ul + padding: 0 15px + margin: 0 - li - padding: 0 - line-height: 1.5em - margin-bottom: 0 + li + padding: 0 + line-height: 1.5em + margin-bottom: 0 - a - position: relative - color: $blue - font-weight: 700 + a + position: relative + color: $blue + font-weight: 700 - img - max-width: 100% + img + max-width: 100% - a - //font-weight: 700 - text-decoration: underline + a + //font-weight: 700 + text-decoration: underline -// a:visited -// color: blueviolet +// a:visited +// color: blueviolet - a.button - border-radius: 2px - text-decoration: none - - &:visited - color: white + a.button + border-radius: 2px + text-decoration: none + + &:visited + color: white - a.issue - margin-left: 0px + a.issue + margin-left: 0px .ui-dialog-buttonpane - background: #f7f7f7 !important + background: #f7f7f7 !important // Tabs .ui-widget-header - background: transparent !important - background-color: transparent !important - border: 0px !important + background: transparent !important + background-color: transparent !important + border: 0px !important .ui-tabs - ul, ol, li - padding: 0px !important - list-style: none !important - margin-bottom: 0px !important - margin-left: 4px !important + ul, ol, li + padding: 0px !important + list-style: none !important + margin-bottom: 0px !important + margin-left: 4px !important .ui-tabs-panel - ul li - list-style: disc !important + ul li + list-style: disc !important - ol li - list-style: decimal !important + ol li + list-style: decimal !important .ui-widget-content - border: 0px !important + border: 0px !important - table - margin: 0px !important + table + margin: 0px !important .ui-tabs .ui-tabs-panel - border: 1px solid #ccc !important + border: 1px solid #ccc !important .ui-tabs-anchor - text-decoration: none !important + text-decoration: none !important // Talk to us #talkToUs - h3, h4 - text-align: center + h3, h4 + text-align: center - h3 - margin-bottom: 15px + h3 + margin-bottom: 15px - h4 - line-height: normal - margin-bottom: 50px + h4 + line-height: normal + margin-bottom: 50px - br - display: none + br + display: none - #bigSocial - overflow: hidden + #bigSocial + overflow: hidden - div - width: 100% - float: left - padding: 30px - padding-top: 110px - background-position: center top - background-size: auto - background-repeat: no-repeat + div + width: 100% + float: left + padding: 30px + padding-top: 110px + background-position: center top + background-size: auto + background-repeat: no-repeat - div:nth-child(1) - background-image: url(/images/twitter_icon.png) + div:nth-child(1) + background-image: url(/images/twitter_icon.png) - div:nth-child(2) - background-image: url(/images/github_icon.png) + div:nth-child(2) + background-image: url(/images/github_icon.png) - div:nth-child(3) - background-image: url(/images/slack_icon.png) + div:nth-child(3) + background-image: url(/images/slack_icon.png) - div:nth-child(4) - background-image: url(/images/stackoverflow_icon.png) + div:nth-child(4) + background-image: url(/images/stackoverflow_icon.png) - div + div - margin-top: 20px - margin-left: 0 + div + div + margin-top: 20px + margin-left: 0 - a - display: inline-block - color: $blue - font-size: 24px - font-weight: 400 - text-decoration: none - margin-bottom: 15px + a + display: inline-block + color: $blue + font-size: 24px + font-weight: 400 + text-decoration: none + margin-bottom: 15px - a, p - text-align: center - width: 100% + a, p + text-align: center + width: 100% #home - #talkToUs - main - padding: 30px 0 - - h5 - font-size: 20px + #talkToUs + main + padding: 30px 0 + + h5 + font-size: 20px - #caseStudiesWrapper - position: relative - text-align: center - margin-bottom: 30px - - div - position: relative - display: inline-block - vertical-align: top - width: 100% - min-height: 230px - padding: 125px 10px 15px - margin-bottom: 30px - background-position: top center - background-repeat: no-repeat + #caseStudiesWrapper + position: relative + text-align: center + margin-bottom: 30px + + div + position: relative + display: inline-block + vertical-align: top + width: 100% + min-height: 230px + padding: 125px 10px 15px + margin-bottom: 30px + background-position: top center + background-repeat: no-repeat - div:nth-child(1) - background-image: url(/images/community_logos/pearson_logo.png) + div:nth-child(1) + background-image: url(/images/community_logos/pearson_logo.png) - div:nth-child(2) - background-image: url(/images/community_logos/box_logo.png) + div:nth-child(2) + background-image: url(/images/community_logos/box_logo.png) - div:nth-child(3) - background-image: url(/images/community_logos/ebay_logo.png) + div:nth-child(3) + background-image: url(/images/community_logos/ebay_logo.png) - div:nth-child(4) - background-image: url(/images/community_logos/wikimedia_foundation_logo.png) - - p - font-size: 20px - - a - position: absolute - bottom: 0 - left: 50% - transform: translateX(-50%) - color: $blue - font-weight: 400 + div:nth-child(4) + background-image: url(/images/community_logos/wikimedia_foundation_logo.png) + + p + font-size: 20px + + a + position: absolute + bottom: 0 + left: 50% + transform: translateX(-50%) + color: $blue + font-weight: 400 - - //#bigSocial - // text-align: center - // - // div - // display: inline-block - // float: none - // padding-top: 125px - // width: calc(90%) - // - // a - // margin-top: 15px - // font-size: 18px - // - // - // + + //#bigSocial + // text-align: center + // + // div + // display: inline-block + // float: none + // padding-top: 125px + // width: calc(90%) + // + // a + // margin-top: 15px + // font-size: 18px + // + // + // //