Commit 4159b158 authored by Emma's avatar Emma 🏳🌈

override native styling of checkbox/radio inputs

parent 7a46007a
Pipeline #57722342 passed with stages
in 11 minutes and 7 seconds
......@@ -10,6 +10,10 @@
padding: 0.5rem;
transition: background-color .1s, box-shadow .1s, border-color .1s, color .1s;
// work around bug that occurs in chrome (and safari?) when parent line-height
// is less than the widget's.
line-height: var(--line-height);
@supports (-webkit-overflow-scrolling: touch) {
// fix zoom-on-focus in iOS
--font-size: ~'max(16px, var(--font-size))';
......@@ -47,6 +51,20 @@
min-width: 5rem; // fix for iOS
}
// should only be used in combination with .unstylable-widget. leave
// .form-control off otherwise.
&[type="checkbox"],
&[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0; // disable rounded corners on iOS
min-height: unset;
}
&[type="radio"] {
border-radius: 50%;
}
textarea& {
max-width: 100%;
resize: vertical;
......@@ -76,7 +94,7 @@
outline: none; // remove default browser style
}
&[disabled] {
&:disabled {
background-color: var(--bg-grey);
color: var(--fg-grey);
}
......
......@@ -18,10 +18,10 @@
margin-bottom: 0.5rem;
}
ol,
ul {
> & {
margin-bottom: 0;
}
ol ol,
ol ul,
ul ol,
ul ul {
margin-bottom: 0;
}
}
// 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;
}
}
// wrapper for so-called "unstylable" form widgets (select, radio, checkbox).
// the widget is expected to have the .form-control class.
.unstylable-widget {
display: inline-block;
line-height: 1;
position: relative;
white-space: nowrap;
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 2ch;
}
&__caret,
&__check,
&__circle {
pointer-events: none;
position: absolute;
:disabled + & {
color: var(--fg-grey);
}
}
&__caret {
border-left: 0.5ch solid transparent;
border-right: 0.5ch solid transparent;
border-top: 0.5ch solid;
display: none;
top: calc(50% - 0.25ch);
right: calc(1px + 0.5ch);
select:not([multiple]) + & {
display: unset;
}
:focus + & {
border-top: none;
border-bottom: solid 0.5ch;
}
}
&__check,
&__circle {
font-size: calc(var(--font-size) - var(--shrink));
left: calc(var(--shrink) / 2 + 1px);
top: calc(var(--shrink) / 2 + 1px);
:not(:checked) + & {
display: none;
}
}
&__check {
--shrink: 2px;
}
&__circle {
--shrink: 6px;
background: currentColor;
border-radius: 50%;
width: calc(var(--font-size) - var(--shrink));
height: calc(var(--font-size) - var(--shrink));
}
}
@import '../_variables';
.site-width-container {
margin-left: auto;
margin-right: auto;
max-width: @max-site-width;
width: 100%;
}
......@@ -20,7 +20,7 @@
@import '_form/form-help';
@import '_form/markdown-input';
@import '_form/required-indicator';
@import '_form/styled-select';
@import '_form/unstylable-widget';
@import '_widgets/button'; // must come before other widget types
@import '_widgets/clear-notification-button';
......
......@@ -209,6 +209,12 @@
"css": "pin-outline",
"code": 59412,
"src": "typicons"
},
{
"uid": "12f4ece88e46abd864e40b35e05b11cd",
"css": "ok",
"code": 59413,
"src": "fontawesome"
}
]
}
\ No newline at end of file
}
......@@ -23,6 +23,7 @@
<symbol id="logout" viewBox="0 0 928.6 1000"><path d="M357 804q0 2 1 11t0 14-2 14-5 11-12 3H161q-67 0-114-47T0 696V304q0-67 47-114t114-47h178q8 0 13 5t5 13q0 2 1 11t0 15-2 13-5 11-12 3H161q-37 0-63 26t-27 64v392q0 37 27 63t63 27h180l7 2 4 3 4 5 1 8zm518-304q0 14-11 25L561 829q-11 10-25 10t-25-10-11-25V643H250q-14 0-25-11t-11-25V393q0-15 11-25t25-11h250V196q0-14 11-25t25-10 25 10l303 304q11 10 11 25z"/></symbol>
<symbol id="mail" viewBox="0 0 1000 1000"><path d="M929 839V411q-18 20-39 36-149 115-238 189-28 24-46 37t-48 28-57 13h-2q-26 0-57-13t-48-28-46-37q-88-74-238-189-21-16-39-36v428q0 7 6 13t12 5h822q7 0 12-5t6-13zm0-586v-14l-1-7-1-7-3-5-5-4-8-2H89q-7 0-12 6t-6 12q0 94 83 159 107 84 223 176 4 3 20 17t25 21 25 17 28 16 24 5h2q11 0 24-5t28-16 25-17 25-21 20-17q116-92 224-176 30-24 56-65t26-73zm71-21v607q0 37-26 63t-63 27H89q-36 0-63-27T0 839V232q0-37 26-63t63-26h822q37 0 63 26t26 63z"/></symbol>
<symbol id="menu" viewBox="0 0 857.1 1000"><path d="M857 750v71q0 15-10 25t-26 11H36q-15 0-25-11T0 821v-71q0-15 11-25t25-11h785q15 0 26 11t10 25zm0-286v72q0 14-10 25t-26 10H36q-15 0-25-10T0 536v-72q0-14 11-25t25-10h785q15 0 26 10t10 25zm0-285v71q0 14-10 25t-26 11H36q-15 0-25-11T0 250v-71q0-15 11-26t25-10h785q15 0 26 10t10 26z"/></symbol>
<symbol id="ok" viewBox="0 0 1000 1000"><path d="M933 316q0 22-16 38L513 758l-76 76q-16 15-38 15t-38-15l-76-76L83 556q-15-16-15-38t15-38l76-76q16-16 38-16t38 16l164 165 366-367q16-16 38-16t38 16l76 76q16 15 16 38z"/></symbol>
<symbol id="pencil" viewBox="0 0 857.1 1000"><path d="M203 857l50-51-131-131-51 51v60h72v71h60zm291-518q0-12-12-12-5 0-9 4L170 633q-4 4-4 10 0 12 13 12 5 0 9-4l303-302q3-4 3-10zm-30-107l232 232-464 465H0V696zm381 54q0 29-20 50l-93 93-232-233 93-92q20-21 50-21 29 0 51 21l131 131q20 22 20 51z"/></symbol>
<symbol id="pin-outline" viewBox="0 0 886 1000"><path d="M856 296q30 30 30 73t-30 75q-16 16-36 24-106 51-144 125-51 102-51 246 0 45-29 74t-75 30q-47 0-75-30L279 744 0 943l199-279L30 496q-20-18-27-49t5-64q27-65 96-65 146 0 246-50l11-7q69-37 118-141 7-20 21-34 30-30 74-29t74 31zM583 546q53-107 196-175L574 160q-69 146-176 200l-13 6q-120 57-281 57l416 416q0-168 63-293z"/></symbol>
<symbol id="pin" viewBox="0 0 834 1000"><path d="M573 813q0 23-15 38t-37 15q-21 0-37-16L315 681 0 917l236-315L68 433q-24-23-12-56 14-32 48-32 157 0 270-57 90-45 151-171 9-24 36-32t50 13l208 209q21 23 14 50t-32 36q-127 63-172 152-56 110-56 268z"/></symbol>
......
{% use 'form_div_layout.html.twig' %}
{%- block checkbox_widget -%}
{%- from '_macros/icon.html.twig' import icon -%}
{%- set attr = attr|merge({class: ((attr.class ?? '')~' form-control')|trim}) -%}
<span class="unstylable-widget">
{{- parent() -}}
{{- icon('ok', 'X', 'icon--no-align unstylable-widget__check') -}}
</span>
{%- endblock checkbox_widget %}
{%- block radio_widget -%}
{%- from '_macros/icon.html.twig' import icon -%}
{%- set attr = attr|merge({class: ((attr.class ?? '')~' form-control')|trim}) -%}
<span class="unstylable-widget">
{{- parent() -}}
<span class="unstylable-widget__circle" aria-hidden="true"></span>
</span>
{%- endblock radio_widget %}
{# apply proper class to widgets #}
{% block form_widget_simple %}
{%- set attr = attr|merge({class: ((attr.class ?? '')~' form-control')|trim}) -%}
......@@ -18,11 +36,11 @@
{% endblock textarea_widget %}
{% block choice_widget %}
{%- set attr = attr|merge({class: ((attr.class ?? '')~' form-control')|trim}) -%}
{%- if not multiple and not expanded -%}
<span class="styled-select">
<span class="unstylable-widget">
{%- set attr = attr|merge({class: ((attr.class ?? '')~' form-control')|trim}) -%}
{{- parent() -}}
<span class="styled-select__caret" aria-hidden="true"></span>
<span class="unstylable-widget__caret" aria-hidden="true"></span>
</span>
{%- else -%}
{{- parent() -}}
......
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