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

   1 $toc-width: 240px;
   2 $toc-margin-left: 195px;
   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
  38     li a {
  39       &.active {
  40         color: $black;
  41       }
  42     }
  43   }
  44
  45   #toc {
  46     display: none;
  47
  48     .toplevel {
  49       > a {
  50         font-weight: bold;
  51         color: $black;
  52
  53         &.hastoc::after {
  54           content: '+';
  55           @include flex(1);
  56           text-align: right;
  57         }
  58       }
  59     }
  60
  61     //> .toc > li {
  62     .toplevel {
  63       &.active {
  64         .toc {
  65           display: block;
  66         }
  67         > a.hastoc {
  68           &::after {
  69             content: '-';
  70           }
  71         }
  72       }
  73     }
  74   }
  75
  76   .toc {
  77     margin: 0;
  78     padding: 0;
  79     border-top: $default-border;
  80
  81     .toc {
  82       display: none;
  83     }
  84
  85     .toc li {
  86       padding-left: 1em;
  87       border-bottom: $default-border;
  88     }
  89   }
  90 }
  91
  92 // Footer at bottom of articles
  93 #cc-info {
  94   @include display-flex();
  95   @include align-items(center);
  96   font-style: italic;
  97   //font-size: $small-label-size;
  98   font-size: 0.8em;
  99   color: lighten($text, 5%);
 100   .cc-logo img {
 101     width: 90px;
 102     height: 32px;
 103   }
 104   .last-updated {
 105     @include flex(1);
 106   }
 107 }
 108
 109 // Large than mobile.
 110 @media only screen and (min-width: $break-small)  {
 111   .inline-toc {
 112     position: absolute;
 113     top: 0;
 114     left: 50%;
 115     margin-left: $toc-margin-left;
 116     width: $toc-width;
 117     overflow: auto;
 118     overflow-x: hidden;
 119
 120     // scroll.js adds and removes the floating class depending on the scroll position.
 121     &.sticky {
 122       position: fixed;
 123     }
 124
 125     #toc {
 126       display: block;
 127     }
 128   }
 129   .article-content {
 130     width: 70%;
 131     padding-right: 5%;
 132     border-right: 1px solid $gray-light;
 133   }
 134   .cc-logo {
 135     margin: 0 0 0 auto;
 136   }
 137 }
 138
 139 // Tablet
 140 @media only screen and (min-width: $break-small + 1) and (max-width: $break-large) {
 141   .inline-toc {
 142     width: $toc-width - 40;
 143     margin-left: $toc-margin-left - 30;
 144   }
 145 }
 146
 147 // Phone
 148 @media only screen and (max-width: $break-small)  {
 149   .article-content [itemprop="articleBody"] {
 150     > .collapsible {
 151       height: 58px;
 152       overflow: hidden;
 153
 154       &.active {
 155         height: auto;
 156         h2::before {
 157           content: '-';
 158         }
 159       }
 160
 161       h2 {
 162         position: relative;
 163         margin: 0;
 164         padding: $default-padding - 5 $default-padding  - 5 $default-padding  - 5 0;
 165         border-top: $default-border;
 166         white-space: nowrap;
 167         overflow: hidden;
 168         text-overflow: ellipsis;
 169
 170         &::before {
 171           position: absolute;
 172           right: 0;
 173           content: '+';
 174         }
 175       }
 176     }
 177     .related {
 178       margin: $default-padding 0;
 179     }
 180   }
 181 }
 182