diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius index 3b0d11372..8205ea06a 100644 --- a/templates/standalone/inputs.lucius +++ b/templates/standalone/inputs.lucius @@ -64,14 +64,8 @@ } /* TEXT INPUTS */ -input[type="text"], -input[type="search"], -input[type="password"], -input[type="url"], -input[type="number"], -input[type="email"], -input[type*="date"], -input[type*="time"] { +input, +select { /* from bulma.css */ color: #363636; border-color: #dbdbdb; @@ -88,25 +82,6 @@ input[type*="time"] { font-family: var(--font-base); line-height: 1.5; padding: 4px 13px; - - &:focus { - border-color: #3273dc; - box-shadow: 0 0 0 0.125em rgba(50,115,220,.25); - outline: 0; - } - - &[disabled] { - background-color: #f5f5f5; - color: #7a7a7a; - box-shadow: none; - border-color: #dbdbdb; - } - - &[readonly] { - background-color: #f5f5f5; - box-shadow: none; - border-color: #dbdbdb; - } } input[type="number"] { @@ -139,7 +114,13 @@ textarea { border-radius: 2px; box-shadow: inset 0 1px 2px 1px rgba(50,50,50,.05); vertical-align: top; +} +/* SHARED STATE RELATED STYLES */ + +input, +select, +textarea { &:focus { border-color: #3273dc; box-shadow: 0 0 0 0.125em rgba(50,115,220,.25); @@ -155,7 +136,6 @@ textarea { &[readonly] { background-color: #f5f5f5; - box-shadow: none; border-color: #dbdbdb; } } @@ -226,7 +206,12 @@ input[type="checkbox"]:checked::after { [type="checkbox"], [type="radio"] { - display: none; + position: fixed; + top: -1px; + left: -1px; + width: 1px; + height: 1px; + overflow: hidden; } label { @@ -256,6 +241,13 @@ input[type="checkbox"]:checked::after { background-color: var(--color-primary); } + [type="checkbox"]:focus + label, + [type="radio"]:focus + label { + border-color: #3273dc; + box-shadow: 0 0 0 0.125em rgba(50,115,220,.25); + outline: 0; + } + :checked + label::before, :checked + label::after { content: '';