@ulu/frontend 0.1.0-beta.69 → 0.1.0-beta.70
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 +10 -0
- package/dist/ulu-frontend.min.css +1 -1
- package/docs-dev/changelog/index.html +20 -0
- package/docs-dev/demos/card/index.html +16 -16
- package/docs-dev/demos/data-table/index.html +100 -100
- package/docs-dev/sass/components/accordion/index.html +18 -11
- package/docs-dev/sass/components/tabs/index.html +24 -9
- package/docs-dev/sass/core/color/index.html +4 -4
- package/package.json +1 -1
- package/scss/_color.scss +4 -4
- package/scss/components/_accordion.scss +11 -4
- package/scss/components/_tabs.scss +18 -3
|
@@ -5196,6 +5196,9 @@
|
|
|
5196
5196
|
<div class="toc">
|
|
5197
5197
|
<ol>
|
|
5198
5198
|
|
|
5199
|
+
<li><a href="#0.1.0-beta.70">0.1.0-beta.70</a>
|
|
5200
|
+
</li>
|
|
5201
|
+
|
|
5199
5202
|
<li><a href="#0.1.0-beta.69">0.1.0-beta.69</a>
|
|
5200
5203
|
</li>
|
|
5201
5204
|
|
|
@@ -5451,11 +5454,28 @@
|
|
|
5451
5454
|
|
|
5452
5455
|
<div class="changelog">
|
|
5453
5456
|
<h1 id="change-log" tabindex="-1">Change Log</h1>
|
|
5457
|
+
<h2 id="0.1.0-beta.70" tabindex="-1">0.1.0-beta.70</h2>
|
|
5458
|
+
<ul>
|
|
5459
|
+
<li><strong>scss/components/accordion</strong>
|
|
5460
|
+
<ul>
|
|
5461
|
+
<li>Change defaults (add background color to summary) so that demo shows how no-border modifier is used</li>
|
|
5462
|
+
<li>Add borderless-margin-between</li>
|
|
5463
|
+
<li>Change modifier "no-border" to "borderless"</li>
|
|
5464
|
+
</ul>
|
|
5465
|
+
</li>
|
|
5466
|
+
<li><strong>scss/components/tabs</strong>
|
|
5467
|
+
<ul>
|
|
5468
|
+
<li>Tweak defaults so that tab color hover matches "selected" color</li>
|
|
5469
|
+
<li>Add transitions to the indicator bar, and add setting to adjust it</li>
|
|
5470
|
+
</ul>
|
|
5471
|
+
</li>
|
|
5472
|
+
</ul>
|
|
5454
5473
|
<h2 id="0.1.0-beta.69" tabindex="-1">0.1.0-beta.69</h2>
|
|
5455
5474
|
<ul>
|
|
5456
5475
|
<li><strong>scss/components/accordion</strong>
|
|
5457
5476
|
<ul>
|
|
5458
5477
|
<li>Set width on .accordion__summary so it works when using button element (when not details)</li>
|
|
5478
|
+
<li>Fixed minor things (missing selectors, etc)</li>
|
|
5459
5479
|
</ul>
|
|
5460
5480
|
</li>
|
|
5461
5481
|
</ul>
|
|
@@ -5214,60 +5214,60 @@
|
|
|
5214
5214
|
<legend>Elements Visible</legend>
|
|
5215
5215
|
<div>
|
|
5216
5216
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5217
|
-
<input type="checkbox" id="live-demo-id-
|
|
5218
|
-
<label for="live-demo-id-
|
|
5217
|
+
<input type="checkbox" id="live-demo-id-305" name="title" checked="">
|
|
5218
|
+
<label for="live-demo-id-305">
|
|
5219
5219
|
Title
|
|
5220
5220
|
</label>
|
|
5221
5221
|
</div>
|
|
5222
5222
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5223
|
-
<input type="checkbox" id="live-demo-id-
|
|
5224
|
-
<label for="live-demo-id-
|
|
5223
|
+
<input type="checkbox" id="live-demo-id-306" name="body" checked="">
|
|
5224
|
+
<label for="live-demo-id-306">
|
|
5225
5225
|
Body
|
|
5226
5226
|
</label>
|
|
5227
5227
|
</div>
|
|
5228
5228
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5229
|
-
<input type="checkbox" id="live-demo-id-
|
|
5230
|
-
<label for="live-demo-id-
|
|
5229
|
+
<input type="checkbox" id="live-demo-id-307" name="content" checked="">
|
|
5230
|
+
<label for="live-demo-id-307">
|
|
5231
5231
|
Content
|
|
5232
5232
|
</label>
|
|
5233
5233
|
</div>
|
|
5234
5234
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5235
|
-
<input type="checkbox" id="live-demo-id-
|
|
5236
|
-
<label for="live-demo-id-
|
|
5235
|
+
<input type="checkbox" id="live-demo-id-308" name="aside" checked="">
|
|
5236
|
+
<label for="live-demo-id-308">
|
|
5237
5237
|
Aside
|
|
5238
5238
|
</label>
|
|
5239
5239
|
</div>
|
|
5240
5240
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5241
|
-
<input type="checkbox" id="live-demo-id-
|
|
5242
|
-
<label for="live-demo-id-
|
|
5241
|
+
<input type="checkbox" id="live-demo-id-309" name="footer" checked="">
|
|
5242
|
+
<label for="live-demo-id-309">
|
|
5243
5243
|
Footer
|
|
5244
5244
|
</label>
|
|
5245
5245
|
</div>
|
|
5246
5246
|
</div>
|
|
5247
5247
|
</fieldset>
|
|
5248
5248
|
<div class="form-theme__item form-theme__item--select">
|
|
5249
|
-
<label for="live-demo-id-
|
|
5249
|
+
<label for="live-demo-id-310">
|
|
5250
5250
|
Action
|
|
5251
5251
|
<span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
|
|
5252
5252
|
</label>
|
|
5253
|
-
<select id="live-demo-id-
|
|
5253
|
+
<select id="live-demo-id-310" name="action">
|
|
5254
5254
|
<option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
|
|
5255
5255
|
</select>
|
|
5256
5256
|
</div>
|
|
5257
5257
|
<div class="form-theme__item form-theme__item--select">
|
|
5258
|
-
<label for="live-demo-id-
|
|
5258
|
+
<label for="live-demo-id-311">
|
|
5259
5259
|
Media
|
|
5260
5260
|
</label>
|
|
5261
|
-
<select id="live-demo-id-
|
|
5261
|
+
<select id="live-demo-id-311" name="media">
|
|
5262
5262
|
<option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
|
|
5263
5263
|
</select>
|
|
5264
5264
|
</div>
|
|
5265
5265
|
<div class="form-theme__item form-theme__item--select">
|
|
5266
|
-
<label for="live-demo-id-
|
|
5266
|
+
<label for="live-demo-id-312">
|
|
5267
5267
|
Layout
|
|
5268
5268
|
<span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
|
|
5269
5269
|
</label>
|
|
5270
|
-
<select id="live-demo-id-
|
|
5270
|
+
<select id="live-demo-id-312" name="layout">
|
|
5271
5271
|
<option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
|
|
5272
5272
|
</select>
|
|
5273
5273
|
</div>
|
|
@@ -5252,178 +5252,178 @@
|
|
|
5252
5252
|
</table>
|
|
5253
5253
|
<h2 class="h2">Complex Table</h2>
|
|
5254
5254
|
<h2 class="h2">Striped Table</h2>
|
|
5255
|
-
<table class="data-table data-table--striped" id="dt-
|
|
5255
|
+
<table class="data-table data-table--striped" id="dt-153">
|
|
5256
5256
|
<caption>
|
|
5257
5257
|
This Is The Table's Caption
|
|
5258
5258
|
</caption>
|
|
5259
5259
|
<thead>
|
|
5260
5260
|
<tr>
|
|
5261
|
-
<th id="dt-
|
|
5262
|
-
<th id="dt-
|
|
5263
|
-
<th id="dt-
|
|
5264
|
-
<th id="dt-
|
|
5261
|
+
<th id="dt-153-type" rowspan="2">Type</th>
|
|
5262
|
+
<th id="dt-153-group" colspan="2">Group</th>
|
|
5263
|
+
<th id="dt-153-details" colspan="2">Details</th>
|
|
5264
|
+
<th id="dt-153-id" rowspan="2">Id</th>
|
|
5265
5265
|
</tr>
|
|
5266
5266
|
<tr>
|
|
5267
|
-
<th headers="dt-
|
|
5268
|
-
<th headers="dt-
|
|
5269
|
-
<th headers="dt-
|
|
5270
|
-
<th headers="dt-
|
|
5267
|
+
<th headers="dt-153-group" id="dt-153-primary">Primary</th>
|
|
5268
|
+
<th headers="dt-153-group" id="dt-153-secondary">Secondary</th>
|
|
5269
|
+
<th headers="dt-153-details" id="dt-153-before">Before Task</th>
|
|
5270
|
+
<th headers="dt-153-details" id="dt-153-after">After Task</th>
|
|
5271
5271
|
</tr>
|
|
5272
5272
|
</thead>
|
|
5273
5273
|
<tbody>
|
|
5274
5274
|
<tr>
|
|
5275
|
-
<th rowspan="3" headers="dt-
|
|
5276
|
-
<td headers="dt-
|
|
5277
|
-
<td headers="dt-
|
|
5278
|
-
<td headers="dt-
|
|
5279
|
-
<td headers="dt-
|
|
5280
|
-
<td headers="dt-
|
|
5275
|
+
<th rowspan="3" headers="dt-153-type dt-153-r1" id="dt-153-r1">Default</th>
|
|
5276
|
+
<td headers="dt-153-group dt-153-primary dt-153-r1">Lorem Ipsum</td>
|
|
5277
|
+
<td headers="dt-153-group dt-153-secondary dt-153-r1">Lorem Ipsum</td>
|
|
5278
|
+
<td headers="dt-153-details dt-153-before dt-153-r1">Lorem Ipsum</td>
|
|
5279
|
+
<td headers="dt-153-details dt-153-after dt-153-r1">Lorem Ipsum</td>
|
|
5280
|
+
<td headers="dt-153-id">OL-53-GHSLE</td>
|
|
5281
5281
|
</tr>
|
|
5282
5282
|
<tr>
|
|
5283
|
-
<td headers="dt-
|
|
5284
|
-
<td headers="dt-
|
|
5285
|
-
<td headers="dt-
|
|
5286
|
-
<td headers="dt-
|
|
5287
|
-
<td headers="dt-
|
|
5283
|
+
<td headers="dt-153-group dt-153-primary dt-153-r1">Lorem Ipsum</td>
|
|
5284
|
+
<td headers="dt-153-group dt-153-secondary dt-153-r1">Lorem Ipsum</td>
|
|
5285
|
+
<td headers="dt-153-details dt-153-before dt-153-r1">Lorem Ipsum</td>
|
|
5286
|
+
<td headers="dt-153-details dt-153-after dt-153-r1">Lorem Ipsum</td>
|
|
5287
|
+
<td headers="dt-153-id">OL-53-GHSLE</td>
|
|
5288
5288
|
</tr>
|
|
5289
5289
|
<tr>
|
|
5290
|
-
<td headers="dt-
|
|
5291
|
-
<td headers="dt-
|
|
5292
|
-
<td headers="dt-
|
|
5293
|
-
<td headers="dt-
|
|
5294
|
-
<td headers="dt-
|
|
5290
|
+
<td headers="dt-153-group dt-153-primary dt-153-r1">Lorem Ipsum</td>
|
|
5291
|
+
<td headers="dt-153-group dt-153-secondary dt-153-r1">Lorem Ipsum</td>
|
|
5292
|
+
<td headers="dt-153-details dt-153-before dt-153-r1">Lorem Ipsum</td>
|
|
5293
|
+
<td headers="dt-153-details dt-153-after dt-153-r1">Lorem Ipsum</td>
|
|
5294
|
+
<td headers="dt-153-id">OL-53-GHSLE</td>
|
|
5295
5295
|
</tr>
|
|
5296
5296
|
</tbody>
|
|
5297
5297
|
</table>
|
|
5298
5298
|
<h2 class="h2">Large-first Table</h2>
|
|
5299
|
-
<table class="data-table data-table--large-first" id="dt-
|
|
5299
|
+
<table class="data-table data-table--large-first" id="dt-154">
|
|
5300
5300
|
<caption>
|
|
5301
5301
|
This Is The Table's Caption
|
|
5302
5302
|
</caption>
|
|
5303
5303
|
<thead>
|
|
5304
5304
|
<tr>
|
|
5305
|
-
<th id="dt-
|
|
5306
|
-
<th id="dt-
|
|
5307
|
-
<th id="dt-
|
|
5308
|
-
<th id="dt-
|
|
5305
|
+
<th id="dt-154-type" rowspan="2">Type</th>
|
|
5306
|
+
<th id="dt-154-group" colspan="2">Group</th>
|
|
5307
|
+
<th id="dt-154-details" colspan="2">Details</th>
|
|
5308
|
+
<th id="dt-154-id" rowspan="2">Id</th>
|
|
5309
5309
|
</tr>
|
|
5310
5310
|
<tr>
|
|
5311
|
-
<th headers="dt-
|
|
5312
|
-
<th headers="dt-
|
|
5313
|
-
<th headers="dt-
|
|
5314
|
-
<th headers="dt-
|
|
5311
|
+
<th headers="dt-154-group" id="dt-154-primary">Primary</th>
|
|
5312
|
+
<th headers="dt-154-group" id="dt-154-secondary">Secondary</th>
|
|
5313
|
+
<th headers="dt-154-details" id="dt-154-before">Before Task</th>
|
|
5314
|
+
<th headers="dt-154-details" id="dt-154-after">After Task</th>
|
|
5315
5315
|
</tr>
|
|
5316
5316
|
</thead>
|
|
5317
5317
|
<tbody>
|
|
5318
5318
|
<tr>
|
|
5319
|
-
<th rowspan="3" headers="dt-
|
|
5320
|
-
<td headers="dt-
|
|
5321
|
-
<td headers="dt-
|
|
5322
|
-
<td headers="dt-
|
|
5323
|
-
<td headers="dt-
|
|
5324
|
-
<td headers="dt-
|
|
5319
|
+
<th rowspan="3" headers="dt-154-type dt-154-r1" id="dt-154-r1">Default</th>
|
|
5320
|
+
<td headers="dt-154-group dt-154-primary dt-154-r1">Lorem Ipsum</td>
|
|
5321
|
+
<td headers="dt-154-group dt-154-secondary dt-154-r1">Lorem Ipsum</td>
|
|
5322
|
+
<td headers="dt-154-details dt-154-before dt-154-r1">Lorem Ipsum</td>
|
|
5323
|
+
<td headers="dt-154-details dt-154-after dt-154-r1">Lorem Ipsum</td>
|
|
5324
|
+
<td headers="dt-154-id">OL-53-GHSLE</td>
|
|
5325
5325
|
</tr>
|
|
5326
5326
|
<tr>
|
|
5327
|
-
<td headers="dt-
|
|
5328
|
-
<td headers="dt-
|
|
5329
|
-
<td headers="dt-
|
|
5330
|
-
<td headers="dt-
|
|
5331
|
-
<td headers="dt-
|
|
5327
|
+
<td headers="dt-154-group dt-154-primary dt-154-r1">Lorem Ipsum</td>
|
|
5328
|
+
<td headers="dt-154-group dt-154-secondary dt-154-r1">Lorem Ipsum</td>
|
|
5329
|
+
<td headers="dt-154-details dt-154-before dt-154-r1">Lorem Ipsum</td>
|
|
5330
|
+
<td headers="dt-154-details dt-154-after dt-154-r1">Lorem Ipsum</td>
|
|
5331
|
+
<td headers="dt-154-id">OL-53-GHSLE</td>
|
|
5332
5332
|
</tr>
|
|
5333
5333
|
<tr>
|
|
5334
|
-
<td headers="dt-
|
|
5335
|
-
<td headers="dt-
|
|
5336
|
-
<td headers="dt-
|
|
5337
|
-
<td headers="dt-
|
|
5338
|
-
<td headers="dt-
|
|
5334
|
+
<td headers="dt-154-group dt-154-primary dt-154-r1">Lorem Ipsum</td>
|
|
5335
|
+
<td headers="dt-154-group dt-154-secondary dt-154-r1">Lorem Ipsum</td>
|
|
5336
|
+
<td headers="dt-154-details dt-154-before dt-154-r1">Lorem Ipsum</td>
|
|
5337
|
+
<td headers="dt-154-details dt-154-after dt-154-r1">Lorem Ipsum</td>
|
|
5338
|
+
<td headers="dt-154-id">OL-53-GHSLE</td>
|
|
5339
5339
|
</tr>
|
|
5340
5340
|
</tbody>
|
|
5341
5341
|
</table>
|
|
5342
5342
|
<h2 class="h2">Large-header Table</h2>
|
|
5343
|
-
<table class="data-table data-table--large-header" id="dt-
|
|
5343
|
+
<table class="data-table data-table--large-header" id="dt-155">
|
|
5344
5344
|
<caption>
|
|
5345
5345
|
This Is The Table's Caption
|
|
5346
5346
|
</caption>
|
|
5347
5347
|
<thead>
|
|
5348
5348
|
<tr>
|
|
5349
|
-
<th id="dt-
|
|
5350
|
-
<th id="dt-
|
|
5351
|
-
<th id="dt-
|
|
5352
|
-
<th id="dt-
|
|
5349
|
+
<th id="dt-155-type" rowspan="2">Type</th>
|
|
5350
|
+
<th id="dt-155-group" colspan="2">Group</th>
|
|
5351
|
+
<th id="dt-155-details" colspan="2">Details</th>
|
|
5352
|
+
<th id="dt-155-id" rowspan="2">Id</th>
|
|
5353
5353
|
</tr>
|
|
5354
5354
|
<tr>
|
|
5355
|
-
<th headers="dt-
|
|
5356
|
-
<th headers="dt-
|
|
5357
|
-
<th headers="dt-
|
|
5358
|
-
<th headers="dt-
|
|
5355
|
+
<th headers="dt-155-group" id="dt-155-primary">Primary</th>
|
|
5356
|
+
<th headers="dt-155-group" id="dt-155-secondary">Secondary</th>
|
|
5357
|
+
<th headers="dt-155-details" id="dt-155-before">Before Task</th>
|
|
5358
|
+
<th headers="dt-155-details" id="dt-155-after">After Task</th>
|
|
5359
5359
|
</tr>
|
|
5360
5360
|
</thead>
|
|
5361
5361
|
<tbody>
|
|
5362
5362
|
<tr>
|
|
5363
|
-
<th rowspan="3" headers="dt-
|
|
5364
|
-
<td headers="dt-
|
|
5365
|
-
<td headers="dt-
|
|
5366
|
-
<td headers="dt-
|
|
5367
|
-
<td headers="dt-
|
|
5368
|
-
<td headers="dt-
|
|
5363
|
+
<th rowspan="3" headers="dt-155-type dt-155-r1" id="dt-155-r1">Default</th>
|
|
5364
|
+
<td headers="dt-155-group dt-155-primary dt-155-r1">Lorem Ipsum</td>
|
|
5365
|
+
<td headers="dt-155-group dt-155-secondary dt-155-r1">Lorem Ipsum</td>
|
|
5366
|
+
<td headers="dt-155-details dt-155-before dt-155-r1">Lorem Ipsum</td>
|
|
5367
|
+
<td headers="dt-155-details dt-155-after dt-155-r1">Lorem Ipsum</td>
|
|
5368
|
+
<td headers="dt-155-id">OL-53-GHSLE</td>
|
|
5369
5369
|
</tr>
|
|
5370
5370
|
<tr>
|
|
5371
|
-
<td headers="dt-
|
|
5372
|
-
<td headers="dt-
|
|
5373
|
-
<td headers="dt-
|
|
5374
|
-
<td headers="dt-
|
|
5375
|
-
<td headers="dt-
|
|
5371
|
+
<td headers="dt-155-group dt-155-primary dt-155-r1">Lorem Ipsum</td>
|
|
5372
|
+
<td headers="dt-155-group dt-155-secondary dt-155-r1">Lorem Ipsum</td>
|
|
5373
|
+
<td headers="dt-155-details dt-155-before dt-155-r1">Lorem Ipsum</td>
|
|
5374
|
+
<td headers="dt-155-details dt-155-after dt-155-r1">Lorem Ipsum</td>
|
|
5375
|
+
<td headers="dt-155-id">OL-53-GHSLE</td>
|
|
5376
5376
|
</tr>
|
|
5377
5377
|
<tr>
|
|
5378
|
-
<td headers="dt-
|
|
5379
|
-
<td headers="dt-
|
|
5380
|
-
<td headers="dt-
|
|
5381
|
-
<td headers="dt-
|
|
5382
|
-
<td headers="dt-
|
|
5378
|
+
<td headers="dt-155-group dt-155-primary dt-155-r1">Lorem Ipsum</td>
|
|
5379
|
+
<td headers="dt-155-group dt-155-secondary dt-155-r1">Lorem Ipsum</td>
|
|
5380
|
+
<td headers="dt-155-details dt-155-before dt-155-r1">Lorem Ipsum</td>
|
|
5381
|
+
<td headers="dt-155-details dt-155-after dt-155-r1">Lorem Ipsum</td>
|
|
5382
|
+
<td headers="dt-155-id">OL-53-GHSLE</td>
|
|
5383
5383
|
</tr>
|
|
5384
5384
|
</tbody>
|
|
5385
5385
|
</table>
|
|
5386
5386
|
<h2 class="h2">No-border Table</h2>
|
|
5387
|
-
<table class="data-table data-table--no-border" id="dt-
|
|
5387
|
+
<table class="data-table data-table--no-border" id="dt-156">
|
|
5388
5388
|
<caption>
|
|
5389
5389
|
This Is The Table's Caption
|
|
5390
5390
|
</caption>
|
|
5391
5391
|
<thead>
|
|
5392
5392
|
<tr>
|
|
5393
|
-
<th id="dt-
|
|
5394
|
-
<th id="dt-
|
|
5395
|
-
<th id="dt-
|
|
5396
|
-
<th id="dt-
|
|
5393
|
+
<th id="dt-156-type" rowspan="2">Type</th>
|
|
5394
|
+
<th id="dt-156-group" colspan="2">Group</th>
|
|
5395
|
+
<th id="dt-156-details" colspan="2">Details</th>
|
|
5396
|
+
<th id="dt-156-id" rowspan="2">Id</th>
|
|
5397
5397
|
</tr>
|
|
5398
5398
|
<tr>
|
|
5399
|
-
<th headers="dt-
|
|
5400
|
-
<th headers="dt-
|
|
5401
|
-
<th headers="dt-
|
|
5402
|
-
<th headers="dt-
|
|
5399
|
+
<th headers="dt-156-group" id="dt-156-primary">Primary</th>
|
|
5400
|
+
<th headers="dt-156-group" id="dt-156-secondary">Secondary</th>
|
|
5401
|
+
<th headers="dt-156-details" id="dt-156-before">Before Task</th>
|
|
5402
|
+
<th headers="dt-156-details" id="dt-156-after">After Task</th>
|
|
5403
5403
|
</tr>
|
|
5404
5404
|
</thead>
|
|
5405
5405
|
<tbody>
|
|
5406
5406
|
<tr>
|
|
5407
|
-
<th rowspan="3" headers="dt-
|
|
5408
|
-
<td headers="dt-
|
|
5409
|
-
<td headers="dt-
|
|
5410
|
-
<td headers="dt-
|
|
5411
|
-
<td headers="dt-
|
|
5412
|
-
<td headers="dt-
|
|
5407
|
+
<th rowspan="3" headers="dt-156-type dt-156-r1" id="dt-156-r1">Default</th>
|
|
5408
|
+
<td headers="dt-156-group dt-156-primary dt-156-r1">Lorem Ipsum</td>
|
|
5409
|
+
<td headers="dt-156-group dt-156-secondary dt-156-r1">Lorem Ipsum</td>
|
|
5410
|
+
<td headers="dt-156-details dt-156-before dt-156-r1">Lorem Ipsum</td>
|
|
5411
|
+
<td headers="dt-156-details dt-156-after dt-156-r1">Lorem Ipsum</td>
|
|
5412
|
+
<td headers="dt-156-id">OL-53-GHSLE</td>
|
|
5413
5413
|
</tr>
|
|
5414
5414
|
<tr>
|
|
5415
|
-
<td headers="dt-
|
|
5416
|
-
<td headers="dt-
|
|
5417
|
-
<td headers="dt-
|
|
5418
|
-
<td headers="dt-
|
|
5419
|
-
<td headers="dt-
|
|
5415
|
+
<td headers="dt-156-group dt-156-primary dt-156-r1">Lorem Ipsum</td>
|
|
5416
|
+
<td headers="dt-156-group dt-156-secondary dt-156-r1">Lorem Ipsum</td>
|
|
5417
|
+
<td headers="dt-156-details dt-156-before dt-156-r1">Lorem Ipsum</td>
|
|
5418
|
+
<td headers="dt-156-details dt-156-after dt-156-r1">Lorem Ipsum</td>
|
|
5419
|
+
<td headers="dt-156-id">OL-53-GHSLE</td>
|
|
5420
5420
|
</tr>
|
|
5421
5421
|
<tr>
|
|
5422
|
-
<td headers="dt-
|
|
5423
|
-
<td headers="dt-
|
|
5424
|
-
<td headers="dt-
|
|
5425
|
-
<td headers="dt-
|
|
5426
|
-
<td headers="dt-
|
|
5422
|
+
<td headers="dt-156-group dt-156-primary dt-156-r1">Lorem Ipsum</td>
|
|
5423
|
+
<td headers="dt-156-group dt-156-secondary dt-156-r1">Lorem Ipsum</td>
|
|
5424
|
+
<td headers="dt-156-details dt-156-before dt-156-r1">Lorem Ipsum</td>
|
|
5425
|
+
<td headers="dt-156-details dt-156-after dt-156-r1">Lorem Ipsum</td>
|
|
5426
|
+
<td headers="dt-156-id">OL-53-GHSLE</td>
|
|
5427
5427
|
</tr>
|
|
5428
5428
|
</tbody>
|
|
5429
5429
|
</table>
|
|
@@ -5250,8 +5250,8 @@
|
|
|
5250
5250
|
<p>Module Settings</p>
|
|
5251
5251
|
<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>
|
|
5252
5252
|
<span class="pjs-token pjs-string">"background-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"background"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5253
|
-
<span class="pjs-token pjs-string">"background-color-open"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-
|
|
5254
|
-
<span class="pjs-token pjs-string">"border-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5253
|
+
<span class="pjs-token pjs-string">"background-color-open"</span><span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
|
|
5254
|
+
<span class="pjs-token pjs-string">"border-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"rule-light"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5255
5255
|
<span class="pjs-token pjs-string">"border-radius"</span><span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
|
|
5256
5256
|
<span class="pjs-token pjs-string">"border-width"</span><span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
|
|
5257
5257
|
<span class="pjs-token pjs-string">"box-shadow"</span><span class="pjs-token pjs-punctuation">:</span> none<span class="pjs-token pjs-punctuation">,</span>
|
|
@@ -5267,7 +5267,7 @@
|
|
|
5267
5267
|
<span class="pjs-token pjs-string">"icon-font-size"</span><span class="pjs-token pjs-punctuation">:</span> 1.5rem<span class="pjs-token pjs-punctuation">,</span>
|
|
5268
5268
|
<span class="pjs-token pjs-string">"icon-size"</span><span class="pjs-token pjs-punctuation">:</span> auto<span class="pjs-token pjs-punctuation">,</span>
|
|
5269
5269
|
<span class="pjs-token pjs-string">"icon-stroke-width"</span><span class="pjs-token pjs-punctuation">:</span> 0.15em<span class="pjs-token pjs-punctuation">,</span>
|
|
5270
|
-
<span class="pjs-token pjs-string">"summary-background-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-
|
|
5270
|
+
<span class="pjs-token pjs-string">"summary-background-color"</span><span class="pjs-token pjs-punctuation">:</span> #f6f6f6<span class="pjs-token pjs-punctuation">,</span>
|
|
5271
5271
|
<span class="pjs-token pjs-string">"summary-color"</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>
|
|
5272
5272
|
<span class="pjs-token pjs-string">"summary-background-color-hover"</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>
|
|
5273
5273
|
<span class="pjs-token pjs-string">"summary-color-hover"</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>
|
|
@@ -5276,6 +5276,7 @@
|
|
|
5276
5276
|
<span class="pjs-token pjs-string">"summary-type-size"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">false</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5277
5277
|
<span class="pjs-token pjs-string">"transparent-padding-x"</span><span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
|
|
5278
5278
|
<span class="pjs-token pjs-string">"transparent-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 1em<span class="pjs-token pjs-punctuation">,</span>
|
|
5279
|
+
<span class="pjs-token pjs-string">"borderless-margin-between"</span> <span class="pjs-token pjs-punctuation">:</span> 0.5rem
|
|
5279
5280
|
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
5280
5281
|
<details>
|
|
5281
5282
|
<summary>File Information</summary>
|
|
@@ -5283,8 +5284,8 @@
|
|
|
5283
5284
|
<li><strong>File:</strong> _accordion.scss</li>
|
|
5284
5285
|
<li><strong>Group:</strong> accordion</li>
|
|
5285
5286
|
<li><strong>Type:</strong> variable</li>
|
|
5286
|
-
<li><strong>Lines (comments):</strong> 16-
|
|
5287
|
-
<li><strong>Lines (code):</strong>
|
|
5287
|
+
<li><strong>Lines (comments):</strong> 16-44</li>
|
|
5288
|
+
<li><strong>Lines (code):</strong> 46-75</li>
|
|
5288
5289
|
</ul>
|
|
5289
5290
|
</details>
|
|
5290
5291
|
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
@@ -5454,6 +5455,12 @@
|
|
|
5454
5455
|
<td style="text-align:left">0</td>
|
|
5455
5456
|
<td style="text-align:left">The upper and lower padding of the transparent summary.</td>
|
|
5456
5457
|
</tr>
|
|
5458
|
+
<tr>
|
|
5459
|
+
<td style="text-align:left">borderless-margin-between</td>
|
|
5460
|
+
<td style="text-align:left">Dimension</td>
|
|
5461
|
+
<td style="text-align:left">0.5rem</td>
|
|
5462
|
+
<td style="text-align:left">Margin between accordions when using no-border modiifier</td>
|
|
5463
|
+
</tr>
|
|
5457
5464
|
</tbody>
|
|
5458
5465
|
</table>
|
|
5459
5466
|
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
@@ -5470,8 +5477,8 @@
|
|
|
5470
5477
|
<li><strong>File:</strong> _accordion.scss</li>
|
|
5471
5478
|
<li><strong>Group:</strong> accordion</li>
|
|
5472
5479
|
<li><strong>Type:</strong> mixin</li>
|
|
5473
|
-
<li><strong>Lines (comments):</strong>
|
|
5474
|
-
<li><strong>Lines (code):</strong>
|
|
5480
|
+
<li><strong>Lines (comments):</strong> 77-80</li>
|
|
5481
|
+
<li><strong>Lines (code):</strong> 82-84</li>
|
|
5475
5482
|
</ul>
|
|
5476
5483
|
</details>
|
|
5477
5484
|
<h4 id="examples" tabindex="-1">Examples</h4>
|
|
@@ -5510,8 +5517,8 @@
|
|
|
5510
5517
|
<li><strong>File:</strong> _accordion.scss</li>
|
|
5511
5518
|
<li><strong>Group:</strong> accordion</li>
|
|
5512
5519
|
<li><strong>Type:</strong> mixin</li>
|
|
5513
|
-
<li><strong>Lines (comments):</strong>
|
|
5514
|
-
<li><strong>Lines (code):</strong>
|
|
5520
|
+
<li><strong>Lines (comments):</strong> 95-98</li>
|
|
5521
|
+
<li><strong>Lines (code):</strong> 100-231</li>
|
|
5515
5522
|
</ul>
|
|
5516
5523
|
</details>
|
|
5517
5524
|
<div class="callout callout--demo crop-margins">
|
|
@@ -5538,8 +5545,8 @@
|
|
|
5538
5545
|
<li><strong>File:</strong> _accordion.scss</li>
|
|
5539
5546
|
<li><strong>Group:</strong> accordion</li>
|
|
5540
5547
|
<li><strong>Type:</strong> function</li>
|
|
5541
|
-
<li><strong>Lines (comments):</strong>
|
|
5542
|
-
<li><strong>Lines (code):</strong>
|
|
5548
|
+
<li><strong>Lines (comments):</strong> 86-89</li>
|
|
5549
|
+
<li><strong>Lines (code):</strong> 91-93</li>
|
|
5543
5550
|
</ul>
|
|
5544
5551
|
</details>
|
|
5545
5552
|
<h4 id="examples-2" tabindex="-1">Examples</h4>
|
|
@@ -5255,8 +5255,11 @@
|
|
|
5255
5255
|
<span class="pjs-token pjs-string">"tablist-divider-width"</span> <span class="pjs-token pjs-punctuation">:</span> 1px<span class="pjs-token pjs-punctuation">,</span>
|
|
5256
5256
|
<span class="pjs-token pjs-string">"indicator-size"</span> <span class="pjs-token pjs-punctuation">:</span> 3px<span class="pjs-token pjs-punctuation">,</span>
|
|
5257
5257
|
<span class="pjs-token pjs-string">"indicator-color"</span> <span class="pjs-token pjs-punctuation">:</span> currentColor<span class="pjs-token pjs-punctuation">,</span>
|
|
5258
|
+
<span class="pjs-token pjs-string">"indicator-transition-duration"</span> <span class="pjs-token pjs-punctuation">:</span> 200ms<span class="pjs-token pjs-punctuation">,</span>
|
|
5259
|
+
<span class="pjs-token pjs-string">"indicator-transition-timing"</span> <span class="pjs-token pjs-punctuation">:</span> ease-out<span class="pjs-token pjs-punctuation">,</span>
|
|
5260
|
+
<span class="pjs-token pjs-string">"indicator-scale-start"</span> <span class="pjs-token pjs-punctuation">:</span> 0<span class="pjs-token pjs-punctuation">,</span>
|
|
5258
5261
|
<span class="pjs-token pjs-string">"tab-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type-tertiary"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5259
|
-
<span class="pjs-token pjs-string">"tab-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"
|
|
5262
|
+
<span class="pjs-token pjs-string">"tab-color-hover"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"selected"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5260
5263
|
<span class="pjs-token pjs-string">"tab-color-selected"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"selected"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5261
5264
|
<span class="pjs-token pjs-string">"tab-background-color-selected"</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>
|
|
5262
5265
|
<span class="pjs-token pjs-string">"tab-font-weight"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
@@ -5278,8 +5281,8 @@
|
|
|
5278
5281
|
<li><strong>File:</strong> _tabs.scss</li>
|
|
5279
5282
|
<li><strong>Group:</strong> tabs</li>
|
|
5280
5283
|
<li><strong>Type:</strong> variable</li>
|
|
5281
|
-
<li><strong>Lines (comments):</strong> 33-
|
|
5282
|
-
<li><strong>Lines (code):</strong>
|
|
5284
|
+
<li><strong>Lines (comments):</strong> 33-58</li>
|
|
5285
|
+
<li><strong>Lines (code):</strong> 60-86</li>
|
|
5283
5286
|
</ul>
|
|
5284
5287
|
</details>
|
|
5285
5288
|
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
@@ -5342,6 +5345,18 @@
|
|
|
5342
5345
|
<td style="text-align:left">The color of the indicator</td>
|
|
5343
5346
|
</tr>
|
|
5344
5347
|
<tr>
|
|
5348
|
+
<td style="text-align:left">indicator-transition-duration</td>
|
|
5349
|
+
<td style="text-align:left">Color</td>
|
|
5350
|
+
<td style="text-align:left">200ms</td>
|
|
5351
|
+
<td style="text-align:left">The transition duration for indicator</td>
|
|
5352
|
+
</tr>
|
|
5353
|
+
<tr>
|
|
5354
|
+
<td style="text-align:left">indicator-scale-start</td>
|
|
5355
|
+
<td style="text-align:left">Color</td>
|
|
5356
|
+
<td style="text-align:left">0</td>
|
|
5357
|
+
<td style="text-align:left">The starting scale for the indicator (set to 1 to disable expanding on click)</td>
|
|
5358
|
+
</tr>
|
|
5359
|
+
<tr>
|
|
5345
5360
|
<td style="text-align:left">tab-color</td>
|
|
5346
5361
|
<td style="text-align:left">Color</td>
|
|
5347
5362
|
<td style="text-align:left">link</td>
|
|
@@ -5441,8 +5456,8 @@
|
|
|
5441
5456
|
<li><strong>File:</strong> _tabs.scss</li>
|
|
5442
5457
|
<li><strong>Group:</strong> tabs</li>
|
|
5443
5458
|
<li><strong>Type:</strong> mixin</li>
|
|
5444
|
-
<li><strong>Lines (comments):</strong>
|
|
5445
|
-
<li><strong>Lines (code):</strong>
|
|
5459
|
+
<li><strong>Lines (comments):</strong> 88-91</li>
|
|
5460
|
+
<li><strong>Lines (code):</strong> 93-95</li>
|
|
5446
5461
|
</ul>
|
|
5447
5462
|
</details>
|
|
5448
5463
|
<h4 id="examples" tabindex="-1">Examples</h4>
|
|
@@ -5481,8 +5496,8 @@
|
|
|
5481
5496
|
<li><strong>File:</strong> _tabs.scss</li>
|
|
5482
5497
|
<li><strong>Group:</strong> tabs</li>
|
|
5483
5498
|
<li><strong>Type:</strong> mixin</li>
|
|
5484
|
-
<li><strong>Lines (comments):</strong>
|
|
5485
|
-
<li><strong>Lines (code):</strong>
|
|
5499
|
+
<li><strong>Lines (comments):</strong> 107-109</li>
|
|
5500
|
+
<li><strong>Lines (code):</strong> 111-262</li>
|
|
5486
5501
|
</ul>
|
|
5487
5502
|
</details>
|
|
5488
5503
|
<h4 id="examples-1" tabindex="-1">Examples</h4>
|
|
@@ -5505,8 +5520,8 @@
|
|
|
5505
5520
|
<li><strong>File:</strong> _tabs.scss</li>
|
|
5506
5521
|
<li><strong>Group:</strong> tabs</li>
|
|
5507
5522
|
<li><strong>Type:</strong> function</li>
|
|
5508
|
-
<li><strong>Lines (comments):</strong>
|
|
5509
|
-
<li><strong>Lines (code):</strong>
|
|
5523
|
+
<li><strong>Lines (comments):</strong> 97-100</li>
|
|
5524
|
+
<li><strong>Lines (code):</strong> 102-105</li>
|
|
5510
5525
|
</ul>
|
|
5511
5526
|
</details>
|
|
5512
5527
|
<h4 id="examples-2" tabindex="-1">Examples</h4>
|
|
@@ -5298,7 +5298,7 @@
|
|
|
5298
5298
|
<span class="pjs-token pjs-string">"type-tertiary"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgb</span><span class="pjs-token pjs-punctuation">(</span>157<span class="pjs-token pjs-punctuation">,</span> 157<span class="pjs-token pjs-punctuation">,</span> 157<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
5299
5299
|
<span class="pjs-token pjs-string">"headline"</span> <span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
|
|
5300
5300
|
<span class="pjs-token pjs-string">"background"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
|
|
5301
|
-
<span class="pjs-token pjs-string">"background-gray"</span> <span class="pjs-token pjs-punctuation">:</span> #
|
|
5301
|
+
<span class="pjs-token pjs-string">"background-gray"</span> <span class="pjs-token pjs-punctuation">:</span> #fafafa<span class="pjs-token pjs-punctuation">,</span>
|
|
5302
5302
|
<span class="pjs-token pjs-string">"focus"</span> <span class="pjs-token pjs-punctuation">:</span> blue<span class="pjs-token pjs-punctuation">,</span>
|
|
5303
5303
|
<span class="pjs-token pjs-string">"accent"</span> <span class="pjs-token pjs-punctuation">:</span> orange<span class="pjs-token pjs-punctuation">,</span>
|
|
5304
5304
|
<span class="pjs-token pjs-string">"info"</span> <span class="pjs-token pjs-punctuation">:</span> #00bde3<span class="pjs-token pjs-punctuation">,</span>
|
|
@@ -5321,10 +5321,10 @@
|
|
|
5321
5321
|
<span class="pjs-token pjs-string">"bullet"</span> <span class="pjs-token pjs-punctuation">:</span> inherit<span class="pjs-token pjs-punctuation">,</span>
|
|
5322
5322
|
<span class="pjs-token pjs-string">"control"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
|
|
5323
5323
|
<span class="pjs-token pjs-string">"control-hover"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
|
|
5324
|
-
<span class="pjs-token pjs-string">"control-active"</span>
|
|
5324
|
+
<span class="pjs-token pjs-string">"control-active"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
|
|
5325
5325
|
<span class="pjs-token pjs-string">"control-border"</span> <span class="pjs-token pjs-punctuation">:</span> purple<span class="pjs-token pjs-punctuation">,</span>
|
|
5326
|
-
<span class="pjs-token pjs-string">"control-border-hover"</span>
|
|
5327
|
-
<span class="pjs-token pjs-string">"control-border-active"</span>
|
|
5326
|
+
<span class="pjs-token pjs-string">"control-border-hover"</span> <span class="pjs-token pjs-punctuation">:</span> blue<span class="pjs-token pjs-punctuation">,</span>
|
|
5327
|
+
<span class="pjs-token pjs-string">"control-border-active"</span> <span class="pjs-token pjs-punctuation">:</span> orange<span class="pjs-token pjs-punctuation">,</span>
|
|
5328
5328
|
<span class="pjs-token pjs-string">"control-background"</span> <span class="pjs-token pjs-punctuation">:</span> purple<span class="pjs-token pjs-punctuation">,</span>
|
|
5329
5329
|
<span class="pjs-token pjs-string">"control-background-hover"</span><span class="pjs-token pjs-punctuation">:</span> blue<span class="pjs-token pjs-punctuation">,</span>
|
|
5330
5330
|
<span class="pjs-token pjs-string">"control-background-active"</span><span class="pjs-token pjs-punctuation">:</span> orange<span class="pjs-token pjs-punctuation">,</span>
|