site_oueb_2/wp-content/themes/oceanwp/sass/woo-mini-cart.scss

/*------------------------------------------------------------------
Woo Mini Cart
-------------------------------------------------------------------*/

// Box Shadow
@mixin box-shadow( $args ) {
    -webkit-box-shadow: $args;
    -moz-box-shadow: $args;
    box-shadow: $args;
}

// Opacity
@mixin opacity( $args ) {
    -moz-opacity: $args;
    -webkit-opacity: $args;
    opacity: $args;
}

// Transition
@mixin transition( $args ) {
    -webkit-transition: $args;
    -moz-transition: $args;
    -ms-transition: $args;
    -o-transition: $args;
    transition: $args;
}

// Display Flex
@mixin display() {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

// Flex Wrap
@mixin flex-wrap( $args ) {
    -ms-flex-wrap: $args;
    -webkit-flex-wrap: $args;
    flex-wrap: $args;
}

// Flex Direction
@mixin flex-direction( $args ) {
    -webkit-flex-direction: $args;
    flex-direction: $args;
}

// Align Items
@mixin align-items( $args ) {
    -webkit-align-items: $args;
    align-items: $args;
}

.current-shop-items-dropdown {
	position: absolute;
	top: 100%;
	right: -20px;
	background-color: #fff;
	z-index: 10000;
	border-top: 3px solid transparent;
	text-align: left;
	@include box-shadow( 0 2px 6px rgba(0, 0, 0, 0.1) );
	width: 350px;
	visibility: hidden;
	@include opacity( 0 );
	@include transition( all 0.25s ease-in-out );

	ul.woocommerce-mini-cart {
		max-height: 50vh;
    	overflow-y: auto;
	}

	.widgettitle {
		display: none;
	}

	li:first-child {
		border-top: none;
	}

	p.woocommerce-mini-cart__empty-message {
		padding: 20px;
		margin: 0;
	}
}

.wcmenucart-toggle-drop_down:hover,
.show-cart .wcmenucart-toggle-drop_down {
	.current-shop-items-dropdown {
		visibility: visible;
		@include opacity( 1 );
	}
}

.boxed-layout .current-shop-items-dropdown {
	right: 0;
}

.widget_shopping_cart {
	ul.cart_list li {
		padding: 0;
		border-bottom-width: 1px;
		border-style: solid;
		border-color: #e6e6e6;
		min-height: 100%;

		&:first-child,
		&:last-child {
			min-height: 100%;
		}

		&:first-child {
			border-top-width: 0;
		}

		.owp-grid-wrap {
			@include display();
    		@include flex-wrap( wrap );
			@include align-items( center );

    		.owp-grid {
    			width: 100%;

				&.thumbnail {
					width: 25%;
					margin: 0;
					border-right-width: 1px;
					border-style: solid;
					border-color: #e6e6e6;

					img {
						position: relative;
						top: 0;
						width: auto;
						height: auto;
					}
				}

				&.content {
					position: relative;
					width: 75%;
					padding-left: 10px;
				}

				> div {
					padding-right: 60px;
				}

				h3 {
				    display: block;
					font-size: 14px;
				    font-weight: normal;
				    margin: 0;
				}

				.quantity {
					color: #b2b2b2;
					font-weight: normal;
				}

				a.remove {
				    right: 20px;
				    margin-top: -17px;
				    width: 32px;
				    height: 32px;
				    line-height: 30px;
				    color: #b3b3b3;
				    border: 1px solid #e6e6e6;

					&:hover {
						color: #13aff0;
						border-color: #13aff0;
					}
				}
    		}
		}
	}

	.total {
	    background-color: #fafafa;
		border-width: 1px 0;
		border-style: solid;
		border-color: #e6e6e6;
	    padding: 20px;
	    margin: 0;

	    strong {
	    	float: left;
		    font-size: 12px;
		    font-weight: normal;
		    color: #797979;
		    text-transform: uppercase;
		    letter-spacing: 1px;
	    }

	    .amount {
	    	float: right;
		    font-size: 16px;
		    line-height: 1.3;
		    font-weight: 600;
		    letter-spacing: 1px;
	    }

	    &:after {
		    content: '';
		    display: table;
		    clear: both;
		}
	}
}

.widget_shopping_cart_content .buttons {
	margin: 0;
	padding: 20px;

	.button {
		float: left;
		width: 48%;
		padding: 14px 8px;
		text-align: center;
		letter-spacing: 2px;

		&:first-child {
			background-color: transparent;
			border: 1px solid #e6e6e6;
			color: #666;

			&:hover {
				border-color: #13aff0;
			}
		}
	}

	.checkout {
		float: right;
	}

    &:after {
	    content: '';
	    display: table;
	    clear: both;
	}
}

/* Cart spacious style */
.spacious .owp-mini-cart {
	padding: 20px;

	.widget_shopping_cart ul.cart_list li {
	    padding-bottom: 10px;
	    margin-bottom: 10px;

	    .owp-grid-wrap .owp-grid.thumbnail {
		    border-width: 0;
		}
	}

	.widget_shopping_cart .total {
	    background-color: transparent;
	    padding: 14px 20px;
	}

	.widget_shopping_cart_content .buttons {
	    padding: 20px 0 0;
	}

	p.woocommerce-mini-cart__empty-message {
		padding: 0;
	}
}

/* Cart bag style */
.bag-style {
	position: relative;
    display: inline-block;
}

.wcmenucart-total {
	margin-right: 7px;

	span {
		color: #333;
	}
}

.wcmenucart-cart-icon {
	display: inline-block;

	.wcmenucart-count {
		position: relative;
	    display: inline-block;
	    min-width: 2em;
	    height: 2em;
	    font-size: 1em;
	    line-height: 1.7em;
	    font-weight: bold;
	    border: 2px solid #333;
	    color: #333;
	    padding: 0 3px;
	    vertical-align: middle;
	    text-align: center;
		@include transition( all .2s ease-in-out );

	    &:after {
		    content: '';
		    position: absolute;
		    bottom: 100%;
		    left: 50%;
		    width: 14px;
		    height: 8px;
		    margin-left: -7px;
		    margin-bottom: 0;
		    border: 2px solid #333;
		    border-top-left-radius: 100px;
		    border-top-right-radius: 100px;
		    border-bottom: 0;
			@include transition( all .2s ease-in-out );
	    }
	}
}

.bag-style:hover .wcmenucart-cart-icon .wcmenucart-count,
.show-cart .wcmenucart-cart-icon .wcmenucart-count {
	background-color: #13aff0;
    color: #fff;
	border-color: #13aff0;

    &:after {
		border-color: #13aff0;
    	height: 10px;
    }
}

/* Fix for some conflict with default Woo css if custom features are disabled */
.woocommerce .widget_shopping_cart .cart_list li, .woocommerce.widget_shopping_cart .cart_list li {
    padding: 0;
}

.woocommerce .widget_shopping_cart .cart_list li a.remove, .woocommerce.widget_shopping_cart .cart_list li a.remove {
    top: 50%;
    left: auto;
    right: 0;
}

.woocommerce .widget_shopping_cart .total, .woocommerce.widget_shopping_cart .total {
    padding: 20px;
}