just-the-docs 0.2.9 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/nav.html +55 -51
  3. data/_layouts/default.html +133 -103
  4. data/_sass/code.scss +2 -3
  5. data/_sass/color_schemes/dark.scss +1 -0
  6. data/_sass/content.scss +2 -2
  7. data/_sass/layout.scss +45 -50
  8. data/_sass/modules.scss +1 -0
  9. data/_sass/navigation.scss +129 -53
  10. data/_sass/print.scss +40 -0
  11. data/_sass/search.scss +202 -48
  12. data/_sass/support/_variables.scss +8 -3
  13. data/assets/js/just-the-docs.js +362 -204
  14. data/assets/js/zzzz-search-data.json +58 -0
  15. data/lib/tasks/search.rake +54 -9
  16. metadata +4 -9
  17. data/assets/js/search-data.json +0 -12
data/_sass/modules.scss CHANGED
@@ -17,3 +17,4 @@
17
17
  @import "./tables";
18
18
  @import "./code";
19
19
  @import "./utilities/utilities";
20
+ @import "./print";
data/_sass/navigation.scss CHANGED
@@ -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;
data/_sass/print.scss ADDED
@@ -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
+ }
data/_sass/search.scss CHANGED
@@ -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
  }