feat(tabs): improve tabs

A-l-y-l-e · Aug 30, 2020 · 684c28b · 684c28b
1 parent a3d209b
commit 684c28b
Show file tree

Hide file tree

Showing 18 changed files with 231 additions and 264 deletions.
diff --git a/src/api/docs/components/tabs.html b/src/api/docs/components/tabs.html
@@ -32,6 +32,6 @@ <h2 lyTyp="headline" gutter>Placement</h2>
 </demo-view>
 <h2 id="limitations">Limitations</h2>
 <ul>
-<li><p>When using <code class="ttm ttx">keepContent</code> attribute with <code class="ttm ttx">headerPlacement="before"</code> or <code class="ttm ttx">headerPlacement="after"</code> you must explicitly set a height to <code class="ttm ttx">ly-tabs</code> for it to work properly.</p></li>
-<li><p><code class="ttm ttx">headerPlacement="before"</code> or <code class="ttm ttx">headerPlacement="after"</code> does not work with <code class="ttm ttx">dynamicHeight</code>.</p></li>
+<li><p><del>When using <code class="ttm ttx">keepContent</code> attribute with <code class="ttm ttx">headerPlacement="before"</code> or <code class="ttm ttx">headerPlacement="after"</code> you must explicitly set a height to <code class="ttm ttx">ly-tabs</code> for it to work properly.</del></p></li>
+<li><p><del><code class="ttm ttx">headerPlacement="before"</code> or <code class="ttm ttx">headerPlacement="after"</code> does not work with <code class="ttm ttx">dynamicHeight</code>.</del></p></li>
 </ul>
diff --git a/src/api/docs/customization/color.html b/src/api/docs/customization/color.html
@@ -5,24 +5,24 @@ <h1 id="color">Color</h1>
 <h2 id="supported-values">Supported values</h2>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._j12nc04g{background:rgb(255,255,0);opacity:1;}._j12nc04g *{color:#202020 !important;}</style><span class="_j12nc04g"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
-<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._845giesv{background:rgb(0,0,0);opacity:1;}._845giesv *{color:white !important;}</style><span class="_845giesv"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
-<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._z356jio{background:rgb(255,255,255);opacity:1;}._z356jio *{color:#202020 !important;}</style><span class="_z356jio"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
-<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._5kvqqtoy{background:rgba(0,0,0,0.87);opacity:0.87;}._5kvqqtoy *{color:white !important;}</style><span class="_5kvqqtoy"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._fsbkwuc5{background:rgb(255,255,0);opacity:1;}._fsbkwuc5 *{color:#202020 !important;}</style><span class="_fsbkwuc5"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>  <span class="tt18 tt3o">// rgb</span>
+<span class="tt18 tt1j">const</span> Black  <span class="tt18 ttb0">=</span> <style>._2ledhg82{background:rgb(0,0,0);opacity:1;}._2ledhg82 *{color:white !important;}</style><span class="_2ledhg82"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>            <span class="tt18 tt3o">// number</span>
+<span class="tt18 tt1j">const</span> White  <span class="tt18 ttb0">=</span> <style>._2zcuoe35{background:rgb(255,255,255);opacity:1;}._2zcuoe35 *{color:#202020 !important;}</style><span class="_2zcuoe35"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>     <span class="tt18 tt3o">// hex</span>
+<span class="tt18 tt1j">const</span> Text   <span class="tt18 ttb0">=</span> <style>._77vrxrrv{background:rgba(0,0,0,0.87);opacity:0.87;}._77vrxrrv *{color:white !important;}</style><span class="_77vrxrrv"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
 </code></pre>
 <p>Note that a 6-digit hexadecimal is different from a 3-digit hexadecimal.</p>
-<pre class="ttb"><code prsm class="ttm"><style>._1n49hha3{background:rgb(255,255,255);opacity:1;}._1n49hha3 *{color:#202020 !important;}</style><span class="_1n49hha3"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._523w283k{background:rgb(0,15,255);opacity:1;}._523w283k *{color:white !important;}</style><span class="_523w283k"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
+<pre class="ttb"><code prsm class="ttm"><style>._88jydob9{background:rgb(255,255,255);opacity:1;}._88jydob9 *{color:#202020 !important;}</style><span class="_88jydob9"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._9bs8supc{background:rgb(0,15,255);opacity:1;}._9bs8supc *{color:white !important;}</style><span class="_9bs8supc"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
 </code></pre>
 <h2 id="how-to-use-color">How to use <code class="ttm ttx">color</code></h2>
 <p><code class="ttm ttx">color</code> and the previously mentioned methods returns an immutable <code class="ttm ttx">Color</code>.</p>
 <pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>
 
-<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._beajwu4t{background:rgb(255,255,0);opacity:1;}._beajwu4t *{color:#202020 !important;}</style><span class="_beajwu4t"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._70n8imnm{background:rgb(255,255,0);opacity:1;}._70n8imnm *{color:#202020 !important;}</style><span class="_70n8imnm"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 </code></pre>
 <p>Using methods:</p>
-<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._hb0oksor{background:rgb(255,255,0);opacity:1;}._hb0oksor *{color:#202020 !important;}</style><span class="_hb0oksor"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
+<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._af68iiev{background:rgb(255,255,0);opacity:1;}._af68iiev *{color:#202020 !important;}</style><span class="_af68iiev"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
 Yellow<span class="tt18 ttae">.</span><span class="tt18 tta3">darken</span><span class="tt18 ttae">(</span><span class="tt18 ttap">2</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">alpha</span><span class="tt18 ttae">(</span><span class="tt18 ttap">.94</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgba(145,156,0,0.94)</span>
 </code></pre>
-<pre class="ttb"><code prsm class="ttm"><style>._3be9lg9a{background:rgb(255,255,255);opacity:1;}._3be9lg9a *{color:#202020 !important;}</style><span class="_3be9lg9a"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
-<style>._9ud1j3s0{background:rgb(255,255,255);opacity:1;}._9ud1j3s0 *{color:#202020 !important;}</style><span class="_9ud1j3s0"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
+<pre class="ttb"><code prsm class="ttm"><style>._1nng2fgl{background:rgb(255,255,255);opacity:1;}._1nng2fgl *{color:#202020 !important;}</style><span class="_1nng2fgl"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
+<style>._avi5mj0g{background:rgb(255,255,255);opacity:1;}._avi5mj0g *{color:#202020 !important;}</style><span class="_avi5mj0g"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
 </code></pre>
diff --git a/src/api/docs/customization/theming.html b/src/api/docs/customization/theming.html
@@ -25,12 +25,12 @@ <h2 id="overwriting-the-variables-of-a-theme">Overwriting the variables of a the
 <span class="tt18 tt1j">export</span> <span class="tt18 tt1j">class</span> <span class="tt18 ttc8">CustomMinimaLight</span> <span class="tt18 tt1j">implements</span> <span class="tt18 ttc8">PartialThemeVariables</span> <span class="tt18 ttae">&#123;</span>
   name <span class="tt18 ttb0">=</span> <span class="tt18 tt3z">'minima-light'</span><span class="tt18 ttae">;</span>
   primary <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
-    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._7bfkke8z{background:rgb(33,150,243);opacity:1;}._7bfkke8z *{color:white !important;}</style><span class="_7bfkke8z"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x2196f3</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
-    contrast<span class="tt18 ttb0">:</span> <style>._6blvbtz3{background:rgb(255,255,255);opacity:1;}._6blvbtz3 *{color:#202020 !important;}</style><span class="_6blvbtz3"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
+    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._bheo0d2s{background:rgb(33,150,243);opacity:1;}._bheo0d2s *{color:white !important;}</style><span class="_bheo0d2s"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x2196f3</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
+    contrast<span class="tt18 ttb0">:</span> <style>._34gj2iax{background:rgb(255,255,255);opacity:1;}._34gj2iax *{color:#202020 !important;}</style><span class="_34gj2iax"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
   <span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
   accent <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
-    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._3kut51ww{background:rgb(233,30,99);opacity:1;}._3kut51ww *{color:white !important;}</style><span class="_3kut51ww"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xe91e63</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
-    contrast<span class="tt18 ttb0">:</span> <style>._16ke9odc{background:rgb(255,255,255);opacity:1;}._16ke9odc *{color:#202020 !important;}</style><span class="_16ke9odc"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
+    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._gga6zycm{background:rgb(233,30,99);opacity:1;}._gga6zycm *{color:white !important;}</style><span class="_gga6zycm"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xe91e63</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
+    contrast<span class="tt18 ttb0">:</span> <style>._179tyvvl{background:rgb(255,255,255);opacity:1;}._179tyvvl *{color:#202020 !important;}</style><span class="_179tyvvl"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
   <span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
 <span class="tt18 ttae">&#125;</span>
 
@@ -41,12 +41,12 @@ <h2 id="overwriting-the-variables-of-a-theme">Overwriting the variables of a the
 <span class="tt18 tt1j">export</span> <span class="tt18 tt1j">class</span> <span class="tt18 ttc8">CustomMinimaDark</span> <span class="tt18 tt1j">implements</span> <span class="tt18 ttc8">PartialThemeVariables</span> <span class="tt18 ttae">&#123;</span>
   name <span class="tt18 ttb0">=</span> <span class="tt18 tt3z">'minima-dark'</span><span class="tt18 ttae">;</span>
   primary <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
-    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._jqhx33xz{background:rgb(156,39,176);opacity:1;}._jqhx33xz *{color:white !important;}</style><span class="_jqhx33xz"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x9c27b0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
-    contrast<span class="tt18 ttb0">:</span> <style>._kdrdoajm{background:rgb(255,255,255);opacity:1;}._kdrdoajm *{color:#202020 !important;}</style><span class="_kdrdoajm"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
+    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._2k042b97{background:rgb(156,39,176);opacity:1;}._2k042b97 *{color:white !important;}</style><span class="_2k042b97"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x9c27b0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
+    contrast<span class="tt18 ttb0">:</span> <style>._ce46cjlr{background:rgb(255,255,255);opacity:1;}._ce46cjlr *{color:#202020 !important;}</style><span class="_ce46cjlr"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
   <span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
   accent <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
-    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._9pb8o7uq{background:rgb(105,240,174);opacity:1;}._9pb8o7uq *{color:#202020 !important;}</style><span class="_9pb8o7uq"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x69f0ae</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
-    contrast<span class="tt18 ttb0">:</span> <style>._hpifjtw5{background:rgb(32,32,32);opacity:1;}._hpifjtw5 *{color:white !important;}</style><span class="_hpifjtw5"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x202020</span><span class="tt18 ttae">)</span></span>
+    <span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._e6nrylwz{background:rgb(105,240,174);opacity:1;}._e6nrylwz *{color:#202020 !important;}</style><span class="_e6nrylwz"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x69f0ae</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
+    contrast<span class="tt18 ttb0">:</span> <style>._awnmtzji{background:rgb(32,32,32);opacity:1;}._awnmtzji *{color:white !important;}</style><span class="_awnmtzji"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x202020</span><span class="tt18 ttae">)</span></span>
   <span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
 <span class="tt18 ttae">&#125;</span>