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

Responsive max-width minus 1px to remove overlap, fixes #352

Browse Source
This commit is contained in:
James Barnsley
2019-01-25 12:58:45 +13:00
parent 5e6a9567e8
commit f730ac3a0c
2 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -76,7 +76,7 @@
@include responsive(null, $bp_huge){
&--mini {
.grid__item {
@include grid_item(3)
@include grid_item(3);
}
&--single-row {
.grid-item:nth-child(1n+4){
@ -86,7 +86,7 @@
}
&:not(.grid--mini){
.grid__item {
@include grid_item(5 )
@include grid_item(5);
}
&--single-row {
.grid-item:nth-child(1n+6){
@ -99,7 +99,7 @@
@include responsive($bp_huge, 1200px){
&--mini {
.grid__item {
@include grid_item(2 )
@include grid_item(2);
}
&--single-row {
.grid-item:nth-child(1n+3){
@ -109,7 +109,7 @@
}
&:not(.grid--mini){
.grid__item {
@include grid_item(4 )
@include grid_item(4);
}
&--single-row {
.grid-item:nth-child(1n+5){
@ -119,10 +119,10 @@
}
}
@include responsive(1199px, 800px){
@include responsive(1200px, 800px){
&--mini {
.grid__item {
@include grid_item(2 )
@include grid_item(2);
}
&--single-row {
.grid-item:nth-child(1n+3){
@ -132,7 +132,7 @@
}
&:not(.grid--mini){
.grid__item {
@include grid_item(4 )
@include grid_item(4);
}
&--single-row {
.grid-item:nth-child(1n+5){
@ -142,10 +142,10 @@
}
}
@include responsive(799px, 500px){
@include responsive(800px, 500px){
&--mini{
.grid__item {
@include grid_item(6, 2%, 4% )
@include grid_item(6, 2%, 4%);
}
&--single-row {
.grid-item:nth-child(1n+7){
@ -155,7 +155,7 @@
}
&:not(.grid--mini){
.grid__item {
@include grid_item(3, 2%, 4% )
@include grid_item(3, 2%, 4%);
}
&--single-row {
.grid-item:nth-child(1n+4){
@ -165,10 +165,10 @@
}
}
@include responsive(499px){
@include responsive(500px){
&--mini{
.grid__item {
@include grid_item(3, 2%, 4% )
@include grid_item(3, 2%, 4%);
}
&--single-row {
.grid-item:nth-child(1n+4){
@ -178,7 +178,7 @@
}
&:not(.grid--mini){
.grid__item {
@include grid_item(2, 2%, 4% )
@include grid_item(2, 2%, 4%);
}
&--single-row {
.grid-item:nth-child(1n+5){
@ -263,7 +263,7 @@
@include responsive(null, $bp_medium){
.tile {
@include grid_item(2 );
@include grid_item(2);;
}
}
@ -271,7 +271,7 @@
padding-bottom: 20px;
.tile {
@include grid_item(3 );
@include grid_item(3);;
}
}

8
src/scss/global/_variables.scss
View File

@ -236,19 +236,19 @@ $bp_shallow: 650px;
@mixin responsive($max_width: null, $min_width: null, $max_height: null, $min_height: null){
@if $max_width and $max_height {
@media(max-width: $max_width ), (max-height: $max_height){
@media(max-width: $max_width - 1), (max-height: $max_height - 1){
@content;
}
}@else if $max_width and $min_width {
@media(max-width: $max_width ) and (min-width: $min_width){
@media(max-width: $max_width - 1) and (min-width: $min_width){
@content;
}
}@else if $max_width {
@media(max-width: $max_width){
@media(max-width: $max_width - 1){
@content;
}
}@else if $max_height {
@media(max-height: $max_height){
@media(max-height: $max_height - 1){
@content;
}
}@else if $min_width {