1+ // Vars and Functions
2+ // =============================================================================
3+
4+ $breakpoint-list : unquote ($breakpoint-list );
5+ $current-bp : 0 ; // init breakpoint variable
6+
7+ // converting px to em
8+ @function em ($px , $base : $base-font-size ) { @return ($px / $base ) * 1em ; }
9+
10+ // creates percentage width
11+ @function fluid ($col , $avail : $current-bp ) { @return (100% / $avail ) * $col }
12+
13+ // creates em width
14+ // pass false as a second argument to remove the built in gutter (for creating height measurements)
15+ @function fixed ($col , $gutter : true ) {
16+ @if ($gutter ) { @return $col * ( em ($grid-column + $grid-gutter ) ) }
17+ @else { @return $col * ( em ($grid-column + $grid-gutter ) ) - em ($grid-gutter ) }
18+ }
19+
20+
21+ // Javascript hook for current breakpoint label
22+ // =============================================================================
23+
24+ @media (min-width : 0px ) {
25+ body::before { content : " #{nth ($breakpoint-list , 1 )} " display none ; }
26+ }
27+
28+
29+ // Breakpoint mixin
30+ // =============================================================================
31+
32+ @mixin breakpoint ($min : false, $max : false, $label : false, $orientation : false, $wrapper : true, $resolution : false) {
33+
34+ // set warnings if arguments are invalid
35+ @if ($min == false and $max == false and $label == false and $orientation == false and $wrapper == true and $resolution == false) {
36+ @warn " breakpoint requires you to pass some kind of argument. It can't read your mind. :)"
37+ }
38+ @if ($min == 0 and $max == false and $label == false and $orientation == false and $wrapper == true and $resolution == false) {
39+ @warn " If you pass zero as a minimum you need to specify a max column value."
40+ }
41+
42+ // set current breakpoint for fluid function
43+ $current-bp : $min ;
44+
45+ // min width mq
46+ @if ($min and $max == false) {
47+ @if ($min > 0 ) {
48+ // create min width mq
49+ // can we remove duplication of code here?
50+ @if ($orientation ) {
51+ @media ( min-width fixed ($min ) + em ($grid-gutter )) * ($base-font-size / 16px ) ) and ( orientation $orientation ) {
52+ @include breakpoint-extras ($min , $wrapper , $label , $grid-overlay ) { @content };
53+ }
54+ } @else {
55+ @media ( min-width fixed ($min ) + em ($grid-gutter )) * ($base-font-size / 16px ) ) {
56+ @include breakpoint-extras ($min , $wrapper , $label , $grid-overlay ) { @content };
57+ }
58+ }
59+ // ie fallback
60+ @if ($ie-support and $min <= $ie-support and $orientation == false) {
61+ .lt-ie9 {
62+ @include breakpoint-extras ($min , $wrapper , $label : false, $grid-overlay : false) { @content };
63+ }
64+ }
65+ }
66+ }
67+
68+ // max width mq
69+ @if ($max ) {
70+ // create max only mq
71+ @if ($min == 0 or $min == false) {
72+ @if ($orientation ) {
73+ @media ( max-width fixed ($max ) + em ($grid-gutter ) * ($base-font-size / 16px ) ) and ( orientation $orientation ) { @content }
74+ } @else {
75+ @media ( max-width : fixed ($max ) + em ($grid-gutter ) * ($base-font-size / 16px ) ) { @content }
76+ }
77+ // create min and max mq
78+ } @else {
79+ @if ($orientation ) {
80+ @media ( min-width : fixed ($min ) + em ($grid-gutter ) * ($base-font-size / 16px ) ) and ( max-width : fixed ($max ) + em ($grid-gutter ) ) and ( orientation : $orientation ) { @content }
81+ } @else {
82+ @media ( min-width : fixed ($min ) + em ($grid-gutter ) * ($base-font-size / 16px ) ) and ( max-width : fixed ($max ) + em ($grid-gutter ) ) { @content }
83+ }
84+ }
85+ }
86+
87+ // orientation only mq
88+ @if ($min == false and $max == false) {
89+ @if ($orientation ) {
90+ @media ( orientation : $orientation ) { @content }
91+ }
92+ }
93+
94+ // pixel ratio mq
95+ @if ($resolution ) {
96+ // warn if invalid value
97+ @if ($resolution != ' high' $resolution != ' low'
98+ @warn " $resolution only supports values of 'high' or 'low'"
99+ }
100+ @if ($resolution == ' high'
101+ @media (-webkit-min-device-pixel-ratio 1.5 ), (min-resolution 144dpi ) { @content }
102+ }
103+ @if ($resolution == ' low'
104+ @media (-webkit-max-device-pixel-ratio : 1.5 ), (max- resolution: 144dpi ) { @content }
105+ }
106+ // ie fallback
107+ @if ($ie-support and $resolution == ' low'
108+ .lt-ie9 { @content }
109+ }
110+ }
111+ }
112+
113+ // private mixin for generating extras in a min width mq
114+ @mixin breakpoint-extras ($min , $wrapper , $label , $grid-overlay ) {
115+ @if ($grid-overlay ) { @include grid-overlay ($min ); }
116+
117+ // create hook for js
118+ @if ($label ) {
119+
120+ // label current breakpoint
121+ body ::before { content : $label ; }
122+
123+ // push label to label list names = push(names, myname)
124+ $breakpoint-list : append ($breakpoint-list , unquote ($label ), comma );
125+
126+ }
127+ // proper sizing of wrapper
128+
129+ @if ($wrapper ) { .wrapper { width fixed ($min ) - em ($grid-gutter ); } }
130+
131+ @content
132+ }
133+
134+ // Grid overlay
135+ // =============================================================================
136+
137+ @mixin grid-overlay ($col : false ) {
138+ .grid-overlay {
139+ position : fixed ; top 0 ; bottom 0 ; pointer-events none ; z-index 10000 ;
140+
141+ $overlay-color : transparentize (red , .9 );
142+ background -webkit-linear-gradient (left , transparent $grid-gutter , $overlay-color $grid-gutter , $overlay-color $grid-gutter + $grid-column );
143+ background -moz-linear-gradient (left , transparent $grid-gutter , $overlay-color $grid-gutter , $overlay-color $grid-gutter + $grid-column );
144+ background -o-linear-gradient (left , transparent $grid-gutter , $overlay-color $grid-gutter , $overlay-color $grid-gutter + $grid-column );
145+ background linear-gradient (left , transparent $grid-gutter , $overlay-color $grid-gutter , $overlay-color $grid-gutter + $grid-column );
146+
147+ @if ($col ) {
148+ left 50% ;
149+ width fixed ($col ) + em ($grid-gutter );
150+ margin-left fixed ($col ) / -2 - (em ($grid-gutter )/ 2 );
151+ -webkit-background-size $grid-gutter + $grid-column ;
152+ -moz-background-size $grid-gutter + $grid-column ;
153+ -o-background-size $grid-gutter + $grid-column ;
154+ background-size $grid-gutter + $grid-column ;
155+ } @else {
156+ left 0 ;
157+ right $grid-gutter ;
158+ -webkit-background-size 25% ;
159+ -moz-background-size 25% ;
160+ -o-background-size 25% ;
161+ background-size 25% ;
162+ }
163+ }
164+ }
165+ @if ($grid-overlay ) { @include grid-overlay ; }
0 commit comments