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

chore(combobox): remove old styles

Browse source
This commit is contained in:
Paul Chavard 2024-05-15 23:17:24 +02:00
parent c17351e50a
commit e2ba14583c
No known key found for this signature in database
6 changed files with 87 additions and 227 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,10 +10,6 @@
}
}
.form react-fragment[data-component-name='MapEditor'] [data-reach-combobox-input] {
margin-bottom: 0;
}
.map-style-control {
position: absolute;
bottom: 4px;

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

@ -37,6 +37,15 @@ trix-editor.fr-input {
}
}
.fr-ds-combobox__multiple {
.fr-tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 0.3rem;
}
}
.fr-ds-combobox__menu {
&[data-placement=top] {
--origin: translateY(8px);

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

@ -356,41 +356,6 @@
margin-bottom: 0;
}
[data-reach-combobox-input] {
&:not([class^='width-']) {
width: 100%;
min-width: 50%;
max-width: 100%;
}
&:focus {
border-color: $blue-france-500;
}
}
[data-reach-combobox-token-list] {
padding: $default-spacer;
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
}
[data-reach-combobox-token] button {
border: solid 1px $border-grey;
border-radius: 4px;
padding: $default-spacer;
margin-right: $default-spacer;
cursor: pointer;
display: flex;
align-items: center;
}
[data-reach-combobox-token] button:focus {
background-color: $black;
color: $white;
}
.editable-champ {
&:not(.editable-champ-carte) .algolia-autocomplete {
margin-bottom: 2 * $default-padding;
@ -524,91 +489,8 @@
}
}
react-fragment[data-component-name^="ComboMultiple"] {
.fr-ds-combobox__multiple {
margin-bottom: $default-fields-spacer;
[data-reach-combobox-input] {
flex-grow: 1;
background-image: image-url("icons/chevron-down");
background-size: 14px;
background-repeat: no-repeat;
background-position: right 10px center;
border-radius: 4px;
border: solid 1px $border-grey;
padding: $default-padding;
margin: $default-spacer;
margin-top: 0;
width: 100%;
}
ul {
list-style: none;
li {
margin-right: $default-spacer;
display: inline-block;
}
}
}
[data-reach-combobox-token-label] {
border: 1px solid #CCCCCC;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
}
[data-reach-combobox-option] {
font-size: 16px;
list-style-type: none;
}
[data-reach-combobox-option][aria-selected="true"] {
background: $light-blue !important;
color: $white;
}
[data-reach-combobox-separator] {
font-size: 16px;
color: $dark-grey;
background: $light-grey;
padding: $default-spacer;
}
[data-reach-combobox-no-results] {
font-size: 16px;
color: $dark-grey;
background: $light-grey;
padding: $default-spacer;
}
[data-reach-combobox-token] button {
cursor: pointer;
background-color: transparent;
background-image: none;
border: none;
line-height: 1;
padding: 0;
margin-right: 4px;
display: flex;
align-items: center !important;
}
[data-reach-combobox-input] button:focus {
outline-color: $light-blue;
}
[data-fr-theme="dark"] [data-reach-combobox-popover] {
border: none;
background: var(--background-action-low-blue-france);
}
[data-fr-theme="dark"] [data-reach-combobox-option]:hover {
background: var(--background-action-low-blue-france-hover);
}
[data-reach-combobox-popover] {
z-index: 20;
}
.fconnect-form {

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

@ -1,36 +1,5 @@
@import "constants";
[data-reach-combobox-token-label] {
border: 1px solid #CCCCCC;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
}
.form [data-reach-combobox-token-list] {
padding: 8px;
display: flex;
align-items: center;
list-style: none;
}
.form [data-reach-combobox-input]:not([class^='width-']) {
width: 100%;
min-width: 50%;
max-width: 100%;
}
.form [data-reach-combobox-token] button {
border: solid 1px #CCCCCC;
background-color: transparent;
border-radius: 4px;
padding: 8px;
margin-right: 8px;
cursor: pointer;
display: flex;
align-items: center;
}
.hidden {
display: none;
}
@ -70,4 +39,79 @@
margin-bottom: 4px;
}
}
.fr-ds-combobox {
.fr-autocomplete {
background-repeat: no-repeat;
background-position: right;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z'%3E%3C/path%3E%3C/svg%3E");
}
}
.fr-ds-combobox__multiple {
.fr-tag-list {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-bottom: 0.3rem;
}
.fr-tag {
font-size: small;
padding: 0.5rem;
display: flex;
align-items: center;
border: solid 1px #dcdcdc;
button {
margin-left: 0.3rem;
}
}
}
.fr-ds-combobox__menu {
&[data-placement=top] {
--origin: translateY(8px);
}
&[data-placement=bottom] {
--origin: translateY(-8px);
}
&[data-placement=right] {
--origin: translateX(-8px);
}
&[data-placement=left] {
--origin: translateX(8px);
}
&[data-entering] {
animation: popover-slide 200ms;
}
&.fr-menu {
width: var(--trigger-width);
top: unset;
background-color: white;
border: solid 1px #dcdcdc;
.fr-menu__list {
display: block;
width: unset;
max-height: 300px;
overflow: auto;
}
.fr-menu__item {
&[data-selected] {
font-weight: bold;
}
&[data-focused] {
font-weight: bold;
}
}
}
}
}

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

@ -9,41 +9,7 @@
margin-left: 16px;
}
react-fragment[data-component-name^="ComboMultiple"] {
.fr-ds-combobox__multiple {
margin-bottom: 0;
[data-reach-combobox-token-list] {
padding: 0.5 * $default-padding;
display: flex;
}
[data-reach-combobox-token] button {
border: solid 1px $border-grey;
margin-top: 0.5 * $default-padding;
margin-bottom: 0.5 * $default-padding;
margin-right: 0.5 * $default-padding;
border-radius: 4px;
padding: 0.5 * $default-padding;
cursor: pointer;
list-style: none;
}
[data-reach-combobox-token] button:focus {
background-color: $black;
color: $white;
}
[data-reach-combobox-input] {
outline: none;
border: none;
flex-grow: 1;
margin: 0.25rem;
}
[data-reach-combobox-input]:focus {
outline: solid;
outline-color: $light-blue;
}
}
}

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

@ -45,45 +45,8 @@
display: inline-block;
}
react-fragment[data-component-name^="ComboMultiple"] {
.fr-ds-combobox__multiple {
margin-bottom: $default-fields-spacer;
[data-reach-combobox-token-list] {
padding: 0.25 * $default-padding;
display: inline-block;
width: 100%;
}
[data-reach-combobox-token] button {
border: solid 1px $border-grey;
margin: 0.25 * $default-padding;
border-radius: 2px;
padding: 0.25 * $default-padding;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
}
[data-reach-combobox-token] button:focus {
background-color: $black;
color: $white;
}
[data-reach-combobox-input] {
outline: none;
flex-grow: 1;
margin: $default-spacer;
padding: $default-spacer;
border-radius: 4px;
border: solid 1px $border-grey;
margin-top: 0;
}
[data-reach-combobox-input]:focus {
border-color: $blue-france-500;
}
}
// fix/dsfr