mirror of
https://github.com/overleaf/overleaf.git
synced 2025-04-15 23:27:15 +00:00
Merge pull request #19472 from overleaf/rd-stylelint-ci
[web] Add Stylelint formatting to the CI GitOrigin-RevId: f31139f9f6f70aa96214b59db37ad1f79cd1e733
This commit is contained in:
Rebeka Dekany
Copybot
parent
1648e03e83
commit
6cb956b1ff
25 changed files with 67 additions and 63 deletions
|
|
@ -1,3 +1,9 @@
|
|||
{
|
||||
"extends": ["stylelint-config-standard-scss"]
|
||||
"extends": ["stylelint-config-standard-scss"],
|
||||
"rules": {
|
||||
"function-url-quotes": null,
|
||||
"no-descending-specificity": null,
|
||||
"scss/at-extend-no-missing-placeholder": null,
|
||||
"scss/operator-no-newline-after": null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -397,6 +397,10 @@ lint: lint_eslint
|
|||
lint_eslint:
|
||||
npm run lint
|
||||
|
||||
lint: lint_stylelint
|
||||
lint_stylelint:
|
||||
npm run lint:styles
|
||||
|
||||
lint: lint_pug
|
||||
lint_pug:
|
||||
bin/lint_pug_templates
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ li.dropdown.dropup.subdued(dropdown).language-picker
|
|||
each subdomainDetails, subdomain in settings.i18n.subdomainLang
|
||||
if !subdomainDetails.hide
|
||||
- let isActive = subdomainDetails.lngCode === currentLngCode
|
||||
li.lngOption
|
||||
li.lng-option
|
||||
a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams, role="menuitem", class=isActive ? 'dropdown-item active' : 'dropdown-item', aria-selected=isActive ? 'true' : 'false')
|
||||
| #{settings.translatedLanguages[subdomainDetails.lngCode]}
|
||||
if subdomainDetails.lngCode === currentLngCode
|
||||
|
|
|
|||
|
|
@ -19,6 +19,6 @@ li.dropdown.dropup.subdued(dropdown).language-picker
|
|||
li.dropdown-header #{translate("language")}
|
||||
each subdomainDetails, subdomain in settings.i18n.subdomainLang
|
||||
if !subdomainDetails.hide
|
||||
li.lngOption
|
||||
li.lng-option
|
||||
a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams role="menuitem")
|
||||
| #{settings.translatedLanguages[subdomainDetails.lngCode]}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ function EmailsSectionContent() {
|
|||
<>
|
||||
<EmailsHeader />
|
||||
{isInitializing ? (
|
||||
<div className="affiliations-table-row--highlighted">
|
||||
<div className="affiliations-table-row-highlighted">
|
||||
<div className="affiliations-table-cell text-center">
|
||||
<Icon type="refresh" fw spin /> {t('loading')}...
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ type LayoutProps = {
|
|||
|
||||
function Layout({ isError, error, children }: LayoutProps) {
|
||||
return (
|
||||
<div className="affiliations-table-row--highlighted">
|
||||
<div className="affiliations-table-row-highlighted">
|
||||
<OLRow>{children}</OLRow>
|
||||
{isError && (
|
||||
<OLNotification
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ function Downshift({
|
|||
role={undefined}
|
||||
className={classnames({
|
||||
active: selectedItem === item,
|
||||
'dropdown-item--highlighted': highlightedIndex === index,
|
||||
'dropdown-item-highlighted': highlightedIndex === index,
|
||||
})}
|
||||
trailingIcon={selectedItem === item ? 'check' : undefined}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -56,9 +56,11 @@
|
|||
@mixin modal-lg {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
@mixin modal-md {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
@mixin modal-sm {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -147,6 +147,6 @@
|
|||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.dropdown-item--highlighted {
|
||||
.dropdown-item-highlighted {
|
||||
background-color: var(--bg-light-secondary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@
|
|||
@function form-check-box-svg($color) {
|
||||
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
|
||||
}
|
||||
|
||||
@function form-check-radio-svg($color) {
|
||||
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$color}'/></svg>");
|
||||
}
|
||||
|
||||
@function form-check-indeterminate-svg($color) {
|
||||
@return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
|
||||
}
|
||||
|
|
@ -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) +
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.visually-hidden-max-md {
|
||||
@include media-breakpoint-down(md) {
|
||||
@include visually-hidden();
|
||||
@include visually-hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -589,6 +589,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable selector-class-pattern */
|
||||
.project-list-upload-project-modal-uppy-dashboard .uppy-Root {
|
||||
.uppy-Dashboard-AddFiles-title {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ footer.site-footer {
|
|||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
li.lngOption {
|
||||
li.lng-option {
|
||||
text-align: left;
|
||||
display: list-item;
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue