From c7482eee4eaecefc3e8f68a8dbdce382a8858ac0 Mon Sep 17 00:00:00 2001 From: Hendrik Leppelsack Date: Tue, 12 Apr 2016 09:47:14 +0200 Subject: [PATCH] Checkboxes (#23063) * remove ie8 fixes for checkboxes * add indeterminate style to checkboxes * add styles for radio inputs * add missing checkbox-mixed-disabled icon * fix white radios * remove unnecessary png file --- core/css/inputs.css | 101 +++++++++++++++---- core/img/actions/checkbox-mixed-disabled.svg | 6 ++ 2 files changed, 87 insertions(+), 20 deletions(-) create mode 100644 core/img/actions/checkbox-mixed-disabled.svg diff --git a/core/css/inputs.css b/core/css/inputs.css index c61f14e412..f02a606dec 100644 --- a/core/css/inputs.css +++ b/core/css/inputs.css @@ -74,11 +74,7 @@ textarea:hover, textarea:focus, textarea:active { opacity: 1; } -.ie8 input[type="checkbox"] { margin:0; padding:0; height:auto; width:auto; } -.ie8 input[type="checkbox"]:hover+label, input[type="checkbox"]:focus+label { color:#111 !important; } - -/* ie8 doesn't support :checked */ -html:not(.ie8) input[type="checkbox"].checkbox { +input[type="checkbox"].checkbox { position: absolute; left:-10000px; top: auto; @@ -87,7 +83,7 @@ html:not(.ie8) input[type="checkbox"].checkbox { overflow: hidden; } -html:not(.ie8) input[type="checkbox"].checkbox + label:before { +input[type="checkbox"].checkbox + label:before { content: ""; display: inline-block; @@ -99,43 +95,108 @@ html:not(.ie8) input[type="checkbox"].checkbox + label:before { opacity: 0.7; } -html:not(.ie8) input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; } +input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; } -html:not(.ie8) input[type="checkbox"].checkbox.u-left +label:before { float: left; } -html:not(.ie8) input[type="checkbox"].checkbox.u-hidden + label:before { display: none; } +input[type="checkbox"].checkbox.u-left +label:before { float: left; } +input[type="checkbox"].checkbox.u-hidden + label:before { display: none; } -html:not(.ie8) input[type="checkbox"].checkbox--white + label:before { - background-image: url('../img/actions/checkbox-white.svg'); -} - -html:not(.ie8) input[type="checkbox"].checkbox:checked + label:before { +input[type="checkbox"].checkbox:checked + label:before { background-image: url('../img/actions/checkbox-checked.svg'); } -html:not(.ie8) input[type="checkbox"].checkbox:disabled + label:before { +input[type="checkbox"].checkbox:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed.svg'); +} + +input[type="checkbox"].checkbox:disabled + label:before { background-image: url('../img/actions/checkbox-disabled.svg'); } -html:not(.ie8) input[type="checkbox"].checkbox:checked:disabled + label:before { +input[type="checkbox"].checkbox:checked:disabled + label:before { background-image: url('../img/actions/checkbox-checked-disabled.svg'); } -html:not(.ie8) input[type="checkbox"].checkbox--white:checked + label:before { +input[type="checkbox"].checkbox:indeterminate:disabled + label:before { + background-image: url('../img/actions/checkbox-mixed-disabled.svg'); +} + +input[type="checkbox"].checkbox--white + label:before { + background-image: url('../img/actions/checkbox-white.svg'); +} + +input[type="checkbox"].checkbox--white:checked + label:before { background-image: url('../img/actions/checkbox-checked-white.svg'); } -html:not(.ie8) input[type="checkbox"].checkbox--white:disabled + label:before { +input[type="checkbox"].checkbox--white:indeterminate + label:before { + background-image: url('../img/actions/checkbox-mixed-white.svg'); +} + +input[type="checkbox"].checkbox--white:disabled + label:before { background-image: url('../img/actions/checkbox-disabled-white.svg'); } -html:not(.ie8) input[type="checkbox"].checkbox--white:checked:disabled + label:before { +input[type="checkbox"].checkbox--white:checked:disabled + label:before { background-image: url('../img/actions/checkbox-checked-disabled.svg'); } -html:not(.ie8) input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before { +input[type="checkbox"].checkbox--white:indeterminate:disabled + label:before { + background-image: url('../img/actions/checkbox-mixed-disabled.svg'); +} + +input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before { color:#111 !important; } +input[type="radio"].radio { + position: absolute; + left:-10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} + +input[type="radio"].radio + label:before { + content: ""; + display: inline-block; + + height: 20px; + width: 20px; + vertical-align: middle; + + background: url('../img/actions/radio.svg') left top no-repeat; + opacity: 0.7; +} + +input[type="radio"].radio:checked + label:before { + background-image: url('../img/actions/radio-checked.svg'); +} + +input[type="radio"].radio:disabled + label:before { + background-image: url('../img/actions/radio-disabled.svg'); +} + +input[type="radio"].radio:checked:disabled + label:before { + background-image: url('../img/actions/radio-checked-disabled.svg'); +} + +input[type="radio"].radio--white + label:before { + background-image: url('../img/actions/radio-white.svg'); +} + +input[type="radio"].radio--white:checked + label:before { + background-image: url('../img/actions/radio-checked.svg'); +} + +input[type="radio"].radio--white:disabled + label:before { + background-image: url('../img/actions/radio-disabled.svg'); +} + +input[type="radio"].radio--white:checked:disabled + label:before { + background-image: url('../img/actions/radio-checked-disabled.svg'); +} + input[type="time"] { width: initial; height: 31px; diff --git a/core/img/actions/checkbox-mixed-disabled.svg b/core/img/actions/checkbox-mixed-disabled.svg new file mode 100644 index 0000000000..2a1bbe5121 --- /dev/null +++ b/core/img/actions/checkbox-mixed-disabled.svg @@ -0,0 +1,6 @@ + + + + + +