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