Skip to content
This repository has been archived by the owner on Jan 23, 2021. It is now read-only.

Commit

Permalink
Merge pull request #1 from tjisousa/column-fix
Browse files Browse the repository at this point in the history 
Columns width fix on Firefox
  • Loading branch information
@codetheory
codetheory authored Nov 4, 2016
2 parents f130333 + 19464ec commit 94b22b0
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 21 deletions.
25 changes: 17 additions & 8 deletions dist/eight.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,14 +193,14 @@ p + p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: .8vw;
padding-right: .8vw;
padding-left: 8px;
padding-right: 8px;
}

/* A wrapper for all columns to offset gutters and provide positioning extras */
.row {
margin-left: -.8vw;
margin-right: -.8vw;
margin-left: -8px;
margin-right: -8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
Expand All @@ -227,64 +227,73 @@ p + p {

.col {
width: 12.5%;
max-width: 12.5%;
-webkit-box-flex: 1;
-ms-flex: 1 1 12.5%;
flex: 1 1 12.5%;
padding-right: .8vw;
padding-left: .8vw
padding-right: 8px;
padding-left: 8px
}

.col.col-8 {
width: 100%;
max-width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 1 12.5%;
flex: 0 1 12.5%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
}

.col.col-7 {
width: 87.5%;
max-width: 87.5%;
-webkit-box-flex: 0;
-ms-flex: 0 1 87.5%;
flex: 0 1 87.5%;
}

.col.col-6 {
width: 75%;
max-width: 75%;
-webkit-box-flex: 0;
-ms-flex: 0 1 75%;
flex: 0 1 75%;
}

.col.col-5 {
width: 62.5%;
max-width: 62.5%;
-webkit-box-flex: 0;
-ms-flex: 0 1 62.5%;
flex: 0 1 62.5%;
}

.col.col-4 {
width: 50%;
max-width: 50%;
-webkit-box-flex: 0;
-ms-flex: 0 1 50%;
flex: 0 1 50%;
}

.col.col-3 {
width: 37.5%;
max-width: 37.5%;
-webkit-box-flex: 0;
-ms-flex: 0 1 37.5%;
flex: 0 1 37.5%;
}

.col.col-2 {
width: 25%;
max-width: 25%;
-webkit-box-flex: 0;
-ms-flex: 0 1 25%;
flex: 0 1 25%;
}

.col.col-1 {
width: 12.5%;
max-width: 12.5%;
-webkit-box-flex: 0;
-ms-flex: 0 1 12.5%;
flex: 0 1 12.5%;
Expand Down
25 changes: 17 additions & 8 deletions dist/eight.grid.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-left: .8vw;
padding-right: .8vw;
padding-left: 8px;
padding-right: 8px;
}

/* A wrapper for all columns to offset gutters and provide positioning extras */
.row {
margin-left: -.8vw;
margin-right: -.8vw;
margin-left: -8px;
margin-right: -8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
Expand All @@ -46,64 +46,73 @@

.col {
width: 12.5%;
max-width: 12.5%;
-webkit-box-flex: 1;
-ms-flex: 1 1 12.5%;
flex: 1 1 12.5%;
padding-right: .8vw;
padding-left: .8vw
padding-right: 8px;
padding-left: 8px
}

.col.col-8 {
width: 100%;
max-width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 1 12.5%;
flex: 0 1 12.5%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
}

.col.col-7 {
width: 87.5%;
max-width: 87.5%;
-webkit-box-flex: 0;
-ms-flex: 0 1 87.5%;
flex: 0 1 87.5%;
}

.col.col-6 {
width: 75%;
max-width: 75%;
-webkit-box-flex: 0;
-ms-flex: 0 1 75%;
flex: 0 1 75%;
}

.col.col-5 {
width: 62.5%;
max-width: 62.5%;
-webkit-box-flex: 0;
-ms-flex: 0 1 62.5%;
flex: 0 1 62.5%;
}

.col.col-4 {
width: 50%;
max-width: 50%;
-webkit-box-flex: 0;
-ms-flex: 0 1 50%;
flex: 0 1 50%;
}

.col.col-3 {
width: 37.5%;
max-width: 37.5%;
-webkit-box-flex: 0;
-ms-flex: 0 1 37.5%;
flex: 0 1 37.5%;
}

.col.col-2 {
width: 25%;
max-width: 25%;
-webkit-box-flex: 0;
-ms-flex: 0 1 25%;
flex: 0 1 25%;
}

.col.col-1 {
width: 12.5%;
max-width: 12.5%;
-webkit-box-flex: 0;
-ms-flex: 0 1 12.5%;
flex: 0 1 12.5%;
Expand Down
2 changes: 1 addition & 1 deletion dist/eight.grid.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/eight.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 12 additions & 3 deletions src/eight.grid.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
----
gutter: width emitting from either side of a column
*/
$gutter: .8vw;
$gutter: 8px;


/* Container class for any `.row` or `.col` */
Expand All @@ -36,47 +36,56 @@ $gutter: .8vw;

.col {
width: calc(100% / 8);
max-width: calc(100% / 8);
flex: 1 1 calc(100% / 8);
padding-right: $gutter;
padding-left: $gutter;

&.col-8 {
width: calc(100%);
flex: 0 1 calc(100% / 8);
width: 100%;
max-width: 100%;
flex: 0 1 100%;
}

&.col-7 {
width: calc(100% - (100% / 8));
max-width: calc(100% - (100% / 8));
flex: 0 1 calc(100% - (100% / 8));
}

&.col-6 {
width: calc(100% - ((100% / 8) * 2));
max-width: calc(100% - ((100% / 8) * 2));
flex: 0 1 calc(100% - ((100% / 8) * 2));
}

&.col-5 {
width: calc(100% - ((100% / 8) * 3));
max-width: calc(100% - ((100% / 8) * 3));
flex: 0 1 calc(100% - ((100% / 8) * 3));
}

&.col-4 {
width: calc(100% - ((100% / 8) * 4));
max-width: calc(100% - ((100% / 8) * 4));
flex: 0 1 calc(100% - ((100% / 8) * 4));
}

&.col-3 {
width: calc(100% - ((100% / 8) * 5));
max-width: calc(100% - ((100% / 8) * 5));
flex: 0 1 calc(100% - ((100% / 8) * 5));
}

&.col-2 {
width: calc(100% - ((100% / 8) * 6));
max-width: calc(100% - ((100% / 8) * 6));
flex: 0 1 calc(100% - ((100% / 8) * 6));
}

&.col-1 {
width: calc(100% / 8);
max-width: calc(100% / 8);
flex: 0 1 calc(100% / 8);
}
}

0 comments on commit 94b22b0

Please sign in to comment.