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

fix(css): apply prettier

Browse source
This commit is contained in:
Colin Darie 2024-11-05 19:02:31 +01:00
parent 8e3ca472ff
commit 0eb28b9607
No known key found for this signature in database
GPG key ID: 4FB865FDBCA4BCC4
91 changed files with 446 additions and 396 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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;

43
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;
@ -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;

4
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;

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;

4
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;

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,

10
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;
} }
@ -70,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;

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

@ -1,5 +1,5 @@
@import "constants"; @import 'constants';
@import "colors"; @import 'colors';
.dossier-link { .dossier-link {
.help-block > p { .help-block > p {

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;

34
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,7 +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.
input[type="checkbox"] { input[type='checkbox'] {
-moz-appearance: checkbox; -moz-appearance: checkbox;
-moz-appearance: auto; -moz-appearance: auto;
@ -126,7 +126,7 @@ 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;
@ -136,19 +136,20 @@ input[type="radio"] {
// 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;
} }
@ -175,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 {
@ -195,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);
@ -220,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;

66
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,7 +45,11 @@
} }
// 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;
} }
@ -81,7 +85,7 @@
&.required { &.required {
&::after { &::after {
color: $dark-red; color: $dark-red;
content: " *"; content: ' *';
} }
} }
} }
@ -128,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;
@ -168,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;
@ -197,7 +202,7 @@
font-style: italic; font-style: italic;
} }
input[type=radio] { input[type='radio'] {
margin-bottom: 0; margin-bottom: 0;
} }
@ -222,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;
@ -241,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;
@ -282,14 +286,14 @@
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%;
} }
@ -303,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;
} }
@ -341,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.
@ -378,7 +382,9 @@
} }
} }
.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;
} }
} }
@ -484,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;

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 {

54
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 {

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;
} }
} }

18
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;

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);
} }

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

@ -1,8 +1,8 @@
@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

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;

4
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;

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;

4
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;

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;
} }
} }

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

@ -1,5 +1,5 @@
@import "colors"; @import 'colors';
@import "constants"; @import 'constants';
.procedure-form .page-title { .procedure-form .page-title {
text-align: left; text-align: left;
@ -21,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
} }
@ -64,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;
} }

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

@ -1,26 +1,18 @@
@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);

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;

1
package.json
View file

@ -110,6 +110,7 @@
"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": "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",