@ulu/frontend 0.1.0-beta.10 → 0.1.0-beta.12
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 +30 -0
- package/dist/ulu-frontend.min.css +1 -1
- package/dist/ulu-frontend.min.js +7 -7
- package/docs-dev/demos/callout/index.html +25 -12
- package/docs-dev/demos/data-table/index.html +25 -25
- package/docs-dev/demos/form-theme/index.html +18 -31
- package/docs-dev/demos/menu-stack/index.html +16 -16
- package/docs-dev/sass/components/callout/index.html +27 -67
- package/docs-dev/sass/components/captioned-figure/index.html +123 -8
- package/docs-dev/sass/components/card/index.html +32 -17
- package/docs-dev/sass/components/data-table/index.html +193 -10
- package/docs-dev/sass/components/form-theme/index.html +126 -25
- package/docs-dev/sass/components/hero/index.html +56 -8
- package/docs-dev/sass/components/menu-stack/index.html +4 -4
- package/docs-dev/sass/components/popover/index.html +30 -0
- package/docs-dev/sass/components/pull-quote/index.html +12 -12
- package/docs-dev/sass/components/vignette/index.html +14 -8
- package/docs-dev/sass/core/color/index.html +37 -31
- package/package.json +1 -1
- package/scss/_color.scss +8 -2
- package/scss/components/README.todos +14 -0
- package/scss/components/_callout.scss +38 -50
- package/scss/components/_captioned-figure.scss +17 -0
- package/scss/components/_card-grid.scss +1 -1
- package/scss/components/_card.scss +12 -8
- package/scss/components/_data-table.scss +36 -3
- package/scss/components/_form-theme.scss +18 -18
- package/scss/components/_hero.scss +9 -0
- package/scss/components/_menu-stack.scss +19 -16
- package/scss/components/_popover.scss +29 -29
- package/scss/components/_pull-quote.scss +12 -12
- package/scss/components/_vignette.scss +1 -0
- package/types/ui/tabs.d.ts.map +1 -1
|
@@ -4752,10 +4752,125 @@
|
|
|
4752
4752
|
<li><strong>File:</strong> _captioned-figure.scss</li>
|
|
4753
4753
|
<li><strong>Group:</strong> captioned-figure</li>
|
|
4754
4754
|
<li><strong>Type:</strong> variable</li>
|
|
4755
|
-
<li><strong>Lines (comments):</strong> 31-
|
|
4756
|
-
<li><strong>Lines (code):</strong>
|
|
4755
|
+
<li><strong>Lines (comments):</strong> 31-49</li>
|
|
4756
|
+
<li><strong>Lines (code):</strong> 51-69</li>
|
|
4757
4757
|
</ul>
|
|
4758
4758
|
</details>
|
|
4759
|
+
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
4760
|
+
<table>
|
|
4761
|
+
<thead>
|
|
4762
|
+
<tr>
|
|
4763
|
+
<th style="text-align:left">Name</th>
|
|
4764
|
+
<th style="text-align:left">Type</th>
|
|
4765
|
+
<th style="text-align:left">Default</th>
|
|
4766
|
+
<th style="text-align:left">Description</th>
|
|
4767
|
+
</tr>
|
|
4768
|
+
</thead>
|
|
4769
|
+
<tbody>
|
|
4770
|
+
<tr>
|
|
4771
|
+
<td style="text-align:left">text-alignment-matches</td>
|
|
4772
|
+
<td style="text-align:left">Boolean</td>
|
|
4773
|
+
<td style="text-align:left">false</td>
|
|
4774
|
+
<td style="text-align:left">Toggles matching alignment.</td>
|
|
4775
|
+
</tr>
|
|
4776
|
+
<tr>
|
|
4777
|
+
<td style="text-align:left">text-alignment-matches-center-only</td>
|
|
4778
|
+
<td style="text-align:left">Boolean</td>
|
|
4779
|
+
<td style="text-align:left">true</td>
|
|
4780
|
+
<td style="text-align:left">Toggles matching alignment, but only if center.</td>
|
|
4781
|
+
</tr>
|
|
4782
|
+
<tr>
|
|
4783
|
+
<td style="text-align:left">background-color</td>
|
|
4784
|
+
<td style="text-align:left">Color</td>
|
|
4785
|
+
<td style="text-align:left">white</td>
|
|
4786
|
+
<td style="text-align:left">Background color of the component.</td>
|
|
4787
|
+
</tr>
|
|
4788
|
+
<tr>
|
|
4789
|
+
<td style="text-align:left">box-shadow</td>
|
|
4790
|
+
<td style="text-align:left">CssValue</td>
|
|
4791
|
+
<td style="text-align:left">true</td>
|
|
4792
|
+
<td style="text-align:left">Box shadow the captioned figure.</td>
|
|
4793
|
+
</tr>
|
|
4794
|
+
<tr>
|
|
4795
|
+
<td style="text-align:left">margin-bottom</td>
|
|
4796
|
+
<td style="text-align:left">Dimension</td>
|
|
4797
|
+
<td style="text-align:left">true</td>
|
|
4798
|
+
<td style="text-align:left">Bottom margin of the captioned figure.</td>
|
|
4799
|
+
</tr>
|
|
4800
|
+
<tr>
|
|
4801
|
+
<td style="text-align:left">line-height</td>
|
|
4802
|
+
<td style="text-align:left">Number</td>
|
|
4803
|
+
<td style="text-align:left">true</td>
|
|
4804
|
+
<td style="text-align:left">Line height of the captioned figure caption.</td>
|
|
4805
|
+
</tr>
|
|
4806
|
+
<tr>
|
|
4807
|
+
<td style="text-align:left">caption-padding</td>
|
|
4808
|
+
<td style="text-align:left">Dimension</td>
|
|
4809
|
+
<td style="text-align:left">0.5em</td>
|
|
4810
|
+
<td style="text-align:left">Padding of the captioned figure caption.</td>
|
|
4811
|
+
</tr>
|
|
4812
|
+
<tr>
|
|
4813
|
+
<td style="text-align:left">color</td>
|
|
4814
|
+
<td style="text-align:left">Color</td>
|
|
4815
|
+
<td style="text-align:left">null</td>
|
|
4816
|
+
<td style="text-align:left">Font color of the captioned figure caption.</td>
|
|
4817
|
+
</tr>
|
|
4818
|
+
<tr>
|
|
4819
|
+
<td style="text-align:left">type-size</td>
|
|
4820
|
+
<td style="text-align:left">String</td>
|
|
4821
|
+
<td style="text-align:left">"small"</td>
|
|
4822
|
+
<td style="text-align:left">Font size of the captioned figure caption.</td>
|
|
4823
|
+
</tr>
|
|
4824
|
+
<tr>
|
|
4825
|
+
<td style="text-align:left">caption-max-width</td>
|
|
4826
|
+
<td style="text-align:left">Dimension</td>
|
|
4827
|
+
<td style="text-align:left">min(100%, 15em)</td>
|
|
4828
|
+
<td style="text-align:left">Max width of the captioned figure caption.</td>
|
|
4829
|
+
</tr>
|
|
4830
|
+
<tr>
|
|
4831
|
+
<td style="text-align:left">caption-background-color</td>
|
|
4832
|
+
<td style="text-align:left">Color</td>
|
|
4833
|
+
<td style="text-align:left">rgba(255,255,255,0.7)</td>
|
|
4834
|
+
<td style="text-align:left">background color of the captioned figure caption.</td>
|
|
4835
|
+
</tr>
|
|
4836
|
+
<tr>
|
|
4837
|
+
<td style="text-align:left">caption-backdrop-filter</td>
|
|
4838
|
+
<td style="text-align:left">CssValue</td>
|
|
4839
|
+
<td style="text-align:left">blur(2px)</td>
|
|
4840
|
+
<td style="text-align:left">Filter of the backdrop of the captioned figure.</td>
|
|
4841
|
+
</tr>
|
|
4842
|
+
<tr>
|
|
4843
|
+
<td style="text-align:left">traditional-caption-color</td>
|
|
4844
|
+
<td style="text-align:left">Color</td>
|
|
4845
|
+
<td style="text-align:left">null</td>
|
|
4846
|
+
<td style="text-align:left">Traditional style for font color.</td>
|
|
4847
|
+
</tr>
|
|
4848
|
+
<tr>
|
|
4849
|
+
<td style="text-align:left">traditional-caption-background-color</td>
|
|
4850
|
+
<td style="text-align:left">Color</td>
|
|
4851
|
+
<td style="text-align:left">transparent</td>
|
|
4852
|
+
<td style="text-align:left">Traditional style for caption background color.</td>
|
|
4853
|
+
</tr>
|
|
4854
|
+
<tr>
|
|
4855
|
+
<td style="text-align:left">traditional-caption-padding</td>
|
|
4856
|
+
<td style="text-align:left">Dimension</td>
|
|
4857
|
+
<td style="text-align:left">0.5em</td>
|
|
4858
|
+
<td style="text-align:left">Traditional style for caption padding.</td>
|
|
4859
|
+
</tr>
|
|
4860
|
+
<tr>
|
|
4861
|
+
<td style="text-align:left">traditional-caption-max-width</td>
|
|
4862
|
+
<td style="text-align:left">Dimension</td>
|
|
4863
|
+
<td style="text-align:left">35em</td>
|
|
4864
|
+
<td style="text-align:left">Traditional style for caption max width.</td>
|
|
4865
|
+
</tr>
|
|
4866
|
+
<tr>
|
|
4867
|
+
<td style="text-align:left">traditional-caption-text-align</td>
|
|
4868
|
+
<td style="text-align:left">CssValue</td>
|
|
4869
|
+
<td style="text-align:left">right</td>
|
|
4870
|
+
<td style="text-align:left">Traditional style for caption text-align.</td>
|
|
4871
|
+
</tr>
|
|
4872
|
+
</tbody>
|
|
4873
|
+
</table>
|
|
4759
4874
|
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
4760
4875
|
<div class="sassdoc-item-header">
|
|
4761
4876
|
<h3 id="mixin-set" tabindex="-1">set()</h3>
|
|
@@ -4770,8 +4885,8 @@
|
|
|
4770
4885
|
<li><strong>File:</strong> _captioned-figure.scss</li>
|
|
4771
4886
|
<li><strong>Group:</strong> captioned-figure</li>
|
|
4772
4887
|
<li><strong>Type:</strong> mixin</li>
|
|
4773
|
-
<li><strong>Lines (comments):</strong>
|
|
4774
|
-
<li><strong>Lines (code):</strong>
|
|
4888
|
+
<li><strong>Lines (comments):</strong> 71-74</li>
|
|
4889
|
+
<li><strong>Lines (code):</strong> 76-78</li>
|
|
4775
4890
|
</ul>
|
|
4776
4891
|
</details>
|
|
4777
4892
|
<h4 id="examples" tabindex="-1">Examples</h4>
|
|
@@ -4810,8 +4925,8 @@
|
|
|
4810
4925
|
<li><strong>File:</strong> _captioned-figure.scss</li>
|
|
4811
4926
|
<li><strong>Group:</strong> captioned-figure</li>
|
|
4812
4927
|
<li><strong>Type:</strong> mixin</li>
|
|
4813
|
-
<li><strong>Lines (comments):</strong>
|
|
4814
|
-
<li><strong>Lines (code):</strong>
|
|
4928
|
+
<li><strong>Lines (comments):</strong> 90-92</li>
|
|
4929
|
+
<li><strong>Lines (code):</strong> 94-190</li>
|
|
4815
4930
|
</ul>
|
|
4816
4931
|
</details>
|
|
4817
4932
|
<h4 id="examples-1" tabindex="-1">Examples</h4>
|
|
@@ -4834,8 +4949,8 @@
|
|
|
4834
4949
|
<li><strong>File:</strong> _captioned-figure.scss</li>
|
|
4835
4950
|
<li><strong>Group:</strong> captioned-figure</li>
|
|
4836
4951
|
<li><strong>Type:</strong> function</li>
|
|
4837
|
-
<li><strong>Lines (comments):</strong>
|
|
4838
|
-
<li><strong>Lines (code):</strong>
|
|
4952
|
+
<li><strong>Lines (comments):</strong> 80-83</li>
|
|
4953
|
+
<li><strong>Lines (code):</strong> 85-88</li>
|
|
4839
4954
|
</ul>
|
|
4840
4955
|
</details>
|
|
4841
4956
|
<h4 id="examples-2" tabindex="-1">Examples</h4>
|
|
@@ -4747,6 +4747,8 @@
|
|
|
4747
4747
|
<span class="pjs-token pjs-string">"footer-padding-y"</span> <span class="pjs-token pjs-punctuation">:</span> 0.25rem<span class="pjs-token pjs-punctuation">,</span>
|
|
4748
4748
|
<span class="pjs-token pjs-string">"footer-min-height"</span> <span class="pjs-token pjs-punctuation">:</span> 2.5rem<span class="pjs-token pjs-punctuation">,</span>
|
|
4749
4749
|
<span class="pjs-token pjs-string">"horizontal-breakpoint"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4750
|
+
<span class="pjs-token pjs-string">"horizontal-image-width"</span> <span class="pjs-token pjs-punctuation">:</span> 33%<span class="pjs-token pjs-punctuation">,</span>
|
|
4751
|
+
<span class="pjs-token pjs-string">"horizontal-body-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 80rem<span class="pjs-token pjs-punctuation">,</span>
|
|
4750
4752
|
<span class="pjs-token pjs-string">"header-margin"</span> <span class="pjs-token pjs-punctuation">:</span> 0.75em<span class="pjs-token pjs-punctuation">,</span>
|
|
4751
4753
|
<span class="pjs-token pjs-string">"image-ratio"</span> <span class="pjs-token pjs-punctuation">:</span> 56.25%<span class="pjs-token pjs-punctuation">,</span>
|
|
4752
4754
|
<span class="pjs-token pjs-string">"image-aspect-ratio"</span><span class="pjs-token pjs-punctuation">:</span> list.<span class="pjs-token pjs-function">slash</span><span class="pjs-token pjs-punctuation">(</span>5<span class="pjs-token pjs-punctuation">,</span> 3<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
@@ -4754,6 +4756,7 @@
|
|
|
4754
4756
|
<span class="pjs-token pjs-string">"image-border"</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> <span class="pjs-token pjs-comment">// For when you have a margin</span>
|
|
4755
4757
|
<span class="pjs-token pjs-string">"image-filter-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>
|
|
4756
4758
|
<span class="pjs-token pjs-string">"image-margin"</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>
|
|
4759
|
+
<span class="pjs-token pjs-string">"image-icon-max-width"</span> <span class="pjs-token pjs-punctuation">:</span> 30rem<span class="pjs-token pjs-punctuation">,</span>
|
|
4757
4760
|
<span class="pjs-token pjs-string">"image-transform-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>
|
|
4758
4761
|
<span class="pjs-token pjs-string">"image-transition-duration"</span> <span class="pjs-token pjs-punctuation">:</span> 350ms<span class="pjs-token pjs-punctuation">,</span>
|
|
4759
4762
|
<span class="pjs-token pjs-string">"image-transition-enabled"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
@@ -4778,15 +4781,15 @@
|
|
|
4778
4781
|
<span class="pjs-token pjs-string">"overlay-background-color"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-function">rgba</span><span class="pjs-token pjs-punctuation">(</span>0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0<span class="pjs-token pjs-punctuation">,</span> 0.6<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4779
4782
|
<span class="pjs-token pjs-string">"overlay-shading"</span><span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4780
4783
|
<span class="pjs-token pjs-string">"overlay-body-padding-y"</span><span class="pjs-token pjs-punctuation">:</span> 1rem<span class="pjs-token pjs-punctuation">,</span>
|
|
4781
|
-
|
|
4784
|
+
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
4782
4785
|
<details>
|
|
4783
4786
|
<summary>File Information</summary>
|
|
4784
4787
|
<ul>
|
|
4785
4788
|
<li><strong>File:</strong> _card.scss</li>
|
|
4786
4789
|
<li><strong>Group:</strong> card</li>
|
|
4787
4790
|
<li><strong>Type:</strong> variable</li>
|
|
4788
|
-
<li><strong>Lines (comments):</strong> 17-
|
|
4789
|
-
<li><strong>Lines (code):</strong>
|
|
4791
|
+
<li><strong>Lines (comments):</strong> 17-63</li>
|
|
4792
|
+
<li><strong>Lines (code):</strong> 65-117</li>
|
|
4790
4793
|
</ul>
|
|
4791
4794
|
</details>
|
|
4792
4795
|
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
@@ -4819,12 +4822,6 @@
|
|
|
4819
4822
|
<td style="text-align:left">The border radius of the card.</td>
|
|
4820
4823
|
</tr>
|
|
4821
4824
|
<tr>
|
|
4822
|
-
<td style="text-align:left">horizontal-breakpoint</td>
|
|
4823
|
-
<td style="text-align:left">String</td>
|
|
4824
|
-
<td style="text-align:left">small</td>
|
|
4825
|
-
<td style="text-align:left">The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.</td>
|
|
4826
|
-
</tr>
|
|
4827
|
-
<tr>
|
|
4828
4825
|
<td style="text-align:left">box-shadow</td>
|
|
4829
4826
|
<td style="text-align:left">CssValue</td>
|
|
4830
4827
|
<td style="text-align:left">null</td>
|
|
@@ -5053,11 +5050,29 @@
|
|
|
5053
5050
|
<td style="text-align:left">The timing function for the image transition.</td>
|
|
5054
5051
|
</tr>
|
|
5055
5052
|
<tr>
|
|
5053
|
+
<td style="text-align:left">image-icon-max-width</td>
|
|
5054
|
+
<td style="text-align:left">List</td>
|
|
5055
|
+
<td style="text-align:left">30rem</td>
|
|
5056
|
+
<td style="text-align:left">Max width for image when using the modifier on the .card__image--icon</td>
|
|
5057
|
+
</tr>
|
|
5058
|
+
<tr>
|
|
5056
5059
|
<td style="text-align:left">image-transition-properties</td>
|
|
5057
5060
|
<td style="text-align:left">List</td>
|
|
5058
5061
|
<td style="text-align:left">(transform, filter)</td>
|
|
5059
5062
|
<td style="text-align:left">The properties for the image transitions.</td>
|
|
5060
5063
|
</tr>
|
|
5064
|
+
<tr>
|
|
5065
|
+
<td style="text-align:left">horizontal-breakpoint</td>
|
|
5066
|
+
<td style="text-align:left">String</td>
|
|
5067
|
+
<td style="text-align:left">small</td>
|
|
5068
|
+
<td style="text-align:left">The breakpoint used to change the card to vertical if using the card--horizontal styling. Uses ulu's breakpoint module.</td>
|
|
5069
|
+
</tr>
|
|
5070
|
+
<tr>
|
|
5071
|
+
<td style="text-align:left">horizontal-body-max-width</td>
|
|
5072
|
+
<td style="text-align:left">Unit</td>
|
|
5073
|
+
<td style="text-align:left">80rem</td>
|
|
5074
|
+
<td style="text-align:left">The max-width of body when horizontal</td>
|
|
5075
|
+
</tr>
|
|
5061
5076
|
</tbody>
|
|
5062
5077
|
</table>
|
|
5063
5078
|
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
@@ -5074,8 +5089,8 @@
|
|
|
5074
5089
|
<li><strong>File:</strong> _card.scss</li>
|
|
5075
5090
|
<li><strong>Group:</strong> card</li>
|
|
5076
5091
|
<li><strong>Type:</strong> mixin</li>
|
|
5077
|
-
<li><strong>Lines (comments):</strong>
|
|
5078
|
-
<li><strong>Lines (code):</strong>
|
|
5092
|
+
<li><strong>Lines (comments):</strong> 119-122</li>
|
|
5093
|
+
<li><strong>Lines (code):</strong> 124-126</li>
|
|
5079
5094
|
</ul>
|
|
5080
5095
|
</details>
|
|
5081
5096
|
<h4 id="examples" tabindex="-1">Examples</h4>
|
|
@@ -5114,8 +5129,8 @@
|
|
|
5114
5129
|
<li><strong>File:</strong> _card.scss</li>
|
|
5115
5130
|
<li><strong>Group:</strong> card</li>
|
|
5116
5131
|
<li><strong>Type:</strong> mixin</li>
|
|
5117
|
-
<li><strong>Lines (comments):</strong>
|
|
5118
|
-
<li><strong>Lines (code):</strong>
|
|
5132
|
+
<li><strong>Lines (comments):</strong> 137-141</li>
|
|
5133
|
+
<li><strong>Lines (code):</strong> 143-158</li>
|
|
5119
5134
|
</ul>
|
|
5120
5135
|
</details>
|
|
5121
5136
|
<h4 id="examples-1" tabindex="-1">Examples</h4>
|
|
@@ -5162,8 +5177,8 @@
|
|
|
5162
5177
|
<li><strong>File:</strong> _card.scss</li>
|
|
5163
5178
|
<li><strong>Group:</strong> card</li>
|
|
5164
5179
|
<li><strong>Type:</strong> mixin</li>
|
|
5165
|
-
<li><strong>Lines (comments):</strong>
|
|
5166
|
-
<li><strong>Lines (code):</strong>
|
|
5180
|
+
<li><strong>Lines (comments):</strong> 165-169</li>
|
|
5181
|
+
<li><strong>Lines (code):</strong> 171-437</li>
|
|
5167
5182
|
</ul>
|
|
5168
5183
|
</details>
|
|
5169
5184
|
<div class="callout callout--demo crop-margins">
|
|
@@ -5192,8 +5207,8 @@
|
|
|
5192
5207
|
<li><strong>File:</strong> _card.scss</li>
|
|
5193
5208
|
<li><strong>Group:</strong> card</li>
|
|
5194
5209
|
<li><strong>Type:</strong> function</li>
|
|
5195
|
-
<li><strong>Lines (comments):</strong>
|
|
5196
|
-
<li><strong>Lines (code):</strong>
|
|
5210
|
+
<li><strong>Lines (comments):</strong> 128-131</li>
|
|
5211
|
+
<li><strong>Lines (code):</strong> 133-135</li>
|
|
5197
5212
|
</ul>
|
|
5198
5213
|
</details>
|
|
5199
5214
|
<h4 id="examples-3" tabindex="-1">Examples</h4>
|
|
@@ -4732,10 +4732,11 @@
|
|
|
4732
4732
|
<span class="pjs-token pjs-string">"text-align"</span> <span class="pjs-token pjs-punctuation">:</span> left<span class="pjs-token pjs-punctuation">,</span>
|
|
4733
4733
|
<span class="pjs-token pjs-string">"type-size"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"small"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4734
4734
|
<span class="pjs-token pjs-string">"background-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
|
|
4735
|
-
<span class="pjs-token pjs-string">"header-background-color"</span> <span class="pjs-token pjs-punctuation">:</span> #
|
|
4735
|
+
<span class="pjs-token pjs-string">"header-background-color"</span> <span class="pjs-token pjs-punctuation">:</span> #f5f4f4<span class="pjs-token pjs-punctuation">,</span>
|
|
4736
4736
|
<span class="pjs-token pjs-string">"body-background-color"</span> <span class="pjs-token pjs-punctuation">:</span> white<span class="pjs-token pjs-punctuation">,</span>
|
|
4737
4737
|
<span class="pjs-token pjs-string">"footer-background-color"</span> <span class="pjs-token pjs-punctuation">:</span> #f3f3f3<span class="pjs-token pjs-punctuation">,</span>
|
|
4738
4738
|
<span class="pjs-token pjs-string">"color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"type-secondary"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4739
|
+
<span class="pjs-token pjs-string">"header-color"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"headline"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4739
4740
|
<span class="pjs-token pjs-string">"line-height"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4740
4741
|
<span class="pjs-token pjs-string">"column-min-width"</span> <span class="pjs-token pjs-punctuation">:</span> 6em<span class="pjs-token pjs-punctuation">,</span>
|
|
4741
4742
|
<span class="pjs-token pjs-string">"first-column-large-min-width"</span> <span class="pjs-token pjs-punctuation">:</span> 15em<span class="pjs-token pjs-punctuation">,</span>
|
|
@@ -4750,8 +4751,9 @@
|
|
|
4750
4751
|
<span class="pjs-token pjs-string">"caption-type-size"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">"large"</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4751
4752
|
<span class="pjs-token pjs-string">"caption-background-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>
|
|
4752
4753
|
<span class="pjs-token pjs-string">"caption-font-weight"</span> <span class="pjs-token pjs-punctuation">:</span> bold<span class="pjs-token pjs-punctuation">,</span>
|
|
4754
|
+
<span class="pjs-token pjs-string">"caption-border-bottom"</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>
|
|
4753
4755
|
<span class="pjs-token pjs-string">"caption-margin"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0<span class="pjs-token pjs-punctuation">,</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4754
|
-
<span class="pjs-token pjs-string">"caption-padding"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0.
|
|
4756
|
+
<span class="pjs-token pjs-string">"caption-padding"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-punctuation">(</span>0.65em 0<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">,</span>
|
|
4755
4757
|
<span class="pjs-token pjs-string">"caption-text-align"</span> <span class="pjs-token pjs-punctuation">:</span> left<span class="pjs-token pjs-punctuation">,</span>
|
|
4756
4758
|
<span class="pjs-token pjs-string">"extra-selector"</span> <span class="pjs-token pjs-punctuation">:</span> <span class="pjs-token pjs-string">".wysiwyg table"</span>
|
|
4757
4759
|
<span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span></code></pre>
|
|
@@ -4761,10 +4763,191 @@
|
|
|
4761
4763
|
<li><strong>File:</strong> _data-table.scss</li>
|
|
4762
4764
|
<li><strong>Group:</strong> data-table</li>
|
|
4763
4765
|
<li><strong>Type:</strong> variable</li>
|
|
4764
|
-
<li><strong>Lines (comments):</strong> 25-
|
|
4765
|
-
<li><strong>Lines (code):</strong>
|
|
4766
|
+
<li><strong>Lines (comments):</strong> 25-54</li>
|
|
4767
|
+
<li><strong>Lines (code):</strong> 56-85</li>
|
|
4766
4768
|
</ul>
|
|
4767
4769
|
</details>
|
|
4770
|
+
<h4 id="map-properties" tabindex="-1">Map Properties</h4>
|
|
4771
|
+
<table>
|
|
4772
|
+
<thead>
|
|
4773
|
+
<tr>
|
|
4774
|
+
<th style="text-align:left">Name</th>
|
|
4775
|
+
<th style="text-align:left">Type</th>
|
|
4776
|
+
<th style="text-align:left">Default</th>
|
|
4777
|
+
<th style="text-align:left">Description</th>
|
|
4778
|
+
</tr>
|
|
4779
|
+
</thead>
|
|
4780
|
+
<tbody>
|
|
4781
|
+
<tr>
|
|
4782
|
+
<td style="text-align:left">cell-padding</td>
|
|
4783
|
+
<td style="text-align:left">Dimension</td>
|
|
4784
|
+
<td style="text-align:left">(0.5em,)</td>
|
|
4785
|
+
<td style="text-align:left">Padding of the th and td elements.</td>
|
|
4786
|
+
</tr>
|
|
4787
|
+
<tr>
|
|
4788
|
+
<td style="text-align:left">text-align</td>
|
|
4789
|
+
<td style="text-align:left">CssValue</td>
|
|
4790
|
+
<td style="text-align:left">left</td>
|
|
4791
|
+
<td style="text-align:left">Text align of the table.</td>
|
|
4792
|
+
</tr>
|
|
4793
|
+
<tr>
|
|
4794
|
+
<td style="text-align:left">type-size</td>
|
|
4795
|
+
<td style="text-align:left">String</td>
|
|
4796
|
+
<td style="text-align:left">"small"</td>
|
|
4797
|
+
<td style="text-align:left">Font size of the table.</td>
|
|
4798
|
+
</tr>
|
|
4799
|
+
<tr>
|
|
4800
|
+
<td style="text-align:left">background-color</td>
|
|
4801
|
+
<td style="text-align:left">Color</td>
|
|
4802
|
+
<td style="text-align:left">white</td>
|
|
4803
|
+
<td style="text-align:left">Background color of table container.</td>
|
|
4804
|
+
</tr>
|
|
4805
|
+
<tr>
|
|
4806
|
+
<td style="text-align:left">header-background-color</td>
|
|
4807
|
+
<td style="text-align:left">Color</td>
|
|
4808
|
+
<td style="text-align:left">#f5f4f4</td>
|
|
4809
|
+
<td style="text-align:left">Background color of the the table header.</td>
|
|
4810
|
+
</tr>
|
|
4811
|
+
<tr>
|
|
4812
|
+
<td style="text-align:left">body-background-color</td>
|
|
4813
|
+
<td style="text-align:left">Color</td>
|
|
4814
|
+
<td style="text-align:left">white</td>
|
|
4815
|
+
<td style="text-align:left">Background color of table body.</td>
|
|
4816
|
+
</tr>
|
|
4817
|
+
<tr>
|
|
4818
|
+
<td style="text-align:left">footer-background-color</td>
|
|
4819
|
+
<td style="text-align:left">Color</td>
|
|
4820
|
+
<td style="text-align:left">#f3f3f3</td>
|
|
4821
|
+
<td style="text-align:left">Background color of table footer.</td>
|
|
4822
|
+
</tr>
|
|
4823
|
+
<tr>
|
|
4824
|
+
<td style="text-align:left">color</td>
|
|
4825
|
+
<td style="text-align:left">Color</td>
|
|
4826
|
+
<td style="text-align:left">"type-secondary"</td>
|
|
4827
|
+
<td style="text-align:left">Font color of the table.</td>
|
|
4828
|
+
</tr>
|
|
4829
|
+
<tr>
|
|
4830
|
+
<td style="text-align:left">header-color</td>
|
|
4831
|
+
<td style="text-align:left">Color</td>
|
|
4832
|
+
<td style="text-align:left">"headline"</td>
|
|
4833
|
+
<td style="text-align:left">Font color for the table header.</td>
|
|
4834
|
+
</tr>
|
|
4835
|
+
<tr>
|
|
4836
|
+
<td style="text-align:left">line-height</td>
|
|
4837
|
+
<td style="text-align:left">Number</td>
|
|
4838
|
+
<td style="text-align:left">true</td>
|
|
4839
|
+
<td style="text-align:left">Line height for the table.</td>
|
|
4840
|
+
</tr>
|
|
4841
|
+
<tr>
|
|
4842
|
+
<td style="text-align:left">column-min-width</td>
|
|
4843
|
+
<td style="text-align:left">Dimension</td>
|
|
4844
|
+
<td style="text-align:left">6em</td>
|
|
4845
|
+
<td style="text-align:left">Min-width of the th element.</td>
|
|
4846
|
+
</tr>
|
|
4847
|
+
<tr>
|
|
4848
|
+
<td style="text-align:left">first-column-large-min-width</td>
|
|
4849
|
+
<td style="text-align:left">Dimension</td>
|
|
4850
|
+
<td style="text-align:left">15em</td>
|
|
4851
|
+
<td style="text-align:left">When using "--large-first" style, the min width of the first th element.</td>
|
|
4852
|
+
</tr>
|
|
4853
|
+
<tr>
|
|
4854
|
+
<td style="text-align:left">border-width</td>
|
|
4855
|
+
<td style="text-align:left">Dimension</td>
|
|
4856
|
+
<td style="text-align:left">1px</td>
|
|
4857
|
+
<td style="text-align:left">Border width of the table.</td>
|
|
4858
|
+
</tr>
|
|
4859
|
+
<tr>
|
|
4860
|
+
<td style="text-align:left">border-color</td>
|
|
4861
|
+
<td style="text-align:left">Color</td>
|
|
4862
|
+
<td style="text-align:left">#dddddd</td>
|
|
4863
|
+
<td style="text-align:left">Border color for the table.</td>
|
|
4864
|
+
</tr>
|
|
4865
|
+
<tr>
|
|
4866
|
+
<td style="text-align:left">striped-row-background-color</td>
|
|
4867
|
+
<td style="text-align:left">Color</td>
|
|
4868
|
+
<td style="text-align:left">#eeeeee</td>
|
|
4869
|
+
<td style="text-align:left">Background color for even rows if using "--striped" styling.</td>
|
|
4870
|
+
</tr>
|
|
4871
|
+
<tr>
|
|
4872
|
+
<td style="text-align:left">muted-row-background-color</td>
|
|
4873
|
+
<td style="text-align:left">Color</td>
|
|
4874
|
+
<td style="text-align:left">#ccc</td>
|
|
4875
|
+
<td style="text-align:left">Background color for odd rows if using "--striped" styling.</td>
|
|
4876
|
+
</tr>
|
|
4877
|
+
<tr>
|
|
4878
|
+
<td style="text-align:left">muted-row-border-color</td>
|
|
4879
|
+
<td style="text-align:left">Color</td>
|
|
4880
|
+
<td style="text-align:left">null</td>
|
|
4881
|
+
<td style="text-align:left">Border color for odd rows if using "--striped" styling.</td>
|
|
4882
|
+
</tr>
|
|
4883
|
+
<tr>
|
|
4884
|
+
<td style="text-align:left">highlighted-row-background-color</td>
|
|
4885
|
+
<td style="text-align:left">Color</td>
|
|
4886
|
+
<td style="text-align:left">#ccc</td>
|
|
4887
|
+
<td style="text-align:left">Background color row if using "__row-highlighted" styling.</td>
|
|
4888
|
+
</tr>
|
|
4889
|
+
<tr>
|
|
4890
|
+
<td style="text-align:left">highlighted-row-border-color</td>
|
|
4891
|
+
<td style="text-align:left">Color</td>
|
|
4892
|
+
<td style="text-align:left">null</td>
|
|
4893
|
+
<td style="text-align:left">Border color row if using "__row-highlighted" styling.</td>
|
|
4894
|
+
</tr>
|
|
4895
|
+
<tr>
|
|
4896
|
+
<td style="text-align:left">large-header-cell-padding-y</td>
|
|
4897
|
+
<td style="text-align:left">Dimension</td>
|
|
4898
|
+
<td style="text-align:left">1em</td>
|
|
4899
|
+
<td style="text-align:left">Vertical padding of header if using "--large-header" styling.</td>
|
|
4900
|
+
</tr>
|
|
4901
|
+
<tr>
|
|
4902
|
+
<td style="text-align:left">caption-type-size</td>
|
|
4903
|
+
<td style="text-align:left">String</td>
|
|
4904
|
+
<td style="text-align:left">"large"</td>
|
|
4905
|
+
<td style="text-align:left">Type size of table caption.</td>
|
|
4906
|
+
</tr>
|
|
4907
|
+
<tr>
|
|
4908
|
+
<td style="text-align:left">caption-background-color</td>
|
|
4909
|
+
<td style="text-align:left">Color</td>
|
|
4910
|
+
<td style="text-align:left">null</td>
|
|
4911
|
+
<td style="text-align:left">Background color of table caption.</td>
|
|
4912
|
+
</tr>
|
|
4913
|
+
<tr>
|
|
4914
|
+
<td style="text-align:left">caption-font-weight</td>
|
|
4915
|
+
<td style="text-align:left">CssValue</td>
|
|
4916
|
+
<td style="text-align:left">bold</td>
|
|
4917
|
+
<td style="text-align:left">Font weight of caption.</td>
|
|
4918
|
+
</tr>
|
|
4919
|
+
<tr>
|
|
4920
|
+
<td style="text-align:left">caption-border-bottom</td>
|
|
4921
|
+
<td style="text-align:left">CssBalue</td>
|
|
4922
|
+
<td style="text-align:left">null</td>
|
|
4923
|
+
<td style="text-align:left">Bottom border of the caption.</td>
|
|
4924
|
+
</tr>
|
|
4925
|
+
<tr>
|
|
4926
|
+
<td style="text-align:left">caption-margin</td>
|
|
4927
|
+
<td style="text-align:left">Dimension</td>
|
|
4928
|
+
<td style="text-align:left">(0,)</td>
|
|
4929
|
+
<td style="text-align:left">Margin of the caption.</td>
|
|
4930
|
+
</tr>
|
|
4931
|
+
<tr>
|
|
4932
|
+
<td style="text-align:left">caption-padding</td>
|
|
4933
|
+
<td style="text-align:left">Dimension</td>
|
|
4934
|
+
<td style="text-align:left">(0.65em 0)</td>
|
|
4935
|
+
<td style="text-align:left">Padding of the caption.</td>
|
|
4936
|
+
</tr>
|
|
4937
|
+
<tr>
|
|
4938
|
+
<td style="text-align:left">caption-text-align</td>
|
|
4939
|
+
<td style="text-align:left">CssValue</td>
|
|
4940
|
+
<td style="text-align:left">left</td>
|
|
4941
|
+
<td style="text-align:left">Text align of the caption.</td>
|
|
4942
|
+
</tr>
|
|
4943
|
+
<tr>
|
|
4944
|
+
<td style="text-align:left">extra-selector</td>
|
|
4945
|
+
<td style="text-align:left">String</td>
|
|
4946
|
+
<td style="text-align:left">".wysiwyg table"</td>
|
|
4947
|
+
<td style="text-align:left">Additional selectors to include table styling.</td>
|
|
4948
|
+
</tr>
|
|
4949
|
+
</tbody>
|
|
4950
|
+
</table>
|
|
4768
4951
|
<h2 id="mixins" tabindex="-1">Mixins</h2>
|
|
4769
4952
|
<div class="sassdoc-item-header">
|
|
4770
4953
|
<h3 id="mixin-set" tabindex="-1">set()</h3>
|
|
@@ -4779,8 +4962,8 @@
|
|
|
4779
4962
|
<li><strong>File:</strong> _data-table.scss</li>
|
|
4780
4963
|
<li><strong>Group:</strong> data-table</li>
|
|
4781
4964
|
<li><strong>Type:</strong> mixin</li>
|
|
4782
|
-
<li><strong>Lines (comments):</strong>
|
|
4783
|
-
<li><strong>Lines (code):</strong>
|
|
4965
|
+
<li><strong>Lines (comments):</strong> 87-90</li>
|
|
4966
|
+
<li><strong>Lines (code):</strong> 92-94</li>
|
|
4784
4967
|
</ul>
|
|
4785
4968
|
</details>
|
|
4786
4969
|
<h4 id="examples" tabindex="-1">Examples</h4>
|
|
@@ -4819,8 +5002,8 @@
|
|
|
4819
5002
|
<li><strong>File:</strong> _data-table.scss</li>
|
|
4820
5003
|
<li><strong>Group:</strong> data-table</li>
|
|
4821
5004
|
<li><strong>Type:</strong> mixin</li>
|
|
4822
|
-
<li><strong>Lines (comments):</strong>
|
|
4823
|
-
<li><strong>Lines (code):</strong>
|
|
5005
|
+
<li><strong>Lines (comments):</strong> 106-108</li>
|
|
5006
|
+
<li><strong>Lines (code):</strong> 110-217</li>
|
|
4824
5007
|
</ul>
|
|
4825
5008
|
</details>
|
|
4826
5009
|
<h4 id="examples-1" tabindex="-1">Examples</h4>
|
|
@@ -4843,8 +5026,8 @@
|
|
|
4843
5026
|
<li><strong>File:</strong> _data-table.scss</li>
|
|
4844
5027
|
<li><strong>Group:</strong> data-table</li>
|
|
4845
5028
|
<li><strong>Type:</strong> function</li>
|
|
4846
|
-
<li><strong>Lines (comments):</strong>
|
|
4847
|
-
<li><strong>Lines (code):</strong>
|
|
5029
|
+
<li><strong>Lines (comments):</strong> 96-99</li>
|
|
5030
|
+
<li><strong>Lines (code):</strong> 101-104</li>
|
|
4848
5031
|
</ul>
|
|
4849
5032
|
</details>
|
|
4850
5033
|
<h4 id="examples-2" tabindex="-1">Examples</h4>
|