Contents

// Links

.Link {
  color: var(--color-text-link);

  &:hover {
    text-decoration: underline;
    cursor: pointer;
  }
}

.Link--primary {
  color: var(--color-text-primary) !important;

  &:hover {
    color: var(--color-text-link) !important;
  }
}

.Link--secondary {
  color: var(--color-text-secondary) !important;

  &:hover {
    color: var(--color-text-link) !important;
  }
}

.Link--muted {
  color: var(--color-text-secondary) !important;

  &:hover {
    color: var(--color-text-link) !important;
    text-decoration: none;
  }
}

// Set the link color only on hover
// Useful when you want only part of a link to turn blue on hover
.Link--onHover {
  &:hover {
    color: var(--color-text-link) !important;
    text-decoration: underline;
    cursor: pointer;
  }
}

// When using a color utility class inside of a link class,
// color should change with link on hover.
.Link--secondary,
.Link--primary,
.Link--muted {
  &:hover [class*="color-text"] {
    color: inherit !important;
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
primery-0.1.0	_sass/@primer/css/links/link.scss