shopee-apps/assets/stylesheets/sass/modules/pages/_search-results.scss

// SEARCH RESULTS
// -----------------------------------------------------------------------------
/* Change Content Background Color */
html.search-results {
	body {
		background: #FFF;
	}
}

// WRAPPER
// -----------------------------------------------------------------------------
/* Search Results Wrapper */
.search-content {
	margin: -($content-body-padding);

	.search-control-wrapper {
		background: darken( #FFF, 3% );
		border-bottom: 1px solid darken( #FFF, 8% );
		margin-top: 3px;
		padding: ($content-body-padding / 2);
	}
}

// WRAPPER
// -----------------------------------------------------------------------------
/* Search Results Tabs */
.search-content {
	.search-toolbar {
		border-bottom :1px solid #ebebeb;
		margin: 0 0 $content-body-padding;

		.nav-pills {
			margin: 0 $content-body-padding;

			li {
				margin: 0 15px 0 0;

				&:last-child {
					margin-right: 0;
				}

				a {
					padding-left: 5px;
					padding-right: 5px;

					&,
					&:hover,
					&:focus {
						background: none;
						border-radius: 0;
						border-bottom: 2px solid #FFF;
						border-top: 2px solid #FFF;
						color: #777;
					}
				}

				a {
					&:hover,
					&:focus {
						background: none;
						border-radius: 0;
						border-bottom: 2px solid #FFF;
						border-top: 2px solid #FFF;
						color: #555;
					}
				}

				&.active {
					a {
						color: $color-primary;
						border-bottom-color: $color-primary;
					}
				}
			}
		}
	}

	> .tab-content {
		border: none;
		box-shadow: none;
		padding: 0 $content-body-padding;
	}
}

// TOTALS
// -----------------------------------------------------------------------------
/* Search Result Totals */
.search-content {
	.total-results {
		margin-top: -25px;
	}
}

// LIST
// -----------------------------------------------------------------------------
/* Search Results List */
.search-results-list {
	max-width: 750px;

	li {
		border-bottom: 1px solid #EEE;
		margin-bottom: 15px;
		padding-bottom: 15px;
		position: relative;

		&:last-child {
			border-bottom: none;
			margin-bottom: 0;
			padding-bottom: 0;
		}
	}

	.result-type {
		right: 5px;
		position: absolute;
		top: 5px;
	}

	a {
		border-radius: 4px;
		display: block;
		padding: 25px;
		text-decoration: none;

		.title {
			margin-top: 0;
		}

		.description {
			color: #777;
		}

		p:last-child {
			margin-bottom: 0;
		}

		&:hover {
			background: darken( #FFF, 3% );
		}
	}

	.has-thumb {
		display: table;
		width: 100%;

		.result-thumb,
		.result-data {
			display: table-cell;
			vertical-align: top;
		}
	}

	.result-thumb {
		padding-right: 25px;

		img,
		.fa {
			height: 75px;
			width: 75px;
		}

		.fa {
			background: $color-primary;
			color: $color-primary-inverse;
			@include font-size(36);
			@include line-height(75);
			text-align: center;
		}
	}
}

// RESPONSIVENESS
// -----------------------------------------------------------------------------
/* Search Results Responsive */
@media only screen and (max-width: 767px) {
	.search-content {
		margin: -($content-body-padding / 2);
	}
}

@media only screen and (max-width: 480px) {
	.search-results-list {
		.has-thumb {
			@include clearfix();
			display: block;

			.result-thumb,
			.result-data {
				display: block;
			}

			.result-thumb {
				float: left;
			}

			.result-data {
				.title {
					margin-top: 3px;
				}
			}
		}

		.result-thumb {
			img,
			.fa {
				height: 35px;
				width: 35px;
			}

			.fa {
				@include font-size(16);
				@include line-height(35);
			}
		}
	}
}

// DARK
// -----------------------------------------------------------------------------
/* dark */
html.dark {
	.search-content {
		.search-control-wrapper {
			background: $dark-color-1;
			border-bottom-color: $dark-color-3;
		}

		.tab-content {
			background: transparent;
		}

		.search-toolbar {
			background: $dark-color-2;
			border-bottom-color: $dark-color-2;

			.nav-pills {
				a {
					&,
					&:hover,
					&:focus {
						border-bottom-color: $dark-color-2;
						border-top-color: $dark-color-2;
						color: $dark-default-text;
					}
				}

				a {
					&:hover,
					&:focus {
						border-bottom-color: $dark-color-2;
						border-top-color: $dark-color-2;
						color: #555;
					}
				}

				li.active {
					a {
						&,
						&:hover,
						&:focus {
							color: $color-primary;
							border-bottom-color: $color-primary;
						}
					}
				}
			}
		}

		.search-results-list {
			li {
				border-bottom-color: $dark-color-3;
			}

			a {
				.description {
					color: $dark-default-text;
				}

				&:hover {
					background: lighten( $dark-bg, 5% );
				}
			}
		}
	}
}