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  width: calc(100% - #{$sidebar-width});
109}
110
111.main .main-inner {
112  margin: 2em;
113}
114
115.main table th {
116  text-align: left;
117}
118
119.main .callout {
120  border-left: 0.25em solid white;
121  padding: 1em;
122
123  a {
124    text-decoration: underline;
125  }
126
127  &.important {
128    background-color: $bg-yellow-light;
129    border-color: $bg-yellow;
130    color: $black;
131  }
132
133  &.note {
134    background-color: $bg-blue-light;
135    border-color: $text-blue;
136    color: $text-blue;
137  }
138
139  &.tip {
140    background-color: $green-000;
141    border-color: $green-700;
142    color: $green-700;
143  }
144
145  &.warning {
146    background-color: $red-000;
147    border-color: $text-red;
148    color: $text-red;
149  }
150}
151
152.main .good pre {
153  background-color: $bg-green-light;
154}
155
156.main .bad pre {
157  background-color: $red-000;
158}
159
160@media all and (max-width: 768px) {
161  body {
162    flex-direction: column;
163  }
164
165  .sidebar {
166    height: auto;
167    position: relative;
168    width: 100%;
169  }
170
171  .sidebar .expander {
172    display: block;
173  }
174
175  .sidebar nav {
176    height: 0;
177    overflow: hidden;
178  }
179
180  .sidebar .nav-toggle:checked {
181    & ~ nav {
182      height: auto;
183    }
184
185    & + .expander .arrow {
186      transform: rotate(-135deg);
187    }
188  }
189
190  .main {
191    width: 100%;
192  }
193}
194