fix: link style tag and width property (#962)

* fix: link style tag and width property * fix: color mixin issues
Brisanet · Nov 29, 2023 · b0af746 · b0af746
1 parent ba681c5
commit b0af746
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 20 deletions.
diff --git a/projects/ion/src/lib/link/link.component.html b/projects/ion/src/lib/link/link.component.html
@@ -1,4 +1,4 @@
-<span style="font-size: 80px" [class.link-container]="disabled">
+<span [class.link-container]="disabled">
   <a
     data-testid="ion-link"
     class="ion-link"

diff --git a/projects/ion/src/lib/link/link.component.scss b/projects/ion/src/lib/link/link.component.scss
@@ -7,7 +7,6 @@
 
 @mixin colors($color) {
   color: $color;
-  border-color: $color;
 
   ion-icon {
     ::ng-deep svg {
@@ -22,20 +21,15 @@
 
 .ion-link {
   text-decoration: none;
-  color: $primary-5;
 
   display: flex;
   align-items: center;
   gap: spacing(0.5);
   box-sizing: border-box;
-  max-width: min-content;
+  max-width: max-content;
   border-bottom: 1px solid transparent;
 
-  ion-icon {
-    ::ng-deep svg {
-      fill: $primary-5;
-    }
-  }
+  @include colors($primary-5);
 
   &__label {
     font-weight: 400;
@@ -55,26 +49,22 @@
   }
 
   &:hover {
-    border-bottom: 1px solid;
     @include colors($primary-4);
+    border-color: $primary-4;
   }
 
   &:active {
-    border-bottom: 1px solid;
+    @include colors($primary-7);
+    border-color: $primary-7;
   }
 
-  &:visited {
-    color: $primary-7;
-
-    ion-icon {
-      ::ng-deep svg {
-        fill: $primary-7;
-      }
-    }
+  &:visited,
+  &:visited:hover {
+    @include colors($primary-7);
   }
 
   &:visited:hover {
-    @include colors($primary-7);
+    border-color: $primary-7;
   }
 
   &--left-icon {