@icij/murmur-next 4.0.0

package/lib/assets/images/icij.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 200 200"
+   version="1.1"
+   id="svg8"
+   sodipodi:docname="icij.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   width="200"
+   height="200"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="2.5420489"
+     inkscape:cx="78.676693"
+     inkscape:cy="100.11609"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     d="M 128.421,200 H 71.579 l 28.42,-46.427 z"
+     fill="#ff0000"
+     id="path2" />
+  <path
+     d="M 146.195,19.138 C 133.856,6.793 117.452,0 100,0 82.548,0 66.143,6.793 53.804,19.138 41.459,31.477 34.666,47.882 34.666,65.334 c 0,17.451 6.793,33.856 19.138,46.195 12.339,12.339 28.744,19.138 46.196,19.138 17.452,0 33.856,-6.793 46.195,-19.138 12.339,-12.339 19.139,-28.744 19.139,-46.195 0,-17.452 -6.793,-33.857 -19.138,-46.196 z m 3.397,23.028 a 54.35,54.35 0 0 1 4.863,17.86 h -19.241 c -0.262,-6.173 -0.968,-12.175 -2.094,-17.86 h 16.478 z M 138.69,26.65 a 54.792,54.792 0 0 1 4.346,4.894 H 130.404 C 129.15,27.605 127.671,23.91 125.973,20.52 a 61.475,61.475 0 0 0 -2.6,-4.681 c 5.619,2.654 10.793,6.288 15.316,10.81 z m -14.11,33.376 h -19.266 v -17.86 h 16.965 c 1.241,5.6 2.02,11.614 2.3,17.86 z m -8.109,-34.758 a 63.605,63.605 0 0 1 2.71,6.276 h -13.867 v -19.48 c 4.03,2.174 7.92,6.721 11.157,13.204 z m -32.943,0 c 3.238,-6.477 7.134,-11.03 11.158,-13.203 V 31.538 H 80.819 a 62.794,62.794 0 0 1 2.709,-6.276 z m 11.158,16.898 v 17.86 H 75.42 c 0.286,-6.246 1.065,-12.26 2.3,-17.86 z M 61.31,26.65 a 54.905,54.905 0 0 1 15.314,-10.817 59.443,59.443 0 0 0 -2.6,4.68 c -1.698,3.391 -3.177,7.086 -4.43,11.025 H 56.962 a 55.764,55.764 0 0 1 4.347,-4.894 z m 5.57,15.516 c -1.127,5.685 -1.833,11.687 -2.095,17.86 H 45.544 a 54.201,54.201 0 0 1 4.863,-17.86 H 66.885 Z M 50.4,88.507 a 54.35,54.35 0 0 1 -4.863,-17.86 h 19.241 c 0.262,6.173 0.968,12.181 2.094,17.86 H 50.395 Z m 10.902,15.517 A 54.793,54.793 0 0 1 56.956,99.13 h 12.631 c 1.254,3.938 2.733,7.633 4.432,11.023 a 61.476,61.476 0 0 0 2.599,4.681 54.569,54.569 0 0 1 -15.316,-10.816 z m 14.11,-33.376 h 19.266 v 17.86 H 77.714 c -1.241,-5.6 -2.02,-11.615 -2.3,-17.86 z m 8.109,34.757 a 63.605,63.605 0 0 1 -2.71,-6.275 h 13.867 v 19.472 c -4.03,-2.173 -7.919,-6.72 -11.157,-13.203 z m 32.943,0 c -3.238,6.477 -7.134,11.03 -11.157,13.203 V 99.136 h 13.867 a 62.793,62.793 0 0 1 -2.709,6.275 z M 105.308,88.507 v -17.86 h 19.265 c -0.286,6.246 -1.065,12.26 -2.3,17.86 z m 33.376,15.517 a 54.759,54.759 0 0 1 -15.316,10.81 59.444,59.444 0 0 0 2.6,-4.68 c 1.698,-3.391 3.177,-7.086 4.43,-11.024 h 12.632 a 55.763,55.763 0 0 1 -4.346,4.894 z m -5.57,-15.517 c 1.126,-5.685 1.832,-11.687 2.094,-17.86 h 19.241 a 54.201,54.201 0 0 1 -4.863,17.86 h -16.478 z"
+     fill="#ff0000"
+     id="path4" />
+  <path
+     d="m 173.5755,136.809 v 10.622 H 26.4245 v -10.622 z"
+     fill="#999999"
+     id="path6" />
+</svg>

package/lib/assets/images/murmur-dark.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="6.5cm"
+   height="6.5cm"
+   viewBox="0 0 230.31496 230.31496"
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="murmur-dark.svg"
+   inkscape:export-filename="/home/pirhoo/Repositories/murmur/lib/assets/images/murmur-dark.png"
+   inkscape:export-xdpi="61.740002"
+   inkscape:export-ydpi="61.740002"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.28"
+     inkscape:cx="-44.140625"
+     inkscape:cy="38.671875"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     showguides="false"
+     units="cm"
+     inkscape:pagecheckerboard="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-191.429,-339.19011)">
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke:#ff0000;stroke-width:9.58388;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="rect4134"
+       width="220.73062"
+       height="220.73108"
+       x="196.22095"
+       y="343.98206" />
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1"
+       d="m 237.92577,454.34732 0,-76.35162 8.52678,0.07 c 9.10353,0.0747 9.26344,0.0899 10.51115,0.99988 0.49114,0.35818 7.2236,9.66209 23.01564,31.8064 12.27678,17.21506 22.86665,32.1941 23.53305,33.28675 0.66639,1.09265 1.69404,2.93083 2.28367,4.08485 0.58963,1.15402 1.10315,2.09821 1.14115,2.09821 0.038,0 0.66585,-1.15415 1.39522,-2.56477 0.72937,-1.41063 1.93557,-3.47983 2.68044,-4.59822 0.74488,-1.11839 11.10848,-15.93522 23.03024,-32.92629 24.05311,-34.28088 22.07776,-31.69793 24.50765,-32.04601 0.6875,-0.0985 4.72545,-0.18065 8.97322,-0.1826 l 7.72321,-0.003 0,76.33929 0,76.33929 -8.2139,0 -8.21389,0 -0.045,-40.1863 -0.045,-40.18629 -18.21213,26.12379 c -10.01668,14.36809 -20.04581,28.74886 -22.28696,31.95727 -4.45969,6.38445 -4.76669,6.71091 -7.00091,7.44457 -1.40613,0.46174 -4.20262,0.63824 -6.42399,0.40546 -2.17036,-0.22744 -3.92961,-1.00335 -5.02396,-2.2158 -0.38226,-0.42348 -10.73961,-14.95799 -23.0164,-32.29896 l -22.32143,-31.52903 -0.045,40.24262 -0.045,40.24263 -8.21389,0 -8.2139,0 z m 70.20014,43.98714 c 0.60267,-1.20224 1.51427,-2.86965 2.02579,-3.70535 1.13637,-1.85658 45.22599,-64.16589 45.60469,-65.06219 3.34347,-7.91315 3.02854,-8.03454 3.08181,-14.49782 0.0599,-7.2652 0.17013,-13.69159 0.24501,-14.28088 0.12125,-0.95416 0.1067,-1.04211 -0.13288,-0.80357 -0.14796,0.14732 -10.17437,14.49107 -22.28091,31.875 -12.10653,17.38393 -22.26091,31.87344 -22.56527,32.19891 -0.69245,0.74048 -2.74661,1.7625 -4.01526,1.99773 -0.52903,0.0981 -1.97546,0.17717 -3.21429,0.17572 -3.56338,-0.004 -5.42965,-0.60642 -7.0016,-2.25942 -0.45134,-0.47462 -10.49161,-14.52365 -22.3117,-31.22008 -11.82009,-16.69643 -21.96537,-31.02562 -22.54506,-31.84265 -0.5797,-0.81702 -1.08846,-1.45104 -1.13057,-1.40892 -0.0421,0.0421 0.0201,0.79094 0.13827,1.66407 0.14101,1.04198 0.25003,5.9733 0.31726,14.35051 0.36485,7.96234 -0.51696,8.44823 3.16512,14.14139 9.64754,14.91684 21.23483,29.61884 31.73611,44.3456 7.07365,9.91964 13.30733,18.7264 13.85262,19.57058 0.54528,0.84418 1.63428,2.75016 2.42,4.2355 0.78571,1.48535 1.44804,2.70314 1.47184,2.7062 0.0238,0.003 0.53636,-0.97808 1.13902,-2.18033 z"
+       id="path4144"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccssssssssssscccccccsssscsccccccssscscssccssscscscsscs" />
+  </g>
+</svg>

package/lib/assets/images/murmur-white.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="65mm"
+   height="65mm"
+   viewBox="0 0 230.31496 230.31496"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="murmur-white.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#001226"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4142136"
+     inkscape:cx="349.43683"
+     inkscape:cy="-5.0091574"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     showguides="false" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-191.429,-339.19011)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1"
+       d="m 237.92577,454.34732 0,-76.35162 8.52678,0.07 c 9.10353,0.0747 9.26344,0.0899 10.51115,0.99988 0.49114,0.35818 7.2236,9.66209 23.01564,31.8064 12.27678,17.21506 22.86665,32.1941 23.53305,33.28675 0.66639,1.09265 1.69404,2.93083 2.28367,4.08485 0.58963,1.15402 1.10315,2.09821 1.14115,2.09821 0.038,0 0.66585,-1.15415 1.39522,-2.56477 0.72937,-1.41063 1.93557,-3.47983 2.68044,-4.59822 0.74488,-1.11839 11.10848,-15.93522 23.03024,-32.92629 24.05311,-34.28088 22.07776,-31.69793 24.50765,-32.04601 0.6875,-0.0985 4.72545,-0.18065 8.97322,-0.1826 l 7.72321,-0.003 0,76.33929 0,76.33929 -8.2139,0 -8.21389,0 -0.045,-40.1863 -0.045,-40.18629 -18.21213,26.12379 c -10.01668,14.36809 -20.04581,28.74886 -22.28696,31.95727 -4.45969,6.38445 -4.76669,6.71091 -7.00091,7.44457 -1.40613,0.46174 -4.20262,0.63824 -6.42399,0.40546 -2.17036,-0.22744 -3.92961,-1.00335 -5.02396,-2.2158 -0.38226,-0.42348 -10.73961,-14.95799 -23.0164,-32.29896 l -22.32143,-31.52903 -0.045,40.24262 -0.045,40.24263 -8.21389,0 -8.2139,0 z m 70.20014,43.98714 c 0.60267,-1.20224 1.51427,-2.86965 2.02579,-3.70535 1.13637,-1.85658 45.22599,-64.16589 45.60469,-65.06219 3.34347,-7.91315 3.02854,-8.03454 3.08181,-14.49782 0.0599,-7.2652 0.17013,-13.69159 0.24501,-14.28088 0.12125,-0.95416 0.1067,-1.04211 -0.13288,-0.80357 -0.14796,0.14732 -10.17437,14.49107 -22.28091,31.875 -12.10653,17.38393 -22.26091,31.87344 -22.56527,32.19891 -0.69245,0.74048 -2.74661,1.7625 -4.01526,1.99773 -0.52903,0.0981 -1.97546,0.17717 -3.21429,0.17572 -3.56338,-0.004 -5.42965,-0.60642 -7.0016,-2.25942 -0.45134,-0.47462 -10.49161,-14.52365 -22.3117,-31.22008 -11.82009,-16.69643 -21.96537,-31.02562 -22.54506,-31.84265 -0.5797,-0.81702 -1.08846,-1.45104 -1.13057,-1.40892 -0.0421,0.0421 0.0201,0.79094 0.13827,1.66407 0.14101,1.04198 0.25003,5.9733 0.31726,14.35051 0.36485,7.96234 -0.51696,8.44823 3.16512,14.14139 9.64754,14.91684 21.23483,29.61884 31.73611,44.3456 7.07365,9.91964 13.30733,18.7264 13.85262,19.57058 0.54528,0.84418 1.63428,2.75016 2.42,4.2355 0.78571,1.48535 1.44804,2.70314 1.47184,2.7062 0.0238,0.003 0.53636,-0.97808 1.13902,-2.18033 z"
+       id="path4144"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccssssssssssscccccccsssscsccccccssscscssccssscscscsscs" />
+  </g>
+</svg>

package/lib/components/AccordionStep.vue

@@ -0,0 +1,128 @@
+<template>
+  <b-card
+      :class="{
+      'accordion-wrapper__content__step--active': isActive,
+      'accordion-wrapper__content__step--previous': isPrevious
+    }"
+      class="accordion-wrapper__content__step"
+      no-body
+  >
+    <h4 class="card-body accordion-wrapper__content__step__heading m-0">
+      <!-- @slot Title of the step -->
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </h4>
+    <b-collapse :visible="isActive">
+      <div class="accordion-wrapper__content__step__main card-body row g-0">
+        <!-- @slot Content of the step with props {isFirst:boolean, isLast:boolean, step:Step, nextStep:Function}-->
+        <slot name="content" v-bind="{ isFirst, isLast, step, previousStep, nextStep }">
+          {{ content }}
+        </slot>
+      </div>
+      <div class="card-footer">
+        <!-- @slot Previous step button with props {isFirst:boolean, isLast:boolean, step:Step, nextStep:Function} -->
+        <slot name="previousStepButton" v-bind="{ isFirst, isLast, step, previousStep }">
+          <b-button
+              v-if="!isFirst"
+              class="accordion-wrapper__content__step__back-button"
+              type="button"
+              variant="link"
+              @click="previousStep"
+          >
+            Back
+          </b-button>
+        </slot>
+        <!-- @slot Next step button with props {isFirst:boolean, isLast:boolean, step:Step, nextStep:Function} }-->
+        <slot name="nextStepButton" v-bind="{ isFirst, isLast, step, nextStep }">
+          <b-button
+              v-if="!isLast"
+              class="accordion-wrapper__content__step__continue-button"
+              type="button"
+              variant="primary"
+              @click="nextStep"
+          >
+            Continue
+          </b-button>
+        </slot>
+      </div>
+    </b-collapse>
+  </b-card>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, inject, PropType} from 'vue';
+import {AccordionKey} from '@/keys'
+import {Accordion, Step} from '@/types'
+
+export default defineComponent({
+  props: {
+    /**
+     * Step name
+     */
+    step: {type: [String, Object as () => Step, Symbol], required: true},
+    /**
+     * Title of the step card
+     */
+    title: {type: String, default: "Step"},
+
+    /**
+     * Content of the step card
+     */
+    content: {type: String, default: "Step"},
+    /**
+     * Force card expansion/collapse
+     */
+    active: {type: Boolean as PropType<boolean|undefined>, default: false},
+  },
+  emits: ['next-step', 'previous-step'],
+  setup(props: { step: Step, active: boolean|undefined }, {emit}: any) {
+
+    const accordion = inject<Accordion>(AccordionKey)
+    const isActive = computed(() => {
+      const fromAccordion = !!accordion?.isActiveStep(props.step);
+      const fromSelf = props.active !== undefined ? props.active : false;
+      return fromSelf || fromAccordion;
+    });
+
+    const isPrevious = computed(() => !!accordion?.isPreviousStep(props.step));
+    const isFirst = computed(() => !!accordion?.isFirstStep(props.step));
+    const isLast = computed(() => !!accordion?.isLastStep(props.step));
+
+
+    const nextStep = () => {
+      accordion?.emitAccordionNextStepEvent();
+      /**
+       * Fired when the nextStep function is called
+       * either by clicking on the next button or in the next step slot
+       * with the new value as parameter
+       * @event next-step
+       * @param Mixed New step value.
+       */
+      emit('next-step');
+    };
+
+    const previousStep = () => {
+      accordion?.emitAccordionPreviousStepEvent();
+      /**
+       * Fired when the previousStep function is called
+       * either by clicking on the previous button or in the previous step slot
+       * with the new value as parameter
+       * @event previous-step
+       * @param Mixed New step value.
+       */
+      emit('previous-step');
+    };
+    return {
+      isFirst,
+      isLast,
+      isActive,
+      isPrevious,
+      nextStep,
+      previousStep,
+      accordion
+    }
+  }
+})
+
+</script>

package/lib/components/AccordionWrapper.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="accordion-wrapper">
+    <div class="accordion-wrapper__content ms-5">
+      <!-- @slot Content with all the steps declarations -->
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {computed, PropType, provide, defineComponent} from 'vue';
+import { AccordionKey } from '@/keys';
+import {Accordion, Step} from '@/types';
+
+const STEP_CHANGE_EVENT: string = 'step-change';
+export default defineComponent({
+  props:{
+    step: {
+      type: [String, Symbol, Object as () => Step],
+      required: true,
+    },
+    steps: {
+      type: Array as PropType<Step[]>,
+      required: true,
+    },
+  },
+  emits:['step-change'],
+  setup(props,{emit}){
+
+    const emitAccordionNextStepEvent = () => {
+      emit('step-change', props.steps[activeStepIndex.value + 1] || props.step);
+    };
+
+    const emitAccordionPreviousStepEvent = () => {
+      emit('step-change', props.steps[activeStepIndex.value - 1] || props.step);
+    };
+
+    const activeStepIndex = computed(() => props.steps?.indexOf(props.step));
+
+    const isFirstStep = (step: Step): boolean => props.steps?.indexOf(step) === 0;
+    const isLastStep = (step: Step): boolean => props.steps?.indexOf(step) === props.steps?.length - 1;
+    const isActiveStep = (step: Step): boolean => props.step === step;
+    const isPreviousStep = (step: Step): boolean => props.steps?.indexOf(step) < activeStepIndex.value;
+
+
+    provide<Accordion>(AccordionKey, {
+      emitAccordionNextStepEvent,
+      emitAccordionPreviousStepEvent,
+      isActiveStep,
+      isPreviousStep,
+      isFirstStep,
+      isLastStep,
+      step: props.step,
+      steps: props.steps,
+    })
+    return {
+      emitAccordionNextStepEvent,
+      emitAccordionPreviousStepEvent,
+      isActiveStep,
+      isPreviousStep,
+      isFirstStep,
+      isLastStep
+    }
+  }
+})
+</script>
+
+
+<style lang="scss" scoped>
+@use 'sass:math';
+@import '../styles/variables.scss';
+
+.accordion-wrapper {
+  $step-bullet-size: 2rem;
+  $step-bullet-font-size: math.div($step-bullet-size, 2);
+
+  &__content {
+    counter-reset: step 0;
+    max-width: 550px;
+    &__step {
+      margin-bottom: $spacer;
+      position: relative;
+      opacity: $btn-disabled-opacity;
+      transition: $transition-base;
+
+      &--active,&--previous {
+        opacity: 1;
+      }
+
+      &__heading + .collapse > .card-body {
+        padding-top: 0;
+      }
+
+      &:before {
+        counter-increment: step;
+        content: counter(step);
+        z-index: 10;
+        line-height: $step-bullet-size;
+        height: $step-bullet-size;
+        width: $step-bullet-size;
+        text-align: center;
+        font-size: $step-bullet-font-size;
+        border-radius: 50%;
+        display: block;
+        color: white;
+        font-weight: bolder;
+        position: absolute;
+        right: calc(100% + #{$spacer});
+        top: $spacer * 1.25;
+        background: $text-muted;
+        transition: background $transition-base;
+      }
+
+      &--active:before,
+      &--previous:before {
+        background: $info;
+      }
+
+      &:not(:last-of-type):after {
+        content: '';
+        z-index: 0;
+        position: absolute;
+        top: $spacer * 1.25;
+        right: calc(100% + #{$spacer} + #{math.div($step-bullet-size, 2)});
+        transform: translateX(50%);
+        bottom: -4rem;
+        width: 3px;
+        background: transparent;
+        transition: background 400ms;
+      }
+
+      &--previous:not(:last-of-type):after {
+        background: $info;
+      }
+    }
+  }
+}
+</style>