just-the-docs 0.2.9 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,3 +17,4 @@
17
17
  @import "./tables";
18
18
  @import "./code";
19
19
  @import "./utilities/utilities";
20
+ @import "./print";
@@ -1,89 +1,165 @@
1
1
  //
2
2
  // Main nav, breadcrumb, etc...
3
3
  //
4
- .navigation-list {
4
+ // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
5
+
6
+ .nav-list {
5
7
  padding: 0;
6
8
  margin-top: 0;
7
9
  margin-bottom: 0;
8
10
  list-style: none;
9
- }
10
11
 
11
- .navigation-list-child-list {
12
- padding-left: $sp-3;
13
- list-style: none;
12
+ .nav-list-item {
13
+ @include fs-4;
14
+ position: relative;
15
+ margin: 0;
14
16
 
15
- .navigation-list-link {
16
- color: $nav-child-link-color;
17
- }
17
+ @include mq(md) {
18
+ @include fs-3;
19
+ }
18
20
 
19
- .navigation-list-item {
20
- position: relative;
21
+ .nav-list-link {
22
+ display: block;
23
+ min-height: $nav-list-item-height-sm;
24
+ padding-top: $sp-1;
25
+ padding-bottom: $sp-1;
26
+ line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
27
+ @if $nav-list-expander-right {
28
+ padding-right: $nav-list-item-height-sm;
29
+ padding-left: $gutter-spacing-sm;
30
+ } @else {
31
+ padding-right: $gutter-spacing-sm;
32
+ padding-left: $nav-list-item-height-sm;
33
+ }
21
34
 
22
- &::before {
23
- position: absolute;
24
- margin-top: 0.3em;
25
- margin-left: -0.8em;
26
- color: rgba($body-text-color, 0.3);
27
- content: "- ";
35
+ @include mq(md) {
36
+ min-height: $nav-list-item-height;
37
+ line-height: #{$nav-list-item-height - 2 * $sp-1};
38
+ @if $nav-list-expander-right {
39
+ padding-right: $nav-list-item-height;
40
+ padding-left: $gutter-spacing;
41
+ } @else {
42
+ padding-right: $gutter-spacing;
43
+ padding-left: $nav-list-item-height;
44
+ }
45
+ }
46
+
47
+ &.active {
48
+ font-weight: 600;
49
+ text-decoration: none;
50
+ }
51
+
52
+ &:hover,
53
+ &.active {
54
+ background-image: linear-gradient(
55
+ -90deg,
56
+ rgba($feedback-color, 1) 0%,
57
+ rgba($feedback-color, 0.8) 80%,
58
+ rgba($feedback-color, 0) 100%
59
+ );
60
+ }
28
61
  }
29
62
 
30
- &.active {
31
- &::before {
32
- color: $body-text-color;
63
+ .nav-list-expander {
64
+ position: absolute;
65
+ @if $nav-list-expander-right {
66
+ right: 0;
67
+ }
68
+ width: $nav-list-item-height-sm;
69
+ height: $nav-list-item-height-sm;
70
+ padding-top: #{$nav-list-item-height-sm / 4};
71
+ padding-right: #{$nav-list-item-height-sm / 4};
72
+ padding-bottom: #{$nav-list-item-height-sm / 4};
73
+ padding-left: #{$nav-list-item-height-sm / 4};
74
+ color: $link-color;
75
+
76
+ @include mq(md) {
77
+ width: $nav-list-item-height;
78
+ height: $nav-list-item-height;
79
+ padding-top: #{$nav-list-item-height / 4};
80
+ padding-right: #{$nav-list-item-height / 4};
81
+ padding-bottom: #{$nav-list-item-height / 4};
82
+ padding-left: #{$nav-list-item-height / 4};
83
+ }
84
+
85
+ &:hover {
86
+ background-image: linear-gradient(
87
+ -90deg,
88
+ rgba($feedback-color, 1) 0%,
89
+ rgba($feedback-color, 0.8) 100%
90
+ );
91
+ }
92
+
93
+ @if $nav-list-expander-right {
94
+ svg {
95
+ transform: rotate(90deg);
96
+ }
33
97
  }
34
98
  }
35
- }
36
- }
37
99
 
38
- .navigation-list-item {
39
- @include fs-4;
40
- margin: 0;
100
+ > .nav-list {
101
+ display: none;
102
+ padding-left: $sp-3;
103
+ list-style: none;
41
104
 
42
- @include mq(md) {
43
- @include fs-3;
44
- }
105
+ .nav-list-item {
106
+ position: relative;
45
107
 
46
- .navigation-list-child-list {
47
- display: none;
48
- }
108
+ .nav-list-link {
109
+ color: $nav-child-link-color;
110
+ }
49
111
 
50
- &.active {
51
- .navigation-list-child-list {
52
- display: block;
112
+ .nav-list-expander {
113
+ color: $nav-child-link-color;
114
+ }
115
+ }
53
116
  }
54
- }
55
- }
56
117
 
57
- .navigation-list-link {
58
- display: block;
59
- padding-top: $sp-1;
60
- padding-bottom: $sp-1;
118
+ &.active {
119
+ > .nav-list-expander svg {
120
+ @if $nav-list-expander-right {
121
+ transform: rotate(-90deg);
122
+ } @else {
123
+ transform: rotate(90deg);
124
+ }
125
+ }
61
126
 
62
- &.active {
63
- font-weight: 600;
64
- color: $body-heading-color;
65
- text-decoration: none;
127
+ > .nav-list {
128
+ display: block;
129
+ }
130
+ }
66
131
  }
67
132
  }
68
133
 
69
- // Small screen nav
134
+ // Aux nav
70
135
 
71
- .main-nav {
72
- display: none;
136
+ .aux-nav {
137
+ height: 100%;
138
+ overflow-x: auto;
139
+ @include fs-2;
73
140
 
74
- &.nav-open {
75
- display: block;
141
+ .aux-nav-list {
142
+ display: flex;
143
+ height: 100%;
144
+ padding: 0;
145
+ margin: 0;
146
+ list-style: none;
76
147
  }
77
- @include mq(md) {
78
- display: block;
148
+
149
+ .aux-nav-list-item {
150
+ display: inline-block;
151
+ height: 100%;
152
+ padding: 0;
153
+ margin: 0;
79
154
  }
80
- }
81
155
 
82
- .aux-nav {
83
- align-self: center;
156
+ @include mq(md) {
157
+ padding-right: $gutter-spacing-sm;
158
+ }
84
159
  }
85
160
 
86
161
  // Breadcrumb nav
162
+
87
163
  .breadcrumb-nav {
88
164
  @include mq(md) {
89
165
  margin-top: -$sp-4;
@@ -0,0 +1,40 @@
1
+ // stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type, primer/no-override,
2
+
3
+ @media print {
4
+ .site-footer,
5
+ .site-button,
6
+ #edit-this-page,
7
+ #back-to-top,
8
+ .site-nav,
9
+ .main-header {
10
+ display: none !important;
11
+ }
12
+
13
+ .side-bar {
14
+ width: 100%;
15
+ height: auto;
16
+ border-right: 0 !important;
17
+ }
18
+
19
+ .site-header {
20
+ border-bottom: 1px solid $border-color;
21
+ }
22
+
23
+ .site-title {
24
+ font-size: $root-font-size !important;
25
+ font-weight: 700 !important;
26
+ }
27
+
28
+ .text-small {
29
+ font-size: 8pt !important;
30
+ }
31
+
32
+ pre.highlight {
33
+ border: 1px solid $border-color;
34
+ }
35
+
36
+ .main {
37
+ max-width: none;
38
+ margin-left: 0;
39
+ }
40
+ }
@@ -4,91 +4,115 @@
4
4
 
5
5
  .search {
6
6
  position: relative;
7
- z-index: 99;
7
+ z-index: 2;
8
8
  flex-grow: 1;
9
- height: 100%;
10
- margin-bottom: $sp-3;
9
+ height: $sp-10;
10
+ padding: $sp-2;
11
+ transition: padding linear #{$transition-duration / 2};
11
12
 
12
13
  @include mq(md) {
13
- margin-bottom: 0;
14
+ position: relative !important;
15
+ width: auto !important;
16
+ height: 100% !important;
17
+ padding: 0;
18
+ transition: none;
14
19
  }
15
20
  }
16
21
 
17
22
  .search-input-wrap {
18
- display: flex;
19
- height: 100%;
20
- padding: $sp-2;
21
- background-color: $search-background-color;
23
+ position: relative;
24
+ z-index: 1;
25
+ height: $sp-8;
26
+ overflow: hidden;
22
27
  border-radius: $border-radius;
23
28
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
29
+ transition: height linear #{$transition-duration / 2};
24
30
 
25
31
  @include mq(md) {
26
- padding-top: 0;
27
- padding-right: 0;
28
- padding-bottom: 0;
29
- padding-left: 0;
30
- background-color: $body-background-color;
32
+ position: absolute;
33
+ width: 100%;
34
+ max-width: $search-results-width;
35
+ height: 100% !important;
31
36
  border-radius: 0;
32
37
  box-shadow: none;
38
+ transition: width ease $transition-duration;
33
39
  }
34
40
  }
35
41
 
36
42
  .search-input {
37
- align-self: center;
43
+ position: absolute;
38
44
  width: 100%;
39
- padding-top: $sp-1;
40
- padding-bottom: $sp-1;
45
+ height: 100%;
46
+ padding-top: $sp-2;
47
+ padding-right: $gutter-spacing-sm;
48
+ padding-bottom: $sp-2;
49
+ padding-left: #{$gutter-spacing-sm + $sp-5};
50
+ font-size: 16px;
41
51
  background-color: $search-background-color;
42
52
  border-top: 0;
43
53
  border-right: 0;
44
54
  border-bottom: 0;
45
55
  border-left: 0;
46
- order: 2;
47
- @include fs-4;
56
+ border-radius: 0;
57
+
58
+ @include mq(md) {
59
+ padding-top: $gutter-spacing-sm;
60
+ padding-bottom: $gutter-spacing-sm;
61
+ padding-left: #{$gutter-spacing + $sp-5};
62
+ font-size: 14px;
63
+ background-color: $body-background-color;
64
+ transition: padding-left linear #{$transition-duration / 2};
65
+ }
48
66
 
49
67
  &:focus {
50
68
  outline: 0;
51
- box-shadow: none;
52
69
 
53
- + .search-icon {
54
- fill: $link-color;
70
+ + .search-label .search-icon {
71
+ color: $link-color;
55
72
  }
56
73
  }
74
+ }
75
+
76
+ .search-label {
77
+ position: absolute;
78
+ display: flex;
79
+ height: 100%;
80
+ padding-left: $gutter-spacing-sm;
57
81
 
58
82
  @include mq(md) {
59
- background-color: $body-background-color;
60
- @include fs-3;
83
+ padding-left: $gutter-spacing;
84
+ transition: padding-left linear #{$transition-duration / 2};
61
85
  }
62
- }
63
86
 
64
- .search-icon {
65
- align-self: center;
66
- margin-right: $sp-2;
67
- fill: $grey-dk-000;
68
- order: 1;
87
+ .search-icon {
88
+ width: #{$sp-4 * 1.2};
89
+ height: #{$sp-4 * 1.2};
90
+ align-self: center;
91
+ color: $grey-dk-000;
92
+ }
69
93
  }
70
94
 
71
- .search-results-wrap {
95
+ .search-results {
72
96
  position: absolute;
73
- z-index: 100;
97
+ left: 0;
74
98
  display: none;
75
99
  width: 100%;
76
- background: $search-background-color;
77
- border-radius: $border-radius;
100
+ max-height: calc(100% - #{$sp-10});
101
+ overflow-y: auto;
102
+ background-color: $search-background-color;
103
+ border-bottom-right-radius: $border-radius;
104
+ border-bottom-left-radius: $border-radius;
78
105
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
79
106
 
80
- &.active {
81
- display: block;
82
- }
83
-
84
107
  @include mq(md) {
108
+ top: 100%;
85
109
  width: $search-results-width;
110
+ max-height: calc(100vh - 200%) !important;
86
111
  }
87
112
  }
88
113
 
89
114
  .search-results-list {
90
115
  padding-left: 0;
91
- margin-top: $sp-1;
92
116
  margin-bottom: $sp-1;
93
117
  list-style: none;
94
118
  @include fs-4;
@@ -112,31 +136,58 @@
112
136
 
113
137
  &:hover,
114
138
  &.active {
115
- background-color: $sidebar-color;
116
- }
117
-
118
- @include mq(md) {
119
- padding-right: $sp-4;
120
- padding-left: $sp-4;
139
+ background-color: $feedback-color;
121
140
  }
122
141
  }
123
142
 
124
143
  .search-result-title {
125
144
  display: block;
126
145
  padding-top: $sp-2;
127
- padding-right: $sp-4;
128
146
  padding-bottom: $sp-2;
129
147
 
130
148
  @include mq(sm) {
131
149
  display: inline-block;
132
150
  width: 40%;
133
- word-wrap: break-word;
151
+ padding-right: $sp-2;
134
152
  vertical-align: top;
135
153
  }
136
154
  }
137
155
 
156
+ .search-result-doc {
157
+ display: flex;
158
+ align-items: center;
159
+ word-wrap: break-word;
160
+
161
+ &.search-result-doc-parent {
162
+ opacity: 0.5;
163
+ @include fs-3;
164
+
165
+ @include mq(md) {
166
+ @include fs-2;
167
+ }
168
+ }
169
+
170
+ .search-result-icon {
171
+ width: $sp-4;
172
+ height: $sp-4;
173
+ margin-right: $sp-2;
174
+ color: $link-color;
175
+ flex-shrink: 0;
176
+ }
177
+
178
+ .search-result-doc-title {
179
+ overflow: auto;
180
+ }
181
+ }
182
+
183
+ .search-result-section {
184
+ margin-left: #{$sp-4 + $sp-2};
185
+ word-wrap: break-word;
186
+ }
187
+
138
188
  .search-result-rel-url {
139
189
  display: block;
190
+ margin-left: #{$sp-4 + $sp-2};
140
191
  overflow: hidden;
141
192
  color: $search-result-preview-color;
142
193
  text-overflow: ellipsis;
@@ -144,12 +195,14 @@
144
195
  @include fs-1;
145
196
  }
146
197
 
147
- .search-result-preview {
198
+ .search-result-previews {
148
199
  display: block;
149
200
  padding-top: $sp-2;
150
201
  padding-bottom: $sp-2;
151
202
  padding-left: $sp-4;
203
+ margin-left: $sp-2;
152
204
  color: $search-result-preview-color;
205
+ word-wrap: break-word;
153
206
  border-left: $border;
154
207
  border-left-color: $border-color;
155
208
  @include fs-2;
@@ -157,11 +210,112 @@
157
210
  @include mq(sm) {
158
211
  display: inline-block;
159
212
  width: 60%;
213
+ padding-left: $sp-2;
214
+ margin-left: 0;
160
215
  vertical-align: top;
161
216
  }
162
217
  }
163
218
 
219
+ .search-result-preview + .search-result-preview {
220
+ margin-top: $sp-1;
221
+ }
222
+
164
223
  .search-result-highlight {
165
224
  font-weight: bold;
166
- color: $link-color;
225
+ }
226
+
227
+ .search-no-result {
228
+ padding-top: $sp-2;
229
+ padding-right: $sp-3;
230
+ padding-bottom: $sp-2;
231
+ padding-left: $sp-3;
232
+ @include fs-3;
233
+ }
234
+
235
+ .search-button {
236
+ position: fixed;
237
+ right: $sp-4;
238
+ bottom: $sp-4;
239
+ display: flex;
240
+ width: $sp-9;
241
+ height: $sp-9;
242
+ background-color: $search-background-color;
243
+ border: 1px solid rgba($link-color, 0.3);
244
+ border-radius: #{$sp-9 / 2};
245
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
246
+ align-items: center;
247
+ justify-content: center;
248
+ }
249
+
250
+ .search-overlay {
251
+ position: fixed;
252
+ top: 0;
253
+ left: 0;
254
+ z-index: 1;
255
+ width: 0;
256
+ height: 0;
257
+ background-color: rgba(0, 0, 0, 0.3);
258
+ opacity: 0;
259
+ transition: opacity ease $transition-duration, width 0s $transition-duration,
260
+ height 0s $transition-duration;
261
+ }
262
+
263
+ .search-active {
264
+ .search {
265
+ position: fixed;
266
+ top: 0;
267
+ left: 0;
268
+ width: 100%;
269
+ height: 100%;
270
+ padding: 0;
271
+ }
272
+
273
+ .search-input-wrap {
274
+ height: $sp-10;
275
+ border-radius: 0;
276
+
277
+ @include mq(md) {
278
+ width: $search-results-width;
279
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
280
+ }
281
+ }
282
+
283
+ .search-input {
284
+ background-color: $search-background-color;
285
+
286
+ @include mq(md) {
287
+ padding-left: #{$sp-4 * 1.25 + $sp-5};
288
+ }
289
+ }
290
+
291
+ .search-label {
292
+ @include mq(md) {
293
+ padding-left: #{$sp-4 * 1.25};
294
+ }
295
+ }
296
+
297
+ .search-results {
298
+ display: block;
299
+ }
300
+
301
+ .search-overlay {
302
+ width: 100%;
303
+ height: 100%;
304
+ opacity: 1;
305
+ transition: opacity ease $transition-duration, width 0s, height 0s;
306
+ }
307
+
308
+ @include mq(md) {
309
+ .main {
310
+ position: fixed;
311
+ }
312
+ }
313
+
314
+ .main-header {
315
+ padding-top: $sp-10;
316
+
317
+ @include mq(md) {
318
+ padding-top: 0;
319
+ }
320
+ }
167
321
  }