@ulu/frontend 0.1.0-beta.109 → 0.1.0-beta.110
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 +7 -0
- package/docs-dev/demos/accordion/index.html +4 -18
- package/docs-dev/demos/card/index.html +16 -16
- package/docs-dev/demos/data-table/index.html +100 -100
- package/docs-dev/demos/progress-circle/index.html +44 -44
- package/docs-dev/javascript/events/index.html +477 -1407
- package/docs-dev/javascript/settings/index.html +4 -380
- package/docs-dev/javascript/ui-breakpoints/index.html +0 -540
- package/docs-dev/javascript/ui-collapsible/index.html +472 -1252
- package/docs-dev/javascript/ui-details-group/index.html +0 -540
- package/docs-dev/javascript/ui-dialog/index.html +472 -1252
- package/docs-dev/javascript/ui-flipcard/index.html +331 -2703
- package/docs-dev/javascript/ui-grid/index.html +342 -2534
- package/docs-dev/javascript/ui-modal-builder/index.html +327 -2489
- package/docs-dev/javascript/ui-overflow-scroller/index.html +342 -2534
- package/docs-dev/javascript/ui-overflow-scroller-pager/index.html +4 -380
- package/docs-dev/javascript/ui-page/index.html +4 -380
- package/docs-dev/javascript/ui-popover/index.html +4 -380
- package/docs-dev/javascript/ui-print/index.html +4 -380
- package/docs-dev/javascript/ui-print-details/index.html +4 -380
- package/docs-dev/javascript/ui-programmatic-modal/index.html +4 -380
- package/docs-dev/javascript/ui-proxy-click/index.html +4 -380
- package/docs-dev/javascript/ui-resizer/index.html +4 -380
- package/docs-dev/javascript/ui-scroll-slider/index.html +4 -380
- package/docs-dev/javascript/ui-scrollpoint/index.html +4 -380
- package/docs-dev/javascript/ui-slider/index.html +4 -380
- package/docs-dev/javascript/ui-tabs/index.html +4 -380
- package/docs-dev/javascript/ui-theme-toggle/index.html +4 -380
- package/docs-dev/javascript/ui-tooltip/index.html +4 -380
- package/docs-dev/javascript/utils-class-logger/index.html +4 -380
- package/docs-dev/javascript/utils-css/index.html +4 -380
- package/docs-dev/javascript/utils-dom/index.html +4 -380
- package/docs-dev/javascript/utils-file-save/index.html +4 -380
- package/docs-dev/javascript/utils-floating-ui/index.html +4 -380
- package/docs-dev/javascript/utils-id/index.html +4 -380
- package/docs-dev/javascript/utils-pause-youtube-video/index.html +4 -380
- package/docs-dev/javascript/utils-system/index.html +4 -380
- package/docs-dev/sass/base/elements/index.html +4 -380
- package/docs-dev/sass/base/normalize/index.html +4 -380
- package/docs-dev/sass/components/accordion/index.html +97 -63
- package/docs-dev/sass/core/typography/index.html +78 -27
- package/docs-dev/sass/helpers/color/index.html +4 -380
- package/docs-dev/sass/helpers/display/index.html +4 -380
- package/docs-dev/sass/helpers/index/index.html +4 -380
- package/docs-dev/sass/helpers/typography/index.html +4 -380
- package/docs-dev/sass/helpers/units/index.html +4 -380
- package/docs-dev/sass/helpers/utilities/index.html +4 -380
- package/package.json +1 -1
- package/scss/_typography.scss +13 -0
- package/scss/components/_accordion.scss +144 -113
|
@@ -5766,6 +5766,9 @@
|
|
|
5766
5766
|
<div class="toc">
|
|
5767
5767
|
<ol>
|
|
5768
5768
|
|
|
5769
|
+
<li><a href="#0.1.0-beta.109">0.1.0-beta.109</a>
|
|
5770
|
+
</li>
|
|
5771
|
+
|
|
5769
5772
|
<li><a href="#0.1.0-beta.108">0.1.0-beta.108</a>
|
|
5770
5773
|
</li>
|
|
5771
5774
|
|
|
@@ -6138,6 +6141,10 @@
|
|
|
6138
6141
|
|
|
6139
6142
|
<div class="changelog">
|
|
6140
6143
|
<h1 id="change-log" tabindex="-1">Change Log</h1>
|
|
6144
|
+
<h2 id="0.1.0-beta.109" tabindex="-1">0.1.0-beta.109</h2>
|
|
6145
|
+
<ul>
|
|
6146
|
+
<li><strong>scss/components/accordion</strong> - Adjusted selectors from & + & to print out selectors incase this mixin is called when scoped .accordion + .accordion vs .scope .accordion + .scope .accordion which is incorrect</li>
|
|
6147
|
+
</ul>
|
|
6141
6148
|
<h2 id="0.1.0-beta.108" tabindex="-1">0.1.0-beta.108</h2>
|
|
6142
6149
|
<ul>
|
|
6143
6150
|
<li><strong>scss/components/progress-bar</strong> - Remove max-width option from new component</li>
|
|
@@ -5766,10 +5766,7 @@
|
|
|
5766
5766
|
<div class="toc">
|
|
5767
5767
|
<ol>
|
|
5768
5768
|
|
|
5769
|
-
<li><a href="#basic-
|
|
5770
|
-
</li>
|
|
5771
|
-
|
|
5772
|
-
<li><a href="#examples-with-plus-icon">Examples with plus icon</a>
|
|
5769
|
+
<li><a href="#basic-example">Basic Example</a>
|
|
5773
5770
|
</li>
|
|
5774
5771
|
|
|
5775
5772
|
<li><a href="#transparent-modifier">Transparent Modifier</a>
|
|
@@ -5803,18 +5800,7 @@
|
|
|
5803
5800
|
<hr class="rule rule--light rule--margin-large">
|
|
5804
5801
|
|
|
5805
5802
|
<div class="wysiwyg">
|
|
5806
|
-
<h2 id="basic-
|
|
5807
|
-
<p>Without an icon in the summary will fallback to browser default</p>
|
|
5808
|
-
<details class="accordion">
|
|
5809
|
-
<summary class="accordion__summary">
|
|
5810
|
-
This is an example Title
|
|
5811
|
-
</summary>
|
|
5812
|
-
<div class="accordion__content">
|
|
5813
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
|
|
5814
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
|
|
5815
|
-
</div>
|
|
5816
|
-
</details>
|
|
5817
|
-
<h2 id="examples-with-plus-icon" tabindex="-1">Examples with plus icon</h2>
|
|
5803
|
+
<h2 id="basic-example" tabindex="-1">Basic Example</h2>
|
|
5818
5804
|
<pre class="language-html"><code class="language-html"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation"><</span>details</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>accordion<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
|
|
5819
5805
|
<span class="pjs-token pjs-tag"><span class="pjs-token pjs-tag"><span class="pjs-token pjs-punctuation"><</span>summary</span> <span class="pjs-token pjs-attr-name">class</span><span class="pjs-token pjs-attr-value"><span class="pjs-token pjs-punctuation pjs-attr-equals">=</span><span class="pjs-token pjs-punctuation">"</span>accordion__summary<span class="pjs-token pjs-punctuation">"</span></span><span class="pjs-token pjs-punctuation">></span></span>
|
|
5820
5806
|
The summary is what is seen before opening the details
|
|
@@ -5951,7 +5937,7 @@
|
|
|
5951
5937
|
</div>
|
|
5952
5938
|
</details>
|
|
5953
5939
|
<h2 id="examples-with-no-borders" tabindex="-1">Examples with No borders</h2>
|
|
5954
|
-
<details class="accordion accordion--
|
|
5940
|
+
<details class="accordion accordion--borderless">
|
|
5955
5941
|
<summary class="accordion__summary">
|
|
5956
5942
|
This is an example title with long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur posuere sem ac neque rhoncus lacinia. Suspendisse ornare enim in ultrices egestas.
|
|
5957
5943
|
<span class="accordion__icon" aria-hidden="true">
|
|
@@ -5963,7 +5949,7 @@
|
|
|
5963
5949
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam commodo felis nisi, nec pretium justo varius sit amet. Vestibulum vitae quam in velit scelerisque tincidunt et vitae mauris. Fusce aliquet, ipsum sit amet lacinia euismod, est risus rhoncus ligula, eget egestas urna ligula nec enim. Fusce vulputate ornare ligula ut tempus. Sed accumsan orci sed turpis iaculis, at aliquam nibh rhoncus. Maecenas porta lorem a sem tincidunt, sed tristique ex laoreet. Nullam accumsan metus at lobortis interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sagittis sem erat, quis fermentum lectus ultrices quis.</p>
|
|
5964
5950
|
</div>
|
|
5965
5951
|
</details>
|
|
5966
|
-
<details class="accordion accordion--
|
|
5952
|
+
<details class="accordion accordion--borderless">
|
|
5967
5953
|
<summary class="accordion__summary">
|
|
5968
5954
|
This is an example Title
|
|
5969
5955
|
<span class="accordion__icon" aria-hidden="true">
|
|
@@ -5784,60 +5784,60 @@
|
|
|
5784
5784
|
<legend>Elements Visible</legend>
|
|
5785
5785
|
<div>
|
|
5786
5786
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5787
|
-
<input type="checkbox" id="live-demo-id-
|
|
5788
|
-
<label for="live-demo-id-
|
|
5787
|
+
<input type="checkbox" id="live-demo-id-9" name="title" checked="">
|
|
5788
|
+
<label for="live-demo-id-9">
|
|
5789
5789
|
Title
|
|
5790
5790
|
</label>
|
|
5791
5791
|
</div>
|
|
5792
5792
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5793
|
-
<input type="checkbox" id="live-demo-id-
|
|
5794
|
-
<label for="live-demo-id-
|
|
5793
|
+
<input type="checkbox" id="live-demo-id-10" name="body" checked="">
|
|
5794
|
+
<label for="live-demo-id-10">
|
|
5795
5795
|
Body
|
|
5796
5796
|
</label>
|
|
5797
5797
|
</div>
|
|
5798
5798
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5799
|
-
<input type="checkbox" id="live-demo-id-
|
|
5800
|
-
<label for="live-demo-id-
|
|
5799
|
+
<input type="checkbox" id="live-demo-id-11" name="content" checked="">
|
|
5800
|
+
<label for="live-demo-id-11">
|
|
5801
5801
|
Content
|
|
5802
5802
|
</label>
|
|
5803
5803
|
</div>
|
|
5804
5804
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5805
|
-
<input type="checkbox" id="live-demo-id-
|
|
5806
|
-
<label for="live-demo-id-
|
|
5805
|
+
<input type="checkbox" id="live-demo-id-12" name="aside" checked="">
|
|
5806
|
+
<label for="live-demo-id-12">
|
|
5807
5807
|
Aside
|
|
5808
5808
|
</label>
|
|
5809
5809
|
</div>
|
|
5810
5810
|
<div class="form-theme__item form-theme__item--checkbox">
|
|
5811
|
-
<input type="checkbox" id="live-demo-id-
|
|
5812
|
-
<label for="live-demo-id-
|
|
5811
|
+
<input type="checkbox" id="live-demo-id-13" name="footer" checked="">
|
|
5812
|
+
<label for="live-demo-id-13">
|
|
5813
5813
|
Footer
|
|
5814
5814
|
</label>
|
|
5815
5815
|
</div>
|
|
5816
5816
|
</div>
|
|
5817
5817
|
</fieldset>
|
|
5818
5818
|
<div class="form-theme__item form-theme__item--select">
|
|
5819
|
-
<label for="live-demo-id-
|
|
5819
|
+
<label for="live-demo-id-14">
|
|
5820
5820
|
Action
|
|
5821
5821
|
<span class="fas fa-info-circle" data-ulu-tooltip="Proxy click only works when title is present"></span>
|
|
5822
5822
|
</label>
|
|
5823
|
-
<select id="live-demo-id-
|
|
5823
|
+
<select id="live-demo-id-14" name="action">
|
|
5824
5824
|
<option value="">None</option>,<option value="link">Card is Link</option>,<option value="proxy">Proxy Click</option>
|
|
5825
5825
|
</select>
|
|
5826
5826
|
</div>
|
|
5827
5827
|
<div class="form-theme__item form-theme__item--select">
|
|
5828
|
-
<label for="live-demo-id-
|
|
5828
|
+
<label for="live-demo-id-15">
|
|
5829
5829
|
Media
|
|
5830
5830
|
</label>
|
|
5831
|
-
<select id="live-demo-id-
|
|
5831
|
+
<select id="live-demo-id-15" name="media">
|
|
5832
5832
|
<option value="icon">Icon</option>,<option value="image">Image</option>,<option value="imageFit">Image (fit)</option>,<option value="none">No Image</option>
|
|
5833
5833
|
</select>
|
|
5834
5834
|
</div>
|
|
5835
5835
|
<div class="form-theme__item form-theme__item--select">
|
|
5836
|
-
<label for="live-demo-id-
|
|
5836
|
+
<label for="live-demo-id-16">
|
|
5837
5837
|
Layout
|
|
5838
5838
|
<span class="fas fa-info-circle" data-ulu-tooltip="Overlay is not compatible with 'Icon' and 'No Image' options"></span>
|
|
5839
5839
|
</label>
|
|
5840
|
-
<select id="live-demo-id-
|
|
5840
|
+
<select id="live-demo-id-16" name="layout">
|
|
5841
5841
|
<option value="">Default</option>,<option value="horizontal">Horizontal</option>,<option value="horizontalCenter">Horizontal Center</option>,<option value="overlay">Overlay</option>
|
|
5842
5842
|
</select>
|
|
5843
5843
|
</div>
|
|
@@ -5822,178 +5822,178 @@
|
|
|
5822
5822
|
</table>
|
|
5823
5823
|
<h2 class="h2">Complex Table</h2>
|
|
5824
5824
|
<h2 class="h2">Striped Table</h2>
|
|
5825
|
-
<table class="data-table data-table--striped" id="dt-
|
|
5825
|
+
<table class="data-table data-table--striped" id="dt-5">
|
|
5826
5826
|
<caption>
|
|
5827
5827
|
This Is The Table's Caption
|
|
5828
5828
|
</caption>
|
|
5829
5829
|
<thead>
|
|
5830
5830
|
<tr>
|
|
5831
|
-
<th id="dt-
|
|
5832
|
-
<th id="dt-
|
|
5833
|
-
<th id="dt-
|
|
5834
|
-
<th id="dt-
|
|
5831
|
+
<th id="dt-5-type" rowspan="2">Type</th>
|
|
5832
|
+
<th id="dt-5-group" colspan="2">Group</th>
|
|
5833
|
+
<th id="dt-5-details" colspan="2">Details</th>
|
|
5834
|
+
<th id="dt-5-id" rowspan="2">Id</th>
|
|
5835
5835
|
</tr>
|
|
5836
5836
|
<tr>
|
|
5837
|
-
<th headers="dt-
|
|
5838
|
-
<th headers="dt-
|
|
5839
|
-
<th headers="dt-
|
|
5840
|
-
<th headers="dt-
|
|
5837
|
+
<th headers="dt-5-group" id="dt-5-primary">Primary</th>
|
|
5838
|
+
<th headers="dt-5-group" id="dt-5-secondary">Secondary</th>
|
|
5839
|
+
<th headers="dt-5-details" id="dt-5-before">Before Task</th>
|
|
5840
|
+
<th headers="dt-5-details" id="dt-5-after">After Task</th>
|
|
5841
5841
|
</tr>
|
|
5842
5842
|
</thead>
|
|
5843
5843
|
<tbody>
|
|
5844
5844
|
<tr>
|
|
5845
|
-
<th rowspan="3" headers="dt-
|
|
5846
|
-
<td headers="dt-
|
|
5847
|
-
<td headers="dt-
|
|
5848
|
-
<td headers="dt-
|
|
5849
|
-
<td headers="dt-
|
|
5850
|
-
<td headers="dt-
|
|
5845
|
+
<th rowspan="3" headers="dt-5-type dt-5-r1" id="dt-5-r1">Default</th>
|
|
5846
|
+
<td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
|
|
5847
|
+
<td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
|
|
5848
|
+
<td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
|
|
5849
|
+
<td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
|
|
5850
|
+
<td headers="dt-5-id">OL-53-GHSLE</td>
|
|
5851
5851
|
</tr>
|
|
5852
5852
|
<tr>
|
|
5853
|
-
<td headers="dt-
|
|
5854
|
-
<td headers="dt-
|
|
5855
|
-
<td headers="dt-
|
|
5856
|
-
<td headers="dt-
|
|
5857
|
-
<td headers="dt-
|
|
5853
|
+
<td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
|
|
5854
|
+
<td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
|
|
5855
|
+
<td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
|
|
5856
|
+
<td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
|
|
5857
|
+
<td headers="dt-5-id">OL-53-GHSLE</td>
|
|
5858
5858
|
</tr>
|
|
5859
5859
|
<tr>
|
|
5860
|
-
<td headers="dt-
|
|
5861
|
-
<td headers="dt-
|
|
5862
|
-
<td headers="dt-
|
|
5863
|
-
<td headers="dt-
|
|
5864
|
-
<td headers="dt-
|
|
5860
|
+
<td headers="dt-5-group dt-5-primary dt-5-r1">Lorem Ipsum</td>
|
|
5861
|
+
<td headers="dt-5-group dt-5-secondary dt-5-r1">Lorem Ipsum</td>
|
|
5862
|
+
<td headers="dt-5-details dt-5-before dt-5-r1">Lorem Ipsum</td>
|
|
5863
|
+
<td headers="dt-5-details dt-5-after dt-5-r1">Lorem Ipsum</td>
|
|
5864
|
+
<td headers="dt-5-id">OL-53-GHSLE</td>
|
|
5865
5865
|
</tr>
|
|
5866
5866
|
</tbody>
|
|
5867
5867
|
</table>
|
|
5868
5868
|
<h2 class="h2">Large-first Table</h2>
|
|
5869
|
-
<table class="data-table data-table--large-first" id="dt-
|
|
5869
|
+
<table class="data-table data-table--large-first" id="dt-6">
|
|
5870
5870
|
<caption>
|
|
5871
5871
|
This Is The Table's Caption
|
|
5872
5872
|
</caption>
|
|
5873
5873
|
<thead>
|
|
5874
5874
|
<tr>
|
|
5875
|
-
<th id="dt-
|
|
5876
|
-
<th id="dt-
|
|
5877
|
-
<th id="dt-
|
|
5878
|
-
<th id="dt-
|
|
5875
|
+
<th id="dt-6-type" rowspan="2">Type</th>
|
|
5876
|
+
<th id="dt-6-group" colspan="2">Group</th>
|
|
5877
|
+
<th id="dt-6-details" colspan="2">Details</th>
|
|
5878
|
+
<th id="dt-6-id" rowspan="2">Id</th>
|
|
5879
5879
|
</tr>
|
|
5880
5880
|
<tr>
|
|
5881
|
-
<th headers="dt-
|
|
5882
|
-
<th headers="dt-
|
|
5883
|
-
<th headers="dt-
|
|
5884
|
-
<th headers="dt-
|
|
5881
|
+
<th headers="dt-6-group" id="dt-6-primary">Primary</th>
|
|
5882
|
+
<th headers="dt-6-group" id="dt-6-secondary">Secondary</th>
|
|
5883
|
+
<th headers="dt-6-details" id="dt-6-before">Before Task</th>
|
|
5884
|
+
<th headers="dt-6-details" id="dt-6-after">After Task</th>
|
|
5885
5885
|
</tr>
|
|
5886
5886
|
</thead>
|
|
5887
5887
|
<tbody>
|
|
5888
5888
|
<tr>
|
|
5889
|
-
<th rowspan="3" headers="dt-
|
|
5890
|
-
<td headers="dt-
|
|
5891
|
-
<td headers="dt-
|
|
5892
|
-
<td headers="dt-
|
|
5893
|
-
<td headers="dt-
|
|
5894
|
-
<td headers="dt-
|
|
5889
|
+
<th rowspan="3" headers="dt-6-type dt-6-r1" id="dt-6-r1">Default</th>
|
|
5890
|
+
<td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
|
|
5891
|
+
<td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
|
|
5892
|
+
<td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
|
|
5893
|
+
<td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
|
|
5894
|
+
<td headers="dt-6-id">OL-53-GHSLE</td>
|
|
5895
5895
|
</tr>
|
|
5896
5896
|
<tr>
|
|
5897
|
-
<td headers="dt-
|
|
5898
|
-
<td headers="dt-
|
|
5899
|
-
<td headers="dt-
|
|
5900
|
-
<td headers="dt-
|
|
5901
|
-
<td headers="dt-
|
|
5897
|
+
<td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
|
|
5898
|
+
<td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
|
|
5899
|
+
<td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
|
|
5900
|
+
<td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
|
|
5901
|
+
<td headers="dt-6-id">OL-53-GHSLE</td>
|
|
5902
5902
|
</tr>
|
|
5903
5903
|
<tr>
|
|
5904
|
-
<td headers="dt-
|
|
5905
|
-
<td headers="dt-
|
|
5906
|
-
<td headers="dt-
|
|
5907
|
-
<td headers="dt-
|
|
5908
|
-
<td headers="dt-
|
|
5904
|
+
<td headers="dt-6-group dt-6-primary dt-6-r1">Lorem Ipsum</td>
|
|
5905
|
+
<td headers="dt-6-group dt-6-secondary dt-6-r1">Lorem Ipsum</td>
|
|
5906
|
+
<td headers="dt-6-details dt-6-before dt-6-r1">Lorem Ipsum</td>
|
|
5907
|
+
<td headers="dt-6-details dt-6-after dt-6-r1">Lorem Ipsum</td>
|
|
5908
|
+
<td headers="dt-6-id">OL-53-GHSLE</td>
|
|
5909
5909
|
</tr>
|
|
5910
5910
|
</tbody>
|
|
5911
5911
|
</table>
|
|
5912
5912
|
<h2 class="h2">Large-header Table</h2>
|
|
5913
|
-
<table class="data-table data-table--large-header" id="dt-
|
|
5913
|
+
<table class="data-table data-table--large-header" id="dt-7">
|
|
5914
5914
|
<caption>
|
|
5915
5915
|
This Is The Table's Caption
|
|
5916
5916
|
</caption>
|
|
5917
5917
|
<thead>
|
|
5918
5918
|
<tr>
|
|
5919
|
-
<th id="dt-
|
|
5920
|
-
<th id="dt-
|
|
5921
|
-
<th id="dt-
|
|
5922
|
-
<th id="dt-
|
|
5919
|
+
<th id="dt-7-type" rowspan="2">Type</th>
|
|
5920
|
+
<th id="dt-7-group" colspan="2">Group</th>
|
|
5921
|
+
<th id="dt-7-details" colspan="2">Details</th>
|
|
5922
|
+
<th id="dt-7-id" rowspan="2">Id</th>
|
|
5923
5923
|
</tr>
|
|
5924
5924
|
<tr>
|
|
5925
|
-
<th headers="dt-
|
|
5926
|
-
<th headers="dt-
|
|
5927
|
-
<th headers="dt-
|
|
5928
|
-
<th headers="dt-
|
|
5925
|
+
<th headers="dt-7-group" id="dt-7-primary">Primary</th>
|
|
5926
|
+
<th headers="dt-7-group" id="dt-7-secondary">Secondary</th>
|
|
5927
|
+
<th headers="dt-7-details" id="dt-7-before">Before Task</th>
|
|
5928
|
+
<th headers="dt-7-details" id="dt-7-after">After Task</th>
|
|
5929
5929
|
</tr>
|
|
5930
5930
|
</thead>
|
|
5931
5931
|
<tbody>
|
|
5932
5932
|
<tr>
|
|
5933
|
-
<th rowspan="3" headers="dt-
|
|
5934
|
-
<td headers="dt-
|
|
5935
|
-
<td headers="dt-
|
|
5936
|
-
<td headers="dt-
|
|
5937
|
-
<td headers="dt-
|
|
5938
|
-
<td headers="dt-
|
|
5933
|
+
<th rowspan="3" headers="dt-7-type dt-7-r1" id="dt-7-r1">Default</th>
|
|
5934
|
+
<td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
|
|
5935
|
+
<td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
|
|
5936
|
+
<td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
|
|
5937
|
+
<td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
|
|
5938
|
+
<td headers="dt-7-id">OL-53-GHSLE</td>
|
|
5939
5939
|
</tr>
|
|
5940
5940
|
<tr>
|
|
5941
|
-
<td headers="dt-
|
|
5942
|
-
<td headers="dt-
|
|
5943
|
-
<td headers="dt-
|
|
5944
|
-
<td headers="dt-
|
|
5945
|
-
<td headers="dt-
|
|
5941
|
+
<td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
|
|
5942
|
+
<td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
|
|
5943
|
+
<td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
|
|
5944
|
+
<td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
|
|
5945
|
+
<td headers="dt-7-id">OL-53-GHSLE</td>
|
|
5946
5946
|
</tr>
|
|
5947
5947
|
<tr>
|
|
5948
|
-
<td headers="dt-
|
|
5949
|
-
<td headers="dt-
|
|
5950
|
-
<td headers="dt-
|
|
5951
|
-
<td headers="dt-
|
|
5952
|
-
<td headers="dt-
|
|
5948
|
+
<td headers="dt-7-group dt-7-primary dt-7-r1">Lorem Ipsum</td>
|
|
5949
|
+
<td headers="dt-7-group dt-7-secondary dt-7-r1">Lorem Ipsum</td>
|
|
5950
|
+
<td headers="dt-7-details dt-7-before dt-7-r1">Lorem Ipsum</td>
|
|
5951
|
+
<td headers="dt-7-details dt-7-after dt-7-r1">Lorem Ipsum</td>
|
|
5952
|
+
<td headers="dt-7-id">OL-53-GHSLE</td>
|
|
5953
5953
|
</tr>
|
|
5954
5954
|
</tbody>
|
|
5955
5955
|
</table>
|
|
5956
5956
|
<h2 class="h2">No-border Table</h2>
|
|
5957
|
-
<table class="data-table data-table--no-border" id="dt-
|
|
5957
|
+
<table class="data-table data-table--no-border" id="dt-8">
|
|
5958
5958
|
<caption>
|
|
5959
5959
|
This Is The Table's Caption
|
|
5960
5960
|
</caption>
|
|
5961
5961
|
<thead>
|
|
5962
5962
|
<tr>
|
|
5963
|
-
<th id="dt-
|
|
5964
|
-
<th id="dt-
|
|
5965
|
-
<th id="dt-
|
|
5966
|
-
<th id="dt-
|
|
5963
|
+
<th id="dt-8-type" rowspan="2">Type</th>
|
|
5964
|
+
<th id="dt-8-group" colspan="2">Group</th>
|
|
5965
|
+
<th id="dt-8-details" colspan="2">Details</th>
|
|
5966
|
+
<th id="dt-8-id" rowspan="2">Id</th>
|
|
5967
5967
|
</tr>
|
|
5968
5968
|
<tr>
|
|
5969
|
-
<th headers="dt-
|
|
5970
|
-
<th headers="dt-
|
|
5971
|
-
<th headers="dt-
|
|
5972
|
-
<th headers="dt-
|
|
5969
|
+
<th headers="dt-8-group" id="dt-8-primary">Primary</th>
|
|
5970
|
+
<th headers="dt-8-group" id="dt-8-secondary">Secondary</th>
|
|
5971
|
+
<th headers="dt-8-details" id="dt-8-before">Before Task</th>
|
|
5972
|
+
<th headers="dt-8-details" id="dt-8-after">After Task</th>
|
|
5973
5973
|
</tr>
|
|
5974
5974
|
</thead>
|
|
5975
5975
|
<tbody>
|
|
5976
5976
|
<tr>
|
|
5977
|
-
<th rowspan="3" headers="dt-
|
|
5978
|
-
<td headers="dt-
|
|
5979
|
-
<td headers="dt-
|
|
5980
|
-
<td headers="dt-
|
|
5981
|
-
<td headers="dt-
|
|
5982
|
-
<td headers="dt-
|
|
5977
|
+
<th rowspan="3" headers="dt-8-type dt-8-r1" id="dt-8-r1">Default</th>
|
|
5978
|
+
<td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
|
|
5979
|
+
<td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
|
|
5980
|
+
<td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
|
|
5981
|
+
<td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
|
|
5982
|
+
<td headers="dt-8-id">OL-53-GHSLE</td>
|
|
5983
5983
|
</tr>
|
|
5984
5984
|
<tr>
|
|
5985
|
-
<td headers="dt-
|
|
5986
|
-
<td headers="dt-
|
|
5987
|
-
<td headers="dt-
|
|
5988
|
-
<td headers="dt-
|
|
5989
|
-
<td headers="dt-
|
|
5985
|
+
<td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
|
|
5986
|
+
<td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
|
|
5987
|
+
<td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
|
|
5988
|
+
<td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
|
|
5989
|
+
<td headers="dt-8-id">OL-53-GHSLE</td>
|
|
5990
5990
|
</tr>
|
|
5991
5991
|
<tr>
|
|
5992
|
-
<td headers="dt-
|
|
5993
|
-
<td headers="dt-
|
|
5994
|
-
<td headers="dt-
|
|
5995
|
-
<td headers="dt-
|
|
5996
|
-
<td headers="dt-
|
|
5992
|
+
<td headers="dt-8-group dt-8-primary dt-8-r1">Lorem Ipsum</td>
|
|
5993
|
+
<td headers="dt-8-group dt-8-secondary dt-8-r1">Lorem Ipsum</td>
|
|
5994
|
+
<td headers="dt-8-details dt-8-before dt-8-r1">Lorem Ipsum</td>
|
|
5995
|
+
<td headers="dt-8-details dt-8-after dt-8-r1">Lorem Ipsum</td>
|
|
5996
|
+
<td headers="dt-8-id">OL-53-GHSLE</td>
|
|
5997
5997
|
</tr>
|
|
5998
5998
|
</tbody>
|
|
5999
5999
|
</table>
|