overleaf/services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
Jessica Lawshe e4b3ee8988 Merge pull request #20508 from overleaf/as-cms-bs5-link-colours
[web] Adjust link behaviour for Website Redesign in BS5

GitOrigin-RevId: d09831de1f51c4e2a9bc06b0c9fd9f4a1909d7f0
2024-09-25 08:06:19 +00:00

217 lines
3.4 KiB
SCSS

// TODO: .website-redesign to be removed once fully rolled out
@mixin reset-font-size($size) {
h1,
h2,
h3,
h4,
h5,
h6,
p {
@if $size == 'heading-2xl' {
@include heading-2xl;
} @else if $size == 'heading-xl' {
@include heading-xl;
} @else if $size == 'heading-lg' {
@include heading-lg;
} @else if $size == 'heading-md' {
@include heading-md;
} @else if $size == 'heading-sm' {
@include heading-sm;
} @else if $size == 'heading-xs' {
@include heading-xs;
} @else if $size == 'base' {
@include body-base;
}
}
}
.website-redesign {
--link-color: var(--link-web);
--link-hover-color: var(--link-web-hover);
--link-visited-color: var(--link-web-visited);
// hero section of features, enterprises, and universities will have an image that will overflow the page
--bs-body-color: var(--neutral-70);
overflow-x: hidden;
a {
&:hover {
text-decoration: underline;
}
&:focus,
&:focus-visible {
outline: 0;
}
&:focus-visible {
@include box-shadow-button-input;
}
i {
vertical-align: middle;
margin-left: var(--spacing-02);
}
&.link-lg {
font-size: var(--font-size-04);
line-height: var(--line-height-03);
i {
font-size: 24px;
line-height: inherit;
}
}
// Specific overrides for link styles
&.link-monospace {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
&.btn:hover {
text-decoration: none;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}
h1,
.h1 {
@include heading-2xl;
}
.font-size-h1 {
@include reset-font-size('heading-2xl');
}
h2,
.h2 {
@include heading-xl;
}
.font-size-h2 {
@include reset-font-size('heading-xl');
}
h3,
.h3 {
@include heading-lg;
}
.font-size-h3 {
@include reset-font-size('heading-lg');
}
h4,
.h4 {
@include heading-md;
}
.font-size-h4 {
@include reset-font-size('heading-md');
}
h5,
.h5 {
@include heading-sm;
}
.font-size-h5 {
@include reset-font-size('heading-sm');
}
h6,
.h6 {
@include heading-xs;
}
.font-size-h6 {
@include reset-font-size('heading-xs');
}
.font-size-base {
@include reset-font-size('base');
}
// smaller fonts for mobile
@include media-breakpoint-down(lg) {
h1,
.h1 {
@include heading-xl;
}
.font-size-h1 {
@include reset-font-size('heading-xl');
}
h2,
.h2 {
@include heading-lg;
}
.font-size-h2 {
@include reset-font-size('heading-lg');
}
h3,
.h3 {
@include heading-md;
}
.font-size-h3 {
@include reset-font-size('heading-md');
}
h4,
.h4 {
@include heading-sm;
}
.font-size-h4 {
@include reset-font-size('heading-sm');
}
h5,
.h5 {
@include heading-xs;
}
.font-size-h5 {
@include reset-font-size('heading-xs');
}
h6,
.h6 {
@include body-base;
}
.font-size-h6 {
@include reset-font-size('base');
}
}
.card {
--bs-card-bg: var(--neutral-10);
--bs-card-border-radius: var(--border-radius-large);
--bs-card-spacer-y: var(--spacing-08);
--bs-card-spacer-x: var(--spacing-08);
}
.badge-premium {
--badge-font-weight: 600;
}
}