uxunity 0.1.0 → 0.1.1

data/lib/stylesheets/components/node/pattern.scss

@@ -0,0 +1,134 @@
+// Include the variables.
+@import "../../../partials/utility/variables/*"; 
+
+/*  ***  Custom styles for Patterns section   *** */
+
+article.category-nav  {
+	display:       -webkit-flex;
+	display:           -ms-flexbox;
+	display:            -o-flex;
+	display:               flex;
+	-webkit-justify-content: flex-start;
+	    -ms-justify-content: start;
+        justify-content: 	flex-start;
+	-webkit-flex-wrap:   	wrap;
+        -ms-flex-wrap:   	wrap;
+            flex-wrap:   	wrap;
+    -webkit-align-items: 	flex-start;
+        -ms-align-items: 	start;
+            align-items: 	flex-start;
+	padding:			 	0;
+
+	height: 			auto;
+	margin:         	1em auto;
+	
+	
+	.panel {
+		text-align:   	left;
+		padding:      	0 1em 0 0;
+		max-width:      15em;
+		margin: 		1em  0;
+		-webkit-flex:   1 1 auto;
+	        -ms-flex:   1 1 auto;
+	            flex:   1 1 auto;
+	           
+
+		/* background-color: #80c251; */
+		//background-image: -webkit-linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
+		//background-image:    -moz-linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
+		//background-image:      -o-linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
+		//background-image:         linear-gradient(top, #80c251 0,  #80c251 34px, #fff 35px, #fff 100%);
+		
+		background-repeat: no-repeat;
+		
+		h2    {
+			border: 	 		none;
+			margin:				0.3em  0  0   0;
+			padding:            0;		
+			color:      		$color-link-active;
+			font-size:      	1.1em;
+			padding: 			0;
+			border: 			none;
+			font-family:  		$font-regular;
+		 
+		   a    {
+				color:				inherit;
+			}
+		}
+		.panel-body {
+			//box-shadow:     	0px 1px 4px #e1e1e1, -1px 1px 1px #e1e1e1, 1px 1px 2px #e1e1e1;    // sides R-B-L
+			padding-bottom: 	1em;
+		}
+		ul   {
+			padding-left:       0;
+			li   {
+			    ist-style:       	none;
+				margin-left: 	0;
+				
+			    ul li {
+				    margin-left: 0.5em;
+			    }
+			}
+		}
+	}
+}
+
+/* webpages may have an on page table of contents block consists of  anchors (h2, h3) and this
+ *    defines that page-TOC.   Note that often this is dynamically created by javascript and 
+ *    placed here when it is appropriate.
+ */
+ .page-toc    {
+	 background:     	#ffffff;
+	 border:         	#c7d1d6 thin solid;   // per Rob Nov 2015
+	 margin:     		1em   0;
+	 padding:      		0.4em;
+	 max-width:			15em;
+	 
+	 
+	 h4  {
+		 color:       	$color-block-text;
+		 font-size:		normal;
+		 border:		none;
+		 margin:	    0.2em 0;
+	 }
+	 ul  {
+		 margin: 		0;
+		 padding:		0;
+
+		 li  {
+			 list-style: 	none;
+	
+		     a  {
+				 font-size: 0.9em;
+				 }
+		 }
+	 }
+ }
+ 
+ 
+/* Temporary adjustment to sidebar nav TOC while new TOC logic in process
+ *    Make the TOC scrollable and tighten the padding between topics to show more on page
+*/
+.node-type-pattern   .l-region--sidebar-first,
+.node-type-component .l-region--sidebar-first {
+		
+	h3:hover a,
+	h3.active a {
+		color:          $color-main-title-pattern   !important;
+		font-family:	$font-toc-active;
+	}
+	.treeview  .item-list ul {
+		display:			none;    					// hide toc items initially, display on click via js
+	}
+   .view-display-id-blk_nav_pattern {
+	   ul {
+			overflow-y:			hidden;
+			max-height:			calc(100vh - 200px);
+
+			li {
+			 	padding-bottom:        0.2em     !important;
+		
+			}
+		}
+	}
+}

data/lib/stylesheets/components/node/spec_style.scss

@@ -0,0 +1,131 @@
+// Include the variables.
+@import "../../../partials/utility/variables/*"; 
+
+
+.node-type-style,
+.node-type-pattern    {
+	
+
+	#main-content-wrapper h4   {
+		font-style:           $font-semibold;
+		font-size:			  .9rem;
+		line-height:		  1rem;
+		margin-bottom:        .5em;
+	}
+
+	#main-content-wrapper h5   {
+		font-style:     	$font-semibold;
+		font-size:			.88em;
+		text-transform:		none;
+		line-height:		.96rem;
+		margin-bottom:      .5em;
+	}
+	
+	
+	/* ** ******  Color Pallette   ******* ** */
+	.color-palette-wrapper {
+		font-size:      1em;
+		color:			#666666;
+	}
+
+	.color-palette-wrapper section.row {
+		display:		block;
+		margin:			0.5em 0 2em 0;
+	}
+	.color-palette-item  {
+	       display:         inline-block;
+	       vertical-align:  top;
+	       padding:         .85em;
+	       height:          auto;
+	       width:           161.8px;
+	       margin:          10px 0 ;
+	       padding:			0;
+	   }
+
+	.color-palette-item section:first-child {
+	       display:         block;
+	       vertical-align:  top;
+	       padding:         .8em;
+	       height:          60px;
+	       width:           161.8px;
+	       border:          rgba(222,222,222, 0.3) solid thin;
+	       margin:          10px 0 ;
+	       padding:			0;
+	       background:      #EBEFF1;
+	       z-index: 		2;
+	   }
+
+	.color-palette-item section:first-child  p {
+	       text-align:      center;
+	       vertical-align:  middle;
+	       color:           #666666;
+	   }
+
+	.color-palette-item.dark section:first-child  p {
+	       color:      		white;
+	   }
+	   .color-palette-item .details   {
+	       display:         block;
+	       padding:         0 0 0 0.4em;
+	       width:           calc(300 / 330 * 100%);
+	       height:          auto;
+	       text-align:      left;
+	       height:          auto;
+	       margin:          0  0;
+	       vertical-align:  top;
+	   }
+	   .color-palette-item .details h3 {
+	       color:           #444444;
+	       font-size:		.95em;
+	       font-weight:     300;
+	       text-align:      left;
+	       margin:   		0.1em 0;
+	       padding:         0;
+	   }
+	   .color-palette-item .details li {
+	       list-style:		none;
+	       font-size:       .8em;
+	       text-indent:     .9em;
+	       list-style-position: outside;	       
+	   }
+	   .color-palette-item .details p,
+	   .color-palette-item .details ul,
+	   .color-palette-item .details li {
+		   font-size:		.8rem;
+	       color:           #999999;
+	       font-weight:     100;
+	       line-height:     1rem;
+	       margin:          0;
+	       padding:         0;
+	   }
+	   
+	   .color-palette-wrapper.color-palette-hover .color-palette-item { position: relative; }
+	   .color-palette-wrapper.color-palette-hover .color-palette-item section { cursor: pointer; }
+	   .color-palette-wrapper.color-palette-hover .color-palette-item .details {
+		   opacity: 	0;
+		   position: 	absolute;
+		   overflow: 	hidden;
+		   width: 		80%;
+		   top: 		55%;
+		   left: 		10%;
+		   height: 		0;
+		   background-color: 	white; /* Fallback if color not specified */
+		   transition: 			opacity 0.4s;
+	   }
+	
+	   .color-palette-wrapper.color-palette-hover .color-palette-item:hover .details {
+		   opacity: 	1;
+		   height: 		auto;
+		   z-index: 	9;
+		   padding:     0 0.3em 0.3em;
+		   border:      rgba(102,102,102, 0.5) thin solid;
+	   }
+	.clearfix {
+		clear: both;
+	}
+	
+
+
+
+}
+	

data/lib/stylesheets/components/node/webform.scss

@@ -0,0 +1,17 @@
+// Include the variables.
+@import "../../../partials/utility/variables/*"; 
+
+
+
+
+
+.node-type-webform {
+	div#main-content-wrapper  {
+		width:      	65%;
+		display:		inline-block;
+	}
+	  
+	  
+}
+  
+

data/lib/stylesheets/components/views/README.txt

@@ -0,0 +1 @@
+Fill me.

data/lib/stylesheets/components/views/assets.scss

@@ -0,0 +1,19 @@
+// Include the variables.
+@import "partials/utility/**/*";
+
+
+
+
+
+	/**  *****  News Events landing page view   *****  **/
+
+.view-id-pages.view-display-id-page_news_events    {
+	
+	li  {
+		padding:         1em 0;
+		
+		.views-field-title {
+			font-size:      1.1em;
+		}
+	}
+}

data/lib/stylesheets/components/views/taxonomy.scss

@@ -0,0 +1,63 @@
+// Include the variables.
+@import "partials/utility/**/*";
+
+/*  ****         Taxonomy Term Views                 ****  */
+
+.page-taxonomy-term {
+	.views-view-grid  tr {
+		height:             160px;
+	}
+	.views-view-grid  tr td {
+		width:             140px;
+		padding-right:      10px;
+	}
+	.views-field-title {
+		height:             2em;
+		text-decoration: 	none;
+		font-weight: 		100;
+		display: 			block;
+		padding:			0;
+		line-height: 		1.1em;
+	}
+	.views-field-field-images {
+		margin:             0;
+		padding:			0;
+		vertical-align:		top;
+		width:				100px;
+		height: 			100px;
+		display:			block;
+		background-color:   #f8f8f8;
+	}
+	.views-field-field-images a{
+		line-height:         100px;
+		vertical-align:		bottom;
+	}
+	.views-field-field-images img{
+		vertical-align:		bottom;
+		max-width:			100px;
+		max-height: 		100px;
+	}
+	.views-field-php {
+		text-decoration: 	none;
+		font-weight: 		100;
+		font-size:			.8em;
+		padding:			0  0 .8em 0;
+		height:				.9em;
+		line-height:        .4em;
+	}
+	
+}
+
+
+
+
+
+
+/**  *****    taxonomy Vocabulary focus  *****  **/
+
+.page-admin-structure-taxonomy {
+	#main-content-wrapper .tabs.tabs--primary li:nth-child(3),
+	#main-content-wrapper .tabs.tabs--primary li:nth-child(4) {
+		display:             none;
+	}
+}

data/lib/stylesheets/components/views/test-views-search-php.html

@@ -0,0 +1,70 @@
+<?php
+/*  **  Output either an avatar or the icon for presentation  ** 
+
+     For Icons, we want to output  the first icon (address multiple) with a icon-avatar class to tie in  CSS formatting.
+     For Patterns, each pattern has its own avatar.
+     For Style Guides, use a default Styles avatar 
+     For Case Study, use a default Case Study avatar 
+     For anything else, use a default misc avatar
+ 
+
+     The resulting avatar should, with the exception of icons, link to the content.  Icons should link to file.
+** */
+
+  $nodetypes_apps   = array('2014_mobileapp', '2014_webapp','mobilepattern', 'webpattern');
+  $nodetypes_style  = array('visual_style', '2014_visual_style');
+  $nodetypes_case   = array('casestudy', '2014_casestudy');
+
+   if ($data->_field_data['nid']['entity']->type  == "icon")  {
+      $icon = $data->_field_data['nid']['entity']->field_icons['und'][0];
+      $output    = "<div class='list-avatar icon-avatar'>";
+      $output   .= "<a href='"  . str_replace("public://", "/sites/default/files/",   $icon['uri']) . "' ";
+      $output   .= " title='"   . $icon['title'] . "' >";
+      $output   .= "<img src='" . str_replace("public://", "/sites/default/files/",   $icon['uri']) . "' ";
+      $output   .= " alt='"     . $icon['title'] . "'  />";
+      $output   .= " </a> </div>";
+   }
+    else 
+    if (in_array($data->_field_data['nid']['entity']->type, $nodetypes_apps ) )  {
+      $avatar = $data->_field_data['nid']['entity']->field_avatar['und'][0];
+      print_r($data->_field_data['nid']['entity']->field_avatar['und']);
+      $output    = "<div class='list-avatar pattern-avatar'>";
+      $output   .= "<a href='"  . str_replace("public://", "/sites/default/files/",   $avatar ['uri']) . "' ";
+      $output   .= " title='"   . $avatar ['title'] . "' >";
+      $output   .= "<img src='" . str_replace("public://", "/sites/default/files/",   $avatar ['uri']) . "' ";
+      $output   .= " alt='"     . $avatar['title'] . "'  />";
+      $output   .= " </a> </div>";
+   }
+    else 
+    if (in_array($data->_field_data['nid']['entity']->type, $nodetypes_case ) )  {
+      $avatar_casestudy_path  = "/sites/default/files/2014/pattern-avatars/avatar_casestudy_225x140.png";
+      $output    = "<div class='list-avatar casestudy-avatar'>";
+      $output   .= "<a href='"  . $avatar_casestudy_path . "' ";
+      $output   .= " title='"   . "Case Study"           . "' >";
+      $output   .= "<img src='" . $avatar_casestudy_path . "' ";
+      $output   .= " alt='Case Study'  />";
+      $output   .= " </a> Case Study</div>";
+   }
+    else 
+    if (in_array($data->_field_data['nid']['entity']->type, $nodetypes_style ) )  {
+      $avatar_visual_style_path  = "/sites/default/files/2014/pattern-avatars/avatar_style_guide_225x140.png";
+      $output    = "<div class='list-avatar style-guide-avatar'>";
+      $output   .= "<a href='"  . $avatar_visual_style_path . "' ";
+      $output   .= " title='"   . "Style Guide"           . "' >";
+      $output   .= "<img src='" . $avatar_visual_style_path . "' ";
+      $output   .= " alt='Style Guide'  />";
+      $output   .= " </a> Style Guide</div>";
+   }
+    else  {
+      $avatar_default  = "/sites/default/files/2014/pattern-avatars/avatar_default_225x140.png";
+      $output    = "<div class='list-avatar style-guide-avatar'>";
+      $output   .= "<a href='"  . $avatar_default . "' ";
+      $output   .= " title='"   . "UI Patterns Misc Content"           . "' >";
+      $output   .= "<img src='" . $avatar_default . "' ";
+      $output   .= " alt='UI Patterns Misc Content'  />";
+      $output   .= " </a> UI Patterns Misc Content</div>";
+   }
+
+
+   print($output);
+?>

data/lib/stylesheets/mixins/_mixins.scss

@@ -0,0 +1,49 @@
+/*  most sass functions and mixins (other than prefix), reside here */
+
+/**
+ * Makes the element a CSS triangle, pointing in the given direction.
+ * Height is optional, if not given, it will be $base/2.
+ */
+@mixin triangle ($direction, $color, $base, $height: 0) {
+	@if $direction == top {
+		$border-side: bottom;
+	} @else if $direction == bottom {
+		$border-side: top;
+	} @else if $direction == left {
+		$border-side: right;
+	} @else  {              // fall thru assuming direction as 'right'
+		$border-side: left;
+	}
+	width: 			0;
+	height: 		0;
+	border: 		$base/2 solid transparent;
+	border-#{$direction}-width: 0;
+	@if $height > 0 {
+		border-#{$border-side}-width: 	$height;
+	}
+	border-#{$border-side}-color: 		$color;
+}
+
+/**
+ * Clear Design argues that because "rem" unit does not work on pseudo-elements in IE,
+ * we should use a function to compute "rem" to "px" with Sass.  Kept here until reassessed.
+ */
+@function rem($remSize) {
+	@return $remSize * $font-size;
+}
+
+
+/**
+ * Button settings are passed a color ($color-primary, $color-button-default, etc.)
+ */
+@mixin button-color($color) {
+	$temp-border-color: 	darken($color, 10%);
+	$temp-text-color: 		$color-button-text;
+	@if lightness($color) < 80 {
+		$temp-text-color: 	$color-button-text-inverted;
+	}
+	background: 	$color;
+	border: 		1px solid $temp-border-color;
+	box-shadow: 	0 $button-shadow-height 0 0 $temp-border-color;
+	color: 			$temp-text-color;
+}