guff-compass 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.editorconfig +21 -0
- data/.gitignore +6 -0
- data/LICENSE.txt +22 -0
- data/README.md +21 -0
- data/demo/bower_components/jquery/.bower.json +21 -0
- data/demo/bower_components/jquery/.editorconfig +43 -0
- data/demo/bower_components/jquery/.gitattributes +2 -0
- data/demo/bower_components/jquery/.gitignore +14 -0
- data/demo/bower_components/jquery/.gitmodules +6 -0
- data/demo/bower_components/jquery/.jshintrc +17 -0
- data/demo/bower_components/jquery/.mailmap +94 -0
- data/demo/bower_components/jquery/AUTHORS.txt +170 -0
- data/demo/bower_components/jquery/CONTRIBUTING.md +216 -0
- data/demo/bower_components/jquery/Gruntfile.js +594 -0
- data/demo/bower_components/jquery/MIT-LICENSE.txt +21 -0
- data/demo/bower_components/jquery/README.md +398 -0
- data/demo/bower_components/jquery/bower.json +11 -0
- data/demo/bower_components/jquery/build/release-notes.js +59 -0
- data/demo/bower_components/jquery/build/release.js +316 -0
- data/demo/bower_components/jquery/component.json +15 -0
- data/demo/bower_components/jquery/composer.json +35 -0
- data/demo/bower_components/jquery/jquery-migrate.js +511 -0
- data/demo/bower_components/jquery/jquery-migrate.min.js +3 -0
- data/demo/bower_components/jquery/jquery.js +9789 -0
- data/demo/bower_components/jquery/jquery.min.js +6 -0
- data/demo/bower_components/jquery/jquery.min.map +1 -0
- data/demo/bower_components/jquery/package.json +38 -0
- data/demo/bower_components/jquery/speed/benchmark.js +15 -0
- data/demo/bower_components/jquery/speed/benchmarker.css +65 -0
- data/demo/bower_components/jquery/speed/benchmarker.js +181 -0
- data/demo/bower_components/jquery/speed/closest.html +39 -0
- data/demo/bower_components/jquery/speed/css.html +82 -0
- data/demo/bower_components/jquery/speed/event.html +58 -0
- data/demo/bower_components/jquery/speed/filter.html +183 -0
- data/demo/bower_components/jquery/speed/find.html +179 -0
- data/demo/bower_components/jquery/speed/index.html +72 -0
- data/demo/bower_components/jquery/speed/jquery-basis.js +6238 -0
- data/demo/bower_components/jquery/speed/slice.vs.concat.html +47 -0
- data/demo/bower_components/jquery/src/.jshintrc +27 -0
- data/demo/bower_components/jquery/src/ajax.js +855 -0
- data/demo/bower_components/jquery/src/ajax/jsonp.js +80 -0
- data/demo/bower_components/jquery/src/ajax/script.js +86 -0
- data/demo/bower_components/jquery/src/ajax/xhr.js +207 -0
- data/demo/bower_components/jquery/src/attributes.js +659 -0
- data/demo/bower_components/jquery/src/callbacks.js +197 -0
- data/demo/bower_components/jquery/src/core.js +981 -0
- data/demo/bower_components/jquery/src/css.js +661 -0
- data/demo/bower_components/jquery/src/data.js +336 -0
- data/demo/bower_components/jquery/src/deferred.js +141 -0
- data/demo/bower_components/jquery/src/deprecated.js +11 -0
- data/demo/bower_components/jquery/src/dimensions.js +41 -0
- data/demo/bower_components/jquery/src/effects.js +732 -0
- data/demo/bower_components/jquery/src/event-alias.js +32 -0
- data/demo/bower_components/jquery/src/event.js +995 -0
- data/demo/bower_components/jquery/src/exports.js +21 -0
- data/demo/bower_components/jquery/src/intro.js +20 -0
- data/demo/bower_components/jquery/src/manipulation.js +744 -0
- data/demo/bower_components/jquery/src/offset.js +169 -0
- data/demo/bower_components/jquery/src/outro.js +2 -0
- data/demo/bower_components/jquery/src/queue.js +146 -0
- data/demo/bower_components/jquery/src/serialize.js +99 -0
- data/demo/bower_components/jquery/src/sizzle-jquery.js +7 -0
- data/demo/bower_components/jquery/src/support.js +246 -0
- data/demo/bower_components/jquery/src/traversing.js +283 -0
- data/demo/bower_components/jquery/src/wrap.js +66 -0
- data/demo/bower_components/jquery/test/.jshintignore +3 -0
- data/demo/bower_components/jquery/test/.jshintrc +60 -0
- data/demo/bower_components/jquery/test/data/1x1.jpg +0 -0
- data/demo/bower_components/jquery/test/data/ajax/unreleasedXHR.html +25 -0
- data/demo/bower_components/jquery/test/data/atom+xml.php +4 -0
- data/demo/bower_components/jquery/test/data/badcall.js +1 -0
- data/demo/bower_components/jquery/test/data/badjson.js +1 -0
- data/demo/bower_components/jquery/test/data/cleanScript.html +10 -0
- data/demo/bower_components/jquery/test/data/core/cc_on.html +22 -0
- data/demo/bower_components/jquery/test/data/dashboard.xml +11 -0
- data/demo/bower_components/jquery/test/data/dimensions/documentLarge.html +17 -0
- data/demo/bower_components/jquery/test/data/dimensions/documentSmall.html +21 -0
- data/demo/bower_components/jquery/test/data/echoData.php +1 -0
- data/demo/bower_components/jquery/test/data/echoQuery.php +1 -0
- data/demo/bower_components/jquery/test/data/errorWithJSON.php +6 -0
- data/demo/bower_components/jquery/test/data/errorWithText.php +5 -0
- data/demo/bower_components/jquery/test/data/etag.php +21 -0
- data/demo/bower_components/jquery/test/data/evalScript.php +1 -0
- data/demo/bower_components/jquery/test/data/event/focusElem.html +16 -0
- data/demo/bower_components/jquery/test/data/event/longLoadScript.php +4 -0
- data/demo/bower_components/jquery/test/data/event/promiseReady.html +17 -0
- data/demo/bower_components/jquery/test/data/event/syncReady.html +23 -0
- data/demo/bower_components/jquery/test/data/headers.php +18 -0
- data/demo/bower_components/jquery/test/data/if_modified_since.php +20 -0
- data/demo/bower_components/jquery/test/data/iframe.html +8 -0
- data/demo/bower_components/jquery/test/data/jquery-1.9.1.ajax_xhr.min.js +5 -0
- data/demo/bower_components/jquery/test/data/json.php +13 -0
- data/demo/bower_components/jquery/test/data/json_obj.js +1 -0
- data/demo/bower_components/jquery/test/data/jsonp.php +14 -0
- data/demo/bower_components/jquery/test/data/manipulation/iframe-denied.html +36 -0
- data/demo/bower_components/jquery/test/data/name.html +1 -0
- data/demo/bower_components/jquery/test/data/name.php +24 -0
- data/demo/bower_components/jquery/test/data/nocontent.php +5 -0
- data/demo/bower_components/jquery/test/data/offset/absolute.html +41 -0
- data/demo/bower_components/jquery/test/data/offset/body.html +26 -0
- data/demo/bower_components/jquery/test/data/offset/fixed.html +34 -0
- data/demo/bower_components/jquery/test/data/offset/relative.html +31 -0
- data/demo/bower_components/jquery/test/data/offset/scroll.html +39 -0
- data/demo/bower_components/jquery/test/data/offset/static.html +31 -0
- data/demo/bower_components/jquery/test/data/offset/table.html +43 -0
- data/demo/bower_components/jquery/test/data/params_html.php +12 -0
- data/demo/bower_components/jquery/test/data/readywaitasset.js +1 -0
- data/demo/bower_components/jquery/test/data/readywaitloader.js +25 -0
- data/demo/bower_components/jquery/test/data/script.php +11 -0
- data/demo/bower_components/jquery/test/data/selector/html5_selector.html +114 -0
- data/demo/bower_components/jquery/test/data/selector/sizzle_cache.html +21 -0
- data/demo/bower_components/jquery/test/data/statusText.php +5 -0
- data/demo/bower_components/jquery/test/data/support/bodyBackground.html +28 -0
- data/demo/bower_components/jquery/test/data/support/boxSizing.html +19 -0
- data/demo/bower_components/jquery/test/data/support/csp.js +3 -0
- data/demo/bower_components/jquery/test/data/support/csp.php +22 -0
- data/demo/bower_components/jquery/test/data/support/shrinkWrapBlocks.html +23 -0
- data/demo/bower_components/jquery/test/data/support/testElementCrash.html +17 -0
- data/demo/bower_components/jquery/test/data/test.html +7 -0
- data/demo/bower_components/jquery/test/data/test.js +3 -0
- data/demo/bower_components/jquery/test/data/test.php +7 -0
- data/demo/bower_components/jquery/test/data/test2.html +5 -0
- data/demo/bower_components/jquery/test/data/test3.html +3 -0
- data/demo/bower_components/jquery/test/data/testinit.js +264 -0
- data/demo/bower_components/jquery/test/data/testrunner.js +371 -0
- data/demo/bower_components/jquery/test/data/testsuite.css +155 -0
- data/demo/bower_components/jquery/test/data/text.php +12 -0
- data/demo/bower_components/jquery/test/data/ua.txt +272 -0
- data/demo/bower_components/jquery/test/data/with_fries.xml +25 -0
- data/demo/bower_components/jquery/test/data/with_fries_over_jsonp.php +7 -0
- data/demo/bower_components/jquery/test/delegatetest.html +228 -0
- data/demo/bower_components/jquery/test/hovertest.html +158 -0
- data/demo/bower_components/jquery/test/index.html +337 -0
- data/demo/bower_components/jquery/test/jquery.js +5 -0
- data/demo/bower_components/jquery/test/localfile.html +75 -0
- data/demo/bower_components/jquery/test/networkerror.html +84 -0
- data/demo/bower_components/jquery/test/readywait.html +70 -0
- data/demo/bower_components/jquery/test/unit/ajax.js +2016 -0
- data/demo/bower_components/jquery/test/unit/attributes.js +1388 -0
- data/demo/bower_components/jquery/test/unit/callbacks.js +342 -0
- data/demo/bower_components/jquery/test/unit/core.js +1360 -0
- data/demo/bower_components/jquery/test/unit/css.js +1056 -0
- data/demo/bower_components/jquery/test/unit/data.js +645 -0
- data/demo/bower_components/jquery/test/unit/deferred.js +436 -0
- data/demo/bower_components/jquery/test/unit/deprecated.js +8 -0
- data/demo/bower_components/jquery/test/unit/dimensions.js +472 -0
- data/demo/bower_components/jquery/test/unit/effects.js +2242 -0
- data/demo/bower_components/jquery/test/unit/event.js +2755 -0
- data/demo/bower_components/jquery/test/unit/exports.js +7 -0
- data/demo/bower_components/jquery/test/unit/manipulation.js +2120 -0
- data/demo/bower_components/jquery/test/unit/offset.js +559 -0
- data/demo/bower_components/jquery/test/unit/queue.js +314 -0
- data/demo/bower_components/jquery/test/unit/selector.js +172 -0
- data/demo/bower_components/jquery/test/unit/serialize.js +148 -0
- data/demo/bower_components/jquery/test/unit/support.js +370 -0
- data/demo/bower_components/jquery/test/unit/traversing.js +797 -0
- data/demo/bower_components/jquery/test/unit/wrap.js +265 -0
- data/demo/bower_components/jquery/test/xhtml.php +5 -0
- data/demo/index.html +347 -0
- data/demo/styles/main.css +208 -0
- data/demo/styles/main.scss +138 -0
- data/docs/docco.css +506 -0
- data/docs/guff.html +1127 -0
- data/docs/public/fonts/aller-bold.eot +0 -0
- data/docs/public/fonts/aller-bold.ttf +0 -0
- data/docs/public/fonts/aller-bold.woff +0 -0
- data/docs/public/fonts/aller-light.eot +0 -0
- data/docs/public/fonts/aller-light.ttf +0 -0
- data/docs/public/fonts/aller-light.woff +0 -0
- data/docs/public/fonts/novecento-bold.eot +0 -0
- data/docs/public/fonts/novecento-bold.ttf +0 -0
- data/docs/public/fonts/novecento-bold.woff +0 -0
- data/docs/public/stylesheets/normalize.css +375 -0
- data/guff.gemspec +16 -0
- data/guff.scss +514 -0
- data/gulpfile.js +67 -0
- data/lib/guff.rb +4 -0
- data/lib/stylesheets/_guff.scss +514 -0
- data/package.json +19 -0
- data/src/_functions.scss +57 -0
- data/src/_mixins.scss +301 -0
- data/src/_reset.scss +67 -0
- data/src/_settings.scss +22 -0
- data/src/_typography.scss +67 -0
- metadata +259 -0
data/docs/guff.html
ADDED
|
@@ -0,0 +1,1127 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>guff.scss</title>
|
|
6
|
+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
|
8
|
+
<link rel="stylesheet" media="all" href="docco.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="container">
|
|
12
|
+
<div id="background"></div>
|
|
13
|
+
|
|
14
|
+
<ul class="sections">
|
|
15
|
+
|
|
16
|
+
<li id="title">
|
|
17
|
+
<div class="annotation">
|
|
18
|
+
<h1>guff.scss</h1>
|
|
19
|
+
</div>
|
|
20
|
+
</li>
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
<li id="section-1">
|
|
25
|
+
<div class="annotation">
|
|
26
|
+
|
|
27
|
+
<div class="pilwrap ">
|
|
28
|
+
<a class="pilcrow" href="#section-1">¶</a>
|
|
29
|
+
</div>
|
|
30
|
+
<h3 id="reset">Reset</h3>
|
|
31
|
+
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
</li>
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
<li id="section-2">
|
|
38
|
+
<div class="annotation">
|
|
39
|
+
|
|
40
|
+
<div class="pilwrap ">
|
|
41
|
+
<a class="pilcrow" href="#section-2">¶</a>
|
|
42
|
+
</div>
|
|
43
|
+
<p>Mixin Reset</p>
|
|
44
|
+
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> reset</span>(){</span></pre></div></div>
|
|
48
|
+
|
|
49
|
+
</li>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
<li id="section-3">
|
|
53
|
+
<div class="annotation">
|
|
54
|
+
|
|
55
|
+
<div class="pilwrap ">
|
|
56
|
+
<a class="pilcrow" href="#section-3">¶</a>
|
|
57
|
+
</div>
|
|
58
|
+
<p>Reset all browser styles & set font-size to 100%</p>
|
|
59
|
+
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<div class="content"><div class='highlight'><pre> <span class="hljs-tag">html</span>, <span class="hljs-tag">body</span>, <span class="hljs-tag">div</span>, <span class="hljs-tag">span</span>, applet, <span class="hljs-tag">object</span>, <span class="hljs-tag">iframe</span>,
|
|
63
|
+
<span class="hljs-tag">h1</span>, <span class="hljs-tag">h2</span>, <span class="hljs-tag">h3</span>, <span class="hljs-tag">h4</span>, <span class="hljs-tag">h5</span>, <span class="hljs-tag">h6</span>, <span class="hljs-tag">p</span>, <span class="hljs-tag">blockquote</span>, <span class="hljs-tag">pre</span>,
|
|
64
|
+
<span class="hljs-tag">a</span>, <span class="hljs-tag">abbr</span>, <span class="hljs-tag">acronym</span>, <span class="hljs-tag">address</span>, <span class="hljs-tag">big</span>, <span class="hljs-tag">cite</span>, <span class="hljs-tag">code</span>,
|
|
65
|
+
<span class="hljs-tag">del</span>, <span class="hljs-tag">dfn</span>, <span class="hljs-tag">em</span>, <span class="hljs-tag">img</span>, <span class="hljs-tag">ins</span>, <span class="hljs-tag">kbd</span>, <span class="hljs-tag">q</span>, s, <span class="hljs-tag">samp</span>,
|
|
66
|
+
<span class="hljs-tag">small</span>, <span class="hljs-tag">strike</span>, <span class="hljs-tag">strong</span>, <span class="hljs-tag">sub</span>, <span class="hljs-tag">sup</span>, <span class="hljs-tag">tt</span>, <span class="hljs-tag">var</span>,
|
|
67
|
+
<span class="hljs-tag">b</span>, u, <span class="hljs-tag">i</span>, <span class="hljs-value">center</span>,
|
|
68
|
+
<span class="hljs-tag">dl</span>, <span class="hljs-tag">dt</span>, <span class="hljs-tag">dd</span>, <span class="hljs-tag">ol</span>, <span class="hljs-tag">ul</span>, <span class="hljs-tag">li</span>,
|
|
69
|
+
<span class="hljs-tag">fieldset</span>, <span class="hljs-tag">form</span>, <span class="hljs-tag">label</span>, <span class="hljs-tag">legend</span>,
|
|
70
|
+
<span class="hljs-tag">table</span>, <span class="hljs-tag">caption</span>, <span class="hljs-tag">tbody</span>, <span class="hljs-tag">tfoot</span>, <span class="hljs-tag">thead</span>, <span class="hljs-tag">tr</span>, <span class="hljs-tag">th</span>, <span class="hljs-tag">td</span>,
|
|
71
|
+
<span class="hljs-tag">article</span>, <span class="hljs-tag">aside</span>, <span class="hljs-tag">canvas</span>, <span class="hljs-tag">details</span>, <span class="hljs-tag">embed</span>,
|
|
72
|
+
<span class="hljs-tag">figure</span>, <span class="hljs-tag">figcaption</span>, <span class="hljs-tag">footer</span>, <span class="hljs-tag">header</span>, <span class="hljs-tag">hgroup</span>,
|
|
73
|
+
menu, <span class="hljs-tag">nav</span>, <span class="hljs-tag">output</span>, <span class="hljs-tag">ruby</span>, <span class="hljs-tag">section</span>, summary,
|
|
74
|
+
<span class="hljs-tag">time</span>, <span class="hljs-tag">mark</span>, <span class="hljs-tag">audio</span>, <span class="hljs-tag">video</span> {
|
|
75
|
+
<span class="hljs-attribute">margin</span><span class="hljs-value">: <span class="hljs-number">0</span>;</span>
|
|
76
|
+
<span class="hljs-attribute">padding</span><span class="hljs-value">: <span class="hljs-number">0</span>;</span>
|
|
77
|
+
<span class="hljs-attribute">border</span><span class="hljs-value">: <span class="hljs-number">0</span>;</span>
|
|
78
|
+
<span class="hljs-attribute">font-size</span><span class="hljs-value">: <span class="hljs-number">100</span>%;</span>
|
|
79
|
+
<span class="hljs-attribute">font</span><span class="hljs-value">: inherit;</span>
|
|
80
|
+
<span class="hljs-attribute">vertical-align</span><span class="hljs-value">: baseline;</span>
|
|
81
|
+
}</pre></div></div>
|
|
82
|
+
|
|
83
|
+
</li>
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
<li id="section-4">
|
|
87
|
+
<div class="annotation">
|
|
88
|
+
|
|
89
|
+
<div class="pilwrap ">
|
|
90
|
+
<a class="pilcrow" href="#section-4">¶</a>
|
|
91
|
+
</div>
|
|
92
|
+
<p>Set HTML5 elements to block</p>
|
|
93
|
+
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="content"><div class='highlight'><pre> <span class="hljs-tag">article</span>, <span class="hljs-tag">aside</span>, <span class="hljs-tag">details</span>, <span class="hljs-tag">figcaption</span>, <span class="hljs-tag">figure</span>,
|
|
97
|
+
<span class="hljs-tag">footer</span>, <span class="hljs-tag">header</span>, <span class="hljs-tag">hgroup</span>, main, menu, <span class="hljs-tag">nav</span>, <span class="hljs-tag">section</span> {
|
|
98
|
+
<span class="hljs-attribute">display</span><span class="hljs-value">: block;</span>
|
|
99
|
+
}</pre></div></div>
|
|
100
|
+
|
|
101
|
+
</li>
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
<li id="section-5">
|
|
105
|
+
<div class="annotation">
|
|
106
|
+
|
|
107
|
+
<div class="pilwrap ">
|
|
108
|
+
<a class="pilcrow" href="#section-5">¶</a>
|
|
109
|
+
</div>
|
|
110
|
+
<p>Remove built in list styling</p>
|
|
111
|
+
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<div class="content"><div class='highlight'><pre> <span class="hljs-tag">ol</span>, <span class="hljs-tag">ul</span> {
|
|
115
|
+
<span class="hljs-attribute">list-style</span><span class="hljs-value">: none;</span>
|
|
116
|
+
}</pre></div></div>
|
|
117
|
+
|
|
118
|
+
</li>
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
<li id="section-6">
|
|
122
|
+
<div class="annotation">
|
|
123
|
+
|
|
124
|
+
<div class="pilwrap ">
|
|
125
|
+
<a class="pilcrow" href="#section-6">¶</a>
|
|
126
|
+
</div>
|
|
127
|
+
<p>Remove link underlining</p>
|
|
128
|
+
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div class="content"><div class='highlight'><pre> <span class="hljs-tag">a</span> {
|
|
132
|
+
<span class="hljs-attribute">text-decoration</span><span class="hljs-value">: none;</span>
|
|
133
|
+
}</pre></div></div>
|
|
134
|
+
|
|
135
|
+
</li>
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
<li id="section-7">
|
|
139
|
+
<div class="annotation">
|
|
140
|
+
|
|
141
|
+
<div class="pilwrap ">
|
|
142
|
+
<a class="pilcrow" href="#section-7">¶</a>
|
|
143
|
+
</div>
|
|
144
|
+
<p>Normalize block quotes</p>
|
|
145
|
+
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<div class="content"><div class='highlight'><pre> <span class="hljs-tag">blockquote</span>, <span class="hljs-tag">q</span> {
|
|
149
|
+
<span class="hljs-attribute">quotes</span><span class="hljs-value">: none;</span>
|
|
150
|
+
}</pre></div></div>
|
|
151
|
+
|
|
152
|
+
</li>
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
<li id="section-8">
|
|
156
|
+
<div class="annotation">
|
|
157
|
+
|
|
158
|
+
<div class="pilwrap ">
|
|
159
|
+
<a class="pilcrow" href="#section-8">¶</a>
|
|
160
|
+
</div>
|
|
161
|
+
<p>Remove pseudo elements</p>
|
|
162
|
+
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<div class="content"><div class='highlight'><pre> <span class="hljs-tag">blockquote</span><span class="hljs-pseudo">:before</span>, <span class="hljs-tag">blockquote</span><span class="hljs-pseudo">:after</span>,
|
|
166
|
+
<span class="hljs-tag">q</span><span class="hljs-pseudo">:before</span>, <span class="hljs-tag">q</span><span class="hljs-pseudo">:after</span> {
|
|
167
|
+
<span class="hljs-attribute">content</span><span class="hljs-value">: <span class="hljs-string">''</span>;</span>
|
|
168
|
+
<span class="hljs-attribute">content</span><span class="hljs-value">: none;</span>
|
|
169
|
+
}</pre></div></div>
|
|
170
|
+
|
|
171
|
+
</li>
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
<li id="section-9">
|
|
175
|
+
<div class="annotation">
|
|
176
|
+
|
|
177
|
+
<div class="pilwrap ">
|
|
178
|
+
<a class="pilcrow" href="#section-9">¶</a>
|
|
179
|
+
</div>
|
|
180
|
+
<p>Normalize tables</p>
|
|
181
|
+
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<div class="content"><div class='highlight'><pre> <span class="hljs-tag">table</span> {
|
|
185
|
+
<span class="hljs-attribute">border-collapse</span><span class="hljs-value">: collapse;</span>
|
|
186
|
+
<span class="hljs-attribute">border-spacing</span><span class="hljs-value">: <span class="hljs-number">0</span>;</span>
|
|
187
|
+
}</pre></div></div>
|
|
188
|
+
|
|
189
|
+
</li>
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
<li id="section-10">
|
|
193
|
+
<div class="annotation">
|
|
194
|
+
|
|
195
|
+
<div class="pilwrap ">
|
|
196
|
+
<a class="pilcrow" href="#section-10">¶</a>
|
|
197
|
+
</div>
|
|
198
|
+
<p>Global border-box</p>
|
|
199
|
+
|
|
200
|
+
</div>
|
|
201
|
+
|
|
202
|
+
<div class="content"><div class='highlight'><pre> * {
|
|
203
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> box-sizing</span>(border-box);</span>
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
}</pre></div></div>
|
|
207
|
+
|
|
208
|
+
</li>
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
<li id="section-11">
|
|
212
|
+
<div class="annotation">
|
|
213
|
+
|
|
214
|
+
<div class="pilwrap ">
|
|
215
|
+
<a class="pilcrow" href="#section-11">¶</a>
|
|
216
|
+
</div>
|
|
217
|
+
<h3 id="settings">Settings</h3>
|
|
218
|
+
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
</li>
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
<li id="section-12">
|
|
225
|
+
<div class="annotation">
|
|
226
|
+
|
|
227
|
+
<div class="pilwrap ">
|
|
228
|
+
<a class="pilcrow" href="#section-12">¶</a>
|
|
229
|
+
</div>
|
|
230
|
+
<p>Set base font size</p>
|
|
231
|
+
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div class="content"><div class='highlight'><pre>$rem-<span class="hljs-tag">base</span><span class="hljs-value">: <span class="hljs-number">16</span>px !default;</span></pre></div></div>
|
|
235
|
+
|
|
236
|
+
</li>
|
|
237
|
+
|
|
238
|
+
|
|
239
|
+
<li id="section-13">
|
|
240
|
+
<div class="annotation">
|
|
241
|
+
|
|
242
|
+
<div class="pilwrap ">
|
|
243
|
+
<a class="pilcrow" href="#section-13">¶</a>
|
|
244
|
+
</div>
|
|
245
|
+
<p>Set line height ratio base</p>
|
|
246
|
+
|
|
247
|
+
</div>
|
|
248
|
+
|
|
249
|
+
<div class="content"><div class='highlight'><pre>$<span class="hljs-attribute">line-height</span>-<span class="hljs-tag">base</span><span class="hljs-value">: <span class="hljs-number">26</span>px !default;</span></pre></div></div>
|
|
250
|
+
|
|
251
|
+
</li>
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
<li id="section-14">
|
|
255
|
+
<div class="annotation">
|
|
256
|
+
|
|
257
|
+
<div class="pilwrap ">
|
|
258
|
+
<a class="pilcrow" href="#section-14">¶</a>
|
|
259
|
+
</div>
|
|
260
|
+
<p>Vertical rhythm ratio</p>
|
|
261
|
+
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<div class="content"><div class='highlight'><pre>$type-rhythm-ratio<span class="hljs-value">: <span class="hljs-number">1.14</span> !default;</span></pre></div></div>
|
|
265
|
+
|
|
266
|
+
</li>
|
|
267
|
+
|
|
268
|
+
|
|
269
|
+
<li id="section-15">
|
|
270
|
+
<div class="annotation">
|
|
271
|
+
|
|
272
|
+
<div class="pilwrap ">
|
|
273
|
+
<a class="pilcrow" href="#section-15">¶</a>
|
|
274
|
+
</div>
|
|
275
|
+
<p>Desktop Media Query</p>
|
|
276
|
+
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<div class="content"><div class='highlight'><pre>$desktop<span class="hljs-value">: <span class="hljs-string">"(min-width: 1024px)"</span> !default;</span></pre></div></div>
|
|
280
|
+
|
|
281
|
+
</li>
|
|
282
|
+
|
|
283
|
+
|
|
284
|
+
<li id="section-16">
|
|
285
|
+
<div class="annotation">
|
|
286
|
+
|
|
287
|
+
<div class="pilwrap ">
|
|
288
|
+
<a class="pilcrow" href="#section-16">¶</a>
|
|
289
|
+
</div>
|
|
290
|
+
<p>Tablet Media Query</p>
|
|
291
|
+
|
|
292
|
+
</div>
|
|
293
|
+
|
|
294
|
+
<div class="content"><div class='highlight'><pre>$tablet<span class="hljs-value">: <span class="hljs-string">"(min-width: 768px) and (max-width: 1023px)"</span> !default;</span></pre></div></div>
|
|
295
|
+
|
|
296
|
+
</li>
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
<li id="section-17">
|
|
300
|
+
<div class="annotation">
|
|
301
|
+
|
|
302
|
+
<div class="pilwrap ">
|
|
303
|
+
<a class="pilcrow" href="#section-17">¶</a>
|
|
304
|
+
</div>
|
|
305
|
+
<p>Mobile Media Query</p>
|
|
306
|
+
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
<div class="content"><div class='highlight'><pre>$mobile<span class="hljs-value">: <span class="hljs-string">"(max-width: 767px)"</span> !default;</span></pre></div></div>
|
|
310
|
+
|
|
311
|
+
</li>
|
|
312
|
+
|
|
313
|
+
|
|
314
|
+
<li id="section-18">
|
|
315
|
+
<div class="annotation">
|
|
316
|
+
|
|
317
|
+
<div class="pilwrap ">
|
|
318
|
+
<a class="pilcrow" href="#section-18">¶</a>
|
|
319
|
+
</div>
|
|
320
|
+
<p>Set Grid Column Count</p>
|
|
321
|
+
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
<div class="content"><div class='highlight'><pre>$grid-<span class="hljs-attribute">columns</span><span class="hljs-value">: <span class="hljs-number">12</span> !default;</span></pre></div></div>
|
|
325
|
+
|
|
326
|
+
</li>
|
|
327
|
+
|
|
328
|
+
|
|
329
|
+
<li id="section-19">
|
|
330
|
+
<div class="annotation">
|
|
331
|
+
|
|
332
|
+
<div class="pilwrap ">
|
|
333
|
+
<a class="pilcrow" href="#section-19">¶</a>
|
|
334
|
+
</div>
|
|
335
|
+
<p>Set Grid Gutter (as px)</p>
|
|
336
|
+
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<div class="content"><div class='highlight'><pre>$grid-gutter<span class="hljs-value">: <span class="hljs-number">20</span>px !default;</span></pre></div></div>
|
|
340
|
+
|
|
341
|
+
</li>
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
<li id="section-20">
|
|
345
|
+
<div class="annotation">
|
|
346
|
+
|
|
347
|
+
<div class="pilwrap ">
|
|
348
|
+
<a class="pilcrow" href="#section-20">¶</a>
|
|
349
|
+
</div>
|
|
350
|
+
<p>Set Grid Padding (as px)</p>
|
|
351
|
+
|
|
352
|
+
</div>
|
|
353
|
+
|
|
354
|
+
<div class="content"><div class='highlight'><pre>$grid-<span class="hljs-attribute">padding</span><span class="hljs-value">: <span class="hljs-number">20</span>px !default;</span></pre></div></div>
|
|
355
|
+
|
|
356
|
+
</li>
|
|
357
|
+
|
|
358
|
+
|
|
359
|
+
<li id="section-21">
|
|
360
|
+
<div class="annotation">
|
|
361
|
+
|
|
362
|
+
<div class="pilwrap ">
|
|
363
|
+
<a class="pilcrow" href="#section-21">¶</a>
|
|
364
|
+
</div>
|
|
365
|
+
<p>Set Grid Max Width (as px)</p>
|
|
366
|
+
|
|
367
|
+
</div>
|
|
368
|
+
|
|
369
|
+
<div class="content"><div class='highlight'><pre>$grid-<span class="hljs-attribute">max-width</span><span class="hljs-value">: <span class="hljs-number">1024</span>px !default;</span></pre></div></div>
|
|
370
|
+
|
|
371
|
+
</li>
|
|
372
|
+
|
|
373
|
+
|
|
374
|
+
<li id="section-22">
|
|
375
|
+
<div class="annotation">
|
|
376
|
+
|
|
377
|
+
<div class="pilwrap ">
|
|
378
|
+
<a class="pilcrow" href="#section-22">¶</a>
|
|
379
|
+
</div>
|
|
380
|
+
<h3 id="functions">Functions</h3>
|
|
381
|
+
|
|
382
|
+
</div>
|
|
383
|
+
|
|
384
|
+
</li>
|
|
385
|
+
|
|
386
|
+
|
|
387
|
+
<li id="section-23">
|
|
388
|
+
<div class="annotation">
|
|
389
|
+
|
|
390
|
+
<div class="pilwrap ">
|
|
391
|
+
<a class="pilcrow" href="#section-23">¶</a>
|
|
392
|
+
</div>
|
|
393
|
+
<p>Strips unit suffix from value</p>
|
|
394
|
+
|
|
395
|
+
</div>
|
|
396
|
+
|
|
397
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@function<span class="hljs-preprocessor"> _strip-unit</span>($num) {</span>
|
|
398
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($num) != <span class="hljs-string">"number"</span> {</span>
|
|
399
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"num: #{$num} is not a number"</span>;</span>
|
|
400
|
+
<span class="hljs-at_rule">@return<span class="hljs-preprocessor"> null</span>;</span>
|
|
401
|
+
}
|
|
402
|
+
<span class="hljs-at_rule">@return $num / ($num *<span class="hljs-preprocessor"> 0</span> +<span class="hljs-preprocessor"> 1</span>);</span>
|
|
403
|
+
}</pre></div></div>
|
|
404
|
+
|
|
405
|
+
</li>
|
|
406
|
+
|
|
407
|
+
|
|
408
|
+
<li id="section-24">
|
|
409
|
+
<div class="annotation">
|
|
410
|
+
|
|
411
|
+
<div class="pilwrap ">
|
|
412
|
+
<a class="pilcrow" href="#section-24">¶</a>
|
|
413
|
+
</div>
|
|
414
|
+
<p>Converts to rem, utility for rem-calc</p>
|
|
415
|
+
|
|
416
|
+
</div>
|
|
417
|
+
|
|
418
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@function<span class="hljs-preprocessor"> _convert-to-rem</span>($value, $base-value: $rem-base) {</span>
|
|
419
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($value) != <span class="hljs-string">"number"</span> {</span>
|
|
420
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"value: #{$value} is not a number"</span>;</span>
|
|
421
|
+
<span class="hljs-at_rule">@return<span class="hljs-preprocessor"> null</span>;</span>
|
|
422
|
+
}
|
|
423
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($base-value) != <span class="hljs-string">"number"</span> {</span>
|
|
424
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"base-value: #{$base-value} is not a number"</span>;</span>
|
|
425
|
+
<span class="hljs-at_rule">@return<span class="hljs-preprocessor"> null</span>;</span>
|
|
426
|
+
}
|
|
427
|
+
$value<span class="hljs-value">: _strip-unit($value) / _strip-unit($base-value) * <span class="hljs-number">1</span>rem;</span>
|
|
428
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> (_<span class="hljs-function">strip-unit($value)</span> ==<span class="hljs-preprocessor"> 0</span>) {</span> $value<span class="hljs-value">: <span class="hljs-number">0</span>;</span> } <span class="hljs-comment">// Turn 0rem into 0</span>
|
|
429
|
+
<span class="hljs-at_rule">@return $value;</span>
|
|
430
|
+
}</pre></div></div>
|
|
431
|
+
|
|
432
|
+
</li>
|
|
433
|
+
|
|
434
|
+
|
|
435
|
+
<li id="section-25">
|
|
436
|
+
<div class="annotation">
|
|
437
|
+
|
|
438
|
+
<div class="pilwrap ">
|
|
439
|
+
<a class="pilcrow" href="#section-25">¶</a>
|
|
440
|
+
</div>
|
|
441
|
+
<p>Calculates rem value from number</p>
|
|
442
|
+
|
|
443
|
+
</div>
|
|
444
|
+
|
|
445
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@function<span class="hljs-preprocessor"> rem-calc</span>($values, $base-value: $rem-base) {</span>
|
|
446
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($values) != <span class="hljs-string">"number"</span> {</span>
|
|
447
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"values: #{$values} is not a number"</span>;</span>
|
|
448
|
+
<span class="hljs-at_rule">@return<span class="hljs-preprocessor"> null</span>;</span>
|
|
449
|
+
}
|
|
450
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($base-value) != <span class="hljs-string">"number"</span> {</span>
|
|
451
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"base-value: #{$base-value} is not a number"</span>;</span>
|
|
452
|
+
<span class="hljs-at_rule">@return<span class="hljs-preprocessor"> null</span>;</span>
|
|
453
|
+
}
|
|
454
|
+
$max<span class="hljs-value">: length($values);</span>
|
|
455
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $max ==<span class="hljs-preprocessor"> 1</span> {</span> <span class="hljs-at_rule">@return<span class="hljs-preprocessor"> _convert-to-rem</span>(<span class="hljs-function">nth($values, <span class="hljs-number">1</span>)</span>, $base-value);</span> }
|
|
456
|
+
$remValues<span class="hljs-value">: ();</span>
|
|
457
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">for</span> $i<span class="hljs-preprocessor"> from</span><span class="hljs-preprocessor"> 1</span><span class="hljs-preprocessor"> through</span> $max {</span>
|
|
458
|
+
$remValues<span class="hljs-value">: append($remValues, _convert-to-rem(nth($values, $i), $base-value));</span>
|
|
459
|
+
}
|
|
460
|
+
<span class="hljs-at_rule">@return $remValues;</span>
|
|
461
|
+
}</pre></div></div>
|
|
462
|
+
|
|
463
|
+
</li>
|
|
464
|
+
|
|
465
|
+
|
|
466
|
+
<li id="section-26">
|
|
467
|
+
<div class="annotation">
|
|
468
|
+
|
|
469
|
+
<div class="pilwrap ">
|
|
470
|
+
<a class="pilcrow" href="#section-26">¶</a>
|
|
471
|
+
</div>
|
|
472
|
+
<p>Gets grid column width</p>
|
|
473
|
+
|
|
474
|
+
</div>
|
|
475
|
+
|
|
476
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@function<span class="hljs-preprocessor"> span</span>($cols:<span class="hljs-preprocessor"> 4</span>) {</span>
|
|
477
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($cols) != <span class="hljs-string">"number"</span> {</span>
|
|
478
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"cols: #{$cols} is not a number"</span>;</span>
|
|
479
|
+
<span class="hljs-at_rule">@return<span class="hljs-preprocessor"> null</span>;</span>
|
|
480
|
+
}
|
|
481
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($grid-columns) != <span class="hljs-string">"number"</span> {</span>
|
|
482
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"grid-columns: #{$grid-columns} is not a number"</span>;</span>
|
|
483
|
+
$valid<span class="hljs-value">: false;</span>
|
|
484
|
+
}
|
|
485
|
+
<span class="hljs-at_rule">@return<span class="hljs-preprocessor"> percentage</span>($cols/$grid-columns);</span>
|
|
486
|
+
}</pre></div></div>
|
|
487
|
+
|
|
488
|
+
</li>
|
|
489
|
+
|
|
490
|
+
|
|
491
|
+
<li id="section-27">
|
|
492
|
+
<div class="annotation">
|
|
493
|
+
|
|
494
|
+
<div class="pilwrap ">
|
|
495
|
+
<a class="pilcrow" href="#section-27">¶</a>
|
|
496
|
+
</div>
|
|
497
|
+
<h3 id="mixins">Mixins</h3>
|
|
498
|
+
|
|
499
|
+
</div>
|
|
500
|
+
|
|
501
|
+
</li>
|
|
502
|
+
|
|
503
|
+
|
|
504
|
+
<li id="section-28">
|
|
505
|
+
<div class="annotation">
|
|
506
|
+
|
|
507
|
+
<div class="pilwrap ">
|
|
508
|
+
<a class="pilcrow" href="#section-28">¶</a>
|
|
509
|
+
</div>
|
|
510
|
+
<p>Sets container styles</p>
|
|
511
|
+
|
|
512
|
+
</div>
|
|
513
|
+
|
|
514
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> container</span> {</span>
|
|
515
|
+
$valid<span class="hljs-value">: true;</span>
|
|
516
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($grid-max-width) != <span class="hljs-string">"number"</span> {</span>
|
|
517
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"grid-max-width: #{$grid-max-width} is not a number"</span>;</span>
|
|
518
|
+
$valid<span class="hljs-value">: false;</span>
|
|
519
|
+
}
|
|
520
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($rem-base) != <span class="hljs-string">"number"</span> {</span>
|
|
521
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"rem-base: #{$rem-base} is not a number"</span>;</span>
|
|
522
|
+
$valid<span class="hljs-value">: false;</span>
|
|
523
|
+
}
|
|
524
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
525
|
+
<span class="hljs-attribute">width</span><span class="hljs-value">: <span class="hljs-number">100</span>%;</span>
|
|
526
|
+
<span class="hljs-attribute">max-width</span><span class="hljs-value">: $grid-max-width;</span>
|
|
527
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> clear</span>;</span>
|
|
528
|
+
}
|
|
529
|
+
}</pre></div></div>
|
|
530
|
+
|
|
531
|
+
</li>
|
|
532
|
+
|
|
533
|
+
|
|
534
|
+
<li id="section-29">
|
|
535
|
+
<div class="annotation">
|
|
536
|
+
|
|
537
|
+
<div class="pilwrap ">
|
|
538
|
+
<a class="pilcrow" href="#section-29">¶</a>
|
|
539
|
+
</div>
|
|
540
|
+
<p>Sets col container styles</p>
|
|
541
|
+
|
|
542
|
+
</div>
|
|
543
|
+
|
|
544
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> col-container</span> {</span>
|
|
545
|
+
$valid<span class="hljs-value">: true;</span>
|
|
546
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($grid-max-width) != <span class="hljs-string">"number"</span> {</span>
|
|
547
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"grid-max-width: #{$grid-max-width} is not a number"</span>;</span>
|
|
548
|
+
$valid<span class="hljs-value">: false;</span>
|
|
549
|
+
}
|
|
550
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($rem-base) != <span class="hljs-string">"number"</span> {</span>
|
|
551
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"rem-base: #{$rem-base} is not a number"</span>;</span>
|
|
552
|
+
$valid<span class="hljs-value">: false;</span>
|
|
553
|
+
}
|
|
554
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
555
|
+
<span class="hljs-attribute">width</span><span class="hljs-value">: <span class="hljs-number">100</span>%;</span>
|
|
556
|
+
<span class="hljs-attribute">text-align</span><span class="hljs-value">: justify <span class="hljs-important">!important</span>;</span>
|
|
557
|
+
<span class="hljs-value">text</span>-<span class="hljs-value">justify</span><span class="hljs-value">: distribute-all-lines;</span>
|
|
558
|
+
<span class="hljs-attribute">font-size</span><span class="hljs-value">: <span class="hljs-number">0</span> <span class="hljs-important">!important</span>;</span>
|
|
559
|
+
<span class="hljs-attribute">max-width</span><span class="hljs-value">: $grid-max-width;</span>
|
|
560
|
+
& > * {
|
|
561
|
+
<span class="hljs-attribute">text-align</span><span class="hljs-value">: left;</span>
|
|
562
|
+
<span class="hljs-attribute">font</span>-sze<span class="hljs-value">: rem-calc($rem-base);</span>
|
|
563
|
+
}
|
|
564
|
+
&<span class="hljs-pseudo">:after</span> {
|
|
565
|
+
<span class="hljs-attribute">content</span><span class="hljs-value">: <span class="hljs-string">''</span>;</span>
|
|
566
|
+
<span class="hljs-attribute">display</span><span class="hljs-value">: inline-block;</span>
|
|
567
|
+
<span class="hljs-attribute">width</span><span class="hljs-value">: <span class="hljs-number">100</span>%;</span>
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
}</pre></div></div>
|
|
571
|
+
|
|
572
|
+
</li>
|
|
573
|
+
|
|
574
|
+
|
|
575
|
+
<li id="section-30">
|
|
576
|
+
<div class="annotation">
|
|
577
|
+
|
|
578
|
+
<div class="pilwrap ">
|
|
579
|
+
<a class="pilcrow" href="#section-30">¶</a>
|
|
580
|
+
</div>
|
|
581
|
+
<p>Sets grid column width</p>
|
|
582
|
+
|
|
583
|
+
</div>
|
|
584
|
+
|
|
585
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> span</span>($cols:<span class="hljs-preprocessor"> 4</span>, $padding:<span class="hljs-preprocessor"> true</span>) {</span>
|
|
586
|
+
$valid<span class="hljs-value">: true;</span>
|
|
587
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($cols) != <span class="hljs-string">"number"</span> {</span>
|
|
588
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"cols: #{$cols} is not a number"</span>;</span>
|
|
589
|
+
$valid<span class="hljs-value">: false;</span>
|
|
590
|
+
}
|
|
591
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($padding) != <span class="hljs-string">"bool"</span> {</span>
|
|
592
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"padding: #{$padding} is not a boolean"</span>;</span>
|
|
593
|
+
$valid<span class="hljs-value">: false;</span>
|
|
594
|
+
}
|
|
595
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($grid-columns) != <span class="hljs-string">"number"</span> {</span>
|
|
596
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"grid-columns: #{$grid-columns} is not a number"</span>;</span>
|
|
597
|
+
$valid<span class="hljs-value">: false;</span>
|
|
598
|
+
}
|
|
599
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($grid-padding) != <span class="hljs-string">"number"</span> {</span>
|
|
600
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"grid-padding: #{$grid-padding} is not a number"</span>;</span>
|
|
601
|
+
$valid<span class="hljs-value">: false;</span>
|
|
602
|
+
}
|
|
603
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
604
|
+
$<span class="hljs-attribute">column-width</span><span class="hljs-value">: $cols / $grid-columns;</span>
|
|
605
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $padding !=<span class="hljs-preprocessor"> false</span> {</span>
|
|
606
|
+
<span class="hljs-attribute">padding-left</span><span class="hljs-value">: $grid-padding;</span>
|
|
607
|
+
<span class="hljs-attribute">padding-right</span><span class="hljs-value">: $grid-padding;</span>
|
|
608
|
+
}
|
|
609
|
+
<span class="hljs-attribute">width</span><span class="hljs-value">: percentage($column-width);</span>
|
|
610
|
+
<span class="hljs-attribute">float</span><span class="hljs-value">: left;</span>
|
|
611
|
+
}
|
|
612
|
+
}</pre></div></div>
|
|
613
|
+
|
|
614
|
+
</li>
|
|
615
|
+
|
|
616
|
+
|
|
617
|
+
<li id="section-31">
|
|
618
|
+
<div class="annotation">
|
|
619
|
+
|
|
620
|
+
<div class="pilwrap ">
|
|
621
|
+
<a class="pilcrow" href="#section-31">¶</a>
|
|
622
|
+
</div>
|
|
623
|
+
<p>Sets grid column width (with gutter)</p>
|
|
624
|
+
|
|
625
|
+
</div>
|
|
626
|
+
|
|
627
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> col</span>($span:<span class="hljs-preprocessor"> 4</span>) {</span>
|
|
628
|
+
$valid<span class="hljs-value">: true;</span>
|
|
629
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($span) != <span class="hljs-string">"number"</span> {</span>
|
|
630
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"span: #{$span} is not a number"</span>;</span>
|
|
631
|
+
$valid<span class="hljs-value">: false;</span>
|
|
632
|
+
}
|
|
633
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($grid-max-width) != <span class="hljs-string">"number"</span> {</span>
|
|
634
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"grid-max-width: #{$grid-max-width} is not a number"</span>;</span>
|
|
635
|
+
$valid<span class="hljs-value">: false;</span>
|
|
636
|
+
}
|
|
637
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($grid-columns) != <span class="hljs-string">"number"</span> {</span>
|
|
638
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"grid-columns: #{$grid-columns} is not a number"</span>;</span>
|
|
639
|
+
$valid<span class="hljs-value">: false;</span>
|
|
640
|
+
}
|
|
641
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($grid-gutter) != <span class="hljs-string">"number"</span> {</span>
|
|
642
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"grid-gutter: #{$grid-columns} is not a number"</span>;</span>
|
|
643
|
+
$valid<span class="hljs-value">: false;</span>
|
|
644
|
+
}
|
|
645
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
646
|
+
$<span class="hljs-attribute">column-width</span><span class="hljs-value">: <span class="hljs-number">100</span>% / $grid-columns;</span>
|
|
647
|
+
$gutter<span class="hljs-value">: ($grid-gutter * <span class="hljs-number">0.75</span>) / $grid-max-width * <span class="hljs-number">100</span>;</span>
|
|
648
|
+
$<span class="hljs-tag">span</span>-<span class="hljs-attribute">width</span><span class="hljs-value">: $span * $column-width;</span>
|
|
649
|
+
<span class="hljs-attribute">width</span><span class="hljs-value">: $span-width - $gutter;</span>
|
|
650
|
+
<span class="hljs-attribute">vertical-align</span><span class="hljs-value">: top;</span>
|
|
651
|
+
<span class="hljs-attribute">display</span><span class="hljs-value">: inline-block;</span>
|
|
652
|
+
}
|
|
653
|
+
}</pre></div></div>
|
|
654
|
+
|
|
655
|
+
</li>
|
|
656
|
+
|
|
657
|
+
|
|
658
|
+
<li id="section-32">
|
|
659
|
+
<div class="annotation">
|
|
660
|
+
|
|
661
|
+
<div class="pilwrap ">
|
|
662
|
+
<a class="pilcrow" href="#section-32">¶</a>
|
|
663
|
+
</div>
|
|
664
|
+
<p>Sets grid offet margin</p>
|
|
665
|
+
|
|
666
|
+
</div>
|
|
667
|
+
|
|
668
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> offset</span>($cols:<span class="hljs-preprocessor"> 4</span>) {</span>
|
|
669
|
+
$valid<span class="hljs-value">: true;</span>
|
|
670
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($cols) != <span class="hljs-string">"number"</span> {</span>
|
|
671
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"cols: #{$cols} is not a number"</span>;</span>
|
|
672
|
+
$valid<span class="hljs-value">: false;</span>
|
|
673
|
+
}
|
|
674
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($grid-columns) != <span class="hljs-string">"number"</span> {</span>
|
|
675
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"grid-columns: #{$grid-columns} is not a number"</span>;</span>
|
|
676
|
+
$valid<span class="hljs-value">: false;</span>
|
|
677
|
+
}
|
|
678
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
679
|
+
<span class="hljs-attribute">margin-left</span><span class="hljs-value">: percentage($cols/$grid-columns);</span>
|
|
680
|
+
}
|
|
681
|
+
}</pre></div></div>
|
|
682
|
+
|
|
683
|
+
</li>
|
|
684
|
+
|
|
685
|
+
|
|
686
|
+
<li id="section-33">
|
|
687
|
+
<div class="annotation">
|
|
688
|
+
|
|
689
|
+
<div class="pilwrap ">
|
|
690
|
+
<a class="pilcrow" href="#section-33">¶</a>
|
|
691
|
+
</div>
|
|
692
|
+
<p>Wraps interior content in a media query</p>
|
|
693
|
+
|
|
694
|
+
</div>
|
|
695
|
+
|
|
696
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> breakpoint</span>($querystring) {</span>
|
|
697
|
+
$valid<span class="hljs-value">: true;</span>
|
|
698
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($querystring) != <span class="hljs-string">"string"</span> {</span>
|
|
699
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"querystring: #{$querystring} is not a string"</span>;</span>
|
|
700
|
+
$valid<span class="hljs-value">: false;</span>
|
|
701
|
+
}
|
|
702
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
703
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">media</span> #{</span>$querystring} {
|
|
704
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">content</span>;</span>
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
}</pre></div></div>
|
|
708
|
+
|
|
709
|
+
</li>
|
|
710
|
+
|
|
711
|
+
|
|
712
|
+
<li id="section-34">
|
|
713
|
+
<div class="annotation">
|
|
714
|
+
|
|
715
|
+
<div class="pilwrap ">
|
|
716
|
+
<a class="pilcrow" href="#section-34">¶</a>
|
|
717
|
+
</div>
|
|
718
|
+
<p>Renders fully prefixed transistion</p>
|
|
719
|
+
|
|
720
|
+
</div>
|
|
721
|
+
|
|
722
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> transition</span> ($property:<span class="hljs-preprocessor"> 0.15s</span>) {</span>
|
|
723
|
+
$valid<span class="hljs-value">: false;</span>
|
|
724
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($property) == <span class="hljs-string">"string"</span> {</span>
|
|
725
|
+
$valid<span class="hljs-value">: true;</span>
|
|
726
|
+
}
|
|
727
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($property) == <span class="hljs-string">"list"</span> {</span>
|
|
728
|
+
$valid<span class="hljs-value">: true;</span>
|
|
729
|
+
}
|
|
730
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($property) == <span class="hljs-string">"number"</span> {</span>
|
|
731
|
+
$valid<span class="hljs-value">: true;</span>
|
|
732
|
+
}
|
|
733
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
734
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> prefixer</span>(transition, $property,<span class="hljs-preprocessor"> webkit</span><span class="hljs-preprocessor"> moz</span><span class="hljs-preprocessor"> ms</span>);</span>
|
|
735
|
+
} <span class="hljs-at_rule">@<span class="hljs-keyword">else</span> {</span>
|
|
736
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"property: #{$property} is not a valid argument"</span>;</span>
|
|
737
|
+
}
|
|
738
|
+
}</pre></div></div>
|
|
739
|
+
|
|
740
|
+
</li>
|
|
741
|
+
|
|
742
|
+
|
|
743
|
+
<li id="section-35">
|
|
744
|
+
<div class="annotation">
|
|
745
|
+
|
|
746
|
+
<div class="pilwrap ">
|
|
747
|
+
<a class="pilcrow" href="#section-35">¶</a>
|
|
748
|
+
</div>
|
|
749
|
+
<p>Renders fully prefixed transform</p>
|
|
750
|
+
|
|
751
|
+
</div>
|
|
752
|
+
|
|
753
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> transform</span>($property:<span class="hljs-preprocessor"> none</span>) {</span>
|
|
754
|
+
$valid<span class="hljs-value">: false;</span>
|
|
755
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($property) == <span class="hljs-string">"string"</span> {</span>
|
|
756
|
+
$valid<span class="hljs-value">: true;</span>
|
|
757
|
+
}
|
|
758
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($property) == <span class="hljs-string">"list"</span> {</span>
|
|
759
|
+
$valid<span class="hljs-value">: true;</span>
|
|
760
|
+
}
|
|
761
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
762
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> prefixer</span>(transform, $property,<span class="hljs-preprocessor"> webkit</span><span class="hljs-preprocessor"> moz</span><span class="hljs-preprocessor"> ms</span>);</span>
|
|
763
|
+
} <span class="hljs-at_rule">@<span class="hljs-keyword">else</span> {</span>
|
|
764
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"property: #{$property} is not a valid argument"</span>;</span>
|
|
765
|
+
}
|
|
766
|
+
}</pre></div></div>
|
|
767
|
+
|
|
768
|
+
</li>
|
|
769
|
+
|
|
770
|
+
|
|
771
|
+
<li id="section-36">
|
|
772
|
+
<div class="annotation">
|
|
773
|
+
|
|
774
|
+
<div class="pilwrap ">
|
|
775
|
+
<a class="pilcrow" href="#section-36">¶</a>
|
|
776
|
+
</div>
|
|
777
|
+
<p>Renders fully prefixed box-sizing</p>
|
|
778
|
+
|
|
779
|
+
</div>
|
|
780
|
+
|
|
781
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> box-sizing</span> ($box:<span class="hljs-preprocessor"> border-box</span>) {</span>
|
|
782
|
+
$valid<span class="hljs-value">: true;</span>
|
|
783
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($box) != <span class="hljs-string">"string"</span> {</span>
|
|
784
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"box: #{$box} is not a string"</span>;</span>
|
|
785
|
+
$valid<span class="hljs-value">: false;</span>
|
|
786
|
+
}
|
|
787
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
788
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">include</span><span class="hljs-preprocessor"> prefixer</span>(box-sizing, $box,<span class="hljs-preprocessor"> webkit</span><span class="hljs-preprocessor"> moz</span>);</span>
|
|
789
|
+
}
|
|
790
|
+
}</pre></div></div>
|
|
791
|
+
|
|
792
|
+
</li>
|
|
793
|
+
|
|
794
|
+
|
|
795
|
+
<li id="section-37">
|
|
796
|
+
<div class="annotation">
|
|
797
|
+
|
|
798
|
+
<div class="pilwrap ">
|
|
799
|
+
<a class="pilcrow" href="#section-37">¶</a>
|
|
800
|
+
</div>
|
|
801
|
+
<p>Utility for prefixing mixins</p>
|
|
802
|
+
|
|
803
|
+
</div>
|
|
804
|
+
|
|
805
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> prefixer</span>($property, $value, $prefixes:<span class="hljs-preprocessor"> webkit</span><span class="hljs-preprocessor"> moz</span>) {</span>
|
|
806
|
+
$valid<span class="hljs-value">: false;</span>
|
|
807
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($property) == <span class="hljs-string">"string"</span> {</span>
|
|
808
|
+
$valid<span class="hljs-value">: true;</span>
|
|
809
|
+
}
|
|
810
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($prefixes) == <span class="hljs-string">"list"</span> {</span>
|
|
811
|
+
$valid<span class="hljs-value">: true;</span>
|
|
812
|
+
}
|
|
813
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($prefixes) == <span class="hljs-string">"string"</span> {</span>
|
|
814
|
+
$valid<span class="hljs-value">: true;</span>
|
|
815
|
+
}
|
|
816
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
817
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">each</span> $prefix<span class="hljs-preprocessor"> in</span> $prefixes {</span>
|
|
818
|
+
#{"-" + $prefix + "-" + $property}<span class="hljs-value">: $value;</span>
|
|
819
|
+
}
|
|
820
|
+
#{$property}<span class="hljs-value">: $value;</span>
|
|
821
|
+
} <span class="hljs-at_rule">@<span class="hljs-keyword">else</span> {</span>
|
|
822
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"Invalid arguments supplied"</span>;</span>
|
|
823
|
+
}
|
|
824
|
+
}</pre></div></div>
|
|
825
|
+
|
|
826
|
+
</li>
|
|
827
|
+
|
|
828
|
+
|
|
829
|
+
<li id="section-38">
|
|
830
|
+
<div class="annotation">
|
|
831
|
+
|
|
832
|
+
<div class="pilwrap ">
|
|
833
|
+
<a class="pilcrow" href="#section-38">¶</a>
|
|
834
|
+
</div>
|
|
835
|
+
<p>Sets ellipsis overflow</p>
|
|
836
|
+
|
|
837
|
+
</div>
|
|
838
|
+
|
|
839
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> ellipsis</span>($width:<span class="hljs-preprocessor"> 100</span>%) {</span>
|
|
840
|
+
$valid<span class="hljs-value">: true;</span>
|
|
841
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($width) != <span class="hljs-string">"number"</span> {</span>
|
|
842
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"width: #{$width} is not a number"</span>;</span>
|
|
843
|
+
$valid<span class="hljs-value">: false;</span>
|
|
844
|
+
}
|
|
845
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
846
|
+
<span class="hljs-attribute">display</span><span class="hljs-value">: inline-block;</span>
|
|
847
|
+
<span class="hljs-attribute">max-width</span><span class="hljs-value">: $width;</span>
|
|
848
|
+
<span class="hljs-attribute">overflow</span><span class="hljs-value">: hidden;</span>
|
|
849
|
+
<span class="hljs-attribute">text-overflow</span><span class="hljs-value">: ellipsis;</span>
|
|
850
|
+
<span class="hljs-attribute">white-space</span><span class="hljs-value">: nowrap;</span>
|
|
851
|
+
}
|
|
852
|
+
}</pre></div></div>
|
|
853
|
+
|
|
854
|
+
</li>
|
|
855
|
+
|
|
856
|
+
|
|
857
|
+
<li id="section-39">
|
|
858
|
+
<div class="annotation">
|
|
859
|
+
|
|
860
|
+
<div class="pilwrap ">
|
|
861
|
+
<a class="pilcrow" href="#section-39">¶</a>
|
|
862
|
+
</div>
|
|
863
|
+
<p>Clearfix include</p>
|
|
864
|
+
|
|
865
|
+
</div>
|
|
866
|
+
|
|
867
|
+
<div class="content"><div class='highlight'><pre>@mixin clear($extend: true) {
|
|
868
|
+
$valid: true;
|
|
869
|
+
@if type-of($extend) != "bool" {
|
|
870
|
+
@warn "extend: #{$extend} is not a boolean";
|
|
871
|
+
$valid: false;
|
|
872
|
+
}
|
|
873
|
+
@if $valid == true {
|
|
874
|
+
@if $extend {
|
|
875
|
+
@extend %clear;
|
|
876
|
+
}
|
|
877
|
+
@else {
|
|
878
|
+
#{'&'}:after {
|
|
879
|
+
content:"";
|
|
880
|
+
display:table;
|
|
881
|
+
clear:both;
|
|
882
|
+
}
|
|
883
|
+
}
|
|
884
|
+
}
|
|
885
|
+
}</pre></div></div>
|
|
886
|
+
|
|
887
|
+
</li>
|
|
888
|
+
|
|
889
|
+
|
|
890
|
+
<li id="section-40">
|
|
891
|
+
<div class="annotation">
|
|
892
|
+
|
|
893
|
+
<div class="pilwrap ">
|
|
894
|
+
<a class="pilcrow" href="#section-40">¶</a>
|
|
895
|
+
</div>
|
|
896
|
+
<p>Placeholder for clear</p>
|
|
897
|
+
|
|
898
|
+
</div>
|
|
899
|
+
|
|
900
|
+
<div class="content"><div class='highlight'><pre>%<span class="hljs-attribute">clear</span><span class="hljs-pseudo">:after</span> {
|
|
901
|
+
<span class="hljs-attribute">content</span><span class="hljs-value">:<span class="hljs-string">""</span>;</span>
|
|
902
|
+
<span class="hljs-attribute">display</span><span class="hljs-value">:table;</span>
|
|
903
|
+
<span class="hljs-attribute">clear</span><span class="hljs-value">:both;</span>
|
|
904
|
+
}</pre></div></div>
|
|
905
|
+
|
|
906
|
+
</li>
|
|
907
|
+
|
|
908
|
+
|
|
909
|
+
<li id="section-41">
|
|
910
|
+
<div class="annotation">
|
|
911
|
+
|
|
912
|
+
<div class="pilwrap ">
|
|
913
|
+
<a class="pilcrow" href="#section-41">¶</a>
|
|
914
|
+
</div>
|
|
915
|
+
<p>Text hider</p>
|
|
916
|
+
|
|
917
|
+
</div>
|
|
918
|
+
|
|
919
|
+
<div class="content"><div class='highlight'><pre>
|
|
920
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> hide-text</span>($<span class="hljs-keyword">extend</span>:<span class="hljs-preprocessor"> true</span>) {</span>
|
|
921
|
+
$valid<span class="hljs-value">: true;</span>
|
|
922
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($<span class="hljs-keyword">extend</span>) != <span class="hljs-string">"bool"</span> {</span>
|
|
923
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"extend: #{$extend} is not a boolean"</span>;</span>
|
|
924
|
+
$valid<span class="hljs-value">: false;</span>
|
|
925
|
+
}
|
|
926
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
927
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $<span class="hljs-keyword">extend</span> {</span>
|
|
928
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">extend</span> %hide-text;</span>
|
|
929
|
+
}
|
|
930
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">else</span> {</span>
|
|
931
|
+
<span class="hljs-attribute">overflow</span><span class="hljs-value">:hidden;</span>
|
|
932
|
+
<span class="hljs-attribute">text-indent</span><span class="hljs-value">: <span class="hljs-number">100</span>%;</span>
|
|
933
|
+
<span class="hljs-attribute">white-space</span><span class="hljs-value">: nowrap;</span>
|
|
934
|
+
}
|
|
935
|
+
}
|
|
936
|
+
}</pre></div></div>
|
|
937
|
+
|
|
938
|
+
</li>
|
|
939
|
+
|
|
940
|
+
|
|
941
|
+
<li id="section-42">
|
|
942
|
+
<div class="annotation">
|
|
943
|
+
|
|
944
|
+
<div class="pilwrap ">
|
|
945
|
+
<a class="pilcrow" href="#section-42">¶</a>
|
|
946
|
+
</div>
|
|
947
|
+
<p>Placeholder for hide-text</p>
|
|
948
|
+
|
|
949
|
+
</div>
|
|
950
|
+
|
|
951
|
+
<div class="content"><div class='highlight'><pre>%hide-<span class="hljs-value">text</span> {
|
|
952
|
+
<span class="hljs-attribute">overflow</span><span class="hljs-value">:hidden;</span>
|
|
953
|
+
<span class="hljs-attribute">text-indent</span><span class="hljs-value">: <span class="hljs-number">100</span>%;</span>
|
|
954
|
+
<span class="hljs-attribute">white-space</span><span class="hljs-value">: nowrap;</span>
|
|
955
|
+
}</pre></div></div>
|
|
956
|
+
|
|
957
|
+
</li>
|
|
958
|
+
|
|
959
|
+
|
|
960
|
+
<li id="section-43">
|
|
961
|
+
<div class="annotation">
|
|
962
|
+
|
|
963
|
+
<div class="pilwrap ">
|
|
964
|
+
<a class="pilcrow" href="#section-43">¶</a>
|
|
965
|
+
</div>
|
|
966
|
+
<p>Inline List</p>
|
|
967
|
+
|
|
968
|
+
</div>
|
|
969
|
+
|
|
970
|
+
<div class="content"><div class='highlight'><pre>
|
|
971
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> inline-list</span>($float:<span class="hljs-preprocessor"> true</span>) {</span>
|
|
972
|
+
$valid<span class="hljs-value">: true;</span>
|
|
973
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($float) != <span class="hljs-string">"bool"</span> {</span>
|
|
974
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"float: #{$float} is not a boolean"</span>;</span>
|
|
975
|
+
$valid<span class="hljs-value">: false;</span>
|
|
976
|
+
}
|
|
977
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
978
|
+
<span class="hljs-attribute">list-style-type</span><span class="hljs-value">:none;</span>
|
|
979
|
+
<span class="hljs-attribute">padding</span><span class="hljs-value">:<span class="hljs-number">0</span>;</span>
|
|
980
|
+
<span class="hljs-attribute">margin</span><span class="hljs-value">:<span class="hljs-number">0</span>;</span>
|
|
981
|
+
<span class="hljs-attribute">overflow</span><span class="hljs-value">:hidden;</span>
|
|
982
|
+
> <span class="hljs-tag">li</span>{
|
|
983
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $float ==<span class="hljs-preprocessor"> true</span> {</span>
|
|
984
|
+
<span class="hljs-attribute">display</span><span class="hljs-value">:block;</span>
|
|
985
|
+
<span class="hljs-attribute">float</span><span class="hljs-pseudo">:left</span>;
|
|
986
|
+
} <span class="hljs-at_rule">@<span class="hljs-keyword">else</span> {</span>
|
|
987
|
+
<span class="hljs-attribute">display</span><span class="hljs-value">: inline-block;</span>
|
|
988
|
+
}
|
|
989
|
+
}
|
|
990
|
+
}
|
|
991
|
+
}</pre></div></div>
|
|
992
|
+
|
|
993
|
+
</li>
|
|
994
|
+
|
|
995
|
+
|
|
996
|
+
<li id="section-44">
|
|
997
|
+
<div class="annotation">
|
|
998
|
+
|
|
999
|
+
<div class="pilwrap ">
|
|
1000
|
+
<a class="pilcrow" href="#section-44">¶</a>
|
|
1001
|
+
</div>
|
|
1002
|
+
<h3 id="typography">Typography</h3>
|
|
1003
|
+
|
|
1004
|
+
</div>
|
|
1005
|
+
|
|
1006
|
+
</li>
|
|
1007
|
+
|
|
1008
|
+
|
|
1009
|
+
<li id="section-45">
|
|
1010
|
+
<div class="annotation">
|
|
1011
|
+
|
|
1012
|
+
<div class="pilwrap ">
|
|
1013
|
+
<a class="pilcrow" href="#section-45">¶</a>
|
|
1014
|
+
</div>
|
|
1015
|
+
<p>Typographic Rhythm Mixin</p>
|
|
1016
|
+
|
|
1017
|
+
</div>
|
|
1018
|
+
|
|
1019
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-at_rule">@<span class="hljs-keyword">mixin</span><span class="hljs-preprocessor"> type</span>($rem-base: $rem-base,$line-height-base: $line-height-base, $type-rhythm-ratio: $type-rhythm-ratio){</span>
|
|
1020
|
+
$valid<span class="hljs-value">: true;</span>
|
|
1021
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($rem-base) != <span class="hljs-string">"number"</span> {</span>
|
|
1022
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"#{$rem-base} is not a number"</span>;</span>
|
|
1023
|
+
$valid<span class="hljs-value">: false;</span>
|
|
1024
|
+
}
|
|
1025
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($line-height-base) != <span class="hljs-string">"number"</span> {</span>
|
|
1026
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"#{$line-height-base} is not a number"</span>;</span>
|
|
1027
|
+
$valid<span class="hljs-value">: false;</span>
|
|
1028
|
+
}
|
|
1029
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> type-of</span>($type-rhythm-ratio) != <span class="hljs-string">"number"</span> {</span>
|
|
1030
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">warn</span> <span class="hljs-string">"#{$type-rhythm-ratio} is not a number"</span>;</span>
|
|
1031
|
+
$valid<span class="hljs-value">: false;</span>
|
|
1032
|
+
}
|
|
1033
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span> $valid ==<span class="hljs-preprocessor"> true</span> {</span></pre></div></div>
|
|
1034
|
+
|
|
1035
|
+
</li>
|
|
1036
|
+
|
|
1037
|
+
|
|
1038
|
+
<li id="section-46">
|
|
1039
|
+
<div class="annotation">
|
|
1040
|
+
|
|
1041
|
+
<div class="pilwrap ">
|
|
1042
|
+
<a class="pilcrow" href="#section-46">¶</a>
|
|
1043
|
+
</div>
|
|
1044
|
+
<p>Scale type at $type-rhythm-ratio</p>
|
|
1045
|
+
|
|
1046
|
+
</div>
|
|
1047
|
+
|
|
1048
|
+
<div class="content"><div class='highlight'><pre> $<span class="hljs-tag">h6</span>-size<span class="hljs-value">: round(_strip-unit($rem-base) * $type-rhythm-ratio);</span>
|
|
1049
|
+
$<span class="hljs-tag">h5</span>-size<span class="hljs-value">: round($h6-size * $type-rhythm-ratio);</span>
|
|
1050
|
+
$<span class="hljs-tag">h4</span>-size<span class="hljs-value">: round($h5-size * $type-rhythm-ratio);</span>
|
|
1051
|
+
$<span class="hljs-tag">h3</span>-size<span class="hljs-value">: round($h4-size * $type-rhythm-ratio);</span>
|
|
1052
|
+
$<span class="hljs-tag">h2</span>-size<span class="hljs-value">: round($h3-size * $type-rhythm-ratio);</span>
|
|
1053
|
+
$<span class="hljs-tag">h1</span>-size<span class="hljs-value">: round($h2-size * $type-rhythm-ratio);</span>
|
|
1054
|
+
|
|
1055
|
+
<span class="hljs-at_rule">@<span class="hljs-keyword">if</span><span class="hljs-preprocessor"> unit</span>($line-height-base) == <span class="hljs-string">"px"</span> {</span></pre></div></div>
|
|
1056
|
+
|
|
1057
|
+
</li>
|
|
1058
|
+
|
|
1059
|
+
|
|
1060
|
+
<li id="section-47">
|
|
1061
|
+
<div class="annotation">
|
|
1062
|
+
|
|
1063
|
+
<div class="pilwrap ">
|
|
1064
|
+
<a class="pilcrow" href="#section-47">¶</a>
|
|
1065
|
+
</div>
|
|
1066
|
+
<p>Set line-height</p>
|
|
1067
|
+
|
|
1068
|
+
</div>
|
|
1069
|
+
|
|
1070
|
+
<div class="content"><div class='highlight'><pre> <span class="hljs-tag">body</span> {
|
|
1071
|
+
<span class="hljs-attribute">line-height</span><span class="hljs-value">: _strip-unit($line-height-base) / _strip-unit($rem-base);</span>
|
|
1072
|
+
}
|
|
1073
|
+
} <span class="hljs-at_rule">@<span class="hljs-keyword">else</span> {</span>
|
|
1074
|
+
<span class="hljs-tag">body</span> {
|
|
1075
|
+
<span class="hljs-attribute">line-height</span><span class="hljs-value">: $line-height-base;</span>
|
|
1076
|
+
}
|
|
1077
|
+
}</pre></div></div>
|
|
1078
|
+
|
|
1079
|
+
</li>
|
|
1080
|
+
|
|
1081
|
+
|
|
1082
|
+
<li id="section-48">
|
|
1083
|
+
<div class="annotation">
|
|
1084
|
+
|
|
1085
|
+
<div class="pilwrap ">
|
|
1086
|
+
<a class="pilcrow" href="#section-48">¶</a>
|
|
1087
|
+
</div>
|
|
1088
|
+
<p>Set heading sizes to size variables</p>
|
|
1089
|
+
|
|
1090
|
+
</div>
|
|
1091
|
+
|
|
1092
|
+
<div class="content"><div class='highlight'><pre> <span class="hljs-tag">h1</span> {
|
|
1093
|
+
<span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h1-size);</span>
|
|
1094
|
+
}
|
|
1095
|
+
|
|
1096
|
+
<span class="hljs-tag">h2</span> {
|
|
1097
|
+
<span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h2-size);</span>
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1100
|
+
<span class="hljs-tag">h3</span> {
|
|
1101
|
+
<span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h3-size);</span>
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
<span class="hljs-tag">h4</span> {
|
|
1105
|
+
<span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h4-size);</span>
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
<span class="hljs-tag">h5</span> {
|
|
1109
|
+
<span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h5-size);</span>
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
<span class="hljs-tag">h6</span> {
|
|
1113
|
+
<span class="hljs-attribute">font-size</span><span class="hljs-value">: rem-calc($h6-size);</span>
|
|
1114
|
+
}
|
|
1115
|
+
|
|
1116
|
+
<span class="hljs-tag">p</span> {
|
|
1117
|
+
<span class="hljs-attribute">font-size</span><span class="hljs-value">: $rem-base;</span>
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
}</pre></div></div>
|
|
1121
|
+
|
|
1122
|
+
</li>
|
|
1123
|
+
|
|
1124
|
+
</ul>
|
|
1125
|
+
</div>
|
|
1126
|
+
</body>
|
|
1127
|
+
</html>
|