DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

Merge pull request #11019 from colinux/replace-scss-lint

Browse source 
ETQ tech: remplace scss-lint par prettier
This commit is contained in:
Colin Darie 2024-11-06 09:54:09 +00:00 committed by GitHub
commit 90c2e09863
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
95 changed files with 451 additions and 686 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

264
.scss-lint.yml
View file

@ -1,264 +0,0 @@
exclude:
- 'app/assets/stylesheets/reset.scss'
- 'app/assets/stylesheets/direct_uploads.scss'
- 'app/assets/stylesheets/dsfr_override.scss'
- 'app/assets/stylesheets/manager.scss'
linters:
BangFormat:
enabled: true
space_before_bang: true
space_after_bang: false
BemDepth:
enabled: false
max_elements: 1
BorderZero:
enabled: true
convention: none
# To enable later
ChainedClasses:
enabled: false
ColorKeyword:
enabled: true
# To enable later
ColorVariable:
enabled: false
Comment:
enabled: true
style: silent
DebugStatement:
enabled: true
DeclarationOrder:
enabled: true
DisableLinterReason:
enabled: false
DuplicateProperty:
enabled: true
ElsePlacement:
enabled: true
style: same_line
EmptyLineBetweenBlocks:
enabled: true
ignore_single_line_blocks: false
EmptyRule:
enabled: true
ExtendDirective:
enabled: false
FinalNewline:
enabled: true
present: true
HexLength:
enabled: true
style: long
HexNotation:
enabled: true
style: uppercase
HexValidation:
enabled: true
# To enable later
IdSelector:
enabled: false
# To enable later
ImportantRule:
enabled: false
ImportPath:
enabled: false
leading_underscore: false
filename_extension: false
Indentation:
enabled: true
allow_non_nested_indentation: false
character: space
width: 2
LeadingZero:
enabled: true
style: include_zero
MergeableSelector:
enabled: false
force_nesting: true
NameFormat:
enabled: true
allow_leading_underscore: false
convention: hyphenated_lowercase
# To enable later
NestingDepth:
enabled: false
max_depth: 3
ignore_parent_selectors: false
# To enable later
PlaceholderInExtend:
enabled: false
PrivateNamingConvention:
enabled: false
prefix: _
PropertyCount:
enabled: false
include_nested: false
max_properties: 10
PropertySortOrder:
enabled: false
ignore_unspecified: false
min_properties: 2
separate_groups: false
PropertySpelling:
enabled: true
extra_properties:
- scroll-padding
disabled_properties: []
# To enable later
PropertyUnits:
enabled: false
global: [
'ch', 'em', 'ex', 'rem', # Font-relative lengths
'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths
'deg', 'grad', 'rad', 'turn', # Angle
'ms', 's', # Duration
'Hz', 'kHz', # Frequency
'dpi', 'dpcm', 'dppx', # Resolution
'%'] # Other
properties: {}
PseudoElement:
enabled: false # otherwise rules on ::marker fails
# To enable later
QualifyingElement:
enabled: false
allow_element_with_attribute: false
allow_element_with_class: false
allow_element_with_id: false
# To enable later
SelectorDepth:
enabled: false
max_depth: 3
SelectorFormat:
enabled: true
# hyphenated_lowercase + any dsfr selector which are not hyphenated
convention: ^(?:fr-[^A-Z]+|[^_A-Z]+)$
Shorthand:
enabled: false
allowed_shorthands: [1, 2, 3, 4]
SingleLinePerProperty:
enabled: true
allow_single_line_rule_sets: false
SingleLinePerSelector:
enabled: true
SpaceAfterComma:
enabled: true
style: one_space
SpaceAfterComment:
enabled: true
style: one_space
allow_empty_comments: true
SpaceAfterPropertyColon:
enabled: true
style: one_space
SpaceAfterPropertyName:
enabled: true
SpaceAfterVariableColon:
enabled: true
style: one_space
SpaceAfterVariableName:
enabled: true
SpaceAroundOperator:
enabled: true
style: one_space
SpaceBeforeBrace:
enabled: true
style: space
allow_single_line_padding: false
SpaceBetweenParens:
enabled: true
spaces: 0
StringQuotes:
enabled: true
style: double_quotes
TrailingSemicolon:
enabled: true
TrailingWhitespace:
enabled: true
TrailingZero:
enabled: true
# To enable later
TransitionAll:
enabled: false
UnnecessaryMantissa:
enabled: true
UnnecessaryParentReference:
enabled: true
UrlFormat:
enabled: true
UrlQuotes:
enabled: true
VariableForProperty:
enabled: false
properties: []
VendorPrefix:
enabled: true
identifier_list: base
additional_identifiers: []
excluded_identifiers: []
ZeroUnit:
enabled: false
Compass::*:
enabled: false

1
Gemfile
View file

@ -147,7 +147,6 @@ group :development do
gem 'rubocop-performance', require: false gem 'rubocop-performance', require: false
gem 'rubocop-rails', require: false gem 'rubocop-rails', require: false
gem 'rubocop-rspec', require: false gem 'rubocop-rspec', require: false
gem 'scss_lint', require: false
gem 'stackprof' gem 'stackprof'
gem 'web-console' gem 'web-console'
end end

8
Gemfile.lock
View file

@ -690,11 +690,6 @@ GEM
sanitize (6.1.2) sanitize (6.1.2)
crass (~> 1.0.2) crass (~> 1.0.2)
nokogiri (>= 1.12.0) nokogiri (>= 1.12.0)
sass (3.7.4)
sass-listen (~> 4.0.0)
sass-listen (4.0.0)
rb-fsevent (~> 0.9, >= 0.9.4)
rb-inotify (~> 0.9, >= 0.9.7)
sassc (2.4.0) sassc (2.4.0)
ffi (~> 1.9) ffi (~> 1.9)
sassc-rails (2.1.2) sassc-rails (2.1.2)
@ -703,8 +698,6 @@ GEM
sprockets (> 3.0) sprockets (> 3.0)
sprockets-rails sprockets-rails
tilt tilt
scss_lint (0.60.0)
sass (~> 3.5, >= 3.5.5)
selectize-rails (0.12.6) selectize-rails (0.12.6)
selenium-devtools (0.126.0) selenium-devtools (0.126.0)
selenium-webdriver (~> 4.2) selenium-webdriver (~> 4.2)
@ -997,7 +990,6 @@ DEPENDENCIES
rubocop-rspec rubocop-rspec
saml_idp saml_idp
sassc-rails sassc-rails
scss_lint
selenium-devtools selenium-devtools
selenium-webdriver selenium-webdriver
sentry-delayed_job sentry-delayed_job

4
app/assets/stylesheets/01_common.scss
View file

@ -1,4 +1,4 @@
@import "placeholders"; @import 'placeholders';
html, html,
body { body {
@ -7,7 +7,7 @@ body {
} }
// Forces line breaks to prevent buttons from overflowing their container // Forces line breaks to prevent buttons from overflowing their container
input[type="submit"] { input[type='submit'] {
white-space: normal; white-space: normal;
} }

65
app/assets/stylesheets/02_utils.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
// floats // floats
.pull-left { .pull-left {
@ -142,7 +142,6 @@
} }
} }
// who known // who known
.highlighted { .highlighted {
background-color: var( background-color: var(
@ -194,13 +193,29 @@
// using $direction.key as css modifier, $direction.values to set css properties // using $direction.key as css modifier, $direction.values to set css properties
// scale it using $steps // scale it using $steps
$directions: ( $directions: (
"t": ("margin-top"), 't': (
"r": ("margin-right"), 'margin-top'
"b": ("margin-bottom"), ),
"l": ("margin-left"), 'r': (
"x": ("margin-left", "margin-right"), 'margin-right'
"y": ("margin-top", "margin-bottom"), ),
"": ("margin") 'b': (
'margin-bottom'
),
'l': (
'margin-left'
),
'x': (
'margin-left',
'margin-right'
),
'y': (
'margin-top',
'margin-bottom'
),
'': (
'margin'
)
); );
$steps: (0, 1, 2, 3, 4, 5, 6, 7, 8); $steps: (0, 1, 2, 3, 4, 5, 6, 7, 8);
@ -215,13 +230,29 @@ $steps: (0, 1, 2, 3, 4, 5, 6, 7, 8);
} }
$directions: ( $directions: (
"t": ("padding-top"), 't': (
"r": ("padding-right"), 'padding-top'
"b": ("padding-bottom"), ),
"l": ("padding-left"), 'r': (
"x": ("padding-left", "padding-right"), 'padding-right'
"y": ("padding-top", "padding-bottom"), ),
"": ("padding") 'b': (
'padding-bottom'
),
'l': (
'padding-left'
),
'x': (
'padding-left',
'padding-right'
),
'y': (
'padding-top',
'padding-bottom'
),
'': (
'padding'
)
); );
$steps: (0, 1, 2, 3, 4, 5, 6, 7, 8); $steps: (0, 1, 2, 3, 4, 5, 6, 7, 8);

30
app/assets/stylesheets/_colors.scss
View file

@ -1,26 +1,26 @@
$light-blue: #1C7EC9; $light-blue: #1c7ec9;
$lighter-blue: #C3D9FF; $lighter-blue: #c3d9ff;
$black: #333333; $black: #333333;
$white: #FFFFFF; $white: #ffffff;
$grey: #888888; $grey: #888888;
$light-grey: #F8F8F8; $light-grey: #f8f8f8;
$dark-grey: #666666; $dark-grey: #666666;
$border-grey: #CCCCCC; $border-grey: #cccccc;
$dark-red: #A10005; $dark-red: #a10005;
$medium-red: rgba(161, 0, 5, 0.9); $medium-red: rgba(161, 0, 5, 0.9);
$light-red: #ED1C24; $light-red: #ed1c24;
$lighter-red: #F52A2A; $lighter-red: #f52a2a;
$background-red: #FFDFDF; $background-red: #ffdfdf;
$green: darken(#169862, 5%); $green: darken(#169862, 5%);
$old-green: #15AD70; $old-green: #15ad70;
$lighter-green: lighten($old-green, 30%); $lighter-green: lighten($old-green, 30%);
$light-green: lighten($old-green, 25%); $light-green: lighten($old-green, 25%);
$dark-green: darken($old-green, 20%); $dark-green: darken($old-green, 20%);
$orange: #F28900; $orange: #f28900;
$orange-bg: lighten($orange, 35%); $orange-bg: lighten($orange, 35%);
$yellow: #FEF3B8; $yellow: #fef3b8;
$light-yellow: #FFFFDE; $light-yellow: #ffffde;
$blue-france-700: #00006D; $blue-france-700: #00006d;
$blue-france-500: #000091; $blue-france-500: #000091;
$blue-france-400: #7F7FC8; $blue-france-400: #7f7fc8;
$g700: #383838; $g700: #383838;

3
app/assets/stylesheets/_mixins.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
@mixin horizontal-padding($value) { @mixin horizontal-padding($value) {
padding-left: $value; padding-left: $value;
@ -22,4 +22,3 @@
background-image: image-url($image-url); background-image: image-url($image-url);
} }
} }

9
app/assets/stylesheets/_placeholders.scss
View file

@ -1,6 +1,6 @@
@import "colors"; @import 'colors';
@import "mixins"; @import 'mixins';
@import "constants"; @import 'constants';
%horizontal-list { %horizontal-list {
list-style-type: none; list-style-type: none;
@ -27,7 +27,8 @@
} }
} }
%container { // TODO: switch to new design with preview in two view not in two column https://github.com/betagouv/demarches-simplifiees.fr/issues/7882 %container {
// TODO: switch to new design with preview in two view not in two column https://github.com/betagouv/demarches-simplifiees.fr/issues/7882
@include horizontal-padding($default-padding); @include horizontal-padding($default-padding);
max-width: $page-width + 2 * $default-padding; max-width: $page-width + 2 * $default-padding;
margin-left: auto; margin-left: auto;

4
app/assets/stylesheets/actiontext.scss
View file

@ -11,9 +11,9 @@
trix-editor { trix-editor {
min-height: 10em; min-height: 10em;
background-color: #FFFFFF; background-color: #ffffff;
} }
[data-fr-theme="dark"] .trix-button-group button { [data-fr-theme='dark'] .trix-button-group button {
background: var(--background-action-high-blue-france) !important; background: var(--background-action-high-blue-france) !important;
} }

4
app/assets/stylesheets/add_instructeur.scss
View file

@ -1,5 +1,5 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
.instructeur-wrapper { .instructeur-wrapper {
.select-instructeurs { .select-instructeurs {

6
app/assets/stylesheets/agentconnect.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
#agentconnect { #agentconnect {
.agent { .agent {
@ -10,7 +10,7 @@
} }
.box { .box {
background-color: #F2F2F9; background-color: #f2f2f9;
padding: $default-padding; padding: $default-padding;
ul { ul {

2
app/assets/stylesheets/animations.scss
View file

@ -1,4 +1,4 @@
@import "placeholders"; @import 'placeholders';
@keyframes fade-in-down { @keyframes fade-in-down {
0% { 0% {

2
app/assets/stylesheets/archive.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
table.archive-table { table.archive-table {
.text-right { .text-right {

8
app/assets/stylesheets/attachment.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.attachment-error, .attachment-error,
.attachment-upload-error { .attachment-upload-error {
@ -8,7 +8,7 @@
&::before { &::before {
box-shadow: inset 2px 0 0 0 var(--border-plain-error); box-shadow: inset 2px 0 0 0 var(--border-plain-error);
height: 100%; height: 100%;
content: ""; content: '';
left: -0.75rem; left: -0.75rem;
position: absolute; position: absolute;
width: 2px; width: 2px;
@ -26,7 +26,7 @@
} }
.attachment-multiple:not(.fr-downloads-group), .attachment-multiple:not(.fr-downloads-group),
.attachment-multiple.fr-downloads-group[data-controller=replace-attachment] { .attachment-multiple.fr-downloads-group[data-controller='replace-attachment'] {
ul { ul {
list-style-type: none; list-style-type: none;
padding-inline-start: 0; padding-inline-start: 0;

16
app/assets/stylesheets/attestation.scss
View file

@ -1,20 +1,20 @@
@font-face { @font-face {
font-family: "Marianne"; font-family: 'Marianne';
src: url("marianne-regular.ttf"); src: url('marianne-regular.ttf');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Marianne"; font-family: 'Marianne';
src: url("marianne-bold.ttf"); src: url('marianne-bold.ttf');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: "Marianne"; font-family: 'Marianne';
src: url("marianne-thin.ttf"); src: url('marianne-thin.ttf');
font-weight: 100; // weasy print n"accepte pas lighter font-weight: 100; // weasy print n"accepte pas lighter
font-style: normal; font-style: normal;
} }
@ -25,7 +25,7 @@
@bottom-center { @bottom-center {
font-size: 8pt; font-size: 8pt;
content: counter(page) " / " counter(pages); content: counter(page) ' / ' counter(pages);
margin-top: 17mm; margin-top: 17mm;
white-space: nowrap; white-space: nowrap;
} }
@ -45,7 +45,7 @@
min-height: 29.7cm; min-height: 29.7cm;
padding: 17mm; padding: 17mm;
margin: 0 auto; margin: 0 auto;
background: #FFFFFF; background: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); // Optional: for better visualization box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); // Optional: for better visualization
position: relative; position: relative;
} }

2
app/assets/stylesheets/attestation_template_2_edit.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
#attestation-edit { #attestation-edit {
.attestation-preview { .attestation-preview {

4
app/assets/stylesheets/attestation_template_edit.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
#attestation-template-edit { #attestation-template-edit {
.text-active { .text-active {

14
app/assets/stylesheets/auth.scss
View file

@ -1,7 +1,7 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
@import "placeholders"; @import 'placeholders';
@import "mixins"; @import 'mixins';
#auth, #auth,
#agentconnect { #agentconnect {
@ -48,15 +48,15 @@
} }
.sign-in-form .form { .sign-in-form .form {
input[type="email"] { input[type='email'] {
margin-bottom: $default-spacer; margin-bottom: $default-spacer;
} }
input[type="password"] { input[type='password'] {
margin-bottom: $default-spacer; margin-bottom: $default-spacer;
} }
input[type="checkbox"] { input[type='checkbox'] {
margin-bottom: 0; margin-bottom: 0;
} }
} }

4
app/assets/stylesheets/autosave.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.autosave { .autosave {
position: relative; position: relative;

4
app/assets/stylesheets/beta.scss
View file

@ -6,8 +6,8 @@
right: -35px; right: -35px;
transform: rotate(45deg); transform: rotate(45deg);
width: 150px; width: 150px;
background-color: #008CBA; background-color: #008cba;
color: #FFFFFF; color: #ffffff;
padding: 5px; padding: 5px;
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;

45
app/assets/stylesheets/buttons.scss
View file

@ -1,6 +1,6 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
@import "placeholders"; @import 'placeholders';
.button { .button {
@extend %outline; @extend %outline;
@ -11,7 +11,7 @@
border: 1px solid $border-grey; border: 1px solid $border-grey;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
background-color: #FFFFFF; background-color: #ffffff;
color: $black; color: $black;
text-align: center; text-align: center;
-webkit-appearance: none; -webkit-appearance: none;
@ -29,7 +29,7 @@
} }
&.primary { &.primary {
color: #FFFFFF; color: #ffffff;
border-color: $blue-france-700; border-color: $blue-france-700;
background-color: $blue-france-700; background-color: $blue-france-700;
@ -41,10 +41,10 @@
&.secondary { &.secondary {
color: $blue-france-700; color: $blue-france-700;
border-color: $blue-france-700; border-color: $blue-france-700;
background-color: #FFFFFF; background-color: #ffffff;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: #FFFFFF; color: #ffffff;
background: $blue-france-700; background: $blue-france-700;
} }
} }
@ -52,10 +52,10 @@
&.danger { &.danger {
color: $black; color: $black;
border-color: $border-grey; border-color: $border-grey;
background-color: #FFFFFF; background-color: #ffffff;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: #FFFFFF; color: #ffffff;
border-color: $medium-red; border-color: $medium-red;
background-color: $medium-red; background-color: $medium-red;
@ -66,35 +66,35 @@
} }
&.accepted { &.accepted {
color: #FFFFFF; color: #ffffff;
border-color: $green; border-color: $green;
background-color: $green; background-color: $green;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: $green; color: $green;
background-color: #FFFFFF; background-color: #ffffff;
} }
} }
&.without-continuation { &.without-continuation {
color: #FFFFFF; color: #ffffff;
border-color: $black; border-color: $black;
background-color: $black; background-color: $black;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: $black; color: $black;
background-color: #FFFFFF; background-color: #ffffff;
} }
} }
&.refused { &.refused {
color: #FFFFFF; color: #ffffff;
border-color: $dark-red; border-color: $dark-red;
background-color: $dark-red; background-color: $dark-red;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: $dark-red; color: $dark-red;
background-color: #FFFFFF; background-color: #ffffff;
} }
} }
@ -151,8 +151,8 @@
.dropdown-button { .dropdown-button {
white-space: nowrap; white-space: nowrap;
[aria-hidden="true"].fr-ml-2v::after { [aria-hidden='true'].fr-ml-2v::after {
content: "▾"; content: '▾';
} }
&.icon-only { &.icon-only {
@ -172,13 +172,12 @@
} }
} }
[data-fr-theme='dark'] .dropdown-content {
[data-fr-theme="dark"] .dropdown-content {
border: none; border: none;
background: var(--background-action-low-blue-france); background: var(--background-action-low-blue-france);
} }
[data-fr-theme="dark"] .dropdown-items { [data-fr-theme='dark'] .dropdown-items {
li { li {
&:not(.inactive) { &:not(.inactive) {
&:hover, &:hover,
@ -195,7 +194,7 @@
.dropdown-content { .dropdown-content {
border: 1px solid $border-grey; border: 1px solid $border-grey;
background: #FFFFFF; background: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
position: absolute; position: absolute;
right: 0; right: 0;
@ -343,7 +342,7 @@ ul.dropdown-items {
// Make child links fill the whole clickable area // Make child links fill the whole clickable area
> a, > a,
.dropdown-items-link { .dropdown-items-link {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
margin: -$default-padding; margin: -$default-padding;
@ -366,7 +365,7 @@ ul.dropdown-items {
} }
p + h4, p + h4,
p + p, { p + p {
margin-top: $default-spacer; margin-top: $default-spacer;
} }
} }

9
app/assets/stylesheets/card.scss
View file

@ -1,8 +1,7 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
[data-fr-theme='dark'] .card {
[data-fr-theme="dark"] .card {
background: none; background: none;
border: 1px solid var(--background-action-low-blue-france); border: 1px solid var(--background-action-low-blue-france);
} }
@ -11,7 +10,7 @@
padding: ($default-spacer * 3) ($default-spacer * 2); padding: ($default-spacer * 3) ($default-spacer * 2);
border: 1px solid $border-grey; border: 1px solid $border-grey;
margin-bottom: $default-spacer * 4; margin-bottom: $default-spacer * 4;
background: #FFFFFF; background: #ffffff;
.card-title { .card-title {
font-weight: bold; font-weight: bold;

4
app/assets/stylesheets/card_admin.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.fr-tile-subtitle { .fr-tile-subtitle {
min-height: 7rem; min-height: 7rem;

2
app/assets/stylesheets/carte.scss
View file

@ -1,4 +1,4 @@
@import "colors"; @import 'colors';
.areas { .areas {
margin-bottom: 10px; margin-bottom: 10px;

6
app/assets/stylesheets/cnaf.scss
View file

@ -1,5 +1,5 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
table.cnaf { table.cnaf {
margin: 2 * $default-padding 0 $default-padding $default-padding; margin: 2 * $default-padding 0 $default-padding $default-padding;
@ -7,7 +7,7 @@ table.cnaf {
caption { caption {
font-weight: bold; font-weight: bold;
margin-left: - $default-padding; margin-left: -$default-padding;
margin-bottom: $default-spacer; margin-bottom: $default-spacer;
text-align: left; text-align: left;
} }

2
app/assets/stylesheets/code_blocks.scss
View file

@ -1,4 +1,4 @@
@import "colors"; @import 'colors';
.code-block { .code-block {
background-color: $black; background-color: $black;

5
app/assets/stylesheets/code_example.scss
View file

@ -1,5 +1,5 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
.code-example { .code-example {
background-color: var(--background-contrast-grey); background-color: var(--background-contrast-grey);
@ -13,7 +13,6 @@
margin-right: auto; margin-right: auto;
padding: $default-padding; padding: $default-padding;
} }
} }
pre { pre {

2
app/assets/stylesheets/commencer.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.commencer { .commencer {
@media (max-width: 62em) { @media (max-width: 62em) {

7
app/assets/stylesheets/conditions_component.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
form.form > .conditionnel { form.form > .conditionnel {
.condition-table { .condition-table {
@ -37,7 +37,6 @@ form.form > .conditionnel {
th { th {
text-align: left; text-align: left;
padding: $default-spacer; padding: $default-spacer;
} }
td { td {
@ -48,7 +47,7 @@ form.form > .conditionnel {
margin-bottom: 0; margin-bottom: 0;
} }
input[type=text] { input[type='text'] {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }

4
app/assets/stylesheets/demande.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.dossier-show { .dossier-show {
.champ-row { .champ-row {

2
app/assets/stylesheets/demarches_index.scss
View file

@ -1,4 +1,4 @@
@import "colors"; @import 'colors';
#demarches-index { #demarches-index {
margin-bottom: 30px; margin-bottom: 30px;

6
app/assets/stylesheets/dgfip.scss
View file

@ -1,5 +1,5 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
table.dgfip { table.dgfip {
margin: 2 * $default-padding 0 $default-padding $default-padding; margin: 2 * $default-padding 0 $default-padding $default-padding;
@ -7,7 +7,7 @@ table.dgfip {
caption { caption {
font-weight: bold; font-weight: bold;
margin-left: - $default-padding; margin-left: -$default-padding;
margin-bottom: $default-spacer; margin-bottom: $default-spacer;
text-align: left; text-align: left;
} }

10
app/assets/stylesheets/direct_uploads.scss
View file

@ -1,4 +1,4 @@
@import "colors"; @import 'colors';
.direct-upload { .direct-upload {
display: inline-block; display: inline-block;
@ -20,7 +20,9 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
background-color: var(--background-contrast-grey); background-color: var(--background-contrast-grey);
transition: width 120ms ease-out, opacity 60ms 60ms ease-in; transition:
width 120ms ease-out,
opacity 60ms 60ms ease-in;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
@ -36,7 +38,7 @@
border-color: var(--border-plain-error); border-color: var(--border-plain-error);
} }
input[type=file][data-direct-upload-url][disabled], input[type='file'][data-direct-upload-url][disabled],
input[type=file][data-auto-attach-url][disabled] { input[type='file'][data-auto-attach-url][disabled] {
display: none; display: none;
} }

4
app/assets/stylesheets/dossier_annotations_privees.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
#dossier-annotations-privees { #dossier-annotations-privees {
h1 { h1 {

4
app/assets/stylesheets/dossier_champs.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.table.dossier-champs { .table.dossier-champs {
th, th,

18
app/assets/stylesheets/dossier_edit.scss
View file

@ -1,9 +1,9 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
$dossier-actions-bar-border-width: 1px; $dossier-actions-bar-border-width: 1px;
[data-fr-theme="dark"] .dossier-edit .dossier-edit-sticky-footer { [data-fr-theme='dark'] .dossier-edit .dossier-edit-sticky-footer {
background-color: var(--background-action-low-blue-france); background-color: var(--background-action-low-blue-france);
border: none; border: none;
} }
@ -32,7 +32,7 @@ $dossier-actions-bar-border-width: 1px;
align-items: baseline; align-items: baseline;
.mandatory-explanation { .mandatory-explanation {
flex-grow: 1; // Push the "notice" button to the right flex-grow: 1; // Push the "notice" button to the right
flex-shrink: 1; // Allow the text to shrink flex-shrink: 1; // Allow the text to shrink
margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text
} }
@ -51,11 +51,9 @@ $dossier-actions-bar-border-width: 1px;
} }
.dossier-edit-sticky-footer { .dossier-edit-sticky-footer {
// scss-lint:disable VendorPrefix DuplicateProperty position: fixed; // Fallback for IE 11, and other browser that don't support sticky
position: fixed; // Fallback for IE 11, and other browser that don't support sticky position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
position: sticky; position: sticky;
// scss-lint:enable VendorPrefix DuplicateProperty
// IE 11 uses `position:fixed` – and thus needs an explicit width, content-box for better layout, etc. // IE 11 uses `position:fixed` – and thus needs an explicit width, content-box for better layout, etc.
width: 100%; width: 100%;
@ -72,9 +70,9 @@ $dossier-actions-bar-border-width: 1px;
padding-right: $default-padding - $dossier-actions-bar-border-width; padding-right: $default-padding - $dossier-actions-bar-border-width;
padding-left: $default-padding - $dossier-actions-bar-border-width; padding-left: $default-padding - $dossier-actions-bar-border-width;
background: #FFFFFF; background: #ffffff;
border: $dossier-actions-bar-border-width solid #CCCCCC; border: $dossier-actions-bar-border-width solid #cccccc;
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
border-bottom: none; border-bottom: none;

6
app/assets/stylesheets/dossier_link.scss
View file

@ -1,9 +1,9 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
.dossier-link { .dossier-link {
.help-block > p { .help-block > p {
margin-top: - $default-padding; margin-top: -$default-padding;
margin-bottom: 2 * $default-padding; margin-bottom: 2 * $default-padding;
} }

5
app/assets/stylesheets/dossier_views.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.dossier-container { .dossier-container {
.sub-header { .sub-header {
@ -15,7 +15,6 @@
.header-actions { .header-actions {
margin-bottom: $default-spacer; margin-bottom: $default-spacer;
display: flex; display: flex;
} }
} }

8
app/assets/stylesheets/dossiers_table.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.table.dossiers-table { .table.dossiers-table {
font-size: 14px; font-size: 14px;
@ -22,7 +22,8 @@
// In order to have identical height in the table header and the table rows, // In order to have identical height in the table header and the table rows,
// we compensate for the height difference between the biggest element of the header // we compensate for the height difference between the biggest element of the header
// (the Personnaliser button, 38px) and the biggest cell-link element of the rows (the label, 28px) // (the Personnaliser button, 38px) and the biggest cell-link element of the rows (the label, 28px)
padding: calc((2 * #{$default-spacer}) + ((38px - 28px) / 2)) $default-spacer; padding: calc((2 * #{$default-spacer}) + ((38px - 28px) / 2))
$default-spacer;
display: block; display: block;
} }
@ -53,7 +54,6 @@
width: 110px; width: 110px;
} }
.follow-col { .follow-col {
width: 450px; width: 450px;

36
app/assets/stylesheets/dsfr.scss
View file

@ -1,4 +1,4 @@
@import "colors"; @import 'colors';
// overwrite DSFR style for SimpleFormatComponent, some user use markdown with // overwrite DSFR style for SimpleFormatComponent, some user use markdown with
// ordered list having paragraph between list item // ordered list having paragraph between list item
@ -47,19 +47,19 @@ trix-editor.fr-input {
} }
.fr-ds-combobox__menu { .fr-ds-combobox__menu {
&[data-placement=top] { &[data-placement='top'] {
--origin: translateY(8px); --origin: translateY(8px);
} }
&[data-placement=bottom] { &[data-placement='bottom'] {
--origin: translateY(-8px); --origin: translateY(-8px);
} }
&[data-placement=right] { &[data-placement='right'] {
--origin: translateX(-8px); --origin: translateX(-8px);
} }
&[data-placement=left] { &[data-placement='left'] {
--origin: translateX(8px); --origin: translateX(8px);
} }
@ -118,8 +118,7 @@ trix-editor.fr-input {
// Fix firefox < 80, Safari < 15.4, Chrome < 83 not supporting "appearance: auto" on inputs // Fix firefox < 80, Safari < 15.4, Chrome < 83 not supporting "appearance: auto" on inputs
// This rule was set by DSFR for DSFR design, but broke our legacy forms. // This rule was set by DSFR for DSFR design, but broke our legacy forms.
// scss-lint:disable DuplicateProperty input[type='checkbox'] {
input[type="checkbox"] {
-moz-appearance: checkbox; -moz-appearance: checkbox;
-moz-appearance: auto; -moz-appearance: auto;
@ -127,30 +126,30 @@ input[type="checkbox"] {
-webkit-appearance: auto; -webkit-appearance: auto;
} }
input[type="radio"] { input[type='radio'] {
-moz-appearance: radio; -moz-appearance: radio;
-moz-appearance: auto; -moz-appearance: auto;
-webkit-appearance: radio; -webkit-appearance: radio;
-webkit-appearance: auto; -webkit-appearance: auto;
} }
// scss-lint:enable DuplicateProperty
// remove additional calendar icon on date input already handle by Firefox navigator // remove additional calendar icon on date input already handle by Firefox navigator
@-moz-document url-prefix() { @-moz-document url-prefix() {
.fr-input[type="date"] { .fr-input[type='date'] {
background-image: none; background-image: none;
} }
} }
.fr-btn.fr-btn--icon-left[target="_blank"] { .fr-btn.fr-btn--icon-left[target='_blank'] {
&::after { &::after {
display: none; display: none;
} }
} }
// dans le DSFR il est possible d'avoir un bouton seulement avec une icone mais j'ai du surcharger ici pour eviter d'avoir des marges de l'icone. Je n'ai pas bien compris pourquoi // dans le DSFR il est possible d'avoir un bouton seulement avec une icone mais j'ai du surcharger ici pour eviter d'avoir des marges de l'icone. Je n'ai pas bien compris pourquoi
.fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*=" fr-icon-"].icon-only::after { .fr-btns-group--sm.fr-btns-group--icon-right
.fr-btn[class*=' fr-icon-'].icon-only::after {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
@ -177,11 +176,11 @@ input[type="radio"] {
button.fr-tag-bug { button.fr-tag-bug {
background-color: $blue-france-500; background-color: $blue-france-500;
color: #FFFFFF; color: #ffffff;
&:hover { &:hover {
background-color: #1212FF; background-color: #1212ff;
color: #FFFFFF; color: #ffffff;
} }
.tag-dismiss { .tag-dismiss {
@ -197,11 +196,10 @@ button.fr-tag-bug {
grid-auto-flow: column; grid-auto-flow: column;
} }
.fr-translate__language[aria-current]:not([aria-current="false"]) { .fr-translate__language[aria-current]:not([aria-current='false']) {
display: inline-flex; display: inline-flex;
} }
// on veut ajouter un gris plus clair dans le side_menu // on veut ajouter un gris plus clair dans le side_menu
.fr-sidemenu__item .fr-sidemenu__link.custom-link-grey { .fr-sidemenu__item .fr-sidemenu__link.custom-link-grey {
color: var(--text-disabled-grey); color: var(--text-disabled-grey);
@ -222,11 +220,11 @@ button.fr-tag-bug {
border: 2px solid var(--border-action-high-grey); border: 2px solid var(--border-action-high-grey);
} }
.fr-radio-group input[type="radio"] { .fr-radio-group input[type='radio'] {
opacity: 1; opacity: 1;
} }
.fr-tabs__tab[aria-selected=true]:not(:disabled) { .fr-tabs__tab[aria-selected='true']:not(:disabled) {
border: 5px solid var(--border-action-high-grey); border: 5px solid var(--border-action-high-grey);
} }

5
app/assets/stylesheets/errors_summary.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.errors-summary { .errors-summary {
background: $background-red; background: $background-red;
@ -9,4 +9,3 @@
padding: $default-spacer; padding: $default-spacer;
} }
} }

10
app/assets/stylesheets/exports.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.export-template-preview { .export-template-preview {
// From https://codepen.io/myramoki/pen/xZJjrr // From https://codepen.io/myramoki/pen/xZJjrr
@ -19,7 +19,7 @@
.tree:before, .tree:before,
.tree ul:before { .tree ul:before {
content: ""; content: '';
display: block; display: block;
width: 0; width: 0;
position: absolute; position: absolute;
@ -45,7 +45,7 @@
} }
.tree li:before { .tree li:before {
content: ""; content: '';
display: block; display: block;
width: 10px; // same with indentation width: 10px; // same with indentation
height: 0; height: 0;
@ -61,9 +61,7 @@
} }
.tree li:last-child:before { .tree li:last-child:before {
background: var( background: var(--background-alt-blue-france); // same with body background
--background-alt-blue-france
); // same with body background
height: auto; height: auto;
top: 1em; // (line-height/2) top: 1em; // (line-height/2)
bottom: 0; bottom: 0;

2
app/assets/stylesheets/flex.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.flex { .flex {
display: flex; display: flex;

75
app/assets/stylesheets/forms.scss
View file

@ -1,6 +1,6 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
@import "placeholders"; @import 'placeholders';
.form { .form {
input.unstyled { input.unstyled {
@ -45,14 +45,17 @@
} }
// Keep only bottom margin in nested (consecutive) header sections, ie. first legend for a same level // Keep only bottom margin in nested (consecutive) header sections, ie. first legend for a same level
.fr-fieldset > .fr-fieldset__legend + .fr-fieldset__element > .fr-fieldset:first-of-type .header-section { .fr-fieldset
> .fr-fieldset__legend
+ .fr-fieldset__element
> .fr-fieldset:first-of-type
.header-section {
margin-top: 0 !important; margin-top: 0 !important;
} }
// Don't cumulate margin-bottoms for inlined elements (radio...), because .fr-fieldset has already its own // Don't cumulate margin-bottoms for inlined elements (radio...), because .fr-fieldset has already its own
// This is important because of multilpe conditional hidden elements to not take additional space, // This is important because of multilpe conditional hidden elements to not take additional space,
// but we need the usual margin when there are an error or conditional spinner is visible. // but we need the usual margin when there are an error or conditional spinner is visible.
// scss-lint:disable SingleLinePerSelector
.fr-fieldset__element .fr-fieldset__element
> .fr-fieldset:not(.fr-fieldset--error):not(:has(+ .spinner)) > .fr-fieldset:not(.fr-fieldset--error):not(:has(+ .spinner))
> .fr-fieldset__element.fr-fieldset__element--inline { > .fr-fieldset__element.fr-fieldset__element--inline {
@ -82,7 +85,7 @@
&.required { &.required {
&::after { &::after {
color: $dark-red; color: $dark-red;
content: " *"; content: ' *';
} }
} }
} }
@ -94,7 +97,7 @@
} }
.notice { .notice {
margin-top: - $default-spacer; margin-top: -$default-spacer;
margin-bottom: $default-padding; margin-bottom: $default-padding;
color: var(--text-mention-grey); color: var(--text-mention-grey);
@ -129,7 +132,7 @@
gap: 0.25rem; // Space before mandatory icon because dsfr set display:flex on checkbox label gap: 0.25rem; // Space before mandatory icon because dsfr set display:flex on checkbox label
} }
input[type=checkbox] { input[type='checkbox'] {
position: absolute; position: absolute;
top: 3px; top: 3px;
left: 0px; left: 0px;
@ -169,7 +172,8 @@
} }
label { label {
padding: $default-padding $default-padding $default-padding $default-spacer; padding: $default-padding $default-padding $default-padding
$default-spacer;
border: 1px solid $border-grey; border: 1px solid $border-grey;
border-radius: 4px; border-radius: 4px;
font-weight: normal; font-weight: normal;
@ -198,7 +202,7 @@
font-style: italic; font-style: italic;
} }
input[type=radio] { input[type='radio'] {
margin-bottom: 0; margin-bottom: 0;
} }
@ -208,7 +212,7 @@
} }
} }
.drop_down_other { // scss-lint:disable SelectorFormat .drop_down_other {
label { label {
font-weight: normal; font-weight: normal;
} }
@ -223,7 +227,7 @@
padding: inherit; padding: inherit;
} }
input[type=password], input[type='password'],
select:not(.fr-select) { select:not(.fr-select) {
display: block; display: block;
margin-bottom: 0; margin-bottom: 0;
@ -242,14 +246,13 @@
} }
} }
input[type='checkbox'] {
input[type=checkbox] {
&.small-margin { &.small-margin {
margin-bottom: $default-spacer; margin-bottom: $default-spacer;
} }
} }
input[type=text]:not(.fr-input):not(.fr-select) { input[type='text']:not(.fr-input):not(.fr-select) {
border: solid 1px $border-grey; border: solid 1px $border-grey;
padding: $default-padding; padding: $default-padding;
@ -279,18 +282,18 @@
} }
} }
div.field_with_errors > input { // scss-lint:disable SelectorFormat div.field_with_errors > input {
border: 1px solid $dark-red; border: 1px solid $dark-red;
} }
input[type=text], input[type='text'],
input[type=email], input[type='email'],
input[type=password], input[type='password'],
input[type=date], input[type='date'],
input[type=number], input[type='number'],
input[type=datetime-local], input[type='datetime-local'],
textarea, textarea,
input[type=tel] { input[type='tel'] {
@media (max-width: $two-columns-breakpoint) { @media (max-width: $two-columns-breakpoint) {
width: 100%; width: 100%;
} }
@ -304,17 +307,17 @@
} }
@media (min-width: $two-columns-breakpoint) { @media (min-width: $two-columns-breakpoint) {
input[type=email], input[type='email'],
input[type=password], input[type='password'],
input[type=number], input[type='number'],
input[inputmode=numeric], input[inputmode='numeric'],
input[inputmode=decimal], input[inputmode='decimal'],
input[type=tel] { input[type='tel'] {
max-width: 500px; max-width: 500px;
} }
} }
input[type=date] { input[type='date'] {
max-width: 180px; max-width: 180px;
} }
@ -342,8 +345,8 @@
} }
} }
input[type=checkbox], input[type='checkbox'],
input[type=radio] { input[type='radio'] {
@extend %outline; @extend %outline;
// Firefox tends to display some controls smaller than other browsers. // Firefox tends to display some controls smaller than other browsers.
@ -379,12 +382,14 @@
} }
} }
.utils-repetition-required .row:first-child .utils-repetition-required-destroy-button { .utils-repetition-required
.row:first-child
.utils-repetition-required-destroy-button {
display: none; display: none;
} }
} }
.editable-champ-titre_identite { // scss-lint:disable SelectorFormat .editable-champ-titre_identite {
margin-bottom: 2 * $default-padding; margin-bottom: 2 * $default-padding;
} }
@ -485,7 +490,7 @@
&:before, &:before,
&:after { &:after {
font-weight: bold; font-weight: bold;
content: "/"; content: '/';
} }
} }

6
app/assets/stylesheets/gallery.scss
View file

@ -95,6 +95,10 @@
} }
.lg-sub-html { .lg-sub-html {
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)) !important; background-image: linear-gradient(
180deg,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1)
) !important;
padding: 30px 40px 0 40px !important; padding: 30px 40px 0 40px !important;
} }

2
app/assets/stylesheets/gaps.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.gap-left { .gap-left {
margin-left: $default-spacer; margin-left: $default-spacer;

2
app/assets/stylesheets/groupe_gestionnaire_cards.scss
View file

@ -3,7 +3,7 @@
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
position: relative; position: relative;
} }
.notifications { .notifications {
top: 3px; top: 3px;

4
app/assets/stylesheets/help_dropdown.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.help-dropdown { .help-dropdown {
.dropdown-content { .dropdown-content {

56
app/assets/stylesheets/icons.scss
View file

@ -12,114 +12,114 @@
} }
&.follow { &.follow {
background-image: image-url("icons/follow-folder.svg"); background-image: image-url('icons/follow-folder.svg');
} }
&.unfollow { &.unfollow {
background-image: image-url("icons/unfollow-folder.svg"); background-image: image-url('icons/unfollow-folder.svg');
} }
&.standby { &.standby {
background-image: image-url("icons/standby.svg"); background-image: image-url('icons/standby.svg');
} }
&.unarchive { &.unarchive {
background-image: image-url("icons/unarchive.svg"); background-image: image-url('icons/unarchive.svg');
} }
&.edit { &.edit {
background-image: image-url("icons/edit-folder-blue.svg"); background-image: image-url('icons/edit-folder-blue.svg');
} }
&.bubble { &.bubble {
background-image: image-url("icons/bubble.svg"); background-image: image-url('icons/bubble.svg');
} }
&.attached { &.attached {
background-image: image-url("icons/attached.svg"); background-image: image-url('icons/attached.svg');
} }
&.preview { &.preview {
background-image: image-url("icons/preview.svg"); background-image: image-url('icons/preview.svg');
} }
&.retry { &.retry {
background-image: image-url("icons/retry.svg"); background-image: image-url('icons/retry.svg');
} }
&.download { &.download {
background-image: image-url("icons/download.svg"); background-image: image-url('icons/download.svg');
} }
&.lock { &.lock {
background-image: image-url("icons/lock.svg"); background-image: image-url('icons/lock.svg');
} }
&.add { &.add {
background-image: image-url("icons/add.svg"); background-image: image-url('icons/add.svg');
margin-left: -5px; margin-left: -5px;
margin-right: 0px; margin-right: 0px;
} }
&.justificatif { &.justificatif {
background-image: image-url("icons/justificatif.svg"); background-image: image-url('icons/justificatif.svg');
} }
&.printer { &.printer {
background-image: image-url("icons/printer.svg"); background-image: image-url('icons/printer.svg');
} }
&.account { &.account {
background-image: image-url("icons/account-circle.svg"); background-image: image-url('icons/account-circle.svg');
} }
&.super-admin { &.super-admin {
background-image: image-url("icons/super-admin.svg"); background-image: image-url('icons/super-admin.svg');
} }
&.mail { &.mail {
background-image: image-url("icons/mail.svg"); background-image: image-url('icons/mail.svg');
} }
&.reply { &.reply {
background-image: image-url("icons/reply.svg"); background-image: image-url('icons/reply.svg');
} }
&.search { &.search {
background-image: image-url("icons/search-blue.svg"); background-image: image-url('icons/search-blue.svg');
} }
&.sign-out { &.sign-out {
background-image: image-url("icons/sign-out.svg"); background-image: image-url('icons/sign-out.svg');
} }
&.info { &.info {
background-image: image-url("icons/info-blue.svg"); background-image: image-url('icons/info-blue.svg');
object-fit: contain; object-fit: contain;
} }
&.help { &.help {
background-image: image-url("icons/help.svg"); background-image: image-url('icons/help.svg');
} }
&.phone { &.phone {
background-image: image-url("icons/phone.svg"); background-image: image-url('icons/phone.svg');
} }
&.clock { &.clock {
background-image: image-url("icons/clock.svg"); background-image: image-url('icons/clock.svg');
} }
&.smile { &.smile {
background-image: image-url("icons/smile-regular.svg"); background-image: image-url('icons/smile-regular.svg');
} }
&.frown { &.frown {
background-image: image-url("icons/frown-regular.svg"); background-image: image-url('icons/frown-regular.svg');
} }
&.meh { &.meh {
background-image: image-url("icons/meh-regular.svg"); background-image: image-url('icons/meh-regular.svg');
} }
&.mandatory { &.mandatory {
@ -134,7 +134,6 @@
// 3. Follow the first example : create the class then add the mask-image property with data url you copied // 3. Follow the first example : create the class then add the mask-image property with data url you copied
// 4. Keep this list alphabetic :) // 4. Keep this list alphabetic :)
.fr-icon { .fr-icon {
// scss-lint:disable VendorPrefix
&-align-center { &-align-center {
&:before, &:before,
&:after { &:after {
@ -230,5 +229,4 @@
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
} }
} }
// scss-lint:enable VendorPrefix
} }

6
app/assets/stylesheets/instructeur.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.page-title { .page-title {
font-size: 30px; font-size: 30px;
@ -58,7 +58,7 @@
right: 0; right: 0;
top: 45px; top: 45px;
font-size: 14px; font-size: 14px;
background: #FFFFFF; background: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
border: 1px solid $border-grey; border: 1px solid $border-grey;
min-width: 270px; min-width: 270px;

1
app/assets/stylesheets/invites_form.scss
View file

@ -1,4 +1,3 @@
#invites-form { #invites-form {
@media (min-width: 48em) { @media (min-width: 48em) {
min-width: 400px; min-width: 400px;

6
app/assets/stylesheets/labels.scss
View file

@ -1,12 +1,12 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.label { .label {
display: inline-block; display: inline-block;
padding: 4px $default-spacer; padding: 4px $default-spacer;
background: $dark-grey; background: $dark-grey;
border: 1px solid transparent; border: 1px solid transparent;
color: #FFFFFF; color: #ffffff;
border-radius: 4px; border-radius: 4px;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;

26
app/assets/stylesheets/landing.scss
View file

@ -1,7 +1,7 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
@import "mixins"; @import 'mixins';
@import "placeholders"; @import 'placeholders';
$landing-breakpoint: 1040px; $landing-breakpoint: 1040px;
@ -90,7 +90,7 @@ $landing-breakpoint: 1040px;
@extend %horizontal-list-item; @extend %horizontal-list-item;
max-width: 500px; max-width: 500px;
width: 100%; width: 100%;
background-color: #FFFFFF; background-color: #ffffff;
box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2); box-shadow: 0 4px 16px 0 rgba(153, 153, 153, 0.2);
padding: 24px; padding: 24px;
display: flex; display: flex;
@ -125,7 +125,6 @@ $landing-breakpoint: 1040px;
} }
.landing { .landing {
.numbers { .numbers {
@extend %horizontal-list; @extend %horizontal-list;
justify-content: space-around; justify-content: space-around;
@ -167,8 +166,8 @@ $landing-breakpoint: 1040px;
} }
} }
html[lang="fr"] .landing .number-label-third::before { html[lang='fr'] .landing .number-label-third::before {
content: "de "; content: 'de ';
} }
$users-breakpoint: 950px; $users-breakpoint: 950px;
@ -248,7 +247,6 @@ $users-breakpoint: 950px;
} }
} }
.role-administrations-image { .role-administrations-image {
text-align: right; text-align: right;
@ -289,22 +287,22 @@ $cta-panel-button-border-size: 2px;
.cta-panel-button-white { .cta-panel-button-white {
@include cta-panel-button; @include cta-panel-button;
border: $cta-panel-button-border-size solid #FFFFFF; border: $cta-panel-button-border-size solid #ffffff;
color: #FFFFFF; color: #ffffff;
&:hover { &:hover {
color: #FFFFFF; color: #ffffff;
text-decoration: none; text-decoration: none;
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
} }
&:focus { &:focus {
color: #FFFFFF; color: #ffffff;
text-decoration: none; text-decoration: none;
} }
&:active, &:active,
&:focus { &:focus {
outline: 3px solid #FFFFFF; outline: 3px solid #ffffff;
} }
} }

22
app/assets/stylesheets/layouts.scss
View file

@ -1,14 +1,20 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
@import "placeholders"; @import 'placeholders';
.two-columns { .two-columns {
@media (min-width: $two-columns-breakpoint) { @media (min-width: $two-columns-breakpoint) {
background: linear-gradient(to right, transparent 0%, transparent 50%, var(--background-alt-blue-france) 50%, var(--background-alt-blue-france) 100%); background: linear-gradient(
to right,
transparent 0%,
transparent 50%,
var(--background-alt-blue-france) 50%,
var(--background-alt-blue-france) 100%
);
} }
.columns-container { // TODO: https://github.com/betagouv/demarches-simplifiees.fr/issues/7882, once implemented, we won't need container anymore .columns-container {
// TODO: https://github.com/betagouv/demarches-simplifiees.fr/issues/7882, once implemented, we won't need container anymore
@extend %container; @extend %container;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -54,17 +60,13 @@
.sticky--top { .sticky--top {
position: sticky; position: sticky;
// scss-lint:disable VendorPrefix
position: -webkit-sticky; // This is needed on Safari (tested on 12.1) position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
// scss-lint:enable VendorPrefix
top: 1rem; top: 1rem;
} }
.sticky--bottom { .sticky--bottom {
position: sticky; position: sticky;
// scss-lint:disable VendorPrefix
position: -webkit-sticky; // This is needed on Safari (tested on 12.1) position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
// scss-lint:enable VendorPrefix
bottom: 0; bottom: 0;
z-index: 10; // above DSFR btn which are at 1 z-index: 10; // above DSFR btn which are at 1

12
app/assets/stylesheets/manager.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.hidden { .hidden {
display: none; display: none;
@ -21,7 +21,7 @@
} }
.manager-mandatory { .manager-mandatory {
color: #A10005; color: #a10005;
font-size: 18px; font-size: 18px;
} }
@ -70,19 +70,19 @@
} }
.fr-ds-combobox__menu { .fr-ds-combobox__menu {
&[data-placement=top] { &[data-placement='top'] {
--origin: translateY(8px); --origin: translateY(8px);
} }
&[data-placement=bottom] { &[data-placement='bottom'] {
--origin: translateY(-8px); --origin: translateY(-8px);
} }
&[data-placement=right] { &[data-placement='right'] {
--origin: translateX(-8px); --origin: translateX(-8px);
} }
&[data-placement=left] { &[data-placement='left'] {
--origin: translateX(8px); --origin: translateX(8px);
} }

12
app/assets/stylesheets/map_info.scss
View file

@ -1,10 +1,10 @@
@import "colors"; @import 'colors';
$dep-nothing: #E3E3FD; // blue-france-925 $dep-nothing: #e3e3fd; // blue-france-925
$dep-small: #CACAFB; // blue-france-850 $dep-small: #cacafb; // blue-france-850
$dep-medium: #8585F6; // blue-france-625 $dep-medium: #8585f6; // blue-france-625
$dep-large: #313178; // blue-france-200 $dep-large: #313178; // blue-france-200
$dep-xlarge: #272747; // blue-france-125 $dep-xlarge: #272747; // blue-france-125
#map-svg { #map-svg {
max-width: 100%; max-width: 100%;

2
app/assets/stylesheets/menu_component.scss
View file

@ -1,4 +1,4 @@
@import "colors"; @import 'colors';
.menu-component-header { .menu-component-header {
font-size: 12px; font-size: 12px;

6
app/assets/stylesheets/mesri.scss
View file

@ -1,5 +1,5 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
table.mesri { table.mesri {
margin: 2 * $default-padding 0 $default-padding $default-padding; margin: 2 * $default-padding 0 $default-padding $default-padding;
@ -7,7 +7,7 @@ table.mesri {
caption { caption {
font-weight: bold; font-weight: bold;
margin-left: - $default-padding; margin-left: -$default-padding;
margin-bottom: $default-spacer; margin-bottom: $default-spacer;
text-align: left; text-align: left;
} }

4
app/assets/stylesheets/message.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.message { .message {
display: flex; display: flex;

6
app/assets/stylesheets/messagerie.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.messages-list { .messages-list {
max-height: 350px; max-height: 350px;
@ -23,7 +23,7 @@
margin-bottom: $default-spacer; margin-bottom: $default-spacer;
} }
.form input[type="file"] { .form input[type='file'] {
margin-bottom: 0; margin-bottom: 0;
} }
} }

4
app/assets/stylesheets/motivation.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.motivation { .motivation {
width: 450px; width: 450px;

8
app/assets/stylesheets/new_alert.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.alert { .alert {
padding: 15px; padding: 15px;
@ -8,10 +8,10 @@
.alert-danger { .alert-danger {
background-color: $medium-red; background-color: $medium-red;
color: #FFFFFF; color: #ffffff;
a { a {
color: #FFFFFF; color: #ffffff;
} }
} }

2
app/assets/stylesheets/new_footer.scss
View file

@ -1,4 +1,4 @@
@import "mixins"; @import 'mixins';
.landing-footer { .landing-footer {
@include vertical-padding(72px); @include vertical-padding(72px);

7
app/assets/stylesheets/new_header.scss
View file

@ -27,7 +27,12 @@
} }
// Add space between button edge and content // Add space between button edge and content
.fr-container .fr-header__menu-links .fr-btns-group.flex.align-center .fr-translate.fr-nav .fr-nav__item .fr-translate__btn.fr-btn { .fr-container
.fr-header__menu-links
.fr-btns-group.flex.align-center
.fr-translate.fr-nav
.fr-nav__item
.fr-translate__btn.fr-btn {
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
padding-right: 0.5rem; padding-right: 0.5rem;

2
app/assets/stylesheets/pagination.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.pagination { .pagination {
text-align: center; text-align: center;

34
app/assets/stylesheets/password_complexity.scss
View file

@ -1,11 +1,11 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
$complexity-bg: #EEEEEE; $complexity-bg: #eeeeee;
$complexity-color-0: $lighter-red; $complexity-color-0: $lighter-red;
$complexity-color-1: #FF5000; $complexity-color-1: #ff5000;
$complexity-color-2: $orange; $complexity-color-2: $orange;
$complexity-color-3: #FFD000; $complexity-color-3: #ffd000;
$complexity-color-4: $green; $complexity-color-4: $green;
.password-complexity { .password-complexity {
@ -17,19 +17,35 @@ $complexity-color-4: $green;
border-radius: 8px; border-radius: 8px;
&.complexity-0 { &.complexity-0 {
background: linear-gradient(to right, $complexity-color-0 00%, $complexity-bg 20%); background: linear-gradient(
to right,
$complexity-color-0 00%,
$complexity-bg 20%
);
} }
&.complexity-1 { &.complexity-1 {
background: linear-gradient(to right, $complexity-color-1 20%, $complexity-bg 40%); background: linear-gradient(
to right,
$complexity-color-1 20%,
$complexity-bg 40%
);
} }
&.complexity-2 { &.complexity-2 {
background: linear-gradient(to right, $complexity-color-2 40%, $complexity-bg 60%); background: linear-gradient(
to right,
$complexity-color-2 40%,
$complexity-bg 60%
);
} }
&.complexity-3 { &.complexity-3 {
background: linear-gradient(to right, $complexity-color-3 60%, $complexity-bg 80%); background: linear-gradient(
to right,
$complexity-color-3 60%,
$complexity-bg 80%
);
} }
&.complexity-4 { &.complexity-4 {

2
app/assets/stylesheets/patron.scss
View file

@ -1,4 +1,4 @@
@import "colors"; @import 'colors';
.patron { .patron {
.patron-section { .patron-section {

4
app/assets/stylesheets/personnes_impliquees.scss
View file

@ -1,5 +1,5 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
.personnes-impliquees { .personnes-impliquees {
padding-bottom: 50px; padding-bottom: 50px;

6
app/assets/stylesheets/pole_emploi.scss
View file

@ -1,5 +1,5 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
table.pole-emploi { table.pole-emploi {
margin: 2 * $default-padding 0 $default-padding $default-padding; margin: 2 * $default-padding 0 $default-padding $default-padding;
@ -7,7 +7,7 @@ table.pole-emploi {
caption { caption {
font-weight: bold; font-weight: bold;
margin-left: - $default-padding; margin-left: -$default-padding;
margin-bottom: $default-spacer; margin-bottom: $default-spacer;
text-align: left; text-align: left;
} }

4
app/assets/stylesheets/print.scss
View file

@ -1,4 +1,4 @@
@import "colors"; @import 'colors';
@media print { @media print {
.new-header, .new-header,
@ -16,7 +16,7 @@
} }
body { body {
font-family: "Marianne"; font-family: 'Marianne';
} }
.subtitle { .subtitle {

1
app/assets/stylesheets/procedure_admin.scss
View file

@ -29,5 +29,4 @@
li { li {
font-size: 14px; font-size: 14px;
} }
} }

8
app/assets/stylesheets/procedure_champs_editor.scss
View file

@ -1,6 +1,6 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
@import "placeholders"; @import 'placeholders';
.types-de-champ-editor { .types-de-champ-editor {
> .types-de-champ-block { > .types-de-champ-block {
@ -108,7 +108,7 @@
a { a {
// Remove the icon indicating an external link (for less visual noise) // Remove the icon indicating an external link (for less visual noise)
&[target="_blank"]::after { &[target='_blank']::after {
display: none; display: none;
} }
} }

8
app/assets/stylesheets/procedure_context.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
$procedure-context-breakpoint: $two-columns-breakpoint; $procedure-context-breakpoint: $two-columns-breakpoint;
@ -37,7 +37,7 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
html[data-fr-theme='dark'] & { html[data-fr-theme='dark'] & {
box-sizing: content-box; box-sizing: content-box;
padding: $default-padding / 2; padding: $default-padding / 2;
background: #FFFFFF; background: #ffffff;
} }
@media (min-width: $procedure-context-breakpoint) { @media (min-width: $procedure-context-breakpoint) {
@ -49,7 +49,7 @@ $procedure-context-breakpoint: $two-columns-breakpoint;
.procedure-context-content { .procedure-context-content {
@media (max-width: $procedure-context-breakpoint) { @media (max-width: $procedure-context-breakpoint) {
input[type=submit] { input[type='submit'] {
margin-bottom: 2 * $default-padding; margin-bottom: 2 * $default-padding;
} }
} }

10
app/assets/stylesheets/procedure_form.scss
View file

@ -1,7 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
// scss-lint:disable SelectorFormat
.procedure-form .page-title { .procedure-form .page-title {
text-align: left; text-align: left;
@ -23,7 +21,7 @@
flex: 10; flex: 10;
padding: 0 $default-padding; padding: 0 $default-padding;
input[type=file] { input[type='file'] {
background-color: transparent; // Remove white bg set by DSFR background-color: transparent; // Remove white bg set by DSFR
} }
@ -66,7 +64,7 @@
} }
} }
[data-fr-theme="dark"] .procedure-form__actions { [data-fr-theme='dark'] .procedure-form__actions {
background: var(--background-action-low-blue-france); background: var(--background-action-low-blue-france);
border-top: 1px solid var(--background-action-low-blue-france-hover); border-top: 1px solid var(--background-action-low-blue-france-hover);
} }

8
app/assets/stylesheets/procedure_list.scss
View file

@ -1,6 +1,6 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
@import "mixins"; @import 'mixins';
.procedure-list { .procedure-list {
.procedure-logo-link { .procedure-logo-link {
@ -16,7 +16,6 @@
background-position: 95% 50%; background-position: 95% 50%;
} }
.procedure-stats { .procedure-stats {
list-style-type: none; list-style-type: none;
padding-inline-start: 0; padding-inline-start: 0;
@ -36,7 +35,6 @@
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }
.stats-number, .stats-number,
.stats-legend { .stats-legend {
text-align: center; text-align: center;

8
app/assets/stylesheets/procedure_logo.scss
View file

@ -1,11 +1,11 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
@import "mixins"; @import 'mixins';
.procedure-logo { .procedure-logo {
@include ie-compatible-background-image(); @include ie-compatible-background-image();
background-color: #FFFFFF; // also in dark mode: logos assume transparent pixels are white background-color: #ffffff; // also in dark mode: logos assume transparent pixels are white
background-position: 95% 50%; background-position: 95% 50%;
color: #000000; // alt text when image is not loaded color: #000000; // alt text when image is not loaded
height: 84px; height: 84px;

6
app/assets/stylesheets/procedure_show.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.procedure-header { .procedure-header {
a.header-link { a.header-link {
@ -33,7 +33,7 @@
padding-right: 10px; padding-right: 10px;
background-color: $light-blue; background-color: $light-blue;
border-radius: 4px; border-radius: 4px;
color: #FFFFFF; color: #ffffff;
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
} }

2
app/assets/stylesheets/profil.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
#profil-page { #profil-page {
b { b {

2
app/assets/stylesheets/rich_text.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.rich-text:not(.piece_justificative):not(.titre_identite) { .rich-text:not(.piece_justificative):not(.titre_identite) {
i { i {

8
app/assets/stylesheets/routing_rules_component.scss
View file

@ -1,8 +1,7 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
#routing-rules { #routing-rules {
.routing-rules-table { .routing-rules-table {
table-layout: fixed; table-layout: fixed;
@ -39,7 +38,6 @@
th { th {
text-align: left; text-align: left;
padding: $default-spacer; padding: $default-spacer;
} }
td { td {
@ -50,7 +48,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
input[type=text] { input[type='text'] {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }

14
app/assets/stylesheets/sections.scss
View file

@ -31,32 +31,34 @@
.header-section.section-2::before { .header-section.section-2::before {
counter-increment: h2; counter-increment: h2;
content: counter(h2) ". "; content: counter(h2) '. ';
} }
.header-section.section-3::before { .header-section.section-3::before {
counter-increment: h3; counter-increment: h3;
content: counter(h2) "." counter(h3) ". "; content: counter(h2) '.' counter(h3) '. ';
} }
.header-section.section-4::before { .header-section.section-4::before {
counter-increment: h4; counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". "; content: counter(h2) '.' counter(h3) '.' counter(h4) '. ';
} }
.header-section.section-5::before { .header-section.section-5::before {
counter-increment: h5; counter-increment: h5;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) ". "; content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '. ';
} }
.header-section.section-6::before { .header-section.section-6::before {
counter-increment: h6; counter-increment: h6;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) ". "; content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '.'
counter(h6) '. ';
} }
.header-section.section-7::before { .header-section.section-7::before {
counter-increment: h7; counter-increment: h7;
content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "." counter(h7) ". "; content: counter(h2) '.' counter(h3) '.' counter(h4) '.' counter(h5) '.'
counter(h6) '.' counter(h7) '. ';
} }
.repetition { .repetition {

2
app/assets/stylesheets/services_index.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
#services-index { #services-index {
h1 { h1 {

4
app/assets/stylesheets/site_banner.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.site-banner { .site-banner {
width: 100%; width: 100%;

2
app/assets/stylesheets/spinner.scss
View file

@ -2,7 +2,7 @@
vertical-align: middle; vertical-align: middle;
&::before { &::before {
content: ""; content: '';
display: inline-block; display: inline-block;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;

8
app/assets/stylesheets/status_overview.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.status-timeline { .status-timeline {
display: inline-block; display: inline-block;
@ -29,7 +29,7 @@
// Arrows // Arrows
&:not(:last-child)::after { &:not(:last-child)::after {
content: "▸"; content: '▸';
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
@ -59,7 +59,7 @@
} }
blockquote { blockquote {
quotes: "« " " »" "‘" "’"; quotes: '« ' ' »' '‘' '’';
margin-bottom: $default-padding * 3; margin-bottom: $default-padding * 3;
} }

4
app/assets/stylesheets/sticky.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.fixed-footer { .fixed-footer {
border-top: 2px solid var(--border-plain-blue-france); border-top: 2px solid var(--border-plain-blue-france);
@ -23,7 +23,7 @@
} }
} }
[data-fr-theme="dark"] .fixed-footer { [data-fr-theme='dark'] .fixed-footer {
background-color: var(--background-action-low-blue-france); background-color: var(--background-action-low-blue-france);
} }

4
app/assets/stylesheets/sub_header.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.sub-header { .sub-header {
background-color: var(--background-alt-blue-france); background-color: var(--background-alt-blue-france);

2
app/assets/stylesheets/super_admin.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.super-admin { .super-admin {
margin-top: 40px; margin-top: 40px;

11
app/assets/stylesheets/table.scss
View file

@ -1,8 +1,9 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
@import "mixins"; @import 'mixins';
.table { // TODO : tester de remplacer par l'élément table uniquement .table {
// TODO : tester de remplacer par l'élément table uniquement
width: 100%; width: 100%;
tbody tr { tbody tr {
@ -10,7 +11,7 @@
} }
td, td,
th[scope="row"] { th[scope='row'] {
@include vertical-padding($default-spacer); @include vertical-padding($default-spacer);
vertical-align: middle; vertical-align: middle;
} }

32
app/assets/stylesheets/tags.scss
View file

@ -1,30 +1,22 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
$colors: "green-tilleul-verveine",
"green-bourgeon",
"green-emeraude",
"green-menthe",
"blue-ecume",
"purple-glycine",
"pink-macaron",
"yellow-tournesol",
"brown-cafe-creme",
"beige-gris-galet";
$colors: 'green-tilleul-verveine', 'green-bourgeon', 'green-emeraude',
'green-menthe', 'blue-ecume', 'purple-glycine', 'pink-macaron',
'yellow-tournesol', 'brown-cafe-creme', 'beige-gris-galet';
@each $color in $colors { @each $color in $colors {
.fr-tag--#{$color}, .fr-tag--#{$color},
a.fr-tag--#{$color}, a.fr-tag--#{$color},
button.fr-tag--#{$color}, button.fr-tag--#{$color},
input[type=button].fr-tag--#{$color}, input[type='button'].fr-tag--#{$color},
input[type=image].fr-tag--#{$color}, input[type='image'].fr-tag--#{$color},
input[type=reset].fr-tag--#{$color}, input[type='reset'].fr-tag--#{$color},
input[type=submit].fr-tag--#{$color} { input[type='submit'].fr-tag--#{$color} {
--idle: transparent; --idle: transparent;
--hover: var(--background-action-low-#{$color}-hover); --hover: var(--background-action-low-#{$color}-hover);
--active: var(--background-action-low-#{$color}-active); --active: var(--background-action-low-#{$color}-active);
background-color: var(--background-action-low-#{$color}); background-color: var(--background-action-low-#{$color});
color: var(--text-action-high-#{$color}); color: var(--text-action-high-#{$color});
} }
} }

2
app/assets/stylesheets/tiptap_editor.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.tiptap-editor { .tiptap-editor {
// Tags // Tags

2
app/assets/stylesheets/title.scss
View file

@ -1,4 +1,4 @@
@import "constants"; @import 'constants';
.huge-title { .huge-title {
text-align: center; text-align: center;

8
app/assets/stylesheets/toggle-switch.scss
View file

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
// Toggle-switch // Toggle-switch
// The switch - the box around // The switch - the box around
@ -22,7 +22,7 @@
} }
// Hide default HTML checkbox // Hide default HTML checkbox
.form label.toggle-switch input[type="checkbox"] { .form label.toggle-switch input[type='checkbox'] {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
@ -45,7 +45,7 @@
.toggle-switch-control::before { .toggle-switch-control::before {
position: absolute; position: absolute;
content: ""; content: '';
height: 20px; height: 20px;
width: 20px; width: 20px;
left: 1px; left: 1px;

2
lib/tasks/lint.rake
View file

@ -3,11 +3,11 @@
task :lint do task :lint do
sh "bundle exec rubocop --parallel" sh "bundle exec rubocop --parallel"
sh "bundle exec haml-lint app/views/ app/components/" sh "bundle exec haml-lint app/views/ app/components/"
sh "bundle exec scss-lint app/assets/stylesheets/"
sh "bundle exec i18n-tasks missing --locales fr" sh "bundle exec i18n-tasks missing --locales fr"
sh "bundle exec i18n-tasks unused --locale en" # TODO: check for all locales sh "bundle exec i18n-tasks unused --locale en" # TODO: check for all locales
sh "bundle exec i18n-tasks check-consistent-interpolations" sh "bundle exec i18n-tasks check-consistent-interpolations"
sh "bundle exec brakeman --no-pager" sh "bundle exec brakeman --no-pager"
sh "bun lint:js" sh "bun lint:js"
sh "bun lint:types" sh "bun lint:types"
sh "bun lint:css"
end end

2
package.json
View file

@ -109,6 +109,8 @@
"clean": "del tmp public/graphql && bin/vite clobber", "clean": "del tmp public/graphql && bin/vite clobber",
"lint:js": "eslint --ext .js,.jsx,.ts,.tsx ./app/javascript", "lint:js": "eslint --ext .js,.jsx,.ts,.tsx ./app/javascript",
"lint:types": "tsc", "lint:types": "tsc",
"lint:css": "prettier app/assets/stylesheets --check",
"lint:css:fix": "prettier app/assets/stylesheets --write",
"graphql:doc:build": "RAILS_ENV=production bin/rake graphql:schema:idl && spectaql spectaql_config.yml", "graphql:doc:build": "RAILS_ENV=production bin/rake graphql:schema:idl && spectaql spectaql_config.yml",
"postinstall": "patch-package", "postinstall": "patch-package",
"test": "vitest", "test": "vitest",