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