{t('loading')}...
diff --git a/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx b/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
index c211121417..deba540706 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx
@@ -127,7 +127,7 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
role={undefined}
className={classnames({
active: selectedItem?.name === item.name,
- 'dropdown-item--highlighted': highlightedIndex === index,
+ 'dropdown-item-highlighted': highlightedIndex === index,
})}
trailingIcon={
selectedItem?.name === item.name ? 'check' : undefined
diff --git a/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx b/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
index c1002073a0..1ef4372a5e 100644
--- a/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx
@@ -12,7 +12,7 @@ type LayoutProps = {
function Layout({ isError, error, children }: LayoutProps) {
return (
-
+
{children}
{isError && (
diff --git a/services/web/frontend/stylesheets/app/account-settings.less b/services/web/frontend/stylesheets/app/account-settings.less
index fd545f9dfb..6c19429ca8 100644
--- a/services/web/frontend/stylesheets/app/account-settings.less
+++ b/services/web/frontend/stylesheets/app/account-settings.less
@@ -32,7 +32,7 @@
padding-left: @margin-sm;
border-left: 2px solid @table-border-color; // don't migrate this line of style
}
-.affiliations-table-row--highlighted {
+.affiliations-table-row-highlighted {
background-color: tint(@content-alt-bg-color, 6%);
}
.affiliations-table-email {
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
index c581822cac..057801b645 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
@@ -56,9 +56,11 @@
@mixin modal-lg {
max-width: 960px;
}
+
@mixin modal-md {
max-width: 640px;
}
+
@mixin modal-sm {
max-width: 480px;
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
index 44cb18a353..8de10a44e8 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
@@ -3,7 +3,6 @@
$prefix: bs-;
// Options
-//
// Quickly modify global styling by enabling or disabling optional features.
$enable-validation-icons: false;
@@ -17,7 +16,6 @@ $font-size-sm: var(--font-size-02);
$line-height-base: 1.5;
// Components
-//
// Define common padding and border radius sizes and more.
$focus-ring-width: 2px;
@@ -40,25 +38,17 @@ $table-cell-padding-y: $spacing-04;
$table-cell-padding-x: $spacing-04;
$table-cell-padding-y-sm: $spacing-02;
$table-cell-padding-x-sm: $spacing-02;
-
$table-color: var(--content-secondary);
$table-bg: var(--bg-light-primary);
-
$table-th-font-weight: 600;
-
$table-striped-color: $table-color;
$table-striped-bg: var(--bg-light-secondary);
-
$table-active-color: $table-color;
$table-active-bg: $bg-accent-03;
-
$table-hover-color: $table-color;
$table-hover-bg: var(--bg-light-tertiary);
-
$table-border-color: $border-divider;
-
$table-striped-order: even;
-
$table-caption-color: var(--content-secondary);
// Forms
@@ -88,25 +78,19 @@ $input-line-height-sm: 1.25; // equivalent of var(--line-height-02) - BS expects
$input-padding-y-lg: $spacing-05;
$input-padding-x-lg: $spacing-05;
$input-font-size-lg: var(--font-size-03);
-
$input-bg: $bg-light-primary;
$input-disabled-color: var(--content-disabled);
$input-disabled-bg: $bg-light-disabled;
$input-disabled-border-color: var(--border-disabled);
-
$input-color: $content-primary;
$input-border-color: $neutral-60;
$input-border-width: var(--bs-border-width);
-
$input-border-radius: $border-radius-base;
$input-border-radius-sm: $border-radius-base;
$input-border-radius-lg: $border-radius-base;
-
$input-focus-border-color: var(--border-active);
-
$input-placeholder-color: var(--content-placeholder);
$input-plaintext-color: $content-primary;
-
$input-height-border: calc(
#{$input-border-width} * 2
); // stylelint-disable-line function-disallowed-list
@@ -126,11 +110,9 @@ $input-height-lg: add(
// form-check-variables
$form-check-label-color: var(--content-primary);
-
$form-check-input-border: var(--bs-border-width) solid var(--border-primary);
$form-check-input-border-radius: $border-radius-base;
$form-check-input-focus-border: var(--border-primary);
-
$form-check-input-disabled-opacity: 1;
// Form validation
@@ -155,6 +137,7 @@ $form-validation-states: (
'border-color': var(--#{$prefix}form-invalid-border-color),
),
);
+
// Close buttons
$btn-close-color: $content-primary;
$btn-close-opacity: 1;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
index f6c0fa999d..ab294d833a 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
@@ -20,7 +20,6 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
-
padding: 0 $spacing-02;
margin: 0 (-$spacing-02) 0 $spacing-02;
border-top-right-radius: inherit;
@@ -39,11 +38,13 @@
.badge-content {
@include text-truncate;
+
padding: var(--bs-badge-padding-y) 0;
}
.badge-tag {
@include body-sm;
+
color: $dark;
&:hover {
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
index 73af656924..812bf430d3 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
@@ -86,6 +86,7 @@
background: var(--premium-gradient);
transition: none;
+
&:hover {
background: var(--blue-70);
}
@@ -109,8 +110,10 @@
&[disabled],
fieldset[disabled] & {
background-color: transparent;
+
@include box-shadow(none);
}
+
&:hover,
&:focus {
color: var(--link-ui-hover);
@@ -120,11 +123,13 @@
&.btn-danger {
color: var(--content-danger);
- //since it's a link, override the button states
+
+ // since it's a link, override the button states
&:active {
color: var(--content-danger);
background-color: transparent;
}
+
&:focus-visible {
background-color: transparent;
outline: -webkit-focus-ring-color auto 1px;
@@ -134,6 +139,7 @@
.btn-inline-link {
@extend .btn-link;
+
font-size: inherit;
padding: 0;
vertical-align: inherit;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
index 9d0a8ac0f2..af707b494f 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
@@ -147,6 +147,6 @@
overflow-x: hidden;
}
-.dropdown-item--highlighted {
+.dropdown-item-highlighted {
background-color: var(--bg-light-secondary);
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss b/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
index a262f18ae4..6104b513b8 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
footer.site-footer {
background-color: var(--bg-light-primary);
border-top: 1px solid var(--border-primary-dark);
@@ -23,7 +25,7 @@ footer.site-footer {
}
}
- li.lngOption {
+ li.lng-option {
text-align: left;
display: list-item;
@@ -224,7 +226,7 @@ footer.site-footer {
@include media-breakpoint-up(md) {
.fat-footer-container {
- width: (map-get($grid-breakpoints, 'md') - ($spacing-04 * 2));
+ width: (map.get($grid-breakpoints, 'md') - ($spacing-04 * 2));
}
#footer-brand {
@@ -270,7 +272,7 @@ footer.site-footer {
@include media-breakpoint-up(lg) {
.fat-footer-container {
- width: (map-get($grid-breakpoints, 'lg') - $spacing-07);
+ width: (map.get($grid-breakpoints, 'lg') - $spacing-07);
}
.fat-footer-sections {
@@ -280,7 +282,7 @@ footer.site-footer {
@include media-breakpoint-up(xl) {
.fat-footer-container {
- width: (map-get($grid-breakpoints, 'xl') - $spacing-09);
+ width: (map.get($grid-breakpoints, 'xl') - $spacing-09);
}
.fat-footer-sections {
@@ -305,7 +307,7 @@ footer.site-footer {
z-index: 100;
color: var(--content-secondary);
background: var(--bg-light-secondary);
- box-shadow: 0px -5px 8px 0px #0000001a;
+ box-shadow: 0 -5px 8px 0 #0000001a;
.cookie-banner-actions {
padding-top: var(--spacing-04);
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
index 7e786cd56a..72ffec6cbf 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
@@ -2,9 +2,11 @@
@function form-check-box-svg($color) {
@return url("data:image/svg+xml,");
}
+
@function form-check-radio-svg($color) {
@return url("data:image/svg+xml,");
}
+
@function form-check-indeterminate-svg($color) {
@return url("data:image/svg+xml,");
}
@@ -115,9 +117,12 @@
.form-control-start-icon {
left: 0;
+ padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width));
}
+
.form-control-end-icon {
right: 0;
+ padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));
}
--icon-width: 20px;
@@ -134,14 +139,6 @@
--form-control-icon-offset-y: var(--spacing-05);
}
- .form-control-start-icon {
- padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width));
- }
-
- .form-control-end-icon {
- padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));
- }
-
.form-control-offset-start {
padding-left: calc(
var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss b/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss
index 66f08e218d..d57a9fe5e1 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss
@@ -4,28 +4,29 @@
@include media-breakpoint-up(sm) {
.modal-dialog {
- @include modal-md();
+ @include modal-md;
}
.modal-sm {
- @include modal-sm();
+ @include modal-sm;
}
}
@include media-breakpoint-up(md) {
.modal-md {
- @include modal-md();
+ @include modal-md;
}
}
@include media-breakpoint-up(lg) {
.modal-lg {
- @include modal-lg();
+ @include modal-lg;
}
}
.modal-content {
- @include shadow-lg();
+ @include shadow-lg;
+
border-radius: var(--border-radius-base);
.modal-header {
@@ -34,6 +35,7 @@
line-height: 35px;
}
+
.btn-close {
margin-right: 0;
}
@@ -42,6 +44,7 @@
.modal-footer {
padding: var(--spacing-06);
gap: var(--spacing-04);
+
> * {
margin: 0;
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/nav.scss b/services/web/frontend/stylesheets/bootstrap-5/components/nav.scss
index 40bcfce6e4..aad874fe04 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/nav.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/nav.scss
@@ -3,15 +3,12 @@
:root {
// Basics
--navbar-item-spacing-horizontal: var(--spacing-06);
-
--navbar-bg: var(--bg-dark-primary);
--navbar-border: transparent;
-
--navbar-padding-h: var(--spacing-05);
--navbar-padding: 0 var(--navbar-padding-h);
-
--navbar-brand-width: 130px;
- --navbar-brand-image-url: url(../../../../public/img/ol-brand/overleaf-white.svg);
+ --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-white.svg');
// Title, when used instead of a logo
--navbar-title-font-size: var(--font-size-05);
@@ -39,7 +36,6 @@
// Links
--navbar-link-color: var(--white);
--navbar-link-border-color: var(--navbar-link-color);
-
--navbar-link-hover-color: var(--white);
--navbar-link-hover-bg: var(--green-50);
--navbar-link-hover-border-color: var(--navbar-link-hover-bg);
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss b/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss
index 196b7df7b6..2e6cc0452a 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss
@@ -139,8 +139,8 @@
// Dropdowns get custom display when collapsed
.dropdown-menu.show {
--bs-dropdown-spacer: 0;
- box-shadow: none;
+ box-shadow: none;
background-color: var(--navbar-hamburger-submenu-bg);
width: auto;
@@ -191,19 +191,15 @@
.website-redesign-navbar {
--navbar-title-color: var(--content-primary);
--navbar-title-color-hover: var(--content-secondary);
-
- --navbar-brand-image-url: url(../../../../public/img/ol-brand/overleaf-black.svg);
-
+ --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-black.svg');
--navbar-subdued-color: var(--content-primary);
--navbar-subdued-hover-bg: var(--bg-dark-primary);
--navbar-subdued-hover-color: var(--content-primary-dark);
-
--navbar-bg: var(--bg-light-primary);
// Navbar links
--navbar-link-color: var(--content-primary);
--navbar-link-border-color: var(--border-primary);
-
--navbar-link-hover-color: var(--navbar-link-color);
--navbar-link-hover-bg: var(--bg-light-tertiary);
--navbar-link-hover-border-color: var(--navbar-link-border-color);
diff --git a/services/web/frontend/stylesheets/bootstrap-5/helpers/visually-hidden.scss b/services/web/frontend/stylesheets/bootstrap-5/helpers/visually-hidden.scss
index b95f745c6d..caf0eac423 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/helpers/visually-hidden.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/helpers/visually-hidden.scss
@@ -1,5 +1,5 @@
.visually-hidden-max-md {
@include media-breakpoint-down(md) {
- @include visually-hidden();
+ @include visually-hidden;
}
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss
index 2cd2a2d821..611c663e45 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss
@@ -12,7 +12,7 @@
padding-left: var(--spacing-04);
}
-.affiliations-table-row--highlighted {
+.affiliations-table-row-highlighted {
background-color: var(--bg-light-secondary);
}
@@ -38,17 +38,21 @@
font-size: 1.3em;
line-height: 1.3em;
vertical-align: top;
+
&.status-error,
&.dropbox-sync-icon-error {
color: var(--bg-danger-01);
}
+
&.status-success,
&.dropbox-sync-icon-success {
color: var(--content-positive);
}
+
&.status-pending,
&.dropbox-sync-icon-updating {
color: var(--bg-info-01);
+
&::after {
content: '\f021';
position: absolute;
@@ -175,6 +179,7 @@
.status-label {
@include body-sm;
+
border-radius: var(--border-radius-base);
padding: var(--spacing-01) var(--spacing-02);
margin-top: var(--spacing-02);
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
index 600c02fc12..b4398921db 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss
@@ -589,6 +589,7 @@
}
}
+/* stylelint-disable selector-class-pattern */
.project-list-upload-project-modal-uppy-dashboard .uppy-Root {
.uppy-Dashboard-AddFiles-title {
display: flex;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/sidebar-v2-dash-pane.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/sidebar-v2-dash-pane.scss
index d5236f586d..c325a3febb 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/sidebar-v2-dash-pane.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/sidebar-v2-dash-pane.scss
@@ -1,5 +1,6 @@
.project-list-sidebar-survey-link {
@extend .text-white;
+
font-weight: bold;
}
@@ -7,6 +8,7 @@
&:hover {
background-color: transparent !important;
}
+
&:focus {
background-color: transparent !important;
}
diff --git a/services/web/frontend/stylesheets/components/footer.less b/services/web/frontend/stylesheets/components/footer.less
index b49e4415d8..e00e574e27 100644
--- a/services/web/frontend/stylesheets/components/footer.less
+++ b/services/web/frontend/stylesheets/components/footer.less
@@ -19,7 +19,7 @@ footer.site-footer {
font-size: 1.2rem;
}
}
- li.lngOption {
+ li.lng-option {
text-align: left;
display: list-item;
diff --git a/services/web/package.json b/services/web/package.json
index 15d873b6ee..a52bbcf048 100644
--- a/services/web/package.json
+++ b/services/web/package.json
@@ -26,8 +26,8 @@
"format:styles:fix": "prettier --write $PWD/'**/*.{css,less,scss}'",
"lint": "eslint --max-warnings 0 --format unix --ext .js,.jsx,.mjs,.ts,.tsx .",
"lint:fix": "eslint --fix --ext .js,.jsx,.mjs,.ts,.tsx .",
- "stylelint": "stylelint '**/*.scss'",
- "stylelint:fix": "stylelint '**/*.scss' --fix",
+ "lint:styles": "stylelint '**/*.scss'",
+ "lint:styles:fix": "stylelint '**/*.scss' --fix",
"type-check": "tsc --noEmit",
"extract-translations": "i18next-scanner",
"migrations": "MONGO_SOCKET_TIMEOUT=0 east",