mirror of
https://github.com/kristoferjoseph/flexboxgrid.git
synced 2026-01-25 07:47:53 +00:00
Fixing rounding issues for IE10+
This commit is contained in:
krjoseph
@@ -1,3 +1,16 @@
|
||||
/*
|
||||
* Removed gutters by default Due to a pixel rounding bug in IE 10+
|
||||
* Once Google puts variables back we can use these to customize the grid
|
||||
:root {
|
||||
var-half-gutter-width: 0.5rem;
|
||||
var-gutter-compensation: -0.5rem;
|
||||
var-outer-margin: 2rem;
|
||||
}
|
||||
*/
|
||||
.grid {
|
||||
padding-right: var( outer-margin, 0 );
|
||||
padding-left: var( outer-margin, 0 );
|
||||
}
|
||||
.row {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
@@ -14,6 +27,8 @@
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: var( gutter-compensation, 0 );
|
||||
margin-left: var( gutter-compensation, 0 );
|
||||
}
|
||||
.row.reverse {
|
||||
-webkit-box-orient: horizontal;
|
||||
@@ -79,7 +94,12 @@
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
padding-right: var( half-gutter-width, 0 );
|
||||
padding-left: var( half-gutter-width, 0 );
|
||||
}
|
||||
.column-auto-wall,
|
||||
.column-auto-desk,
|
||||
.column-auto-lap,
|
||||
.column-auto-hand {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
@@ -90,108 +110,97 @@
|
||||
flex-basis: 0%;
|
||||
}
|
||||
.column-1-hand {
|
||||
-webkit-flex-basis: -webkit-calc( 100% / 12 );
|
||||
-ms-flex-preferred-size: calc( 100% / 12 );
|
||||
flex-basis: calc( 100% / 12 );
|
||||
-webkit-flex-basis: 8.333333333%;
|
||||
-ms-flex-preferred-size: 8.333333333%;
|
||||
flex-basis: 8.333333333%;
|
||||
}
|
||||
.column-2-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 2 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 2 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 2 );
|
||||
-webkit-flex-basis: 16.666666667%;
|
||||
-ms-flex-preferred-size: 16.666666667%;
|
||||
flex-basis: 16.666666667%;
|
||||
}
|
||||
.column-3-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 3 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 3 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 3 );
|
||||
-webkit-flex-basis: 25%;
|
||||
-ms-flex-preferred-size: 25%;
|
||||
flex-basis: 25%;
|
||||
}
|
||||
.column-4-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 4 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 4 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 4 );
|
||||
-webkit-flex-basis: 33.333333333%;
|
||||
-ms-flex-preferred-size: 33.333333333%;
|
||||
flex-basis: 33.333333333%;
|
||||
}
|
||||
.column-5-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 5 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 5 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 5 );
|
||||
-webkit-flex-basis: 41.666666667%;
|
||||
-ms-flex-preferred-size: 41.666666667%;
|
||||
flex-basis: 41.666666667%;
|
||||
}
|
||||
.column-6-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 6 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 6 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 6 );
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.column-7-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 7 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 7 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 7 );
|
||||
-webkit-flex-basis: 58.333333333%;
|
||||
-ms-flex-preferred-size: 58.333333333%;
|
||||
flex-basis: 58.333333333%;
|
||||
}
|
||||
.column-8-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 8 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 8 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 8 );
|
||||
-webkit-flex-basis: 66.666666667%;
|
||||
-ms-flex-preferred-size: 66.666666667%;
|
||||
flex-basis: 66.666666667%;
|
||||
}
|
||||
.column-9-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 9 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 9 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 9 );
|
||||
-webkit-flex-basis: 75%;
|
||||
-ms-flex-preferred-size: 75%;
|
||||
flex-basis: 75%;
|
||||
}
|
||||
.column-10-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 10 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 10 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 10 );
|
||||
-webkit-flex-basis: 83.333333333%;
|
||||
-ms-flex-preferred-size: 83.333333333%;
|
||||
flex-basis: 83.333333333%;
|
||||
}
|
||||
.column-11-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 11 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 11 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 11 );
|
||||
-webkit-flex-basis: 91.666666667%;
|
||||
-ms-flex-preferred-size: 91.666666667%;
|
||||
flex-basis: 91.666666667%;
|
||||
}
|
||||
.column-12-hand {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 12 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 12 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 12 );
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.offset-1-hand {
|
||||
margin-left: -webkit-calc( 100% / 12 );
|
||||
margin-left: calc( 100% / 12 );
|
||||
margin-left: 8.333333333%;
|
||||
}
|
||||
.offset-2-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: 16.666666667%;
|
||||
}
|
||||
.offset-3-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset-4-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: 33.333333333%;
|
||||
}
|
||||
.offset-5-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: 41.666666667%;
|
||||
}
|
||||
.offset-6-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset-7-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: 58.333333333%;
|
||||
}
|
||||
.offset-8-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: 66.666666667%;
|
||||
}
|
||||
.offset-9-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset-10-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: 83.333333333%;
|
||||
}
|
||||
.offset-11-hand {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: 91.666666667%;
|
||||
}
|
||||
.start-hand {
|
||||
-webkit-box-pack: start;
|
||||
@@ -258,111 +267,104 @@
|
||||
|
||||
@media only screen and (min-width: 48em) {
|
||||
|
||||
.column-auto-lap {
|
||||
-webkit-flex-basis: 0%;
|
||||
-ms-flex-preferred-size: 0%;
|
||||
flex-basis: 0%;
|
||||
}
|
||||
.column-1-lap {
|
||||
-webkit-flex-basis: -webkit-calc( 100% / 12 );
|
||||
-ms-flex-preferred-size: calc( 100% / 12 );
|
||||
flex-basis: calc( 100% / 12 );
|
||||
-webkit-flex-basis: 8.333333333%;
|
||||
-ms-flex-preferred-size: 8.333333333%;
|
||||
flex-basis: 8.333333333%;
|
||||
}
|
||||
.column-2-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 2 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 2 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 2 );
|
||||
-webkit-flex-basis: 16.666666667%;
|
||||
-ms-flex-preferred-size: 16.666666667%;
|
||||
flex-basis: 16.666666667%;
|
||||
}
|
||||
.column-3-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 3 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 3 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 3 );
|
||||
-webkit-flex-basis: 25%;
|
||||
-ms-flex-preferred-size: 25%;
|
||||
flex-basis: 25%;
|
||||
}
|
||||
.column-4-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 4 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 4 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 4 );
|
||||
-webkit-flex-basis: 33.333333333%;
|
||||
-ms-flex-preferred-size: 33.333333333%;
|
||||
flex-basis: 33.333333333%;
|
||||
}
|
||||
.column-5-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 5 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 5 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 5 );
|
||||
-webkit-flex-basis: 41.666666667%;
|
||||
-ms-flex-preferred-size: 41.666666667%;
|
||||
flex-basis: 41.666666667%;
|
||||
}
|
||||
.column-6-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 6 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 6 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 6 );
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.column-7-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 7 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 7 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 7 );
|
||||
-webkit-flex-basis: 58.333333333%;
|
||||
-ms-flex-preferred-size: 58.333333333%;
|
||||
flex-basis: 58.333333333%;
|
||||
}
|
||||
.column-8-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 8 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 8 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 8 );
|
||||
-webkit-flex-basis: 66.666666667%;
|
||||
-ms-flex-preferred-size: 66.666666667%;
|
||||
flex-basis: 66.666666667%;
|
||||
}
|
||||
.column-9-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 9 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 9 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 9 );
|
||||
-webkit-flex-basis: 75%;
|
||||
-ms-flex-preferred-size: 75%;
|
||||
flex-basis: 75%;
|
||||
}
|
||||
.column-10-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 10 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 10 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 10 );
|
||||
-webkit-flex-basis: 83.333333333%;
|
||||
-ms-flex-preferred-size: 83.333333333%;
|
||||
flex-basis: 83.333333333%;
|
||||
}
|
||||
.column-11-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 11 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 11 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 11 );
|
||||
-webkit-flex-basis: 91.666666667%;
|
||||
-ms-flex-preferred-size: 91.666666667%;
|
||||
flex-basis: 91.666666667%;
|
||||
}
|
||||
.column-12-lap {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 12 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 12 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 12 );
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.offset-1-lap {
|
||||
margin-left: -webkit-calc( 100% / 12 );
|
||||
margin-left: calc( 100% / 12 );
|
||||
margin-left: 8.333333333%;
|
||||
}
|
||||
.offset-2-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: 16.666666667%;
|
||||
}
|
||||
.offset-3-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset-4-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: 33.333333333%;
|
||||
}
|
||||
.offset-5-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: 41.666666667%;
|
||||
}
|
||||
.offset-6-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset-7-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: 58.333333333%;
|
||||
}
|
||||
.offset-8-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: 66.666666667%;
|
||||
}
|
||||
.offset-9-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset-10-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: 83.333333333%;
|
||||
}
|
||||
.offset-11-lap {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: 91.666666667%;
|
||||
}
|
||||
|
||||
.start-lap {
|
||||
-webkit-box-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
@@ -430,109 +432,103 @@
|
||||
|
||||
@media only screen and (min-width: 62em) {
|
||||
|
||||
.column-auto-desk {
|
||||
-webkit-flex-basis: 0%;
|
||||
-ms-flex-preferred-size: 0%;
|
||||
flex-basis: 0%;
|
||||
}
|
||||
.column-1-desk {
|
||||
-webkit-flex-basis: -webkit-calc( 100% / 12 );
|
||||
-ms-flex-preferred-size: calc( 100% / 12 );
|
||||
flex-basis: calc( 100% / 12 );
|
||||
-webkit-flex-basis: 8.333333333%;
|
||||
-ms-flex-preferred-size: 8.333333333%;
|
||||
flex-basis: 8.333333333%;
|
||||
}
|
||||
.column-2-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 2 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 2 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 2 );
|
||||
-webkit-flex-basis: 16.666666667%;
|
||||
-ms-flex-preferred-size: 16.666666667%;
|
||||
flex-basis: 16.666666667%;
|
||||
}
|
||||
.column-3-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 3 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 3 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 3 );
|
||||
-webkit-flex-basis: 25%;
|
||||
-ms-flex-preferred-size: 25%;
|
||||
flex-basis: 25%;
|
||||
}
|
||||
.column-4-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 4 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 4 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 4 );
|
||||
-webkit-flex-basis: 33.333333333%;
|
||||
-ms-flex-preferred-size: 33.333333333%;
|
||||
flex-basis: 33.333333333%;
|
||||
}
|
||||
.column-5-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 5 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 5 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 5 );
|
||||
-webkit-flex-basis: 41.666666667%;
|
||||
-ms-flex-preferred-size: 41.666666667%;
|
||||
flex-basis: 41.666666667%;
|
||||
}
|
||||
.column-6-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 6 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 6 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 6 );
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.column-7-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 7 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 7 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 7 );
|
||||
-webkit-flex-basis: 58.333333333%;
|
||||
-ms-flex-preferred-size: 58.333333333%;
|
||||
flex-basis: 58.333333333%;
|
||||
}
|
||||
.column-8-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 8 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 8 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 8 );
|
||||
-webkit-flex-basis: 66.666666667%;
|
||||
-ms-flex-preferred-size: 66.666666667%;
|
||||
flex-basis: 66.666666667%;
|
||||
}
|
||||
.column-9-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 9 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 9 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 9 );
|
||||
-webkit-flex-basis: 75%;
|
||||
-ms-flex-preferred-size: 75%;
|
||||
flex-basis: 75%;
|
||||
}
|
||||
.column-10-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 10 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 10 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 10 );
|
||||
-webkit-flex-basis: 83.333333333%;
|
||||
-ms-flex-preferred-size: 83.333333333%;
|
||||
flex-basis: 83.333333333%;
|
||||
}
|
||||
.column-11-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 11 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 11 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 11 );
|
||||
-webkit-flex-basis: 91.666666667%;
|
||||
-ms-flex-preferred-size: 91.666666667%;
|
||||
flex-basis: 91.666666667%;
|
||||
}
|
||||
.column-12-desk {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 12 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 12 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 12 );
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.offset-1-desk {
|
||||
margin-left: -webkit-calc( 100% / 12 );
|
||||
margin-left: calc( 100% / 12 );
|
||||
margin-left: 8.333333333%;
|
||||
}
|
||||
.offset-2-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: 16.666666667%;
|
||||
}
|
||||
.offset-3-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset-4-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: 33.333333333%;
|
||||
}
|
||||
.offset-5-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: 41.666666667%;
|
||||
}
|
||||
.offset-6-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset-7-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: 58.333333333%;
|
||||
}
|
||||
.offset-8-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: 66.666666667%;
|
||||
}
|
||||
.offset-9-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset-10-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: 83.333333333%;
|
||||
}
|
||||
.offset-11-desk {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: 91.666666667%;
|
||||
}
|
||||
.start-desk {
|
||||
-webkit-box-pack: start;
|
||||
@@ -601,109 +597,103 @@
|
||||
|
||||
@media only screen and (min-width: 75em) {
|
||||
|
||||
.column-auto-wall {
|
||||
-webkit-flex-basis: 0%;
|
||||
-ms-flex-preferred-size: 0%;
|
||||
flex-basis: 0%;
|
||||
}
|
||||
.column-1-wall {
|
||||
-webkit-flex-basis: -webkit-calc( 100% / 12 );
|
||||
-ms-flex-preferred-size: calc( 100% / 12 );
|
||||
flex-basis: calc( 100% / 12 );
|
||||
-webkit-flex-basis: 8.333333333%;
|
||||
-ms-flex-preferred-size: 8.333333333%;
|
||||
flex-basis: 8.333333333%;
|
||||
}
|
||||
.column-2-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 2 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 2 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 2 );
|
||||
-webkit-flex-basis: 16.666666667%;
|
||||
-ms-flex-preferred-size: 16.666666667%;
|
||||
flex-basis: 16.666666667%;
|
||||
}
|
||||
.column-3-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 3 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 3 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 3 );
|
||||
-webkit-flex-basis: 25%;
|
||||
-ms-flex-preferred-size: 25%;
|
||||
flex-basis: 25%;
|
||||
}
|
||||
.column-4-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 4 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 4 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 4 );
|
||||
-webkit-flex-basis: 33.333333333%;
|
||||
-ms-flex-preferred-size: 33.333333333%;
|
||||
flex-basis: 33.333333333%;
|
||||
}
|
||||
.column-5-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 5 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 5 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 5 );
|
||||
-webkit-flex-basis: 41.666666667%;
|
||||
-ms-flex-preferred-size: 41.666666667%;
|
||||
flex-basis: 41.666666667%;
|
||||
}
|
||||
.column-6-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 6 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 6 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 6 );
|
||||
-webkit-flex-basis: 50%;
|
||||
-ms-flex-preferred-size: 50%;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.column-7-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 7 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 7 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 7 );
|
||||
-webkit-flex-basis: 58.333333333%;
|
||||
-ms-flex-preferred-size: 58.333333333%;
|
||||
flex-basis: 58.333333333%;
|
||||
}
|
||||
.column-8-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 8 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 8 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 8 );
|
||||
-webkit-flex-basis: 66.666666667%;
|
||||
-ms-flex-preferred-size: 66.666666667%;
|
||||
flex-basis: 66.666666667%;
|
||||
}
|
||||
.column-9-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 9 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 9 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 9 );
|
||||
-webkit-flex-basis: 75%;
|
||||
-ms-flex-preferred-size: 75%;
|
||||
flex-basis: 75%;
|
||||
}
|
||||
.column-10-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 10 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 10 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 10 );
|
||||
-webkit-flex-basis: 83.333333333%;
|
||||
-ms-flex-preferred-size: 83.333333333%;
|
||||
flex-basis: 83.333333333%;
|
||||
}
|
||||
.column-11-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 11 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 11 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 11 );
|
||||
-webkit-flex-basis: 91.666666667%;
|
||||
-ms-flex-preferred-size: 91.666666667%;
|
||||
flex-basis: 91.666666667%;
|
||||
}
|
||||
.column-12-wall {
|
||||
-webkit-flex-basis: -webkit-calc( ( 100% / 12 ) * 12 );
|
||||
-ms-flex-preferred-size: calc( ( 100% / 12 ) * 12 );
|
||||
flex-basis: calc( ( 100% / 12 ) * 12 );
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.offset-1-wall {
|
||||
margin-left: -webkit-calc( 100% / 12 );
|
||||
margin-left: calc( 100% / 12 );
|
||||
margin-left: 8.333333333%;
|
||||
}
|
||||
.offset-2-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: 16.666666667%;
|
||||
}
|
||||
.offset-3-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset-4-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: 33.333333333%;
|
||||
}
|
||||
.offset-5-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: 41.666666667%;
|
||||
}
|
||||
.offset-6-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset-7-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: 58.333333333%;
|
||||
}
|
||||
.offset-8-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: 66.666666667%;
|
||||
}
|
||||
.offset-9-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset-10-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: 83.333333333%;
|
||||
}
|
||||
.offset-11-wall {
|
||||
margin-left: -webkit-calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: 91.666666667%;
|
||||
}
|
||||
.start-wall {
|
||||
-webkit-box-pack: start;
|
||||
|
||||
2
css/flexboxgrid.min.css
vendored
2
css/flexboxgrid.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
css/index.min.css
vendored
2
css/index.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,8 +1,23 @@
|
||||
/*
|
||||
* Removed gutters by default Due to a pixel rounding bug in IE 10+
|
||||
* Once Google puts variables back we can use these to customize the grid
|
||||
:root {
|
||||
var-half-gutter-width: 0.5rem;
|
||||
var-gutter-compensation: -0.5rem;
|
||||
var-outer-margin: 2rem;
|
||||
}
|
||||
*/
|
||||
.grid {
|
||||
padding-right: var( outer-margin, 0 );
|
||||
padding-left: var( outer-margin, 0 );
|
||||
}
|
||||
.row {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-right: var( gutter-compensation, 0 );
|
||||
margin-left: var( gutter-compensation, 0 );
|
||||
}
|
||||
.row.reverse {
|
||||
flex-direction: row-reverse;
|
||||
@@ -42,79 +57,84 @@
|
||||
flex-direction: column;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
padding-right: var( half-gutter-width, 0 );
|
||||
padding-left: var( half-gutter-width, 0 );
|
||||
}
|
||||
.column-auto-wall,
|
||||
.column-auto-desk,
|
||||
.column-auto-lap,
|
||||
.column-auto-hand {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0%;
|
||||
}
|
||||
.column-1-hand {
|
||||
flex-basis: calc( 100% / 12 );
|
||||
flex-basis: 8.333333333%;
|
||||
}
|
||||
.column-2-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 2 );
|
||||
flex-basis: 16.666666667%;
|
||||
}
|
||||
.column-3-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 3 );
|
||||
flex-basis: 25%;
|
||||
}
|
||||
.column-4-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 4 );
|
||||
flex-basis: 33.333333333%;
|
||||
}
|
||||
.column-5-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 5 );
|
||||
flex-basis: 41.666666667%;
|
||||
}
|
||||
.column-6-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 6 );
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.column-7-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 7 );
|
||||
flex-basis: 58.333333333%;
|
||||
}
|
||||
.column-8-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 8 );
|
||||
flex-basis: 66.666666667%;
|
||||
}
|
||||
.column-9-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 9 );
|
||||
flex-basis: 75%;
|
||||
}
|
||||
.column-10-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 10 );
|
||||
flex-basis: 83.333333333%;
|
||||
}
|
||||
.column-11-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 11 );
|
||||
flex-basis: 91.666666667%;
|
||||
}
|
||||
.column-12-hand {
|
||||
flex-basis: calc( ( 100% / 12 ) * 12 );
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.offset-1-hand {
|
||||
margin-left: calc( 100% / 12 );
|
||||
margin-left: 8.333333333%;
|
||||
}
|
||||
.offset-2-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: 16.666666667%;
|
||||
}
|
||||
.offset-3-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset-4-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: 33.333333333%;
|
||||
}
|
||||
.offset-5-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: 41.666666667%;
|
||||
}
|
||||
.offset-6-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset-7-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: 58.333333333%;
|
||||
}
|
||||
.offset-8-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: 66.666666667%;
|
||||
}
|
||||
.offset-9-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset-10-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: 83.333333333%;
|
||||
}
|
||||
.offset-11-hand {
|
||||
margin-left: calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: 91.666666667%;
|
||||
}
|
||||
.start-hand {
|
||||
justify-content: flex-start;
|
||||
@@ -152,76 +172,78 @@
|
||||
|
||||
@media only screen and (min-width: 48em) {
|
||||
|
||||
.column-auto-lap {
|
||||
flex-basis: 0%;
|
||||
}
|
||||
.column-1-lap {
|
||||
flex-basis: calc( 100% / 12 );
|
||||
flex-basis: 8.333333333%;
|
||||
}
|
||||
.column-2-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 2 );
|
||||
flex-basis: 16.666666667%;
|
||||
}
|
||||
.column-3-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 3 );
|
||||
flex-basis: 25%;
|
||||
}
|
||||
.column-4-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 4 );
|
||||
flex-basis: 33.333333333%;
|
||||
}
|
||||
.column-5-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 5 );
|
||||
flex-basis: 41.666666667%;
|
||||
}
|
||||
.column-6-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 6 );
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.column-7-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 7 );
|
||||
flex-basis: 58.333333333%;
|
||||
}
|
||||
.column-8-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 8 );
|
||||
flex-basis: 66.666666667%;
|
||||
}
|
||||
.column-9-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 9 );
|
||||
flex-basis: 75%;
|
||||
}
|
||||
.column-10-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 10 );
|
||||
flex-basis: 83.333333333%;
|
||||
}
|
||||
.column-11-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 11 );
|
||||
flex-basis: 91.666666667%;
|
||||
}
|
||||
.column-12-lap {
|
||||
flex-basis: calc( ( 100% / 12 ) * 12 );
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.offset-1-lap {
|
||||
margin-left: calc( 100% / 12 );
|
||||
margin-left: 8.333333333%;
|
||||
}
|
||||
.offset-2-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: 16.666666667%;
|
||||
}
|
||||
.offset-3-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset-4-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: 33.333333333%;
|
||||
}
|
||||
.offset-5-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: 41.666666667%;
|
||||
}
|
||||
.offset-6-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset-7-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: 58.333333333%;
|
||||
}
|
||||
.offset-8-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: 66.666666667%;
|
||||
}
|
||||
.offset-9-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset-10-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: 83.333333333%;
|
||||
}
|
||||
.offset-11-lap {
|
||||
margin-left: calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: 91.666666667%;
|
||||
}
|
||||
|
||||
.start-lap {
|
||||
justify-content: flex-start;
|
||||
text-align: start;
|
||||
@@ -260,74 +282,77 @@
|
||||
|
||||
@media only screen and (min-width: 62em) {
|
||||
|
||||
.column-auto-desk {
|
||||
flex-basis: 0%;
|
||||
}
|
||||
.column-1-desk {
|
||||
flex-basis: calc( 100% / 12 );
|
||||
flex-basis: 8.333333333%;
|
||||
}
|
||||
.column-2-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 2 );
|
||||
flex-basis: 16.666666667%;
|
||||
}
|
||||
.column-3-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 3 );
|
||||
flex-basis: 25%;
|
||||
}
|
||||
.column-4-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 4 );
|
||||
flex-basis: 33.333333333%;
|
||||
}
|
||||
.column-5-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 5 );
|
||||
flex-basis: 41.666666667%;
|
||||
}
|
||||
.column-6-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 6 );
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.column-7-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 7 );
|
||||
flex-basis: 58.333333333%;
|
||||
}
|
||||
.column-8-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 8 );
|
||||
flex-basis: 66.666666667%;
|
||||
}
|
||||
.column-9-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 9 );
|
||||
flex-basis: 75%;
|
||||
}
|
||||
.column-10-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 10 );
|
||||
flex-basis: 83.333333333%;
|
||||
}
|
||||
.column-11-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 11 );
|
||||
flex-basis: 91.666666667%;
|
||||
}
|
||||
.column-12-desk {
|
||||
flex-basis: calc( ( 100% / 12 ) * 12 );
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.offset-1-desk {
|
||||
margin-left: calc( 100% / 12 );
|
||||
margin-left: 8.333333333%;
|
||||
}
|
||||
.offset-2-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: 16.666666667%;
|
||||
}
|
||||
.offset-3-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset-4-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: 33.333333333%;
|
||||
}
|
||||
.offset-5-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: 41.666666667%;
|
||||
}
|
||||
.offset-6-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset-7-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: 58.333333333%;
|
||||
}
|
||||
.offset-8-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: 66.666666667%;
|
||||
}
|
||||
.offset-9-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset-10-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: 83.333333333%;
|
||||
}
|
||||
.offset-11-desk {
|
||||
margin-left: calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: 91.666666667%;
|
||||
}
|
||||
.start-desk {
|
||||
justify-content: flex-start;
|
||||
@@ -367,74 +392,77 @@
|
||||
|
||||
@media only screen and (min-width: 75em) {
|
||||
|
||||
.column-auto-wall {
|
||||
flex-basis: 0%;
|
||||
}
|
||||
.column-1-wall {
|
||||
flex-basis: calc( 100% / 12 );
|
||||
flex-basis: 8.333333333%;
|
||||
}
|
||||
.column-2-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 2 );
|
||||
flex-basis: 16.666666667%;
|
||||
}
|
||||
.column-3-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 3 );
|
||||
flex-basis: 25%;
|
||||
}
|
||||
.column-4-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 4 );
|
||||
flex-basis: 33.333333333%;
|
||||
}
|
||||
.column-5-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 5 );
|
||||
flex-basis: 41.666666667%;
|
||||
}
|
||||
.column-6-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 6 );
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.column-7-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 7 );
|
||||
flex-basis: 58.333333333%;
|
||||
}
|
||||
.column-8-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 8 );
|
||||
flex-basis: 66.666666667%;
|
||||
}
|
||||
.column-9-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 9 );
|
||||
flex-basis: 75%;
|
||||
}
|
||||
.column-10-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 10 );
|
||||
flex-basis: 83.333333333%;
|
||||
}
|
||||
.column-11-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 11 );
|
||||
flex-basis: 91.666666667%;
|
||||
}
|
||||
.column-12-wall {
|
||||
flex-basis: calc( ( 100% / 12 ) * 12 );
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.offset-1-wall {
|
||||
margin-left: calc( 100% / 12 );
|
||||
margin-left: 8.333333333%;
|
||||
}
|
||||
.offset-2-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 2 );
|
||||
margin-left: 16.666666667%;
|
||||
}
|
||||
.offset-3-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 3 );
|
||||
margin-left: 25%;
|
||||
}
|
||||
.offset-4-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 4 );
|
||||
margin-left: 33.333333333%;
|
||||
}
|
||||
.offset-5-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 5 );
|
||||
margin-left: 41.666666667%;
|
||||
}
|
||||
.offset-6-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 6 );
|
||||
margin-left: 50%;
|
||||
}
|
||||
.offset-7-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 7 );
|
||||
margin-left: 58.333333333%;
|
||||
}
|
||||
.offset-8-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 8 );
|
||||
margin-left: 66.666666667%;
|
||||
}
|
||||
.offset-9-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 9 );
|
||||
margin-left: 75%;
|
||||
}
|
||||
.offset-10-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 10 );
|
||||
margin-left: 83.333333333%;
|
||||
}
|
||||
.offset-11-wall {
|
||||
margin-left: calc( ( 100% / 12 ) * 11 );
|
||||
margin-left: 91.666666667%;
|
||||
}
|
||||
.start-wall {
|
||||
justify-content: flex-start;
|
||||
|
||||
Reference in New Issue
Block a user