Init

Preview: http://dashboards.webkom.co/react/airframe

app/styles/components/float-grid.scss

@@ -0,0 +1,28 @@
+@import './../variables.scss';
+@import '~bootstrap/scss/mixins/breakpoints';
+
+.float-grid-parent {
+    margin: 0 auto;
+    padding-left: $grid-gutter-width / 2;
+    padding-right: $grid-gutter-width / 2;
+
+    &.float-grid-parent__static {    
+        @media (min-width: breakpoint-min('sm', $grid-breakpoints)) {
+            width: map-get($container-max-widths, 'sm');
+        }
+        @media (min-width: breakpoint-min('md', $grid-breakpoints)) {
+            width: map-get($container-max-widths, 'md');
+        }
+        @media (min-width: breakpoint-min('lg', $grid-breakpoints)) {
+            width: map-get($container-max-widths, 'lg');
+        }
+        @media (min-width: breakpoint-min('xl', $grid-breakpoints)) {
+            width: map-get($container-max-widths, 'xl');
+        }
+    }
+}
+
+.float-col {
+    padding-left: $grid-gutter-width / 2;
+    padding-right: $grid-gutter-width / 2;
+}

app/styles/components/theme-selector.scss

@@ -0,0 +1,3 @@
+.theme-config__body .custom-control .custom-control-label {
+    display: block;
+}

app/styles/components/wizard.scss

@@ -0,0 +1,81 @@
+@import './../../styles/variables.scss';
+@import '~bootstrap/scss/mixins/breakpoints';
+
+.wizard {
+    display: flex;
+    align-items: center;
+}
+
+.wizard-step {
+    flex: 0 1 auto;
+    display: flex;
+    align-items: center;
+    text-decoration: none !important;
+    white-space: nowrap;
+
+    &--active {
+        .wizard-step__icon {
+            background: $primary;
+        }
+        .wizard-step__content {
+            color: $body-color;
+        }
+    }
+
+    &--disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+
+    &--complete {
+        .wizard-step__icon {
+            background: $success;
+        }
+    }
+
+    &__icon {
+        flex: 0 0 30px;
+        width: 30px;
+        height: 30px;
+        margin-right: 10px;
+        background: $gray-300;
+        border-radius: 50%;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        > * {
+            color: #fff;
+        }
+    }
+
+    &__content {
+        color: $text-muted;
+    }
+
+    + .wizard-step {
+        margin-left: 20px;
+    }
+}
+
+@media (max-width: breakpoint-max('md', $grid-breakpoints)) {
+    .wizard {
+        flex-wrap: wrap;
+    }
+
+    .wizard-step {
+        flex: 0 1 50%;
+        padding: 0.5rem;
+
+        + .wizard-step {
+            margin-left: 0;    
+        }
+    }
+}
+
+@media (max-width: breakpoint-max('xs', $grid-breakpoints)) {
+    .wizard-step {
+        flex-basis: 100%;
+    }
+}