162 lines
3.5 KiB
SCSS
162 lines
3.5 KiB
SCSS
@import "colors";
|
|
|
|
// overwrite DSFR style for SimpleFormatComponent, some user use markdown with
|
|
// ordered list having paragraph between list item
|
|
ol.fr-ol-content--override {
|
|
list-style-type: decimal;
|
|
|
|
li::marker {
|
|
content: inherit;
|
|
}
|
|
}
|
|
|
|
|
|
// with Marianne font, weight of font is less bolder, so bold it up
|
|
.button.primary {
|
|
font-weight: bold;
|
|
}
|
|
|
|
trix-editor.fr-input {
|
|
max-height: none;
|
|
}
|
|
|
|
.fr-label + .fr-ds-combobox { // same as .fr-label + .fr-input
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
|
|
.fr-ds-combobox {
|
|
.fr-menu {
|
|
width: 100%;
|
|
|
|
.fr-menu__list {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 62em) {
|
|
.fr-ds-combobox .fr-menu .fr-menu__list {
|
|
z-index: calc(var(--ground) + 1000);
|
|
background-color: var(--background-default-grey);
|
|
--idle: transparent;
|
|
--hover: var(--background-overlap-grey-hover);
|
|
--active: var(--background-overlap-grey-active);
|
|
filter: drop-shadow(var(--overlap-shadow));
|
|
box-shadow: inset 0 1px 0 0 var(--border-open-blue-france);
|
|
}
|
|
}
|
|
|
|
// 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.
|
|
// scss-lint:disable DuplicateProperty
|
|
input[type="checkbox"] {
|
|
-moz-appearance: checkbox;
|
|
-moz-appearance: auto;
|
|
|
|
-webkit-appearance: checkbox;
|
|
-webkit-appearance: auto;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
-moz-appearance: radio;
|
|
-moz-appearance: auto;
|
|
|
|
-webkit-appearance: radio;
|
|
-webkit-appearance: auto;
|
|
}
|
|
// scss-lint:enable DuplicateProperty
|
|
|
|
// remove additional calendar icon on date input already handle by Firefox navigator
|
|
@-moz-document url-prefix() {
|
|
.fr-input[type="date"] {
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
// remove pointer cursor on textarea
|
|
textarea {
|
|
cursor: auto;
|
|
}
|
|
|
|
fieldset {
|
|
border: none;
|
|
padding-left: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.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 {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.fr-btn.fr-btn--secondary.danger {
|
|
color: $light-red;
|
|
box-shadow: 0px 0px 0px 1px $light-red;
|
|
}
|
|
|
|
.fr-table table.hack-to-display-dropdown {
|
|
padding-bottom: 300px;
|
|
margin-bottom: -300px;
|
|
}
|
|
|
|
// on utilise le dropdown de sélecteur de langue pour un autre usage donc on veut retirer l'icone
|
|
.fr-translate .fr-translate__btn.custom-fr-translate-no-icon::before {
|
|
display: none;
|
|
}
|
|
|
|
// on souhaite que le dropdown s'adapate correctement en largeur
|
|
.fr-translate .fr-menu__list.max-content {
|
|
width: max-content;
|
|
}
|
|
|
|
button.fr-tag-bug {
|
|
background-color: $blue-france-500;
|
|
color: #FFFFFF;
|
|
|
|
&:hover {
|
|
background-color: #1212FF;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.tag-dismiss {
|
|
font-size: 1rem;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
// on veut ferrer à droite le dropdown de sélecteur de langue
|
|
@media (min-width: 62em) {
|
|
.fr-nav__item.custom-fr-translate-flex-end {
|
|
align-items: flex-end;
|
|
}
|
|
}
|
|
|
|
|
|
// improve readability in Windows High Contrast Mode
|
|
@media screen and (forced-colors: active) {
|
|
.fr-input,
|
|
.fr-select,
|
|
.fr-btn {
|
|
border: 2px solid var(--border-action-high-grey);
|
|
}
|
|
|
|
.fr-radio-group input[type="radio"] {
|
|
opacity: 1;
|
|
}
|
|
|
|
.fr-tabs__tab[aria-selected=true]:not(:disabled) {
|
|
border: 5px solid var(--border-action-high-grey);
|
|
}
|
|
|
|
.fr-tabs__tab {
|
|
border: 2px solid var(--border-action-high-grey);
|
|
}
|
|
}
|