Use specific class for news "read more" link

clarin-eric · Nov 22, 2023 · 6c4aeef · 6c4aeef
1 parent 467ed47
commit 6c4aeef
Showing 1 changed file with 41 additions and 44 deletions.
diff --git a/scss/modules/buttons.scss b/scss/modules/buttons.scss
@@ -62,61 +62,58 @@
 }
 
 // btn blue circle arrow
-:not(.btn-blue-circle-arrow) {
-  > .btn-blue-circle-arrow {
-    background: url('../images/arrow-circle-blue.svg') no-repeat right center/40px;
-    color: $body-color;
-    display: inline-table;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 30px;
-    padding: 10px 50px 10px 10px;
-    transition: padding 0.3s;
+.btn-blue-circle-arrow,
+a.news-more-link {
+  background: url('../images/arrow-circle-blue.svg') no-repeat right center/40px;
+  color: $body-color;
+  display: inline-table;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 30px;
+  padding: 10px 50px 10px 10px;
+  transition: padding 0.3s;
 
-    @media (min-width: #{$screen-tablet}) {
-      background-size: 47px;
-      font-size: 18px;
-      padding: 10px 65px 10px 10px;
-    }
+  @media (min-width: #{$screen-tablet}) {
+    background-size: 47px;
+    font-size: 18px;
+    padding: 10px 65px 10px 10px;
+  }
 
-    &:hover,
-    &:focus {
-      padding: 10px 57px 10px 10px;
-      text-decoration: none;
+  &:hover,
+  &:focus {
+    padding: 10px 57px 10px 10px;
+    text-decoration: none;
 
-      @media (min-width: #{$screen-tablet}) {
-        padding: 10px 72px 10px 10px;
-      }
+    @media (min-width: #{$screen-tablet}) {
+      padding: 10px 72px 10px 10px;
     }
   }
 }
 
 // btn white circle arrow
-:not(.btn-white-circle-arrow) {
-  > .btn-white-circle-arrow {
-    background: url('../images/arrow-circle-blue.svg') no-repeat right center/40px;
-    color: $white;
-    display: inline-table;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 30px;
-    padding: 10px 50px 10px 10px;
-    transition: padding 0.3s;
+.btn-white-circle-arrow {
+  background: url('../images/arrow-circle-blue.svg') no-repeat right center/40px;
+  color: $white;
+  display: inline-table;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 30px;
+  padding: 10px 50px 10px 10px;
+  transition: padding 0.3s;
 
-    @media (min-width: #{$screen-tablet}) {
-      background-size: 47px;
-      font-size: 18px;
-      padding: 10px 65px 10px 10px;
-    }
+  @media (min-width: #{$screen-tablet}) {
+    background-size: 47px;
+    font-size: 18px;
+    padding: 10px 65px 10px 10px;
+  }
 
-    &:hover,
-    &:focus {
-      padding: 10px 57px 10px 10px;
-      text-decoration: none;
+  &:hover,
+  &:focus {
+    padding: 10px 57px 10px 10px;
+    text-decoration: none;
 
-      @media (min-width: #{$screen-tablet}) {
-        padding: 10px 72px 10px 10px;
-      }
+    @media (min-width: #{$screen-tablet}) {
+      padding: 10px 72px 10px 10px;
     }
   }
 }