.main-slider { position: relative; top: 50px; width: 100%; height: calc(100vh - 50px); // @include grid_2x(300px, 1fr); &.no-top { top: 0; } .col-1 { position: relative; width: 100%; height: 100%; overflow: hidden; // @include column_n(1); } .col-2 { position: relative; // @include column_n(2); } } .main-slider-form { position: relative; top: 0; width: 100%; height: calc(100vh - 50px); background-color: #fff; .col-1 { position: relative; width: 100%; } .col-2 { position: relative; width: 100%; } .m-s-f-place { position: absolute; top: 0; left: 0; width: calc(100%); min-width: 500px; height: calc(100vh - 50px); } .m-s-f-side { height: calc(100vh - 50px); } } .Resizer { background: rgba(0,0,0,0.34); opacity: .2; z-index: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; } .Resizer:hover { -webkit-transition: all 1s ease; transition: all 1s ease; } .Resizer.horizontal { height: 11px; margin: -5px 0; border-top: 5px solid rgba(255, 255, 255, 0); border-bottom: 5px solid rgba(255, 255, 255, 0); cursor: row-resize; width: 100%; } .Resizer.horizontal:hover { border-top: 5px solid rgba($color: $green, $alpha: 0.84); border-bottom: 5px solid rgba($color: $green, $alpha: 0.84); background-color: $green; } .Resizer.vertical { width: 11px; margin: 0 -5px; border-left: 5px solid rgba(255, 255, 255, 0); border-right: 5px solid rgba(255, 255, 255, 0); cursor: col-resize; } .Resizer.vertical:hover { border-left: 5px solid rgba($color: $green, $alpha: 0.84); border-right: 5px solid rgba($color: $green, $alpha: 0.84); background-color: $green; } .Resizer.disabled { cursor: not-allowed; } .Resizer.disabled:hover { border-color: transparent; }