Init

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

app/styles/plugins/_react-grid-layout.scss

@@ -0,0 +1,76 @@
+/* React Grid Layout Overrides */
+@import "./../variables.scss";
+
+.react-grid-layout {
+    margin: 0 (-$grid-gutter-width / 2);
+
+    .react-grid-item.react-grid-placeholder {
+        background: none;
+        z-index: 2;
+        transition-duration: 100ms;
+        user-select: none;
+        position: relative;
+        opacity: 0.7;
+
+        &:after {
+            position: absolute;
+            left: 50%;
+            top: 0;
+            transform: translate(-50%, 0);
+            content: " ";
+            background: rgba($primary, 0.3);
+            border-radius: 4px;
+            border: 2px dashed $primary;
+            height: calc(100% - #{$grid-gutter-width / 2});
+            width: calc(100% - #{$grid-gutter-width});
+        }
+    }
+}
+
+.float-column {
+    display: flex;
+    flex-direction: column;
+
+    > .card {
+        flex: 1 1 auto;
+        margin-bottom: $grid-gutter-width / 2;
+
+        + .react-resizable-handle {
+            bottom: $grid-gutter-width / 2;
+            right: $grid-gutter-width / 2;
+        }
+
+        > .card-header {
+            cursor: move;
+            user-select: none;
+            /*
+            &:before {
+                position: absolute;
+                font: normal normal normal 14px/1 FontAwesome;
+                content: "\f142";
+                top: 50%;
+                left: 1rem;
+                transform: translateY(-50%);
+                color: $text-muted;
+            }
+            */
+        }
+    }
+}
+
+// Internal Breakpoint System
+//=====================================
+.float-column {
+    // Reset column sizes
+    [class^="col-"] {
+        flex: 0 0 100%;
+        max-width: 100%;
+    }
+
+    &--size-lg {
+        .col-md-4 {
+            flex: 0 0 (100% / 3);
+            max-width: (100% / 3);
+        }
+    }
+}