// Span mixin
@mixin grid-span( $i ) {
width: 8.333% * $i;
}
// Push mixin
@mixin grid-push( $i ) {
left: 8.333% * $i;
}
@mixin grid-push-rtl( $i ) {
left: auto;
right: 8.333% * $i;
}
// Pull mixin
@mixin grid-pull( $i ) {
left: - 8.333% * $i;
}
@mixin grid-pull-rtl( $i ) {
left: auto;
right: - 8.333% * $i;
}
/* Container */
.lsvr-container { margin: 0 auto; padding: 0 30px; width: 100%; max-width: 1400px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.lsvr-container .lsvr-container { padding: 0; }
/* Grid */
.lsvr-grid { position: relative; margin-left: -15px; margin-right: -15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.lsvr-grid:before,
.lsvr-grid:after { content: ''; display: table; clear: both; }
/* Grid column */
.lsvr-grid__col { position: relative; float: left; padding-left: 15px; padding-right: 15px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.rtl .lsvr-grid__col { float: right; }
.lsvr-grid--1-cols > .lsvr-grid__col:nth-child( 1n+1 ),
.lsvr-grid--2-cols > .lsvr-grid__col:nth-child( 2n+1 ),
.lsvr-grid--3-cols > .lsvr-grid__col:nth-child( 3n+1 ),
.lsvr-grid--4-cols > .lsvr-grid__col:nth-child( 4n+1 ) { clear: left; }
.rtl .lsvr-grid--1-cols > .lsvr-grid__col:nth-child( 1n+1 ),
.rtl .lsvr-grid--2-cols > .lsvr-grid__col:nth-child( 2n+1 ),
.rtl .lsvr-grid--3-cols > .lsvr-grid__col:nth-child( 3n+1 ),
.rtl .lsvr-grid--4-cols > .lsvr-grid__col:nth-child( 4n+1 ) { clear: right; }
/* Grid column span modifiers */
@for $i from 1 through 12 {
.lsvr-grid__col--span-#{$i} { @include grid-span( $i ); }
}
/* Grid column push modifiers */
@for $i from 1 through 12 {
.lsvr-grid__col--push-#{$i} { @include grid-push( $i ); }
}
@for $i from 1 through 12 {
.rtl .lsvr-grid__col--push-#{$i} { @include grid-push-rtl( $i ); }
}
/* Grid column pull modifiers */
@for $i from 1 through 12 {
.lsvr-grid__col--pull-#{$i} { @include grid-pull( $i ); }
}
@for $i from 1 through 12 {
.rtl .lsvr-grid__col--pull-#{$i} { @include grid-pull-rtl( $i ); }
}
/* Very large devices */
@media ( min-width: 1199px ) {
/* Grid column span modifiers */
@for $i from 1 through 12 {
.lsvr-grid__col--xlg-span-#{$i} { @include grid-span( $i ); }
}
/* Grid column push modifiers */
@for $i from 1 through 12 {
.lsvr-grid__col--xlg-push-#{$i} { @include grid-push( $i ); }
}
@for $i from 1 through 12 {
.rtl .lsvr-grid__col--xlg-push-#{$i} { @include grid-push-rtl( $i ); }
}
}
/* Default breakpoint */
@media ( max-width: 991px ) {
.lsvr-grid__col { float: none; }
.lsvr-grid__col--span-1,
.lsvr-grid__col--span-2,
.lsvr-grid__col--span-3,
.lsvr-grid__col--span-4,
.lsvr-grid__col--span-5,
.lsvr-grid__col--span-6,
.lsvr-grid__col--span-7,
.lsvr-grid__col--span-8,
.lsvr-grid__col--span-9,
.lsvr-grid__col--span-10,
.lsvr-grid__col--span-11,
.lsvr-grid__col--span-12 { width: 100%; }
.lsvr-grid--1-cols > .lsvr-grid__col:nth-child( 1n+1 ),
.lsvr-grid--2-cols > .lsvr-grid__col:nth-child( 2n+1 ),
.lsvr-grid--3-cols > .lsvr-grid__col:nth-child( 3n+1 ),
.lsvr-grid--4-cols > .lsvr-grid__col:nth-child( 4n+1 ) { clear: none; }
.lsvr-grid__col--push-1,
.lsvr-grid__col--push-2,
.lsvr-grid__col--push-3,
.lsvr-grid__col--push-4,
.lsvr-grid__col--push-5,
.lsvr-grid__col--push-6,
.lsvr-grid__col--push-7,
.lsvr-grid__col--push-8,
.lsvr-grid__col--push-9,
.lsvr-grid__col--push-10,
.lsvr-grid__col--push-11 { left: auto; right: auto; }
.lsvr-grid__col--pull-1,
.lsvr-grid__col--pull-2,
.lsvr-grid__col--pull-3,
.lsvr-grid__col--pull-4,
.lsvr-grid__col--pull-5,
.lsvr-grid__col--pull-6,
.lsvr-grid__col--pull-7,
.lsvr-grid__col--pull-8,
.lsvr-grid__col--pull-9,
.lsvr-grid__col--pull-10,
.lsvr-grid__col--pull-11 { left: auto; right: auto; }
.rtl .lsvr-grid__col--push-1,
.rtl .lsvr-grid__col--push-2,
.rtl .lsvr-grid__col--push-3,
.rtl .lsvr-grid__col--push-4,
.rtl .lsvr-grid__col--push-5,
.rtl .lsvr-grid__col--push-6,
.rtl .lsvr-grid__col--push-7,
.rtl .lsvr-grid__col--push-8,
.rtl .lsvr-grid__col--push-9,
.rtl .lsvr-grid__col--push-10,
.rtl .lsvr-grid__col--push-11 { left: auto; right: auto; }
.rtl .lsvr-grid__col--pull-1,
.rtl .lsvr-grid__col--pull-2,
.rtl .lsvr-grid__col--pull-3,
.rtl .lsvr-grid__col--pull-4,
.rtl .lsvr-grid__col--pull-5,
.rtl .lsvr-grid__col--pull-6,
.rtl .lsvr-grid__col--pull-7,
.rtl .lsvr-grid__col--pull-8,
.rtl .lsvr-grid__col--pull-9,
.rtl .lsvr-grid__col--pull-10,
.rtl .lsvr-grid__col--pull-11 { left: auto; right: auto; }
}
/* Large breakpoint */
@media ( min-width: 991px ) and ( max-width: 1199px ) {
/* Grid column span modifiers */
@for $i from 1 through 12 {
.lsvr-grid__col--lg-span-#{$i} { float: left; @include grid-span( $i ); }
}
.lsvr-grid--lg-1-cols > .lsvr-grid__col:nth-child( 1n+1 ),
.lsvr-grid--lg-2-cols > .lsvr-grid__col:nth-child( 2n+1 ),
.lsvr-grid--lg-3-cols > .lsvr-grid__col:nth-child( 3n+1 ),
.lsvr-grid--lg-4-cols > .lsvr-grid__col:nth-child( 4n+1 ) { clear: left; }
.rtl .lsvr-grid--lg-1-cols > .lsvr-grid__col:nth-child( 1n+1 ),
.rtl .lsvr-grid--lg-2-cols > .lsvr-grid__col:nth-child( 2n+1 ),
.rtl .lsvr-grid--lg-3-cols > .lsvr-grid__col:nth-child( 3n+1 ),
.rtl .lsvr-grid--lg-4-cols > .lsvr-grid__col:nth-child( 4n+1 ) { clear: right; }
}
/* Medium breakpoint */
@media ( min-width: 768px ) and ( max-width: 990px ) {
/* Grid column span modifiers */
@for $i from 1 through 12 {
.lsvr-grid__col--md-span-#{$i} { float: left; @include grid-span( $i ); }
}
.lsvr-grid--md-1-cols > .lsvr-grid__col:nth-child( 1n+1 ),
.lsvr-grid--md-2-cols > .lsvr-grid__col:nth-child( 2n+1 ),
.lsvr-grid--md-3-cols > .lsvr-grid__col:nth-child( 3n+1 ),
.lsvr-grid--md-4-cols > .lsvr-grid__col:nth-child( 4n+1 ) { clear: left; }
}
/* Small breakpoint */
@media ( min-width: 481px ) and ( max-width: 767px ) {
/* Grid column span modifiers */
@for $i from 1 through 12 {
.lsvr-grid__col--sm-span-#{$i} { float: left; @include grid-span( $i ); }
}
.lsvr-grid--md-1-cols > .lsvr-grid__col:nth-child( 1n+1 ),
.lsvr-grid--md-2-cols > .lsvr-grid__col:nth-child( 2n+1 ),
.lsvr-grid--md-3-cols > .lsvr-grid__col:nth-child( 3n+1 ),
.lsvr-grid--md-4-cols > .lsvr-grid__col:nth-child( 4n+1 ) { clear: none; }
.lsvr-grid--sm-1-cols > .lsvr-grid__col:nth-child( 1n+1 ),
.lsvr-grid--sm-2-cols > .lsvr-grid__col:nth-child( 2n+1 ),
.lsvr-grid--sm-3-cols > .lsvr-grid__col:nth-child( 3n+1 ),
.lsvr-grid--sm-4-cols > .lsvr-grid__col:nth-child( 4n+1 ) { clear: left; }
.rtl .lsvr-grid--sm-1-cols > .lsvr-grid__col:nth-child( 1n+1 ),
.rtl .lsvr-grid--sm-2-cols > .lsvr-grid__col:nth-child( 2n+1 ),
.rtl .lsvr-grid--sm-3-cols > .lsvr-grid__col:nth-child( 3n+1 ),
.rtl .lsvr-grid--sm-4-cols > .lsvr-grid__col:nth-child( 4n+1 ) { clear: right; }
}
/* Small devices */
@media ( max-width: 480px ) {
.lsvr-container { padding: 0 20px; }
} |