src/chrome/common/extensions/docs/static/sass/_article.scss

   1 $article-width: 70%;
   2 $toc-width: 28%;
   3
   4 // TOC on article pages
   5 .inline-toc {
   6   line-height: 1.3em;
   7
   8   a,
   9   a:link,
  10   a:visited {
  11     color: $gray-medium;
  12     font-weight: normal;
  13
  14     &:hover,
  15     &:focus {
  16       color: $black;
  17     }
  18   }
  19   li li a,
  20   li li a:link,
  21   li li a:visited {
  22     color: $gray-medium;
  23
  24     &:hover,
  25     &:focus {
  26       color: $black;
  27     }
  28   }
  29
  30   a {
  31     @include display-flex();
  32     padding: 0.5em 0;
  33   }
  34
  35   .related {
  36     display: block;
  37     background-color: $gray-light;
  38     box-shadow: $nav-box-shadow;
  39     padding: 1em 1em 0.5em 1em;
  40     margin-bottom: 1em; /* so the box shadow doesn't get cut off */
  41
  42     h3 {
  43       margin-top: 0;
  44     }
  45
  46     li a {
  47       &.active {
  48         color: $black;
  49       }
  50       &:hover {
  51         background-image: $nav-hover-gradient;
  52       }
  53     }
  54   }
  55
  56   #toc {
  57     display: none;
  58
  59     .toplevel {
  60       > a {
  61         font-weight: bold;
  62         color: $black;
  63
  64         &.hastoc::after {
  65           content: '+';
  66           @include flex(1);
  67           text-align: right;
  68         }
  69       }
  70     }
  71
  72     //> .toc > li {
  73     .toplevel {
  74       &.active {
  75         .toc {
  76           display: block;
  77         }
  78         > a.hastoc {
  79           &::after {
  80             content: ''; /* don't make it look like you can toggle it closed */
  81           }
  82         }
  83       }
  84     }
  85   }
  86
  87   .toc {
  88     margin: 0;
  89     padding: 0.3em 0 0 0;
  90     border-top: $default-border;
  91
  92     .toc {
  93       display: none;
  94     }
  95
  96     .toc li {
  97       padding-left: 1em;
  98       border-bottom: $default-border;
  99     }
 100   }
 101 }
 102
 103 // Footer at bottom of articles
 104 #cc-info {
 105   @include display-flex();
 106   @include align-items(center);
 107   font-style: italic;
 108   //font-size: $small-label-size;
 109   font-size: 0.8em;
 110   color: lighten($text, 5%);
 111   .cc-logo img {
 112     width: 90px;
 113     height: 32px;
 114   }
 115   .last-updated {
 116     @include flex(1);
 117   }
 118 }
 119
 120 // Multi-step codelabs
 121 .h1-step { display: block; font-size: 0.5em; line-height: 150%; }
 122
 123 // API roundup on codelabs
 124 .anchor-link-icon { padding-left: 1px; }
 125
 126 // Large than mobile.
 127 @media only screen and (min-width: $break-small)  {
 128   .inline-toc {
 129     position: absolute;
 130     top: 0;
 131     width: $toc-width;
 132     right: 0;
 133     overflow: auto;
 134     overflow-x: hidden;
 135
 136     #toc {
 137       display: block;
 138       // article.js adds and removes the fixed nav depending on the scroll position.
 139       &.sticky {
 140         top: 0;
 141         position: fixed;
 142         -webkit-transform: translateZ(0); /* repaint issue */
 143       }
 144     }
 145   }
 146   .article-content {
 147     width: $article-width;
 148     padding-right: 5%;
 149     border-right: 1px solid $gray-light;
 150     min-height: 250px; /* add min-height so fatnav and sidenav doesn't overlap badly */
 151   }
 152   .cc-logo {
 153     margin: 0 0 0 auto;
 154   }
 155 }
 156
 157 // Phone
 158 @media only screen and (max-width: $break-small)  {
 159   .article-content [itemprop="articleBody"] {
 160     > .collapsible {
 161       height: 58px;
 162       overflow: hidden;
 163
 164       &.active {
 165         height: auto;
 166         h2::before {
 167           content: '-';
 168         }
 169       }
 170
 171       h2 {
 172         position: relative;
 173         margin: 0;
 174         padding: $default-padding - 5 $default-padding  - 5 $default-padding  - 5 0;
 175         border-top: $default-border;
 176         white-space: nowrap;
 177         overflow: hidden;
 178         text-overflow: ellipsis;
 179
 180         &::before {
 181           position: absolute;
 182           right: 0;
 183           content: '+';
 184         }
 185       }
 186     }
 187     .related {
 188       margin: $default-padding 0;
 189     }
 190   }
 191 }
 192