87 lines
1.9 KiB
SCSS
87 lines
1.9 KiB
SCSS
|
@import "global";
|
||
|
|
|
||
|
|
$gutter_fluid: 4;
|
||
|
|
|
||
|
|
[class*="span"] {
|
||
|
|
min-height: 1px;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.span12 { width: 100%; }
|
||
|
|
.span11 { width: 91.666%; }
|
||
|
|
.span10 { width: 83.333%; }
|
||
|
|
.span9 { width: 75%; }
|
||
|
|
.span8 { width: 66.666%; }
|
||
|
|
.span7 { width: 58.333%; }
|
||
|
|
.span6 { width: 50%; }
|
||
|
|
.span5 { width: 41.666%; }
|
||
|
|
.span4 { width: 33.333%; }
|
||
|
|
.span3 { width: 25%; }
|
||
|
|
.span2 { width: 16.666%; }
|
||
|
|
.span1 { width: 8.333%; }
|
||
|
|
|
||
|
|
.row-fluid {
|
||
|
|
width: 100%;
|
||
|
|
> [class*="span"] {
|
||
|
|
float: left;
|
||
|
|
width: 100%;
|
||
|
|
margin-left: 1% * $gutter_fluid;
|
||
|
|
&:first-child
|
||
|
|
{
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$column_width: (100% - $gutter_fluid * 11) / 12;
|
||
|
|
|
||
|
|
> .span12 { width: $column_width * 12 + $gutter_fluid * 11; }
|
||
|
|
> .span11 { width: $column_width * 11 + $gutter_fluid * 10; }
|
||
|
|
> .span10 { width: $column_width * 10 + $gutter_fluid * 9; }
|
||
|
|
> .span9 { width: $column_width * 9 + $gutter_fluid * 8; }
|
||
|
|
> .span8 { width: $column_width * 8 + $gutter_fluid * 7; }
|
||
|
|
> .span7 { width: $column_width * 7 + $gutter_fluid * 6; }
|
||
|
|
> .span6 { width: $column_width * 6 + $gutter_fluid * 5; }
|
||
|
|
> .span5 { width: $column_width * 5 + $gutter_fluid * 4; }
|
||
|
|
> .span4 { width: $column_width * 4 + $gutter_fluid * 3; }
|
||
|
|
> .span3 { width: $column_width * 3 + $gutter_fluid * 2; }
|
||
|
|
> .span2 { width: $column_width * 2 + $gutter_fluid * 1; }
|
||
|
|
> .span1 { width: $column_width; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.tile-fluid {
|
||
|
|
width: 100%;
|
||
|
|
> [class*="span"] {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.column-fluid {
|
||
|
|
@include display-flex();
|
||
|
|
flex-wrap: wrap;
|
||
|
|
> [class*="span"] {
|
||
|
|
@include display-flex();
|
||
|
|
@include flex(1 0 auto);
|
||
|
|
overflow: hidden;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.row-fluid, .tile-fluid {
|
||
|
|
@include clearfix();
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: $mobile-width-threshold) {
|
||
|
|
.row-fluid, .tile-fluid, .column-fluid {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.pull-left, .pull-right
|
||
|
|
{
|
||
|
|
float: none;
|
||
|
|
}
|
||
|
|
[class*="span"] {
|
||
|
|
float: none !important;
|
||
|
|
width: 100% !important;
|
||
|
|
margin-left: 0 !important;
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
}
|