| $article-width: 70%; |
| $toc-width: 20%; |
| $site-toc-width: 175px; |
| |
| // Site navigation on all pages |
| .inline-site-toc { |
| line-height: 1.3em; |
| |
| a { |
| @include display-flex(); |
| padding: 0.5em 0; |
| } |
| |
| a, |
| a:link, |
| a:visited { |
| color: $gray-medium; |
| font-weight: normal; |
| |
| &:hover, |
| &:focus { |
| color: $black; |
| } |
| } |
| |
| span .show { |
| display: block; |
| content: "+ or -"; |
| } |
| |
| li { |
| display: none; |
| |
| .show { |
| display: block; |
| content: "+ or -"; |
| } |
| |
| &.show, |
| &.show > ol > li { |
| display: block; |
| } |
| |
| &.toplevel { |
| span { |
| // font-size: 18px; |
| // color: #bbb; |
| // background: $white; |
| display: none; |
| } |
| |
| li { |
| padding-left: 1em; |
| } |
| |
| > ol { |
| &.toc > li { |
| font-size: 15px; |
| margin: 0 0; |
| padding: 15px 1em; |
| border-bottom: $default-border; |
| } |
| > li { |
| cursor: default; |
| |
| &.show { |
| background-color: darken($gray-light, 2%); |
| } |
| > ol > li:first-child { |
| padding-top: 10px; |
| } |
| } |
| } |
| } |
| |
| li a, |
| li a:link, |
| li a:visited { |
| color: $gray-medium; |
| |
| &:hover, |
| &:focus { |
| color: $black; |
| } |
| } |
| |
| li.selected { |
| li { |
| display:block; |
| } |
| > a { |
| font-weight: bold; |
| color: $black; |
| } |
| } |
| } |
| |
| .site-related { |
| display: block; |
| background-color: $gray-light; |
| padding: 0; |
| width: inherit; |
| |
| h3 { |
| margin-top: 0; |
| } |
| |
| li a.active { |
| color: $black; |
| } |
| } |
| |
| #toc { |
| display: block; |
| |
| .toplevel { |
| > a { |
| font-weight: bold; |
| color: $black; |
| |
| &.hastoc::after { |
| content: '+'; |
| @include flex(1); |
| text-align: right; |
| } |
| } |
| &.active { |
| .toc { |
| display: block; |
| } |
| > a.hastoc::after { |
| content: ""; /* don't make it look like you can toggle it closed */ |
| } |
| } |
| } |
| } |
| |
| .toc { |
| margin: 0; |
| padding: 0; |
| |
| .toc li { |
| font-size: 13px; |
| } |
| } |
| |
| ol.toc ol.toc ol.toc li { |
| margin: 0; |
| } |
| |
| } |
| |
| // TOC on article pages |
| .inline-toc { |
| line-height: 1.3em; |
| |
| a, |
| a:link, |
| a:visited { |
| color: $gray-medium; |
| font-weight: normal; |
| |
| &:hover, |
| &:focus { |
| color: $black; |
| } |
| } |
| li li a, |
| li li a:link, |
| li li a:visited { |
| color: $gray-medium; |
| |
| &:hover, |
| &:focus { |
| color: $black; |
| } |
| } |
| |
| a { |
| @include display-flex(); |
| padding: 0.5em 0; |
| } |
| |
| .related { |
| display: block; |
| background-color: $gray-light; |
| box-shadow: $nav-box-shadow; |
| padding: 1em 1em 0.5em 1em; |
| margin-bottom: 1em; /* so the box shadow doesn't get cut off */ |
| |
| h3 { |
| margin-top: 0; |
| } |
| |
| li a { |
| &.active { |
| color: $black; |
| } |
| &:hover { |
| background-image: $nav-hover-gradient; |
| } |
| } |
| } |
| |
| #toc { |
| display: none; |
| |
| .toplevel { |
| > a { |
| font-weight: bold; |
| color: $black; |
| |
| &.hastoc::after { |
| content: '+'; |
| @include flex(1); |
| text-align: right; |
| } |
| } |
| |
| &.active { |
| .toc { |
| display: block; |
| } |
| > a.hastoc { |
| content: '-' |
| } |
| } |
| } |
| } |
| |
| .toc { |
| margin: 0; |
| paddiing: 0; |
| border-top: $default-border; |
| |
| .toc { |
| display: none; |
| li { |
| padding-left: 1em; |
| border-bottom: $default-border; |
| } |
| } |
| } |
| } |
| |
| // Footer at bottom of articles |
| #cc-info { |
| font-style: italic; |
| //font-size: $small-label-size; |
| font-size: 0.8em; |
| color: lighten($text, 5%); |
| .cc-logo img { |
| width: 90px; |
| height: 32px; |
| } |
| } |
| |
| // Multi-step codelabs |
| .h1-step { display: block; font-size: 0.5em; line-height: 150%; } |
| |
| // API roundup on codelabs |
| .anchor-link-icon { padding-left: 1px; } |
| |
| // Larger than mobile. |
| @media only screen and (min-width: $break-small) { |
| .inline-site-toc { |
| float: left; |
| width: $site-toc-width; |
| overflow-x: hidden; |
| } |
| |
| .inline-toc { |
| width: $toc-width; |
| float: right; |
| margin: 0 4% 20px 4%; |
| overflow: auto; |
| overflow-x: hidden; |
| |
| #toc { |
| display: block; |
| } |
| } |
| .article-content { |
| // width: $article-width; |
| // padding-right: 5%; |
| border-right: 1px solid $gray-light; |
| min-height: 750px; /* add min-height so fatnav, sidenav, and footer don't overlap badly */ |
| |
| [itemprop="articleBody"] { |
| margin-left: 195px; |
| } |
| } |
| .cc-logo { |
| margin: 0 0 0 auto; |
| } |
| } |
| |
| // Tablet |
| @media only screen and (min-width: $break-small + 1) and (max-width: $break-large) { |
| .inline-toc { |
| width: $toc-width - 40; |
| //margin-left: $toc-margin-left - 30; |
| } |
| .inline-site-toc { |
| float: left; |
| width: $site-toc-width; |
| overflow-x: hidden; |
| } |
| } |
| |
| // Phone |
| @media only screen and (max-width: $break-small) { |
| .article-content [itemprop="articleBody"] { |
| > .collapsible { |
| height: 58px; |
| overflow: hidden; |
| |
| &.active { |
| height: auto; |
| h2::before { |
| content: '-'; |
| } |
| } |
| |
| h2 { |
| position: relative; |
| margin: 0; |
| padding: $default-padding - 5 $default-padding - 5 $default-padding - 5 0; |
| border-top: $default-border; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| |
| &::before { |
| position: absolute; |
| right: 0; |
| content: '+'; |
| } |
| } |
| } |
| .related { |
| margin: $default-padding 0; |
| } |
| } |
| .hidden { |
| display: none; |
| } |
| } |
| |
| |
| dl.nice { |
| |
| &:before, |
| &:after { |
| display: table; |
| content: " "; |
| } |
| |
| &:after { |
| clear:both; |
| } |
| |
| dt { |
| font-weight: bold; |
| float: left; |
| width: 160px; |
| clear: left; |
| } |
| |
| dt.full-width { |
| width: 100%; |
| } |
| |
| dd { |
| margin: 0 0 15px 180px; |
| } |
| } |
| |
| @media(max-width:580px) { |
| dl.nice { |
| dt { |
| width: 100%; |
| } |
| dd { |
| width: 100%; |
| margin-left: 0; |
| } |
| } |
| } |