-
Notifications
You must be signed in to change notification settings - Fork 0
/
mixins.styl
131 lines (109 loc) · 3.47 KB
/
mixins.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
// @stylint off
/** size(width, height) */
size($width, $height = $width)
width: $width
height: $height
/** rem(px [,base-font-size]), em(px [,base-font-size]) */
rem($px, $base = app.base.fontSize)
return unit($px / $base, 'rem')
em($px, $base = app.base.fontSize)
return unit($px / $base, 'em')
/** Only unquote a string variable */
unquoteStr($maybeStr)
return type($maybeStr) != 'string' ? $maybeStr : unquote($maybeStr)
/*
* Modified verson of Font-face mixin, by jackbrewer
* https://github.com/jackbrewer/stylus-mixins/
*/
font-face($font-name, $file-path, $weight = 'normal', $style = 'normal')
$url = 'url("' + $file-path + '.woff2") format("woff2"),'
$url = $url + ' url("' + $file-path + '.woff") format("woff")'
@font-face
font-family: $font-name
src: unquote($url)
font-weight: unquoteStr($weight)
font-style: unquoteStr($style)
/*
* Responsive property based on viewport units
*
* Usage:
* fluid: property viewportUnitBase minFontSize maxFontSize, fallbackSize
*/
fluid($prop, $fluidVal, $min, $max = false, $fallback = false)
$responsive-unit = unit($fluidVal)
$responsive-unitless = remove-unit($fluidVal)
$min-bp = $min / $responsive-unitless * 100
$max-bp = ($max != false) ? $max / $responsive-unitless * 100 : 0
$minQueries = ()
$maxQueries = ()
$dimensions = (width height)
if ($responsive-unit == 'vw')
$dimensions = (width)
else if ($responsive-unit == 'vh')
$dimensions = (height)
for $dimension in $dimensions
push($minQueries, s('(max-%s: %s)', $dimension, $min-bp))
if ($max)
push($maxQueries, s('(min-%s: %s)', $dimension, $max-bp))
$minQuery = unquote(join(', ', $minQueries))
@media $minQuery
{$prop}: $min
if ($max)
$maxQuery = unquote(join(', ', $maxQueries))
@media $maxQuery
{$prop}: $max
if ($fallback)
{$prop}: $fallback
{$prop}: $fluidVal
/*
* Responsive property mixin
*
* Requires: 'rupture'
*
* Note: Recommended to used a 'combine media query' plugin
*
* Usage:
* responsive: propertyName value/values '<= scaleName' value/values '>= scaleName2' value2/values2
*
* Example:
* responsive: background-image url('desktop.jpg') '<= sm' url('mobile.jpg')
*/
responsive()
$property = shift(arguments)
$initialValue = null
$currentObj = null
$breakpoints = ()
for $value, $index in arguments
$match = null
if type($value) == 'string'
$match = match('^(?:(>|<)=?)\s?(.+)', $value)
/** Check if it is a scale string (<= | >= scaleName) */
if !$match
/** If the current object is null, we're still parsing the initial value */
if !$currentObj
if($initialValue != null)
$initialValue = $initialValue $value
else
$initialValue = $value
else
if($currentObj.value != null)
$currentObj.value = $currentObj.value $value
else
$currentObj.value = $value
else
if $currentObj != null
push($breakpoints, $currentObj)
$currentObj = { scale: $match[2], operator: $match[1] }
/** Append the last breakpoint object to the list */
if $currentObj
push($breakpoints, $currentObj)
if $initialValue
{$property}: $initialValue
for $bpObj in $breakpoints
/** If passed only one breakpoint value, stylus parses it as a list... */
if type($bpObj) != 'object'
$bpObj = $breakpoints
$mediaMixin = $bpObj.operator == '<' ? to-width : from-width
+$mediaMixin($bpObj.scale)
{$property}: $bpObj.value
// @stylint on