Merge pull request #19329 from owncloud/checkbox-class

Add .checkbox class for new checkbox style
This commit is contained in:
Raghu Nayyar 2015-09-25 14:02:39 +05:30
commit bf73665a35
7 changed files with 21 additions and 21 deletions

View file

@ -925,7 +925,7 @@
if (this._allowSelection) { if (this._allowSelection) {
td.append( td.append(
'<input id="select-' + this.id + '-' + fileData.id + '<input id="select-' + this.id + '-' + fileData.id +
'" type="checkbox" class="selectCheckBox"/><label for="select-' + this.id + '-' + fileData.id + '">' + '" type="checkbox" class="selectCheckBox checkbox"/><label for="select-' + this.id + '-' + fileData.id + '">' +
'<div class="thumbnail" style="background-image:url(' + icon + '); background-size: 32px;"></div>' + '<div class="thumbnail" style="background-image:url(' + icon + '); background-size: 32px;"></div>' +
'<span class="hidden-visually">' + t('files', 'Select') + '</span>' + '<span class="hidden-visually">' + t('files', 'Select') + '</span>' +
'</label>' '</label>'

View file

@ -3,14 +3,14 @@
<span class="what">{what}<!-- If you select both versions, the copied file will have a number added to its name. --></span><br/> <span class="what">{what}<!-- If you select both versions, the copied file will have a number added to its name. --></span><br/>
<br/> <br/>
<table> <table>
<th><input id="checkbox-allnewfiles" class="allnewfiles" type="checkbox" /><label for="checkbox-allnewfiles">{allnewfiles}<span class="count"></span></label></th> <th><input id="checkbox-allnewfiles" class="allnewfiles checkbox" type="checkbox" /><label for="checkbox-allnewfiles">{allnewfiles}<span class="count"></span></label></th>
<th><input id="checkbox-allexistingfiles" class="allexistingfiles" type="checkbox" /><label for="checkbox-allexistingfiles">{allexistingfiles}<span class="count"></span></label></th> <th><input id="checkbox-allexistingfiles" class="allexistingfiles checkbox" type="checkbox" /><label for="checkbox-allexistingfiles">{allexistingfiles}<span class="count"></span></label></th>
</table> </table>
<div class="conflicts"> <div class="conflicts">
<div class="template"> <div class="template">
<div class="filename"></div> <div class="filename"></div>
<div class="replacement"> <div class="replacement">
<input type="checkbox" class="u-left"/> <input type="checkbox" class="checkbox u-left"/>
<label> <label>
<span class="svg icon"></span> <span class="svg icon"></span>
<div class="mtime"></div> <div class="mtime"></div>
@ -18,7 +18,7 @@
</label> </label>
</div> </div>
<div class="original"> <div class="original">
<input type="checkbox" class="u-left" /> <input type="checkbox" class="checkbox u-left" />
<label> <label>
<span class="svg icon"></span> <span class="svg icon"></span>
<div class="mtime"></div> <div class="mtime"></div>

View file

@ -56,7 +56,7 @@
<tr> <tr>
<th id='headerName' class="hidden column-name"> <th id='headerName' class="hidden column-name">
<div id="headerName-container"> <div id="headerName-container">
<input type="checkbox" id="select_all_files" class="select-all"/> <input type="checkbox" id="select_all_files" class="select-all checkbox"/>
<label for="select_all_files"> <label for="select_all_files">
<span class="hidden-visually"><?php p($l->t('Select all'))?></span> <span class="hidden-visually"><?php p($l->t('Select all'))?></span>
</label> </label>

View file

@ -115,8 +115,3 @@ select {
line-height: 38px; line-height: 38px;
} }
.lte8 input[type="checkbox"] + label:before { background-image: url('../img/actions/checkbox.png'); }
.lte8 input[type="checkbox"].white + label:before { background-image: url('../img/actions/checkbox-white.png'); }
.lte8 input[type="checkbox"]:checked + label:before { background-image: url('../img/actions/checkbox-checked.png'); }
.lte8 input[type="checkbox"].white:checked + label:before { background-image: url('../img/actions/checkbox-checked-white.png'); }

View file

@ -158,7 +158,9 @@ textarea:hover, textarea:focus, textarea:active {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1; opacity: 1;
} }
input[type="checkbox"] {
/* ie8 doesn't support :checked */
html:not(.ie8) input[type="checkbox"].checkbox {
margin:0; margin:0;
padding:0; padding:0;
height:auto; height:auto;
@ -166,7 +168,7 @@ input[type="checkbox"] {
display: none; display: none;
} }
input[type="checkbox"] + label:before { html:not(.ie8) input[type="checkbox"].checkbox + label:before {
content: ""; content: "";
display: inline-block; display: inline-block;
@ -174,27 +176,27 @@ input[type="checkbox"] + label:before {
width: 20px; width: 20px;
vertical-align: middle; vertical-align: middle;
background: url('../img/actions/checkbox.svg') left center no-repeat; background: url('../img/actions/checkbox.svg') left top no-repeat;
opacity: 0.7; opacity: 0.7;
} }
input[type="checkbox"]:disabled +label:before { opacity: .6; } html:not(.ie8) input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; }
input[type="checkbox"].u-left +label:before { float: left; } html:not(.ie8) input[type="checkbox"].checkbox.u-left +label:before { float: left; }
input[type="checkbox"].white + label:before { html:not(.ie8) input[type="checkbox"].checkbox--white + label:before {
background-image: url('../img/actions/checkbox-white.svg'); background-image: url('../img/actions/checkbox-white.svg');
} }
input[type="checkbox"]:checked + label:before { html:not(.ie8) input[type="checkbox"].checkbox:checked + label:before {
background-image: url('../img/actions/checkbox-checked.svg'); background-image: url('../img/actions/checkbox-checked.svg');
} }
input[type="checkbox"].white:checked + label:before { html:not(.ie8) input[type="checkbox"].checkbox--white:checked + label:before {
background-image: url('../img/actions/checkbox-checked-white.svg'); background-image: url('../img/actions/checkbox-checked-white.svg');
} }
input[type="checkbox"]:hover+label:before, input[type="checkbox"]:focus+label:before { html:not(.ie8) input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before {
color:#111 !important; color:#111 !important;
} }

View file

@ -109,6 +109,9 @@
var id='ms'+multiSelectId+'-option-'+item; var id='ms'+multiSelectId+'-option-'+item;
var input=$('<input type="' + inputType + '"/>'); var input=$('<input type="' + inputType + '"/>');
input.attr('id',id); input.attr('id',id);
if(inputType === 'checkbox') {
input.addClass('checkbox');
}
if(settings.singleSelect) { if(settings.singleSelect) {
input.attr('name', 'ms'+multiSelectId+'-option'); input.attr('name', 'ms'+multiSelectId+'-option');
} }

View file

@ -65,7 +65,7 @@ script('core', [
<?php endif; ?> <?php endif; ?>
<?php if ($_['rememberLoginAllowed'] === true) : ?> <?php if ($_['rememberLoginAllowed'] === true) : ?>
<div class="remember-login-container"> <div class="remember-login-container">
<input type="checkbox" name="remember_login" value="1" id="remember_login" class="white"> <input type="checkbox" name="remember_login" value="1" id="remember_login" class="checkbox checkbox--white">
<label for="remember_login"><?php p($l->t('remember')); ?></label> <label for="remember_login"><?php p($l->t('remember')); ?></label>
</div> </div>
<?php endif; ?> <?php endif; ?>