diff --git a/services/web/frontend/stylesheets/bootstrap-5/foundations/elevation.scss b/services/web/frontend/stylesheets/bootstrap-5/foundations/elevation.scss index 938e365b58..c507cb3e64 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/foundations/elevation.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/foundations/elevation.scss @@ -5,11 +5,12 @@ // Tooltips, Callouts, Dropdowns, etc. @mixin shadow-md { - box-shadow: 0px 4px 24px rgba(30, 37, 48, 0.12), 0px 1px 4px rgba(30, 37, 48, 0.08); + box-shadow: 0px 4px 24px rgba(30, 37, 48, 0.12), + 0px 1px 4px rgba(30, 37, 48, 0.08); } // Modals, drawers @mixin shadow-lg { - box-shadow: 0px 8px 24px rgba(30, 37, 48, 0.16), 0px 4px 8px rgba(30, 37, 48, 0.16); + box-shadow: 0px 8px 24px rgba(30, 37, 48, 0.16), + 0px 4px 8px rgba(30, 37, 48, 0.16); } - diff --git a/services/web/frontend/stylesheets/bootstrap-5/main-light-style.scss b/services/web/frontend/stylesheets/bootstrap-5/main-light-style.scss index 3e1a6529f4..294c73bdad 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/main-light-style.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/main-light-style.scss @@ -1,4 +1,4 @@ @import 'main-style'; @import 'css-variables/themes/light'; -$is-overleaf-light: true +$is-overleaf-light: true; diff --git a/services/web/frontend/stylesheets/bootstrap-5/scss/bootstrap-rule-overrides/buttons.scss b/services/web/frontend/stylesheets/bootstrap-5/scss/bootstrap-rule-overrides/buttons.scss index 18d510c3a6..13ead4ad98 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/scss/bootstrap-rule-overrides/buttons.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/scss/bootstrap-rule-overrides/buttons.scss @@ -1,4 +1,9 @@ -@mixin ol-button-size($font-size, $line-height, $padding-y, $padding-x: var(--spacing-06)) { +@mixin ol-button-size( + $font-size, + $line-height, + $padding-y, + $padding-x: var(--spacing-06) +) { --bs-btn-font-size: #{$font-size}; --bs-btn-line-height: #{$line-height}; --bs-btn-padding-y: #{$padding-y}; @@ -48,14 +53,14 @@ @include ol-button-size( $font-size: var(--font-size-03), $line-height: var(--line-height-03), - $padding-y: var(--spacing-03), + $padding-y: var(--spacing-03) ); &.btn-lg { @include ol-button-size( $font-size: var(--font-size-03), $line-height: var(--line-height-03), - $padding-y: var(--spacing-05), + $padding-y: var(--spacing-05) ); } @@ -64,7 +69,7 @@ $font-size: var(--font-size-02), $line-height: var(--line-height-02), $padding-y: var(--spacing-01), - $padding-x: var(--spacing-05), + $padding-x: var(--spacing-05) ); } @@ -74,7 +79,7 @@ $color: var(--content-primary-dark), $background: var(--bg-accent-01), $hover-background: var(--bg-accent-02), - $hover-border: var(--bg-accent-02), + $hover-border: var(--bg-accent-02) ); } @@ -85,7 +90,7 @@ $border: var(--border-primary), $hover-background: var(--bg-light-tertiary), $hover-border: var(--border-primary), - $borderless: false, + $borderless: false ); } @@ -93,8 +98,8 @@ @include ol-button-variant( $color: var(--content-primary), $background: var(--bg-light-primary), - $hover-background: var(--bg-light-tertiary), - ) + $hover-background: var(--bg-light-tertiary) + ); } &.btn-danger { @@ -102,22 +107,22 @@ $color: var(--content-primary-dark), $background: var(--bg-danger-01), $border: var(--bg-danger-01), - $hover-background: var(--bg-danger-02), - ) + $hover-background: var(--bg-danger-02) + ); } &.btn-danger-ghost { @include ol-button-variant( $color: var(--content-danger), $background: var(--bg-light-primary), - $hover-background: var(--bg-danger-03), - ) + $hover-background: var(--bg-danger-03) + ); } &.btn-premium { @include ol-button-variant( $color: var(--content-primary-dark), - $background: var(--blue-70), + $background: var(--blue-70) ); background: var(--premium-gradient); } diff --git a/services/web/frontend/stylesheets/bootstrap-5/scss/components/dropdown-menu.scss b/services/web/frontend/stylesheets/bootstrap-5/scss/components/dropdown-menu.scss index 4f55eb5bcd..8706cbcdee 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/scss/components/dropdown-menu.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/scss/components/dropdown-menu.scss @@ -32,7 +32,7 @@ color: inherit; } - &[variant="danger"] { + &[variant='danger'] { color: var(--content-danger); &:hover:not(.active) { @@ -76,7 +76,7 @@ // description text should look disabled when the dropdown item is disabled .dropdown-item.disabled .dropdown-item-description, -.dropdown-item[aria-disabled="true"] .dropdown-item-description { +.dropdown-item[aria-disabled='true'] .dropdown-item-description { background-color: transparent; color: var(--content-disabled); } @@ -93,14 +93,16 @@ padding-right: var(--spacing-05); padding-left: var(--spacing-05); - &.btn-primary, &.btn-danger { + &.btn-primary, + &.btn-danger { border-left: 1px solid rgb($neutral-90, 0.16); } &.btn-secondary { border-left: 1px solid var(--neutral-60); } - &[disabled], &[aria-disabled="true"] { + &[disabled], + &[aria-disabled='true'] { border-left: 1px solid var(--neutral-10); } } diff --git a/services/web/package.json b/services/web/package.json index 2163d112fe..b563a4f7f0 100644 --- a/services/web/package.json +++ b/services/web/package.json @@ -22,8 +22,8 @@ "webpack:profile": "webpack --config webpack.config.prod.js --profile --json > stats.json", "format": "prettier --list-different $PWD/'**/*.{js,jsx,mjs,ts,tsx,json}'", "format:fix": "prettier --write $PWD/'**/*.{js,jsx,mjs,ts,tsx,json}'", - "format:styles": "prettier --list-different $PWD/'**/*.{css,less}'", - "format:styles:fix": "prettier --write $PWD/'**/*.{css,less}'", + "format:styles": "prettier --list-different $PWD/'**/*.{css,less,scss}'", + "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 .", "type-check": "tsc --noEmit",