@ulu/frontend 0.1.0-beta.42 → 0.1.0-beta.43
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 +5 -0
- package/dist/ulu-frontend.min.css +1 -1
- package/docs-dev/changelog/index.html +16 -0
- package/docs-dev/demos/card/index.html +16 -16
- package/docs-dev/demos/data-table/index.html +100 -100
- 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 +170 -170
- 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 +1 -1
- package/scss/components/_card.scss +9 -6
|
@@ -5166,32 +5166,32 @@
|
|
|
5166
5166
|
<div class="toc">
|
|
5167
5167
|
<ol>
|
|
5168
5168
|
|
|
5169
|
-
<li><a href="#
|
|
5169
|
+
<li><a href="#variables">Variables</a>
|
|
5170
5170
|
|
|
5171
5171
|
<ol>
|
|
5172
5172
|
|
|
5173
|
-
<li><a href="#
|
|
5174
|
-
</li>
|
|
5175
|
-
|
|
5176
|
-
<li><a href="#mixin-styles">styles()</a>
|
|
5173
|
+
<li><a href="#variable-config">$config</a>
|
|
5177
5174
|
</li>
|
|
5178
5175
|
</ol>
|
|
5179
5176
|
</li>
|
|
5180
5177
|
|
|
5181
|
-
<li><a href="#
|
|
5178
|
+
<li><a href="#mixins">Mixins</a>
|
|
5182
5179
|
|
|
5183
5180
|
<ol>
|
|
5184
5181
|
|
|
5185
|
-
<li><a href="#
|
|
5182
|
+
<li><a href="#mixin-set">set()</a>
|
|
5183
|
+
</li>
|
|
5184
|
+
|
|
5185
|
+
<li><a href="#mixin-styles">styles()</a>
|
|
5186
5186
|
</li>
|
|
5187
5187
|
</ol>
|
|
5188
5188
|
</li>
|
|
5189
5189
|
|
|
5190
|
-
<li><a href="#
|
|
5190
|
+
<li><a href="#functions">Functions</a>
|
|
5191
5191
|
|
|
5192
5192
|
<ol>
|
|
5193
5193
|
|
|
5194
|
-
<li><a href="#
|
|
5194
|
+
<li><a href="#function-get">get()</a>
|
|
5195
5195
|
</li>
|
|
5196
5196
|
</ol>
|
|
5197
5197
|
</li>
|
|
@@ -5210,115 +5210,6 @@
|
|
|
5210
5210
|
<div class="type-large">
|
|
5211
5211
|
<p>Outputs accordion component stylesheet, which can be used with </p><details> or custom disclosure components<p></p>
|
|
5212
5212
|
</details></div>
|
|
5213
|
-
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
5214
|
-
<div class="sassdoc-item-header">
|
|
5215
|
-
<h3 id="mixin-set" tabindex="-1">set()</h3>
|
|
5216
|
-
<div class="sassdoc-item-header__labels">
|
|
5217
|
-
<span class="tag tag--primary"><strong>Mixin</strong></span>
|
|
5218
|
-
</div>
|
|
5219
|
-
</div>
|
|
5220
|
-
<p>Change modules $config</p>
|
|
5221
|
-
<details>
|
|
5222
|
-
<summary>File Information</summary>
|
|
5223
|
-
<ul>
|
|
5224
|
-
<li><strong>File:</strong> _accordion.scss</li>
|
|
5225
|
-
<li><strong>Group:</strong> accordion</li>
|
|
5226
|
-
<li><strong>Type:</strong> mixin</li>
|
|
5227
|
-
<li><strong>Lines (comments):</strong> 73-76</li>
|
|
5228
|
-
<li><strong>Lines (code):</strong> 78-80</li>
|
|
5229
|
-
</ul>
|
|
5230
|
-
</details>
|
|
5231
|
-
<h4 id="examples" tabindex="-1">Examples</h4>
|
|
5232
|
-
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-accordion-set</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">(</span> <span class="pjs-token pjs-string">"property"</span> <span class="pjs-token pjs-punctuation">:</span> value <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5233
|
-
<h4 id="parameters" tabindex="-1">Parameters</h4>
|
|
5234
|
-
<table>
|
|
5235
|
-
<thead>
|
|
5236
|
-
<tr>
|
|
5237
|
-
<th style="text-align:left">Name</th>
|
|
5238
|
-
<th style="text-align:left">Type</th>
|
|
5239
|
-
<th style="text-align:left">Description</th>
|
|
5240
|
-
</tr>
|
|
5241
|
-
</thead>
|
|
5242
|
-
<tbody>
|
|
5243
|
-
<tr>
|
|
5244
|
-
<td style="text-align:left">$changes</td>
|
|
5245
|
-
<td style="text-align:left"><code>Map</code></td>
|
|
5246
|
-
<td style="text-align:left">Map of changes</td>
|
|
5247
|
-
</tr>
|
|
5248
|
-
</tbody>
|
|
5249
|
-
</table>
|
|
5250
|
-
<h4 id="require" tabindex="-1">Require</h4>
|
|
5251
|
-
<ul>
|
|
5252
|
-
<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
|
|
5253
|
-
</ul>
|
|
5254
|
-
<div class="sassdoc-item-header">
|
|
5255
|
-
<h3 id="mixin-styles" tabindex="-1">styles()</h3>
|
|
5256
|
-
<div class="sassdoc-item-header__labels">
|
|
5257
|
-
<span class="tag tag--primary"><strong>Mixin</strong></span>
|
|
5258
|
-
</div>
|
|
5259
|
-
</div>
|
|
5260
|
-
<p>Prints component styles</p>
|
|
5261
|
-
<details>
|
|
5262
|
-
<summary>File Information</summary>
|
|
5263
|
-
<ul>
|
|
5264
|
-
<li><strong>File:</strong> _accordion.scss</li>
|
|
5265
|
-
<li><strong>Group:</strong> accordion</li>
|
|
5266
|
-
<li><strong>Type:</strong> mixin</li>
|
|
5267
|
-
<li><strong>Lines (comments):</strong> 91-94</li>
|
|
5268
|
-
<li><strong>Lines (code):</strong> 96-215</li>
|
|
5269
|
-
</ul>
|
|
5270
|
-
</details>
|
|
5271
|
-
<div class="callout callout--demo crop-margins">
|
|
5272
|
-
<h4 id="demo" tabindex="-1">Demo</h4>
|
|
5273
|
-
<p><a class="button" href="/frontend/demos/accordion">View</a></p>
|
|
5274
|
-
</div>
|
|
5275
|
-
<h4 id="examples-1" tabindex="-1">Examples</h4>
|
|
5276
|
-
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-accordion-styles</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5277
|
-
<h4 id="require-1" tabindex="-1">Require</h4>
|
|
5278
|
-
<ul>
|
|
5279
|
-
<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
|
|
5280
|
-
</ul>
|
|
5281
|
-
<h2 id="functions" tabindex="-1">Functions</h2>
|
|
5282
|
-
<div class="sassdoc-item-header">
|
|
5283
|
-
<h3 id="function-get" tabindex="-1">get()</h3>
|
|
5284
|
-
<div class="sassdoc-item-header__labels">
|
|
5285
|
-
<span class="tag tag--primary"><strong>Function</strong></span>
|
|
5286
|
-
</div>
|
|
5287
|
-
</div>
|
|
5288
|
-
<p>Get a config option</p>
|
|
5289
|
-
<details>
|
|
5290
|
-
<summary>File Information</summary>
|
|
5291
|
-
<ul>
|
|
5292
|
-
<li><strong>File:</strong> _accordion.scss</li>
|
|
5293
|
-
<li><strong>Group:</strong> accordion</li>
|
|
5294
|
-
<li><strong>Type:</strong> function</li>
|
|
5295
|
-
<li><strong>Lines (comments):</strong> 82-85</li>
|
|
5296
|
-
<li><strong>Lines (code):</strong> 87-89</li>
|
|
5297
|
-
</ul>
|
|
5298
|
-
</details>
|
|
5299
|
-
<h4 id="examples-2" tabindex="-1">Examples</h4>
|
|
5300
|
-
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-accordion-get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"property"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5301
|
-
<h4 id="parameters-1" tabindex="-1">Parameters</h4>
|
|
5302
|
-
<table>
|
|
5303
|
-
<thead>
|
|
5304
|
-
<tr>
|
|
5305
|
-
<th style="text-align:left">Name</th>
|
|
5306
|
-
<th style="text-align:left">Type</th>
|
|
5307
|
-
<th style="text-align:left">Description</th>
|
|
5308
|
-
</tr>
|
|
5309
|
-
</thead>
|
|
5310
|
-
<tbody>
|
|
5311
|
-
<tr>
|
|
5312
|
-
<td style="text-align:left">$name</td>
|
|
5313
|
-
<td style="text-align:left"><code>Map</code></td>
|
|
5314
|
-
<td style="text-align:left">Name of property</td>
|
|
5315
|
-
</tr>
|
|
5316
|
-
</tbody>
|
|
5317
|
-
</table>
|
|
5318
|
-
<h4 id="require-2" tabindex="-1">Require</h4>
|
|
5319
|
-
<ul>
|
|
5320
|
-
<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
|
|
5321
|
-
</ul>
|
|
5322
5213
|
<h2 id="variables" tabindex="-1">Variables</h2>
|
|
5323
5214
|
<div class="sassdoc-item-header">
|
|
5324
5215
|
<h3 id="variable-config" tabindex="-1">$config</h3>
|
|
@@ -5535,6 +5426,115 @@
|
|
|
5535
5426
|
</tr>
|
|
5536
5427
|
</tbody>
|
|
5537
5428
|
</table>
|
|
5429
|
+
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
5430
|
+
<div class="sassdoc-item-header">
|
|
5431
|
+
<h3 id="mixin-set" tabindex="-1">set()</h3>
|
|
5432
|
+
<div class="sassdoc-item-header__labels">
|
|
5433
|
+
<span class="tag tag--primary"><strong>Mixin</strong></span>
|
|
5434
|
+
</div>
|
|
5435
|
+
</div>
|
|
5436
|
+
<p>Change modules $config</p>
|
|
5437
|
+
<details>
|
|
5438
|
+
<summary>File Information</summary>
|
|
5439
|
+
<ul>
|
|
5440
|
+
<li><strong>File:</strong> _accordion.scss</li>
|
|
5441
|
+
<li><strong>Group:</strong> accordion</li>
|
|
5442
|
+
<li><strong>Type:</strong> mixin</li>
|
|
5443
|
+
<li><strong>Lines (comments):</strong> 73-76</li>
|
|
5444
|
+
<li><strong>Lines (code):</strong> 78-80</li>
|
|
5445
|
+
</ul>
|
|
5446
|
+
</details>
|
|
5447
|
+
<h4 id="examples" tabindex="-1">Examples</h4>
|
|
5448
|
+
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-accordion-set</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">(</span> <span class="pjs-token pjs-string">"property"</span> <span class="pjs-token pjs-punctuation">:</span> value <span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5449
|
+
<h4 id="parameters" tabindex="-1">Parameters</h4>
|
|
5450
|
+
<table>
|
|
5451
|
+
<thead>
|
|
5452
|
+
<tr>
|
|
5453
|
+
<th style="text-align:left">Name</th>
|
|
5454
|
+
<th style="text-align:left">Type</th>
|
|
5455
|
+
<th style="text-align:left">Description</th>
|
|
5456
|
+
</tr>
|
|
5457
|
+
</thead>
|
|
5458
|
+
<tbody>
|
|
5459
|
+
<tr>
|
|
5460
|
+
<td style="text-align:left">$changes</td>
|
|
5461
|
+
<td style="text-align:left"><code>Map</code></td>
|
|
5462
|
+
<td style="text-align:left">Map of changes</td>
|
|
5463
|
+
</tr>
|
|
5464
|
+
</tbody>
|
|
5465
|
+
</table>
|
|
5466
|
+
<h4 id="require" tabindex="-1">Require</h4>
|
|
5467
|
+
<ul>
|
|
5468
|
+
<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
|
|
5469
|
+
</ul>
|
|
5470
|
+
<div class="sassdoc-item-header">
|
|
5471
|
+
<h3 id="mixin-styles" tabindex="-1">styles()</h3>
|
|
5472
|
+
<div class="sassdoc-item-header__labels">
|
|
5473
|
+
<span class="tag tag--primary"><strong>Mixin</strong></span>
|
|
5474
|
+
</div>
|
|
5475
|
+
</div>
|
|
5476
|
+
<p>Prints component styles</p>
|
|
5477
|
+
<details>
|
|
5478
|
+
<summary>File Information</summary>
|
|
5479
|
+
<ul>
|
|
5480
|
+
<li><strong>File:</strong> _accordion.scss</li>
|
|
5481
|
+
<li><strong>Group:</strong> accordion</li>
|
|
5482
|
+
<li><strong>Type:</strong> mixin</li>
|
|
5483
|
+
<li><strong>Lines (comments):</strong> 91-94</li>
|
|
5484
|
+
<li><strong>Lines (code):</strong> 96-215</li>
|
|
5485
|
+
</ul>
|
|
5486
|
+
</details>
|
|
5487
|
+
<div class="callout callout--demo crop-margins">
|
|
5488
|
+
<h4 id="demo" tabindex="-1">Demo</h4>
|
|
5489
|
+
<p><a class="button" href="/frontend/demos/accordion">View</a></p>
|
|
5490
|
+
</div>
|
|
5491
|
+
<h4 id="examples-1" tabindex="-1">Examples</h4>
|
|
5492
|
+
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-accordion-styles</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5493
|
+
<h4 id="require-1" tabindex="-1">Require</h4>
|
|
5494
|
+
<ul>
|
|
5495
|
+
<li><a href="/frontend/sass/components/accordion/#function-get">get()</a></li>
|
|
5496
|
+
</ul>
|
|
5497
|
+
<h2 id="functions" tabindex="-1">Functions</h2>
|
|
5498
|
+
<div class="sassdoc-item-header">
|
|
5499
|
+
<h3 id="function-get" tabindex="-1">get()</h3>
|
|
5500
|
+
<div class="sassdoc-item-header__labels">
|
|
5501
|
+
<span class="tag tag--primary"><strong>Function</strong></span>
|
|
5502
|
+
</div>
|
|
5503
|
+
</div>
|
|
5504
|
+
<p>Get a config option</p>
|
|
5505
|
+
<details>
|
|
5506
|
+
<summary>File Information</summary>
|
|
5507
|
+
<ul>
|
|
5508
|
+
<li><strong>File:</strong> _accordion.scss</li>
|
|
5509
|
+
<li><strong>Group:</strong> accordion</li>
|
|
5510
|
+
<li><strong>Type:</strong> function</li>
|
|
5511
|
+
<li><strong>Lines (comments):</strong> 82-85</li>
|
|
5512
|
+
<li><strong>Lines (code):</strong> 87-89</li>
|
|
5513
|
+
</ul>
|
|
5514
|
+
</details>
|
|
5515
|
+
<h4 id="examples-2" tabindex="-1">Examples</h4>
|
|
5516
|
+
<pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">component-accordion-get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"property"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5517
|
+
<h4 id="parameters-1" tabindex="-1">Parameters</h4>
|
|
5518
|
+
<table>
|
|
5519
|
+
<thead>
|
|
5520
|
+
<tr>
|
|
5521
|
+
<th style="text-align:left">Name</th>
|
|
5522
|
+
<th style="text-align:left">Type</th>
|
|
5523
|
+
<th style="text-align:left">Description</th>
|
|
5524
|
+
</tr>
|
|
5525
|
+
</thead>
|
|
5526
|
+
<tbody>
|
|
5527
|
+
<tr>
|
|
5528
|
+
<td style="text-align:left">$name</td>
|
|
5529
|
+
<td style="text-align:left"><code>Map</code></td>
|
|
5530
|
+
<td style="text-align:left">Name of property</td>
|
|
5531
|
+
</tr>
|
|
5532
|
+
</tbody>
|
|
5533
|
+
</table>
|
|
5534
|
+
<h4 id="require-2" tabindex="-1">Require</h4>
|
|
5535
|
+
<ul>
|
|
5536
|
+
<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
|
|
5537
|
+
</ul>
|
|
5538
5538
|
|
|
5539
5539
|
</div>
|
|
5540
5540
|
</div>
|
|
@@ -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>
|
|
@@ -5187,18 +5199,6 @@
|
|
|
5187
5199
|
|
|
5188
5200
|
<li><a href="#function-get">get()</a>
|
|
5189
5201
|
</li>
|
|
5190
|
-
</ol>
|
|
5191
|
-
</li>
|
|
5192
|
-
|
|
5193
|
-
<li><a href="#variables">Variables</a>
|
|
5194
|
-
|
|
5195
|
-
<ol>
|
|
5196
|
-
|
|
5197
|
-
<li><a href="#variable-config">$config</a>
|
|
5198
|
-
</li>
|
|
5199
|
-
|
|
5200
|
-
<li><a href="#variable-sizes">$sizes</a>
|
|
5201
|
-
</li>
|
|
5202
5202
|
</ol>
|
|
5203
5203
|
</li>
|
|
5204
5204
|
</ol>
|
|
@@ -5216,6 +5216,118 @@
|
|
|
5216
5216
|
<div class="type-large">
|
|
5217
5217
|
<p>Creates adaptive (changing at breakpoints) in between items (vertical/horizontal layout)</p>
|
|
5218
5218
|
</div>
|
|
5219
|
+
<h2 id="variables" tabindex="-1">Variables</h2>
|
|
5220
|
+
<div class="sassdoc-item-header">
|
|
5221
|
+
<h3 id="variable-config" tabindex="-1">$config</h3>
|
|
5222
|
+
<div class="sassdoc-item-header__labels">
|
|
5223
|
+
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5224
|
+
</div>
|
|
5225
|
+
</div>
|
|
5226
|
+
<p>Module Settings</p>
|
|
5227
|
+
<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>
|
|
5228
|
+
<span class="pjs-token pjs-string">"outputMargin"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5229
|
+
<span class="pjs-token pjs-string">"outputPadding"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5230
|
+
<span class="pjs-token pjs-string">"outputX"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5231
|
+
<span class="pjs-token pjs-string">"outputY"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5232
|
+
<span class="pjs-token pjs-string">"selectorX"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"sides"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5233
|
+
<span class="pjs-token pjs-string">"selectorY"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"ends"</span>
|
|
5234
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5235
|
+
<details>
|
|
5236
|
+
<summary>File Information</summary>
|
|
5237
|
+
<ul>
|
|
5238
|
+
<li><strong>File:</strong> _adaptive-spacing.scss</li>
|
|
5239
|
+
<li><strong>Group:</strong> adaptive-spacing</li>
|
|
5240
|
+
<li><strong>Type:</strong> variable</li>
|
|
5241
|
+
<li><strong>Lines (comments):</strong> 12-19</li>
|
|
5242
|
+
<li><strong>Lines (code):</strong> 21-29</li>
|
|
5243
|
+
</ul>
|
|
5244
|
+
</details>
|
|
5245
|
+
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
5246
|
+
<table>
|
|
5247
|
+
<thead>
|
|
5248
|
+
<tr>
|
|
5249
|
+
<th style="text-align:left">Name</th>
|
|
5250
|
+
<th style="text-align:left">Type</th>
|
|
5251
|
+
<th style="text-align:left">Default</th>
|
|
5252
|
+
<th style="text-align:left">Description</th>
|
|
5253
|
+
</tr>
|
|
5254
|
+
</thead>
|
|
5255
|
+
<tbody>
|
|
5256
|
+
<tr>
|
|
5257
|
+
<td style="text-align:left">outputMargin</td>
|
|
5258
|
+
<td style="text-align:left">Boolean</td>
|
|
5259
|
+
<td style="text-align:left">false</td>
|
|
5260
|
+
<td style="text-align:left">Toggles the output of margin classes.</td>
|
|
5261
|
+
</tr>
|
|
5262
|
+
<tr>
|
|
5263
|
+
<td style="text-align:left">outputPadding</td>
|
|
5264
|
+
<td style="text-align:left">Boolean</td>
|
|
5265
|
+
<td style="text-align:left">true</td>
|
|
5266
|
+
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5267
|
+
</tr>
|
|
5268
|
+
<tr>
|
|
5269
|
+
<td style="text-align:left">outputX</td>
|
|
5270
|
+
<td style="text-align:left">Boolean</td>
|
|
5271
|
+
<td style="text-align:left">true</td>
|
|
5272
|
+
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5273
|
+
</tr>
|
|
5274
|
+
<tr>
|
|
5275
|
+
<td style="text-align:left">outputY</td>
|
|
5276
|
+
<td style="text-align:left">Boolean</td>
|
|
5277
|
+
<td style="text-align:left">true</td>
|
|
5278
|
+
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5279
|
+
</tr>
|
|
5280
|
+
<tr>
|
|
5281
|
+
<td style="text-align:left">selectorX</td>
|
|
5282
|
+
<td style="text-align:left">Boolean</td>
|
|
5283
|
+
<td style="text-align:left">"sides"</td>
|
|
5284
|
+
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5285
|
+
</tr>
|
|
5286
|
+
<tr>
|
|
5287
|
+
<td style="text-align:left">selectorY</td>
|
|
5288
|
+
<td style="text-align:left">Boolean</td>
|
|
5289
|
+
<td style="text-align:left">"ends"</td>
|
|
5290
|
+
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5291
|
+
</tr>
|
|
5292
|
+
</tbody>
|
|
5293
|
+
</table>
|
|
5294
|
+
<div class="sassdoc-item-header">
|
|
5295
|
+
<h3 id="variable-sizes" tabindex="-1">$sizes</h3>
|
|
5296
|
+
<div class="sassdoc-item-header__labels">
|
|
5297
|
+
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5298
|
+
</div>
|
|
5299
|
+
</div>
|
|
5300
|
+
<p>Sizes Map</p>
|
|
5301
|
+
<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-punctuation">(</span>
|
|
5302
|
+
<span class="pjs-token pjs-string">"small"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5303
|
+
<span class="pjs-token pjs-string">"initial"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5304
|
+
<span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 2rem
|
|
5305
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5306
|
+
<span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5307
|
+
<span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5308
|
+
<span class="pjs-token pjs-string">"size"</span><span class="pjs-token pjs-punctuation">:</span> 4rem
|
|
5309
|
+
<span class="pjs-token pjs-punctuation">)</span>
|
|
5310
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5311
|
+
<span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5312
|
+
<span class="pjs-token pjs-string">"initial"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5313
|
+
<span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 4rem
|
|
5314
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5315
|
+
<span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5316
|
+
<span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5317
|
+
<span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 8rem
|
|
5318
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5319
|
+
<span class="pjs-token pjs-punctuation">)</span>
|
|
5320
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5321
|
+
<details>
|
|
5322
|
+
<summary>File Information</summary>
|
|
5323
|
+
<ul>
|
|
5324
|
+
<li><strong>File:</strong> _adaptive-spacing.scss</li>
|
|
5325
|
+
<li><strong>Group:</strong> adaptive-spacing</li>
|
|
5326
|
+
<li><strong>Type:</strong> variable</li>
|
|
5327
|
+
<li><strong>Lines (comments):</strong> 31-32</li>
|
|
5328
|
+
<li><strong>Lines (code):</strong> 34-53</li>
|
|
5329
|
+
</ul>
|
|
5330
|
+
</details>
|
|
5219
5331
|
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
5220
5332
|
<div class="sassdoc-item-header">
|
|
5221
5333
|
<h3 id="mixin-set" tabindex="-1">set()</h3>
|
|
@@ -5366,118 +5478,6 @@
|
|
|
5366
5478
|
<ul>
|
|
5367
5479
|
<li><a href="/frontend/sass/components/accordion/#variable-config">$config</a></li>
|
|
5368
5480
|
</ul>
|
|
5369
|
-
<h2 id="variables" tabindex="-1">Variables</h2>
|
|
5370
|
-
<div class="sassdoc-item-header">
|
|
5371
|
-
<h3 id="variable-config" tabindex="-1">$config</h3>
|
|
5372
|
-
<div class="sassdoc-item-header__labels">
|
|
5373
|
-
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5374
|
-
</div>
|
|
5375
|
-
</div>
|
|
5376
|
-
<p>Module Settings</p>
|
|
5377
|
-
<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>
|
|
5378
|
-
<span class="pjs-token pjs-string">"outputMargin"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5379
|
-
<span class="pjs-token pjs-string">"outputPadding"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5380
|
-
<span class="pjs-token pjs-string">"outputX"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5381
|
-
<span class="pjs-token pjs-string">"outputY"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5382
|
-
<span class="pjs-token pjs-string">"selectorX"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"sides"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5383
|
-
<span class="pjs-token pjs-string">"selectorY"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"ends"</span>
|
|
5384
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5385
|
-
<details>
|
|
5386
|
-
<summary>File Information</summary>
|
|
5387
|
-
<ul>
|
|
5388
|
-
<li><strong>File:</strong> _adaptive-spacing.scss</li>
|
|
5389
|
-
<li><strong>Group:</strong> adaptive-spacing</li>
|
|
5390
|
-
<li><strong>Type:</strong> variable</li>
|
|
5391
|
-
<li><strong>Lines (comments):</strong> 12-19</li>
|
|
5392
|
-
<li><strong>Lines (code):</strong> 21-29</li>
|
|
5393
|
-
</ul>
|
|
5394
|
-
</details>
|
|
5395
|
-
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
5396
|
-
<table>
|
|
5397
|
-
<thead>
|
|
5398
|
-
<tr>
|
|
5399
|
-
<th style="text-align:left">Name</th>
|
|
5400
|
-
<th style="text-align:left">Type</th>
|
|
5401
|
-
<th style="text-align:left">Default</th>
|
|
5402
|
-
<th style="text-align:left">Description</th>
|
|
5403
|
-
</tr>
|
|
5404
|
-
</thead>
|
|
5405
|
-
<tbody>
|
|
5406
|
-
<tr>
|
|
5407
|
-
<td style="text-align:left">outputMargin</td>
|
|
5408
|
-
<td style="text-align:left">Boolean</td>
|
|
5409
|
-
<td style="text-align:left">false</td>
|
|
5410
|
-
<td style="text-align:left">Toggles the output of margin classes.</td>
|
|
5411
|
-
</tr>
|
|
5412
|
-
<tr>
|
|
5413
|
-
<td style="text-align:left">outputPadding</td>
|
|
5414
|
-
<td style="text-align:left">Boolean</td>
|
|
5415
|
-
<td style="text-align:left">true</td>
|
|
5416
|
-
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5417
|
-
</tr>
|
|
5418
|
-
<tr>
|
|
5419
|
-
<td style="text-align:left">outputX</td>
|
|
5420
|
-
<td style="text-align:left">Boolean</td>
|
|
5421
|
-
<td style="text-align:left">true</td>
|
|
5422
|
-
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5423
|
-
</tr>
|
|
5424
|
-
<tr>
|
|
5425
|
-
<td style="text-align:left">outputY</td>
|
|
5426
|
-
<td style="text-align:left">Boolean</td>
|
|
5427
|
-
<td style="text-align:left">true</td>
|
|
5428
|
-
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5429
|
-
</tr>
|
|
5430
|
-
<tr>
|
|
5431
|
-
<td style="text-align:left">selectorX</td>
|
|
5432
|
-
<td style="text-align:left">Boolean</td>
|
|
5433
|
-
<td style="text-align:left">"sides"</td>
|
|
5434
|
-
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5435
|
-
</tr>
|
|
5436
|
-
<tr>
|
|
5437
|
-
<td style="text-align:left">selectorY</td>
|
|
5438
|
-
<td style="text-align:left">Boolean</td>
|
|
5439
|
-
<td style="text-align:left">"ends"</td>
|
|
5440
|
-
<td style="text-align:left">This is the background color of the accordion before it is expanded.</td>
|
|
5441
|
-
</tr>
|
|
5442
|
-
</tbody>
|
|
5443
|
-
</table>
|
|
5444
|
-
<div class="sassdoc-item-header">
|
|
5445
|
-
<h3 id="variable-sizes" tabindex="-1">$sizes</h3>
|
|
5446
|
-
<div class="sassdoc-item-header__labels">
|
|
5447
|
-
<span class="tag tag--primary"><strong>Variable</strong></span> <span class="tag"><strong>Type</strong>: Map</span>
|
|
5448
|
-
</div>
|
|
5449
|
-
</div>
|
|
5450
|
-
<p>Sizes Map</p>
|
|
5451
|
-
<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-punctuation">(</span>
|
|
5452
|
-
<span class="pjs-token pjs-string">"small"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5453
|
-
<span class="pjs-token pjs-string">"initial"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5454
|
-
<span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 2rem
|
|
5455
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5456
|
-
<span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5457
|
-
<span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5458
|
-
<span class="pjs-token pjs-string">"size"</span><span class="pjs-token pjs-punctuation">:</span> 4rem
|
|
5459
|
-
<span class="pjs-token pjs-punctuation">)</span>
|
|
5460
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5461
|
-
<span class="pjs-token pjs-string">"large"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5462
|
-
<span class="pjs-token pjs-string">"initial"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5463
|
-
<span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 4rem
|
|
5464
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5465
|
-
<span class="pjs-token pjs-string">"medium"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>
|
|
5466
|
-
<span class="pjs-token pjs-string">"direction"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"min"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5467
|
-
<span class="pjs-token pjs-string">"size"</span> <span class="pjs-token pjs-punctuation">:</span> 8rem
|
|
5468
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5469
|
-
<span class="pjs-token pjs-punctuation">)</span>
|
|
5470
|
-
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5471
|
-
<details>
|
|
5472
|
-
<summary>File Information</summary>
|
|
5473
|
-
<ul>
|
|
5474
|
-
<li><strong>File:</strong> _adaptive-spacing.scss</li>
|
|
5475
|
-
<li><strong>Group:</strong> adaptive-spacing</li>
|
|
5476
|
-
<li><strong>Type:</strong> variable</li>
|
|
5477
|
-
<li><strong>Lines (comments):</strong> 31-32</li>
|
|
5478
|
-
<li><strong>Lines (code):</strong> 34-53</li>
|
|
5479
|
-
</ul>
|
|
5480
|
-
</details>
|
|
5481
5481
|
|
|
5482
5482
|
</div>
|
|
5483
5483
|
</div>
|