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 / gutenberg / blocks / categorygrid / src / style.scss

style.scss in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/categorygrid/src/style.scss

648 lines 16.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* ============================================= */
2 /* Only Layout 2 modification from Default Layout
3 /* ============================================= */
4 /* ===================================== */
5 /* Column CSS
6 /* ===================================== */
7 .el-betterdocs-category-grid-wrapper {
8 margin: 0 -7.5px;
9 .el-betterdocs-category-grid.fit-to-screen {
10 display: -webkit-box;
11 display: -ms-flexbox;
12 display: flex;
13 -ms-flex-wrap: wrap;
14 flex-wrap: wrap;
15 .el-betterdocs-category-grid-post {
16 display: -webkit-box;
17 display: -ms-flexbox;
18 display: flex;
19 .el-betterdocs-cg-inner {
20 width: 100%;
21 }
22 }
23 }
24 }
25 .el-betterdocs-category-grid-post {
26 .el-betterdocs-cg-inner {
27 background: #ffffff;
28 -webkit-box-shadow: 0 10px 100px 0 rgba(40, 47, 98, 0.08);
29 box-shadow: 0 10px 100px 0 rgba(40, 47, 98, 0.08);
30 margin: 0 7.5px 15px 7.5px;
31 }
32 .docs-sub-cat-list {
33 display: block;
34 }
35 }
36 .betterdocs-category-grid-wrapper .el-betterdocs-cg-body {
37 padding: 0px 20px 0px 20px;
38 ul {
39 margin: 0;
40 padding: 0;
41 list-style: none;
42 li {
43 margin: 10px;
44 display: -webkit-box;
45 display: -ms-flexbox;
46 display: flex;
47 -webkit-box-align: center;
48 -ms-flex-align: center;
49 align-items: center;
50 color: #566e8b;
51 a {
52 text-decoration: none;
53 color: #566e8b;
54 line-height: 1.8;
55 }
56 .el-betterdocs-cg-post-list-icon {
57 font-style: normal;
58 line-height: 1.8;
59 margin-right: 10px;
60 }
61 }
62 }
63 ul.docs-sub-cat-list {
64 margin-left: 20px;
65 }
66 }
67 .el-betterdocs-cg-header {
68 padding: 20px;
69 .el-betterdocs-cg-header-inner {
70 display: -webkit-box;
71 display: -ms-flexbox;
72 display: flex;
73 -webkit-box-orient: horizontal;
74 -webkit-box-direction: normal;
75 -ms-flex-direction: row;
76 flex-direction: row;
77 -webkit-box-align: center;
78 -ms-flex-align: center;
79 align-items: center;
80 padding-bottom: 20px;
81 }
82 .betterdocs-category-title {
83 color: #528ffe;
84 font-size: 20px;
85 position: relative;
86 margin: 0;
87 word-break: break-word;
88 }
89 .el-betterdocs-cat-icon {
90 max-height: 32px;
91 max-width: 32px;
92 margin-right: 30px;
93 -webkit-transition: 300ms;
94 -o-transition: 300ms;
95 transition: 300ms;
96 img {
97 width: 100%;
98 }
99 }
100 .el-betterdocs-item-count {
101 min-height: 35px;
102 min-width: 35px;
103 background: #528ffe;
104 display: -webkit-box;
105 display: -ms-flexbox;
106 display: flex;
107 -webkit-box-align: center;
108 -ms-flex-align: center;
109 align-items: center;
110 -webkit-box-pack: center;
111 -ms-flex-pack: center;
112 justify-content: center;
113 border-radius: 50%;
114 margin-left: auto;
115 color: #ffffff;
116 font-size: 15px;
117 }
118 }
119 .elgb-betterdocs-grid-sub-cat-title {
120 display: block;
121 cursor: pointer;
122 margin: 10px 10px 0 10px;
123 .toggle-arrow {
124 margin-right: 5px;
125 }
126 .arrow-down {
127 display: none;
128 }
129 a {
130 color: #566e8b;
131 font-size: 18px;
132 line-height: 2;
133 transition: all 0.3s;
134 outline: none;
135 text-decoration: none !important;
136 }
137 i {
138 font-size: 16px;
139 }
140 }
141 .docs-sub-cat-wrapper {
142 display: none;
143 }
144 .el-betterdocs-cg-button {
145 text-decoration: none !important;
146 display: inline-block;
147 background-color: #ffffff;
148 font-size: 16px;
149 color: #528ffe;
150 border: 1px solid #528ffe;
151 border-radius: 50px;
152 line-height: 1;
153 padding: 15px 20px;
154 margin: 10px 20px;
155 .el-betterdocs-cg-button-icon {
156 font-style: normal;
157 position: relative;
158 top: 1px;
159 }
160 .el-betterdocs-cg-button-icon.el-betterdocs-cg-button-icon-left {
161 margin-right: 5px;
162 }
163 .el-betterdocs-cg-button-icon.el-betterdocs-cg-button-icon-right {
164 margin-left: 5px;
165 }
166 }
167 .el-betterdocs-category-grid-post.layout-2 {
168 .el-betterdocs-cg-header {
169 padding: 0px 20px;
170 }
171 .betterdocs-category-title {
172 -webkit-transition: 300ms;
173 -o-transition: 300ms;
174 transition: 300ms;
175 margin-top: 30px;
176 color: #528ffe;
177 font-size: 18px;
178 font-weight: 500;
179 }
180 .el-betterdocs-item-count {
181 margin: 0;
182 border-radius: 0;
183 position: relative;
184 display: block;
185 width: auto;
186 background: none;
187 height: 45px;
188 width: 40px;
189 &:before {
190 content: attr(data-content);
191 position: absolute;
192 left: 0;
193 top: -1px;
194 height: 45px;
195 width: 40px;
196 background: #fc8c91;
197 -webkit-box-align: center;
198 -ms-flex-align: center;
199 align-items: center;
200 display: -webkit-box;
201 display: -ms-flexbox;
202 display: flex;
203 -webkit-box-pack: center;
204 -ms-flex-pack: center;
205 justify-content: center;
206 }
207 &:after {
208 position: absolute;
209 left: 40px;
210 top: -1px;
211 content: "";
212 border-top: 6px solid #ad5e62;
213 border-right: 6px solid transparent;
214 opacity: 0.9;
215 }
216 }
217 .el-betterdocs-cg-body {
218 ul {
219 li {
220 font-size: 15px;
221 a {
222 color: #707070;
223 }
224 }
225 }
226 }
227 .el-betterdocs-cg-inner {
228 -webkit-transition: 300ms;
229 -o-transition: 300ms;
230 transition: 300ms;
231 -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 9, 78, 0.1);
232 box-shadow: 0px 1px 5px 0px rgba(0, 9, 78, 0.1);
233 border-radius: 5px;
234 &:hover {
235 -webkit-box-shadow: 0px 15px 40px 0px rgba(0, 9, 78, 0.1);
236 box-shadow: 0px 15px 40px 0px rgba(0, 9, 78, 0.1);
237 }
238 }
239 .el-betterdocs-cg-button {
240 font-size: 15px;
241 text-decoration: none !important;
242 border: 0px solid;
243 border-radius: 0;
244 color: #333333;
245 -webkit-transition: 300ms;
246 -o-transition: 300ms;
247 transition: 300ms;
248 &:hover {
249 color: #fc8c91;
250 }
251 }
252 }
253 .rtl {
254 .el-betterdocs-category-grid-post.layout-2 {
255 .el-betterdocs-item-count {
256 &:after {
257 position: absolute;
258 right: 40px;
259 left: 0;
260 border-top: 6px solid #ad5e62;
261 border-left: 6px solid transparent;
262 border-right: unset;
263 }
264 }
265 .el-betterdocs-cg-header {
266 .el-betterdocs-item-count {
267 margin-right: unset;
268 margin-left: auto;
269 }
270 }
271 }
272 .el-betterdocs-category-grid-post {
273 .el-betterdocs-cg-header {
274 .el-betterdocs-item-count {
275 margin-right: auto;
276 margin-left: unset;
277 }
278 }
279 }
280 }
281 .betterdocs-category-grid-wrapper {
282 width: 100%;
283 max-width: 1600px;
284 display: block;
285 margin: 0 auto;
286 }
287 .betterdocs-category-grid.masonry {
288 margin-left: auto;
289 margin-right: auto;
290 }
291
292 .betterdocs-category-grid {
293 display: flex;
294 flex-wrap: wrap;
295 }
296
297 .docs-sub-cat-wrapper {
298 overflow: hidden;
299 transition: height 300ms ease-in;
300 }
301 /* ===================================== */
302 /* Column CSS
303 /* ===================================== */
304
305 @media only screen and (min-width: 1025px) {
306 .betterdocs-block.betterdocs-grid-1 {
307 position: relative;
308 }
309
310 .betterdocs-block.betterdocs-grid-1 .el-betterdocs-category-grid-post {
311 width: 100%;
312 }
313
314 .betterdocs-block.betterdocs-grid-2 {
315 position: relative;
316 }
317
318 .betterdocs-block.betterdocs-grid-2 .el-betterdocs-category-grid-post {
319 width: 50%;
320 }
321
322 .betterdocs-block.betterdocs-grid-2
323 .el-betterdocs-category-grid-post:nth-of-type(2n) {
324 margin-right: 0 !important;
325 }
326
327 .betterdocs-block.betterdocs-grid-2
328 .el-betterdocs-category-grid-post:nth-of-type(2n + 1) {
329 clear: left;
330 }
331
332 .betterdocs-block.betterdocs-grid-3 {
333 position: relative;
334 }
335
336 .betterdocs-block.betterdocs-grid-3 .el-betterdocs-category-grid-post {
337 width: 33.3333%;
338 }
339
340 .betterdocs-block.betterdocs-grid-3
341 .el-betterdocs-category-grid-post:nth-of-type(3n) {
342 margin-right: 0 !important;
343 }
344
345 .betterdocs-block.betterdocs-grid-3
346 .el-betterdocs-category-grid-post:nth-of-type(3n + 1) {
347 clear: left;
348 }
349
350 .betterdocs-block.betterdocs-grid-4 {
351 position: relative;
352 }
353
354 .betterdocs-block.betterdocs-grid-4 .el-betterdocs-category-grid-post {
355 width: 25%;
356 }
357
358 .betterdocs-block.betterdocs-grid-4
359 .el-betterdocs-category-grid-post:nth-of-type(4n) {
360 margin-right: 0 !important;
361 }
362
363 .betterdocs-block.betterdocs-grid-4
364 .el-betterdocs-category-grid-post:nth-of-type(4n + 1) {
365 clear: left;
366 }
367
368 .betterdocs-block.betterdocs-grid-5 {
369 position: relative;
370 }
371
372 .betterdocs-block.betterdocs-grid-5 .el-betterdocs-category-grid-post {
373 width: 20%;
374 }
375
376 .betterdocs-block.betterdocs-grid-5
377 .el-betterdocs-category-grid-post:nth-of-type(5n) {
378 margin-right: 0 !important;
379 }
380
381 .betterdocs-block.betterdocs-grid-5
382 .el-betterdocs-category-grid-post:nth-of-type(5n + 1) {
383 clear: left;
384 }
385
386 .betterdocs-block.betterdocs-grid-6 {
387 position: relative;
388 }
389
390 .betterdocs-block.betterdocs-grid-6 .el-betterdocs-category-grid-post {
391 width: 16%;
392 }
393
394 .betterdocs-block.betterdocs-grid-6
395 .el-betterdocs-category-grid-post:nth-of-type(6n) {
396 margin-right: 0 !important;
397 }
398
399 .betterdocs-block.betterdocs-grid-6
400 .el-betterdocs-category-grid-post:nth-of-type(6n + 1) {
401 clear: left;
402 }
403 }
404 @media only screen and (max-width: 1024px) and (min-width: 766px) {
405 .betterdocs-block.betterdocs-grid-tablet-1 {
406 position: relative;
407 }
408
409 .betterdocs-block.betterdocs-grid-tablet-1
410 .el-betterdocs-category-grid-post {
411 width: 100%;
412 }
413
414 .betterdocs-block.betterdocs-grid-tablet-2 {
415 position: relative;
416 }
417
418 .betterdocs-block.betterdocs-grid-tablet-2
419 .el-betterdocs-category-grid-post {
420 width: 50%;
421 }
422
423 .betterdocs-block.betterdocs-grid-tablet-2
424 .el-betterdocs-category-grid-post:nth-of-type(2n) {
425 margin-right: 0 !important;
426 }
427
428 .betterdocs-block.betterdocs-grid-tablet-2
429 .el-betterdocs-category-grid-post:nth-of-type(2n + 1) {
430 clear: left;
431 }
432
433 .betterdocs-block.betterdocs-grid-tablet-3 {
434 position: relative;
435 }
436
437 .betterdocs-block.betterdocs-grid-tablet-3
438 .el-betterdocs-category-grid-post {
439 width: 33.3333%;
440 }
441
442 .betterdocs-block.betterdocs-grid-tablet-3
443 .el-betterdocs-category-grid-post:nth-of-type(3n) {
444 margin-right: 0 !important;
445 }
446
447 .betterdocs-block.betterdocs-grid-tablet-3
448 .el-betterdocs-category-grid-post:nth-of-type(3n + 1) {
449 clear: left;
450 }
451
452 .betterdocs-block.betterdocs-grid-tablet-4 {
453 position: relative;
454 }
455
456 .betterdocs-block.betterdocs-grid-tablet-4
457 .el-betterdocs-category-grid-post {
458 width: 25%;
459 }
460
461 .betterdocs-block.betterdocs-grid-tablet-4
462 .el-betterdocs-category-grid-post:nth-of-type(4n) {
463 margin-right: 0 !important;
464 }
465
466 .betterdocs-block.betterdocs-grid-tablet-4
467 .el-betterdocs-category-grid-post:nth-of-type(4n + 1) {
468 clear: left;
469 }
470
471 .betterdocs-block.betterdocs-grid-tablet-5 {
472 position: relative;
473 }
474
475 .betterdocs-block.betterdocs-grid-tablet-5
476 .el-betterdocs-category-grid-post {
477 width: 20%;
478 }
479
480 .betterdocs-block.betterdocs-grid-tablet-5
481 .el-betterdocs-category-grid-post:nth-of-type(5n) {
482 margin-right: 0 !important;
483 }
484
485 .betterdocs-block.betterdocs-grid-tablet-5
486 .el-betterdocs-category-grid-post:nth-of-type(5n + 1) {
487 clear: left;
488 }
489
490 .betterdocs-block.betterdocs-grid-tablet-6 {
491 position: relative;
492 }
493
494 .betterdocs-block.betterdocs-grid-tablet-6
495 .el-betterdocs-category-grid-post {
496 width: 16%;
497 }
498
499 .betterdocs-block.betterdocs-grid-tablet-6
500 .el-betterdocs-category-grid-post:nth-of-type(6n) {
501 margin-right: 0 !important;
502 }
503
504 .betterdocs-block.betterdocs-grid-tablet-6
505 .el-betterdocs-category-grid-post:nth-of-type(6n + 1) {
506 clear: left;
507 }
508 }
509 @media only screen and (max-width: 767px) {
510 .betterdocs-block.betterdocs-grid-mobile-1 {
511 position: relative;
512 }
513
514 .betterdocs-block.betterdocs-grid-mobile-1
515 .el-betterdocs-category-grid-post {
516 width: 100%;
517 }
518
519 .betterdocs-block.betterdocs-grid-mobile-2 {
520 position: relative;
521 }
522
523 .betterdocs-block.betterdocs-grid-mobile-2
524 .el-betterdocs-category-grid-post {
525 width: 50%;
526 }
527
528 .betterdocs-block.betterdocs-grid-mobile-2
529 .el-betterdocs-category-grid-post:nth-of-type(2n) {
530 margin-right: 0 !important;
531 }
532
533 .betterdocs-block.betterdocs-grid-mobile-2
534 .el-betterdocs-category-grid-post:nth-of-type(2n + 1) {
535 clear: left;
536 }
537
538 .betterdocs-block.betterdocs-grid-mobile-3 {
539 position: relative;
540 }
541
542 .betterdocs-block.betterdocs-grid-mobile-3
543 .el-betterdocs-category-grid-post {
544 width: 33.3333%;
545 }
546
547 .betterdocs-block.betterdocs-grid-mobile-3
548 .el-betterdocs-category-grid-post:nth-of-type(3n) {
549 margin-right: 0 !important;
550 }
551
552 .betterdocs-block.betterdocs-grid-mobile-3
553 .el-betterdocs-category-grid-post:nth-of-type(3n + 1) {
554 clear: left;
555 }
556
557 .betterdocs-block.betterdocs-grid-mobile-4 {
558 position: relative;
559 }
560
561 .betterdocs-block.betterdocs-grid-mobile-4
562 .el-betterdocs-category-grid-post {
563 width: 25%;
564 }
565
566 .betterdocs-block.betterdocs-grid-mobile-4
567 .el-betterdocs-category-grid-post:nth-of-type(4n) {
568 margin-right: 0 !important;
569 }
570
571 .betterdocs-block.betterdocs-grid-mobile-4
572 .el-betterdocs-category-grid-post:nth-of-type(4n + 1) {
573 clear: left;
574 }
575
576 .betterdocs-block.betterdocs-grid-mobile-5 {
577 position: relative;
578 }
579
580 .betterdocs-block.betterdocs-grid-mobile-5
581 .el-betterdocs-category-grid-post {
582 width: 20%;
583 }
584
585 .betterdocs-block.betterdocs-grid-mobile-5
586 .el-betterdocs-category-grid-post:nth-of-type(5n) {
587 margin-right: 0 !important;
588 }
589
590 .betterdocs-block.betterdocs-grid-mobile-5
591 .el-betterdocs-category-grid-post:nth-of-type(5n + 1) {
592 clear: left;
593 }
594
595 .betterdocs-block.betterdocs-grid-mobile-6 {
596 position: relative;
597 }
598
599 .betterdocs-block.betterdocs-grid-mobile-6
600 .el-betterdocs-category-grid-post {
601 width: 16%;
602 }
603
604 .betterdocs-block.betterdocs-grid-mobile-6
605 .el-betterdocs-category-grid-post:nth-of-type(6n) {
606 margin-right: 0 !important;
607 }
608
609 .betterdocs-block.betterdocs-grid-mobile-6
610 .el-betterdocs-category-grid-post:nth-of-type(6n + 1) {
611 clear: left;
612 }
613 }
614 .rtl
615 .el-betterdocs-category-grid-post.layout-2
616 .el-betterdocs-item-count:after {
617 position: absolute;
618 right: 40px;
619 left: 0;
620 border-top: 6px solid #ad5e62;
621 border-left: 6px solid transparent;
622 border-right: unset;
623 }
624 .rtl
625 .el-betterdocs-category-grid-post
626 .el-betterdocs-cg-header
627 .el-betterdocs-item-count {
628 margin-right: auto;
629 margin-left: unset;
630 }
631 .rtl
632 .el-betterdocs-category-grid-post.layout-2
633 .el-betterdocs-cg-header
634 .el-betterdocs-item-count {
635 margin-right: unset;
636 margin-left: auto;
637 }
638 .betterdocs-category-grid-wrapper {
639 width: 100%;
640 max-width: 1600px;
641 display: block;
642 margin: 0 auto;
643 }
644 .betterdocs-category-grid.masonry {
645 margin-left: auto;
646 margin-right: auto;
647 }
648