Merge pull request #266 from skyverge/5.1-payment-methods-take-2

5.1: New Payment Methods UI

Author: ChaseWiseman

woocommerce/payment-gateway/assets/css/frontend/sv-wc-payment-gateway-my-payment-methods.min.css

@@ -6,22 +6,8 @@ Copyright (c) 2015-2018, SkyVerge, Inc.
  Licensed under the GNU General Public License v3.0
 http://www.gnu.org/licenses/gpl-3.0.html
 */
-.sv-wc-payment-gateway-my-payment-methods-table-title {
-	clear: both; // storefront fix
-	margin: 1.5em 0;
-	h2 {
-		display: inline;
-	}
-	a.button {
-		float: right;
-		line-height: 1.5;
-		padding-left: .8em;
-		padding-right: .8em;
-		&:before {
-			margin-right: 5px;
-		}
-	}
-}
+
+@import '../../../../assets/css/mixins';
 
 table.sv-wc-payment-gateway-my-payment-methods-table {
 	font-size: 0.85em;
@@ -34,29 +20,101 @@ table.sv-wc-payment-gateway-my-payment-methods-table {
 		white-space: nowrap;
 	}
 
-	.sv-wc-payment-gateway-payment-method-title img {
-		width: 40px;
-		height: 25px;
-		vertical-align: middle;
-		margin-right: 1em;
-		display: inline !important;
+	.sv-wc-payment-gateway-payment-method-header-details span,
+	.sv-wc-payment-gateway-payment-method-header-default span,
+	.sv-wc-payment-gateway-payment-method-header-actions span {
+		display: none;
+	}
+
+	.sv-wc-payment-gateway-payment-method-header-expiry,
+	.sv-wc-payment-gateway-payment-method-header-default {
+		text-align: center;
 	}
 
-	td.sv-wc-payment-gateway-payment-method-actions {
+	.sv-wc-payment-gateway-payment-method-header-actions {
 		text-align: right;
+	}
+
+	.sv-wc-payment-gateway-my-payment-methods-method {
+
+		.sv-wc-payment-gateway-payment-method-title input {
+			width: 100%;
+		}
+
+		.sv-wc-payment-gateway-payment-method-details {
+			white-space: nowrap;
+
+			img {
+				width: 40px;
+				height: 25px;
+				margin-right: 0.5em;
+				vertical-align: middle;
+				display: inline !important;
+			}
+		}
+
+		.sv-wc-payment-gateway-payment-method-expiry {
+			text-align: center;
+		}
+
+		.sv-wc-payment-gateway-payment-method-default {
+			text-align: center;
+
+			mark {
+				display: inline-block;
+				color: white;
+				background-color: #3d9cd2;
+				font-size: 0.75em;
+				text-transform: uppercase;
+				padding: 2px 4px;
+				border-radius: 2px;
+			}
+		}
+
+		.sv-wc-payment-gateway-payment-method-actions {
+			text-align: right;
 
-		.button {
-			margin: .125em 0 .125em .25em;
+			.button {
+				margin: .125em 0 .125em .25em;
 
-			&.disabled.tip:hover {
-				cursor: help;
+				&.disabled.tip:hover {
+					cursor: help;
+				}
 			}
 		}
+
+		.cancel-edit-payment-method {
+			margin-right: 0.5em;
+		}
+	}
+
+	&.editing {
+
+		.sv-wc-payment-gateway-payment-method-header-default span {
+			display: inline;
+		}
+
+		.sv-wc-payment-gateway-my-payment-methods-method:not(.editing),
+		.sv-wc-payment-gateway-my-payment-methods-type-divider {
+			opacity: 0.5;
+		}
+
+		.sv-wc-payment-gateway-my-payment-methods-method:hover {
+			opacity: 1;
+		}
 	}
 
 	tr.sv-wc-payment-gateway-my-payment-methods-type-divider td {
 		font-weight: 700;
 	}
+
+	.error td {
+		color: white;
+		text-align: center;
+		background-color: #e26838;
+		border-radius: 0 0 3px 3px;
+		padding: 5px;
+	}
 }
 
 #tiptip_holder {
@@ -141,28 +199,28 @@ table.sv-wc-payment-gateway-my-payment-methods-table {
 
 	table.sv-wc-payment-gateway-my-payment-methods-table {
 
-		tr td.sv-wc-payment-gateway-payment-method-title::before {
-			content: '';
-		}
+		.sv-wc-payment-gateway-my-payment-methods-method {
 
-		.sv-wc-payment-gateway-payment-method-title img {
-			float: left;
-		}
+			.sv-wc-payment-gateway-payment-method-expiry,
+			.sv-wc-payment-gateway-payment-method-default {
+				text-align: right;
+			}
 
-		td.sv-wc-payment-gateway-payment-method-actions {
-			text-align: left;
+			.sv-wc-payment-gateway-payment-method-actions {
+				text-align: right;
 
-			&:before {
-				display: none;
-			}
+				&:before {
+					display: none;
+				}
 
-			.button {
-				float: none;
-				margin: .125em .25em .125em 0;
+				.button {
+					float: none;
+					margin: .125em .25em .125em 0;
+				}
 			}
 		}
 
-		tr.sv-wc-payment-gateway-my-payment-methods-type-divider td:before {
+		.sv-wc-payment-gateway-my-payment-methods-type-divider td:before {
 			display: none;
 		}
 	}