fix: focus on link and card title links (#536)

* fix: focus on link and card title links * fix: link in cardWithImageAndInEvidence * fix: link as button in cms ui * fix: use display-block only more specific
RedTurtle · Feb 15, 2024 · 707b6ca · 707b6ca
1 parent f3bb7a4
commit 707b6ca
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 16 deletions.
diff --git a/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss b/src/theme/ItaliaTheme/Blocks/_cardWithImageAndInEvidence.scss
@@ -11,7 +11,7 @@
 
   .listing-item {
     a {
-      display: inline;
+      display: inline-block;
     }
 
     .img-responsive-wrapper {
@@ -70,7 +70,7 @@
 
     .card-title {
       a {
-        display: inline;
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
         width: initial;
         color: $body-color;
         text-decoration: none;

diff --git a/src/theme/ItaliaTheme/Blocks/_contentInEvidenceTemplate.scss b/src/theme/ItaliaTheme/Blocks/_contentInEvidenceTemplate.scss
@@ -8,6 +8,7 @@
 
     .card-title {
       a {
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
         font-size: 1.7rem;
         line-height: 2.3rem;
         text-decoration: none;

diff --git a/src/theme/ItaliaTheme/Blocks/_highlitedContent.scss b/src/theme/ItaliaTheme/Blocks/_highlitedContent.scss
@@ -17,6 +17,8 @@
 
   .card-title {
     a {
+      display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
+      color: $link-color;
       font-size: 1.7rem;
       line-height: 2.3rem;
       text-decoration: none;

diff --git a/src/theme/ItaliaTheme/Blocks/_ribbonCardTemplate.scss b/src/theme/ItaliaTheme/Blocks/_ribbonCardTemplate.scss
@@ -26,6 +26,7 @@
 
       a {
         text-decoration: none;
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
 
         &:hover {
           text-decoration: underline;

diff --git a/src/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss b/src/theme/ItaliaTheme/Blocks/_simpleCardTemplate.scss
@@ -36,13 +36,12 @@
 
     .card-body {
       a {
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
         &:link,
         &:visited {
           text-decoration: none;
         }
-      }
 
-      a {
         &:hover,
         &:active {
           text-decoration: underline;
@@ -56,6 +55,7 @@
           @include rem-size(font-size, 24);
           @include rem-size(line-height, 26);
           font-weight: 700;
+          display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
 
           &:hover,
           &:active {
@@ -130,6 +130,7 @@
         @include rem-size(line-height, 32);
         font-weight: 700;
         text-decoration: none;
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
 
         &:hover,
         &:active {

diff --git a/src/theme/ItaliaTheme/Components/_card.scss b/src/theme/ItaliaTheme/Components/_card.scss
@@ -14,6 +14,12 @@
   border-left: 8px solid $primary-a0;
   box-shadow: 0px 4px 4px 0px #00000026;
 
+  .card-title {
+    a {
+      display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
+    }
+  }
+
   &.card-small {
     @include rem-size(line-height, 24);
 
@@ -82,6 +88,10 @@
       margin-bottom: 0.3em !important;
       font-weight: 600;
 
+      a {
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
+      }
+
       a,
       &.venue-card-title.venue-card-title {
         @include rem-size(font-size, 24);
@@ -108,6 +118,7 @@
     h5.card-title {
       a {
         @include rem-size(font-size, 18);
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
         text-decoration: none;
         text-transform: none;
       }
@@ -141,6 +152,7 @@
         @include rem-size(line-height, 24);
         font-weight: 600;
         text-decoration: none;
+        display: inline-block; //per avere il bordo tutto unito al focus di un link, ad esempio nelle card
       }
 
       a:hover {
@@ -154,17 +166,6 @@
   }
 }
 
-.block.highlitedContent {
-  div.card {
-    h2.card-title {
-      a {
-        color: $link-color;
-        font-size: 1.7rem;
-      }
-    }
-  }
-}
-
 .block.listing.simpleCard {
   @include media-breakpoint-down(xl) {
     .card {

diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss
@@ -109,7 +109,7 @@ body.cms-ui {
   }
 
   .public-ui {
-    a {
+    a:not(.btn) {
       color: $link-color;
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -109,7 +109,7 @@ body.cms-ui { @@
       }
       .public-ui {
-        a {
+        a:not(.btn) {
           color: $link-color;
         }
       }
@@ Expand Down @@