j2 store guest checkout

_j2store.scss

/**
 * @package         JD Stylo
 * @author          JoomDev
 * @link            https://www.joomdev.com
 * @copyright       Copyright © 2018 Regular Labs All Rights Reserved
 * @license         http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 */

//Product List
.j2store-product-list{
	.j2store-products-row{
		text-align: center;
		.j2store-single-product{
			position: relative;
			margin: 0 auto 20px;
			padding: 0px;
			border: 1px solid transparent;
			transition: all 0.2s ease-out 0s;
			.add-to-cart-wrap{
				display: inline-flex;
				.j2store-add-to-cart{
					.product-qty{
						display: none;
					}
				}
			}
			.product-compare{
				position: relative;
				padding: 0;
				font-size: 0px;
				transform: scale(0);
				transition: all 0.3s ease 0s;
				.product-compare-link,.product-view-compare-list{
					left: 0;
					position: absolute;
					right: 0;
					top: 0;
					height: 40px;
				}
				&:hover{
					.fa{
						color: $primary;
					}
				}
				.fa{
					font-size: 20px;
					color: #a6a6a6;
					line-height: 40px;
				}
			}
			.j2store-addtocart-form{
				display: inline-block;
				position: relative;
				.j2store-add-to-cart,.product-wishlist,.product-compare,.out-of-stock{
					display: inline-block;
					height: 40px;
					line-height: 40px;
					margin: 0;
					width: 40px;
					&:hover{
						background: transparent;
					}
					.j2store-add-to-cart{
						position: relative;
						&::before{
							color:$white;
						}
					}
				}
				.out-of-stock{
					transform: scale(0);
					transition: all 0.3s ease 0s;
					position: relative;
					top: -12px;
					a{
						color: $secondary;
					}
				}
				.product-wishlist{
					transform: scale(0);
					transition: all 0.3s ease 0s;
					position: relative;
					a.product-wishlist-link{
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						font-size: 0;
						display: inline-block;
						height: 40px;
						line-height: 40px;
						width: 40px;
						&:after{
							content:"\f004";
							font-size: 20px;
							font-family: "Font Awesome 5 Free";
							font-weight: 500;
							color: $secondary;
						}
						&:hover{
							&::after{
								color: $secondary;
							}
							&[href="javascript:void(0);"]:after{
								color: $primary;
							}
						}
						&[href="javascript:void(0);"]:after{
							content: "\f004";
							font-family: "Font Awesome 5 Free";
							font-weight: 500;
							color: #a9a9a9;
						}
					}
				}
				.j2store-addtocart-form .btn{
					transform: scale(0);
					transition: all 0.3s ease 0s;
				}
				.quickview{
					transform: scale(0);
					transition: all 0.3s ease 0s;
				}
				.j2store-add-to-cart,.out-of-stock{
					position: relative;
					top: -12px;
					&::before{
						color: #a6a6a6;
						content: "\f07a";
						font-family: "Font Awesome 5 Free";
						font-weight: 600;
						left: 10px;
						position: absolute;
						top: 0px;
						opacity: 0;
						transform: scale(0);
						transition: all 0.3s ease 0s;
					}
					&:hover{
						&::before{
							color: $primary !important;
						}
					}
				}
				.j2store-add-to-cart .j2store-cart-button{
					transform: scale(0);
					transition: all 0.3s ease 0s;
				}
				.btn{
					padding: 5px 25px;
					text-align: center;
					position: relative;
					&[value]{
						font-size: 0px;
						background: transparent;
						padding: 20px;
						border: none;
						display: inline;
					}
					&:focus{
						box-shadow: none;
					}
				}
			}
			&:hover{
				box-shadow: 0 10px 30px 0 rgba(58, 87, 135, 0.15);
				.quickview, .j2store-addtocart-form .btn{
					transform: scale(1);
				}
				.j2store-addtocart-form{
					.product-wishlist,
					.product-compare,
					.j2store-add-to-cart .j2store-cart-button{
						transform: scale(1);
					}
				}
				.j2store-add-to-cart{
					transform: scale(1);
					&::before{
						opacity: 1;
						transform: scale(1);
					}
				}
				.out-of-stock{
					transform: scale(1);
				}

			}
		}
		.product-title{
			margin: 0px;
			a{
				color: $primary;
				font-size: 18px;
				font-weight: 600;
				text-decoration: none;
			}
		}
		.product-price-container{
			display: inline-flex;
			margin-bottom: 20px;
			text-align: center;
			.strike{
				margin-right: 10px;
			}
			.base-price{
				color: #a9a9a9;
				font-size: 14px;
				font-weight: 600;
			}
			.sale-price{
				color: $primary;
				font-size: 14px;
				font-weight: 600;
			}
		}
	}
}

//Product Filters
form#productFilters{
	width: 100%;
	margin-bottom: 40px;
	display: inline-block;
	@include media-breakpoint-between(xs, md){
		display: flex;
	}
	input.j2store-product-search-input{
		float: left;
		border-radius: 0;
		border: 1px solid #ececec;
		box-shadow: none;
		padding: 10px;
		&:focus{
			border-color: $secondary;
		}
	}
	input.btn{
		float: left;
		min-width: auto;
		padding: 5px 20px;
		margin-left: 10px;
		text-align: center;
		&.btn-success{
			background: $primary;
			color: $white;
			border: 0px;
			padding: 9px;
		}
		&.btn-inverse{
			background: $secondary;
			color: $white;
			border: 0px;
			padding: 9px;
		}
	}
	select#j2store_sortby{
		float: right;
		padding: 0px 5px;
		height: 45px;
		@include media-breakpoint-down(sm){
			margin-top: 10px;
		}
	}
}

// Sidebar Filters
#productsideFilters{
	.j2store-product-filters{
		padding: 30px 20px;
		border: 1px solid #ececec;
		overflow: hidden;
		#j2store-slider-range.ui-slider{
			background: #ececec;
			.ui-slider-range{
				background: $secondary;
			}
			.ui-slider-handle{
				top: -8px;
				background: $secondary;
			}
		}
		#j2store-slider-range-box{
			&.price-input-box{
				input.btn{
					float: left;
					min-width: auto;
					padding: 5px 20px;
					margin-left: 10px;
					text-align: center;
					&.btn-success{
						background: $primary;
						color: $white;
						border: 0px;
						padding: 9px;
						margin: 0px;
					}
				}
			}
		}
		.product-filter-heading{
			display: block;
			font-size: 22px;
			margin-bottom: 15px;
		}
		.control-group{
			margin: 0;
		}
	}
	div.category-filters{
		padding-bottom: 0;
		#j2store_category{
			ul{
				margin: 0px 0 15px 0px;
				li{
					width: 100%;
					a{
						line-height: 30px;
						letter-spacing: 1px;
						font-size: 14px;
						padding: 10px 0px 10px  35px;
						transition: all 0.35s ease-in-out 0s;
						width: 100%;
						display: block;
						color: $primary;
						border-bottom: 1px solid #eaeaea;
						border-radius: 0;
						position: relative;
						&::before{
							content: "\f058";
							display: block;
							font-family: "Font Awesome 5 Free";
							font-weight: 500;
							position: absolute;
							left: -5px;
							line-height: 35px;
							color: #cdcdcd;
						}
						&:hover{
							padding-left: 30px;
							text-decoration: none;
						}
					}
					&.active{
						a{
							color: $secondary;
						}
					}
				}
			}
		}
	}
	div.manufacturer-filters{
		#j2store-brand-filter-container{
			overflow-y: auto;
			max-height: 200px;
			.j2store-product-brand-label{
				display: block;
				font-size: 16px;
				margin-bottom: 7px;
				input{
					margin-top: -3px;
				}
			}
		}
	}
}

//Cart Page
.j2store #j2store-checkout-content{
	h1{
		font-size: 28px;
		margin-bottom: 20px;
	}
	> div{
		margin-bottom: 20px;
	}
	.checkout-heading{
		margin-bottom: 0;
		color: $primary;
		font-size: 14px;
	}
	.checkout-content{
		border: 1px solid #ddd;
		border-top: none;
		padding: 10px 20px;
		h2,
		h3{
			font-size: 22px;
			margin: 10px 0 20px;
		}
	}
	.btn{
		padding: 10px 20px;
		margin-top: 20px;
	}
	.j2store, #billing-address{
		label{
			width: 150px;
			display: block;
			margin: 10px 0;
		}
		div[class*="col-md-"]{
				input,select,textarea{
				width: 100%;
				display: inline-block;
				padding: 10px;
				border: 1px solid #eaeaea;
				&:focus,&:hover{
					border: 1px solid $secondary;
				}
			}
			.j2store_field_required{
				display: none;
			}
		}
		.shipping-make-same{
			padding-left: 15px;
			padding-right: 15px;
			input{
				width: auto !important;
			}
		}
		
	}

	#akeeba-renderjoomla{
		.row + [class*="col-"].shipping-make-same{
			padding-left:0px;
			padding-right: 0px;
		}
	}
}

//Myprofile
.j2store-myprofile{
	ul.nav-tabs{
		li{
			a{
				display: inline-block;
				padding: 0 15px 10px 0px;
			}
		}
	}
}

//Address Tab
#address-tab{
	.col-md-12{
		padding: 0px;
	}
}

//Address Edit
#address,#billing-new{
	.pull-left{
		float: none;
	}
	.btn{
		padding: 10px 20px;
		margin-top: 20px;
		&.btn-success,&.btn-warning{
			color: $white;
			background: $primary;
			border: none;
			&:focus,&:active:focus:not(:disabled):not(.disabled){
				box-shadow: none;
				background: $primary;
			}
		}
	}
	.j2store_field_required{
		display: none;
	}
	div[class*="col-md-"]{
			input,select,textarea{
			width: 100%;
			display: inline-block;
			padding: 10px;
			border: 1px solid #eaeaea;
			&:focus,&:hover{
				border: 1px solid $secondary;
			}
		}
		.j2store_field_required{
			display: none;
		}
	}
}

//Orders Tab
#orders-tab{
	.j2store-order-action-icons {
		display: inline-flex;
	}
}

//Store Cart Form
.j2store-cart{
	.buttons-right{
		.cart-checkout-button{
			.btn{
				&.btn-success{
					color: $white;
					font-weight: 600;
					background: $primary;
					border: none;
					&:focus,&:active:focus:not(:disabled):not(.disabled){
						box-shadow: none;
						background: $primary;
					}
				}
			}	
		}
	}
	.checkout-detail{
		background: #ececec;
		padding: 30px;
		.coupon{
			margin-bottom: 20px;
			form{
				input{
					border: 1px solid #eaeaea;
					display: inline-block;
					margin: 20px 0;
					padding: 10px;
					width: 100%;
					&:focus,&:hover{
						border: 1px solid $secondary;
					}
				}
				.coupon-button{
					input{
						background: transparent;
						color: $white;
						border: 1px solid transparent;
						display: inline-block;
						margin: 0px 0;
						padding: 0px;
						width: auto;
						&:focus,&:hover{
							border: 1px solid transparent;
						}
					}
					i.fa{
						color: $white;
					}
				}
			}
		}
		.cart-footer{
			tr,th{
				text-align: left !important;
			}
		}
	}
	#j2store-cart-form{
		.btn{
			&.btn-warning{
				margin-top: 0px;
				color: $white;
				background: $primary;
				border: none;
				&:focus,&:active:focus:not(:disabled):not(.disabled){
					box-shadow: none;
					background: $primary;
				}
			}
		}
		@include media-breakpoint-down(xs){
			overflow: scroll;
			.j2store-cart-buttons{
				.buttons-left{
					margin-bottom: 20px;
					.btn{
						&.btn-warning{
							margin-top: 20px;
						}
					}
				}
			}
		}
		.j2store-cart-buttons{
			.buttons-left{
				.btn{
					&.btn-warning{
						color: $white;
						font-weight: 600;
						background: $primary;
						border: none;
						&:focus,&:active:focus:not(:disabled):not(.disabled){
							box-shadow: none;
							background: $primary;
						}
					}
				}
			}
		}
	}
}

//Order Login Form

#j2storeOrderLoginForm{
	label{	
		display: block;
		width: 150px;
		input{
			display: inline-block;
			padding: 10px;
			border: 1px solid #eaeaea;
			&:focus,&:hover{
				border: 1px solid $secondary;
			}
		}		
	}
	.loginLinks{
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
}

//Compare
.j2store-product-compare-container{
	display: inline-block;
	tr{
		border: 1px solid #f2f2f2;
	}
	thead th,thead td, thead tr{
		border: 1px solid #f2f2f2;
	}
	.table-bordered th, .table-bordered td{
		border: 1px solid #f2f2f2;
	}
	.table tbody + tbody{
		border: 1px solid #f2f2f2;
	}
	.compare-product-price-container{
		display: inline;
	}
	.btn{
		&.btn-success,&.btn-danger{
			background: $primary;
			color: #fff;
			border: none;
			&:focus,&:active:focus:not(:disabled):not(.disabled){
				box-shadow: none;
				background: $primary;
			}
		}
	}
}

//wishlist main block
#j2store-wishlist-main-block{
	.btn{
		&.btn-success,&.btn-warning,&.btn-danger{
			background: $primary;
			color: #fff;
			border: none;
			&:focus,&:active:focus:not(:disabled):not(.disabled){
				box-shadow: none;
				background: $primary;
			}
		}
	}
	.row-fluid{
		:not(.span6){
			margin-top: 20px;
		}
	}
	.j2store-wishlist-items{
		.j2store-wishlist-form{
			input.input-mini{
				display: inline-block;
				width: 50px;
				border-radius: 0px;
				border: 1px solid #f2f2f2;
				
			}
		}
	}
	.product-wishlist-remove{
		padding: 0px;
		background: transparent;
		.icon{
			position: relative;
			&:before{
				content: "\f2ed";
				display: block;
				font-family: "Font Awesome 5 Free";
				font-weight: 500;
				position: absolute;
				left: auto;
				line-height: 35px;
				color: $secondary;
			}
		}
	}
}
//price-sku-brand-container
.price-sku-brand-container{
	border: none;
	margin: 0px;
	.product-price-container{
		div{
			display: inline-block;
		}
		.strike{
			color: #a9a9a9;
			font-size: 14px;
			font-weight: 600;
		}
	}
	.instock{
		font-size: 11px;
	}
}
//Single Product
.j2store-single-product{
	.product-upsells-container{
		.upsell-product-row{
			text-align: center;
			.btn{
				&.btn-success,&.btn-danger{
					background: $primary;
					color: #fff;
					border: none;
					&:focus,&:active:focus:not(:disabled):not(.disabled){
						box-shadow: none;
						background: $primary;
					}
				}
			}
			.upsell-product-image{
				display: inline-block;
			}
			.j2store_add_to_cart_button,.product-wishlist{
				display: none;
			}
			.product-price-container{
				div{
					display: inline-block;
				}
				.strike{
					color: #a9a9a9;
					font-size: 14px;
					font-weight: 600;
				}
			}
		}
		.sale-price{
			font-size: 14px;
			font-weight: 600;
		}
		
	}
	.simple-product{
		.j2store-mainimage{
			margin-bottom: 10px;
			overflow: hidden;
			max-height: 400px;
		}
		div.product-wishlist{
			a{
				&:after{
					left: -30px;
				}
			}
		}
		.outofstock{
			color: $secondary;
		}
		.j2store-product-additional-images{
			ul{
				padding: 0px;
				li{
					display: inline-block;
					margin-right: 10px;
					border: 1px solid #fafafa;
					padding: 0px;
					height: 100px;
					overflow: hidden;
					&:last-child{
						margin-right: 0px;
					}
					&:hover{
						cursor: pointer;
							opacity: 0.5;
					}
					img{
						width: 100px;
					}
				}
			}
		}
	}
	.j2store-addtocart-form{
		.product-wishlist{
			a{
				position: relative;
				&:after{
					content:"\f004";
					font-size: 20px;
					color: $primary;
					font-family: "Font Awesome 5 Free";
					font-weight: 500;
					color: $primary;
					position: absolute;
					left: 0px;
					right: 0px;
					top: 0px;
				}
				&:hover{
					&:after{
						color: $secondary;
					}
				}
			}
		}
		.product-wishlist,.product-compare{
			display: inline-block;
			padding: 10px 0px 10px 35px;
		}
		.j2store-add-to-cart {
			display: inline-flex;
			width: 100%;
			margin: 10px 0px;
			.product-qty{
				margin-right: 20px;
				input{
					border-radius: 0;
					height: 55px;
					border: 1px solid #ececec;
					&[type="number"]{
						width: 55px !important;
					}
				}
			}
		}
		.options{
			margin-bottom: 20px;
			.option{
				display: inline-block;
				width: 49%;
				@include media-breakpoint-between(xs, md){
					width: 100%;
				}
				select{
					border-radius: 0;
					height: 49px;
					width: 90%;
					border: 1px solid #ececec;
				}
			}
			ul.option-value{
				padding: 0px;
				margin: 0px;
				li{
					display: inline;
					input{
						display: none;
					}
					label{
						border: 1px solid #ececec;
						cursor: pointer;
						display: inline-block;
						height: 40px;
						line-height: 40px;
						margin: 0;
						text-align: center;
						width: 40px;
						&:hover{
							background: $secondary;
							color: $white;
						}
					}
				}
			}
		}
	}
	.fade:not(.show){
		opacity: 1;
	}
}

//Product Detail Tab
ul#j2store-product-detail-tab{
	margin-bottom: 50px;
	margin-top: 5.5rem;
	&.nav-tabs{
		display: flex;
		justify-content: center;
		border-bottom: 0px;
		position: relative;
		&:after{
			border-bottom: 1px solid #dee2e6;
			content: "";
			display: block;
			position: absolute;
			top: 15px;
			width: 100%;
			left: 0px;
			right: 0px;
			@include media-breakpoint-down(xs){
				border-bottom: 1px solid transparent;
			}
		}	
	}
	li{
		position: relative;
		@include media-breakpoint-down(xs){
			margin-bottom: 30px;
		}
		&:first-child:before{
			border-left: 20px solid $white;
			content: "";
			display: block;
			height: 54px;
			left: -20px;
			position: absolute;
			right: 0;
			top: -15px;
			z-index: 1;
		}
		&:last-child:before{
			border-right: 20px solid $white;
			content: "";
			display: block;
			height: 54px;
			left: 0px;
			position: absolute;
			right: -20px;
			top: -15px;
			z-index: 1;
		}
		&.active{
			
			a{
				color: $secondary;
			}
		}
		a{
			background: $white;
			border: 1px solid #ececec;
			padding: 15px 30px;
			position: relative;
			text-transform: uppercase;
			z-index: 1;
			text-decoration: none;
		}
	}
}

//j2store brand filter
.j2store-product-filters{
	label{
		display: block;
		position: relative;
		padding-left: 35px;
		margin: 10px 0px !important;
		cursor: pointer;
		font-size: 14px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		input{
			position: absolute;
			opacity: 0;
			cursor: pointer;
			&:checked ~ .checkmark{
				background-color: $secondary;
			}
			&:checked ~ .checkmark{
				&:after{
					display: block;
				}
			}
		}
		&:hover{
			input ~ .checkmark{
				background-color: $primary;
			}
		}
	}
	.checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: #ececec;
		&:after{
		  left:10px;
		  top: 7px;
		  width: 5px;
		  height: 10px;
		  border: solid white;
		  border-width: 0 3px 3px 0;
		  -webkit-transform: rotate(45deg);
		  -ms-transform: rotate(45deg);
		  transform: rotate(45deg);
		}
	}
	.checkmark{
		&:after{
			content: "";
			position: absolute;
			display: none;
		}
	}
}