feat(mistica-css): style any a element inside mistica-text as text link (#1382)

WEB-2249

Author: atabel

css/mistica-common.css

@@ -232,12 +232,6 @@
     line-height: var(--mistica-line-height-tabsLabel);
     font-weight: var(--mistica-font-weight-tabsLabel);
 }
-.mistica-text-link {
-    font-size: var(--mistica-font-size-link);
-    line-height: var(--mistica-line-height-link);
-    font-weight: var(--mistica-font-weight-link);
-    -webkit-tap-highlight-color: transparent;
-}
 .mistica-text-title1 {
     color: var(--vcolor-textSecondary);
     text-transform: uppercase;
@@ -484,7 +478,8 @@ label.mistica-chip > input:checked + span {
 
 /* TextLink */
 
-.mistica-text-link {
+.mistica-text-link,
+[class^='mistica-text'] a {
     color: var(--vcolor-textLink);
     font-weight: inherit;
     font-size: inherit;
@@ -495,14 +490,18 @@ label.mistica-chip > input:checked + span {
 }
 
 @media (pointer: fine) {
-    .mistica-text-link:hover:not([disabled]) {
+    .mistica-text-link:hover:not([disabled]),
+    [class^='mistica-text'] a:hover:not([disabled]) {
         text-decoration-thickness: 0.125em;
     }
 }
 
-.mistica-text-link[disabled] {
+.mistica-text-link[disabled],
+[class^='mistica-text'] a[disabled] {
     opacity: 0.5;
     text-decoration: none;
+    cursor: default;
+    pointer-events: none;
 }
 
 /* Breadcrumbs */

examples/css/index.html

@@ -70,7 +70,10 @@ <h1 class="mistica-text-title4">Title 4</h1>
                 <h3 class="mistica-text-title2">TextLink</h3>
                 <p class="mistica-text-2">
                     This is an example of <a class="mistica-text-link" href="#">text link</a> inside text2 and
-                    this is a <a class="mistica-text-link" href="#" disabled>disabled text link</a> too.
+                    this is a <a class="mistica-text-link" href="#" disabled>disabled text link</a> too. You
+                    don't need to add any extra class to &lt;a&gt; elements to make them look like mistica
+                    text links, just put the &lt;a&gt; element inside a .mistica-text-X ancestor. For example,
+                    this is a <a href="#">text link</a> too.
                 </p>
 
                 <h3 class="mistica-text-title2">Boxed</h3>