This commit is contained in:
Jeremy Thomas
2018-04-08 20:11:48 +01:00
parent c63b57b58d
commit 740df6a0fa
6 changed files with 80 additions and 16 deletions

View File

@@ -1,7 +1,7 @@
.container
margin: 0 auto
position: relative
+from($desktop)
+desktop
max-width: $desktop - (2 * $gap)
width: $desktop - (2 * $gap)
&.is-fluid
@@ -9,17 +9,17 @@
margin-right: $gap
max-width: none
width: auto
+until($widescreen)
+until-widescreen
&.is-widescreen
max-width: $widescreen - (2 * $gap)
width: auto
+until($fullhd)
+until-fullhd
&.is-fullhd
max-width: $fullhd - (2 * $gap)
width: auto
+from($widescreen)
+widescreen
max-width: $widescreen - (2 * $gap)
width: $widescreen - (2 * $gap)
+from($fullhd)
+fullhd
max-width: $fullhd - (2 * $gap)
width: $fullhd - (2 * $gap)
width: $fullhd - (2 * $gap)

View File

@@ -53,8 +53,10 @@ $tablet: 769px !default
$desktop: 960px + (2 * $gap) !default
// 1152px container + 4rem
$widescreen: 1152px + (2 * $gap) !default
$widescreen-enabled: true !default
// 1344px container + 4rem
$fullhd: 1344px + (2 * $gap) !default
$fullhd-enabled: true !default
// Miscellaneous

View File

@@ -99,20 +99,34 @@
@content
=desktop-only
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
@content
@if $widescreen-enabled
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
@content
=until-widescreen
@if $widescreen-enabled
@media screen and (max-width: $widescreen - 1px)
@content
=widescreen
@media screen and (min-width: $widescreen)
@content
@if $widescreen-enabled
@media screen and (min-width: $widescreen)
@content
=widescreen-only
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content
@if $widescreen-enabled and $fullhd-enabled
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
@content
=until-fullhd
@if $fullhd-enabled
@media screen and (max-width: $fullhd - 1px)
@content
=fullhd
@media screen and (min-width: $fullhd)
@content
@if $fullhd-enabled
@media screen and (min-width: $fullhd)
@content
// Placeholders