2024-11-05 19:02:31 +01:00
|
|
|
@import 'colors';
|
|
|
|
@import 'constants';
|
|
|
|
@import 'placeholders';
|
2017-06-14 14:39:28 +02:00
|
|
|
|
|
|
|
.button {
|
2019-11-14 09:22:02 +01:00
|
|
|
@extend %outline;
|
|
|
|
|
2017-06-14 14:39:28 +02:00
|
|
|
display: inline-block;
|
|
|
|
padding: 8px 16px;
|
|
|
|
border-radius: 30px;
|
|
|
|
border: 1px solid $border-grey;
|
|
|
|
font-size: 14px;
|
2017-08-30 15:04:18 +02:00
|
|
|
line-height: 20px;
|
2024-11-05 19:02:31 +01:00
|
|
|
background-color: #ffffff;
|
2017-06-14 14:39:28 +02:00
|
|
|
color: $black;
|
2018-07-24 18:25:10 +02:00
|
|
|
text-align: center;
|
2017-07-20 10:33:21 +02:00
|
|
|
-webkit-appearance: none;
|
2022-11-11 12:26:07 +01:00
|
|
|
background-image: none; // Remove DSFR underline
|
2017-06-14 14:39:28 +02:00
|
|
|
|
2018-07-18 16:20:51 +02:00
|
|
|
&:hover:not(:disabled) {
|
|
|
|
cursor: pointer;
|
2017-06-14 14:39:28 +02:00
|
|
|
background: $light-grey;
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
2018-07-18 16:20:51 +02:00
|
|
|
&:disabled {
|
|
|
|
opacity: 0.5;
|
|
|
|
filter: saturate(50%);
|
|
|
|
}
|
|
|
|
|
2017-06-14 14:39:28 +02:00
|
|
|
&.primary {
|
2024-11-05 19:02:31 +01:00
|
|
|
color: #ffffff;
|
2021-08-25 17:32:41 +02:00
|
|
|
border-color: $blue-france-700;
|
|
|
|
background-color: $blue-france-700;
|
2017-06-14 14:39:28 +02:00
|
|
|
|
2018-07-18 16:20:51 +02:00
|
|
|
&:hover:not(:disabled) {
|
2021-08-25 17:32:41 +02:00
|
|
|
background: $blue-france-500;
|
2017-06-14 14:39:28 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.secondary {
|
2021-08-25 17:32:41 +02:00
|
|
|
color: $blue-france-700;
|
|
|
|
border-color: $blue-france-700;
|
2024-11-05 19:02:31 +01:00
|
|
|
background-color: #ffffff;
|
2017-06-14 14:39:28 +02:00
|
|
|
|
2018-07-18 16:20:51 +02:00
|
|
|
&:hover:not(:disabled) {
|
2024-11-05 19:02:31 +01:00
|
|
|
color: #ffffff;
|
2021-08-25 17:32:41 +02:00
|
|
|
background: $blue-france-700;
|
2017-06-14 14:39:28 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-07-24 17:43:28 +02:00
|
|
|
&.danger {
|
|
|
|
color: $black;
|
|
|
|
border-color: $border-grey;
|
2024-11-05 19:02:31 +01:00
|
|
|
background-color: #ffffff;
|
2018-07-24 17:43:28 +02:00
|
|
|
|
2019-03-12 14:22:15 +01:00
|
|
|
&:hover:not(:disabled) {
|
2024-11-05 19:02:31 +01:00
|
|
|
color: #ffffff;
|
2018-07-24 17:43:28 +02:00
|
|
|
border-color: $medium-red;
|
|
|
|
background-color: $medium-red;
|
2019-01-16 15:34:38 +01:00
|
|
|
|
|
|
|
> .icon {
|
2019-03-11 17:26:44 +01:00
|
|
|
filter: contrast(0) brightness(100);
|
2019-01-16 15:34:38 +01:00
|
|
|
}
|
2018-07-24 17:43:28 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-11-24 10:37:27 +01:00
|
|
|
&.accepted {
|
2024-11-05 19:02:31 +01:00
|
|
|
color: #ffffff;
|
2017-09-14 10:36:01 +02:00
|
|
|
border-color: $green;
|
|
|
|
background-color: $green;
|
|
|
|
|
2018-07-18 16:20:51 +02:00
|
|
|
&:hover:not(:disabled) {
|
2017-09-14 10:36:01 +02:00
|
|
|
color: $green;
|
2024-11-05 19:02:31 +01:00
|
|
|
background-color: #ffffff;
|
2017-09-14 10:36:01 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-11-24 19:26:24 +01:00
|
|
|
&.without-continuation {
|
2024-11-05 19:02:31 +01:00
|
|
|
color: #ffffff;
|
2017-11-24 19:26:24 +01:00
|
|
|
border-color: $black;
|
|
|
|
background-color: $black;
|
|
|
|
|
2018-07-18 16:20:51 +02:00
|
|
|
&:hover:not(:disabled) {
|
2017-11-24 19:26:24 +01:00
|
|
|
color: $black;
|
2024-11-05 19:02:31 +01:00
|
|
|
background-color: #ffffff;
|
2017-11-24 19:26:24 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.refused {
|
2024-11-05 19:02:31 +01:00
|
|
|
color: #ffffff;
|
2017-11-24 19:26:24 +01:00
|
|
|
border-color: $dark-red;
|
|
|
|
background-color: $dark-red;
|
|
|
|
|
2018-07-18 16:20:51 +02:00
|
|
|
&:hover:not(:disabled) {
|
2017-11-24 19:26:24 +01:00
|
|
|
color: $dark-red;
|
2024-11-05 19:02:31 +01:00
|
|
|
background-color: #ffffff;
|
2017-11-24 19:26:24 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-02-18 17:42:32 +01:00
|
|
|
&.small {
|
|
|
|
line-height: 14px;
|
|
|
|
padding: 5px 10px 6px 10px;
|
|
|
|
}
|
|
|
|
|
2017-06-14 14:39:28 +02:00
|
|
|
&.large {
|
|
|
|
font-size: 18px;
|
2017-08-30 15:04:18 +02:00
|
|
|
line-height: 26px;
|
2017-06-14 14:39:28 +02:00
|
|
|
padding: 15px 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.expand {
|
|
|
|
width: 100%;
|
|
|
|
}
|
2017-07-11 15:58:31 +02:00
|
|
|
|
2017-10-16 18:23:46 +02:00
|
|
|
> .icon {
|
2017-07-11 15:58:31 +02:00
|
|
|
width: 18px;
|
|
|
|
height: 18px;
|
|
|
|
background-size: 18px 18px;
|
2019-01-17 12:08:37 +01:00
|
|
|
vertical-align: text-bottom;
|
2017-07-11 15:58:31 +02:00
|
|
|
margin-right: $default-spacer;
|
|
|
|
}
|
2017-08-02 16:20:01 +02:00
|
|
|
|
2018-09-11 17:51:44 +02:00
|
|
|
&.icon-only {
|
|
|
|
padding: 9px 16px;
|
2017-08-02 16:20:01 +02:00
|
|
|
|
2018-09-11 17:51:44 +02:00
|
|
|
.icon {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-04-28 16:05:44 +02:00
|
|
|
.icon-size {
|
|
|
|
width: 18px;
|
|
|
|
height: 18px;
|
|
|
|
}
|
|
|
|
|
2021-07-06 15:23:55 +02:00
|
|
|
.icon-size-big {
|
|
|
|
width: 25px;
|
|
|
|
height: 25px;
|
|
|
|
}
|
|
|
|
|
2023-02-23 11:04:15 +01:00
|
|
|
.instruction-button {
|
2019-11-19 14:22:53 +01:00
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
2018-09-11 17:51:44 +02:00
|
|
|
.dropdown {
|
|
|
|
display: inline-block;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
.dropdown-button {
|
2019-03-26 17:35:28 +01:00
|
|
|
white-space: nowrap;
|
|
|
|
|
2024-11-05 19:02:31 +01:00
|
|
|
[aria-hidden='true'].fr-ml-2v::after {
|
|
|
|
content: '▾';
|
2017-08-02 16:20:01 +02:00
|
|
|
}
|
|
|
|
|
2017-11-23 18:00:13 +01:00
|
|
|
&.icon-only {
|
|
|
|
&::after {
|
|
|
|
margin-left: 2px;
|
2021-09-20 15:04:24 +02:00
|
|
|
color: $blue-france-500;
|
2017-11-23 18:00:13 +01:00
|
|
|
}
|
|
|
|
}
|
2017-08-02 16:20:01 +02:00
|
|
|
}
|
2017-10-05 23:27:02 +02:00
|
|
|
|
2018-09-11 17:51:44 +02:00
|
|
|
.dropdown-content {
|
|
|
|
display: none;
|
|
|
|
}
|
2017-10-23 15:19:23 +02:00
|
|
|
|
2018-09-11 17:51:44 +02:00
|
|
|
&.open .dropdown-content {
|
|
|
|
display: block;
|
2017-10-05 23:27:02 +02:00
|
|
|
}
|
2017-08-02 16:20:01 +02:00
|
|
|
}
|
|
|
|
|
2024-11-05 19:02:31 +01:00
|
|
|
[data-fr-theme='dark'] .dropdown-content {
|
2023-11-14 11:24:15 +01:00
|
|
|
border: none;
|
|
|
|
background: var(--background-action-low-blue-france);
|
|
|
|
}
|
|
|
|
|
2024-11-05 19:02:31 +01:00
|
|
|
[data-fr-theme='dark'] .dropdown-items {
|
2023-11-14 11:24:15 +01:00
|
|
|
li {
|
|
|
|
&:not(.inactive) {
|
|
|
|
&:hover,
|
|
|
|
&.selected {
|
|
|
|
background: var(--background-action-low-blue-france-hover);
|
2023-11-13 18:10:35 +01:00
|
|
|
}
|
|
|
|
}
|
2023-11-14 11:24:15 +01:00
|
|
|
|
|
|
|
&.form-inside {
|
|
|
|
background-color: var(--background-action-low-blue-france);
|
|
|
|
}
|
2023-11-13 18:10:35 +01:00
|
|
|
}
|
2023-11-14 11:24:15 +01:00
|
|
|
}
|
2023-11-13 18:10:35 +01:00
|
|
|
|
2017-08-02 16:20:01 +02:00
|
|
|
.dropdown-content {
|
|
|
|
border: 1px solid $border-grey;
|
2024-11-05 19:02:31 +01:00
|
|
|
background: #ffffff;
|
2017-08-02 16:20:01 +02:00
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
2018-07-25 14:37:15 +02:00
|
|
|
text-align: left;
|
2017-08-02 16:20:01 +02:00
|
|
|
top: 5 * $default-spacer;
|
|
|
|
cursor: default;
|
2023-06-28 11:53:41 +02:00
|
|
|
z-index: 11;
|
2022-10-06 13:02:25 +02:00
|
|
|
list-style: none;
|
|
|
|
|
|
|
|
a {
|
|
|
|
background-image: none; // remove DSFR underline
|
|
|
|
}
|
2017-09-14 10:36:01 +02:00
|
|
|
|
2017-09-28 11:04:18 +02:00
|
|
|
&.left-aligned {
|
|
|
|
left: 0;
|
|
|
|
right: unset;
|
|
|
|
}
|
|
|
|
|
2017-09-14 10:36:01 +02:00
|
|
|
&.terminated {
|
|
|
|
width: 600px;
|
|
|
|
color: $black;
|
|
|
|
padding: $default-padding;
|
|
|
|
|
2019-07-01 16:16:40 +02:00
|
|
|
.title {
|
2017-09-14 10:36:01 +02:00
|
|
|
font-size: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.dossier-motivation {
|
2017-11-22 17:59:47 +01:00
|
|
|
margin: $default-padding 0;
|
2017-09-14 10:36:01 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.attestation {
|
|
|
|
margin: $default-padding 0;
|
2020-06-11 14:33:15 +02:00
|
|
|
color: $dark-grey;
|
2017-09-14 10:36:01 +02:00
|
|
|
}
|
|
|
|
}
|
2017-08-02 16:20:01 +02:00
|
|
|
}
|
|
|
|
|
2022-12-20 11:19:08 +01:00
|
|
|
ul.dropdown-items {
|
|
|
|
padding-inline-start: 0;
|
|
|
|
list-style: none;
|
2023-07-12 10:48:13 +02:00
|
|
|
margin-top: 0;
|
|
|
|
margin-bottom: 0;
|
2022-12-20 11:19:08 +01:00
|
|
|
}
|
|
|
|
|
2024-08-05 12:06:27 +02:00
|
|
|
// Apply custom styles to DSFR fr-translate component
|
|
|
|
.fr-translate__btn.fr-btn.help-btn::before {
|
|
|
|
content: none;
|
|
|
|
}
|
|
|
|
|
2024-08-05 15:41:08 +02:00
|
|
|
.help-content.fr-menu ul.fr-menu__list {
|
2024-08-08 11:23:56 +02:00
|
|
|
--text-decoration: underline;
|
2024-08-05 12:06:27 +02:00
|
|
|
text-align: left;
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
|
|
@media (min-width: 62em) {
|
|
|
|
font-size: 0.875rem;
|
|
|
|
padding: 0;
|
|
|
|
width: 360px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-08-05 15:41:08 +02:00
|
|
|
.help-content.fr-menu ul.fr-menu__list li {
|
2024-08-05 12:06:27 +02:00
|
|
|
padding: 0.75rem 1rem;
|
|
|
|
|
|
|
|
@media (min-width: 62em) {
|
|
|
|
padding-right: 1rem;
|
|
|
|
padding-left: 1rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-08-05 15:41:08 +02:00
|
|
|
.help-content.fr-menu ul.fr-menu__list li:not(:last-child) {
|
2024-08-05 12:06:27 +02:00
|
|
|
@media (min-width: 62em) {
|
|
|
|
border-bottom: 1px solid $border-grey;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2024-08-05 15:41:08 +02:00
|
|
|
.help-content.fr-menu ul.fr-menu__list {
|
|
|
|
h1,
|
|
|
|
p {
|
2024-08-05 12:06:27 +02:00
|
|
|
font-size: inherit;
|
|
|
|
line-height: inherit;
|
|
|
|
}
|
2024-08-08 11:23:56 +02:00
|
|
|
|
|
|
|
dd {
|
2024-09-28 08:18:26 +02:00
|
|
|
word-break: break-word;
|
2024-08-08 11:23:56 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.help-content a[href]:hover,
|
|
|
|
.help-content a[href]:active {
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
|
|
--text-decoration: none;
|
|
|
|
}
|
2024-08-05 12:06:27 +02:00
|
|
|
}
|
|
|
|
|
2017-08-02 16:20:01 +02:00
|
|
|
.dropdown-items {
|
|
|
|
li {
|
|
|
|
display: flex;
|
2019-03-28 13:57:07 +01:00
|
|
|
padding: $default-padding;
|
2017-08-02 16:20:01 +02:00
|
|
|
border-bottom: 1px solid $border-grey;
|
|
|
|
font-size: 12px;
|
|
|
|
min-width: 300px;
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
cursor: default;
|
|
|
|
|
|
|
|
h4 {
|
2021-09-20 15:04:24 +02:00
|
|
|
color: $blue-france-500;
|
2017-08-02 16:20:01 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-11-20 10:48:53 +01:00
|
|
|
&:not(.inactive) {
|
2019-10-15 12:42:51 +02:00
|
|
|
cursor: pointer;
|
2019-11-20 10:48:53 +01:00
|
|
|
|
|
|
|
&:hover,
|
|
|
|
&.selected {
|
|
|
|
background: $light-grey;
|
|
|
|
}
|
2017-08-02 16:20:01 +02:00
|
|
|
}
|
|
|
|
|
2023-02-27 17:05:39 +01:00
|
|
|
&.form-inside {
|
|
|
|
background-color: $white;
|
|
|
|
margin-top: -2px;
|
|
|
|
}
|
|
|
|
|
2019-03-26 17:55:40 +01:00
|
|
|
&.danger {
|
|
|
|
&:hover {
|
|
|
|
background-color: $medium-red;
|
|
|
|
|
|
|
|
&,
|
|
|
|
a {
|
|
|
|
color: $white;
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
filter: contrast(0) brightness(100);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-02 16:20:01 +02:00
|
|
|
&:last-child {
|
|
|
|
border-bottom: none;
|
|
|
|
}
|
|
|
|
|
2019-03-28 13:57:07 +01:00
|
|
|
// Make child links fill the whole clickable area
|
2022-12-20 15:42:21 +01:00
|
|
|
> a,
|
2024-11-05 19:02:31 +01:00
|
|
|
.dropdown-items-link {
|
2019-03-28 13:57:07 +01:00
|
|
|
display: flex;
|
|
|
|
flex-grow: 1;
|
|
|
|
margin: -$default-padding;
|
|
|
|
padding: $default-padding;
|
2022-12-20 11:19:08 +01:00
|
|
|
text-align: left;
|
2019-03-28 13:57:07 +01:00
|
|
|
}
|
|
|
|
|
2017-10-16 18:25:23 +02:00
|
|
|
.icon {
|
2017-08-02 16:20:01 +02:00
|
|
|
flex-shrink: 0;
|
|
|
|
}
|
|
|
|
|
2019-03-13 11:35:26 +01:00
|
|
|
.dropdown-description {
|
2017-08-02 16:20:01 +02:00
|
|
|
padding-left: $default-spacer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
h4 {
|
|
|
|
font-size: 14px;
|
|
|
|
margin-bottom: $default-spacer;
|
|
|
|
}
|
2019-07-01 16:16:40 +02:00
|
|
|
|
2019-10-15 12:42:51 +02:00
|
|
|
p + h4,
|
2024-11-05 19:02:31 +01:00
|
|
|
p + p {
|
2019-10-15 12:42:51 +02:00
|
|
|
margin-top: $default-spacer;
|
2019-07-01 16:16:40 +02:00
|
|
|
}
|
2017-06-14 14:39:28 +02:00
|
|
|
}
|
2017-06-13 17:46:08 +02:00
|
|
|
|
2017-10-02 17:03:38 +02:00
|
|
|
.dropdown-form {
|
|
|
|
padding: 2 * $default-spacer;
|
|
|
|
|
2017-09-28 11:04:18 +02:00
|
|
|
&.large {
|
2024-11-20 15:58:27 +01:00
|
|
|
width: 90vw;
|
|
|
|
|
|
|
|
@media (min-width: 62em) {
|
|
|
|
width: 40vw;
|
|
|
|
}
|
2017-09-28 11:04:18 +02:00
|
|
|
}
|
|
|
|
|
2022-10-06 13:02:25 +02:00
|
|
|
ul {
|
|
|
|
list-style: none;
|
|
|
|
}
|
2017-10-02 17:03:38 +02:00
|
|
|
}
|
|
|
|
|
2017-06-13 17:46:08 +02:00
|
|
|
.link {
|
2021-09-20 15:04:24 +02:00
|
|
|
color: $blue-france-500;
|
2017-06-13 17:46:08 +02:00
|
|
|
}
|
2022-09-21 10:06:45 +02:00
|
|
|
|
2024-03-01 09:50:39 +01:00
|
|
|
.account-btn {
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
content: none !important;
|
|
|
|
}
|
2022-09-21 10:06:45 +02:00
|
|
|
}
|
2024-12-02 10:32:56 +01:00
|
|
|
|
|
|
|
.back-btn {
|
|
|
|
line-height: 1.75rem;
|
|
|
|
}
|