first commit

wp-content/themes/oceanwp/sass/woo-multistep-checkout.scss

@@ -0,0 +1,237 @@
+/*------------------------------------------------------------------
+Woo Multi-Step Checkout
+-------------------------------------------------------------------*/
+
+// Transition
+@mixin transition( $args ) {
+    -webkit-transition: $args;
+    -moz-transition: $args;
+    -ms-transition: $args;
+    -o-transition: $args;
+    transition: $args;
+}
+
+// Border radius
+@mixin border-radius( $args ) {
+   -webkit-border-radius: $args;
+   -moz-border-radius: $args;
+   -ms-border-radius: $args;
+    border-radius: $args;
+}
+
+#owp-checkout-timeline {
+	margin-bottom: 40px;
+
+	li {
+		float: left;
+    	width: 33.33%;
+	}
+
+	&.step-4 li {
+    	width: 25%;
+	}
+
+	.timeline-wrapper {
+	    position: relative;
+	    display: block;
+	    padding: 10px;
+	    background-color: #eee;
+	    color: #333;
+	    font-size: 15px;
+	    line-height: 40px;
+	    @include transition( all .1s ease );
+	}
+
+	.active .timeline-wrapper {
+	    background-color: #13aff0;
+	    color: #fff;
+	}
+
+	.timeline-step {
+	    display: inline-block;
+	    font-size: 14px;
+	    text-align: center;
+	    width: 26px;
+	    height: 26px;
+	    line-height: 22px;
+	    margin-right: 8px;
+	    background-color: #fff;
+	    color: #ccc;
+	    border: 2px solid #ccc;
+	    border-radius: 20px;
+	}
+
+	.timeline-label {
+	    font-weight: 600;
+	}
+
+	&.arrow {
+		li {
+	    	padding-right: 50px;
+		}
+
+		.timeline-wrapper {
+			&:before,
+			&:after {
+			    content: '';
+			    position: absolute;
+			    top: 0;
+			    width: 0;
+			    height: 0;
+		    	@include transition( all .1s ease );
+			}
+
+		    &:before {
+			    left: -20px;
+			    border-top: 30px solid #eee;
+			    border-bottom: 30px solid #eee;
+			    border-left: 20px solid transparent;
+			}
+
+		    &:after {
+			    right: -20px;
+			    border-top: 30px solid transparent;
+			    border-bottom: 30px solid transparent;
+			    border-left: 20px solid #eee;
+			    border-right-color: #eee;
+			}
+		}
+
+		.active .timeline-wrapper {
+		    &:before {
+			    border-top-color: #13aff0;
+			    border-bottom-color: #13aff0;
+			}
+
+		    &:after {
+			    border-left-color: #13aff0;
+			    border-right-color: #13aff0;
+			}
+		}
+	}
+
+	&.square {
+		li {
+	    	text-align: center;
+		}
+	}
+}
+
+#checkout-wrapper {
+	.woocommerce-billing-fields h3,
+	#customer_shipping_details,
+	#order_review,
+	#customer_billing_details.show-login-reminder.not-logged-in,
+	#checkout_coupon {
+	    display: none;
+	}
+
+	#checkout_coupon,
+	#checkout_login,
+	form.checkout {
+	    max-width: 850px;
+	    margin: 0 auto;
+	}
+
+	#order_review {
+	    max-width: 650px;
+	    margin: 0 auto;
+	}
+
+	form.checkout {
+		display: block;
+
+		#billing_phone_field,
+		#billing_email_field {
+		    width: 48%;
+		    clear: none;
+		}
+
+		#billing_phone_field {
+			float: left;
+		}
+
+		#billing_email_field {
+			float: right;
+		}
+
+	   	#order_review {
+	    	float: none;
+    		width: 100%;
+	    }
+	}
+
+	form.login {
+	    margin-bottom: 0;
+	}
+
+	.woocommerce-billing-fields__field-wrapper,
+	.woocommerce-shipping-fields__field-wrapper {
+		&:after {
+			content: '';
+		    display: block;
+		    visibility: hidden;
+		    clear: both;
+		    zoom: 1;
+		    height: 0;
+		}
+	}
+
+	#form_actions {
+		display: inline-block;
+	    width: 100%;
+	    margin-top: 35px;
+
+	    p.form-row.notes {
+	    	margin: 0;
+	    }
+
+	    a {
+	    	float: left;
+	    	font-size: 12px;
+		    font-weight: 600;
+		    padding-bottom: 1px;
+		    border-bottom: 2px solid;
+		    margin-top: 6px;
+		    text-transform: uppercase;
+		    letter-spacing: 0.6px;
+
+		    i {
+		    	font-size: 16px;
+    			margin-right: 5px;
+		    }
+	    }
+
+	    .buttons {
+	    	float: right;
+
+	    	input {
+	    		@include border-radius( 30px );
+	
+				&.prev {
+					display: none;
+				}
+
+	    		&.next {
+	    			margin-left: 10px;
+	    		}
+	    	}
+	    }
+	}
+}
+
+/* Responsive */
+@media only screen and (max-width: 959px) {
+	#owp-checkout-timeline {
+		li {
+			padding: 0 !important;
+			margin-bottom: 15px;
+		}
+
+		li,
+		&.step-4 li {
+			float: none;
+    		width: 100%;
+		}
+	}
+}