@import '_normalize.css' @import '_variables' @import '_icon_font' .highlight .c, .highlight .cm, .highlight .c1, .highlight .cs { color: #909090; } .highlight, .highlight .w { background-color: $code-bg; } @import '_monokai.css' /* Copyright 2008-2013 Concur Technologies, Inc. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ //////////////////////////////////////////////////////////////////////////////// // GENERAL STUFF //////////////////////////////////////////////////////////////////////////////// html, body color: $main-text padding: 0 margin: 0 -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale @extend $default-font background-color: $main-bg height: 100% -webkit-text-size-adjust: none /* Never autoresize text */ //////////////////////////////////////////////////////////////////////////////// // TABLE OF CONTENTS //////////////////////////////////////////////////////////////////////////////// #toc > ul > li > a > span float: right background-color: #2484FF border-radius: 40px width: 20px embossed-bg() background: linear-gradient(to bottom, rgba(black, 0.2), rgba(black, 0) 8px), linear-gradient(to top, rgba(black, 0.2), rgba(black, 0) 8px), linear-gradient(to bottom, rgba($nav-embossed-border-top, 1), rgba($nav-embossed-border-top, 0) 1.5px), linear-gradient(to top, rgba($nav-embossed-border-bottom, 1), rgba($nav-embossed-border-bottom, 0) 1.5px), $nav-subitem-bg .tocify-wrapper transition: left 0.3s ease-in-out overflow-y: auto overflow-x: hidden position: fixed z-index: 30 top: 0 left: 0 bottom: 0 width: $nav-width background-color: $nav-bg font-size: 13px font-weight: bold // language selector for mobile devices .lang-selector display: none a padding-top: 0.5em padding-bottom: 0.5em // This is the logo at the top of the ToC & > img display: block & > .search position: relative input background: $nav-bg border-width: 0 0 1px 0 border-color: $search-box-border-color padding: 6px 0 6px 20px box-sizing: border-box margin: $nav-v-padding $nav-padding width: ($nav-width - 30) outline: none color: $nav-text border-radius: 0 /* ios has a default border radius */ &:before position: absolute top: 17px left: $nav-padding color: $nav-text @extend $icon-search img+.tocify margin-top: $logo-margin .search-results margin-top: 0 box-sizing: border-box height: 0 overflow-y: auto overflow-x: hidden transition-property: height, margin transition-duration: 180ms transition-timing-function: ease-in-out &.visible height: 30% margin-bottom: 1em embossed-bg() li margin: 1em $nav-padding line-height: 1 a color: $nav-text text-decoration: none &:hover text-decoration: underline .tocify-item>a, .toc-footer li padding: 0 $nav-padding 0 $nav-padding display: block overflow-x: hidden white-space: nowrap text-overflow: ellipsis // The Table of Contents is composed of multiple nested // unordered lists. These styles remove the default // styling of an unordered list because it is ugly. ul, li list-style: none margin: 0 padding: 0 line-height: 28px li color: $nav-text transition-property: background transition-timing-function: linear transition-duration: 230ms // This is the currently selected ToC entry .tocify-focus box-shadow: 0px 1px 0px $nav-active-shadow background-color: $nav-active-bg color: $nav-active-text // Subheaders are the submenus that slide open // in the table of contents. .tocify-subheader display: none // tocify will override this when needed background-color: $nav-subitem-bg font-weight: 500 .tocify-item>a padding-left: ($nav-padding + $nav-indent) font-size: 12px // for embossed look: embossed-bg() & > li:last-child box-shadow: none // otherwise it'll overflow out of the subheader .toc-footer padding: 1em 0 margin-top: 1em border-top: 1px dashed $nav-footer-border-color li,a color: $nav-text text-decoration: none a:hover text-decoration: underline li font-size: 0.8em line-height: 1.7 text-decoration: none // button to show navigation on mobile devices #nav-button span display: block $side-pad = $main-padding / 2 - 8px padding: $side-pad $side-pad $side-pad background-color: rgba($main-bg, 0.7) transform-origin: 0 0 transform: rotate(-90deg) translate(-100%, 0) border-radius: 0 0 0 5px padding: 0 1.5em 5em 0 // increase touch size area display: none position: fixed top: 0 left: 0 z-index: 100 color: #000 text-decoration: none font-weight: bold opacity: 0.7 line-height: 16px img height: 16px vertical-align: bottom transition: left 0.3s ease-in-out &:hover opacity: 1 &.open left: $nav-width //////////////////////////////////////////////////////////////////////////////// // PAGE LAYOUT AND CODE SAMPLE BACKGROUND //////////////////////////////////////////////////////////////////////////////// .page-wrapper margin-left: $nav-width position: relative z-index: 10 background-color: $main-bg min-height: 100% padding-bottom: 1px // prevent margin overflow // The dark box is what gives the code samples their dark background. // It sits essentially under the actual content block, which has a // transparent background. // I know, it's hackish, but it's the simplist way to make the left // half of the content always this background color. .dark-box width: $examples-width background-color: $examples-bg position: absolute right: 0 top: 0 bottom: 0 .lang-selector position: fixed z-index: 50 border-bottom: 5px solid $lang-select-active-bg .lang-selector background-color: $lang-select-bg width: 100% font-weight: bold a display: block float: left color: $lang-select-text text-decoration: none padding: 0 10px line-height: 30px outline: 0 &:active, &:focus background-color: $lang-select-pressed-bg color: $lang-select-pressed-text &.active background-color: $lang-select-active-bg color: $lang-select-active-text &:after content: '' clear: both display: block //////////////////////////////////////////////////////////////////////////////// // CONTENT STYLES //////////////////////////////////////////////////////////////////////////////// // This is all the stuff with the light background in the left half of the page .content // to place content above the dark box position: relative z-index: 30 &:after content: '' display: block clear: both & > h1, & > h2, & > h3, & > h4, & > h5, & > h6, & > p, & > table, & > ul, & > ol, & > aside, & > dl margin-right: $examples-width padding: 0 $main-padding box-sizing: border-box display: block text-shadow: ($main-embossed-text-shadow) & > ul, & > ol padding-left: ($main-padding + 15px) // the div is the tocify hidden div for placeholding stuff & > h1, & > h2, & > div clear: both h1 @extend $header-font font-size: 30px padding-top: 0.5em padding-bottom: 0.5em border-bottom: 1px solid #ccc margin-bottom: $h1-margin-bottom margin-top: 2em border-top: 1px solid #ddd background-image: linear-gradient(to bottom, white, #f9f9f9) h1:first-child, div:first-child + h1 border-top-width: 0 margin-top: 0 h2 @extend $header-font font-size: 20px margin-top: 4em margin-bottom: 0 border-top: 1px solid #ccc padding-top: 1.2em padding-bottom: 1.2em background-image: linear-gradient(to bottom, rgba(white, 0.4), rgba(white, 0)) // h2s right after h1s should bump right up // against the h1s. h1 + h2, h1 + div + h2 margin-top: ($h1-margin-bottom * -1) border-top: none h3, h4, h5, h6 @extend $header-font font-size: 15px margin-top: 2.5em margin-bottom: 0.8em h4, h5, h6 font-size: 10px hr margin: 2em 0 border-top: 2px solid $examples-bg border-bottom: 2px solid $main-bg table margin-bottom: 1em overflow: auto th,td text-align: left vertical-align: top line-height: 1.6 th padding: 5px 10px border-bottom: 1px solid #ccc vertical-align: bottom td padding: 10px tr:last-child border-bottom: 1px solid #ccc tr:nth-child(odd) > td background-color: lighten($main-bg, 4.2%) tr:nth-child(even) > td background-color: lighten($main-bg, 2.4%) dt font-weight: bold dd margin-left: 15px p, li, dt, dd line-height: 1.6 margin-top: 0 img max-width: 100% code background-color: rgba(0, 0, 0, 0.05) padding: 3px border-radius: 3px @extend $break-words @extend $code-font pre>code background-color: transparent padding: 0 aside padding-top: 1em padding-bottom: 1em text-shadow: (0 1px 0 lighten($aside-notice-bg, 15%)) margin-top: 1.5em margin-bottom: 1.5em background: $aside-notice-bg line-height: 1.6 &.warning background-color: $aside-warning-bg text-shadow: (0 1px 0 lighten($aside-warning-bg, 15%)) &.success background-color: $aside-success-bg text-shadow: (0 1px 0 lighten($aside-success-bg, 15%)) aside:before vertical-align: middle padding-right: 0.5em font-size: 14px aside.notice:before @extend $icon-info-sign aside.warning:before @extend $icon-exclamation-sign aside.success:before @extend $icon-ok-sign .search-highlight padding: 2px margin: -2px border-radius: 4px border: 1px solid #F7E633 text-shadow: (1px 1px 0 #666666) background: linear-gradient(to top left, #f7e633 0%, #f1d32f 100%) //////////////////////////////////////////////////////////////////////////////// // CODE SAMPLE STYLES //////////////////////////////////////////////////////////////////////////////// // This is all the stuff that appears in the right half of the page .content pre, blockquote background-color: $code-bg color: #fff padding: 2em $main-padding margin: 0 width: $examples-width float: right clear: right box-sizing: border-box text-shadow: (0px 1px 2px rgba(0, 0, 0, 0.4)) & > p margin: 0 a color: #fff text-decoration: none border-bottom: dashed 1px #ccc pre @extend $code-font blockquote & > p background-color: $code-annotation-bg border-radius: 5px padding: $code-annotation-padding color: #ccc border-top: 1px solid #000 border-bottom: 1px solid #404040 //////////////////////////////////////////////////////////////////////////////// // RESPONSIVE DESIGN //////////////////////////////////////////////////////////////////////////////// // These are the styles for phones and tablets // There are also a couple styles disperesed @media (max-width: $tablet-width) .tocify-wrapper left: -1*$nav-width &.open left: 0 .page-wrapper margin-left: 0 #nav-button display: block .tocify-wrapper .tocify-item > a padding-top: 0.3em padding-bottom: 0.3em @media (max-width: $phone-width) .dark-box display: none .tocify-wrapper .lang-selector display: block .page-wrapper .lang-selector display: none .content h1,h2,h3,h4,h5,h6,p,table,ul,ol,aside,dl margin-right: 0 pre, blockquote float: none width: auto