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