WDN 4.0 Theme

Provides new visual styles for the search box and results from directory and Google custom search.

Also lays the ground work to support embedding the results into an iframe. This will allow templated pages to show search results without having to leave the page they are searching from.

www/less/search.less

+@charset "UTF-8";
+
+@import "lib/lesshat.less";
+
+@import "lib/breakpoints.less";
+@import "lib/colors.less";
+@import "lib/fonts.less";
+
+// Template overrides
+.embed #visitorChat,
+#wdn_search { 
+	display: none;
+}
+
+#wdn_navigation_bar {
+	padding: 0;
+}
+
+#search_results td {
+	border: 0;
+	padding: 0;
+}
+
+// Input Groups
+form .input-group {
+	display: table;
+	
+	> * {
+		display: table-cell;
+		.border-radius(0);
+	}
+	
+	.input-group-btn {
+		width: 1%;
+		vertical-align: middle;
+		
+		button {
+			font-size: 18px;
+			line-height: normal;
+			padding: 0.8em 1.333em;
+			margin: 0;
+		}
+	}
+	
+	input {
+		margin: 0;
+	}
+	
+	:first-child {
+		.border-radius(4px 0 0 4px);
+	}
+	
+	:last-child {
+		.border-bottom-right-radius(4px);
+		.border-top-right-radius(4px);
+		
+		button {
+			.border-bottom-left-radius(0);
+			.border-top-left-radius(0);
+		}
+	}
+}
+
+#searchform {
+	text-align: center;
+	background: #38431b url(../images/050419.jpg) 50% 50% no-repeat;
+	.background-size(cover);
+	
+	.input-group {
+		margin: 0 auto;
+		max-width: 30em;
+	}
+}
+
+#search_wrapper {
+	display: none;
+}
+
+.results-group {
+	
+	&:hover {
+		background-color: #fff;
+		
+		.result-head {
+			background-color: @ui09;
+		}
+	}
+	
+	.result-head {
+		background-color: mix(@ui09, @page-background, 95%);
+		color: #fff;
+		position: relative;
+		
+		h2 {
+			color: inherit;
+			margin: 0;
+		}
+	}
+}
+
+.result-tab {
+	color: @ui04;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	
+	li {
+		display: inline;
+		
+		&.selected {
+			color: #fff;
+		}
+		
+		a {
+			color: inherit;
+			border: 0;
+		}
+		
+		&:before {
+			content: '\b7\a0'; // middle-dot + space
+		}
+		
+		&:first-child:before {
+			content: none;
+		}
+	}
+	
+	&:after {
+		content: '';
+		position: absolute;
+		border-style: solid;
+		border-width: 0 6px 6px;
+		border-color: transparent transparent #fff;
+		bottom: 0;
+		left: 0;
+		.transition(transform 400ms);
+		
+		.no-csstransforms & {
+			.transition(left 400ms);
+		}
+		
+		#directory_results & {
+			.translateX(2.95em);
+			
+			.no-csstransforms & {
+				left: 2.95em;
+			}
+		}
+		
+		#search_results & {
+			.translateX(4.95em);
+			
+			.no-csstransforms & {
+				left: 4.95em;
+			}
+		}
+	}
+	
+	&.state-1:after {
+		#directory_results & {
+			.translateX(8.95em);
+			
+			.no-csstransforms & {
+				left: 8.95em;
+			}
+		}
+		
+		#search_results & {
+			.translateX(10.35em);
+			
+			.no-csstransforms & {
+				left: 10.35em;
+			}
+		}
+	}
+	
+}
+
+.search-set, .embed {
+	margin: 0;
+	background: mix(#fff, @page-background, 95%);
+}
+
+.search-results {
+	.transition(opacity 400ms);
+	opacity: 0;
+	
+	&.active {
+		opacity: 1;
+	}
+	
+	h3 {
+		display: none;
+	}
+}
+
+.results-group {
+	float: left;
+	width: 100%;
+}
+
+#directory_results {
+	> * {
+		padding: 24px 30px;
+	}
+	
+	@media @bp2 {
+		width: 33.3333%;
+	}
+	
+	.embed & {
+		width: 40%;
+	}
+	
+}
+
+#search_results {
+	> * {
+		padding: 24px 50px;
+	}
+	
+	@media @bp2 {
+		width: 66.6667%;
+		
+		.result-head {
+			border-right: 1px solid @ui10;
+		}
+		
+		.search-results {
+			border-right: 1px solid @ui02;
+		}
+	}
+	
+	.embed & {
+		width: 60%;
+	}
+}
+
+.google-search {
+	display: none;
+}
+
+// Directory Styles
+#ppl_results {
+	h3, h4, .result_head {
+		display: none;
+	}
+	
+	.pfResult {
+		padding: 0;
+		list-style: none;
+	}
+	
+	.ppl_Sresult, .dep_result {
+		margin: 1em 0;
+	}
+	
+	.cInfo {
+		display: none;
+	}
+	
+	.overflow {
+		overflow: auto;
+	}
+	
+	.planetred_profile {
+		float: left;
+		border: 0;
+		max-width: 40px;
+		overflow: hidden;
+	}
+	
+	.recordDetails {
+		margin-left: 50px;
+		font-size: 0.75em;
+		.sans-serif-font();
+	}
+	
+	.fn {
+		font-size: 2.3333em;
+		.brand-font();
+		line-height: normal;
+		
+		* {
+			border: 0;
+		}
+	}
+	
+	.eppa {
+		display: none;
+	}
+	
+	.student .eppa {
+		display: block;
+	}
+	
+	.tel > a {
+		display: block;
+		border: 0;
+	}
+}
+
+// Google Styles
+.gsc-control-cse,
+.gsc-control-cse .gsc-table-result {
+	font-family: inherit;
+	font-size: inherit;
+}
+
+.gsc-result {
+	
+	.gsc-webResult & {
+		border: 0;
+	}
+	
+	.gs-title {
+		height: 1.662em;
+	}
+}
+
+.gs-result {
+	.gs-title, .gs-title * {
+		color: @brand;
+		text-decoration: none;
+	}
+	
+	a.gs-visibleUrl, .gs-visibleUrl {
+		color: #897b42;
+	}
+}
+
+.gsc-result-info {
+	font-style: italic;
+	margin: 0 0 10px;
+	color: #897b42;
+}
+
+.gsc-results {
+	
+	.gsc-cursor-box {
+		border-top: 1px solid @ui03;
+		padding: 1em 0 0;
+		.sans-serif-font();
+		
+		.gsc-cursor-page {
+			border: 1px solid @ui03;
+			padding: 2px 8px;
+			margin-bottom: 1em;
+			min-width: 2.2em;
+			display: inline-block;
+			text-align: center;
+			text-decoration: none;
+			color: @brand;
+		}
+		
+		.gsc-cursor-current-page {
+			font-weight: normal;
+			color: @ui07;
+			border: 0;
+		}
+	}
+}
+
+td.gcsc-branding-text {
+	font-style: italic;
+	width: auto;
+	
+	div.gcsc-branding-text {
+		text-align: left;
+		color: @ui07;
+	}
+}
+
+td.gcsc-branding-text-name {
+	width: 100%;
+}
+
+.gs-web-image-box img.gs-image, .gs-promotion-image-box img.gs-promotion-image {
+	max-width: 100%;
+	max-height: none;
+}
\ No newline at end of file