@ulu/frontend 0.1.0-beta.42 → 0.1.0-beta.44
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.
- package/CHANGELOG.md +11 -0
- package/dist/ulu-frontend.min.css +1 -1
- package/docs-dev/changelog/index.html +27 -0
- package/docs-dev/demos/card/index.html +2 -2
- package/docs-dev/demos/popovers/index.html +5453 -0
- package/docs-dev/sass/base/elements/index.html +70 -70
- package/docs-dev/sass/base/index/index.html +56 -56
- package/docs-dev/sass/base/layout/index.html +63 -63
- package/docs-dev/sass/components/accordion/index.html +118 -118
- package/docs-dev/sass/components/adaptive-spacing/index.html +124 -124
- package/docs-dev/sass/components/badge/index.html +96 -96
- package/docs-dev/sass/components/basic-hero/index.html +62 -62
- package/docs-dev/sass/components/button/index.html +49 -49
- package/docs-dev/sass/components/button-verbose/index.html +128 -128
- package/docs-dev/sass/components/callout/index.html +163 -163
- package/docs-dev/sass/components/captioned-figure/index.html +114 -114
- package/docs-dev/sass/components/card/index.html +198 -175
- package/docs-dev/sass/components/card-grid/index.html +70 -70
- package/docs-dev/sass/components/counter-list/index.html +119 -119
- package/docs-dev/sass/components/css-icon/index.html +140 -140
- package/docs-dev/sass/components/data-grid/index.html +166 -166
- package/docs-dev/sass/components/data-table/index.html +114 -114
- package/docs-dev/sass/components/flipcard/index.html +162 -162
- package/docs-dev/sass/components/flipcard-grid/index.html +57 -57
- package/docs-dev/sass/components/form-theme/index.html +265 -265
- package/docs-dev/sass/components/hero/index.html +107 -107
- package/docs-dev/sass/components/horizontal-rule/index.html +56 -56
- package/docs-dev/sass/components/image-grid/index.html +63 -63
- package/docs-dev/sass/components/index/index.html +95 -95
- package/docs-dev/sass/components/list-inline/index.html +77 -77
- package/docs-dev/sass/components/list-lines/index.html +98 -98
- package/docs-dev/sass/components/menu-stack/index.html +119 -119
- package/docs-dev/sass/components/modal/index.html +114 -114
- package/docs-dev/sass/components/nav-strip/index.html +114 -114
- package/docs-dev/sass/components/overlay-section/index.html +101 -101
- package/docs-dev/sass/components/pager/index.html +114 -114
- package/docs-dev/sass/components/placeholder-block/index.html +114 -114
- package/docs-dev/sass/components/popover/index.html +114 -114
- package/docs-dev/sass/components/pull-quote/index.html +114 -114
- package/docs-dev/sass/components/ratio-box/index.html +60 -60
- package/docs-dev/sass/components/rule/index.html +63 -63
- package/docs-dev/sass/components/scroll-slider/index.html +114 -114
- package/docs-dev/sass/components/skip-link/index.html +34 -34
- package/docs-dev/sass/components/slider/index.html +114 -114
- package/docs-dev/sass/components/spoke-spinner/index.html +56 -56
- package/docs-dev/sass/components/sticky-list/index.html +145 -145
- package/docs-dev/sass/components/tabs/index.html +114 -114
- package/docs-dev/sass/components/tag/index.html +161 -161
- package/docs-dev/sass/components/tile-button/index.html +101 -101
- package/docs-dev/sass/components/tile-grid/index.html +142 -142
- package/docs-dev/sass/components/tile-grid-overlay/index.html +37 -37
- package/docs-dev/sass/components/vignette/index.html +56 -56
- package/docs-dev/sass/components/wysiwyg/index.html +65 -65
- package/docs-dev/sass/core/breakpoint/index.html +100 -100
- package/docs-dev/sass/core/button/index.html +535 -535
- package/docs-dev/sass/core/color/index.html +157 -157
- package/docs-dev/sass/core/cssvar/index.html +49 -49
- package/docs-dev/sass/core/element/index.html +504 -504
- package/docs-dev/sass/core/layout/index.html +107 -107
- package/docs-dev/sass/core/path/index.html +32 -32
- package/docs-dev/sass/core/selector/index.html +49 -49
- package/docs-dev/sass/core/typography/index.html +265 -265
- package/docs-dev/sass/core/units/index.html +81 -81
- package/docs-dev/sass/core/utils/index.html +70 -70
- package/docs-dev/sass/helpers/index/index.html +53 -53
- package/docs-dev/sass/helpers/units/index.html +47 -47
- package/package.json +5 -2
- package/scss/components/_card.scss +25 -11
|
@@ -5166,6 +5166,18 @@
|
|
|
5166
5166
|
<div class="toc">
|
|
5167
5167
|
<ol>
|
|
5168
5168
|
|
|
5169
|
+
<li><a href="#variables">Variables</a>
|
|
5170
|
+
|
|
5171
|
+
<ol>
|
|
5172
|
+
|
|
5173
|
+
<li><a href="#variable-config">$config</a>
|
|
5174
|
+
</li>
|
|
5175
|
+
|
|
5176
|
+
<li><a href="#variable-sizes">$sizes</a>
|
|
5177
|
+
</li>
|
|
5178
|
+
</ol>
|
|
5179
|
+
</li>
|
|
5180
|
+
|
|
5169
5181
|
<li><a href="#mixins">Mixins</a>
|
|
5170
5182
|
|
|
5171
5183
|
<ol>
|
|
@@ -5226,18 +5238,6 @@
|
|
|
5226
5238
|
|
|
5227
5239
|
<li><a href="#function-get-size-value">get-size-value()</a>
|
|
5228
5240
|
</li>
|
|
5229
|
-
</ol>
|
|
5230
|
-
</li>
|
|
5231
|
-
|
|
5232
|
-
<li><a href="#variables">Variables</a>
|
|
5233
|
-
|
|
5234
|
-
<ol>
|
|
5235
|
-
|
|
5236
|
-
<li><a href="#variable-config">$config</a>
|
|
5237
|
-
</li>
|
|
5238
|
-
|
|
5239
|
-
<li><a href="#variable-sizes">$sizes</a>
|
|
5240
|
-
</li>
|
|
5241
5241
|
</ol>
|
|
5242
5242
|
</li>
|
|
5243
5243
|
</ol>
|
|
@@ -5255,6 +5255,259 @@
|
|
|
5255
5255
|
<div class="type-large">
|
|
5256
5256
|
<p>Manages typography settings, sizes and provides typography related utilities</p>
|
|
5257
5257
|
</div>
|
|
5258
|
+
<h2 id="variables" tabindex="-1">Variables</h2>
|
|
5259
|
+
<div class="sassdoc-item-header">
|
|
5260
|
+
<h3 id="variable-config" tabindex="-1">$config</h3>
|
|
5261
|
+
<div class="sassdoc-item-header__labels">
|
|
5262
|
+
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5263
|
+
</div>
|
|
5264
|
+
</div>
|
|
5265
|
+
<p>Module Settings</p>
|
|
5266
|
+
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5267
|
+
<span class="pjs-token pjs-string">"letter-spacing-uppercase"</span><span class="pjs-token pjs-punctuation">:</span> 0.04em<span class="pjs-token pjs-punctuation">,</span>
|
|
5268
|
+
<span class="pjs-token pjs-string">"margin-bottom"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
|
|
5269
|
+
<span class="pjs-token pjs-string">"margin-top"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5270
|
+
<span class="pjs-token pjs-string">"responsive-change"</span><span class="pjs-token pjs-punctuation">:</span> 0.05vw<span class="pjs-token pjs-punctuation">,</span>
|
|
5271
|
+
<span class="pjs-token pjs-string">"scale-steps"</span><span class="pjs-token pjs-punctuation">:</span> 5<span class="pjs-token pjs-punctuation">,</span>
|
|
5272
|
+
<span class="pjs-token pjs-string">"size-ratio"</span><span class="pjs-token pjs-punctuation">:</span> 1.8<span class="pjs-token pjs-punctuation">,</span>
|
|
5273
|
+
<span class="pjs-token pjs-string">"size-line-height-ratio"</span><span class="pjs-token pjs-punctuation">:</span> 0.97<span class="pjs-token pjs-punctuation">,</span>
|
|
5274
|
+
<span class="pjs-token pjs-string">"font-family"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5275
|
+
<span class="pjs-token pjs-string">"font-family-monospace"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>Menlo<span class="pjs-token pjs-punctuation">,</span> Consolas<span class="pjs-token pjs-punctuation">,</span> Monaco<span class="pjs-token pjs-punctuation">,</span> monospace<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5276
|
+
<span class="pjs-token pjs-string">"font-family-sans"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5277
|
+
<span class="pjs-token pjs-string">"font-family-serif"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>Cambria<span class="pjs-token pjs-punctuation">,</span> Georgia<span class="pjs-token pjs-punctuation">,</span> serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5278
|
+
<span class="pjs-token pjs-string">"font-size"</span><span class="pjs-token pjs-punctuation">:</span> 16px<span class="pjs-token pjs-punctuation">,</span>
|
|
5279
|
+
<span class="pjs-token pjs-string">"font-weight"</span><span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
|
|
5280
|
+
<span class="pjs-token pjs-string">"font-weight-bold"</span><span class="pjs-token pjs-punctuation">:</span> bold<span class="pjs-token pjs-punctuation">,</span>
|
|
5281
|
+
<span class="pjs-token pjs-string">"font-weight-light"</span><span class="pjs-token pjs-punctuation">:</span> 300<span class="pjs-token pjs-punctuation">,</span>
|
|
5282
|
+
<span class="pjs-token pjs-string">"font-weight-normal"</span><span class="pjs-token pjs-punctuation">:</span> normal<span class="pjs-token pjs-punctuation">,</span>
|
|
5283
|
+
<span class="pjs-token pjs-string">"font-weight-semibold"</span><span class="pjs-token pjs-punctuation">:</span> 600<span class="pjs-token pjs-punctuation">,</span>
|
|
5284
|
+
<span class="pjs-token pjs-string">"line-height"</span><span class="pjs-token pjs-punctuation">:</span> 1.5<span class="pjs-token pjs-punctuation">,</span>
|
|
5285
|
+
<span class="pjs-token pjs-string">"line-height-dense"</span><span class="pjs-token pjs-punctuation">:</span> 1.3<span class="pjs-token pjs-punctuation">,</span>
|
|
5286
|
+
<span class="pjs-token pjs-string">"line-height-densest"</span><span class="pjs-token pjs-punctuation">:</span> 1.1<span class="pjs-token pjs-punctuation">,</span>
|
|
5287
|
+
<span class="pjs-token pjs-string">"line-height-spaced"</span><span class="pjs-token pjs-punctuation">:</span> 1.75<span class="pjs-token pjs-punctuation">,</span>
|
|
5288
|
+
<span class="pjs-token pjs-string">"max-width"</span><span class="pjs-token pjs-punctuation">:</span> 60em<span class="pjs-token pjs-punctuation">,</span>
|
|
5289
|
+
<span class="pjs-token pjs-string">"max-width-large"</span><span class="pjs-token pjs-punctuation">:</span> 75em<span class="pjs-token pjs-punctuation">,</span>
|
|
5290
|
+
<span class="pjs-token pjs-string">"max-width-small"</span><span class="pjs-token pjs-punctuation">:</span> 45em<span class="pjs-token pjs-punctuation">,</span>
|
|
5291
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5292
|
+
<details>
|
|
5293
|
+
<summary>File Information</summary>
|
|
5294
|
+
<ul>
|
|
5295
|
+
<li><strong>File:</strong> _typography.scss</li>
|
|
5296
|
+
<li><strong>Group:</strong> typography</li>
|
|
5297
|
+
<li><strong>Type:</strong> variable</li>
|
|
5298
|
+
<li><strong>Lines (comments):</strong> 15-37</li>
|
|
5299
|
+
<li><strong>Lines (code):</strong> 39-64</li>
|
|
5300
|
+
</ul>
|
|
5301
|
+
</details>
|
|
5302
|
+
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
5303
|
+
<table>
|
|
5304
|
+
<thead>
|
|
5305
|
+
<tr>
|
|
5306
|
+
<th style="text-align:left">Name</th>
|
|
5307
|
+
<th style="text-align:left">Type</th>
|
|
5308
|
+
<th style="text-align:left">Default</th>
|
|
5309
|
+
<th style="text-align:left">Description</th>
|
|
5310
|
+
</tr>
|
|
5311
|
+
</thead>
|
|
5312
|
+
<tbody>
|
|
5313
|
+
<tr>
|
|
5314
|
+
<td style="text-align:left">letter-spacing-uppercase</td>
|
|
5315
|
+
<td style="text-align:left">Dimension</td>
|
|
5316
|
+
<td style="text-align:left">0.04em</td>
|
|
5317
|
+
<td style="text-align:left"></td>
|
|
5318
|
+
</tr>
|
|
5319
|
+
<tr>
|
|
5320
|
+
<td style="text-align:left">margin-bottom</td>
|
|
5321
|
+
<td style="text-align:left">Number</td>
|
|
5322
|
+
<td style="text-align:left">1em</td>
|
|
5323
|
+
<td style="text-align:left">Default margin for typography (like paragraphs)</td>
|
|
5324
|
+
</tr>
|
|
5325
|
+
<tr>
|
|
5326
|
+
<td style="text-align:left">margin-top</td>
|
|
5327
|
+
<td style="text-align:left">Number</td>
|
|
5328
|
+
<td style="text-align:left">null</td>
|
|
5329
|
+
<td style="text-align:left">Default margin for typography (like paragraphs)</td>
|
|
5330
|
+
</tr>
|
|
5331
|
+
<tr>
|
|
5332
|
+
<td style="text-align:left">responsive-change</td>
|
|
5333
|
+
<td style="text-align:left">Number</td>
|
|
5334
|
+
<td style="text-align:left">0.05vw</td>
|
|
5335
|
+
<td style="text-align:left">Amount to scale typography by browser's width (use viewport units)</td>
|
|
5336
|
+
</tr>
|
|
5337
|
+
<tr>
|
|
5338
|
+
<td style="text-align:left">scale-steps</td>
|
|
5339
|
+
<td style="text-align:left">Number</td>
|
|
5340
|
+
<td style="text-align:left">5</td>
|
|
5341
|
+
<td style="text-align:left"></td>
|
|
5342
|
+
</tr>
|
|
5343
|
+
<tr>
|
|
5344
|
+
<td style="text-align:left">size-ratio</td>
|
|
5345
|
+
<td style="text-align:left">Number</td>
|
|
5346
|
+
<td style="text-align:left">1.8</td>
|
|
5347
|
+
<td style="text-align:left">Font size scale when using preset sizes, ratio mixin)</td>
|
|
5348
|
+
</tr>
|
|
5349
|
+
<tr>
|
|
5350
|
+
<td style="text-align:left">size-line-height-ratio</td>
|
|
5351
|
+
<td style="text-align:left">Number</td>
|
|
5352
|
+
<td style="text-align:left">0.97</td>
|
|
5353
|
+
<td style="text-align:left">Default line height scaling (when using preset sizes, ratio mixin). Can shrink line-height as size increase if desirable</td>
|
|
5354
|
+
</tr>
|
|
5355
|
+
<tr>
|
|
5356
|
+
<td style="text-align:left">font-family</td>
|
|
5357
|
+
<td style="text-align:left">Number</td>
|
|
5358
|
+
<td style="text-align:left">(ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif)</td>
|
|
5359
|
+
<td style="text-align:left">Default font family</td>
|
|
5360
|
+
</tr>
|
|
5361
|
+
<tr>
|
|
5362
|
+
<td style="text-align:left">font-family-monospace</td>
|
|
5363
|
+
<td style="text-align:left">Number</td>
|
|
5364
|
+
<td style="text-align:left">(Menlo, Consolas, Monaco, monospace)</td>
|
|
5365
|
+
<td style="text-align:left">Base font-family for monospace</td>
|
|
5366
|
+
</tr>
|
|
5367
|
+
<tr>
|
|
5368
|
+
<td style="text-align:left">font-family-sans</td>
|
|
5369
|
+
<td style="text-align:left">CssValue</td>
|
|
5370
|
+
<td style="text-align:left">(ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif)</td>
|
|
5371
|
+
<td style="text-align:left"></td>
|
|
5372
|
+
</tr>
|
|
5373
|
+
<tr>
|
|
5374
|
+
<td style="text-align:left">font-family-serif</td>
|
|
5375
|
+
<td style="text-align:left">CssValue</td>
|
|
5376
|
+
<td style="text-align:left">(Cambria, Georgia, serif</td>
|
|
5377
|
+
<td style="text-align:left"></td>
|
|
5378
|
+
</tr>
|
|
5379
|
+
<tr>
|
|
5380
|
+
<td style="text-align:left">font-size</td>
|
|
5381
|
+
<td style="text-align:left">Number</td>
|
|
5382
|
+
<td style="text-align:left">16px</td>
|
|
5383
|
+
<td style="text-align:left">Default font size (use pixels, converted, is used for rem base)</td>
|
|
5384
|
+
</tr>
|
|
5385
|
+
<tr>
|
|
5386
|
+
<td style="text-align:left">font-weight</td>
|
|
5387
|
+
<td style="text-align:left">CssValue</td>
|
|
5388
|
+
<td style="text-align:left">inherit</td>
|
|
5389
|
+
<td style="text-align:left"></td>
|
|
5390
|
+
</tr>
|
|
5391
|
+
<tr>
|
|
5392
|
+
<td style="text-align:left">font-weight-bold</td>
|
|
5393
|
+
<td style="text-align:left">CssValue</td>
|
|
5394
|
+
<td style="text-align:left">bold</td>
|
|
5395
|
+
<td style="text-align:left"></td>
|
|
5396
|
+
</tr>
|
|
5397
|
+
<tr>
|
|
5398
|
+
<td style="text-align:left">font-weight-light</td>
|
|
5399
|
+
<td style="text-align:left">CssValue</td>
|
|
5400
|
+
<td style="text-align:left">300</td>
|
|
5401
|
+
<td style="text-align:left"></td>
|
|
5402
|
+
</tr>
|
|
5403
|
+
<tr>
|
|
5404
|
+
<td style="text-align:left">font-weight-normal</td>
|
|
5405
|
+
<td style="text-align:left">CssValue</td>
|
|
5406
|
+
<td style="text-align:left">normal</td>
|
|
5407
|
+
<td style="text-align:left"></td>
|
|
5408
|
+
</tr>
|
|
5409
|
+
<tr>
|
|
5410
|
+
<td style="text-align:left">font-weight-semibold</td>
|
|
5411
|
+
<td style="text-align:left">CssValue</td>
|
|
5412
|
+
<td style="text-align:left">600</td>
|
|
5413
|
+
<td style="text-align:left"></td>
|
|
5414
|
+
</tr>
|
|
5415
|
+
<tr>
|
|
5416
|
+
<td style="text-align:left">line-height</td>
|
|
5417
|
+
<td style="text-align:left">Number</td>
|
|
5418
|
+
<td style="text-align:left">1.5</td>
|
|
5419
|
+
<td style="text-align:left">Default line height</td>
|
|
5420
|
+
</tr>
|
|
5421
|
+
<tr>
|
|
5422
|
+
<td style="text-align:left">line-height-dense</td>
|
|
5423
|
+
<td style="text-align:left">Number</td>
|
|
5424
|
+
<td style="text-align:left">1.3</td>
|
|
5425
|
+
<td style="text-align:left">Default dense line height</td>
|
|
5426
|
+
</tr>
|
|
5427
|
+
<tr>
|
|
5428
|
+
<td style="text-align:left">line-height-densest</td>
|
|
5429
|
+
<td style="text-align:left">Number</td>
|
|
5430
|
+
<td style="text-align:left">1.1</td>
|
|
5431
|
+
<td style="text-align:left"></td>
|
|
5432
|
+
</tr>
|
|
5433
|
+
<tr>
|
|
5434
|
+
<td style="text-align:left">line-height-spaced</td>
|
|
5435
|
+
<td style="text-align:left">Number</td>
|
|
5436
|
+
<td style="text-align:left">1.75</td>
|
|
5437
|
+
<td style="text-align:left"></td>
|
|
5438
|
+
</tr>
|
|
5439
|
+
</tbody>
|
|
5440
|
+
</table>
|
|
5441
|
+
<div class="sassdoc-item-header">
|
|
5442
|
+
<h3 id="variable-sizes" tabindex="-1">$sizes</h3>
|
|
5443
|
+
<div class="sassdoc-item-header__labels">
|
|
5444
|
+
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5445
|
+
</div>
|
|
5446
|
+
</div>
|
|
5447
|
+
<p>Default size presets</p>
|
|
5448
|
+
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">get-default-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5449
|
+
<details>
|
|
5450
|
+
<summary>File Information</summary>
|
|
5451
|
+
<ul>
|
|
5452
|
+
<li><strong>File:</strong> _typography.scss</li>
|
|
5453
|
+
<li><strong>Group:</strong> typography</li>
|
|
5454
|
+
<li><strong>Type:</strong> variable</li>
|
|
5455
|
+
<li><strong>Lines (comments):</strong> 181-190</li>
|
|
5456
|
+
<li><strong>Lines (code):</strong> 192-192</li>
|
|
5457
|
+
</ul>
|
|
5458
|
+
</details>
|
|
5459
|
+
<h4 id="map-properties-1" tabindex="-1">Map Properties</h4>
|
|
5460
|
+
<table>
|
|
5461
|
+
<thead>
|
|
5462
|
+
<tr>
|
|
5463
|
+
<th style="text-align:left">Name</th>
|
|
5464
|
+
<th style="text-align:left">Type</th>
|
|
5465
|
+
<th style="text-align:left">Description</th>
|
|
5466
|
+
</tr>
|
|
5467
|
+
</thead>
|
|
5468
|
+
<tbody>
|
|
5469
|
+
<tr>
|
|
5470
|
+
<td style="text-align:left">$size.name</td>
|
|
5471
|
+
<td style="text-align:left">Number</td>
|
|
5472
|
+
<td style="text-align:left">Name of size</td>
|
|
5473
|
+
</tr>
|
|
5474
|
+
<tr>
|
|
5475
|
+
<td style="text-align:left">$size.name.font-size</td>
|
|
5476
|
+
<td style="text-align:left">Number</td>
|
|
5477
|
+
<td style="text-align:left">Font size in rems or pixels</td>
|
|
5478
|
+
</tr>
|
|
5479
|
+
<tr>
|
|
5480
|
+
<td style="text-align:left">$size.name.line-height</td>
|
|
5481
|
+
<td style="text-align:left">Number</td>
|
|
5482
|
+
<td style="text-align:left">Line height (unitless)</td>
|
|
5483
|
+
</tr>
|
|
5484
|
+
<tr>
|
|
5485
|
+
<td style="text-align:left">$size.name.responsive</td>
|
|
5486
|
+
<td style="text-align:left">Number</td>
|
|
5487
|
+
<td style="text-align:left">Apply responsive sizes</td>
|
|
5488
|
+
</tr>
|
|
5489
|
+
<tr>
|
|
5490
|
+
<td style="text-align:left">$size.name.breakpoints</td>
|
|
5491
|
+
<td style="text-align:left">Number</td>
|
|
5492
|
+
<td style="text-align:left">Map of breakpoints where each key is breakpoint with map of changes (ie. font-size, etc)</td>
|
|
5493
|
+
</tr>
|
|
5494
|
+
<tr>
|
|
5495
|
+
<td style="text-align:left">$size.name.breakpoints.breakpoint.direction</td>
|
|
5496
|
+
<td style="text-align:left">Number</td>
|
|
5497
|
+
<td style="text-align:left">Direction the breakpoint should be applied to (ie. min/max)</td>
|
|
5498
|
+
</tr>
|
|
5499
|
+
<tr>
|
|
5500
|
+
<td style="text-align:left">$size.name.base-class</td>
|
|
5501
|
+
<td style="text-align:left">Boolean</td>
|
|
5502
|
+
<td style="text-align:left">This style should be included in the base (top can be overridden)</td>
|
|
5503
|
+
</tr>
|
|
5504
|
+
<tr>
|
|
5505
|
+
<td style="text-align:left">$size.name.helper-class</td>
|
|
5506
|
+
<td style="text-align:left">Boolean</td>
|
|
5507
|
+
<td style="text-align:left">This style should be included in the helpers (overrides)</td>
|
|
5508
|
+
</tr>
|
|
5509
|
+
</tbody>
|
|
5510
|
+
</table>
|
|
5258
5511
|
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
5259
5512
|
<div class="sassdoc-item-header">
|
|
5260
5513
|
<h3 id="mixin-set" tabindex="-1">set()</h3>
|
|
@@ -6093,259 +6346,6 @@
|
|
|
6093
6346
|
<ul>
|
|
6094
6347
|
<li><a href="/frontend/sass/core/breakpoint/#function-get">get()</a></li>
|
|
6095
6348
|
</ul>
|
|
6096
|
-
<h2 id="variables" tabindex="-1">Variables</h2>
|
|
6097
|
-
<div class="sassdoc-item-header">
|
|
6098
|
-
<h3 id="variable-config" tabindex="-1">$config</h3>
|
|
6099
|
-
<div class="sassdoc-item-header__labels">
|
|
6100
|
-
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
6101
|
-
</div>
|
|
6102
|
-
</div>
|
|
6103
|
-
<p>Module Settings</p>
|
|
6104
|
-
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$config</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
6105
|
-
<span class="pjs-token pjs-string">"letter-spacing-uppercase"</span><span class="pjs-token pjs-punctuation">:</span> 0.04em<span class="pjs-token pjs-punctuation">,</span>
|
|
6106
|
-
<span class="pjs-token pjs-string">"margin-bottom"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
|
|
6107
|
-
<span class="pjs-token pjs-string">"margin-top"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-null pjs-keyword">null</span><span class="pjs-token pjs-punctuation">,</span>
|
|
6108
|
-
<span class="pjs-token pjs-string">"responsive-change"</span><span class="pjs-token pjs-punctuation">:</span> 0.05vw<span class="pjs-token pjs-punctuation">,</span>
|
|
6109
|
-
<span class="pjs-token pjs-string">"scale-steps"</span><span class="pjs-token pjs-punctuation">:</span> 5<span class="pjs-token pjs-punctuation">,</span>
|
|
6110
|
-
<span class="pjs-token pjs-string">"size-ratio"</span><span class="pjs-token pjs-punctuation">:</span> 1.8<span class="pjs-token pjs-punctuation">,</span>
|
|
6111
|
-
<span class="pjs-token pjs-string">"size-line-height-ratio"</span><span class="pjs-token pjs-punctuation">:</span> 0.97<span class="pjs-token pjs-punctuation">,</span>
|
|
6112
|
-
<span class="pjs-token pjs-string">"font-family"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
6113
|
-
<span class="pjs-token pjs-string">"font-family-monospace"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>Menlo<span class="pjs-token pjs-punctuation">,</span> Consolas<span class="pjs-token pjs-punctuation">,</span> Monaco<span class="pjs-token pjs-punctuation">,</span> monospace<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
6114
|
-
<span class="pjs-token pjs-string">"font-family-sans"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>ui-sans-serif<span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"Open Sans"</span><span class="pjs-token pjs-punctuation">,</span> Helvetica<span class="pjs-token pjs-punctuation">,</span> Arial<span class="pjs-token pjs-punctuation">,</span> sans-serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
6115
|
-
<span class="pjs-token pjs-string">"font-family-serif"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>Cambria<span class="pjs-token pjs-punctuation">,</span> Georgia<span class="pjs-token pjs-punctuation">,</span> serif<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
6116
|
-
<span class="pjs-token pjs-string">"font-size"</span><span class="pjs-token pjs-punctuation">:</span> 16px<span class="pjs-token pjs-punctuation">,</span>
|
|
6117
|
-
<span class="pjs-token pjs-string">"font-weight"</span><span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
|
|
6118
|
-
<span class="pjs-token pjs-string">"font-weight-bold"</span><span class="pjs-token pjs-punctuation">:</span> bold<span class="pjs-token pjs-punctuation">,</span>
|
|
6119
|
-
<span class="pjs-token pjs-string">"font-weight-light"</span><span class="pjs-token pjs-punctuation">:</span> 300<span class="pjs-token pjs-punctuation">,</span>
|
|
6120
|
-
<span class="pjs-token pjs-string">"font-weight-normal"</span><span class="pjs-token pjs-punctuation">:</span> normal<span class="pjs-token pjs-punctuation">,</span>
|
|
6121
|
-
<span class="pjs-token pjs-string">"font-weight-semibold"</span><span class="pjs-token pjs-punctuation">:</span> 600<span class="pjs-token pjs-punctuation">,</span>
|
|
6122
|
-
<span class="pjs-token pjs-string">"line-height"</span><span class="pjs-token pjs-punctuation">:</span> 1.5<span class="pjs-token pjs-punctuation">,</span>
|
|
6123
|
-
<span class="pjs-token pjs-string">"line-height-dense"</span><span class="pjs-token pjs-punctuation">:</span> 1.3<span class="pjs-token pjs-punctuation">,</span>
|
|
6124
|
-
<span class="pjs-token pjs-string">"line-height-densest"</span><span class="pjs-token pjs-punctuation">:</span> 1.1<span class="pjs-token pjs-punctuation">,</span>
|
|
6125
|
-
<span class="pjs-token pjs-string">"line-height-spaced"</span><span class="pjs-token pjs-punctuation">:</span> 1.75<span class="pjs-token pjs-punctuation">,</span>
|
|
6126
|
-
<span class="pjs-token pjs-string">"max-width"</span><span class="pjs-token pjs-punctuation">:</span> 60em<span class="pjs-token pjs-punctuation">,</span>
|
|
6127
|
-
<span class="pjs-token pjs-string">"max-width-large"</span><span class="pjs-token pjs-punctuation">:</span> 75em<span class="pjs-token pjs-punctuation">,</span>
|
|
6128
|
-
<span class="pjs-token pjs-string">"max-width-small"</span><span class="pjs-token pjs-punctuation">:</span> 45em<span class="pjs-token pjs-punctuation">,</span>
|
|
6129
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
6130
|
-
<details>
|
|
6131
|
-
<summary>File Information</summary>
|
|
6132
|
-
<ul>
|
|
6133
|
-
<li><strong>File:</strong> _typography.scss</li>
|
|
6134
|
-
<li><strong>Group:</strong> typography</li>
|
|
6135
|
-
<li><strong>Type:</strong> variable</li>
|
|
6136
|
-
<li><strong>Lines (comments):</strong> 15-37</li>
|
|
6137
|
-
<li><strong>Lines (code):</strong> 39-64</li>
|
|
6138
|
-
</ul>
|
|
6139
|
-
</details>
|
|
6140
|
-
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
6141
|
-
<table>
|
|
6142
|
-
<thead>
|
|
6143
|
-
<tr>
|
|
6144
|
-
<th style="text-align:left">Name</th>
|
|
6145
|
-
<th style="text-align:left">Type</th>
|
|
6146
|
-
<th style="text-align:left">Default</th>
|
|
6147
|
-
<th style="text-align:left">Description</th>
|
|
6148
|
-
</tr>
|
|
6149
|
-
</thead>
|
|
6150
|
-
<tbody>
|
|
6151
|
-
<tr>
|
|
6152
|
-
<td style="text-align:left">letter-spacing-uppercase</td>
|
|
6153
|
-
<td style="text-align:left">Dimension</td>
|
|
6154
|
-
<td style="text-align:left">0.04em</td>
|
|
6155
|
-
<td style="text-align:left"></td>
|
|
6156
|
-
</tr>
|
|
6157
|
-
<tr>
|
|
6158
|
-
<td style="text-align:left">margin-bottom</td>
|
|
6159
|
-
<td style="text-align:left">Number</td>
|
|
6160
|
-
<td style="text-align:left">1em</td>
|
|
6161
|
-
<td style="text-align:left">Default margin for typography (like paragraphs)</td>
|
|
6162
|
-
</tr>
|
|
6163
|
-
<tr>
|
|
6164
|
-
<td style="text-align:left">margin-top</td>
|
|
6165
|
-
<td style="text-align:left">Number</td>
|
|
6166
|
-
<td style="text-align:left">null</td>
|
|
6167
|
-
<td style="text-align:left">Default margin for typography (like paragraphs)</td>
|
|
6168
|
-
</tr>
|
|
6169
|
-
<tr>
|
|
6170
|
-
<td style="text-align:left">responsive-change</td>
|
|
6171
|
-
<td style="text-align:left">Number</td>
|
|
6172
|
-
<td style="text-align:left">0.05vw</td>
|
|
6173
|
-
<td style="text-align:left">Amount to scale typography by browser's width (use viewport units)</td>
|
|
6174
|
-
</tr>
|
|
6175
|
-
<tr>
|
|
6176
|
-
<td style="text-align:left">scale-steps</td>
|
|
6177
|
-
<td style="text-align:left">Number</td>
|
|
6178
|
-
<td style="text-align:left">5</td>
|
|
6179
|
-
<td style="text-align:left"></td>
|
|
6180
|
-
</tr>
|
|
6181
|
-
<tr>
|
|
6182
|
-
<td style="text-align:left">size-ratio</td>
|
|
6183
|
-
<td style="text-align:left">Number</td>
|
|
6184
|
-
<td style="text-align:left">1.8</td>
|
|
6185
|
-
<td style="text-align:left">Font size scale when using preset sizes, ratio mixin)</td>
|
|
6186
|
-
</tr>
|
|
6187
|
-
<tr>
|
|
6188
|
-
<td style="text-align:left">size-line-height-ratio</td>
|
|
6189
|
-
<td style="text-align:left">Number</td>
|
|
6190
|
-
<td style="text-align:left">0.97</td>
|
|
6191
|
-
<td style="text-align:left">Default line height scaling (when using preset sizes, ratio mixin). Can shrink line-height as size increase if desirable</td>
|
|
6192
|
-
</tr>
|
|
6193
|
-
<tr>
|
|
6194
|
-
<td style="text-align:left">font-family</td>
|
|
6195
|
-
<td style="text-align:left">Number</td>
|
|
6196
|
-
<td style="text-align:left">(ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif)</td>
|
|
6197
|
-
<td style="text-align:left">Default font family</td>
|
|
6198
|
-
</tr>
|
|
6199
|
-
<tr>
|
|
6200
|
-
<td style="text-align:left">font-family-monospace</td>
|
|
6201
|
-
<td style="text-align:left">Number</td>
|
|
6202
|
-
<td style="text-align:left">(Menlo, Consolas, Monaco, monospace)</td>
|
|
6203
|
-
<td style="text-align:left">Base font-family for monospace</td>
|
|
6204
|
-
</tr>
|
|
6205
|
-
<tr>
|
|
6206
|
-
<td style="text-align:left">font-family-sans</td>
|
|
6207
|
-
<td style="text-align:left">CssValue</td>
|
|
6208
|
-
<td style="text-align:left">(ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif)</td>
|
|
6209
|
-
<td style="text-align:left"></td>
|
|
6210
|
-
</tr>
|
|
6211
|
-
<tr>
|
|
6212
|
-
<td style="text-align:left">font-family-serif</td>
|
|
6213
|
-
<td style="text-align:left">CssValue</td>
|
|
6214
|
-
<td style="text-align:left">(Cambria, Georgia, serif</td>
|
|
6215
|
-
<td style="text-align:left"></td>
|
|
6216
|
-
</tr>
|
|
6217
|
-
<tr>
|
|
6218
|
-
<td style="text-align:left">font-size</td>
|
|
6219
|
-
<td style="text-align:left">Number</td>
|
|
6220
|
-
<td style="text-align:left">16px</td>
|
|
6221
|
-
<td style="text-align:left">Default font size (use pixels, converted, is used for rem base)</td>
|
|
6222
|
-
</tr>
|
|
6223
|
-
<tr>
|
|
6224
|
-
<td style="text-align:left">font-weight</td>
|
|
6225
|
-
<td style="text-align:left">CssValue</td>
|
|
6226
|
-
<td style="text-align:left">inherit</td>
|
|
6227
|
-
<td style="text-align:left"></td>
|
|
6228
|
-
</tr>
|
|
6229
|
-
<tr>
|
|
6230
|
-
<td style="text-align:left">font-weight-bold</td>
|
|
6231
|
-
<td style="text-align:left">CssValue</td>
|
|
6232
|
-
<td style="text-align:left">bold</td>
|
|
6233
|
-
<td style="text-align:left"></td>
|
|
6234
|
-
</tr>
|
|
6235
|
-
<tr>
|
|
6236
|
-
<td style="text-align:left">font-weight-light</td>
|
|
6237
|
-
<td style="text-align:left">CssValue</td>
|
|
6238
|
-
<td style="text-align:left">300</td>
|
|
6239
|
-
<td style="text-align:left"></td>
|
|
6240
|
-
</tr>
|
|
6241
|
-
<tr>
|
|
6242
|
-
<td style="text-align:left">font-weight-normal</td>
|
|
6243
|
-
<td style="text-align:left">CssValue</td>
|
|
6244
|
-
<td style="text-align:left">normal</td>
|
|
6245
|
-
<td style="text-align:left"></td>
|
|
6246
|
-
</tr>
|
|
6247
|
-
<tr>
|
|
6248
|
-
<td style="text-align:left">font-weight-semibold</td>
|
|
6249
|
-
<td style="text-align:left">CssValue</td>
|
|
6250
|
-
<td style="text-align:left">600</td>
|
|
6251
|
-
<td style="text-align:left"></td>
|
|
6252
|
-
</tr>
|
|
6253
|
-
<tr>
|
|
6254
|
-
<td style="text-align:left">line-height</td>
|
|
6255
|
-
<td style="text-align:left">Number</td>
|
|
6256
|
-
<td style="text-align:left">1.5</td>
|
|
6257
|
-
<td style="text-align:left">Default line height</td>
|
|
6258
|
-
</tr>
|
|
6259
|
-
<tr>
|
|
6260
|
-
<td style="text-align:left">line-height-dense</td>
|
|
6261
|
-
<td style="text-align:left">Number</td>
|
|
6262
|
-
<td style="text-align:left">1.3</td>
|
|
6263
|
-
<td style="text-align:left">Default dense line height</td>
|
|
6264
|
-
</tr>
|
|
6265
|
-
<tr>
|
|
6266
|
-
<td style="text-align:left">line-height-densest</td>
|
|
6267
|
-
<td style="text-align:left">Number</td>
|
|
6268
|
-
<td style="text-align:left">1.1</td>
|
|
6269
|
-
<td style="text-align:left"></td>
|
|
6270
|
-
</tr>
|
|
6271
|
-
<tr>
|
|
6272
|
-
<td style="text-align:left">line-height-spaced</td>
|
|
6273
|
-
<td style="text-align:left">Number</td>
|
|
6274
|
-
<td style="text-align:left">1.75</td>
|
|
6275
|
-
<td style="text-align:left"></td>
|
|
6276
|
-
</tr>
|
|
6277
|
-
</tbody>
|
|
6278
|
-
</table>
|
|
6279
|
-
<div class="sassdoc-item-header">
|
|
6280
|
-
<h3 id="variable-sizes" tabindex="-1">$sizes</h3>
|
|
6281
|
-
<div class="sassdoc-item-header__labels">
|
|
6282
|
-
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
6283
|
-
</div>
|
|
6284
|
-
</div>
|
|
6285
|
-
<p>Default size presets</p>
|
|
6286
|
-
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">get-default-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
6287
|
-
<details>
|
|
6288
|
-
<summary>File Information</summary>
|
|
6289
|
-
<ul>
|
|
6290
|
-
<li><strong>File:</strong> _typography.scss</li>
|
|
6291
|
-
<li><strong>Group:</strong> typography</li>
|
|
6292
|
-
<li><strong>Type:</strong> variable</li>
|
|
6293
|
-
<li><strong>Lines (comments):</strong> 181-190</li>
|
|
6294
|
-
<li><strong>Lines (code):</strong> 192-192</li>
|
|
6295
|
-
</ul>
|
|
6296
|
-
</details>
|
|
6297
|
-
<h4 id="map-properties-1" tabindex="-1">Map Properties</h4>
|
|
6298
|
-
<table>
|
|
6299
|
-
<thead>
|
|
6300
|
-
<tr>
|
|
6301
|
-
<th style="text-align:left">Name</th>
|
|
6302
|
-
<th style="text-align:left">Type</th>
|
|
6303
|
-
<th style="text-align:left">Description</th>
|
|
6304
|
-
</tr>
|
|
6305
|
-
</thead>
|
|
6306
|
-
<tbody>
|
|
6307
|
-
<tr>
|
|
6308
|
-
<td style="text-align:left">$size.name</td>
|
|
6309
|
-
<td style="text-align:left">Number</td>
|
|
6310
|
-
<td style="text-align:left">Name of size</td>
|
|
6311
|
-
</tr>
|
|
6312
|
-
<tr>
|
|
6313
|
-
<td style="text-align:left">$size.name.font-size</td>
|
|
6314
|
-
<td style="text-align:left">Number</td>
|
|
6315
|
-
<td style="text-align:left">Font size in rems or pixels</td>
|
|
6316
|
-
</tr>
|
|
6317
|
-
<tr>
|
|
6318
|
-
<td style="text-align:left">$size.name.line-height</td>
|
|
6319
|
-
<td style="text-align:left">Number</td>
|
|
6320
|
-
<td style="text-align:left">Line height (unitless)</td>
|
|
6321
|
-
</tr>
|
|
6322
|
-
<tr>
|
|
6323
|
-
<td style="text-align:left">$size.name.responsive</td>
|
|
6324
|
-
<td style="text-align:left">Number</td>
|
|
6325
|
-
<td style="text-align:left">Apply responsive sizes</td>
|
|
6326
|
-
</tr>
|
|
6327
|
-
<tr>
|
|
6328
|
-
<td style="text-align:left">$size.name.breakpoints</td>
|
|
6329
|
-
<td style="text-align:left">Number</td>
|
|
6330
|
-
<td style="text-align:left">Map of breakpoints where each key is breakpoint with map of changes (ie. font-size, etc)</td>
|
|
6331
|
-
</tr>
|
|
6332
|
-
<tr>
|
|
6333
|
-
<td style="text-align:left">$size.name.breakpoints.breakpoint.direction</td>
|
|
6334
|
-
<td style="text-align:left">Number</td>
|
|
6335
|
-
<td style="text-align:left">Direction the breakpoint should be applied to (ie. min/max)</td>
|
|
6336
|
-
</tr>
|
|
6337
|
-
<tr>
|
|
6338
|
-
<td style="text-align:left">$size.name.base-class</td>
|
|
6339
|
-
<td style="text-align:left">Boolean</td>
|
|
6340
|
-
<td style="text-align:left">This style should be included in the base (top can be overridden)</td>
|
|
6341
|
-
</tr>
|
|
6342
|
-
<tr>
|
|
6343
|
-
<td style="text-align:left">$size.name.helper-class</td>
|
|
6344
|
-
<td style="text-align:left">Boolean</td>
|
|
6345
|
-
<td style="text-align:left">This style should be included in the helpers (overrides)</td>
|
|
6346
|
-
</tr>
|
|
6347
|
-
</tbody>
|
|
6348
|
-
</table>
|
|
6349
6349
|
|
|
6350
6350
|
</div>
|
|
6351
6351
|
</div>
|