fix(css): apply prettier

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,6 +1,6 @@
@import "colors";
@import "mixins";
@import "constants";
@import 'colors';
@import 'mixins';
@import 'constants';
%horizontal-list {
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);
max-width: $page-width + 2 * $default-padding;
margin-left: auto;

View file

@ -11,9 +11,9 @@
trix-editor {
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;
}

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
@import "colors";
@import "constants";
@import 'colors';
@import 'constants';
.attachment-error,
.attachment-upload-error {
@ -8,7 +8,7 @@
&::before {
box-shadow: inset 2px 0 0 0 var(--border-plain-error);
height: 100%;
content: "";
content: '';
left: -0.75rem;
position: absolute;
width: 2px;
@ -26,7 +26,7 @@
}
.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 {
list-style-type: none;
padding-inline-start: 0;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,4 +1,4 @@
@import "colors";
@import 'colors';
.direct-upload {
display: inline-block;
@ -20,7 +20,9 @@
left: 0;
bottom: 0;
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);
}
@ -36,7 +38,7 @@
border-color: var(--border-plain-error);
}
input[type=file][data-direct-upload-url][disabled],
input[type=file][data-auto-attach-url][disabled] {
input[type='file'][data-direct-upload-url][disabled],
input[type='file'][data-auto-attach-url][disabled] {
display: none;
}

View file

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

View file

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

View file

@ -1,9 +1,9 @@
@import "colors";
@import "constants";
@import 'colors';
@import 'constants';
$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);
border: none;
}
@ -70,9 +70,9 @@ $dossier-actions-bar-border-width: 1px;
padding-right: $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-right-radius: 5px;
border-bottom: none;

View file

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

View file

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

View file

@ -1,5 +1,5 @@
@import "colors";
@import "constants";
@import 'colors';
@import 'constants';
.table.dossiers-table {
font-size: 14px;
@ -22,7 +22,8 @@
// 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
// (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;
}
@ -53,7 +54,6 @@
width: 110px;
}
.follow-col {
width: 450px;

View file

@ -1,4 +1,4 @@
@import "colors";
@import 'colors';
// overwrite DSFR style for SimpleFormatComponent, some user use markdown with
// ordered list having paragraph between list item
@ -47,19 +47,19 @@ trix-editor.fr-input {
}
.fr-ds-combobox__menu {
&[data-placement=top] {
&[data-placement='top'] {
--origin: translateY(8px);
}
&[data-placement=bottom] {
&[data-placement='bottom'] {
--origin: translateY(-8px);
}
&[data-placement=right] {
&[data-placement='right'] {
--origin: translateX(-8px);
}
&[data-placement=left] {
&[data-placement='left'] {
--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
// 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: auto;
@ -126,7 +126,7 @@ input[type="checkbox"] {
-webkit-appearance: auto;
}
input[type="radio"] {
input[type='radio'] {
-moz-appearance: radio;
-moz-appearance: auto;
@ -136,19 +136,20 @@ input[type="radio"] {
// remove additional calendar icon on date input already handle by Firefox navigator
@-moz-document url-prefix() {
.fr-input[type="date"] {
.fr-input[type='date'] {
background-image: none;
}
}
.fr-btn.fr-btn--icon-left[target="_blank"] {
.fr-btn.fr-btn--icon-left[target='_blank'] {
&::after {
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
.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-right: 0;
}
@ -175,11 +176,11 @@ input[type="radio"] {
button.fr-tag-bug {
background-color: $blue-france-500;
color: #FFFFFF;
color: #ffffff;
&:hover {
background-color: #1212FF;
color: #FFFFFF;
background-color: #1212ff;
color: #ffffff;
}
.tag-dismiss {
@ -195,11 +196,10 @@ button.fr-tag-bug {
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;
}
// on veut ajouter un gris plus clair dans le side_menu
.fr-sidemenu__item .fr-sidemenu__link.custom-link-grey {
color: var(--text-disabled-grey);
@ -220,11 +220,11 @@ button.fr-tag-bug {
border: 2px solid var(--border-action-high-grey);
}
.fr-radio-group input[type="radio"] {
.fr-radio-group input[type='radio'] {
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);
}

View file

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

View file

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

View file

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

View file

@ -1,6 +1,6 @@
@import "constants";
@import "colors";
@import "placeholders";
@import 'constants';
@import 'colors';
@import 'placeholders';
.form {
input.unstyled {
@ -45,7 +45,11 @@
}
// 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;
}
@ -81,7 +85,7 @@
&.required {
&::after {
color: $dark-red;
content: " *";
content: ' *';
}
}
}
@ -93,7 +97,7 @@
}
.notice {
margin-top: - $default-spacer;
margin-top: -$default-spacer;
margin-bottom: $default-padding;
color: var(--text-mention-grey);
@ -128,7 +132,7 @@
gap: 0.25rem; // Space before mandatory icon because dsfr set display:flex on checkbox label
}
input[type=checkbox] {
input[type='checkbox'] {
position: absolute;
top: 3px;
left: 0px;
@ -168,7 +172,8 @@
}
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-radius: 4px;
font-weight: normal;
@ -197,7 +202,7 @@
font-style: italic;
}
input[type=radio] {
input[type='radio'] {
margin-bottom: 0;
}
@ -222,7 +227,7 @@
padding: inherit;
}
input[type=password],
input[type='password'],
select:not(.fr-select) {
display: block;
margin-bottom: 0;
@ -241,14 +246,13 @@
}
}
input[type=checkbox] {
input[type='checkbox'] {
&.small-margin {
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;
padding: $default-padding;
@ -282,14 +286,14 @@
border: 1px solid $dark-red;
}
input[type=text],
input[type=email],
input[type=password],
input[type=date],
input[type=number],
input[type=datetime-local],
input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
input[type='number'],
input[type='datetime-local'],
textarea,
input[type=tel] {
input[type='tel'] {
@media (max-width: $two-columns-breakpoint) {
width: 100%;
}
@ -303,17 +307,17 @@
}
@media (min-width: $two-columns-breakpoint) {
input[type=email],
input[type=password],
input[type=number],
input[inputmode=numeric],
input[inputmode=decimal],
input[type=tel] {
input[type='email'],
input[type='password'],
input[type='number'],
input[inputmode='numeric'],
input[inputmode='decimal'],
input[type='tel'] {
max-width: 500px;
}
}
input[type=date] {
input[type='date'] {
max-width: 180px;
}
@ -341,8 +345,8 @@
}
}
input[type=checkbox],
input[type=radio] {
input[type='checkbox'],
input[type='radio'] {
@extend %outline;
// 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;
}
}
@ -484,7 +490,7 @@
&:before,
&:after {
font-weight: bold;
content: "/";
content: '/';
}
}

View file

@ -95,6 +95,10 @@
}
.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;
}

View file

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

View file

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

View file

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

View file

@ -12,114 +12,114 @@
}
&.follow {
background-image: image-url("icons/follow-folder.svg");
background-image: image-url('icons/follow-folder.svg');
}
&.unfollow {
background-image: image-url("icons/unfollow-folder.svg");
background-image: image-url('icons/unfollow-folder.svg');
}
&.standby {
background-image: image-url("icons/standby.svg");
background-image: image-url('icons/standby.svg');
}
&.unarchive {
background-image: image-url("icons/unarchive.svg");
background-image: image-url('icons/unarchive.svg');
}
&.edit {
background-image: image-url("icons/edit-folder-blue.svg");
background-image: image-url('icons/edit-folder-blue.svg');
}
&.bubble {
background-image: image-url("icons/bubble.svg");
background-image: image-url('icons/bubble.svg');
}
&.attached {
background-image: image-url("icons/attached.svg");
background-image: image-url('icons/attached.svg');
}
&.preview {
background-image: image-url("icons/preview.svg");
background-image: image-url('icons/preview.svg');
}
&.retry {
background-image: image-url("icons/retry.svg");
background-image: image-url('icons/retry.svg');
}
&.download {
background-image: image-url("icons/download.svg");
background-image: image-url('icons/download.svg');
}
&.lock {
background-image: image-url("icons/lock.svg");
background-image: image-url('icons/lock.svg');
}
&.add {
background-image: image-url("icons/add.svg");
background-image: image-url('icons/add.svg');
margin-left: -5px;
margin-right: 0px;
}
&.justificatif {
background-image: image-url("icons/justificatif.svg");
background-image: image-url('icons/justificatif.svg');
}
&.printer {
background-image: image-url("icons/printer.svg");
background-image: image-url('icons/printer.svg');
}
&.account {
background-image: image-url("icons/account-circle.svg");
background-image: image-url('icons/account-circle.svg');
}
&.super-admin {
background-image: image-url("icons/super-admin.svg");
background-image: image-url('icons/super-admin.svg');
}
&.mail {
background-image: image-url("icons/mail.svg");
background-image: image-url('icons/mail.svg');
}
&.reply {
background-image: image-url("icons/reply.svg");
background-image: image-url('icons/reply.svg');
}
&.search {
background-image: image-url("icons/search-blue.svg");
background-image: image-url('icons/search-blue.svg');
}
&.sign-out {
background-image: image-url("icons/sign-out.svg");
background-image: image-url('icons/sign-out.svg');
}
&.info {
background-image: image-url("icons/info-blue.svg");
background-image: image-url('icons/info-blue.svg');
object-fit: contain;
}
&.help {
background-image: image-url("icons/help.svg");
background-image: image-url('icons/help.svg');
}
&.phone {
background-image: image-url("icons/phone.svg");
background-image: image-url('icons/phone.svg');
}
&.clock {
background-image: image-url("icons/clock.svg");
background-image: image-url('icons/clock.svg');
}
&.smile {
background-image: image-url("icons/smile-regular.svg");
background-image: image-url('icons/smile-regular.svg');
}
&.frown {
background-image: image-url("icons/frown-regular.svg");
background-image: image-url('icons/frown-regular.svg');
}
&.meh {
background-image: image-url("icons/meh-regular.svg");
background-image: image-url('icons/meh-regular.svg');
}
&.mandatory {

View file

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

View file

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

View file

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

View file

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

View file

@ -1,14 +1,20 @@
@import "colors";
@import "constants";
@import "placeholders";
@import 'colors';
@import 'constants';
@import 'placeholders';
.two-columns {
@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;
display: flex;
flex-direction: column;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -27,7 +27,12 @@
}
// 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-left: 0;
padding-right: 0.5rem;

View file

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

View file

@ -1,11 +1,11 @@
@import "colors";
@import "constants";
@import 'colors';
@import 'constants';
$complexity-bg: #EEEEEE;
$complexity-bg: #eeeeee;
$complexity-color-0: $lighter-red;
$complexity-color-1: #FF5000;
$complexity-color-1: #ff5000;
$complexity-color-2: $orange;
$complexity-color-3: #FFD000;
$complexity-color-3: #ffd000;
$complexity-color-4: $green;
.password-complexity {
@ -17,19 +17,35 @@ $complexity-color-4: $green;
border-radius: 8px;
&.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 {
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 {
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 {
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 {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,5 +1,5 @@
@import "colors";
@import "constants";
@import 'colors';
@import 'constants';
.procedure-form .page-title {
text-align: left;
@ -21,7 +21,7 @@
flex: 10;
padding: 0 $default-padding;
input[type=file] {
input[type='file'] {
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);
border-top: 1px solid var(--background-action-low-blue-france-hover);
}

View file

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

View file

@ -1,11 +1,11 @@
@import "colors";
@import "constants";
@import "mixins";
@import 'colors';
@import 'constants';
@import 'mixins';
.procedure-logo {
@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%;
color: #000000; // alt text when image is not loaded
height: 84px;

View file

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

View file

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

View file

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

View file

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

View file

@ -31,32 +31,34 @@
.header-section.section-2::before {
counter-increment: h2;
content: counter(h2) ". ";
content: counter(h2) '. ';
}
.header-section.section-3::before {
counter-increment: h3;
content: counter(h2) "." counter(h3) ". ";
content: counter(h2) '.' counter(h3) '. ';
}
.header-section.section-4::before {
counter-increment: h4;
content: counter(h2) "." counter(h3) "." counter(h4) ". ";
content: counter(h2) '.' counter(h3) '.' counter(h4) '. ';
}
.header-section.section-5::before {
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 {
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 {
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 {

View file

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

View file

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

View file

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

View file

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

View file

@ -1,4 +1,4 @@
@import "constants";
@import 'constants';
.fixed-footer {
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);
}

View file

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

View file

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

View file

@ -1,8 +1,9 @@
@import "colors";
@import "constants";
@import "mixins";
@import 'colors';
@import 'constants';
@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%;
tbody tr {
@ -10,7 +11,7 @@
}
td,
th[scope="row"] {
th[scope='row'] {
@include vertical-padding($default-spacer);
vertical-align: middle;
}

View file

@ -1,26 +1,18 @@
@import "colors";
@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";
@import 'colors';
@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';
@each $color in $colors {
.fr-tag--#{$color},
a.fr-tag--#{$color},
button.fr-tag--#{$color},
input[type=button].fr-tag--#{$color},
input[type=image].fr-tag--#{$color},
input[type=reset].fr-tag--#{$color},
input[type=submit].fr-tag--#{$color} {
input[type='button'].fr-tag--#{$color},
input[type='image'].fr-tag--#{$color},
input[type='reset'].fr-tag--#{$color},
input[type='submit'].fr-tag--#{$color} {
--idle: transparent;
--hover: var(--background-action-low-#{$color}-hover);
--active: var(--background-action-low-#{$color}-active);

View file

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

View file

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

View file

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

View file

@ -110,6 +110,7 @@
"lint:js": "eslint --ext .js,.jsx,.ts,.tsx ./app/javascript",
"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",
"postinstall": "patch-package",
"test": "vitest",