PluginProbe
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5
4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 4.8.2 4.8.1 4.8.0 4.7.0 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.1 4.4.0 3.3.4 3.4.0 3.4.1 All 203 releases
betterdocs / react-src / scss / template-parts / sidebar.scss

sidebar.scss in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/scss/template-parts/sidebar.scss

822 lines 27.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 // CHECKED:
2
3 @import "../common/index";
4 @import "../layout-parts/list.scss";
5 @import "../layout-parts/body.scss";
6
7 #betterdocs-sidebar {
8 @include responsive-from("tablet") {
9 display: none;
10 }
11 }
12
13 %sticky-sidebar {
14 position: sticky;
15 top: 4vh;
16 overflow: auto;
17 max-height: 95vh;
18 overflow-y: auto;
19 }
20
21 .betterdocs-sidebar {
22 &.betterdocs-sidebar-layout-8 {
23 border-right: 1px solid #EAECF0;
24 max-width: 310px;
25 @include if(".wp-block",
26 ".betterdocs-sidebar-tech-layout-block"
27
28 ) {
29 width: auto;
30 max-width: 100%;
31 }
32 .betterdocs-sidebar-content {
33 .betterdocs-category-grid-wrapper {
34 padding-right: 24px;
35 .betterdocs-category-grid-inner-wrapper {
36 @include if(".wp-block",
37 ".betterdocs-sidebar-tech-layout-block"
38
39 ) {
40 flex-direction: column;
41 }
42 }
43 }
44 }
45 }
46 .betterdocs-single-category-wrapper {
47 .betterdocs-category-header {
48 .betterdocs-category-title {
49 &:first-child {
50 padding-left: 15px;
51 @include if(".betterdocs-sidebar",
52 ".betterdocs-sidebar-layout-2"
53
54 ) {
55 padding-left: 0 !important;
56 }
57 @include if(".betterdocs-sidebar",
58 ".betterdocs-sidebar-layout-8"
59
60 ) {
61 padding-left: 0 !important;
62 }
63 }
64
65 a {
66 @include if(".betterdocs-sidebar",
67 ".betterdocs-sidebar-layout-2"
68
69 ) {
70 padding-left: 0 !important;
71 }
72 }
73 }
74 }
75
76 .betterdocs-body {
77 @include for(".betterdocs-content-wrapper:not(.doc-category-layout-2)"
78
79 ) {
80 @include if(".betterdocs-sidebar",
81 ".betterdocs-sidebar-layout-2"
82
83 ) {
84 padding-top: 0 !important;
85 padding-bottom: 0 !important;
86 }
87 }
88 }
89
90 .betterdocs-articles-list {
91 li {
92 padding: 0;
93
94 a {
95 font-size: 14px;
96 line-height: 1.6;
97 }
98 }
99 }
100 }
101
102 @include responsive-from("tablet") {
103 display: none;
104 }
105 }
106
107 .betterdocs-full-sidebar-left {
108 padding-right: 1px;
109 padding-top: 50px;
110
111 &.betterdocs-toc-block {
112 padding-top: 0px;
113 }
114
115 &.betterdocs-sidebar-layout-4 {
116 padding-top: 0px;
117 }
118
119 &.betterdocs-sidebar-layout-5 {
120 padding-top: 0px;
121 }
122
123 &.betterdocs-sidebar-layout-7 {
124 padding-top: 0px;
125 display: flex;
126 flex-direction: column;
127 position: relative;
128 // Above the article content only. 9999 also put it above the site
129 // header's dropdown menus (core/navigation submenus use z-index 2),
130 // which then opened underneath the sidebar.
131 z-index: 1;
132 border-right: 1px solid #EAECF0;
133 padding-right: 0;
134
135 @media only screen and (max-width: 768px) {
136 max-width: 100% !important;
137 display: none;
138 }
139
140 .layout-flex{ // set to block in order to remove flex layout from sidebar layout 7
141 display: inherit;
142 }
143 }
144
145 &.betterdocs-sidebar-layout-8 {
146 border-right: 1px solid #EAECF0;
147 .betterdocs-sidebar-content {
148 .betterdocs-category-grid-wrapper {
149 padding-right: 24px;
150 }
151 .betterdocs-single-category-wrapper {
152 .betterdocs-single-category-inner {
153 .betterdocs-category-header {
154 padding: 8px;
155 .betterdocs-category-header-inner {
156 border-bottom: none;
157 }
158 }
159 .betterdocs-body {
160 padding: 12px 8px;
161 .betterdocs-articles-list {
162 li:not(:has(> ul)) {
163 margin: 0;
164 padding: 0;
165 a {
166 color: #667085;
167 padding: 7px 8px;
168 margin: 1px 0;
169 &.active,
170 &:hover,
171 &:focus {
172 color: #344054;
173 background-color: #E8FFF4;
174 }
175 }
176 }
177 .betterdocs-nested-category-wrapper {
178 .betterdocs-nested-category-title {
179 a:hover {
180 color: #667085;
181 }
182 }
183 }
184 }
185 }
186 }
187 }
188 }
189 }
190
191 @include for(".betterdocs-single-layout-5") {
192 margin-top: 100px;
193 @include responsive-from("tablet") {
194 margin-top: 0px;
195 }
196 }
197
198 @include for(".betterdocs-single-layout-2") {
199 border-right: 1px solid #eff2f7;
200 }
201
202 @include for(".betterdocs-single-layout-3") {
203 border-right: 1px solid #eff2f7;
204 }
205
206 @include for(".doc-category-layout-2") {
207 border-right: 1px solid #eff2f7;
208 padding-top: 0;
209 padding-right: 0;
210
211 .betterdocs-category-list-wrapper {
212 .betterdocs-category-header {
213 padding: 0 !important;
214 background: transparent !important;
215 }
216 }
217 }
218
219 @include for(".doc-category-layout-3") {
220 border-right: 1px solid #eff2f7;
221 padding-top: 0;
222 padding-right: 0;
223 }
224
225 .betterdocs-single-category-wrapper {
226 .betterdocs-articles-list {
227 display: flex;
228 flex-wrap: wrap;
229 margin: 0;
230 padding: 0;
231 list-style: none;
232 flex-direction: column;
233 }
234 }
235
236 @include responsive-below("tablet") {
237 display: none;
238 }
239 }
240
241 .betterdocs-full-sidebar-right {
242 padding-left: 1px;
243 padding-top: 50px;
244
245 @include for(".betterdocs-single-layout-4") {
246 padding-top: 0px;
247 }
248
249 @include for(".betterdocs-single-layout-5") {
250 margin-top: 100px;
251 padding-top: 0px;
252 @include responsive-from("tablet") {
253 margin-top: 0px;
254 }
255 }
256
257 @include for(".betterdocs-single-layout-2") {
258 border-left: 1px solid #eff2f7;
259 }
260
261 @include for(".betterdocs-single-layout-3") {
262 border-left: 1px solid #eff2f7;
263 }
264
265 @include responsive-below("laptop") {
266 display: none;
267 }
268
269 .betterdocs-toc {
270 .toc-list li a {
271 font-weight: normal;
272 outline: none;
273 }
274 }
275 }
276
277 .betterdocs-full-sidebar-right .layout2-toc-container,
278 .betterdocs-full-sidebar-right .layout3-toc-container,
279 .betterdocs-full-sidebar-left .betterdocs-sidebar-content {
280 @extend %sticky-sidebar;
281 }
282
283 .betterdocs-sidebar {
284 .betterdocs-sidebar-content {
285 display: flex;
286 flex-direction: column;
287 background-color: #fff;
288 height: auto;
289
290 // The sidebar search box ([betterdocs_search_modal layout="sidebar"])
291 // is an empty placeholder until React mounts LayoutSidebar into it,
292 // which then pushes the category list down (CLS). Reserve its height
293 // while it is empty: the form is one line box (at least the 24px
294 // command key) + 2 x 8px padding, plus the popup's bottom margin
295 // (contained here, as a flex item does not collapse child margins).
296 // See .betterdocs-search-popup in shortcodes/search-modal.scss.
297 // The px values are the fallback where the `lh` unit is unsupported.
298 > .betterdocs-search-modal-sidebar:empty {
299 min-height: 69px;
300 min-height: calc(max(1lh, 24px) + 16px + 24px);
301
302 @media only screen and (max-width: 1024px) {
303 min-height: 61px;
304 min-height: calc(max(1lh, 24px) + 16px + 16px);
305 }
306 }
307
308 // @include if(".betterdocs-sidebar", ".betterdocs-sidebar-layout-5") {
309 // overflow: hidden;
310 // }
311 @include if(".betterdocs-sidebar", ".betterdocs-sidebar-layout-6") {
312 background: transparent;
313 }
314 @include if(".betterdocs-sidebar", ".betterdocs-sidebar-layout-7") {
315 background: #FFF;
316 padding-top: 58px;
317 padding-right: 24px;
318 padding-left: 24px;
319 flex: 1;
320
321 @media only screen and (max-width: 1024px) {
322 padding-top: 40px;
323 padding-right: 16px;
324 padding-left: 16px;
325 }
326
327 .betterdocs-category-grid-wrapper {
328 padding-top: 0 !important;
329 padding-bottom: 0 !important;
330
331 .betterdocs-category-grid-inner-wrapper {
332 .betterdocs-single-category-wrapper {
333 margin-top: 16px;
334
335 @media only screen and (max-width: 1024px) {
336 margin-top: 12px;
337 }
338
339 &:first-child {
340 margin-top: 0;
341 }
342
343 .betterdocs-single-category-inner {
344
345 .betterdocs-category-header {
346 padding: 8px;
347
348 .betterdocs-category-header-inner {
349 border-bottom: none;
350 gap: 8px;
351
352 .betterdocs-folder-icon {
353 display: inline-flex;
354 height: 20px;
355 width: 20px;
356 aspect-ratio: 1;
357 background: #EAECF0;
358 border-radius: 4px;
359 display: flex;
360 align-items: center;
361 justify-content: center;
362
363 svg {
364 width: 12px;
365 }
366 }
367
368 .betterdocs-category-title {
369 font-size: 16px;
370 line-height: 1.4em;
371 font-weight: 500;
372 color: #344054;
373
374 @media only screen and (max-width: 1024px) {
375 font-size: 14px;
376 }
377 }
378
379 .betterdocs-category-items-counts {
380 padding: 0;
381 margin-left: 0;
382
383 span {
384 background-color: #F2F4F7;
385 height: 20px;
386 width: 20px;
387 font-size: 12px;
388 line-height: 1.2em;
389 font-weight: 500;
390 color: #344054;
391 display: inline-flex;
392 align-items: center;
393 justify-content: center;
394 border-radius: 50%;
395 }
396 }
397
398 >svg {
399 display: none;
400 }
401 }
402 }
403
404 .betterdocs-body {
405 padding: 10px 28px 0px;
406
407 @media only screen and (max-width: 1024px) {
408 padding: 6px 28px 0px;
409 }
410
411 .betterdocs-articles-list {
412 gap: 12px;
413
414 li {
415 margin: 0;
416
417 a {
418 display: inline-flex;
419 color: #667085;
420 font-weight: 500;
421 font-size: 14px;
422 line-height: 1.3em;
423 padding: 8px;
424 background: transparent;
425 border-radius: 4px;
426 transition: all .35s ease-in-out;
427
428 @media only screen and (max-width: 1024px) {
429 font-size: 12px;
430 }
431
432 &:hover,
433 &:focus {
434 background: #E8FFF4;
435 color: #344054;
436 }
437
438 &.active {
439 background: #E8FFF4;
440 color: #344054;
441
442 &::before {
443 content: "";
444 position: absolute;
445 width: 4px;
446 background: #A1DCC0;
447 height: 100%;
448 top: 50%;
449 transform: translateY(-50%);
450 left: -11px;
451 border-radius: 4px;
452 }
453 }
454 }
455
456 >svg {
457 display: none;
458 }
459 }
460
461 .betterdocs-nested-category-wrapper {
462 margin-top: 8px;
463 position: relative;
464
465 @media only screen and (max-width: 1024px) {
466 margin-top: 6px;
467 }
468
469 .betterdocs-nested-category-title {
470 margin: 0;
471 gap: 8px;
472
473 .arrow-down {
474 display: none !important;
475 }
476
477 .betterdocs-folder-icon.arrow-right {
478 display: inline-flex !important;
479 width: 20px;
480 height: 20px;
481 justify-content: center;
482 align-items: center;
483 background: #F2F4F7;
484 border-radius: 6px;
485
486 svg {
487 width: 14px;
488 margin-right: 0;
489 }
490 }
491
492 a {
493 display: inline-flex;
494 font-size: 16px;
495 color: #344054;
496 font-weight: 500;
497 line-height: 1.2em;
498
499 @media only screen and (max-width: 1024px) {
500 font-size: 14px;
501 }
502 }
503 }
504
505 &:hover {
506 background: transparent;
507 }
508
509 .betterdocs-nested-category-list {
510 margin-left: 0;
511 margin-top: 10px;
512 padding-left: 19px;
513 display: flex;
514 flex-direction: column;
515 gap: 8px;
516
517 @media only screen and (max-width: 1024px) {
518 margin-top: 8px;
519 gap: 6px;
520 }
521
522 &.active {
523 &::before {
524 content: '';
525 position: absolute;
526 width: 1px;
527 background: #D0D5DD;
528 height: calc(100% - 28px);
529 bottom: 0px;
530 left: 9px;
531 }
532 }
533 }
534 }
535 }
536 }
537 }
538
539 &.active.default.show {
540 position: relative;
541
542 &::before {
543 content: '';
544 position: absolute;
545 width: 1px;
546 background: #D0D5DD;
547 height: calc(100% - 29px);
548 bottom: 0px;
549 left: 18px;
550 }
551 }
552 }
553 }
554 }
555 }
556
557 @include if(".betterdocs-sidebar", ".betterdocs-full-sidebar-left") {
558 @include for(".betterdocs-single-layout-5") {
559 box-shadow: 0px 8px 20px rgba(0, 1, 35, 0.1);
560 border-radius: 5px;
561 }
562 }
563
564 .betterdocs-category-grid-wrapper {
565 .betterdocs-category-grid-inner-wrapper {
566 .betterdocs-single-category-wrapper {
567 margin-bottom: 0;
568 @include if(".betterdocs-category-grid-wrapper",
569 ".sidebar-8"
570
571 ) {
572 margin-bottom: 12px;
573 }
574 .betterdocs-single-category-inner {
575 margin-left: 0;
576 margin-right: 0;
577
578 @include for(".betterdocs-single-layout-4") {
579 @include if(".betterdocs-single-category-wrapper",
580 ".active"
581
582 ) {
583 background-color: transparent !important;
584 border-color: #528fff !important;
585 }
586 }
587
588 @include for(".betterdocs-single-layout-5") {
589 @include if(".betterdocs-single-category-wrapper",
590 ".active"
591
592 ) {
593 background-color: transparent !important;
594 border: none !important;
595 }
596 }
597
598 @include for(".doc-category-layout-4") {
599 @include if(".betterdocs-single-category-wrapper",
600 ".active"
601
602 ) {
603 background-color: transparent !important;
604 border: none !important;
605 }
606 }
607
608 @include for(".doc-category-layout-5") {
609 @include if(".betterdocs-single-category-wrapper",
610 ".active"
611
612 ) {
613 background-color: transparent !important;
614 border: none !important;
615 }
616 }
617
618 @include if(".betterdocs-sidebar",
619 ".betterdocs-sidebar-layout-3"
620
621 ) {
622 @include if(".betterdocs-single-category-wrapper",
623 ".active"
624
625 ) {
626 background-color: transparent !important;
627 border: none !important;
628 }
629 }
630 }
631 }
632 }
633
634 @include if(".betterdocs-sidebar",
635 ".betterdocs-full-sidebar-left"
636
637 ) {
638 padding-top: 15px;
639 padding-bottom: 15px;
640
641 @include for(".betterdocs-single-layout-5") {
642 box-shadow: 0px 8px 20px rgba(0, 1, 35, 0.1);
643 border-radius: 5px;
644 }
645
646 @include for(".betterdocs-sidebar-layout-6") {
647 padding-top: 0;
648 }
649 }
650 }
651
652 .betterdocs-single-category-wrapper {
653 .betterdocs-single-category-inner {
654 box-shadow: none !important;
655
656 .betterdocs-category-header {
657 @include if(".betterdocs-sidebar",
658 ".betterdocs-sidebar-layout-1"
659
660 ) {
661 padding-top: 10px;
662 padding-right: 15px;
663 padding-bottom: 10px;
664 padding-left: 15px;
665 box-shadow: none;
666 cursor: pointer;
667 border-right: 3px solid transparent;
668 @include if(".betterdocs-single-category-wrapper",
669 ".active"
670
671 ) {
672 background-color: rgba(90, 148, 255, 0.1);
673 border-color: #5a94ff;
674 }
675 }
676
677 @include if(".betterdocs-sidebar",
678 ".betterdocs-sidebar-layout-3"
679
680 ) {
681 @include if(".betterdocs-single-category-wrapper",
682 ".active"
683
684 ) {
685 border-right: 3px solid #5a94ff;
686 }
687 }
688
689 .betterdocs-category-header-inner {
690 padding-bottom: 0px !important;
691
692 .betterdocs-category-title a {
693 font-size: 16px;
694 @include if(".betterdocs-sidebar",
695 ".betterdocs-sidebar-layout-3"
696
697 ) {
698 font-size: 18px;
699 @include if(".betterdocs-single-category-wrapper",
700 ".active"
701
702 ) {
703 color: #5a94ff;
704 }
705 }
706 }
707
708 @include if(".betterdocs-sidebar",
709 ".betterdocs-sidebar-layout-1"
710
711 ) {
712 border-bottom: none;
713
714 .betterdocs-category-collapse {
715 display: none;
716 }
717 }
718
719 @include if(".betterdocs-sidebar",
720 ".betterdocs-sidebar-layout-3"
721
722 ) {
723 border-bottom: none;
724
725 .betterdocs-category-items-counts,
726 .betterdocs-category-collapse {
727 display: none;
728 }
729 }
730
731 @include if(".betterdocs-sidebar",
732 ".betterdocs-sidebar-layout-2"
733
734 ) {
735 border-bottom: none;
736
737 .betterdocs-category-items-counts,
738 .betterdocs-category-collapse {
739 display: none;
740 }
741 }
742
743 @include if(".betterdocs-sidebar",
744 ".betterdocs-sidebar-layout-4",
745
746 ) {
747 border-bottom: none;
748
749 .betterdocs-category-title {
750 flex-grow: 1;
751 }
752
753 .betterdocs-category-collapse {
754 @include if(".betterdocs-single-category-wrapper",
755 ".active"
756
757 ) {
758 transform: rotate(-180deg);
759 }
760 }
761 }
762 @include if(".betterdocs-sidebar",
763 ".betterdocs-sidebar-layout-8"
764
765 ) {
766 border-bottom: none;
767
768 .betterdocs-category-title {
769 flex-grow: 1;
770 }
771
772 .betterdocs-category-collapse {
773 @include if(".betterdocs-single-category-wrapper",
774 ".active"
775
776 ) {
777 transform: rotate(-180deg);
778 }
779 }
780 }
781
782 @include if(".betterdocs-sidebar",
783 ".betterdocs-sidebar-layout-5"
784
785 ) {
786 border-bottom: none;
787
788 .betterdocs-category-title {
789 flex-grow: 1;
790 }
791
792 .betterdocs-category-items-counts {
793 display: none;
794 }
795
796 .betterdocs-category-collapse {
797 @include if(".betterdocs-single-category-wrapper",
798 ".active"
799
800 ) {
801 transform: rotate(-180deg);
802 }
803 }
804 }
805 }
806 }
807 }
808 }
809
810 @import "./sidebar-list";
811 }
812
813 &.betterdocs-sidebar-layout-2 {
814 .betterdocs-category-list-wrapper {
815 padding: 15px 0px;
816 @include responsive-from("tablet") {
817 padding: 15px;
818 }
819 }
820 }
821 }
822