| // Heading sizes |
| |
| $font-size-base: 14px !default; |
| |
| $h1-font-size: $font-size-base * 2.25 !default; |
| $h2-font-size: $font-size-base * 2 !default; |
| $h3-font-size: $font-size-base * 1.5 !default; |
| $h4-font-size: $font-size-base * 1.35 !default; |
| $h5-font-size: $font-size-base * 1.15 !default; |
| $h6-font-size: $font-size-base !default; |
| |
| // Font weights |
| |
| $font-weight-light: 300 !default; |
| $font-weight-normal: 400 !default; |
| $font-weight-medium: 500 !default; |
| $font-weight-bold: 700 !default; |
| |
| $font-weight-body-text: $font-weight-normal !default; |
| $headings-font-weight: $font-weight-medium !default; |
| |
| // Bazel logo colors |
| $bazel-green: #43a047; |
| $bazel-green-light: #76d275; |
| $bazel-green-dark-left: #00701a; |
| $bazel-green-dark-right: #004300; |
| $color-on-bazel-green: #fff; |
| |
| $body-font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, |
| sans-serif; |
| $code-font-family: 'Monaco', 'Source Code Pro', monospace; |
| |
| $link-color: $bazel-green-dark-left; |
| $link-hover-color: lighten($link-color, 20%); |
| $well-color: #eee; |
| $code-color: #000; |
| $text-color: #000; |
| |
| $vpad: 0px; |
| |
| $table-bg: #fff; |
| $table-cell-padding: 5px; |
| $table-border-color: $bazel-green; |
| $text-muted: $color-on-bazel-green; |
| $line-height-base: 1.5; |
| $line-height-computed: 1.5; |
| |
| html { |
| position: relative; |
| min-height: 100%; |
| font-size: 100%; |
| } |
| |
| body { |
| padding-top: 50px; |
| color: $text-color; |
| font-family: $body-font-family; |
| line-height: $line-height-base; |
| } |
| |
| a { |
| color: $link-color; |
| font-weight: $font-weight-medium; |
| |
| &:hover, |
| &:focus { |
| color: $link-hover-color; |
| } |
| |
| code { |
| color: $link-color; |
| } |
| } |
| |
| h1, |
| h2, |
| h3, |
| h4, |
| h5, |
| h6 { |
| color: $text-color; |
| margin-top: 2rem; |
| margin-bottom: 1rem; |
| } |
| |
| h1 code, |
| h2 code, |
| h3 code, |
| h4 code, |
| h5 code, |
| h6 code { |
| color: $text-color; |
| background: transparent; |
| } |
| |
| h1 { |
| font-size: $h1-font-size; |
| font-weight: $font-weight-bold; |
| } |
| |
| h2 { |
| font-size: $h2-font-size; |
| |
| code { |
| font-size: 24px; |
| } |
| } |
| |
| h3 { |
| font-size: $h3-font-size; |
| |
| code { |
| font-size: 20px; |
| } |
| } |
| |
| h4 { |
| font-size: $h4-font-size; |
| |
| code { |
| font-size: 18px; |
| } |
| } |
| |
| h5 { |
| font-size: $h5-font-size; |
| } |
| |
| h6 { |
| font-size: $h6-font-size; |
| } |
| |
| p, |
| li { |
| font-size: $font-size-base; |
| line-height: $line-height-base; |
| } |
| |
| pre { |
| padding: 8px 16px; |
| margin: 8px 0; |
| font-family: $code-font-family; |
| background-color: $well-color; |
| border: 0; |
| font-size: 100%; |
| line-height: 20px; |
| color: $code-color; |
| border-radius: 6px; |
| box-shadow: 1px 1px 5px #aaa; |
| } |
| |
| code { |
| font-family: $code-font-family; |
| font-size: 13px; |
| background-color: $well-color; |
| color: $code-color; |
| } |
| |
| |
| // Imitate material design buttons |
| .btn-lg { |
| font-size: 14px; |
| text-transform: uppercase; |
| } |
| |
| $md-shadow-1: rgba(0, 0, 0, .14); |
| $md-shadow-2: rgba(0, 0, 0, .2); |
| $md-shadow-3: rgba(0, 0, 0, .12); |
| |
| |
| @media (min-width: 768px) { |
| .container { |
| width: 100%; |
| max-width: 100%; |
| } |
| } |
| |
| @media (min-width: 992px) { |
| .content { |
| max-width: 85%; |
| } |
| |
| body > .container { |
| padding-left: 0; |
| padding-right: 0; |
| } |
| } |
| |
| .content { |
| padding: 40px 30px; |
| p { |
| line-height: 22px; |
| margin-bottom: 1rem; |
| } |
| } |
| |
| .btn-success { |
| border-radius: 2px; |
| box-shadow: 0 2px 2px 0 $md-shadow-1, 0 3px 1px -2px $md-shadow-2, 0 1px 5px 0 $md-shadow-3; |
| border: 0; |
| } |
| |
| .well { |
| background-color: $well-color; |
| border-color: $well-color; |
| box-shadow: none; |
| } |
| |
| // Shared |
| .vpad { |
| padding-top: $vpad; |
| } |
| |
| .page-title-bar { |
| background-color: $bazel-green-light; |
| padding-top: 20px; |
| padding-bottom: 20px; |
| |
| h1, |
| h2, |
| h3, |
| h4, |
| h5, |
| h6 { |
| margin: 8px 0 4px; |
| color: $color-on-bazel-green; |
| } |
| } |
| |
| .gsc-control-cse { |
| *, |
| *::before, |
| *::after { |
| -webkit-box-sizing: content-box !important; |
| -moz-box-sizing: content-box !important; |
| box-sizing: content-box !important; |
| } |
| } |
| |
| // Used for the Command-line Reference flag anchors. Linkifying the flag name |
| // causes it to turn $link-color (green), but we turn it red here to be consistent |
| // with the rest of the code block. |
| dd > code > a, |
| dl > dt > code > a { |
| color: $code-color; |
| } |
| |
| dl > dt { |
| margin-top: 1.5rem; |
| margin-bottom: .5rem; |
| } |