mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-25 18:19:22 +03:00
Improve the .button-confirm-delete animation
This commit is contained in:
djmaze
parent
24ee2b6737
commit
e8daff85bc
4 changed files with 116 additions and 135 deletions
|
|
@ -1,7 +1,8 @@
|
|||
|
||||
.b-admin-domains-list-table {
|
||||
|
||||
width: 600px;
|
||||
#V-Settings-Domains {
|
||||
table {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.domain-name {
|
||||
display: inline-block;
|
||||
|
|
@ -16,36 +17,16 @@
|
|||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.button-delete {
|
||||
position: relative;
|
||||
right: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&.delete-access {
|
||||
visibility: visible;
|
||||
right: -15px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-domain, .disabled-domain {
|
||||
cursor: pointer;
|
||||
}
|
||||
.delete-domain:not(:hover), .disabled-domain:not(:hover) {
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
tr.disabled {
|
||||
.domain-name, .domain-alias {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.disabled-domain {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,21 +47,99 @@ option:disabled {
|
|||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.button-confirm-delete {
|
||||
margin-right: 15px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
dialog::backdrop {
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
.button-confirm-delete.delete-access {
|
||||
margin-right: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
.dialog-backdrop {
|
||||
background: rgba(0,0,0,0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
/*
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
|
||||
z-index: 1000000000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1100;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
*/
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
color: #eee;
|
||||
cursor: grab;
|
||||
dialog {
|
||||
border: 0;
|
||||
background-color: @white;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 5px 80px rgba(0,0,0,0.3);
|
||||
margin: 10px auto;
|
||||
max-height: calc(100vh - 20px);
|
||||
max-width: 560px;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
transition: all .2s ease-out;
|
||||
top: 0;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
tr:hover .drag-handle {
|
||||
color: #aaa;
|
||||
dialog:not([open]) {
|
||||
display: none !important;
|
||||
}
|
||||
dialog.show {
|
||||
opacity: 1;
|
||||
}
|
||||
dialog:not(.show) {
|
||||
background-color: rgba(0,0,0,0);
|
||||
opacity: 0;
|
||||
top: -25%;
|
||||
}
|
||||
|
||||
dialog header {
|
||||
padding: 9px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
// Close icon
|
||||
.close { margin-top: 2px; }
|
||||
// Heading
|
||||
h3 {
|
||||
margin: 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Body (where all modal content resides)
|
||||
dialog .modal-body {
|
||||
overflow-y: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
dialog footer {
|
||||
padding: 14px 15px 15px;
|
||||
margin-bottom: 0;
|
||||
text-align: right; // right align buttons
|
||||
border-top: 1px solid #ddd;
|
||||
border-radius: 0 0 6px 6px;
|
||||
.clearfix(); // clear it in case folks use .pull-* classes on buttons
|
||||
|
||||
// Properly space out buttons
|
||||
.btn + .btn {
|
||||
margin-left: 5px;
|
||||
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
|
||||
}
|
||||
// but override that for button groups
|
||||
.btn-group .btn + .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,6 +75,23 @@ textarea + .settings-save-trigger {
|
|||
max-width: 800px;
|
||||
}
|
||||
|
||||
.button-confirm-delete {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.button-confirm-delete:not(.delete-access) {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
color: #eee;
|
||||
cursor: grab;
|
||||
}
|
||||
tr:hover .drag-handle {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
// TABS
|
||||
// -------------
|
||||
|
||||
|
|
@ -125,98 +142,3 @@ textarea + .settings-save-trigger {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: rgba(0,0,0,0.5);
|
||||
}
|
||||
.dialog-backdrop {
|
||||
background: rgba(0,0,0,0.5);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
/*
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
|
||||
z-index: 1000000000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1100;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
*/
|
||||
}
|
||||
|
||||
dialog {
|
||||
border: 0;
|
||||
background-color: @white;
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 5px 80px rgba(0,0,0,0.3);
|
||||
margin: 10px auto;
|
||||
max-height: calc(100vh - 20px);
|
||||
max-width: 560px;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
transition: all .2s ease-out;
|
||||
top: 0;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
dialog:not([open]) {
|
||||
display: none !important;
|
||||
}
|
||||
dialog.show {
|
||||
opacity: 1;
|
||||
}
|
||||
dialog:not(.show) {
|
||||
background-color: rgba(0,0,0,0);
|
||||
opacity: 0;
|
||||
top: -25%;
|
||||
}
|
||||
|
||||
dialog header {
|
||||
padding: 9px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
// Close icon
|
||||
.close { margin-top: 2px; }
|
||||
// Heading
|
||||
h3 {
|
||||
margin: 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Body (where all modal content resides)
|
||||
dialog .modal-body {
|
||||
overflow-y: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
dialog footer {
|
||||
padding: 14px 15px 15px;
|
||||
margin-bottom: 0;
|
||||
text-align: right; // right align buttons
|
||||
border-top: 1px solid #ddd;
|
||||
border-radius: 0 0 6px 6px;
|
||||
.clearfix(); // clear it in case folks use .pull-* classes on buttons
|
||||
|
||||
// Properly space out buttons
|
||||
.btn + .btn {
|
||||
margin-left: 5px;
|
||||
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
|
||||
}
|
||||
// but override that for button groups
|
||||
.btn-group .btn + .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<span class="domain-alias" data-bind="if: alias">(alias)</span>
|
||||
</td>
|
||||
<td>
|
||||
<a class="btn btn-small btn-small-small btn-danger button-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oDomain) { $root.deleteDomain(oDomain); }"
|
||||
<a class="btn btn-small btn-small-small btn-danger button-confirm-delete button-delete-transitions" data-bind="css: {'delete-access': deleteAccess()}, click: function(oDomain) { $root.deleteDomain(oDomain); }"
|
||||
data-i18n="TAB_DOMAINS/DELETE_ARE_YOU_SURE"></a>
|
||||
</td>
|
||||
<td>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue