@ulu/frontend 0.1.0-beta.66 → 0.1.0-beta.67

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.
Files changed (14) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/README.dev.md +2 -2
  3. package/README.md +6 -0
  4. package/docs-dev/changelog/index.html +23 -0
  5. package/docs-dev/demos/card/index.html +16 -16
  6. package/docs-dev/demos/counter-list/index.html +16 -0
  7. package/docs-dev/demos/data-table/index.html +100 -100
  8. package/docs-dev/sass/components/counter-list/index.html +9 -8
  9. package/docs-dev/sass/core/breakpoint/index.html +66 -28
  10. package/docs-dev/sass/core/utils/index.html +440 -193
  11. package/package.json +1 -1
  12. package/scss/_breakpoint.scss +28 -7
  13. package/scss/_utils.scss +140 -11
  14. package/scss/components/_counter-list.scss +21 -7
package/docs-dev/sass/core/breakpoint/index.html CHANGED
@@ -5327,8 +5327,8 @@
5327
5327
  <li><strong>File:</strong> _breakpoint.scss</li>
5328
5328
  <li><strong>Group:</strong> breakpoint</li>
5329
5329
  <li><strong>Type:</strong> variable</li>
5330
- <li><strong>Lines (comments):</strong> 47-51</li>
5331
- <li><strong>Lines (code):</strong> 53-57</li>
5330
+ <li><strong>Lines (comments):</strong> 45-49</li>
5331
+ <li><strong>Lines (code):</strong> 51-55</li>
5332
5332
  </ul>
5333
5333
  </details>
5334
5334
  <h2 id="mixins" tabindex="-1">Mixins</h2>
@@ -5386,8 +5386,8 @@
5386
5386
  <li><strong>File:</strong> _breakpoint.scss</li>
5387
5387
  <li><strong>Group:</strong> breakpoint</li>
5388
5388
  <li><strong>Type:</strong> mixin</li>
5389
- <li><strong>Lines (comments):</strong> 59-66</li>
5390
- <li><strong>Lines (code):</strong> 68-70</li>
5389
+ <li><strong>Lines (comments):</strong> 57-64</li>
5390
+ <li><strong>Lines (code):</strong> 66-68</li>
5391
5391
  </ul>
5392
5392
  </details>
5393
5393
  <h4 id="examples-1" tabindex="-1">Examples</h4>
@@ -5439,8 +5439,8 @@
5439
5439
  <li><strong>File:</strong> _breakpoint.scss</li>
5440
5440
  <li><strong>Group:</strong> breakpoint</li>
5441
5441
  <li><strong>Type:</strong> mixin</li>
5442
- <li><strong>Lines (comments):</strong> 116-125</li>
5443
- <li><strong>Lines (code):</strong> 127-133</li>
5442
+ <li><strong>Lines (comments):</strong> 137-146</li>
5443
+ <li><strong>Lines (code):</strong> 148-154</li>
5444
5444
  </ul>
5445
5445
  </details>
5446
5446
  <h4 id="examples-2" tabindex="-1">Examples</h4>
@@ -5484,8 +5484,8 @@
5484
5484
  <li><strong>File:</strong> _breakpoint.scss</li>
5485
5485
  <li><strong>Group:</strong> breakpoint</li>
5486
5486
  <li><strong>Type:</strong> mixin</li>
5487
- <li><strong>Lines (comments):</strong> 135-144</li>
5488
- <li><strong>Lines (code):</strong> 146-152</li>
5487
+ <li><strong>Lines (comments):</strong> 156-165</li>
5488
+ <li><strong>Lines (code):</strong> 167-173</li>
5489
5489
  </ul>
5490
5490
  </details>
5491
5491
  <h4 id="examples-3" tabindex="-1">Examples</h4>
@@ -5529,8 +5529,8 @@
5529
5529
  <li><strong>File:</strong> _breakpoint.scss</li>
5530
5530
  <li><strong>Group:</strong> breakpoint</li>
5531
5531
  <li><strong>Type:</strong> mixin</li>
5532
- <li><strong>Lines (comments):</strong> 154-164</li>
5533
- <li><strong>Lines (code):</strong> 166-173</li>
5532
+ <li><strong>Lines (comments):</strong> 175-185</li>
5533
+ <li><strong>Lines (code):</strong> 187-194</li>
5534
5534
  </ul>
5535
5535
  </details>
5536
5536
  <h4 id="examples-4" tabindex="-1">Examples</h4>
@@ -5583,8 +5583,8 @@
5583
5583
  <li><strong>File:</strong> _breakpoint.scss</li>
5584
5584
  <li><strong>Group:</strong> breakpoint</li>
5585
5585
  <li><strong>Type:</strong> mixin</li>
5586
- <li><strong>Lines (comments):</strong> 175-185</li>
5587
- <li><strong>Lines (code):</strong> 187-199</li>
5586
+ <li><strong>Lines (comments):</strong> 196-206</li>
5587
+ <li><strong>Lines (code):</strong> 208-220</li>
5588
5588
  </ul>
5589
5589
  </details>
5590
5590
  <h4 id="examples-5" tabindex="-1">Examples</h4>
@@ -5637,8 +5637,8 @@
5637
5637
  <li><strong>File:</strong> _breakpoint.scss</li>
5638
5638
  <li><strong>Group:</strong> breakpoint</li>
5639
5639
  <li><strong>Type:</strong> mixin</li>
5640
- <li><strong>Lines (comments):</strong> 201-208</li>
5641
- <li><strong>Lines (code):</strong> 210-228</li>
5640
+ <li><strong>Lines (comments):</strong> 222-229</li>
5641
+ <li><strong>Lines (code):</strong> 231-249</li>
5642
5642
  </ul>
5643
5643
  </details>
5644
5644
  <h4 id="examples-6" tabindex="-1">Examples</h4>
@@ -5699,8 +5699,8 @@
5699
5699
  <li><strong>File:</strong> _breakpoint.scss</li>
5700
5700
  <li><strong>Group:</strong> breakpoint</li>
5701
5701
  <li><strong>Type:</strong> mixin</li>
5702
- <li><strong>Lines (comments):</strong> 230-233</li>
5703
- <li><strong>Lines (code):</strong> 235-245</li>
5702
+ <li><strong>Lines (comments):</strong> 251-254</li>
5703
+ <li><strong>Lines (code):</strong> 256-266</li>
5704
5704
  </ul>
5705
5705
  </details>
5706
5706
  <h4 id="require-7" tabindex="-1">Require</h4>
@@ -5723,8 +5723,8 @@
5723
5723
  <li><strong>File:</strong> _breakpoint.scss</li>
5724
5724
  <li><strong>Group:</strong> breakpoint</li>
5725
5725
  <li><strong>Type:</strong> function</li>
5726
- <li><strong>Lines (comments):</strong> 33-41</li>
5727
- <li><strong>Lines (code):</strong> 43-45</li>
5726
+ <li><strong>Lines (comments):</strong> 33-39</li>
5727
+ <li><strong>Lines (code):</strong> 41-43</li>
5728
5728
  </ul>
5729
5729
  </details>
5730
5730
  <h4 id="examples-7" tabindex="-1">Examples</h4>
@@ -5785,17 +5785,17 @@
5785
5785
  <li><strong>File:</strong> _breakpoint.scss</li>
5786
5786
  <li><strong>Group:</strong> breakpoint</li>
5787
5787
  <li><strong>Type:</strong> function</li>
5788
- <li><strong>Lines (comments):</strong> 72-81</li>
5789
- <li><strong>Lines (code):</strong> 83-85</li>
5788
+ <li><strong>Lines (comments):</strong> 70-77</li>
5789
+ <li><strong>Lines (code):</strong> 79-81</li>
5790
5790
  </ul>
5791
5791
  </details>
5792
5792
  <h4 id="examples-8" tabindex="-1">Examples</h4>
5793
5793
  <p>Example usage</p>
5794
- <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get </span><span class="pjs-token pjs-punctuation">{</span>
5794
+ <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-sizes </span><span class="pjs-token pjs-punctuation">{</span>
5795
5795
  <span class="pjs-token pjs-property"><span class="pjs-token pjs-variable">$sizes</span></span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-sizes</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
5796
5796
  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> map.<span class="pjs-token pjs-function">get</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-variable">$sizes</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
5797
5797
  <span class="pjs-token pjs-punctuation">}</span></code></pre>
5798
- <pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get</span> <span class="pjs-token pjs-punctuation">{</span>
5798
+ <pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-sizes</span> <span class="pjs-token pjs-punctuation">{</span>
5799
5799
  <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
5800
5800
  <span class="pjs-token pjs-punctuation">}</span></code></pre>
5801
5801
  <h4 id="returns-1" tabindex="-1">Returns</h4>
@@ -5830,10 +5830,18 @@
5830
5830
  <li><strong>File:</strong> _breakpoint.scss</li>
5831
5831
  <li><strong>Group:</strong> breakpoint</li>
5832
5832
  <li><strong>Type:</strong> function</li>
5833
- <li><strong>Lines (comments):</strong> 87-89</li>
5834
- <li><strong>Lines (code):</strong> 90-93</li>
5833
+ <li><strong>Lines (comments):</strong> 83-90</li>
5834
+ <li><strong>Lines (code):</strong> 92-94</li>
5835
5835
  </ul>
5836
5836
  </details>
5837
+ <h4 id="examples-9" tabindex="-1">Examples</h4>
5838
+ <p>Example usage</p>
5839
+ <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-size </span><span class="pjs-token pjs-punctuation">{</span>
5840
+ <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
5841
+ <span class="pjs-token pjs-punctuation">}</span></code></pre>
5842
+ <pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-size</span> <span class="pjs-token pjs-punctuation">{</span>
5843
+ <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
5844
+ <span class="pjs-token pjs-punctuation">}</span></code></pre>
5837
5845
  <h4 id="parameters-8" tabindex="-1">Parameters</h4>
5838
5846
  <table>
5839
5847
  <thead>
@@ -5884,10 +5892,20 @@
5884
5892
  <li><strong>File:</strong> _breakpoint.scss</li>
5885
5893
  <li><strong>Group:</strong> breakpoint</li>
5886
5894
  <li><strong>Type:</strong> function</li>
5887
- <li><strong>Lines (comments):</strong> 95-97</li>
5888
- <li><strong>Lines (code):</strong> 99-105</li>
5895
+ <li><strong>Lines (comments):</strong> 96-104</li>
5896
+ <li><strong>Lines (code):</strong> 106-112</li>
5889
5897
  </ul>
5890
5898
  </details>
5899
+ <h4 id="examples-10" tabindex="-1">Examples</h4>
5900
+ <p>Example usage</p>
5901
+ <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-get-size-value </span><span class="pjs-token pjs-punctuation">{</span>
5902
+ <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">,</span> <span class="pjs-token pjs-boolean">true</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
5903
+ <span class="pjs-token pjs-property">max-height</span><span class="pjs-token pjs-punctuation">:</span> ulu.<span class="pjs-token pjs-function">breakpoint-get-size-value</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">;</span>
5904
+ <span class="pjs-token pjs-punctuation">}</span></code></pre>
5905
+ <pre class="language-css"><code class="language-css"><span class="pjs-token pjs-selector">.test-get-size-value</span> <span class="pjs-token pjs-punctuation">{</span>
5906
+ <span class="pjs-token pjs-property">height</span><span class="pjs-token pjs-punctuation">:</span> 75.99em<span class="pjs-token pjs-punctuation">;</span>
5907
+ <span class="pjs-token pjs-property">max-height</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">;</span>
5908
+ <span class="pjs-token pjs-punctuation">}</span></code></pre>
5891
5909
  <h4 id="parameters-9" tabindex="-1">Parameters</h4>
5892
5910
  <table>
5893
5911
  <thead>
@@ -5940,10 +5958,30 @@
5940
5958
  <li><strong>File:</strong> _breakpoint.scss</li>
5941
5959
  <li><strong>Group:</strong> breakpoint</li>
5942
5960
  <li><strong>Type:</strong> function</li>
5943
- <li><strong>Lines (comments):</strong> 107-109</li>
5944
- <li><strong>Lines (code):</strong> 111-114</li>
5961
+ <li><strong>Lines (comments):</strong> 114-130</li>
5962
+ <li><strong>Lines (code):</strong> 132-135</li>
5945
5963
  </ul>
5946
5964
  </details>
5965
+ <h4 id="examples-11" tabindex="-1">Examples</h4>
5966
+ <p>Example usage</p>
5967
+ <pre class="language-scss"><code class="language-scss"><span class="pjs-token pjs-selector">.test-exists </span><span class="pjs-token pjs-punctuation">{</span>
5968
+ <span class="pjs-token pjs-keyword">@if</span><span class="pjs-token pjs-punctuation">(</span>ulu.<span class="pjs-token pjs-function">breakpoint-exists</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
5969
+ <span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">breakpoint-min</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"medium"</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
5970
+ <span class="pjs-token pjs-property">padding</span><span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">;</span>
5971
+ <span class="pjs-token pjs-punctuation">}</span>
5972
+ <span class="pjs-token pjs-punctuation">}</span>
5973
+ <span class="pjs-token pjs-comment">// The below content doesn't print because the size doesn't exist.</span>
5974
+ <span class="pjs-token pjs-keyword">@if</span><span class="pjs-token pjs-punctuation">(</span>ulu.<span class="pjs-token pjs-function">breakpoint-exists</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"too-large"</span><span class="pjs-token pjs-punctuation">)</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
5975
+ <span class="pjs-token pjs-keyword">@include</span> ulu.<span class="pjs-token pjs-function">breakpoint-min</span><span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-string">"too-large"</span><span class="pjs-token pjs-punctuation">)</span> <span class="pjs-token pjs-punctuation">{</span>
5976
+ <span class="pjs-token pjs-property">padding</span><span class="pjs-token pjs-punctuation">:</span> 20000rem<span class="pjs-token pjs-punctuation">;</span>
5977
+ <span class="pjs-token pjs-punctuation">}</span>
5978
+ <span class="pjs-token pjs-punctuation">}</span>
5979
+ <span class="pjs-token pjs-punctuation">}</span></code></pre>
5980
+ <pre class="language-css"><code class="language-css"><span class="pjs-token pjs-atrule"><span class="pjs-token pjs-rule">@media</span> screen <span class="pjs-token pjs-keyword">and</span> <span class="pjs-token pjs-punctuation">(</span><span class="pjs-token pjs-property">min-width</span><span class="pjs-token pjs-punctuation">:</span> 76em<span class="pjs-token pjs-punctuation">)</span></span> <span class="pjs-token pjs-punctuation">{</span>
5981
+ <span class="pjs-token pjs-selector">.test-exists</span> <span class="pjs-token pjs-punctuation">{</span>
5982
+ <span class="pjs-token pjs-property">padding</span><span class="pjs-token pjs-punctuation">:</span> 2rem<span class="pjs-token pjs-punctuation">;</span>
5983
+ <span class="pjs-token pjs-punctuation">}</span>
5984
+ <span class="pjs-token pjs-punctuation">}</span></code></pre>
5947
5985
  <h4 id="parameters-10" tabindex="-1">Parameters</h4>
5948
5986
  <table>
5949
5987
  <thead>