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-next { 931 right: 0; 932 } 933 934 svg { 935 fill: #fff; 936 stroke: #000; 937 stroke-width: 0.2px; 938 } 939 940 &:hover { 941 opacity: 1; 942 } 943 } 944 945 .mikiop-carousel-indicators { 946 position: absolute; 947 right: 0; 948 bottom: 0; 949 left: 0; 950 z-index: 15; 951 margin: 0.5em 0 0 0; 952 padding: 0; 953 .display-flex; 954 .justify-content(center); 955 list-style: none; 956 957 .mikiop-carousel-indicator { 958 width: 30px; 959 height: 3px; 960 margin: 1em 0.25em; 961 padding: 0; 962 background-color: #fff; 963 transition: all 0.6s ease; 964 opacity: 0.5; 965 966 &.mikiop-active { 967 opacity: 1; 968 } 969 } 970 971 &.mikiop-carousel-indicators-circle { 972 .mikiop-carousel-indicator { 973 border: 1px solid #fff; 974 border-radius: 50%; 975 width: 10px; 976 height: 10px; 977 } 978 } 979 } 980 } 981 982 .mikiop-col { 983 .flex(1 0 0); 984 .display-flex; 985 .flex-direction(column); 986 .justify-content(space-between); 987 margin: 0; 988 box-sizing: border-box; 989 border-style: solid; 990 border-width: 0; 991 992 &.mikiop-col-1 { 993 ._mikiop-col(8.333333%); 994 } 995 &.mikiop-col-2 { 996 ._mikiop-col(16.666667%); 997 } 998 &.mikiop-col-3 { 999 ._mikiop-col(25%); 1000 } 1001 &.mikiop-col-4 { 1002 ._mikiop-col(33.333333%); 1003 } 1004 &.mikiop-col-5 { 1005 ._mikiop-col(41.666667%); 1006 } 1007 &.mikiop-col-6 { 1008 ._mikiop-col(50%); 1009 } 1010 &.mikiop-col-7 { 1011 ._mikiop-col(58.333333%); 1012 } 1013 &.mikiop-col-8 { 1014 ._mikiop-col(66.666667%); 1015 } 1016 &.mikiop-col-9 { 1017 ._mikiop-col(75%); 1018 } 1019 &.mikiop-col-10 { 1020 ._mikiop-col(83.333333%); 1021 } 1022 &.mikiop-col-11 { 1023 ._mikiop-col(91.666667%); 1024 } 1025 &.mikiop-col-12 { 1026 ._mikiop-col(100%); 1027 } 1028 1029 &:first-child { 1030 padding-left: 0; 1031 } 1032 1033 &:last-child { 1034 padding-right: 0; 1035 } 1036 1037 .mikiop-card { 1038 margin-bottom: 0; 1039 } 1040 1041 &.mikiop-col-full { 1042 .flex(0 0 100%); 1043 } 1044 } 1045 1046 .mikiop-grid { 1047 display: grid; 1048 box-sizing: border-box; 1049 1050 .mikiop-box { 1051 margin: 0; 1052 } 1053 } 1054 1055 .mikiop-heading { 1056 margin-top: 0; 1057 margin-bottom: 0.5em; 1058 } 1059 1060 .mikiop-hr { 1061 border-bottom: 1px solid rgba(255, 255, 255, 0.1); 1062 border-top: 1px solid rgba(0, 0, 0, 0.1); 1063 } 1064 1065 .mikiop-list-group { 1066 .display-flex; 1067 .flex-direction(column); 1068 1069 list-style: none; 1070 border-radius: 0.25em; 1071 padding-left: 0; 1072 1073 ._mikiop-shadows; 1074 1075 .mikiop-list-group-item { 1076 .display-flex; 1077 .align-items(center); 1078 .justify-content(space-between); 1079 1080 color: inherit; 1081 padding: 0.75rem 1.25rem; 1082 margin: 0; 1083 border: 1px solid rgba(0, 0, 0, 0.125); 1084 box-sizing: border-box; 1085 1086 ._mikiop-alert-types; 1087 1088 &.mikiop-content-vertical { 1089 .flex-direction(column); 1090 .align-items(flex-start); 1091 ._mikiop-flex-text-align; 1092 } 1093 1094 & + .mikiop-list-group-item { 1095 border-top-width: 0; 1096 } 1097 1098 &:first-child { 1099 border-top-left-radius: 0.25em; 1100 border-top-right-radius: 0.25em; 1101 } 1102 1103 &:last-child { 1104 border-bottom-left-radius: 0.25em; 1105 border-bottom-right-radius: 0.25em; 1106 } 1107 1108 &.mikiop-active { 1109 ._mikiop-block-type('primary'); 1110 } 1111 1112 &.mikiop-disabled { 1113 color: #6c757d; 1114 pointer-events: none; 1115 } 1116 1117 .mikiop-list-group-item-link { 1118 display: block; 1119 width: 100%; 1120 color: inherit; 1121 text-decoration: none; 1122 padding: 0.75rem 1.25rem; 1123 margin: -0.75rem -1.25rem; 1124 1125 &:hover { 1126 background-color: #f8f9fa; 1127 } 1128 } 1129 1130 &.mikiop-active, 1131 &.mikiop-type-primary, 1132 &.mikiop-type-secondary, 1133 &.mikiop-type-success, 1134 &.mikiop-type-warning, 1135 &.mikiop-type-danger, 1136 &.mikiop-type-light, 1137 &.mikiop-type-dark { 1138 .mikiop-list-group-item-link:hover { 1139 background-color: inherit; 1140 } 1141 } 1142 1143 p:last-child { 1144 margin-bottom: 0; 1145 } 1146 } 1147 1148 &.mikiop-flush { 1149 margin-bottom: 0; 1150 1151 .mikiop-list-group-item { 1152 border-left-width: 0; 1153 border-right-width: 0; 1154 1155 &:first-child { 1156 border-top-width: 0; 1157 } 1158 1159 &:last-child { 1160 border-bottom-width: 0; 1161 } 1162 } 1163 } 1164 1165 &.mikiop-horizontal { 1166 .flex-direction(row); 1167 1168 .mikiop-list-group-item { 1169 & + .mikiop-list-group-item { 1170 border-top-width: 1px; 1171 border-left-width: 0; 1172 } 1173 1174 &:first-child { 1175 border-top-left-radius: 0.25em; 1176 border-top-right-radius: 0; 1177 border-bottom-left-radius: 0.25em; 1178 } 1179 1180 &:last-child { 1181 border-top-left-radius: 0; 1182 border-top-right-radius: 0.25em; 1183 border-bottom-right-radius: 0.25em; 1184 } 1185 } 1186 } 1187 } 1188 1189 .mikiop-pagenation { 1190 text-align: center; 1191 1192 .mikiop-pagenation-inner { 1193 display: inline-block; 1194 list-style: none; 1195 padding-left: 0; 1196 1197 .mikiop-pagenation-item { 1198 display: inline-block; 1199 padding: 0; 1200 border: 1px solid #dee2e6; 1201 border-radius: 0.25em; 1202 1203 a { 1204 padding: 0.5em 0.75em; 1205 color: #007bff; 1206 text-decoration: none; 1207 display: block; 1208 1209 &:hover { 1210 text-decoration: none; 1211 background-color: #e9ecef; 1212 } 1213 } 1214 1215 &:not(:last-child) { 1216 border-right-width: 0; 1217 border-bottom-right-radius: 0; 1218 border-top-right-radius: 0; 1219 } 1220 1221 &:not(:first-child) { 1222 border-bottom-left-radius: 0; 1223 border-top-left-radius: 0; 1224 } 1225 1226 &.mikiop-active { 1227 a { 1228 background-color: #007bff; 1229 color: #fff; 1230 } 1231 } 1232 1233 &.mikiop-disabled { 1234 a { 1235 pointer-events: none; 1236 color: #6c757d; 1237 } 1238 } 1239 } 1240 } 1241 } 1242 1243 .mikiop-placeholder { 1244 display: flex; 1245 1246 svg { 1247 width: 100%; 1248 height: 100%; 1249 } 1250 } 1251 1252 .mikiop-progress { 1253 .display-flex; 1254 overflow: hidden; 1255 line-height: 0; 1256 font-size: 0.75em; 1257 background-color: #e9ecef; 1258 border-radius: 0.25em; 1259 margin-bottom: 1em; 1260 } 1261 1262 .mikiop-progress-bar { 1263 .display-flex; 1264 .flex-direction(column); 1265 .justify-content(center); 1266 text-align: center; 1267 overflow: hidden; 1268 white-space: no-wrap; 1269 ._mikiop-block-types; 1270 transition: all 0.6s ease; 1271 1272 &.mikiop-striped { 1273 background-image: linear-gradient( 1274 45deg, 1275 rgba(255, 255, 255, 0.15) 25%, 1276 transparent 25%, 1277 transparent 50%, 1278 rgba(255, 255, 255, 0.15) 50%, 1279 rgba(255, 255, 255, 0.15) 75%, 1280 transparent 75%, 1281 transparent 1282 ); 1283 background-size: 1em 1em; 1284 } 1285 1286 &.mikiop-animated { 1287 .animation(progress-bar-stripes 1s linear infinite); 1288 } 1289 } 1290 1291 .mikiop-row { 1292 .display-flex; 1293 1294 margin: 0; 1295 border-style: solid; 1296 border-width: 0; 1297 1298 &:first-child { 1299 padding-top: 0; 1300 } 1301 1302 &:last-child { 1303 padding-bottom: 0; 1304 margin-bottom: 2em; 1305 } 1306 1307 .mikiop-row { 1308 margin-bottom: 0; 1309 } 1310 } 1311 1312 .mikiop-statistic { 1313 font-size: 4em; 1314 text-align: center; 1315 display: inline-block; 1316 margin: 0 0.25em; 1317 1318 .mikiop-statistic-title { 1319 font-size: 0.3em; 1320 line-height: 0.3em; 1321 } 1322 } 1323 1324 .mikiop-steps { 1325 list-style: none; 1326 padding-left: 0; 1327 display: inline-flex; 1328 1329 ._mikiop-shadows; 1330 1331 .mikiop-step { 1332 position: relative; 1333 display: flex; 1334 align-items: center; 1335 padding: 1em 2em; 1336 border-width: 1px 0 1px 1px; 1337 border-style: solid; 1338 border-color: #dee2e6; 1339 border-radius: 0.25em; 1340 margin-left: 0; 1341 color: #000; 1342 font-size: 0.9em; 1343 1344 ._mikiop-alert-types; 1345 1346 a { 1347 color: inherit; 1348 } 1349 1350 .mikiop-step-icon { 1351 margin-right: 0.5em; 1352 font-size: 2em; 1353 } 1354 1355 .mikiop-step-title { 1356 font-size: 1.25em; 1357 font-weight: 500; 1358 } 1359 1360 &.mikiop-complete { 1361 background-color: #f8f8f8; 1362 1363 &:after { 1364 background-color: inherit; 1365 } 1366 } 1367 1368 &:after { 1369 position: absolute; 1370 content: ''; 1371 z-index: 2; 1372 border-width: 0 1px 1px 0; 1373 border-style: solid; 1374 border-color: #dee2e6; 1375 background-color: #fff; 1376 top: 50%; 1377 right: 0; 1378 width: 16px; 1379 height: 16px; 1380 transform: translateY(-50%) translateX(50%) rotate(-45deg); 1381 } 1382 1383 &:not(:first-of-type) { 1384 border-top-left-radius: 0; 1385 border-bottom-left-radius: 0; 1386 } 1387 1388 &:not(:last-of-type) { 1389 border-top-right-radius: 0; 1390 border-bottom-right-radius: 0; 1391 } 1392 1393 &:last-of-type { 1394 border-right-width: 1px; 1395 } 1396 1397 &:last-of-type:after { 1398 display: none; 1399 } 1400 1401 p { 1402 margin-bottom: 0; 1403 } 1404 } 1405 } 1406 1407 .mikiop-tab-group { 1408 .display-flex; 1409 .flex-wrap(wrap); 1410 margin-bottom: 0; 1411 list-style: none; 1412 1413 background-color: rgba(0, 0, 0, 0.03); 1414 border: 1px solid #dee2e6; 1415 border-top-left-radius: 0.25em; 1416 border-top-right-radius: 0.25em; 1417 padding-left: 1em; 1418 padding-top: 0.5em; 1419 1420 .mikiop-tab-item { 1421 margin-left: 0; 1422 1423 a { 1424 color: #007bff; 1425 text-decoration: none; 1426 border: 1px solid transparent; 1427 border-top-left-radius: 0.25em; 1428 border-top-right-radius: 0.25em; 1429 margin-bottom: -1px; 1430 display: block; 1431 padding: 0.5em 1em; 1432 transition: all 0.15s ease-in-out; 1433 1434 &:not(.mikiop-active):hover { 1435 border-color: #e9ecef #e9ecef #dee2e6; 1436 color: #0056b3; 1437 } 1438 1439 &.mikiop-active { 1440 border-color: #dee2e6 #dee2e6 #fff; 1441 background-color: #fff; 1442 color: #495057; 1443 } 1444 } 1445 1446 &.mikiop-disabled { 1447 a { 1448 color: #6c757d; 1449 } 1450 1451 pointer-events: none; 1452 } 1453 } 1454 1455 &.mikiop-pills { 1456 padding-bottom: 0.5em; 1457 1458 .mikiop-tab-item { 1459 a { 1460 ._mikiop-button; 1461 margin-right: 0.5em; 1462 1463 &.mikiop-active { 1464 ._mikiop-btn-type('primary'); 1465 } 1466 1467 &:not(.mikiop-active):hover { 1468 border-color: transparent; 1469 } 1470 } 1471 } 1472 } 1473 } 1474 1475 .mikiop-tab-content { 1476 border-width: 0 1px 1px 1px; 1477 border-style: solid; 1478 border-color: #dee2e6; 1479 border-bottom-left-radius: 0.25em; 1480 border-bottom-right-radius: 0.25em; 1481 padding: 0.5em 1em; 1482 margin-bottom: 1em; 1483 1484 .mikiop-tab-pane { 1485 display: none; 1486 1487 &.mikiop-show { 1488 display: block; 1489 } 1490 } 1491 } 1492 1493 .mikiop-quiz { 1494 border: 1px solid rgba(0, 0, 0, 0.125); 1495 border-radius: 0.25em; 1496 margin-bottom: 2em; 1497 1498 .mikiop-quiz-item { 1499 } 1500 1501 .mikiop-quiz-button-prev { 1502 ._mikiop-btn-type('secondary'); 1503 } 1504 1505 .mikiop-quiz-button-next { 1506 ._mikiop-btn-type('secondary'); 1507 } 1508 1509 .mikiop-quiz-button-submit { 1510 ._mikiop-btn-type('outline-secondary'); 1511 } 1512 1513 .mikiop-quiz-question { 1514 font-weight: 500; 1515 font-size: 1.25em; 1516 padding: 1.25em 0.75em 0 1.25em; 1517 } 1518 1519 p { 1520 padding: 0 1.5em; 1521 margin-bottom: 0; 1522 } 1523 1524 .mikiop-quiz-options { 1525 padding: 0.75em 1.25em; 1526 margin-bottom: 0.5em; 1527 } 1528 1529 .mikiop-quiz-result { 1530 margin-bottom: 1em; 1531 } 1532 1533 .mikiop-quiz-option { 1534 input { 1535 margin: 0 0.5em; 1536 } 1537 } 1538 1539 .mikiop-quiz-status { 1540 padding: 0.75em 1.25em; 1541 background-color: rgba(0, 0, 0, 0.03); 1542 border-top: 1px solid rgba(0, 0, 0, 0.125); 1543 color: #6c757d; 1544 1545 button { 1546 margin-left: 1em; 1547 } 1548 } 1549 } 1550} 1551 1552._mikiop-custom-type(@type) { 1553 #dokuwiki__content { 1554 .mikiop-button { 1555 &.mikiop-type-@{type} { 1556 ._mikiop-btn-type('@{type}'); 1557 } 1558 } 1559 1560 .mikiop-badge, 1561 .mikiop-box, 1562 .mikiop-card, 1563 .mikiop-progress-bar { 1564 &.mikiop-type-@{type} { 1565 ._mikiop-block-type('@{type}'); 1566 } 1567 } 1568 1569 .mikiop-accordian-item, 1570 .mikiop-alert, 1571 .mikiop-list-group, 1572 .mikiop-step { 1573 &.mikiop-type-@{type} { 1574 ._mikiop-block-type('@{type}', 'alert'); 1575 } 1576 } 1577 1578 .mikiop-list-group-item { 1579 &.mikiop-type-@{type} { 1580 .mikiop-list-group-item-link:hover { 1581 background-color: inherit; 1582 } 1583 } 1584 } 1585 } 1586} 1587 1588@media (max-width: 768px) { 1589 #dokuwiki__content { 1590 .mikiop-row { 1591 .flex-wrap(wrap); 1592 } 1593 1594 .mikiop-col { 1595 .flex(0 0 100%); 1596 padding: 0; 1597 } 1598 1599 .mikiop-grid { 1600 .display-flex; 1601 .flex-direction(column); 1602 } 1603 } 1604} 1605