123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633 |
- @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;
- max-width: 100%;
- margin-bottom: $logo-margin;
- }
- &>.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;
- }
|