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