Issue #3209954 by agami4: Improve links behavior on the description/body sections

assets/css/base.css

@@ -58,6 +58,56 @@ pre {
   border-radius: 10px;
 }
 
+.field--name-field-introduction-text a:not(.btn),
+.field--name-field-featured-items-description a:not(.btn),
+.field--name-field-featured-description a:not(.btn),
+.field--name-field-accord-description a:not(.btn),
+.field--name-field-accord-item-description a:not(.btn),
+.paragraph--type--image-text .field--name-field-text a:not(.btn),
+.paragraph--type--text-image .field--name-field-text a:not(.btn),
+.paragraph--type--text .field--name-field-text a:not(.btn),
+.course-full .card__body p a:not(.btn),
+.teaser--course p a:not(.btn),
+.comment__text p a:not(.btn),
+.body-text a:not(.btn),
+.block--intro-text .block--intro-text__content a:not(.btn),
+.basic-block .field--name-field-text-block a:not(.btn),
+.hero--dashboard .field--name-field-text-block a:not(.btn) {
+  text-decoration: underline;
+}
+
+.field--name-field-introduction-text a:not(.btn):hover, .field--name-field-introduction-text a:not(.btn):focus,
+.field--name-field-featured-items-description a:not(.btn):hover,
+.field--name-field-featured-items-description a:not(.btn):focus,
+.field--name-field-featured-description a:not(.btn):hover,
+.field--name-field-featured-description a:not(.btn):focus,
+.field--name-field-accord-description a:not(.btn):hover,
+.field--name-field-accord-description a:not(.btn):focus,
+.field--name-field-accord-item-description a:not(.btn):hover,
+.field--name-field-accord-item-description a:not(.btn):focus,
+.paragraph--type--image-text .field--name-field-text a:not(.btn):hover,
+.paragraph--type--image-text .field--name-field-text a:not(.btn):focus,
+.paragraph--type--text-image .field--name-field-text a:not(.btn):hover,
+.paragraph--type--text-image .field--name-field-text a:not(.btn):focus,
+.paragraph--type--text .field--name-field-text a:not(.btn):hover,
+.paragraph--type--text .field--name-field-text a:not(.btn):focus,
+.course-full .card__body p a:not(.btn):hover,
+.course-full .card__body p a:not(.btn):focus,
+.teaser--course p a:not(.btn):hover,
+.teaser--course p a:not(.btn):focus,
+.comment__text p a:not(.btn):hover,
+.comment__text p a:not(.btn):focus,
+.body-text a:not(.btn):hover,
+.body-text a:not(.btn):focus,
+.block--intro-text .block--intro-text__content a:not(.btn):hover,
+.block--intro-text .block--intro-text__content a:not(.btn):focus,
+.basic-block .field--name-field-text-block a:not(.btn):hover,
+.basic-block .field--name-field-text-block a:not(.btn):focus,
+.hero--dashboard .field--name-field-text-block a:not(.btn):hover,
+.hero--dashboard .field--name-field-text-block a:not(.btn):focus {
+  text-decoration: none;
+}
+
 blockquote {
   border-left: 3px solid #29abe2;
 }

assets/css/brand.css

@@ -208,17 +208,20 @@ fieldset[disabled] .btn-accent.focus {
 }
 
 .field--name-field-introduction-text a:not(.btn),
-.field--name-field-introduction-text a:not(.btn):hover,
 .field--name-field-featured-items-description a:not(.btn),
-.field--name-field-featured-items-description a:not(.btn):hover,
 .field--name-field-featured-description a:not(.btn),
-.field--name-field-featured-description a:not(.btn):hover,
 .field--name-field-accord-description a:not(.btn),
-.field--name-field-accord-description a:not(.btn):hover,
-.field--name-field-text a:not(.btn),
-.field--name-field-text a:not(.btn):hover,
+.field--name-field-accord-item-description a:not(.btn),
+.paragraph--type--image-text .field--name-field-text a,
+.paragraph--type--text-image .field--name-field-text a,
+.paragraph--type--text .field--name-field-text a,
+.course-full .card__body p a,
+.teaser--course p a,
+.comment__text p a:not(.btn),
 .body-text a:not(.btn),
-.body-text a:not(.btn):hover {
+.block--intro-text .block--intro-text__content a,
+.basic-block .field--name-field-text-block a,
+.hero--dashboard .field--name-field-text-block a {
   color: #33b5e5;
 }
 

assets/css/page-node.css

-.field--name-field-introduction-text a:not(.btn),
-.field--name-field-featured-items-description a:not(.btn),
-.field--name-field-featured-description a:not(.btn),
-.field--name-field-accord-description a:not(.btn),
-.field--name-field-text a:not(.btn),
-.body-text a:not(.btn) {
-  text-decoration: underline;
-  color: #33b5e5;
-}
-
-.field--name-field-introduction-text a:not(.btn):hover,
-.field--name-field-featured-items-description a:not(.btn):hover,
-.field--name-field-featured-description a:not(.btn):hover,
-.field--name-field-accord-description a:not(.btn):hover,
-.field--name-field-text a:not(.btn):hover,
-.body-text a:not(.btn):hover {
-  color: #178ab4;
-}

components/00-config/variables/_colors.scss

@@ -92,6 +92,8 @@ $brand-danger:          #d9534f;
 
 $brand-primary-dark:    mix($gray-base, $brand-primary, 30%);
 
+$brand-link:            #33b5e5;
+
 $state-success-text:    #3c763d;
 $state-success-bg:      #dff0d8;
 $state-success-border:  darken(adjust-hue($state-success-bg, -10), 5%);

components/01-base/base.scss

@@ -2,6 +2,7 @@
 
 @import 'text/fonts';
 @import 'code/code';
+@import 'links/links';
 @import 'text/text';
 @import 'root/root';
 @import 'tables/tables';

components/05-templates/page-node/page-node.scss → components/01-base/links/_links.scss

-@import "settings";
-
 .field--name-field-introduction-text,
 .field--name-field-featured-items-description,
 .field--name-field-featured-description,
 .field--name-field-accord-description,
-.field--name-field-text,
-.body-text {
+.field--name-field-accord-item-description,
+.paragraph--type--image-text .field--name-field-text,
+.paragraph--type--text-image .field--name-field-text,
+.paragraph--type--text .field--name-field-text,
+.course-full .card__body p,
+.teaser--course p,
+.comment__text p,
+.body-text,
+.block--intro-text .block--intro-text__content,
+.basic-block .field--name-field-text-block,
+.hero--dashboard .field--name-field-text-block {
 
   a:not(.btn) {
     text-decoration: underline;
-    color: $link-color;
 
-    &:hover {
-      color: $link-hover-color;
+    &:hover,
+    &:focus {
+      text-decoration: none;
     }
   }
-
 }

components/brand.scss

@@ -216,18 +216,21 @@
 }
 
 .field--name-field-introduction-text a:not(.btn),
-.field--name-field-introduction-text a:not(.btn):hover,
 .field--name-field-featured-items-description a:not(.btn),
-.field--name-field-featured-items-description a:not(.btn):hover,
 .field--name-field-featured-description a:not(.btn),
-.field--name-field-featured-description a:not(.btn):hover,
 .field--name-field-accord-description a:not(.btn),
-.field--name-field-accord-description a:not(.btn):hover,
-.field--name-field-text a:not(.btn),
-.field--name-field-text a:not(.btn):hover,
+.field--name-field-accord-item-description a:not(.btn),
+.paragraph--type--image-text .field--name-field-text a,
+.paragraph--type--text-image .field--name-field-text a,
+.paragraph--type--text .field--name-field-text a,
+.course-full .card__body p a,
+.teaser--course p a,
+.comment__text p a:not(.btn),
 .body-text a:not(.btn),
-.body-text a:not(.btn):hover {
-  color: #33b5e5;
+.block--intro-text .block--intro-text__content a,
+.basic-block .field--name-field-text-block a,
+.hero--dashboard .field--name-field-text-block a {
+  color: $brand-link;
 }
 
 blockquote {

socialblue.info.yml

@@ -82,8 +82,6 @@ libraries-extend:
     - socialblue/offcanvas
   socialbase/stream:
     - socialblue/stream
-  socialbase/page-node:
-    - socialblue/page-node
   socialbase/layout:
     - socialblue/layout
 

socialblue.libraries.yml

@@ -202,11 +202,6 @@ site-footer:
       assets/css/site-footer.css: {}
 
 ### 2.4 Templates
-page-node:
-  css:
-    component:
-      assets/css/page-node.css: {}
-
 layout:
   css:
     component: