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