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

4
src/scss/global/_core.scss
View File

@ -21,7 +21,7 @@ footer {
padding-bottom: 60px;
}
@include responsive( $bp_medium ){
@include responsive( null, null, $bp_medium ){
margin-left: 0;
.sidebar-open & {
@ -46,7 +46,7 @@ main {
}
section.grid-wrapper {
padding: 40px 20px;
padding: 40px;
}
section.list-wrapper {

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

@ -12,7 +12,7 @@ $blue: #32b5f2;
$bp_wide: 1000px;
$bp_medium: 800px;
$bp_narrow: 350px;
$bp_shallow: 700px;
$bp_shallow: 650px;
@mixin one_line_text {
white-space: nowrap;
@ -51,17 +51,25 @@ $bp_shallow: 700px;
filter: blur( $size );
}
@mixin responsive( $width: null, $height: null ){
@if $width && $height {
@media( max-width: $width ), ( max-height: $height ){
@mixin responsive( $min_width: null, $max_height: null, $max_width: null ){
@if $max_width and $max_height {
@media( max-width: $max_width ), ( max-height: $max_height ){
@content;
}
}@else if $width {
@media( max-width: $width ){
}@else if $max_width and $min_width {
@media( max-width: $max_width ) and ( min-width: $min_width ){
@content;
}
}@else if $height {
@media( max-height: $height ){
}@else if $max_width {
@media( max-width: $max_width ){
@content;
}
}@else if $max_height {
@media( max-height: $max_height ){
@content;
}
}@else if $min_width {
@media( min-width: $min_width ){
@content;
}
}