secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Responsive grid more verbose, box-sizing for more predictable containers

Browse Source
This commit is contained in:
James Barnsley
2016-11-23 21:42:56 +13:00
parent 3b1c0cb5b1
commit b72ab52004
6 changed files with 43 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/scss/components/_grid.scss
View File

@ -1,16 +1,22 @@
@mixin grid_item( $cols ){
width: ( 0% + (( 100 / $cols ) - 4 ));
&:nth-child(#{$cols}) {
@mixin grid_item( $cols, $gap: 2% ){
width: ( 0% + ( 100 / $cols ) - ( $gap * 2 ) + ( ( $gap * 2 ) / $cols ) );
box-sizing: border-box;
margin: 0 $gap 3%;
&:nth-child(#{$cols}n-#{$cols}) {
margin-right: 0;
@include clearfix;
}
&:nth-child(#{$cols}n-#{$cols - 1}) {
margin-left: 0;
}
}
.grid {
.grid-item {
@include grid_item( 5 )
margin: 0 2% 3%;
display: inline-block;
vertical-align: top;
border-bottom: 0;
@ -76,7 +82,7 @@
}
}
@include responsive( 1200px ){
@include responsive( 1200px, null, 2399px ){
&.mini {
.grid-item {
@include grid_item( 2 )
@ -89,7 +95,7 @@
}
}
@include responsive( 850px ){
@include responsive( 850px, null, 1199px ){
&.mini {
.grid-item {
@include grid_item( 2 )
@ -102,7 +108,7 @@
}
}
@include responsive( 650px ){
@include responsive( null, null, 849px ){
&:not(.mini){
.grid-item {
@include grid_item( 3 )

2
src/scss/components/_player.scss
View File

@ -67,7 +67,7 @@
}
}
@include responsive( $bp_medium, $bp_shallow ){
@include responsive( null, $bp_shallow, $bp_medium ){
position: fixed;
background: $dark_grey;

2
src/scss/components/_sidebar.scss
View File

@ -21,7 +21,7 @@ aside{
z-index: 2;
}
@include responsive( $bp_medium ){
@include responsive( null, null, $bp_medium ){
width: 50%;
left: -50%;