Elastic: Use custom switch in place of pretty checkbox
This commit is contained in:
parent
80ed46693a
commit
7288bac122
8 changed files with 21 additions and 77 deletions
|
@ -3650,10 +3650,10 @@ function rcube_calendar_ui(settings)
|
|||
// Make Elastic checkboxes pretty
|
||||
if (window.UI && UI.pretty_checkbox) {
|
||||
$(rcmail.gui_objects.calendarslist).find('input[type=checkbox]').each(function() {
|
||||
UI.pretty_checkbox($(this).addClass('flex-checkbox'));
|
||||
UI.pretty_checkbox(this);
|
||||
});
|
||||
calendars_list.addEventListener('add-item', function(prop) {
|
||||
UI.pretty_checkbox($(prop.li).find('input').addClass('flex-checkbox'));
|
||||
UI.pretty_checkbox($(prop.li).find('input'));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
rcmail.addEventListener('init', function() {
|
||||
// Make checkboxes pretty
|
||||
rcmail.treelist.addEventListener('add-item', function(prop) {
|
||||
UI.pretty_checkbox($(prop.li).find('input').addClass('flex-checkbox'));
|
||||
UI.pretty_checkbox($(prop.li).find('input'));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -170,7 +170,7 @@ function rcube_kolab_notes_ui(settings)
|
|||
// Make Elastic checkboxes pretty
|
||||
if (window.UI && UI.pretty_checkbox) {
|
||||
notebookslist.addEventListener('add-item', function(prop) {
|
||||
UI.pretty_checkbox($(prop.li).find('input').addClass('flex-checkbox'));
|
||||
UI.pretty_checkbox($(prop.li).find('input'));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -846,16 +846,12 @@ body.task-calendar {
|
|||
|
||||
// fixes additional checkbox in Elastic's .datetime widget
|
||||
.datetime {
|
||||
label {
|
||||
margin-left: 1em;
|
||||
margin-top: .4rem;
|
||||
.custom-switch {
|
||||
padding-left: .5rem;
|
||||
|
||||
label {
|
||||
line-height: 1;
|
||||
|
||||
&:before {
|
||||
margin-right: .25rem;
|
||||
}
|
||||
line-height: 2;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -863,10 +859,6 @@ body.task-calendar {
|
|||
width: 10em !important;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
input {
|
||||
width: 8em !important;
|
||||
|
@ -920,16 +912,6 @@ body.task-calendar {
|
|||
order: 100;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input.icon-checkbox + label:before {
|
||||
margin-right:.25rem;
|
||||
display: inline;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule-nav {
|
||||
|
|
|
@ -267,9 +267,8 @@
|
|||
}
|
||||
|
||||
td.invite {
|
||||
label:before {
|
||||
line-height: 1.6;
|
||||
height: 1.5em;
|
||||
.custom-switch {
|
||||
margin-top: .15rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -343,17 +342,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
html.touch {
|
||||
.edit-attendees-table {
|
||||
td.invite {
|
||||
label:before {
|
||||
line-height: 1.2;
|
||||
height: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-searchbar {
|
||||
display: flex;
|
||||
margin-bottom: .5rem;
|
||||
|
|
|
@ -217,18 +217,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
input + label,
|
||||
input.complete {
|
||||
.custom-switch {
|
||||
position: absolute;
|
||||
right: .25rem;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
padding: 0 .2em 0 0;
|
||||
cursor: pointer;
|
||||
top: 1.4rem;
|
||||
z-index: 1;
|
||||
line-height: 1;
|
||||
height: 1.5em;
|
||||
font-size: 1.15em;
|
||||
height: 2.3em;
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
@ -255,7 +248,7 @@ html.touch #tasklist {
|
|||
|
||||
span.flagged,
|
||||
input[type=checkbox],
|
||||
.icon-checkbox + label {
|
||||
.custom-switch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -65,6 +65,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.custom-switch {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.folder .listname:before {
|
||||
&:extend(.font-icon-class);
|
||||
content: @fa-var-sticky-note;
|
||||
|
@ -193,18 +197,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
input.flex-checkbox {
|
||||
position: relative !important;
|
||||
margin: 0 0 0 .25em !important;
|
||||
|
||||
& + label {
|
||||
position: relative !important;
|
||||
margin: 0 .3em 0 -1em !important;
|
||||
right: 0 !important;
|
||||
font-size: 1.15em;
|
||||
}
|
||||
}
|
||||
|
||||
li.droptarget > div {
|
||||
background-color: @color-list-droptarget-background;
|
||||
}
|
||||
|
@ -381,13 +373,6 @@ a.history {
|
|||
label {
|
||||
order: 10;
|
||||
}
|
||||
|
||||
.icon-checkbox + label {
|
||||
order: unset;
|
||||
min-width: 2em;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
button.btn.save.notify:before {
|
||||
|
@ -416,6 +401,7 @@ button.btn.print:before {
|
|||
}
|
||||
|
||||
.prop {
|
||||
line-height: 2;
|
||||
margin-left: .5rem;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
@ -423,11 +409,6 @@ button.btn.print:before {
|
|||
label {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label:before {
|
||||
line-height: 1.25;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
|
|
@ -219,10 +219,10 @@ function rcube_tasklist_ui(settings)
|
|||
// Make Elastic checkboxes pretty
|
||||
if (window.UI && UI.pretty_checkbox) {
|
||||
$(rcmail.gui_objects.tasklistslist).find('input[type=checkbox]').each(function() {
|
||||
UI.pretty_checkbox($(this).addClass('flex-checkbox'));
|
||||
UI.pretty_checkbox(this);
|
||||
});
|
||||
tasklists_widget.addEventListener('add-item', function(prop) {
|
||||
UI.pretty_checkbox($(prop.li).find('input').addClass('flex-checkbox'));
|
||||
UI.pretty_checkbox($(prop.li).find('input'));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue