/* 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); } } }