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
7body {
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}
201