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

add style for ComboMultipleDropdownList

Browse source
This commit is contained in:
Christophe Robillard 2021-02-11 15:37:45 +01:00 • committed by Paul Chavard
parent 7565a25b51
commit f9ad9444a9
3 changed files with 146 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -305,6 +305,28 @@
border-color: $blue; border-color: $blue;
} }
[data-reach-combobox-token-list] {
padding: $default-padding;
display: flex;
}
[data-reach-combobox-token] {
border: solid 1px $border-grey;
color: $black;
margin-top: $default-padding;
margin-bottom: $default-padding;
margin-right: 0.5 * $default-padding;
border-radius: 4px;
padding: $default-padding;
cursor: pointer;
list-style: none;
}
[data-reach-combobox-token]:focus {
background-color: $black;
color: $white;
}
.select2 { .select2 {
min-width: 50%; min-width: 50%;
} }
@ -481,11 +503,55 @@
} }
} }
[data-react-class="ComboMultipleDropdownList"] {
margin-bottom: $default-fields-spacer;
[data-reach-combobox-input] {
outline: none;
border: none;
flex-grow: 1;
margin: 0.25rem;
background-image: image-url("icons/chevron-down");
background-size: 14px;
background-repeat: no-repeat;
background-position: right 10px center;
}
[data-reach-combobox-input]:focus {
outline: solid;
outline-color: $light-blue;
}
}
[data-combobox-token-label] {
border: 1px solid #CCCCCC;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
}
[data-reach-combobox-option] { [data-reach-combobox-option] {
font-size: 16px; font-size: 16px;
list-style-type: none;
} }
[data-reach-combobox-option][aria-selected="true"] { [data-reach-combobox-option][aria-selected="true"] {
background: $light-blue !important; background: $light-blue !important;
color: $white; color: $white;
} }
[data-combobox-separator] {
font-size: 16px;
color: $dark-grey;
margin-top: 6px;
}
[data-combobox-remove-token] {
color: $dark-grey;
padding-right: 4px;
}
[data-reach-combobox-input]:focus {
outline-color: $light-blue;
}

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

@ -1,7 +1,10 @@
@import "constants";
@import "colors";
.personnes-impliquees { .personnes-impliquees {
padding-bottom: 50px; padding-bottom: 50px;
ul { ul.tab-list {
list-style-type: disc; list-style-type: disc;
margin-left: 16px; margin-left: 16px;
} }
@ -11,4 +14,42 @@
padding: 12px; padding: 12px;
} }
// scss-lint:enable // scss-lint:enable
[data-react-class="ComboMultipleDropdownList"] {
margin-bottom: $default-fields-spacer;
[data-reach-combobox-token-list] {
padding: 0.5 * $default-padding;
display: flex;
}
[data-reach-combobox-token] {
border: solid 1px $border-grey;
color: $black;
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]: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;
}
}
} }

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

@ -61,4 +61,42 @@
margin-bottom: 3 * $default-spacer; margin-bottom: 3 * $default-spacer;
text-align: center; text-align: center;
} }
[data-react-class="ComboMultipleDropdownList"] {
margin-bottom: $default-fields-spacer;
[data-reach-combobox-token-list] {
padding: 0.25 * $default-padding;
display: inline-block;
width: 100%;
}
[data-reach-combobox-token] {
border: solid 1px $border-grey;
color: $black;
margin: 0.25 * $default-padding;
border-radius: 2px;
padding: 0.25 * $default-padding;
cursor: pointer;
list-style: none;
}
[data-reach-combobox-token]: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;
}
}
} }