|
|
|
@@ -0,0 +1,635 @@ |
|
|
|
@charset "utf-8"; |
|
|
|
@import 'normalize'; |
|
|
|
@import 'variables'; |
|
|
|
@import 'icon-font'; |
|
|
|
// @import 'rtl'; // uncomment to switch to RTL format |
|
|
|
|
|
|
|
/* |
|
|
|
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; |
|
|
|
} |
|
|
|
|
|
|
|
.toc-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 |
|
|
|
.logo { |
|
|
|
display: block; |
|
|
|
margin: 15px auto; |
|
|
|
max-width: 100%; |
|
|
|
margin-bottom: $logo-margin; |
|
|
|
max-width: 80%; |
|
|
|
} |
|
|
|
|
|
|
|
&>.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 - ($nav-padding*2); |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
background: $nav-subitem-bg; |
|
|
|
&.visible { |
|
|
|
height: 30%; |
|
|
|
margin-bottom: 1em; |
|
|
|
} |
|
|
|
|
|
|
|
li { |
|
|
|
margin: 1em $nav-padding; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
color: $nav-text; |
|
|
|
text-decoration: none; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
text-decoration: underline; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 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: 200ms; |
|
|
|
} |
|
|
|
|
|
|
|
// This is the currently selected ToC entry |
|
|
|
.toc-link.active { |
|
|
|
background-color: $nav-active-bg; |
|
|
|
color: $nav-active-text; |
|
|
|
} |
|
|
|
|
|
|
|
// this is parent links of the currently selected ToC entry |
|
|
|
.toc-link.active-parent { |
|
|
|
background-color: $nav-active-parent-bg; |
|
|
|
color: $nav-active-parent-text; |
|
|
|
} |
|
|
|
|
|
|
|
.toc-list-h2 { |
|
|
|
display: none; |
|
|
|
background-color: $nav-subitem-bg; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
|
|
|
|
.toc-h2 { |
|
|
|
padding-left: $nav-padding + $nav-indent; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.toc-link, .toc-footer li { |
|
|
|
padding: 0 $nav-padding 0 $nav-padding; |
|
|
|
display: block; |
|
|
|
overflow-x: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
text-overflow: ellipsis; |
|
|
|
text-decoration: none; |
|
|
|
color: $nav-text; |
|
|
|
transition-property: background; |
|
|
|
transition-timing-function: linear; |
|
|
|
transition-duration: 130ms; |
|
|
|
} |
|
|
|
|
|
|
|
// 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 { |
|
|
|
display: flex; |
|
|
|
background-color: $lang-select-bg; |
|
|
|
width: 100%; |
|
|
|
font-weight: bold; |
|
|
|
overflow-x: auto; |
|
|
|
a { |
|
|
|
display: inline; |
|
|
|
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 { |
|
|
|
// fixes webkit rendering bug for some: see #538 |
|
|
|
-webkit-transform: translateZ(0); |
|
|
|
// 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; |
|
|
|
|
|
|
|
@extend %left-col; |
|
|
|
} |
|
|
|
|
|
|
|
&>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: 25px; |
|
|
|
padding-top: 0.5em; |
|
|
|
padding-bottom: 0.5em; |
|
|
|
margin-bottom: $h1-margin-bottom; |
|
|
|
margin-top: 2em; |
|
|
|
border-top: 1px solid #ccc; |
|
|
|
border-bottom: 1px solid #ccc; |
|
|
|
background-color: #fdfdfd; |
|
|
|
} |
|
|
|
|
|
|
|
h1:first-child, div:first-child + h1 { |
|
|
|
border-top-width: 0; |
|
|
|
margin-top: 0; |
|
|
|
} |
|
|
|
|
|
|
|
h2 { |
|
|
|
@extend %header-font; |
|
|
|
font-size: 19px; |
|
|
|
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(#fff, 0.2), rgba(#fff, 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; |
|
|
|
code { |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
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; |
|
|
|
margin-top: 1.5em; |
|
|
|
margin-bottom: 1.5em; |
|
|
|
background: $aside-notice-bg; |
|
|
|
line-height: 1.6; |
|
|
|
|
|
|
|
&.warning { |
|
|
|
background-color: $aside-warning-bg; |
|
|
|
} |
|
|
|
|
|
|
|
&.success { |
|
|
|
background-color: $aside-success-bg; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
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: -3px; |
|
|
|
border-radius: 4px; |
|
|
|
border: 1px solid #F7E633; |
|
|
|
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 { |
|
|
|
&>div.highlight { |
|
|
|
clear:none; |
|
|
|
} |
|
|
|
|
|
|
|
pre, blockquote { |
|
|
|
background-color: $code-bg; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
margin: 0; |
|
|
|
width: $examples-width; |
|
|
|
|
|
|
|
float:right; |
|
|
|
clear:right; |
|
|
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
@extend %right-col; |
|
|
|
|
|
|
|
&>p { margin: 0; } |
|
|
|
|
|
|
|
a { |
|
|
|
color: #fff; |
|
|
|
text-decoration: none; |
|
|
|
border-bottom: dashed 1px #ccc; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
pre { |
|
|
|
@extend %code-font; |
|
|
|
padding-top: 2em; |
|
|
|
padding-bottom: 2em; |
|
|
|
padding: 2em $main-padding; |
|
|
|
} |
|
|
|
|
|
|
|
blockquote { |
|
|
|
&>p { |
|
|
|
background-color: $code-annotation-bg; |
|
|
|
padding: $code-annotation-padding 2em; |
|
|
|
color: #eee; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//////////////////////////////////////////////////////////////////////////////// |
|
|
|
// RESPONSIVE DESIGN |
|
|
|
//////////////////////////////////////////////////////////////////////////////// |
|
|
|
// These are the styles for phones and tablets |
|
|
|
// There are also a couple styles disperesed |
|
|
|
|
|
|
|
@media (max-width: $tablet-width) { |
|
|
|
.toc-wrapper { |
|
|
|
left: -$nav-width; |
|
|
|
|
|
|
|
&.open { |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.page-wrapper { |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
#nav-button { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.toc-link { |
|
|
|
padding-top: 0.3em; |
|
|
|
padding-bottom: 0.3em; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@media (max-width: $phone-width) { |
|
|
|
.dark-box { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
%left-col { |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.toc-wrapper .lang-selector { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
|
|
|
|
.page-wrapper .lang-selector { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
%right-col { |
|
|
|
width: auto; |
|
|
|
float: none; |
|
|
|
} |
|
|
|
|
|
|
|
%right-col + %left-col { |
|
|
|
margin-top: $main-padding; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.highlight .c, .highlight .cm, .highlight .c1, .highlight .cs { |
|
|
|
color: #909090; |
|
|
|
} |
|
|
|
|
|
|
|
.highlight, .highlight .w { |
|
|
|
background-color: $code-bg; |
|
|
|
} |
|
|
|
|
|
|
|
.copy-clipboard { |
|
|
|
float: right; |
|
|
|
fill: #9DAAB6; |
|
|
|
cursor: pointer; |
|
|
|
opacity: 0.4; |
|
|
|
height: 18px; |
|
|
|
width: 18px; |
|
|
|
} |
|
|
|
|
|
|
|
.copy-clipboard:hover { |
|
|
|
opacity: 0.8; |
|
|
|
} |
yystopf
4 years ago
