• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1body,
2html,
3.root,
4.layout--page {
5  height: 100%;
6}
7
8.layout--page {
9  &.layout--page--sidebar {
10    .page__viewport,
11    .page__grid {
12      height: 100%;
13    }
14    @include media-breakpoint-down(lg) {
15      .page__main {
16        @include overflow(unset);
17      }
18    }
19  }
20}
21
22.page__main {
23  height: 100%;
24  color: $text-color;
25  .col-aside {
26    display: none;
27    & > aside {
28      position: absolute;
29      width: map-get($layout, aside-width);
30      @include overflow(hidden);
31    }
32  }
33}
34
35.page__main-inner {
36  position: relative;
37  @include flexbox();
38  @include flex-direction(column);
39  min-height: 100%;
40  background-color: $background-color;
41}
42
43.page__content {
44  @include flex(1);
45  width: 100%;
46  margin: 0 auto;
47  @media print {
48    padding-bottom: 0;
49  }
50}
51.hide-footer {
52  .page__content {
53    padding-bottom: 0;
54  }
55}
56
57.page__comments {
58  margin: map-get($spacers, 4) 0;
59}
60
61.page__aside {
62  .toc-aside {
63    padding: map-get($spacers, 5) 0 map-get($spacers, 3) map-get($spacers, 5);
64  }
65}
66
67.page__actions {
68  position: fixed;
69  bottom: map-get($spacers, 5);
70  left: map-get($spacers, 3);
71  z-index: map-get($z-indexes, actions);
72  display: none;
73}
74
75.page__sidebar {
76  z-index: map-get($z-indexes, sidebar);
77  display: block;
78  width: 80%;
79  max-width: map-get($layout, sidebar-width);
80  height: 100%;
81  background-color: $background-color;
82  @include split-line(right);
83  @include transition(transform map-get($animation, duration));
84  @include overflow(auto);
85  .sidebar-toc {
86    padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 4);
87  }
88}
89.sidebar-button {
90  @include clickable($text-color-d, rgba($main-color-3, .75));
91}
92
93.page__mask {
94  @include modal(map-get($z-indexes, mask));
95  cursor: pointer;
96}
97.layout--page--sidebar {
98  .page__main {
99    @include overflow(auto);
100    @media print {
101      @include overflow(unset);
102    }
103  }
104}
105
106.has-aside {
107  .col-aside {
108    position: relative;
109    display: block;
110    width: map-get($layout, aside-width);
111    & > aside {
112      &.fixed {
113        position: fixed;
114        -webkit-font-smoothing: subpixel-antialiased;
115      }
116    }
117    @include media-breakpoint-down(lg) {
118      display: none;
119    }
120  }
121}
122
123@include media-breakpoint-down(lg) {
124  .page__sidebar {
125    position: fixed;
126    @include transform(translate(- map-get($layout, sidebar-width), 0));
127  }
128
129  .page__actions {
130    display: block;
131  }
132
133  .show-sidebar {
134    .page__actions {
135      visibility: hidden;
136    }
137    .page__sidebar {
138      @include transform(translate(0));
139    }
140    .page__mask {
141      @include modal--show();
142    }
143  }
144}
145
146.hero--light {
147  .article__info {
148    color: $text-color-theme-light;
149  }
150}
151.hero--dark {
152  .article__info {
153    color: $text-color-theme-dark;
154  }
155}
156
157.page__main--immersive {
158  .page__header {
159    position: absolute;
160    width: 100%;
161  }
162  .hero__content {
163    padding-top: map-get($layout, header-height);
164  }
165}