You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
6.5 KiB
269 lines
6.5 KiB
/*--
|
|
02. Helper Css
|
|
------------------------*/
|
|
@import 'variabls';
|
|
|
|
/*--
|
|
- Custom Row
|
|
------------------------------------------*/
|
|
@for $i from 0 through 15 {
|
|
.row-#{1 * $i} {
|
|
margin-left: -1px * $i;
|
|
margin-right: -1px * $i;
|
|
|
|
& > [class*="col"] {
|
|
padding-left: 1px * $i;
|
|
padding-right: 1px * $i;
|
|
}
|
|
}
|
|
}
|
|
@for $i from 16 through 80 {
|
|
.row-#{1 * $i} {
|
|
margin-left: -1px * $i;
|
|
margin-right: -1px * $i;
|
|
|
|
// Responsive
|
|
@media #{$laptop-device}{
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
@media #{$desktop-device}{
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
@media #{$tablet-device}{
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
@media #{$large-mobile}{
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
}
|
|
|
|
& > [class*="col"] {
|
|
padding-left: 1px * $i;
|
|
padding-right: 1px * $i;
|
|
|
|
// Responsive
|
|
@media #{$laptop-device}{
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
@media #{$desktop-device}{
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
@media #{$tablet-device}{
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
@media #{$large-mobile}{
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*--
|
|
- Margin & Padding
|
|
-----------------------------------------*/
|
|
/*-- Margin Top --*/
|
|
@for $i from 0 through 40 {
|
|
.mt-#{5 * $i}{margin-top: 5px * $i !important;}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$laptop-device}{
|
|
.mt-lg-#{5 * $i}{margin-top: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$desktop-device}{
|
|
.mt-md-#{5 * $i}{margin-top: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$tablet-device}{
|
|
.mt-sm-#{5 * $i}{margin-top: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$large-mobile}{
|
|
.mt-xs-#{5 * $i}{margin-top: 5px * $i !important;}
|
|
}
|
|
}
|
|
|
|
/*-- Margin Bottom --*/
|
|
@for $i from 0 through 40 {
|
|
.mb-#{5 * $i}{margin-bottom: 5px *$i !important;}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$laptop-device}{
|
|
.mb-lg-#{5 * $i}{margin-bottom: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$desktop-device}{
|
|
.mb-md-#{5 * $i}{margin-bottom: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$tablet-device}{
|
|
.mb-sm-#{5 * $i}{margin-bottom: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$large-mobile}{
|
|
.mb-xs-#{5 * $i}{margin-bottom: 5px * $i !important;}
|
|
}
|
|
}
|
|
|
|
/*-- Margin Left --*/
|
|
@for $i from 0 through 40 {
|
|
.ml-#{5 * $i}{margin-left: 5px * $i !important;}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$laptop-device}{
|
|
.ml-lg-#{5 * $i}{margin-left: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$desktop-device}{
|
|
.ml-md-#{5 * $i}{margin-left: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$tablet-device}{
|
|
.ml-sm-#{5 * $i}{margin-left: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$large-mobile}{
|
|
.ml-xs-#{5 * $i}{margin-left: 5px * $i !important;}
|
|
}
|
|
}
|
|
|
|
/*-- Margin Right --*/
|
|
@for $i from 0 through 40 {
|
|
.mr-#{5 * $i}{margin-right: 5px *$i !important;}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$laptop-device}{
|
|
.mr-lg-#{5 * $i}{margin-right: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$desktop-device}{
|
|
.mr-md-#{5 * $i}{margin-right: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$tablet-device}{
|
|
.mr-sm-#{5 * $i}{margin-right: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$large-mobile}{
|
|
.mr-xs-#{5 * $i}{margin-right: 5px * $i !important;}
|
|
}
|
|
}
|
|
|
|
/*-- Padding Top --*/
|
|
@for $i from 0 through 50 {
|
|
.pt-#{5 * $i}{padding-top: 5px *$i !important;}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$laptop-device}{
|
|
.pt-lg-#{5 * $i}{padding-top: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$desktop-device}{
|
|
.pt-md-#{5 * $i}{padding-top: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$tablet-device}{
|
|
.pt-sm-#{5 * $i}{padding-top: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$large-mobile}{
|
|
.pt-xs-#{5 * $i}{padding-top: 5px * $i !important;}
|
|
}
|
|
}
|
|
|
|
/*-- Padding Bottom --*/
|
|
@for $i from 0 through 40 {
|
|
.pb-#{5 * $i}{padding-bottom: 5px *$i !important;}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$laptop-device}{
|
|
.pb-lg-#{5 * $i}{padding-bottom: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$desktop-device}{
|
|
.pb-md-#{5 * $i}{padding-bottom: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$tablet-device}{
|
|
.pb-sm-#{5 * $i}{padding-bottom: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$large-mobile}{
|
|
.pb-xs-#{5 * $i}{padding-bottom: 5px * $i !important;}
|
|
}
|
|
}
|
|
|
|
/*-- Padding Left --*/
|
|
@for $i from 0 through 40 {
|
|
.pl-#{5 * $i}{padding-left: 5px *$i !important;}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$laptop-device}{
|
|
.pl-lg-#{5 * $i}{padding-left: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$desktop-device}{
|
|
.pl-md-#{5 * $i}{padding-left: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$tablet-device}{
|
|
.pl-sm-#{5 * $i}{padding-left: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$large-mobile}{
|
|
.pl-xs-#{5 * $i}{padding-left: 5px * $i !important;}
|
|
}
|
|
}
|
|
|
|
/*-- Padding Right --*/
|
|
@for $i from 0 through 40 {
|
|
.pr-#{5 * $i}{padding-right: 5px *$i !important;}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$laptop-device}{
|
|
.pr-lg-#{5 * $i}{padding-right: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$desktop-device}{
|
|
.pr-md-#{5 * $i}{padding-right: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$tablet-device}{
|
|
.pr-sm-#{5 * $i}{padding-right: 5px * $i !important;}
|
|
}
|
|
}
|
|
@for $i from 0 through 40 {
|
|
@media #{$large-mobile}{
|
|
.pr-xs-#{5 * $i}{padding-right: 5px * $i !important;}
|
|
}
|
|
} |