diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss index a825627..bff1220 100644 --- a/gadjo/static/css/_forms.scss +++ b/gadjo/static/css/_forms.scss @@ -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 {