v.5.2.3

Author: SimonPadbury

docs/dist/codebase.css

@@ -621,7 +621,7 @@ <h3 id="panel-links" tabindex="-1">Panel links</h3>
 </a>
 <p>The box shadow on hover above is supplied by a Codebase <a href="/codebase-5/docs/4-decoration-utilities/box-shadows">box shadow</a>.</p>
 <pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br>    <span class="token selector">.t-link-inside.t-decoration-none .t-link,<br>    .t-link-inside.hover\:t-decoration-underline:hover</span> <span class="token punctuation">{</span><br>        <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br>    <span class="token selector">.hover\:t-decoration-underline:hover .t-link</span> <span class="token punctuation">{</span><br>        <span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>block mb-3 b-thin p-2 hover:bs-3 t-link-inside t-decoration-none hover:t-decoration-underline<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>h4 mb-1 t-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsim dolor sit amet ...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre>
-<p>A third example — removing the underline (see above), and controlling the text color in base and hover states (plus adding a background color on hover):</p>
+<p>A third example — removing the underline (i.e. is affected the additional styling above), and controlling the text color in base and hover states (plus adding a background color on hover):</p>
 <style>
     .t-link-inside.t-green-500 {
         color: unset;
@@ -630,15 +630,15 @@ <h3 id="panel-links" tabindex="-1">Panel links</h3>
         color: var(--green-500);
     }
 
-    .hover\:t-green-600:hover .t-link {
+    .t-link-inside.hover\:t-green-600:hover .t-link {
         color: var(--green-600)
     }
 </style>
 <a class="block mb-3 b-thin p-2 t-link-inside t-decoration-none t-green-500 hover:t-green-600 hover:bg-green-100" href="#/">
     <p class="h4 mb-1 t-bold t-link">Card title</p>
     <p class="mb-0">Lorem ipsim dolor sit amet ...</p>
 </a>
-<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br>    <span class="token selector">.t-link-inside.t-green-500</span> <span class="token punctuation">{</span><br>        <span class="token property">color</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br>    <span class="token selector">.t-link-inside.t-green-500 .t-link</span> <span class="token punctuation">{</span><br>        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-500<span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br><br>    <span class="token selector">.hover\:t-green-600:hover .t-link</span> <span class="token punctuation">{</span><br>        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-600<span class="token punctuation">)</span><br>    <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>block mb-3 b-thin p-2 t-link-inside t-decoration-none t-green-500 hover:t-green-600 hover:bg-green-100<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>h4 mb-1 t-bold t-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsim dolor sit amet ...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre>
+<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"><br>    <span class="token selector">.t-link-inside.t-green-500</span> <span class="token punctuation">{</span><br>        <span class="token property">color</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br>    <span class="token selector">.t-link-inside.t-green-500 .t-link</span> <span class="token punctuation">{</span><br>        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-500<span class="token punctuation">)</span><span class="token punctuation">;</span><br>    <span class="token punctuation">}</span><br><br>    <span class="token selector">.t-link-inside.hover\:t-green-600:hover .t-link</span> <span class="token punctuation">{</span><br>        <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green-600<span class="token punctuation">)</span><br>    <span class="token punctuation">}</span><br></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span><br><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>block mb-3 b-thin p-2 t-link-inside t-decoration-none t-green-500 hover:t-green-600 hover:bg-green-100<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>h4 mb-1 t-bold t-link<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Card title<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lorem ipsim dolor sit amet ...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><br><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span></code></pre>
 <h2 id="other-text-utilities" tabindex="-1">Other text utilities</h2>
 <ul>
 <li>

docs/dist/codebase.css.map

@@ -103,35 +103,19 @@ $mq-value in $mq-width {
   text-decoration: underline;
 }
 
-.t-link-inside {
-  cursor: pointer;
+.t-link-inside,
+.t-link-inside:hover {
   text-decoration: none;
   color: unset;
-
-  &:hover {
-    color: unset;
-  }
-
-  .t-link {
-    color: var(--c-link);
-    text-decoration: underline;
-  }
-
-  &:hover .t-link {
-    color: var(--c-link-hover);
-  }
 }
 
 .t-link {
-  &:-moz-focusring {
-    outline: var(--focus-outline);
-    box-shadow: var(--focus-shadow);
-  }
+  color: var(--c-link);
+  text-decoration: underline;
+}
 
-  &:focus-visible {
-    outline: var(--focus-outline);
-    box-shadow: var(--focus-shadow);
-  }
+a.t-link-inside:hover .t-link {
+  color: var(--c-link-hover);
 }
 
 .t-strike {

docs/docs/5-typographic-utilities/inline-text/index.html

@@ -139,7 +139,7 @@ The box shadow on hover above is supplied by a Codebase [box shadow]({{ '/docs/4
 </a>
 ```
 
-A third example — removing the underline (see above), and controlling the text color in base and hover states (plus adding a background color on hover):
+A third example — removing the underline (i.e. is affected the additional styling above), and controlling the text color in base and hover states (plus adding a background color on hover):
 
 <style>
     .t-link-inside.t-green-500 {
@@ -149,7 +149,7 @@ A third example — removing the underline (see above), and controlling the text
         color: var(--green-500);
     }
 
-    .hover\:t-green-600:hover .t-link {
+    .t-link-inside.hover\:t-green-600:hover .t-link {
         color: var(--green-600)
     }
 </style>
@@ -168,7 +168,7 @@ A third example — removing the underline (see above), and controlling the text
         color: var(--green-500);
     }
 
-    .hover\:t-green-600:hover .t-link {
+    .t-link-inside.hover\:t-green-600:hover .t-link {
         color: var(--green-600)
     }
 </style>