uxunity 0.1.0 → 0.1.1

data/lib/stylesheets/components/blocks/region_side_bar.scss

@@ -0,0 +1,106 @@
+// Include the variables.
+@import "../../../partials/utility/variables/*"; 
+
+// Desktops/laptops in a normal window size
+//  @media only screen and (min-width: 868px) and (max-width: 1389px) {  // DONT USE THIS QUERY - SIZE IS NOW FIXED  Left here for ref
+
+.right-bar-wrapper {
+	float: 		right;
+	height: 	1px;
+	position: 	fixed;
+	top: 		180px;
+	width: 		100%;
+	z-index: 	800; 
+}
+.right-bar  {
+	color: 		white;
+	transition: all 0.2s linear;
+	background: linear-gradient(to right, #0095d3 0%, #007fb4 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
+	border-radius: 4px 0 0 4px;
+	box-shadow: 0 5px 15px #000;
+	color: 		#fff;
+	cursor: 	pointer;
+	float: 		right;
+	height: 	90px;
+	padding: 	8px 10px;
+	opacity: 	0.3; 
+}
+
+.l-region--sidebar-second {
+	display:        inline-block;
+	padding:  	    0 0 1ex 1ex;
+	position:		fixed;
+	right: 			0px;
+	background: 	rgba(255,255,255, 0.9);
+	color: 			#333;
+	border:			#bbb solid thin;
+	top:			140px;
+	overflow-x:		hidden;
+	overflow-y: 	scroll;
+	z-index:		150;
+}
+.l-region--sidebar-second h2{
+	-webkit-transition:	all .7s;
+	-mos-transition:	all .7s;
+	-ms-transition:    	all .7s;
+	-o-transition:    	all .7s;
+	transition:  	  	all .7s;
+}
+
+
+
+
+
+.l-region--sidebar-first  {
+	max-width:		205px;
+	min-width:		160px;
+	width:      	18%;
+	vertical-align: top;
+	float:     		left;
+	margin-right:   1%;
+	overflow:		hidden;
+	white-space:	nowrap;
+	margin-bottom:  1.5em;
+    display:        inline-block;
+}
+.l-region--sidebar-first .block{
+	margin-bottom:   2.2em;
+}
+
+
+
+@media only screen and (max-width: $width-mid) {
+		
+	.l-region--sidebar-first {
+		float: 				none;
+		display: 			block;
+		position: 			absolute;
+		left: 				-166px;
+		top:        		130px;
+		-webkit-transition: all 1s;
+		transition: 		all  1s;
+		border: 			rgba(22,222,22,.5) solid 6px;
+		padding: 			0;
+		margin: 			0;
+		box-shadow: 		0.4em 0.0em;
+		color: 				rgba(243, 243, 243, 0.8);
+		width:				6px;
+		max-width:			6px;
+		cursor:     		pointer;
+		z-index:    		111;
+		background-color:   white;
+	 }
+
+		
+	.l-region--sidebar-first:hover,
+	.l-region--sidebar-first:focus {
+		left:  		5px;
+		border: 	rgba(222,222,222,.5) thin solid;
+		padding: 	.8em;
+		margin: 	.8em .8em .8em 0;
+		box-shadow: 0.4em 0.4em;
+		color: 		rgba(242,242,242, .8);
+		width:  	205px;
+	 }
+	 
+}

data/lib/stylesheets/components/blocks/search.scss

@@ -0,0 +1,104 @@
+// Include the variables.
+@import "../../../partials/utility/variables/*"; 
+
+/*  ****  Search Box                 ****  */
+
+#block-search-form  {
+	display:    		inline;
+	position:			relative;
+	height:				 25px;
+	float:				right;
+	top:				12px;
+	width: 				200px;
+	margin:		 		0;
+	padding:			0;
+	vertical-align:     middle;
+}
+
+.block--search-form      {
+	padding:   			0 0 0 1.4em;
+	box-shadow: 		inset 1px 1px 2px #ccc;
+	line-height:        28px;
+	width:				233px;
+	height:        		auto;
+	background:			$color-body-bg;
+	border:  			#ccc solid 1px;
+	-webket-border-radius:  3px;
+	   -moz-border-radius:	3px;
+	    -ms-border-radius: 	3px;
+	     -o-border-radius: 	3px;	
+	        border-radius:	3px;
+}
+.block--search-form     div {
+	display:			inline;
+}
+
+.block--search-form   div.container-inline    {
+	position: 		 relative;
+	top: 			 0px;  	
+}
+.block--search-form   div.container-inline  #edit-actions--2, 
+.block--search-form   div.container-inline  #edit-actions  {
+	position: 		 absolute;
+	top: 			-4px;  
+	right:           40px; 
+	width:           16px;
+	height:			 auto;
+}
+.form-item-search-select  {
+ 	border: 		none; 
+	font-size:  	12px;
+	font-weight:	100;
+	border-radius:	0; 
+	color: 			#999;
+}
+
+.form-item-search-select select {
+ 	border: 		none; 
+	font-weight:	100;
+	border-radius:  0; 
+	-webkit-appearance:	none; 	
+	 -khtml-appearance:	none; 	
+	   -moz-appearance: window; 	
+	    -ms-appearance:	none; 
+	     -o-appearance:	none; 
+	        appearance: none;
+	color: 			#999;
+	padding: 		0 3px 0 1px;
+	z-index:		2;
+}
+
+
+#edit-search-block-form--2  {
+	font-size: 		1em;
+	font-weight:  	100;
+	color:			#999;
+	padding:       0 1em 0 0;
+}
+	
+/* Search Box  -- style search form and area  */
+#search-block-form #edit-submit-IGNORE,
+#search-block-form #edit-submit--3-IGNORE  {
+	display:		inline-block;
+	position:		relative;
+	top:			7px;
+	left:			12px;
+}
+#edit-search-block-form--2  {
+	border: none;	
+}
+
+
+@-moz-document url-prefix() {
+   .block--search-form   div.container-inline   {
+        top: 		0;
+    }
+	
+	#search-block-form-IGNORE #edit-submit,
+	#search-block-form-IGNORE #edit-submit--2  {
+		display:		inline-block;
+		position:		absolute;
+		top:			-3px;
+		left:			300px;
+	}
+}

data/lib/stylesheets/components/blocks/spinner.scss

@@ -0,0 +1,90 @@
+$spinner-duration: 4s;
+$spinner-size: 1.4em;
+$spinner-thickness: 10%;
+
+@function spinner-tip($color) {
+	@return prefixed-radial-gradients(circle, closest-side, center (100%-$spinner-thickness/2), $color 100%, transparent 101%);
+}
+@mixin spinner-line($color) {
+	$inner-radius: 100% - 2*$spinner-thickness;
+	$index: 1;
+	$spinner-tip: spinner-tip($color);
+	@each $gradient in prefixed-radial-gradients(circle, closest-side, center, transparent $inner-radius, $color $inner-radius) {
+		background: $gradient border-box content-box, nth($spinner-tip, $index) border-box;
+		$index: $index + 1;
+	}
+}
+
+/* Timing function */
+/* We just do a perfectly symmetric ease-in-out, based on one parameter */
+$spinner-ease: 0.6;
+$spinner-bezier: $spinner-ease, 0, 1-$spinner-ease, 1;
+$spinner-bezier-first-half: $spinner-ease, 0, (1+$spinner-ease)/2, 0.5;
+$spinner-bezier-second-half: (1-$spinner-ease)/2, 0.5, 1-$spinner-ease, 1;
+
+.clr-spinner {
+	display: inline-block;
+	vertical-align: top;
+	position: relative;
+	box-sizing: border-box;
+	width: $spinner-size;
+	height: $spinner-size;
+	border-left: ($spinner-size/2) solid transparent;
+	overflow: hidden;
+	@each $gradient in spinner-tip($color-spinner-tip) {
+		background: $gradient border-box;
+	}
+	-webkit-transform-origin: center;
+	transform-origin: center;
+	@include animation(outer-spin $spinner-duration infinite);
+
+	&::before {
+		content: "";
+		position: absolute;
+		left: -100%;
+		height: 100%;
+		width: 200%;
+		padding-right: 100%;
+		box-sizing: border-box;
+		border-radius: 50%;
+		@include spinner-line($color-spinner-tip);
+		-webkit-transform-origin: center;
+		transform-origin: center;
+		@include animation(inner-spin $spinner-duration infinite);
+	}
+
+	&.clr-inverted {
+		@each $gradient in spinner-tip($color-button-text-inverted) {
+			background: $gradient border-box;
+		}
+
+		&::before {
+			@include spinner-line($color-button-text-inverted);
+		}
+	}
+}
+
+@include keyframes(outer-spin) {
+	0% {
+		@include animation-timing-function(cubic-bezier($spinner-bezier));
+		@include transform(rotate(0deg));
+	}
+	50% {
+		@include animation-timing-function(cubic-bezier($spinner-bezier));
+		@include transform(rotate(540deg));
+	}
+	100% {
+		@include transform(rotate(1080deg));
+	}
+}
+
+@include keyframes(inner-spin) {
+	0%, 50%, 100% {
+		@include animation-timing-function(cubic-bezier($spinner-bezier-first-half));
+		@include transform(rotate(0deg));
+	}
+	25%, 75% {
+		@include animation-timing-function(cubic-bezier($spinner-bezier-second-half));
+		@include transform(rotate(-165deg));
+	}
+}

data/lib/stylesheets/components/blocks/treeStyles.scss

@@ -0,0 +1,97 @@
+// Include the variables.
+@import "../../../partials/utility/variables/*"; 
+
+
+
+/*  Special Tree Navigation   ------------------------------ */
+/* CSS Tree menu styles */
+ol.tree {
+	padding: 0 0 0 0px;
+	width: 250px;
+	height: 100%;
+	margin-left:  2px !important;
+}
+
+
+ol.tree img { border: none; }
+
+ol.tree p {
+	margin: 0 0 1em 0;
+}
+
+.tree li { 
+	position: relative; 
+	margin-left: -15px;
+	list-style: none;
+}
+
+.tree li.tree-nav-is-leaf,
+.tree li.file  {
+	margin-left: -1px !important;
+}
+.tree-nav-is-leaf a,
+.tree li.file a {
+	/*background: url(images/document.png) 0 0 no-repeat;*/
+	color: #333;
+	/*padding-left: 21px;*/
+	text-decoration: none;
+	display: block;
+}
+
+.tree-nav-is-leaf:selected,
+.tree li.file a:selected {
+	/*background: url(images/document.png) 0 0 no-repeat;*/
+	background-color: #edd;
+}
+
+/*li.file a[href *= '.pdf']	{ background: url(images/document.png) 0 0 no-repeat; }
+li.file a[href *= '.html']	{ background: url(images/document.png) 0 0 no-repeat; }
+li.file a[href $= '.css']	{ background: url(images/document.png) 0 0 no-repeat; }
+li.file a[href $= '.js']	{ background: url(images/document.png) 0 0 no-repeat; }*/ 
+
+ li input {
+	position: absolute;
+	left: -20px;
+	margin-left: 0;
+	opacity: 0;
+	z-index: 2;
+	cursor: pointer;
+	height: 1em;
+	width: 1em;
+	top: 7px; /*MOVES THE HOT SPOT OF THE CHECKMARK*/
+}
+.tree .tree-nav-is-leaf:hover{
+	background:  #03F;
+}
+.tree li input + ol {
+	background: url(../images/tree-images/toggle-small-expand.png) 0px 0 no-repeat;
+	margin: -13px 0 0 -4px; /* 15px */
+	height: 1em;
+}
+
+.tree li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
+
+.tree li label {
+	/*background: url(images/folder-horizontal.png) 15px 1px no-repeat;*/
+	cursor: pointer;
+	display: block;
+	text-indent:  1em;
+	/*  padding-left: 15px;  */
+	padding-top: 5px;
+	width: 180px;
+}
+
+.tree li input:checked + ol {
+	background: url(../images/tree-images/toggle-small.png) 0px 5px no-repeat;
+	margin: -1.25em 0 0 -4px; /* 20px */
+	padding: 1.563em 0 0 18px;
+	height: auto;
+}
+
+.tree li input:checked + ol > li { 
+	display: block; 
+	margin: 0 0 0.125em;  /* 2px */
+}
+.tree li input:checked + ol > li:last-child { 
+	margin: 0 0 0.063em; /* 1px */ 
+}

data/lib/stylesheets/components/blocks/treeview.scss

@@ -0,0 +1,154 @@
+// Include the variables.
+@import "../../../partials/utility/variables/*"; 
+
+/*
+.treeview, 
+.treeview ul { 
+    padding: 0 0 0 5px;
+    margin: 0 0 0 0  !important;
+    list-style: none;
+    background-color: #fff;
+	color: #666;
+}
+#tree {
+	margin-left: 1.2em;
+	padding-bottom: 2em;
+}
+.treeview ul li a     {
+	color: #666;
+}
+
+.treeview .hitarea  {
+    background: url(images/treeview-default.gif) -64px -25px no-repeat;
+    height: 16px;
+    width:  250px;  		//  was 16px;   RGS to make whole title do the collapse/expand Jun 2012 
+    margin-left: -16px;
+    margin-top:    2px;
+    float: left;
+	position:  absolute;
+    cursor: pointer;
+	z-index: 10;
+}
+// fix for IE6 
+* html .hitarea {
+    display: inline;
+    float:none;
+}
+
+.treeview li { 
+    margin: 0;
+    padding: 0px 0pt 0px 0px;
+}
+
+.treeview a {
+	overflow: hidden;
+	white-space:  nowrap;
+	text-decoration: none;
+	line-height:  1em;
+
+	z-index: -1;
+	color: #666;
+}
+.treeview a.selected {
+    background-color: #78acff;
+	color: blue;
+}
+
+.treeview a:visited,
+.treeview a:link   {
+	color: blue;
+	}
+.treeview a.hover {
+    background-color: #78acd9;
+	text-decoration: none;
+	overflow: hidden;
+	color: #333;
+	cursor: pointer;
+	z-index: -1;
+	}
+
+
+#treecontrol { margin: 1em 0.50; display: none; }
+
+// .treeview .hover { color: red; background-color: #8fc3f0; cursor: pointer; }    
+
+.treeview li { 								//  background: url(images/treeview-default-line.gif) 0 0 no-repeat; }
+.treeview li.collapsable, .treeview li.expandable { background-position: 0 -176px; }
+.treeview .hitarea.tree-nav-is-leaf-hitarea {
+	background-position:  0;
+}
+.treeview .expandable-hitarea { background-position: -80px -3px; }
+
+.treeview li.last { background-position: 0 -1766px }
+.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(images/treeview-default.gif) no-repeat; }  
+.treeview li.lastCollapsable { background-position: -64px -25px; }
+.treeview li.lastExpandable { background-position:  -80px  -3px; }
+
+.treeview div.lastCollapsable-hitarea { 
+	background-position:   -64px -25px; 
+	} 
+.treeview div.lastExpandable-hitarea { 
+	background-position:   -80px  -3px; 
+	}
+
+.treeview-red li { background-image: url(images/treeview-red-line.gif); }
+.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(images/treeview-red.gif); } 
+
+.treeview-black li { background-image: url(images/treeview-black-line.gif); }
+.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(images/treeview-black.gif); }  
+
+.treeview-gray li { background-image: url(images/treeview-gray-line.gif); }
+.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(images/treeview-gray.gif); } 
+
+.treeview-famfamfam li { background-image: url(images/treeview-famfamfam-line.gif); }
+.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(images/treeview-famfamfam.gif); } 
+
+.treeview .placeholder {
+    background: url(images/ajax-loader.gif) 0 0 no-repeat;
+    height: 16px;
+    width: 	16px;
+    display: block;
+}
+
+.filetree li { padding: 3px 0 2px 6px; }
+.filetree span.folder, .filetree span.file { padding: 0px 0 0px 16px; display: block; }
+.filetree span.folder { background: url(images/folder.gif) 0 0 no-repeat; }
+.filetree li.expandable span.folder { background: url(images/folder-closed.gif) 0 0 no-repeat; }
+.filetree span.file { background: url(images/file.gif) 0 0 no-repeat; }
+
+#tocSearch {
+	background:  #F6F9FB url(../images/search-icon.png) 3px 3px no-repeat;
+	text-indent: 1.6em;
+	max-width:   170px;
+	width:		 170px;
+	margin:   	.6em  0  0.4em  0;;
+	border: 	1px solid #aaa;
+	-moz-border-radius:    4px;
+ 	-moz-outline-radius:   4px;
+ 	-webkit-border-radius: 4px;
+	border-radius: 		   4px;
+	outline-width: 			0;
+}
+#tocSearchSubmit { 
+    display:  		none;
+	cursor:         pointer;
+	vertical-align: text-bottom;
+	border-top:     #999 solid 1px;
+	height:         13px;
+	border: 		1px solid #aaa;
+	-moz-border-radius: 7px;
+ 	-moz-outline-radius:7px;
+ 	-webkit-border-radius: 7px;
+	border-radius: 		7px;
+}
+.highlight { 
+	   color: 			blue !important;
+       text-decoration: none !important;
+       text-weight:  bold;
+       background-color: $color-highlight; 
+       margin-left:  -0.3em;
+       padding-left:  0.3em;
+}
+
+
+*/