Improve the .button-confirm-delete animation

dev/Styles/Admin/Domains.less

@@ -1,7 +1,8 @@
 
-.b-admin-domains-list-table {
+#V-Settings-Domains {
-
+	table {
-	width: 600px;
+		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;
-		}
 	}
 }

dev/Styles/Main.less

@@ -47,21 +47,99 @@ option:disabled {
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
-.button-confirm-delete {
+
-	margin-right: 15px;
+dialog::backdrop {
-	opacity: 0;
+	background: rgba(0,0,0,0.5);
-	visibility: hidden;
 }
-.button-confirm-delete.delete-access {
+.dialog-backdrop {
-	margin-right: 0;
+	background: rgba(0,0,0,0.5);
-	opacity: 1;
+	position: fixed;
-	visibility: visible;
+	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 {
+dialog {
-	color: #eee;
+	border: 0;
-	cursor: grab;
+	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 {
+dialog:not([open]) {
-	color: #aaa;
+	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;
+  }
 }

dev/Styles/Ui.less

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

snappymail/v/0.0.0/app/templates/Views/Admin/AdminSettingsDomains.html

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