Merge branch 'master' of https://github.com/JetImpex/wapu

JetImpex · May 26, 2017 · 8ba8e1e · 8ba8e1e
2 parents 86465b8 + 4ef02c7
commit 8ba8e1e
Show file tree

Hide file tree

Showing 5 changed files with 236 additions and 135 deletions.
diff --git a/assets/sass/plugins/_cherry-search.scss b/assets/sass/plugins/_cherry-search.scss
@@ -23,74 +23,104 @@
 			left: 22px;
 			color: $color_icon-search;
 		}
-		.cherry_search_categories {
-			position: absolute;
-			right: 20px;
-			top: 14px;
-			border-left: 1px solid $color__border_cherry_search;
-			select.cherry_search_categories {
-				display: none;
+	}
+	.cherry_search_categories {
+		position: absolute;
+		left: calc(100% - 215px);
+		top: 14px;
+		border-left: 1px solid $color__border_cherry_search;
+		@include media-breakpoint-up(md) {
+			left: calc(100% - 255px);
+		}
+		@include media-breakpoint-down(xs) {
+			top: 0;
+			left: 0;
+			position: relative;
+			border: 3px solid $color__border_cherry_search;
+			background-color: white;
+			margin-bottom: 10px;
+			border-radius: $border__radius;
+		}
+		select.cherry_search_categories {
+			display: none;
+		}
+		.chosen-container {
+			@include media-breakpoint-down(xs) {
+				width: 100% !important;
 			}
-			.chosen-container {
-				.chosen-single, .chosen-drop {
-					border-radius: 0;
-					border: none;
-					box-shadow: none;
-					background-image: none;
-					background-color: transparent;
+			.chosen-single, .chosen-drop {
+				border-radius: 0;
+				border: none;
+				box-shadow: none;
+				background-image: none;
+				background-color: transparent;
+			}
+			.chosen-single {
+				line-height: 1.7em;
+				padding-left: 14px;
+				width: 110px;
+				@include media-breakpoint-down(xs) {
+					width: 100%;
 				}
-				.chosen-single {
-					line-height: 1.7em;
-					color: $color__link;
-					&:hover, .chosen-with-drop & {
-						color: $color__link-hover;
-					}
-					div b {
-						background-image: none;
-						position: relative;
-						&:after {
-							position: absolute;
-							right: 8px;
-							top: 8px;
-							display: block;
-							@include nucleo-icon();
-							content: '\e902';
-							@include font-size(0.6);
-							@include transition(all 0.3s ease);
-							color: $color__border_cherry_search;
-						}
+				color: $color__link;
+				&:hover, .chosen-with-drop & {
+					color: $color__link-hover;
+				}
+				div b {
+					background-image: none;
+					position: relative;
+					&:after {
+						position: absolute;
+						right: 8px;
+						top: 8px;
+						display: block;
+						@include nucleo-icon();
+						content: '\e902';
+						@include font-size(0.6);
+						@include transition(all 0.3s ease);
+						color: $color__border_cherry_search;
 					}
 				}
-				.chosen-drop {
-					width: 95px;
-					top: 165%;
+			}
+			.chosen-drop {
+				width: 114px;
+				top: 165%;
+				@include media-breakpoint-down(xs) {
+					width: calc(100% + 6px);
+					top: 130%;
+					padding: 3px;
+					border: 3px solid $color__border_cherry_search;
+					margin: 0 -3px;
+				}
+				border-radius: $border__radius;
+				background-color: $color__invert-main;
+				-webkit-box-shadow: 0 0 15px 0 rgba(80,106,172,0.19);
+				box-shadow: 0 0 15px 0 rgba(80,106,172,0.19);
+				.chosen-search input[type='text'] {
 					border-radius: $border__radius;
-					background-color: $color__invert-main;
-					-webkit-box-shadow: 0 0 15px 0 rgba(80,106,172,0.19);
-					box-shadow: 0 0 15px 0 rgba(80,106,172,0.19);
-					.chosen-search input[type='text'] {
-						border-radius: $border__radius;
-						border: 1px solid $color__border_cherry_search;
-					}
+					border: 1px solid $color__border_cherry_search;
 				}
-				&.chosen-with-drop {
-					.chosen-single {
-						color: $color__link-hover;
-						div b:after {
-							top: 6px;
-							transform: rotate(-180deg);
-						}
+			}
+			&.chosen-with-drop {
+				.chosen-single {
+					color: $color__link-hover;
+
+					div b:after {
+						top: 6px;
+						transform: rotate(-180deg);
 					}
 				}
-				.chosen-results li {
-					&.highlighted {
-						background-color: rgba($color__link-hover, 1);
-						background-image: none;
-						border-radius: $border__radius;
-					}
-					&:before {
-						display: none;
-					}
+			}
+			.chosen-results li {
+				background-image: none;
+				border-radius: $border__radius;
+				@include transition(all 0.3s ease);
+				&.highlighted {
+					background-color: rgba($color__link-hover, 1);
+					@include transition(all 0.3s ease);
+				}
+				&:before {
+					display: none;
 				}
 			}
 		}
@@ -99,12 +129,21 @@
 		display: flex;
 		flex-direction: row;
 		margin-bottom: 0;
+		@include media-breakpoint-down(xs) {
+			display: flex;
+			flex-direction: column;
+		}
 		&:after{
 			display:none;
 		}
 		input.cherry-search__field[type='search'] {
 			width: calc(100% - 10px);
-			padding-right: 100px;
+			padding-right: 120px;
+			@include media-breakpoint-down(xs) {
+				width: 100%;
+				padding-right: 15px;
+				margin-bottom: 10px;
+			}
 			margin-bottom: 0;
 			border: 3px solid $color__border_cherry_search;
 			background-color: white;
@@ -122,6 +161,9 @@
 			@include media-breakpoint-up(md) {
 				padding: 17px 39px 22px;
 			}
+			@include media-breakpoint-down(xs) {
+				width: 100%;
+			}
 			@include transition(all 0.25s ease);
 			&:before {
 				display:none;

diff --git a/assets/sass/shortcodes/_shortcodes.scss b/assets/sass/shortcodes/_shortcodes.scss
@@ -398,6 +398,10 @@ body .wapu-popup {
 			line-height: 0;
 			text-align: center;
 			cursor: pointer;
+			@include media-breakpoint-down(sm) {
+				right: 20px;
+				top: 20px;
+			}
 			&:hover {
 				i {
 					color: $color__link-hover;

diff --git a/assets/sass/style.scss b/assets/sass/style.scss
@@ -4,7 +4,7 @@ Theme URI: http://underscores.me/
 Author: Wapuula team
 Author URI: http://wapuula.com
 Description: wapuula.com theme
-Version: 1.0.1
+Version: 1.0.2
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: wapu