|
@import "mixin";
|
|
|
|
$row-height: 340px;
|
|
$row-margin: 10px;
|
|
|
|
.gridster ul{
|
|
padding-left: 0;
|
|
list-style: none;
|
|
max-width: 100%;
|
|
|
|
@media (min-width: 992px) {
|
|
@for $i from 1 through 12 {
|
|
[data-col="#{$i}"] {
|
|
left: #{percentage(($i - 1) / 12) + 1};
|
|
}
|
|
|
|
[data-sizex="#{$i}"] {
|
|
width: #{percentage($i / 12) - 1};
|
|
}
|
|
|
|
[data-sizey="#{$i}"] {
|
|
height: $row-height * $i + $row-margin * ($i - 1)
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 30 {
|
|
[data-row="#{$i}"]{
|
|
top: $row-height * ($i - 1) + ($i * 2 - 1) * $row-margin;
|
|
}
|
|
}
|
|
|
|
[data-col="1"]{
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
@media(max-width: 992px) {
|
|
.gs-w:not(.preview-holder) {
|
|
position: relative !important;
|
|
margin: $row-margin 0;
|
|
}
|
|
}
|
|
|
|
.preview-holder {
|
|
background-color: #00618a;
|
|
}
|
|
|
|
.gs-w {
|
|
padding: 19px;
|
|
border: 1px solid #e3e3e3;
|
|
background-color: rgba(255,255,255,0.5);
|
|
|
|
&:hover{
|
|
border: 1px solid #00618a;
|
|
}
|
|
}
|
|
}
|
