docs/_sass/main.scss

   1 // Styles for GoogleTest docs website on GitHub Pages.
   2 // Color variables are defined in
   3 // https://github.com/pages-themes/primer/tree/master/_sass/primer-support/lib/variables
   4
   5 $sidebar-width: 260px;
   6
   7 body {
   8   display: flex;
   9   margin: 0;
  10 }
  11
  12 .sidebar {
  13   background: $black;
  14   color: $text-white;
  15   flex-shrink: 0;
  16   height: 100vh;
  17   overflow: auto;
  18   position: sticky;
  19   top: 0;
  20   width: $sidebar-width;
  21 }
  22
  23 .sidebar h1 {
  24   font-size: 1.5em;
  25 }
  26
  27 .sidebar h2 {
  28   color: $gray-light;
  29   font-size: 0.8em;
  30   font-weight: normal;
  31   margin-bottom: 0.8em;
  32   padding-left: 2.5em;
  33   text-transform: uppercase;
  34 }
  35
  36 .sidebar .header {
  37   background: $black;
  38   padding: 2em;
  39   position: sticky;
  40   top: 0;
  41   width: 100%;
  42 }
  43
  44 .sidebar .header a {
  45   color: $text-white;
  46   text-decoration: none;
  47 }
  48
  49 .sidebar .nav-toggle {
  50   display: none;
  51 }
  52
  53 .sidebar .expander {
  54   cursor: pointer;
  55   display: none;
  56   height: 3em;
  57   position: absolute;
  58   right: 1em;
  59   top: 1.5em;
  60   width: 3em;
  61 }
  62
  63 .sidebar .expander .arrow {
  64   border: solid $white;
  65   border-width: 0 3px 3px 0;
  66   display: block;
  67   height: 0.7em;
  68   margin: 1em auto;
  69   transform: rotate(45deg);
  70   transition: transform 0.5s;
  71   width: 0.7em;
  72 }
  73
  74 .sidebar nav {
  75   width: 100%;
  76 }
  77
  78 .sidebar nav ul {
  79   list-style-type: none;
  80   margin-bottom: 1em;
  81   padding: 0;
  82
  83   &:last-child {
  84     margin-bottom: 2em;
  85   }
  86
  87   a {
  88    text-decoration: none;
  89   }
  90
  91   li {
  92     color: $text-white;
  93     padding-left: 2em;
  94     text-decoration: none;
  95   }
  96
  97   li.active {
  98     background: $border-gray-darker;
  99     font-weight: bold;
 100   }
 101
 102   li:hover {
 103     background: $border-gray-darker;
 104   }
 105 }
 106
 107 .main {
 108   background-color: $bg-gray;
 109   width: calc(100% - #{$sidebar-width});
 110 }
 111
 112 .main .main-inner {
 113   background-color: $white;
 114   padding: 2em;
 115 }
 116
 117 .main .footer {
 118   margin: 0;
 119   padding: 2em;
 120 }
 121
 122 .main table th {
 123   text-align: left;
 124 }
 125
 126 .main .callout {
 127   border-left: 0.25em solid $white;
 128   padding: 1em;
 129
 130   a {
 131     text-decoration: underline;
 132   }
 133
 134   &.important {
 135     background-color: $bg-yellow-light;
 136     border-color: $bg-yellow;
 137     color: $black;
 138   }
 139
 140   &.note {
 141     background-color: $bg-blue-light;
 142     border-color: $text-blue;
 143     color: $text-blue;
 144   }
 145
 146   &.tip {
 147     background-color: $green-000;
 148     border-color: $green-700;
 149     color: $green-700;
 150   }
 151
 152   &.warning {
 153     background-color: $red-000;
 154     border-color: $text-red;
 155     color: $text-red;
 156   }
 157 }
 158
 159 .main .good pre {
 160   background-color: $bg-green-light;
 161 }
 162
 163 .main .bad pre {
 164   background-color: $red-000;
 165 }
 166
 167 @media all and (max-width: 768px) {
 168   body {
 169     flex-direction: column;
 170   }
 171
 172   .sidebar {
 173     height: auto;
 174     position: relative;
 175     width: 100%;
 176   }
 177
 178   .sidebar .expander {
 179     display: block;
 180   }
 181
 182   .sidebar nav {
 183     height: 0;
 184     overflow: hidden;
 185   }
 186
 187   .sidebar .nav-toggle:checked {
 188     & ~ nav {
 189       height: auto;
 190     }
 191
 192     & + .expander .arrow {
 193       transform: rotate(-135deg);
 194     }
 195   }
 196
 197   .main {
 198     width: 100%;
 199   }
 200 }