74 lines
1.3 KiB
SCSS
74 lines
1.3 KiB
SCSS
|
|
/* Horizontal & vertical */
|
|
|
|
html [vn-horizontal], vn-horizontal, .vn-horizontal,
|
|
html [vn-vertical], vn-vertical, .vn-vertical {
|
|
display: flex;
|
|
|
|
& > * {
|
|
flex: 1;
|
|
}
|
|
}
|
|
html [vn-horizontal], vn-horizontal, .vn-horizontal {
|
|
flex-direction: row;
|
|
}
|
|
html [vn-vertical], vn-vertical, .vn-vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
html [reverse] {
|
|
flex-direction: column-reverse;
|
|
}
|
|
html [wrap] {
|
|
flex-wrap: wrap;
|
|
}
|
|
html [wrap-reverse] {
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
/* Horizontal & vertical childs */
|
|
|
|
html [vn-auto], vn-auto, .vn-auto {
|
|
flex: initial;
|
|
}
|
|
html [vn-none], vn-none, .vn-none {
|
|
flex: 0 0 auto;
|
|
}
|
|
html [vn-one], vn-one, .vn-one {
|
|
flex: 1;
|
|
}
|
|
html [vn-two], vn-two, .vn-two {
|
|
flex: 2;
|
|
}
|
|
html [vn-three], vn-three, .vn-three {
|
|
flex: 3;
|
|
}
|
|
html [vn-four], vn-four, .vn-four {
|
|
flex: 4;
|
|
}
|
|
html [vn-five], vn-five, .vn-five {
|
|
flex: 5;
|
|
}
|
|
html [vn-six], vn-six, .vn-six {
|
|
flex: 6;
|
|
}
|
|
html [vn-seven], vn-seven, .vn-seven {
|
|
flex: 7;
|
|
}
|
|
html [vn-eight], vn-eight, .vn-eight {
|
|
flex: 8;
|
|
}
|
|
html [vn-nine], vn-nine, .vn-nine {
|
|
flex: 9;
|
|
}
|
|
html [vn-ten], vn-ten, .vn-ten {
|
|
flex: 10;
|
|
}
|
|
html [vn-eleven], vn-eleven, .vn-eleven {
|
|
flex: 11;
|
|
}
|
|
html [vn-twelve], vn-twelve, .vn-twelve {
|
|
flex: 12;
|
|
}
|
|
|