76 lines
1.8 KiB
SCSS
Executable File
76 lines
1.8 KiB
SCSS
Executable File
/* 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);
|
|
}
|
|
}
|
|
} |