correction largeur des grilles sur IE

This commit is contained in:
raphaelgoettter 2015-06-26 14:04:16 +02:00
parent da25bfdf42
commit 69c0d573eb
2 changed files with 13 additions and 13 deletions

View file

@ -27,7 +27,7 @@
[class*="@{kna-namespace}grid-"] > * { [class*="@{kna-namespace}grid-"] > * {
flex: 0 0 auto; flex: 0 0 auto;
display: block; /* IE fix */ display: block; /* IE fix */
width: ~'calc(100% * 1 / @{number} - @{gutter})'; width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)';
margin-left: @gutter; margin-left: @gutter;
} }
@ -35,25 +35,25 @@
// example : .grid-perso { .grid(12); } // example : .grid-perso { .grid(12); }
.grid(@number:@number, @gutter:@gutter) { .grid(@number:@number, @gutter:@gutter) {
& > * { & > * {
width: ~'calc(100% * 1 / @{number} - @{gutter})'; width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)';
} }
& > .@{kna-namespace}flex-item-double { & > .@{kna-namespace}flex-item-double {
width: ~'calc(100% * 2 / @{number} - @{gutter})'; width: ~'calc(100% * 2 / @{number} - @{gutter} - .01px)';
} }
@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) { @media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
& > * { & > * {
width: ~'calc(100% * 1 / 2 - @{gutter})'; width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)';
} }
& > .@{kna-namespace}flex-item-double { & > .@{kna-namespace}flex-item-double {
width: ~'calc(100% - @{gutter})'; width: ~'calc(100% - @{gutter} - .01px)';
} }
} }
@media (max-width: @tiny-screen) { @media (max-width: @tiny-screen) {
& > * { & > * {
width: ~'calc(100% - @{gutter})'; width: ~'calc(100% - @{gutter} - .01px)';
} }
& > .@{kna-namespace}flex-item-double { & > .@{kna-namespace}flex-item-double {
width: ~'calc(100% - @{gutter})'; width: ~'calc(100% - @{gutter} - .01px)';
} }
} }
} }

View file

@ -27,7 +27,7 @@
[class*="#{$kna-namespace}grid-"] > * { [class*="#{$kna-namespace}grid-"] > * {
flex: 0 0 auto; flex: 0 0 auto;
display: block; /* IE fix */ display: block; /* IE fix */
width: calc(100% * 1 / #{$number} - #{$gutter}); width: calc(100% * 1 / #{$number} - #{$gutter} - .01px);
margin-left: $gutter; margin-left: $gutter;
} }
@ -35,25 +35,25 @@
// example : .grid-perso { @include grid(12); } // example : .grid-perso { @include grid(12); }
@mixin grid($number:$number,$gutter:$gutter) { @mixin grid($number:$number,$gutter:$gutter) {
& > * { & > * {
width: calc(100% * 1 / #{$number} - #{$gutter}); width: calc(100% * 1 / #{$number} - #{$gutter} - .01px);
} }
& > .#{$kna-namespace}flex-item-double { & > .#{$kna-namespace}flex-item-double {
width: calc(100% * 2 / #{$number} - #{$gutter}); width: calc(100% * 2 / #{$number} - #{$gutter});
} }
@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) { @media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
& > * { & > * {
width: calc(100% * 1 / 2 - #{$gutter}); width: calc(100% * 1 / 2 - #{$gutter} - .01px);
} }
& > .#{$kna-namespace}flex-item-double { & > .#{$kna-namespace}flex-item-double {
width: calc(100% - #{$gutter}); width: calc(100% - #{$gutter} - .01px);
} }
} }
@media (max-width: $tiny-screen) { @media (max-width: $tiny-screen) {
& > * { & > * {
width: calc(100% - #{$gutter}); width: calc(100% - #{$gutter} - .01px);
} }
& > .#{$kna-namespace}flex-item-double { & > .#{$kna-namespace}flex-item-double {
width: calc(100% - #{$gutter}); width: calc(100% - #{$gutter} - .01px);
} }
} }
} }