entrouvert
/
gadjo
15
0
Fork 0
Code Issues Pull Requests 2 Releases Activity

css: adapt select2 style to look like other widgets (#13819)

This commit is contained in:
Frédéric Péters 2020-10-20 08:28:34 +02:00
parent 93a8741878
commit 8e13b075dd
1 changed files with 118 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
gadjo/static/css/_forms.scss
View File

@ -5,6 +5,18 @@ $button-cancel-color: darken(grayscale($button-color), 10%);
$button-delete-color: #CD2026;
$button-submit-color: #215D9C;
$widget-background: white;
$widget-focus-background: white;
$widget-border: 1px solid #AAA;
$widget-focus-border: $widget-border;
$widget-border-radius: 0;
$widget-color: $font-color;
$widget-focus-color: $font-color;
$widget-focus-outline: none;
$widget-focus-outline-offset: 0;
$data_uri_arrow-down: "arrow-down.svg";
input, select, button, textarea {
font-size: 100%;
font-family: $font-family;
@ -174,15 +186,15 @@ input[type=submit]:disabled {
}
input, input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
border: 1px solid #AAA;
border-radius: 0px;
border: $widget-border;
border-radius: $widget-border-radius;
box-sizing: border-box;
margin: 0.2em 0px;
outline: medium none;
padding: 0.7ex 0.7em;
max-width: 100%;
@include vendor-prefix('transition', 'background-size 0.2s ease');
background: white;
background: $widget-background;
&:focus {
border-bottom-color: $button-submit-color;
}
@ -217,7 +229,7 @@ select {
background: white;
@include vendor-prefix('appearance', 'none');
padding-right: 4em;
background-image: url(arrow-down.svg);
background-image: url($data_uri_arrow-down);
background-position: right 1.3rem center;
background-repeat: no-repeat;
background-size: 1rem auto;
@ -319,6 +331,108 @@ fieldset.gadjo-foldable {
display: none;
}
/* select2 */
div.select2-container,
span.select2-container {
font-size: 100%;
min-width: 20em;
margin-top: 2px;
a.select2-choice {
padding: 0.1em 0.7em;
}
span.select2-selection--single,
a.select2-choice,
a.select2-choice div {
box-sizing: content-box;
padding: 1px 0;
background: $widget-background;
color: $widget-color;
border-radius: $widget-border-radius;
border: $widget-border;
}
&.select2-container--focus,
&.select2-container--open {
span.select2-selection--single,
a.select2-choice,
a.select2-choice div {
background: $widget-focus-background;
border: $widget-focus-border;
color: $widget-focus-color;
span {
color: $widget-focus-color;
}
}
}
&.select2-container--focus span.select2-selection--single {
outline: $widget-focus-outline;
outline-offset: $widget-focus-outline-offset;
}
.select2-choices,
.select2-choice {
box-shadow: none;
}
.select2-search--dropdown input,
.select2-search--dropdown input:active,
.select2-search--dropdown input:focus {
background: white;
color: #333;
border: 1px solid #ccc;
}
.select2-selection--single .select2-selection__rendered {
padding-right: 50px;
}
.select2-selection--single .select2-selection__arrow {
background-image: url($data_uri_arrow-down);
background-position: right 1.3rem center;
background-repeat: no-repeat;
background-size: 1rem auto;
width: 50px;
right: 0;
top: 0;
height: 100%;
b {
display: none;
}
}
.select2-dropdown {
border: $widget-border;
&.select2-dropdown--below {
position: relative;
top: -5px;
}
}
.select2-results {
.loading-results {
position: absolute;
display: inline-block;
right: 0;
color: black;
@media screen and (max-width: $mobile-limit) {
display: none;
}
}
.loading-results:last-child {
position: static;
display: block;
color: inherit;
}
}
}
div.select2-container.select2-drop-above .select2-choice {
background: white;
border-radius: 0;
}
div.select2-drop {
box-shadow: none;
border-radius: 0;
}
div.select2-search {
margin-top: 4px;
}
/* form.as_p */
form p {