UI with Piperade Grid
This commit is contained in:
parent
ab35df6462
commit
19af7858fc
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,57 @@
|
|||
$col: 13;
|
||||
|
||||
.start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.v-center {
|
||||
align-items: center;
|
||||
}
|
||||
.row{
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
/*
|
||||
// ENABLE FOR DEV OR FOR DEMONSTRATION
|
||||
|
||||
.col{
|
||||
border: 3px solid red;
|
||||
}
|
||||
.row{
|
||||
border: 3px solid green;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
@for $i from 1 to $col {
|
||||
|
||||
.s#{$i} {
|
||||
width: calc(#{$i} * 8.334%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 600px) and (max-width: 992px) {
|
||||
@for $i from 1 to $col {
|
||||
|
||||
.m#{$i} {
|
||||
width: calc(#{$i} * 8.334%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 992px) {
|
||||
@for $i from 1 to $col {
|
||||
|
||||
.l#{$i} {
|
||||
width: calc(#{$i} * 8.334%);
|
||||
}
|
||||
}
|
||||
}
|
|
@ -14,7 +14,6 @@
|
|||
@import "components/global";
|
||||
@import "components/badges";
|
||||
@import "components/icons-material-design";
|
||||
@import "components/grid";
|
||||
@import "components/navbar";
|
||||
@import "components/typography";
|
||||
@import "components/transitions";
|
||||
|
@ -33,9 +32,3 @@
|
|||
@import "components/table_of_contents";
|
||||
@import "components/sidenav";
|
||||
@import "components/preloader";
|
||||
@import "components/slider";
|
||||
@import "components/carousel";
|
||||
@import "components/tapTarget";
|
||||
@import "components/pulse";
|
||||
@import "components/datepicker";
|
||||
@import "components/timepicker";
|
||||
|
|
Loading…
Reference in New Issue