dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

.grid-item-first, .grid-item-medium et .grid-item-last

Browse source
This commit is contained in:
Raphael Goetter 2016-05-23 14:36:39 +02:00
parent 478e27b2f6
commit e75663c70e
5 changed files with 22 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

12
sass/_layout-general.scss
View file

@ -121,18 +121,22 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
min-width: 0;
}
.#{$kna-namespace}flex-item-first {
.#{$kna-namespace}flex-item-first,
.#{$kna-namespace}grid-item-first {
order : -1;
}
.#{$kna-namespace}flex-item-medium {
.#{$kna-namespace}flex-item-medium,
.#{$kna-namespace}grid-item-medium {
order : 0;
}
.#{$kna-namespace}flex-item-last {
.#{$kna-namespace}flex-item-last,
.#{$kna-namespace}grid-item-last {
order : 1;
}
.#{$kna-namespace}flex-item-center {
.#{$kna-namespace}flex-item-center,
.#{$kna-namespace}grid-item-center {
margin: auto;
}

12
sass/_layout-grids.scss
View file

@ -36,7 +36,7 @@
& {
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
}
&.flex-item-double {
&.grid-item-double {
width: calc(100% - #{$grid-gutter} - .01px);
}
}
@ -54,7 +54,7 @@
margin-left: $newgutter;
}
}
& > .#{$kna-namespace}flex-item-double {
& > .#{$kna-namespace}grid-item-double {
width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
}
}
@ -74,25 +74,25 @@
[class*="-small-4"] > * {
width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
}
[class*="-small-4"] > .flex-item-double {
[class*="-small-4"] > .grid-item-double {
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
}
[class*="-small-3"] > * {
width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
}
[class*="-small-3"] > .flex-item-double {
[class*="-small-3"] > .grid-item-double {
width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
}
[class*="-small-2"] > * {
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
}
[class*="-small-2"] > .flex-item-double {
[class*="-small-2"] > .grid-item-double {
width: calc(100% - #{$grid-gutter} - .01px);
}
[class*="-small-1"] > * {
width: calc(100% - #{$grid-gutter} - .01px);
}
[class*="-small-1"] > .flex-item-double {
[class*="-small-1"] > .grid-item-double {
width: calc(100% - #{$grid-gutter} - .01px);
}
}