MAINHACK

Viewing / Editing File: _layout.scss

/**
 * Strictly Layout Styles
 */

@include susy-media($desktop) {
	table.shop_table_responsive {
		tbody {
			tr {
				td,
				th {
					text-align: left;
				}
			}
		}
	}

.mobile-only {
		display: none;
	}

.site-header {
		padding-top: 0;
		padding-bottom: 0;

.site-branding {
			@include span(3 of 12);
			margin-bottom: 0;

img {
				height: auto;
				max-width: 100%;
				max-height: none;
			}
		}

.shopper-myacc-cart {
				@include span(last 3 of 12);
				margin-bottom: 0;
		}

.main-navigation {

}

.secondary-navigation {
				@include span(12);
		}

.topbox-left {
				@include span(5 of 12);

}

.shopper-product-search {
			margin: 0;
			padding: 0;
			position: relative;
		}

.custom-product-search {
			@include span(6 of 12);
			margin-top: 20px;
			position: relative;
			z-index: 1;

.nav-left {
				position: relative;
				float: left;
				width: auto;
			}

.nav-fill {
				position: relative;
				overflow: hidden;
				width: auto;
			}

.nav-right {
				position: relative;
				float: right;
			}

.nav-search-facade {
				background-color: $color_white;
				border-radius: 3px 0 0 3px;
				border: 1px solid #ddd;
				height: 34px;
				line-height: 34px;
				padding: 0 10px;
				text-transform: capitalize;
				color: $color_gray40;
			}

.shopper-cat-list {
				position: absolute;
				top: 1px;
				left: 1px;
				height: 32px;
				line-height: 32px;
				border: none;
				background: $color_white;
				opacity: 0;
				cursor: pointer;
			}

input[type="text"] {
				padding: 0 10px;
				background: $color_white;
				border-radius: 0;
				border-left: none;
				border-right: none;
				height: 34px;
				line-height: 34px;
				width: 100%;
			}

button[type="submit"] {
				padding: 0;
				width: 50px;
				text-align: center;
				height: 34px;
				line-height: 34px;
				border-radius: 0 3px 3px 0;
				color: $color_white;
				font-size: 20px;
			}
		}

.topbox-right {
				@include span(last 7 of 12);
				clear: none;
				text-align: right;

.social-navigation {
					float: right;
				}
		}
	}

.woocommerce-active {
		.site-header {

.shopper-myacc-cart {
				@include span(last 3 of 12);
				margin-top: 2em;
   				margin-bottom: 1em;
   				font-size: ms(-1);
   				text-transform: uppercase;
   				text-align: right;

.header-myacc-link {
					display: inline-block;
					padding-right: 15px;
					margin-right: 10px;
					border-right: 1px solid #ccc;

> a {
						display: block;
						width: 26px;
						height: 26px;
						line-height: 26px;
						text-align: center;
						border: 1px solid #ccc;
					}
				}

.site-header-cart {
					display: inline-block;
				}
			}

.site-search {
				/* TODO */
				display: none;
			}
		}
	}

.site-branding {
		.site-description {
			margin-bottom: 0;
			display: block;
		}
	}

.site-branding,
	.site-search,
	.site-header-cart,
	.site-logo-anchor,
	.site-logo-link,
	.custom-logo-link {
		margin-bottom: ms(4);
	}

.site-header {
		.subscribe-and-connect-connect {
			float: right;
			margin-bottom: 1em;

.icons {
				list-style: none;
				margin: 0;

a {
					font-size: 1em !important;
				}

li {
					margin: 0 0 0 ms(-3) !important;
					display: inline-block;
				}
			}
		}
	}

.col-full {
		@include clearfix;
		@include container($container-width);
		padding: 0 ms(5);
		box-sizing: content-box;
	}

.site-content {
		@include clearfix;
	}

.content-area {
		@include span(9 of 12);
	}

.widget-area {
		@include span(last 3 of 12);
	}

.right-sidebar {
		.content-area {
			@include span(9 of 12);
		}

.widget-area {
			@include span(last 3 of 12);
		}
	}
	.shop-sidebar-right {
		.content-area-shop {
			@include span(9 of 12);
		}

.widget-area-shop {
			@include span(last 3 of 12);
		}
	}

.left-sidebar {
		.content-area {
			@include span(last 9 of 12);
		}

.widget-area {
			@include span(3 of 12);
		}
	}

.shop-sidebar-left {
		.content-area-shop {
			@include span(last 9 of 12);
		}

.widget-area-shop {
			@include span(3 of 12);
		}
	}

.none-sidebar{
		.content-area {
			@include span(12);
		}
		.widget-area {
			display: none;
		}
	}

.shop-sidebar-none {
		.content-area-shop {
			@include span(12);
		}
		.widget-area-shop {
			display: none;
		}
	}
	.shopper-full-width-content {
		.content-area {
			@include span(full);
		}
	}

.content-area,
	.widget-area {
		margin-bottom: ms(5);
	}

/**
	 * Full width & homepage template
	 */
	.page-template-tpl-page-fullwidth-php,
	.page-template-tpl-page-homepage-php {
		.content-area {
			@include span(full);
		}
	}

/**
	 * Footer widgets
	 */
	.footer-widgets {
		@include clearfix;
		padding-top: ms(5);
		background: $color_gray40;
		margin-left: -99em;
		margin-right: -99em;
		padding-left: 99em;
		padding-right: 99em;

&.col-2 {
			.block {
				@include span(6 of 12);

&.footer-widget-2 {
					@include last;
				}
			}
		}

&.col-3 {
			.block {
				@include span(4 of 12);

&.footer-widget-3 {
					@include last;
				}
			}
		}

&.col-4 {
			.block {
				@include span(3 of 12);

&.footer-widget-4 {
					@include last;
				}
			}
		}

.widget {

li {
				border-bottom: 1px solid rgba(255, 255, 255, 0.05);

&:before {
					color: $color_white;
				}
			}
		}

.widget-title {
			color: $color_white;
		}

}

/**
	 * Comments
	 */

.comment-list {
		@include clearfix;

.comment {
			clear: both;
			float: left;
			width: 100%;
		}
		> .comment+.comment {
			border-top: 1px dashed #ddd;
			padding-top: ms(2);
		}
		.bypostauthor {
			> .comment-body {
				background: #f1f1f1;
				padding: 15px;
				border-radius: 10px;
				margin-bottom: ms(2);
			}

}

.comment-meta {
			//@include span( 2 of 9);
			float: left;
			margin-right: ms(1);

.avatar {
				float: right;
			}
		}

.comment-content {
			padding-bottom: ms(6);
			margin-bottom: ms(6);
		}

.comment-content,
		#respond {
			//@include span(last 7 of 9);
		}

#respond {
			float: right;
			.comment-form-author,
			.comment-form-email,
			.comment-form-url {
				width: 100%;
				margin-right: 0;
			}
		}

.comment-body {
			#respond {
				box-shadow: 0 6px 2em rgba(#000,.2);
				margin-bottom: ms(5);
				margin-top: ms(3);
			}
		}

.reply {
			text-align: right;
		}

ol.children {
			@include span(last 8 of 9);
			list-style: none;

.comment-meta {
				//@include span(2 of 8);
			}

.comment-content,
			#respond {
				//@include span(last 6 of 8);
			}

ol.children {
				@include span(last 7 of 8);

.comment-meta {
					//@include span(2 of 7);
				}

.comment-content,
				#respond {
					//@include span(last 5 of 7);
				}

ol.children {
					@include span(last 6 of 7);

.comment-meta {
						@include span(2 of 6);
					}

.comment-content,
					#respond {
						@include span(last 4 of 6);
					}

ol.children {
						@include span(last 5 of 6);

.comment-meta {
							@include span(2 of 5);
						}

.comment-content,
						#respond {
							@include span(last 3 of 5);
						}
					}
				}
			}
		}
	}

#respond {
		padding: ms(5);

.comment-form-author,
		.comment-form-email,
		.comment-form-url {
			@include span(3 of 9);
		}

.comment-form-url {
			@include last;
		}

.comment-form-comment {
			clear: both;
		}
	}

/**
	 * Content
	 */

.hentry.type-post {
		@include clearfix;

.entry-header {
			margin-bottom: ms(2);
			position: relative;
			text-align: center;

&:after {
					content: '';
					position: absolute;
					width: 30px;
					height: 3px;
					background: #ff6600;
					bottom: -14px;
					left: 48%;
				}

}

.entry-meta {
			@include span(9 of 9);
			text-align: center;
			font-size: .8em;
		}

.entry-content {
			@include span(9 of 9);

}
	}

/*
	 * Navigation Menus
	 */
	.menu-toggle {
		display: none;
	}

/**
	* Secondary Navigation
	*/
	.shopper-secondary-navigation {
		clear: both;
		@include clearfix;
		background: $color_body;
		margin-left: -99em;
		margin-right: -99em;
		padding-left: 99em;
		padding-right: 99em;
		color: $color_gray40;
		position: relative;
		z-index: 2;
	}

.secondary-navigation {
		clear: both;
		display: block;
		width: auto;
		clear: none;

ul {
			list-style: none;
			margin: 0;
			padding: 0;

ul {
				background: $color_body;
				display: none;
				position: absolute;
				left: 0;
				top: 100%;
				width: 200px;

ul {
					left: 100%;
					top: 0;
				}
			}
		}

li {
			float: left;
			position: relative;
			text-align: left;

&:hover,
			&.current-menu-item,
			&.current_page_item,
			&.current-menu-ancestor,
			&.current-menu-parent,
			&.current_page_parent,
			&.current_page_ancestor {

> a {
					color: $color_white;
				}
			}

li {
				float: none;

a {
					padding: ms(-1) ms(-2);
				}
			}

&:hover {

> ul {
					display: block;
				}

}
		}

a {
			text-decoration: none;
			display: block;
			padding: ms(-2) ms(-2);
			color: $color_gray30;
			font-size: ms(-2);
		}

}

.social-navigation {
		clear: both;
		display: block;
		width: auto;
		clear: none;

ul {
			list-style: none;
			margin: 0;
			padding: 0;

ul {
				background: $color_body;
				display: none;
				position: absolute;
				left: 0;
				top: 100%;
				width: 200px;

ul {
					left: 100%;
					top: 0;
				}
			}
		}

li {
			float: left;
			position: relative;
			text-align: left;

&:hover,
			&.current-menu-item,
			&.current_page_item,
			&.current-menu-ancestor,
			&.current-menu-parent,
			&.current_page_parent,
			&.current_page_ancestor {

> a {
					color: $color_white;
				}
			}

li {
				float: none;

a {
					padding: ms(-1) ms(-2);
				}
			}

&:hover {

> ul {
					display: block;
				}

}
		}

a {
			text-decoration: none;
			display: block;
			padding: ms(-2) ms(-2);
			color: $color_gray30;
			font-size: ms(-2);
		}

}

.header-middle {
		width: 100%;
		float: left;
		margin: ms(-2) 0;
		clear: both;
	}

.shopper-primary-navigation {
		clear: both;
		@include clearfix;
		margin-left: -99em;
		margin-right: -99em;
		padding-left: 99em;
		padding-right: 99em;
		background: $color_whitesmoke;

.main-navigation {

@include span(9 of 12);
		}
		.primary-widget-region {
			@include span(last 3 of 12);

form {

margin-bottom: 0;
				padding: 5px 0;
			}
		}
	}

.main-navigation {

ul {
			list-style: none;
			margin: 0;
			padding: 0;
			overflow: visible;

ul {
				background: $color_whitesmoke;
				display: none;
				position: absolute;
				left: 0;
				top: 100%;
				width: 200px;
				z-index: 999;

ul {
					left: 100%;
					top: 0;
				}
			}
		}

li {
			float: left;
			position: relative;
			text-align: left;

&:hover,
			&.current-menu-item,
			&.current_page_item,
			&.current-menu-ancestor,
			&.current-menu-parent,
			&.current_page_parent,
			&.current_page_ancestor {

> a {
					color: $color_woocommerce_hover;
				}
			}

li {
				float: none;

&.menu-item-has-children,
				&.page_item_has_children {

> a {
						&:after {
							@include fa-icon();
							content: '\f105';
							float: right;
							line-height: 1.618;
						}
					}

}

a {
					padding: ms(-1) ms(-2);
				}

}

&:hover {

> ul {
					display: block;
				}

}

&.menu-item-has-children,
			&.page_item_has_children {

&:hover {

&:after {
						display: block;
					}
				}

> a {
					&:after {
						@include fa-icon();
						content: '\f107';
						margin-left: 1em;
					}
				}
			}
		}

a {
			text-decoration: none;
			display: block;
			padding: ms(-1) ms(-1);
			color: $color_body;
			font-size: ms(-1);
			text-transform: uppercase;
		}

}

.primary-navigation {
		display: block;

> ul > li:first-child > a {
			padding-left: 0;
		}
	}

/**
	 * Top box left
	 */
	.topbox-left {

p {
			padding: 10px;
			margin: 0;
			line-height: 1;
			font-size: ms(-2);
			color: $color_gray30;
		}
	}

/**
	 * Latest from our blog
	 */
	.shopper-recent-posts {
		li.post {
			list-style: none;
		}
		li.post:first-child {

clear: both !important;
		}
		li.post:last-child {
			margin-right: 0 !important;
		}
	}

.page-template-tpl-page-homepage-php {
			.columns-4 {
				ul.products {
					li.product,
					li.post {
						@include span(3 of 12);
					}

}
			}
	}

/**
	 * Social Icons
	 */
	.top-social-icons {
		margin: 0;
		width: auto;
		clear: none;
		line-height: 1;

ul {
			overflow: hidden;
			text-align: right;
			margin: 0;

li {

display: inline-block;

a {
					display: inline-block;
					padding: 10px;
					font-weight: 400;
					color: $color_gray30;

&:hover {
						color: lighten( $color_whitesmoke, 20% );
					}
				}
			}
		}
	}
}

@include susy-media ( max-width $desktop ) {

.woocommerce {

ul.products {

li.product {

&:hover {

.add-to-wishlist-custom {
							right: 5% !important;
						}
					}

.loop-addtocart-btn-wrapper {

.button {

margin-top: -28px;
							left: 0;
							opacity: 1;
							height: 30px;
							text-align: center;
							line-height: 30px;
							font-size: 12px;
						}

}

.add-to-wishlist-custom {
						width: 20px;
						height: 20px;
						line-height: 20px;
						border-radius: 20px;
						text-align: center;
						opacity: 1;
						right: 5%;
						top: 5%;

.yith-wcwl-wishlistexistsbrowse.show {
							font-size: 0;
							padding: 0;

&::before {

font-family: 'FontAwesome';
								content: "\f004";
								font-size: 8px;
								opacity: .3;

}
						}

.yith-wcwl-wishlistaddedbrowse.show {
							font-size: 0;
						}

a {
							font-size: 0;
							padding: 0;

&::before {
								font-size: 8px;
								margin-right: 0;
							}
						}
					}

}

.site-info {
			float: none;
			text-align: center;
		}
		.footer-menu {
			float: none;
			text-align: center;
			padding-top: 0;
		}

}

@include susy-media (max-width $container-width) {
	.col-full {
		margin-left: ms(5);
		margin-right: ms(5);
		padding: 0;
	}

.woocommerce-active {

.site-header  {

.shopper-myacc-cart {
				margin-bottom: 0;

.cart-contents {

.count {
						right: -12px;
						top: -11px;
					}
				}
			}
		}
	}

.site-header {

.site-branding {
			width: 100%;
			margin-bottom: 0;

img {
				height: auto;
				max-width: 230px;
				margin: 0 auto;
			}

a {
				float: none;
			}
		}

.custom-product-search {
			width: 70%;
			margin-top: 20px;

.nav-left {
				position: relative;
				float: left;
				width: auto;
			}

.nav-fill {
				position: relative;
				overflow: hidden;
				width: auto;
			}

.nav-right {
				position: relative;
				float: right;
			}

.nav-search-facade {
				border-radius: 3px 0 0 3px;
				border: 1px solid #ddd;
				height: 34px;
				line-height: 34px;
				padding: 0 10px;
				text-transform: capitalize;
				color: $color_gray40;
			}

.topbox-right {
			width: 30%;
			clear: none;
			text-align: right;
		}
	}
}

@include susy-media (max-width $handheld) {
	.col-full {
		margin-left: ms(2);
		margin-right: ms(2);
		padding: 0;
	}

.hidden-xs-down {
		display: none !important;
	}

.social-navigation {
		display: none;
	}

#mobile-menu-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		min-height: 100%;
		max-height: 100%;
		overflow: scroll;
		background: rgba(0,0,0,0.9);
		-ms-transform: translate(-100%,0);
		-webkit-transform: translate(-100%,0);
		transform: translate(-100%,0);
		-webkit-transition: -webkit-transform 500ms ease;
		transition: transform 500ms ease;
		overflow-x: hidden;
		z-index: 99;
		padding-top: 40px;

&.wpadminbar-active {
			top: 45px;
		}

.mobile-menu {
			border-top: 1px solid #666666;

a {
				color: #ffffff;
			}

.arrow-sub-menu {
				color: #ffffff;
			}

.primary-widget-region {
				margin: 10px;
			}
		}
	}

.mobile-menu-active {

.menu-toggle {
			position: fixed;
			top: ms(1);
			left: ms(1);
			width: 100%;
			left: 0;
			top: 0;
			color: #ffffff;

&:hover {
				background: none !important;
				color: #ffffff;
			}
		}

#mobile-menu-wrapper {
			-ms-transform: translate(0,0);
			-webkit-transform: translate(0,0);
			transform: translate(0,0);
		}
	}

.mobile-menu-active.admin-bar .menu-toggle {
		top: 45px;
	}

.woocommerce-active {

.site-header  {

.shopper-myacc-cart {
				width: auto;

.cart-contents {

.amount {
						padding-right: 2em;
					}

.count {
						right: 0;
					}

&:after {
						right: 1em;
					}
				}
			}
		}
	}

.cart-toggle {
		display: block;
	}

.site-header {

border-bottom: 1px solid $color_whitesmoke;

.site-branding {
			width: 100%;
			float: none;
			text-align: center;
			margin-bottom: 0;

a {
				float: none;
			}

img {
				height: auto;
				max-width: 230px;
				margin: 0 auto;
			}
		}

.site-header-cart {

.widget_shopping_cart {
				display: block;
			}
		}

.shopper-myacc-cart {
			background: rgba(0,0,0,0.8);
			top: 0;
			left: 0;
			float: none;
			z-index: 998;
			margin-top: ms(1);

.header-myacc-link {
				padding: 0;
				position: relative;
				bottom: -48px;
				display: none;
			}

ul.site-header-cart {
				display: none;

li {
					padding: ms(1) 0;
				}

a {
					color: #ffffff;
					position: relative;
					margin-left: ms(1.5);

&.remove {
						left: -1.7em;
						top: ms(1);

&:before {
							color: #ffffff;
						}
					}

&.button {
						margin-left: 0;
					}
				}

.quantity {
					margin-left: ms(1.5);
				}
			}
		}

.shopper-primary-navigation {
			background: $color_whitesmoke;
			clear: both;
			@include clearfix;
			margin-left: -22px;
			margin-right: -22px;

> div,
			.primary-navigation {
				display: none;
			}
		}

.shopper-myacc-cart {
			float: none;
			width: auto;
			margin-bottom: 0;
			margin-left: -100%;
			margin-right: -100%;
			padding-left: 100%;
			padding-right: 100%;
		}

.custom-product-search {
			width: 100%;
			float: none;
			clear: both;
			margin-top: 20px;

form {
				margin-bottom: 0;
			}

.nav-left {
				position: relative;
				float: left;
				width: auto;
			}

.nav-fill {
				position: relative;
				overflow: hidden;
				width: auto;
			}

.nav-right {
				position: relative;
				float: right;
			}

.topbox-right {
				@include span(last 12 of 12);
				clear: none;
				text-align: right;
		}
	}

.feature-banner {

.banner-desc {
			padding: 0 ms(1);

}
	}

ul.products {

li.post,
		li.product {
			float: left;
			width: 48%;
			margin-right: 4%;

&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}

.woocommerce {

ul.products {

li.product {

.add-to-wishlist-custom {
					width: 30px;
					height: 30px;
					line-height: 30px;
					border-radius: 30px;
					right: 15% !important;

a {

&::before {
							font-size: 14px;
						}

}

.yith-wcwl-wishlistexistsbrowse.show {
						line-height: 30px;

&::before {
							font-size: 14px;
						}
					}

}

&:hover {

.add-to-wishlist-custom {
						right: 15% !important;
					}
				}

}

.site-footer {

.col-full {
			margin: 0;
		}

.footer-widgets {
			padding-top: 0;
		}

.widget {
			margin: 0;

.widget-title {
				color: $color_gray30;
				margin: 0;
				padding: 0 ms(1);
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid $color_gray40;

&:before {
					display: inline-block;
					font-family: 'FontAwesome';
					font-size: inherit;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					-moz-osx-font-smoothing: grayscale;
					background: none;
					text-align: center;
					content: '\f107';
					width: 6	0px;
					height: auto;
					display: block;
					position: absolute;
					bottom: auto;
					left: auto;
					right: 0;
					top: 0;
				}

&.active {
					margin-bottom: ms(1);

&:before {
						content: '\f106';
					}

}
			}

> div,
			> ul,
			> form {
				display: none;
				padding: 0 ms(1) ms(1);
				border-bottom: 1px solid $color_gray40;
			}

> form {

&:before {
					display: none;
				}

input[type="search"] {
					padding: 0 ms(1);
				}
			}
		}

.site-info {
			padding: ms(1);
		}
	}
}

@include susy-media (max-width 479px ) {
	.site-header .site-branding img {
		max-width: 230px;
	}

button.menu-toggle {
		left: -15px;
	}

.cart-toggle {
		right: -15px;
	}

.feature-banner {
		min-height: 350px;
		max-height: 350px;

.banner-desc {

h2 {
				font-size: ms(1.5);
			}

p {
				font-size: ms(-2);
			}

}
	}

ul.products {

li.post,
		li.product {
			float: none;
			width: 100%;
			margin-right: 0;
		}
	}

}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: _layout.scss

Server Info

System Features

User Info