Skip to content

Formatting for scss #2758

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
geromequa wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Formatting for scss #2758

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ee7b182
add prettier formatting for scss
geromequa Jul 13, 2026
599f95f
formatted scss
geromequa Jul 13, 2026
13622ff
fix formatter test
geromequa Jul 20, 2026
52d467d
remove arrowParens option
geromequa Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ process-compose.socket

# pip puts editable packages here
src
!evap/static/scss/.prettierrc.json
!evap/static/ts/.prettierrc.json
!evap/static/ts/src

Expand Down
10 changes: 9 additions & 1 deletion evap/evaluation/management/commands/format.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,15 @@ def run_ruff(self):
def run_prettier(self):
self.stdout.write("Executing npx prettier")
subprocess.run(
["npx", "prettier", "--write", "evap/static/ts/**/*.ts", "evap/static/ts/eslint.config.js"], check=False
[
"npx",
"prettier",
"--write",
"evap/static/ts/**/*.ts",
"evap/static/ts/eslint.config.js",
"evap/static/scss/**/*.scss",
],
check=False,
) # nosec

def handle(self, *args, **options):
Expand Down
5 changes: 5 additions & 0 deletions evap/static/scss/.prettierrc.json
View file
Open in desktop

@niklasmohrin niklasmohrin Jul 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we even have this? can't we just use the same file as for typescript? and if not, we should just use a symlink

@geromequa geromequa Jul 20, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

without this file prettier does not work properly for scss. symlink could work, but by now the scss config does not have the arrowPens option anymore, which we want in the ts config. See #2758 (comment).

@richardebeling richardebeling Jul 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

symlinking one file is also fine for me (I just don't want a full separate copy of the file that includes attributes that don't make sense)

@niklasmohrin niklasmohrin Jul 20, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would expect that we can just have some global config for prettier. And a simple Google search reveals: yes, we can. according to https://prettier.io/docs/configuration, we can just specify everything in package.json and this config applies to all target files

Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"tabWidth": 4,
"arrowParens": "avoid",
Comment thread
geromequa marked this conversation as resolved.
Outdated
"printWidth": 120
}
17 changes: 11 additions & 6 deletions evap/static/scss/_adjustments.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,18 @@

// remove wrongly added padding by Bootstrap, caused by the always visible scrollbar
// (https://github.com/twbs/bootstrap/blob/v4-dev/js/src/modal.js#L429)
body, .fixed-top, .fixed-bottom, .is-fixed, .sticky-top {
body,
.fixed-top,
.fixed-bottom,
.is-fixed,
.sticky-top {
padding-right: 0 !important;
}

// make collapsed card have no double bottom border
// (bootstrap bug: https://github.com/twbs/bootstrap/issues/27108)
.collapsible {
overflow: hidden; // don't let background color overflow rounded border
overflow: hidden; // don't let background color overflow rounded border

.card-header {
border-bottom: none;
Expand Down Expand Up @@ -63,7 +67,9 @@ body, .fixed-top, .fixed-bottom, .is-fixed, .sticky-top {
}
}

&::after { display: none; }
&::after {
display: none;
}
&::before {
flex-shrink: 0;
width: $accordion-icon-width;
Expand Down Expand Up @@ -126,7 +132,7 @@ $alert-colors: (

// tomselect adjustments
.ts-wrapper.multi .ts-control > div.active {
background-color: $component-active-bg;
background-color: $component-active-bg;
}

.focus .ts-control {
Expand All @@ -141,7 +147,6 @@ $alert-colors: (
// Change .btn-group outlined border style to fix double borders with outlined button style
// see https://github.com/twbs/bootstrap/issues/25888
.btn-group.outline-fix {

// If .btn is not the last element in the group, remove the right border.
// Also uses :has to not remove the right border if the next element is a disabled input
.btn:not(:last-child):has(+ :not(.btn-check[disabled])) {
Expand Down Expand Up @@ -171,7 +176,7 @@ $alert-colors: (

// Hide the x in input fields on chrome
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
-webkit-appearance: none;
}

// Fix tabs in card headers
Expand Down
46 changes: 23 additions & 23 deletions evap/static/scss/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
$evap-green: #88bf4a;
$evap-lime: #bbd154;
$evap-yellow: #efe258;
$evap-orange: #f29e58;
$evap-red: #eb595a;
$evap-green: #88bf4a;
$evap-lime: #bbd154;
$evap-yellow: #efe258;
$evap-orange: #f29e58;
$evap-red: #eb595a;

$evap-dark-green: shade-color($evap-green, 20%);
$evap-dark-lime: shade-color($evap-lime, 20%);
$evap-dark-yellow: shade-color($evap-yellow, 20%);
$evap-dark-orange: shade-color($evap-orange, 20%);
$evap-dark-red: shade-color($evap-red, 20%);
$evap-dark-green: shade-color($evap-green, 20%);
$evap-dark-lime: shade-color($evap-lime, 20%);
$evap-dark-yellow: shade-color($evap-yellow, 20%);
$evap-dark-orange: shade-color($evap-orange, 20%);
$evap-dark-red: shade-color($evap-red, 20%);

$evap-light-green: tint-color($evap-green, 60%);
$evap-light-lime: tint-color($evap-lime, 60%);
$evap-light-green: tint-color($evap-green, 60%);
$evap-light-lime: tint-color($evap-lime, 60%);
$evap-light-yellow: tint-color($evap-yellow, 60%);
$evap-light-orange: tint-color($evap-orange, 60%);
$evap-light-red: tint-color($evap-red, 60%);
$evap-light-red: tint-color($evap-red, 60%);

$evap-dark-blue: #31708f;
$evap-light-blue: #d9edf7;
$evap-dark-blue: #31708f;
$evap-light-blue: #d9edf7;

$white: #ffffff;
$lighter-gray: #f8f9fa;
$light-gray: #dee2e6;
$medium-gray: #adb5bd;
$dark-gray: #868e96;
$darker-gray: #495057;
$black: #000000;
$white: #ffffff;
$lighter-gray: #f8f9fa;
$light-gray: #dee2e6;
$medium-gray: #adb5bd;
$dark-gray: #868e96;
$darker-gray: #495057;
$black: #000000;

$primary: $evap-dark-blue;
$secondary: $dark-gray;
Expand All @@ -42,7 +42,7 @@ $vote-colors: (
"yellow": $evap-yellow,
"orange": $evap-orange,
"red": $evap-red,
"gray": $medium-gray
"gray": $medium-gray,
);

$code-color: $darker-gray;
2 changes: 1 addition & 1 deletion evap/static/scss/_font-awesome.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
font-style: normal;
font-weight: $font-weight;
font-display: $fa-font-display;
src: url('#{$fa-font-path}/fa-#{$style}-#{$font-weight}.woff2') format('woff2');
src: url("#{$fa-font-path}/fa-#{$style}-#{$font-weight}.woff2") format("woff2");
}

#{$selector} {
Expand Down
13 changes: 11 additions & 2 deletions evap/static/scss/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
@import "../bootstrap/scss/mixins";

@mixin bar-shadow($color) {
text-shadow: 0 0 2px $color, 0 0 2px $color, 0 0 2px $color, 0 0 2px $color, 0 0 2px $color, 0 0 2px $color;
text-shadow:
0 0 2px $color,
0 0 2px $color,
0 0 2px $color,
0 0 2px $color,
0 0 2px $color,
0 0 2px $color;
}

@mixin no-user-select {
Expand Down Expand Up @@ -35,7 +41,10 @@
@content;
} @else {
$print-index: index(map-keys($breakpoints), $print-breakpoint);
$print: index(map-keys($breakpoints), $lower) <= $print-index and $print-index <= index(map-keys($breakpoints), $upper);
$print: index(map-keys($breakpoints), $lower) <=
$print-index and
$print-index <=
index(map-keys($breakpoints), $upper);
Comment on lines +44 to +47

@richardebeling richardebeling Jul 13, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is weird -- why can't we format it as

index(map-keys($breakpoints), $lower) <= $print-index
and $print-index <= index(map-keys($breakpoints), $upper);

? This should fit within 120 columns with ease

$media-query: "screen and #{$screen}";
@if $print {
$media-query: "print, #{$screen}";
Expand Down
20 changes: 10 additions & 10 deletions evap/static/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $grid-breakpoints: (
md: 768px,
lg: 1008px,
xl: 1200px,
xxl: 1400px
xxl: 1400px,
);

$print-breakpoint: lg;
Expand All @@ -24,14 +24,14 @@ $container-max-widths: (
md: 720px,
lg: 1000px,
xl: 1140px,
xxl: 1320px
xxl: 1320px,
);

$border-radius: .25rem !default;
$border-radius-sm: .2rem !default;
$border-radius-lg: .3rem !default;
$border-radius-xl: .75rem !default;
$border-radius-2xl: 1.5rem !default;
$border-radius: 0.25rem !default;
$border-radius-sm: 0.2rem !default;
$border-radius-lg: 0.3rem !default;
$border-radius-xl: 0.75rem !default;
$border-radius-2xl: 1.5rem !default;

$border-color: $medium-gray;

Expand Down Expand Up @@ -85,7 +85,7 @@ $footer-height: 46px;

$breadcrumb-divider-color: $medium-gray;

$input-btn-focus-width: .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-width: 0.25rem;
$input-btn-focus-color-opacity: 0.25;

$notebook-break: calc(3/2);
$notebook-break: calc(3 / 2);
4 changes: 3 additions & 1 deletion evap/static/scss/components/_badge.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
color: $medium-gray;
background-color: $white;
}
.bg-info, .bg-warning, .bg-light {
.bg-info,
.bg-warning,
.bg-light {
color: $darker-gray;
}

Expand Down
10 changes: 7 additions & 3 deletions evap/static/scss/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ input:checked + label.btn-light.for-above {
border-color: $dark-gray;

&:focus-visible {
box-shadow: inset 0 0 5px $dark-gray, 0 0 0 $btn-focus-width rgba($dark-gray, 0.5);
box-shadow:
inset 0 0 5px $dark-gray,
0 0 0 $btn-focus-width rgba($dark-gray, 0.5);
}
}

Expand Down Expand Up @@ -138,7 +140,7 @@ a:not([href]):not(.disabled) {
.btn-switch-evaluation-language {
.btn-group {
.btn {
min-width: 38px;
min-width: 38px;
}
}
}
Expand Down Expand Up @@ -285,7 +287,9 @@ a.collapse-toggle {
box-shadow: inset 0 0 10px $dark-gray;

&:focus-visible {
box-shadow: $btn-focus-box-shadow, inset 0 0 10px $dark-gray;
box-shadow:
$btn-focus-box-shadow,
inset 0 0 10px $dark-gray;
}

&.collapsed {
Expand Down
24 changes: 19 additions & 5 deletions evap/static/scss/components/_callouts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@

&.closing,
&.closed {
border-radius: .2rem;
border-radius: 0.2rem;
border-left-width: 0;
padding: 4px 8px 4px 8px;
min-width: 0;
Expand All @@ -80,18 +80,32 @@
}

&.closing {
transition: border-radius 1s ease 1s, border-left-width 1s ease 1s, padding 1s ease-in-out, min-width 1s ease 1s;
transition:
border-radius 1s ease 1s,
border-left-width 1s ease 1s,
padding 1s ease-in-out,
min-width 1s ease 1s;

.callout-content {
transition: max-width 1s ease 1s, padding-top 1s ease, max-height 1s ease;
transition:
max-width 1s ease 1s,
padding-top 1s ease,
max-height 1s ease;
}
}

&.opening {
transition: border-radius 1s ease, border-left-width 1s ease, padding 1s ease-in-out, min-width 1s ease;
transition:
border-radius 1s ease,
border-left-width 1s ease,
padding 1s ease-in-out,
min-width 1s ease;

.callout-content {
transition: max-width 1s ease, padding-top 1s ease 1s, max-height 1s ease 1s;
transition:
max-width 1s ease,
padding-top 1s ease 1s,
max-height 1s ease 1s;
}
}
}
Loading
Loading