Commit 7aacea6c authored by Emma's avatar Emma 🏳🌈

better, SVG-free method of styling <select>

parent 40f7516f
Pipeline #57355582 passed with stage
in 59 seconds
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792"><g transform="matrix(1,0,0,-1,402.44068,1239.8644)" id="g2991"><path d="m 1024,832 q 0,-26 -19,-45 L 557,339 q -19,-19 -45,-19 -26,0 -45,19 L 19,787 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 896 q 26,0 45,-19 19,-19 19,-45 z" fill="#000000"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792"><g transform="matrix(1,0,0,-1,402.44068,1239.8644)" id="g2991"><path d="m 1024,832 q 0,-26 -19,-45 L 557,339 q -19,-19 -45,-19 -26,0 -45,19 L 19,787 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 896 q 26,0 45,-19 19,-19 19,-45 z" fill="#ffffff"/></g></svg>
......@@ -57,22 +57,8 @@
}
select&:not([multiple]) {
-moz-appearence: none;
-webkit-appearance: none;
background-image: url('caret-black.svg');
background-size: 12px 12px;
background-position: calc(100% - 2px) 50%;
background-repeat: no-repeat;
padding-right: 16px;
.night-mode & {
background-image: url('caret-white.svg');
}
border-radius: 0; // disable rounded corners on iOS
// dropdown caret doesn't acknowledge min-height
height: @height;
height: @height; // dropdown caret doesn't acknowledge min-height
// having vertical padding cuts off the text inside. having height set is
// enough to achieve a padding effect.
......
// wrapper that, in combination with .form-control, makes <select> elements
// mostly consistent across platforms.
.styled-select {
white-space: nowrap;
select:not([multiple]) {
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 2ch;
}
// we can't simply use ::after, as that would interfere with select2
select:not([multiple]) + &__caret {
border-left: 0.5ch solid transparent;
border-right: 0.5ch solid transparent;
border-top: 0.5ch solid;
display: inline-block;
pointer-events: none;
left: calc(-1.5ch - 1px);
position: relative;
vertical-align: middle;
}
select:not([multiple]):focus + &__caret {
border-top: none;
border-bottom: solid 0.5ch;
}
}
......@@ -20,6 +20,7 @@
@import '_form/form-help';
@import '_form/markdown-input';
@import '_form/required-indicator';
@import '_form/styled-select';
@import '_widgets/button'; // must come before other widget types
@import '_widgets/clear-notification-button';
......
......@@ -19,7 +19,14 @@
{% block choice_widget %}
{%- set attr = attr|merge({class: ((attr.class ?? '')~' form-control')|trim}) -%}
{{- parent() -}}
{%- if not multiple and not expanded -%}
<span class="styled-select">
{{- parent() -}}
<span class="styled-select__caret" aria-hidden="true"></span>
</span>
{%- else -%}
{{- parent() -}}
{%- endif -%}
{% endblock choice_widget %}
{# form layout #}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment