mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
This commit is contained in:
Hendrik Leppelsack 2016-04-12 09:47:14 +02:00 committed by Thomas Müller
parent 495a964ca2
commit c7482eee4e
2 changed files with 87 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
core/css/inputs.css
View File

@ -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;

6
core/img/actions/checkbox-mixed-disabled.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<path d="m2.5 2.5h11v11h-11z" fill="#dcdcdc"/>
<path d="m3 2c-0.554 0-1 0.446-1 1v10c0 0.554 0.446 1 1 1h10c0.554 0 1-0.446 1-1v-10c0-0.554-0.446-1-1-1h-10zm0 1h10v10h-10v-10z" fill="#969696"/>
<path d="m4 7h8v2h-8z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 520 B