1.user-select(@select: none) { 2 -webkit-user-select: @select; 3 -moz-user-select: @select; 4 -ms-user-select: @select; 5 user-select: @select; 6} 7 8.appearance(@appearance: none) { 9 -webkit-appearance: @appearance; 10 -moz-appearance: @appearance; 11} 12 13.display-flex { 14 display: -ms-flexbox; 15 display: flex; 16} 17 18.flex(@val) { 19 -ms-flex: @val; 20 flex: @val; 21} 22 23.flex-direction(@direction) { 24 -ms-flex-direction: @direction; 25 flex-direction: @direction; 26} 27 28.justify-content(@justify) { 29 -ms-flex-pack: @justify; 30 justify-content: @justify; 31} 32 33.align-items(@align) { 34 -ms-align-items: @align; 35 align-items: @align; 36} 37 38.flex-wrap(@wrap) { 39 -webkit-flex-wrap: @wrap; 40 -moz-flex-wrap: @wrap; 41 flex-wrap: @wrap; 42} 43 44.animation(@val) { 45 -webkit-animation: @val; 46 animation: @val; 47} 48 49._mikiop-btn-type(@type: 'primary') { 50 @color: '@{type}-btn-text-color'; 51 @background: '@{type}-btn-bg-color'; 52 @border: '@{type}-btn-border-color'; 53 @hovercolor: '@{type}-btn-hover-text-color'; 54 @hoverbackground: '@{type}-btn-hover-bg-color'; 55 @hoverborder: '@{type}-btn-hover-border-color'; 56 57 color: @@color; 58 background-color: @@background; 59 border-color: @@border; 60 61 &.mikiop-active { 62 color: @@hovercolor; 63 background-color: @@hoverbackground; 64 border-color: @@hoverborder; 65 } 66 67 &:disabled, 68 &.mikiop-disabled { 69 opacity: 0.65; 70 } 71 72 &:hover:not(.mikiop-disabled) { 73 color: @@hovercolor; 74 background-color: @@hoverbackground; 75 border-color: @@hoverborder; 76 } 77 78 &.mikiop-disabled:hover { 79 cursor: default; 80 } 81} 82 83._mikiop-btn-type(@type) when (@type = 'link') { 84 &:hover { 85 text-decoration: underline; 86 } 87} 88 89._mikiop-btn-types { 90 &.mikiop-type-primary { 91 ._mikiop-btn-type('primary'); 92 } 93 &.mikiop-type-outline-primary { 94 ._mikiop-btn-type('outline-primary'); 95 } 96 &.mikiop-type-secondary { 97 ._mikiop-btn-type('secondary'); 98 } 99 &.mikiop-type-outline-secondary { 100 ._mikiop-btn-type('outline-secondary'); 101 } 102 &.mikiop-type-success { 103 ._mikiop-btn-type('success'); 104 } 105 &.mikiop-type-outline-success { 106 ._mikiop-btn-type('outline-success'); 107 } 108 &.mikiop-type-danger { 109 ._mikiop-btn-type('danger'); 110 } 111 &.mikiop-type-outline-danger { 112 ._mikiop-btn-type('outline-danger'); 113 } 114 &.mikiop-type-warning { 115 ._mikiop-btn-type('warning'); 116 } 117 &.mikiop-type-outline-warning { 118 ._mikiop-btn-type('outline-warning'); 119 } 120 &.mikiop-type-info { 121 ._mikiop-btn-type('info'); 122 } 123 &.mikiop-type-outline-info { 124 ._mikiop-btn-type('outline-info'); 125 } 126 &.mikiop-type-light { 127 ._mikiop-btn-type('light'); 128 } 129 &.mikiop-type-outline-light { 130 ._mikiop-btn-type('outline-light'); 131 } 132 &.mikiop-type-dark { 133 ._mikiop-btn-type('dark'); 134 } 135 &.mikiop-type-outline-dark { 136 ._mikiop-btn-type('outline-dark'); 137 } 138 &.mikiop-type-link { 139 ._mikiop-btn-type('link'); 140 } 141} 142 143._mikiop-btn-sizes(@padding: 1) { 144 &.mikiop-size-small { 145 font-size: 0.875em; 146 border-radius: 0.2em; 147 } 148 149 &.mikiop-size-small when (@padding = 0) { 150 padding: 0; 151 } 152 153 &.mikiop-size-small when (@padding = 1) { 154 padding: 0.25em 0.5em; 155 } 156 157 &.mikiop-size-large { 158 font-size: 1.25em; 159 border-radius: 0.3em; 160 } 161 162 &.mikiop-size-large when (@padding = 0) { 163 padding: 0; 164 } 165 166 &.mikiop-size-large when (@padding = 1) { 167 padding: 0.5em 1em; 168 } 169} 170 171._mikiop-block-type(@type: 'primary', @sel: 'btn') { 172 @color: '@{type}-@{sel}-text-color'; 173 @background: '@{type}-@{sel}-bg-color'; 174 @border: '@{type}-@{sel}-border-color'; 175 176 color: @@color; 177 background-color: @@background; 178 border-color: @@border; 179 180 a { 181 color: @@color; 182 } 183} 184 185._mikiop-block-types { 186 &.mikiop-type-primary { 187 ._mikiop-block-type('primary'); 188 } 189 &.mikiop-type-secondary { 190 ._mikiop-block-type('secondary'); 191 } 192 &.mikiop-type-success { 193 ._mikiop-block-type('success'); 194 } 195 &.mikiop-type-danger { 196 ._mikiop-block-type('danger'); 197 } 198 &.mikiop-type-warning { 199 ._mikiop-block-type('warning'); 200 } 201 &.mikiop-type-info { 202 ._mikiop-block-type('info'); 203 } 204 &.mikiop-type-light { 205 ._mikiop-block-type('light'); 206 } 207 &.mikiop-type-dark { 208 ._mikiop-block-type('dark'); 209 } 210} 211 212._mikiop-alert-types { 213 &.mikiop-type-primary { 214 ._mikiop-block-type('primary', 'alert'); 215 } 216 &.mikiop-type-secondary { 217 ._mikiop-block-type('secondary', 'alert'); 218 } 219 &.mikiop-type-success { 220 ._mikiop-block-type('success', 'alert'); 221 } 222 &.mikiop-type-danger { 223 ._mikiop-block-type('danger', 'alert'); 224 } 225 &.mikiop-type-warning { 226 ._mikiop-block-type('warning', 'alert'); 227 } 228 &.mikiop-type-info { 229 ._mikiop-block-type('info', 'alert'); 230 } 231 &.mikiop-type-light { 232 ._mikiop-block-type('light', 'alert'); 233 } 234 &.mikiop-type-dark { 235 ._mikiop-block-type('dark', 'alert'); 236 } 237} 238 239._mikiop-col(@width) { 240 .flex(0 0 @width); 241 max-width: @width; 242} 243 244._mikiop-shadows { 245 &.mikiop-shadow { 246 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); 247 } 248 249 &.mikiop-shadow-small { 250 box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.275); 251 } 252 253 &.mikiop-shadow-large { 254 box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.375); 255 } 256} 257 258._mikiop-text-align { 259 &.mikiop-text-align-left { 260 text-align: left; 261 } 262 263 &.mikiop-text-align-center { 264 text-align: center; 265 } 266 267 &.mikiop-text-align-right { 268 text-align: right; 269 } 270} 271 272._mikiop-flex-text-align { 273 &.mikiop-text-align-left { 274 .align-items(flex-start); 275 } 276 277 &.mikiop-text-align-center { 278 .align-items(center); 279 } 280 281 &.mikiop-text-align-right { 282 .align-items(flex-end); 283 } 284} 285 286._mikiop-align { 287 &.mikiop-align-left { 288 margin-right: auto; 289 } 290 291 &.mikiop-align-center { 292 margin-left: auto; 293 margin-right: auto; 294 } 295 296 &.mikiop-align-right { 297 margin-left: auto; 298 } 299} 300 301._mikiop-vertical-align { 302 &.mikiop-vertical-align-top { 303 .justify-content(flex-start); 304 } 305 306 &.mikiop-vertical-align-middle { 307 .justify-content(center); 308 } 309 310 &.mikiop-vertical-align-bottom { 311 .justify-content(flex-end); 312 } 313} 314 315._mikiop-nowrap { 316 white-space: nowrap; 317} 318 319._mikiop-button { 320 display: inline-block; 321 text-decoration: none; 322 font-weight: 400; 323 text-align: center; 324 vertical-align: center; 325 .user-select(none); 326 .appearance(none); 327 background-color: transparent; 328 border: 1px solid transparent; 329 padding: 0.375em 0.75em; 330 font-size: 1em; 331 line-height: 1.5; 332 border-radius: 0.25em; 333 transition: all 0.15s ease-in-out; 334 margin-top: 0.25em; 335 margin-bottom: 0.25em; 336 margin-left: 0.25em; 337 margin-right: 0.25em; 338} 339 340.mikiop-tooltip-banner { 341 position: absolute; 342 z-index: 100000; 343 padding: 0.25em 0.5em; 344 background: #fcf3cf; 345 color: #333; 346 border: 1px solid #9a7d0a; 347 border-radius: 0.25em; 348 font-size: 80%; 349 box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.35); 350} 351 352#dokuwiki__content { 353 .mikiop-links-match a { 354 color: inherit; 355 } 356 357 .mikiop-accordian { 358 border: 1px solid rgba(0, 0, 0, 0.125); 359 border-radius: 0.25em; 360 margin-bottom: 1em; 361 overflow: hidden; 362 363 ._mikiop-shadows; 364 365 .mikiop-accordian-item { 366 ._mikiop-alert-types; 367 ._mikiop-text-align; 368 369 .mikiop-accordian-title { 370 text-decoration: none; 371 display: block; 372 padding: 0.75em 1.25em; 373 background-color: rgba(0, 0, 0, 0.03); 374 border-bottom: 1px solid rgba(0, 0, 0, 0.125); 375 } 376 377 .mikiop-accordian-body { 378 display: none; 379 min-height: 1px; 380 padding: 1.25em; 381 382 p:last-child { 383 margin: 0; 384 } 385 } 386 } 387 388 .mikiop-accordian-item.mikiop-show { 389 .mikiop-accordian-body { 390 display: block; 391 } 392 } 393 394 .mikiop-accordian-item:not(:last-child) { 395 .mikiop-accordian-body { 396 border-bottom: 1px solid rgba(0, 0, 0, 0.125); 397 } 398 } 399 400 .mikiop-accordian-item:last-child { 401 .mikiop-accordian-title { 402 border-bottom: 0; 403 } 404 405 .mikiop-accordian-body { 406 border-top: 1px solid rgba(0, 0, 0, 0.125); 407 } 408 } 409 } 410 411 .mikiop-alert { 412 .display-flex; 413 .flex-direction(row); 414 ._mikiop-alert-types; 415 ._mikiop-shadows; 416 ._mikiop-align; 417 ._mikiop-text-align; 418 padding: 0.75em 1.25em; 419 margin-bottom: 1em; 420 border: 1px solid transparent; 421 border-radius: 0.25em; 422 position: relative; 423 424 .mikiop-alert-icon { 425 padding-right: 0.5em; 426 } 427 428 &.mikiop-dismissible .mikiop-alert-content { 429 padding-right: 2em; 430 } 431 432 .mikiop-alert-content { 433 width: 100%; 434 ._mikiop-text-align; 435 ._mikiop-align; 436 437 span.curid a, 438 a { 439 text-decoration: none; 440 color: inherit; 441 font-weight: 700; 442 443 &:hover { 444 text-decoration: underline; 445 } 446 } 447 448 p:last-child { 449 margin-bottom: 0; 450 } 451 452 .mikiop-alert-close { 453 position: absolute; 454 top: 0; 455 right: 0; 456 padding: 0.5em 0.75em; 457 background-color: transparent; 458 border: 0; 459 font-size: 1.5em; 460 font-weight: 700; 461 line-height: 1; 462 opacity: 0.5; 463 text-decoration: none; 464 transition: all 0.15s ease-in-out; 465 466 &:hover { 467 opacity: 1; 468 text-decoration: none; 469 } 470 } 471 472 ul { 473 list-style: disc; 474 475 li, 476 .li { 477 color: inherit; 478 } 479 } 480 } 481 } 482 483 .mikiop-badge { 484 display: inline-block; 485 padding: 0.25em 0.4em; 486 font-size: 70%; 487 font-weight: 700; 488 line-height: 1; 489 text-align: center; 490 white-space: nowrap; 491 vertical-align: baseline; 492 border-radius: 0.25em; 493 transition: all 0.15s ease-in-out; 494 ._mikiop-block-types; 495 text-decoration: none; 496 497 &.mikiop-badge-pill { 498 padding-right: 0.6em; 499 padding-left: 0.6em; 500 border-radius: 10em; 501 } 502 503 ._mikiop-shadows; 504 ._mikiop-text-align; 505 } 506 507 .mikiop-blockquote { 508 margin-bottom: 1em; 509 padding: 0; 510 font-size: 1.25em; 511 border: 0; 512 ._mikiop-text-align; 513 514 p { 515 margin-bottom: 0; 516 } 517 518 .mikiop-blockquote-footer { 519 &:before { 520 content: '\2014\00A0'; 521 } 522 523 display: block; 524 font-size: 80%; 525 color: #6c757d; 526 } 527 } 528 529 .mikiop-box { 530 position: relative; 531 .display-flex; 532 .flex-direction(column); 533 padding: 0; 534 border: 1px solid transparent; 535 margin-bottom: 1em; 536 537 ._mikiop-block-types; 538 ._mikiop-shadows; 539 ._mikiop-text-align; 540 ._mikiop-vertical-align; 541 542 p, 543 img, 544 a.media, 545 svg, 546 span.curid, 547 .mikiop-placeholder { 548 width: 100%; 549 height: 100%; 550 object-fit: cover; 551 overflow: hidden; 552 border-radius: inherit; 553 margin: 0; 554 } 555 556 p:last-child { 557 margin-bottom: 0; 558 } 559 560 .mikiop-reveal { 561 position: absolute; 562 display: flex; 563 justify-content: center; 564 align-items: center; 565 top: 0; 566 left: 0; 567 height: 100%; 568 width: 100%; 569 background-color: #868e96; 570 color: #dee2e6; 571 font-weight: 500; 572 } 573 } 574 575 a.mikiop-box { 576 text-decoration: none; 577 transition: all 0.15s ease-in-out; 578 579 &:hover { 580 background-color: rgba(0, 0, 0, 0.05); 581 } 582 } 583 584 .mikiop-button { 585 ._mikiop-button; 586 color: #212529; 587 588 &:hover { 589 color: #212529; 590 text-decoration: none; 591 } 592 593 ._mikiop-btn-types; 594 ._mikiop-btn-sizes; 595 ._mikiop-shadows; 596 ._mikiop-text-align; 597 ._mikiop-align; 598 .mikiop-nowrap { 599 ._mikiop-nowrap; 600 } 601 &.mikiop-block { 602 display: block; 603 } 604 605 .mikiop-badge { 606 position: relative; 607 top: -1px; 608 } 609 } 610 611 .mikiop-button-group { 612 ._mikiop-btn-sizes(0); 613 614 &.mikiop-shadow .mikiop-button-group-inner { 615 box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35); 616 } 617 618 &.mikiop-shadow-small .mikiop-button-group-inner { 619 box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.275); 620 } 621 622 &.mikiop-shadow-large .mikiop-button-group-inner { 623 box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.375); 624 } 625 626 &.mikiop-align-left { 627 text-align: left; 628 } 629 630 &.mikiop-align-center { 631 text-align: center; 632 } 633 634 &.mikiop-align-right { 635 text-align: right; 636 } 637 638 &.mikiop-vertical .mikiop-button-group-inner { 639 .flex-direction(column); 640 .justify-content(center); 641 642 .mikiop-button:not(:last-child) { 643 border-bottom-left-radius: 0; 644 border-bottom-right-radius: 0; 645 } 646 647 .mikiop-button:not(:first-child) { 648 border-top-left-radius: 0; 649 border-top-right-radius: 0; 650 } 651 } 652 653 &:not(.mikiop-vertical) .mikiop-button:not(:last-child) { 654 border-top-right-radius: 0; 655 border-bottom-right-radius: 0; 656 } 657 658 &:not(.mikiop-vertical) .mikiop-button:not(:first-child) { 659 border-top-left-radius: 0; 660 border-bottom-left-radius: 0; 661 } 662 663 .mikiop-button-group-inner { 664 position: relative; 665 display: inline-flex; 666 vertical-align: middle; 667 margin-top: 0.25em; 668 margin-bottom: 0.25em; 669 670 .mikiop-button { 671 position: relative; 672 flex: 1 1 auto; 673 margin: 0; 674 } 675 } 676 } 677 678 .mikiop-card { 679 position: relative; 680 .display-flex; 681 .flex-direction(column); 682 word-wrap: break-word; 683 background-color: #fff; 684 background-clip: border-box; 685 border: 1px solid rgba(0, 0, 0, 0.125); 686 border-radius: 0.25em; 687 margin-bottom: 2em; 688 overflow: hidden; 689 margin: 0.75em; 690 .flex(1); 691 height: 100%; 692 693 ._mikiop-shadows; 694 ._mikiop-block-types; 695 ._mikiop-text-align; 696 697 .mikiop-card-body { 698 .display-flex; 699 .flex(1 1 100%); 700 .flex-direction(column); 701 ._mikiop-vertical-align; 702 // min-height: 1px; 703 padding: 1.25em; 704 box-sizing: border-box; 705 706 p { 707 margin-top: 0; 708 } 709 710 .mikiop-card-footer { 711 display: flex; 712 flex: 1; 713 flex-direction: column; 714 justify-content: flex-end; 715 border-top: 0; 716 padding: 0; 717 } 718 } 719 720 .mikiop-card-header { 721 padding: 0.75em 1.25em; 722 background-color: rgba(0, 0, 0, 0.03); 723 border-bottom: 1px solid rgba(0, 0, 0, 0.125); 724 } 725 726 .mikiop-card-footer { 727 padding: 0.75em 1.25em; 728 background-color: rgba(0, 0, 0, 0.03); 729 border-top: 1px solid rgba(0, 0, 0, 0.125); 730 color: #6c757d; 731 732 small { 733 font-size: 80%; 734 } 735 } 736 737 .mikiop-card-title { 738 font-size: 1.25em; 739 font-weight: 600; 740 margin-bottom: 0.75em; 741 margin-top: 0; 742 } 743 744 .mikiop-card-subtitle { 745 color: #6c757d; 746 font-weight: 600; 747 margin-top: -1em; 748 margin-bottom: 0.5em; 749 } 750 751 &.mikiop-horizontal { 752 display: grid; 753 grid-template-columns: 33.333333% 66.666667%; 754 755 .mikiop-card-horizontal-image { 756 overflow: hidden; 757 margin-bottom: -1px; 758 759 .mikiop-placeholder { 760 height: 101%; 761 } 762 } 763 764 .mikiop-card-header, 765 .mikiop-card-footer { 766 border: 0; 767 background-color: transparent; 768 } 769 770 .mikiop-card-body { 771 justify-content: center; 772 height: 100%; 773 } 774 } 775 776 &.mikiop-overlay { 777 img, 778 a.media, 779 svg, 780 span.curid, 781 .mikiop-placeholder { 782 position: absolute; 783 border-radius: inherit; 784 } 785 786 .mikiop-placeholder { 787 height: 101%; 788 } 789 790 .mikiop-card-header, 791 .mikiop-card-footer { 792 border: 0; 793 background-color: transparent; 794 } 795 796 div, 797 p { 798 z-index: 2; 799 } 800 } 801 802 p:last-child, 803 .mikiop-blockquote { 804 margin-bottom: 0; 805 } 806 807 img, 808 a.media, 809 svg, 810 span.curid, 811 .mikiop-placeholder { 812 width: 100%; 813 height: 100%; 814 object-fit: contain; 815 overflow: hidden; 816 margin: 0; 817 818 &:first-child { 819 border-top-left-radius: inherit; 820 border-top-right-radius: inherit; 821 } 822 823 &:last-child { 824 border-bottom-left-radius: inherit; 825 border-bottom-right-radius: inherit; 826 } 827 828 &.mikiop-image-cover { 829 object-fit: cover; 830 } 831 } 832 833 .mikiop-placeholder { 834 margin-top: -1px; 835 margin-left: -1px; 836 width: 101%; 837 } 838 } 839 840 .mikiop-carousel { 841 position: relative; 842 margin-bottom: 2em; 843 height: 40em; 844 845 &.mikiop-image-cover { 846 .mikiop-carousel-inner img { 847 object-fit: cover; 848 } 849 } 850 851 .mikiop-carousel-inner { 852 position: relative; 853 width: 100%; 854 height: 100%; 855 overflow: hidden; 856 } 857 858 .mikiop-carousel-item { 859 display: none; 860 position: absolute; 861 top: 0; 862 left: 0; 863 bottom: 0; 864 width: 100%; 865 866 &.mikiop-active { 867 z-index: 1; 868 display: block; 869 } 870 871 .mikiop-placeholder { 872 width: 100%; 873 height: 100%; 874 } 875 876 .mikiop-carousel-caption { 877 background-color: rgba(0, 0, 0, 0.5); 878 position: absolute; 879 bottom: 0; 880 left: 0; 881 right: 0; 882 text-align: center; 883 padding: 2em; 884 885 .mikiop-carousel-caption-title, 886 .mikiop-carousel-caption-title a { 887 font-size: 1.25em; 888 margin-bottom: 0.5em; 889 font-weight: 500; 890 line-height: 1.2; 891 color: #fff; 892 } 893 894 .mikiop-carousel-caption-title a { 895 &:hover { 896 text-decoration: underline; 897 } 898 } 899 900 p { 901 color: #fff; 902 margin-bottom: 0; 903 } 904 } 905 906 img { 907 width: 100%; 908 height: 100%; 909 object-fit: contain; 910 overflow: hidden; 911 } 912 } 913 914 .mikiop-carousel-control { 915 position: absolute; 916 z-index: 1; 917 top: 40%; 918 bottom: 40%; 919 .display-flex; 920 .justify-content(center); 921 .align-items(center); 922 width: 15%; 923 text-align: center; 924 opacity: 0.5; 925 transition: all 0.15s ease; 926 background-repeat: no-repeat; 927 background-size: 2em; 928 background-position: 50%; 929 930 &.mikiop-carousel-control-prev { 931 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); 932 } 933 934 &.mikiop-carousel-control-next { 935 right: 0; 936 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); 937 } 938 939 &:hover { 940 opacity: 1; 941 } 942 } 943 944 .mikiop-carousel-indicators { 945 position: absolute; 946 right: 0; 947 bottom: 0; 948 left: 0; 949 z-index: 15; 950 margin: 0.5em 0 0 0; 951 padding: 0; 952 .display-flex; 953 .justify-content(center); 954 list-style: none; 955 956 .mikiop-carousel-indicator { 957 width: 30px; 958 height: 3px; 959 margin: 1em 0.25em; 960 padding: 0; 961 background-color: #fff; 962 transition: all 0.6s ease; 963 opacity: 0.5; 964 965 &.mikiop-active { 966 opacity: 1; 967 } 968 } 969 } 970 } 971 972 .mikiop-col { 973 .flex(1 0 0); 974 .display-flex; 975 .flex-direction(column); 976 .justify-content(space-between); 977 margin: 0; 978 box-sizing: border-box; 979 border-style: solid; 980 border-width: 0; 981 982 &.mikiop-col-1 { 983 ._mikiop-col(8.333333%); 984 } 985 &.mikiop-col-2 { 986 ._mikiop-col(16.666667%); 987 } 988 &.mikiop-col-3 { 989 ._mikiop-col(25%); 990 } 991 &.mikiop-col-4 { 992 ._mikiop-col(33.333333%); 993 } 994 &.mikiop-col-5 { 995 ._mikiop-col(41.666667%); 996 } 997 &.mikiop-col-6 { 998 ._mikiop-col(50%); 999 } 1000 &.mikiop-col-7 { 1001 ._mikiop-col(58.333333%); 1002 } 1003 &.mikiop-col-8 { 1004 ._mikiop-col(66.666667%); 1005 } 1006 &.mikiop-col-9 { 1007 ._mikiop-col(75%); 1008 } 1009 &.mikiop-col-10 { 1010 ._mikiop-col(83.333333%); 1011 } 1012 &.mikiop-col-11 { 1013 ._mikiop-col(91.666667%); 1014 } 1015 &.mikiop-col-12 { 1016 ._mikiop-col(100%); 1017 } 1018 1019 &:first-child { 1020 padding-left: 0; 1021 } 1022 1023 &:last-child { 1024 padding-right: 0; 1025 } 1026 1027 .mikiop-card { 1028 margin-bottom: 0; 1029 } 1030 1031 &.mikiop-col-full { 1032 .flex(0 0 100%); 1033 } 1034 } 1035 1036 .mikiop-grid { 1037 display: grid; 1038 box-sizing: border-box; 1039 1040 .mikiop-box { 1041 margin: 0; 1042 } 1043 } 1044 1045 .mikiop-heading { 1046 margin-top: 0; 1047 margin-bottom: 0.5em; 1048 } 1049 1050 .mikiop-hr { 1051 border-bottom: 1px solid rgba(255, 255, 255, 0.1); 1052 border-top: 1px solid rgba(0, 0, 0, 0.1); 1053 } 1054 1055 .mikiop-list-group { 1056 .display-flex; 1057 .flex-direction(column); 1058 1059 list-style: none; 1060 border-radius: 0.25em; 1061 padding-left: 0; 1062 1063 ._mikiop-shadows; 1064 1065 .mikiop-list-group-item { 1066 .display-flex; 1067 .align-items(center); 1068 .justify-content(space-between); 1069 1070 color: inherit; 1071 padding: 0.75rem 1.25rem; 1072 margin: 0; 1073 border: 1px solid rgba(0, 0, 0, 0.125); 1074 box-sizing: border-box; 1075 1076 ._mikiop-alert-types; 1077 1078 &.mikiop-content-vertical { 1079 .flex-direction(column); 1080 .align-items(flex-start); 1081 ._mikiop-flex-text-align; 1082 } 1083 1084 & + .mikiop-list-group-item { 1085 border-top-width: 0; 1086 } 1087 1088 &:first-child { 1089 border-top-left-radius: 0.25em; 1090 border-top-right-radius: 0.25em; 1091 } 1092 1093 &:last-child { 1094 border-bottom-left-radius: 0.25em; 1095 border-bottom-right-radius: 0.25em; 1096 } 1097 1098 &.mikiop-active { 1099 ._mikiop-block-type('primary'); 1100 } 1101 1102 &.mikiop-disabled { 1103 color: #6c757d; 1104 pointer-events: none; 1105 } 1106 1107 .mikiop-list-group-item-link { 1108 display: block; 1109 width: 100%; 1110 color: inherit; 1111 text-decoration: none; 1112 padding: 0.75rem 1.25rem; 1113 margin: -0.75rem -1.25rem; 1114 1115 &:hover { 1116 background-color: #f8f9fa; 1117 } 1118 } 1119 1120 &.mikiop-active, 1121 &.mikiop-type-primary, 1122 &.mikiop-type-secondary, 1123 &.mikiop-type-success, 1124 &.mikiop-type-warning, 1125 &.mikiop-type-danger, 1126 &.mikiop-type-light, 1127 &.mikiop-type-dark { 1128 .mikiop-list-group-item-link:hover { 1129 background-color: inherit; 1130 } 1131 } 1132 1133 p:last-child { 1134 margin-bottom: 0; 1135 } 1136 } 1137 1138 &.mikiop-flush { 1139 margin-bottom: 0; 1140 1141 .mikiop-list-group-item { 1142 border-left-width: 0; 1143 border-right-width: 0; 1144 1145 &:first-child { 1146 border-top-width: 0; 1147 } 1148 1149 &:last-child { 1150 border-bottom-width: 0; 1151 } 1152 } 1153 } 1154 1155 &.mikiop-horizontal { 1156 .flex-direction(row); 1157 1158 .mikiop-list-group-item { 1159 & + .mikiop-list-group-item { 1160 border-top-width: 1px; 1161 border-left-width: 0; 1162 } 1163 1164 &:first-child { 1165 border-top-left-radius: 0.25em; 1166 border-top-right-radius: 0; 1167 border-bottom-left-radius: 0.25em; 1168 } 1169 1170 &:last-child { 1171 border-top-left-radius: 0; 1172 border-top-right-radius: 0.25em; 1173 border-bottom-right-radius: 0.25em; 1174 } 1175 } 1176 } 1177 } 1178 1179 .mikiop-pagenation { 1180 text-align: center; 1181 1182 .mikiop-pagenation-inner { 1183 display: inline-block; 1184 list-style: none; 1185 padding-left: 0; 1186 1187 .mikiop-pagenation-item { 1188 display: inline-block; 1189 padding: 0; 1190 border: 1px solid #dee2e6; 1191 border-radius: 0.25em; 1192 1193 a { 1194 padding: 0.5em 0.75em; 1195 color: #007bff; 1196 text-decoration: none; 1197 display: block; 1198 1199 &:hover { 1200 text-decoration: none; 1201 background-color: #e9ecef; 1202 } 1203 } 1204 1205 &:not(:last-child) { 1206 border-right-width: 0; 1207 border-bottom-right-radius: 0; 1208 border-top-right-radius: 0; 1209 } 1210 1211 &:not(:first-child) { 1212 border-bottom-left-radius: 0; 1213 border-top-left-radius: 0; 1214 } 1215 1216 &.mikiop-active { 1217 a { 1218 background-color: #007bff; 1219 color: #fff; 1220 } 1221 } 1222 1223 &.mikiop-disabled { 1224 a { 1225 pointer-events: none; 1226 color: #6c757d; 1227 } 1228 } 1229 } 1230 } 1231 } 1232 1233 .mikiop-placeholder { 1234 display: flex; 1235 1236 svg { 1237 width: 100%; 1238 height: 100%; 1239 } 1240 } 1241 1242 .mikiop-progress { 1243 .display-flex; 1244 overflow: hidden; 1245 line-height: 0; 1246 font-size: 0.75em; 1247 background-color: #e9ecef; 1248 border-radius: 0.25em; 1249 margin-bottom: 1em; 1250 } 1251 1252 .mikiop-progress-bar { 1253 .display-flex; 1254 .flex-direction(column); 1255 .justify-content(center); 1256 text-align: center; 1257 overflow: hidden; 1258 white-space: no-wrap; 1259 ._mikiop-block-types; 1260 transition: all 0.6s ease; 1261 1262 &.mikiop-striped { 1263 background-image: linear-gradient( 1264 45deg, 1265 rgba(255, 255, 255, 0.15) 25%, 1266 transparent 25%, 1267 transparent 50%, 1268 rgba(255, 255, 255, 0.15) 50%, 1269 rgba(255, 255, 255, 0.15) 75%, 1270 transparent 75%, 1271 transparent 1272 ); 1273 background-size: 1em 1em; 1274 } 1275 1276 &.mikiop-animated { 1277 .animation(progress-bar-stripes 1s linear infinite); 1278 } 1279 } 1280 1281 .mikiop-row { 1282 .display-flex; 1283 1284 margin: 0; 1285 border-style: solid; 1286 border-width: 0; 1287 1288 &:first-child { 1289 padding-top: 0; 1290 } 1291 1292 &:last-child { 1293 padding-bottom: 0; 1294 margin-bottom: 2em; 1295 } 1296 1297 .mikiop-row { 1298 margin-bottom: 0; 1299 } 1300 } 1301 1302 .mikiop-statistic { 1303 font-size: 4em; 1304 text-align: center; 1305 display: inline-block; 1306 margin: 0 0.25em; 1307 1308 .mikiop-statistic-title { 1309 font-size: 0.3em; 1310 line-height: 0.3em; 1311 } 1312 } 1313 1314 .mikiop-steps { 1315 list-style: none; 1316 padding-left: 0; 1317 display: inline-flex; 1318 1319 ._mikiop-shadows; 1320 1321 .mikiop-step { 1322 position: relative; 1323 display: flex; 1324 align-items: center; 1325 padding: 1em 2em; 1326 border-width: 1px 0 1px 1px; 1327 border-style: solid; 1328 border-color: #dee2e6; 1329 border-radius: 0.25em; 1330 margin-left: 0; 1331 color: #000; 1332 font-size: 0.9em; 1333 1334 ._mikiop-alert-types; 1335 1336 a { 1337 color: inherit; 1338 } 1339 1340 .mikiop-step-icon { 1341 margin-right: 0.5em; 1342 font-size: 2em; 1343 } 1344 1345 .mikiop-step-title { 1346 font-size: 1.25em; 1347 font-weight: 500; 1348 } 1349 1350 &.mikiop-complete { 1351 background-color: #f8f8f8; 1352 1353 &:after { 1354 background-color: inherit; 1355 } 1356 } 1357 1358 &:after { 1359 position: absolute; 1360 content: ''; 1361 z-index: 2; 1362 border-width: 0 1px 1px 0; 1363 border-style: solid; 1364 border-color: #dee2e6; 1365 background-color: #fff; 1366 top: 50%; 1367 right: 0; 1368 width: 16px; 1369 height: 16px; 1370 transform: translateY(-50%) translateX(50%) rotate(-45deg); 1371 } 1372 1373 &:not(:first-of-type) { 1374 border-top-left-radius: 0; 1375 border-bottom-left-radius: 0; 1376 } 1377 1378 &:not(:last-of-type) { 1379 border-top-right-radius: 0; 1380 border-bottom-right-radius: 0; 1381 } 1382 1383 &:last-of-type { 1384 border-right-width: 1px; 1385 } 1386 1387 &:last-of-type:after { 1388 display: none; 1389 } 1390 1391 p { 1392 margin-bottom: 0; 1393 } 1394 } 1395 } 1396 1397 .mikiop-tab-group { 1398 .display-flex; 1399 .flex-wrap(wrap); 1400 margin-bottom: 0; 1401 list-style: none; 1402 1403 background-color: rgba(0, 0, 0, 0.03); 1404 border: 1px solid #dee2e6; 1405 border-top-left-radius: 0.25em; 1406 border-top-right-radius: 0.25em; 1407 padding-left: 1em; 1408 padding-top: 0.5em; 1409 1410 .mikiop-tab-item { 1411 margin-left: 0; 1412 1413 a { 1414 color: #007bff; 1415 text-decoration: none; 1416 border: 1px solid transparent; 1417 border-top-left-radius: 0.25em; 1418 border-top-right-radius: 0.25em; 1419 margin-bottom: -1px; 1420 display: block; 1421 padding: 0.5em 1em; 1422 transition: all 0.15s ease-in-out; 1423 1424 &:not(.mikiop-active):hover { 1425 border-color: #e9ecef #e9ecef #dee2e6; 1426 color: #0056b3; 1427 } 1428 1429 &.mikiop-active { 1430 border-color: #dee2e6 #dee2e6 #fff; 1431 background-color: #fff; 1432 color: #495057; 1433 } 1434 } 1435 1436 &.mikiop-disabled { 1437 a { 1438 color: #6c757d; 1439 } 1440 1441 pointer-events: none; 1442 } 1443 } 1444 1445 &.mikiop-pills { 1446 padding-bottom: 0.5em; 1447 1448 .mikiop-tab-item { 1449 a { 1450 ._mikiop-button; 1451 margin-right: 0.5em; 1452 1453 &.mikiop-active { 1454 ._mikiop-btn-type('primary'); 1455 } 1456 1457 &:not(.mikiop-active):hover { 1458 border-color: transparent; 1459 } 1460 } 1461 } 1462 } 1463 } 1464 1465 .mikiop-tab-content { 1466 border-width: 0 1px 1px 1px; 1467 border-style: solid; 1468 border-color: #dee2e6; 1469 border-bottom-left-radius: 0.25em; 1470 border-bottom-right-radius: 0.25em; 1471 padding: 0.5em 1em; 1472 margin-bottom: 1em; 1473 1474 .mikiop-tab-pane { 1475 display: none; 1476 1477 &.mikiop-show { 1478 display: block; 1479 } 1480 } 1481 } 1482 1483 .mikiop-quiz { 1484 border: 1px solid rgba(0, 0, 0, 0.125); 1485 border-radius: 0.25em; 1486 margin-bottom: 2em; 1487 1488 .mikiop-quiz-item { 1489 } 1490 1491 .mikiop-quiz-button-prev { 1492 ._mikiop-btn-type('secondary'); 1493 } 1494 1495 .mikiop-quiz-button-next { 1496 ._mikiop-btn-type('secondary'); 1497 } 1498 1499 .mikiop-quiz-button-submit { 1500 ._mikiop-btn-type('outline-secondary'); 1501 } 1502 1503 .mikiop-quiz-question { 1504 font-weight: 500; 1505 font-size: 1.25em; 1506 padding: 1.25em 0.75em 0 1.25em; 1507 } 1508 1509 p { 1510 padding: 0 1.5em; 1511 margin-bottom: 0; 1512 } 1513 1514 .mikiop-quiz-options { 1515 padding: 0.75em 1.25em; 1516 margin-bottom: 0.5em; 1517 } 1518 1519 .mikiop-quiz-result { 1520 margin-bottom: 1em; 1521 } 1522 1523 .mikiop-quiz-option { 1524 input { 1525 margin: 0 0.5em; 1526 } 1527 } 1528 1529 .mikiop-quiz-status { 1530 padding: 0.75em 1.25em; 1531 background-color: rgba(0, 0, 0, 0.03); 1532 border-top: 1px solid rgba(0, 0, 0, 0.125); 1533 color: #6c757d; 1534 1535 button { 1536 margin-left: 1em; 1537 } 1538 } 1539 } 1540} 1541 1542._mikiop-custom-type(@type) { 1543 #dokuwiki__content { 1544 .mikiop-button { 1545 &.mikiop-type-@{type} { 1546 ._mikiop-btn-type('@{type}'); 1547 } 1548 } 1549 1550 .mikiop-badge, 1551 .mikiop-box, 1552 .mikiop-card, 1553 .mikiop-progress-bar { 1554 &.mikiop-type-@{type} { 1555 ._mikiop-block-type('@{type}'); 1556 } 1557 } 1558 1559 .mikiop-accordian-item, 1560 .mikiop-alert, 1561 .mikiop-list-group, 1562 .mikiop-step { 1563 &.mikiop-type-@{type} { 1564 ._mikiop-block-type('@{type}', 'alert'); 1565 } 1566 } 1567 1568 .mikiop-list-group-item { 1569 &.mikiop-type-@{type} { 1570 .mikiop-list-group-item-link:hover { 1571 background-color: inherit; 1572 } 1573 } 1574 } 1575 } 1576} 1577 1578@media (max-width: 768px) { 1579 #dokuwiki__content { 1580 .mikiop-row { 1581 .flex-wrap(wrap); 1582 } 1583 1584 .mikiop-col { 1585 .flex(0 0 100%); 1586 padding: 0; 1587 } 1588 1589 .mikiop-grid { 1590 .display-flex; 1591 .flex-direction(column); 1592 } 1593 } 1594} 1595