uxunity 0.1.0 → 0.1.1

data/lib/stylesheets/mixins/_prefix-mixins.scss

@@ -0,0 +1,158 @@
+/**
+ * A list of useful mixins for properties that need to be prefixed for various browsers.
+ * Feel free to add as many as you need.
+ */
+
+/*** Flexbox ***/
+
+@mixin display-flex($direction) {
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: $direction;
+	    -ms-flex-direction: $direction;
+	        flex-direction: $direction;
+}
+
+@mixin align-items($align) {
+	// Damn you IE.
+	@if $align == flex-start {
+		 -ms-flex-align: start;
+	} @else if $align == flex-end {
+		 -ms-flex-align: end;
+	} @else {
+		 -ms-flex-align: $align;
+	}
+	-webkit-align-items: $align;
+	        align-items: $align;
+}
+
+@mixin justify-content($justify) {
+	// Damn you IE.
+	@if $justify == flex-start {
+		 -ms-flex-pack: start;
+	} @else if $justify == flex-end {
+		 -ms-flex-pack: end;
+	} @else if $justify == space-between {
+		 -ms-flex-pack: justify;
+	} @else if $justify == space-around {
+		 -ms-flex-pack: distribute;
+	} @else {
+		 -ms-flex-pack: $justify;
+	}
+	-webkit-justify-content: $justify;
+	        justify-content: $justify;
+}
+
+@mixin flex($grow: 0, $shrink: 1, $basis: auto) {
+	-webkit-flex: $grow $shrink $basis;
+	    -ms-flex: $grow $shrink $basis;
+	        flex: $grow $shrink $basis;
+}
+
+@mixin align-self($align) {
+	// Damn you IE.
+	@if $align == flex-start {
+		-ms-flex-item-align: start;
+	} @else if $align == flex-end {
+		-ms-flex-item-align: end;
+	} @else {
+		-ms-flex-item-align: $align;
+	}
+	-webkit-align-self: $align;
+	        align-self: $align;
+}
+
+@mixin order($position) {
+	  -webkit-order: $position;
+	 -ms-flex-order: $position;
+	          order: $position;
+}
+
+
+/*** Gradients ***/
+
+@mixin linear-gradient($angle, $fromColor, $toColor) {
+	/* Apparently every recent browser supports the new syntax, including IE 10+ */
+	background: linear-gradient($angle, $fromColor, $toColor);
+}
+
+@function prefixed-radial-gradients($shape, $size, $position, $color-stops...) {
+	@return
+		-webkit-radial-gradient($position, $shape $size, $color-stops),
+		   -moz-radial-gradient($position, $shape $size, $color-stops),
+		    -ms-radial-gradient($shape $size at $position, $color-stops),
+	         -o-radial-gradient($position, $shape $size, $color-stops),
+		        radial-gradient($shape $size at $position, $color-stops);
+}
+
+@mixin radial-gradient($shape, $size, $position, $fromColor, $toColor) {
+	background: mix(nth($fromColor, 1), nth($toColor, 1)); /* Fallback Color for IE9- */
+	@each $gradient in prefixed-radial-gradients($shape, $size, $position, $fromColor, $toColor) {
+		background: $gradient;
+	}
+}
+
+/*** Transitions ***/
+
+@mixin transition($transition) {
+	-webkit-transition: $transition;
+	transition: $transition;
+}
+
+@mixin transition-property($property) {
+	-webkit-transition-property: $property;
+	        transition-property: $property;
+}
+
+@mixin transition-duration($duration) {
+	-webkit-transition-duration: $duration;
+	        transition-duration: $duration;
+}
+
+@mixin transition-timing-function($timing-function) {
+	-webkit-transition-timing-function: $timing-function;
+	        transition-timing-function: $timing-function;
+}
+
+@mixin transition-delay($delay) {
+	-webkit-transition-delay: $delay;
+	        transition-delay: $delay;
+}
+
+/*** Animations ***/
+
+@mixin keyframes($animationName) {
+	@-webkit-keyframes #{$animationName} {
+		@content;
+	}
+	@keyframes #{$animationName} {
+		@content;
+	}
+}
+
+@mixin animation($animations...) {
+	-webkit-animation: $animations;
+	        animation: $animations;
+}
+
+@mixin animation-timing-function($timing-function) {
+	-webkit-animation-timing-function: $timing-function;
+	        animation-timing-function: $timing-function;
+}
+
+@mixin transform($transform) {
+	-webkit-transform: $transform;
+	        transform: $transform;
+}
+
+@mixin translate3d($coordinates...) {
+	-webkit-transform: translate3d($coordinates);
+	        transform: translate3d($coordinates);
+}
+
+@mixin opacity($percentOpaque) {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$percentOpaque})";
+        filter: alpha(opacity=$percentOpaque);
+       opacity: ($percentOpaque/100);
+}

data/lib/stylesheets/utility/README.txt

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

data/lib/stylesheets/utility/_dependencies.scss

@@ -0,0 +1,5 @@
+// Load external libraries.
+@import "compass";
+@import "susy";
+@import "breakpoint";
+@import "toolkit";

data/lib/stylesheets/utility/abstractions/README.txt

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

data/lib/stylesheets/utility/variables/README.txt

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

data/lib/stylesheets/utility/variables/_breakpoints.scss

@@ -0,0 +1,5 @@
+$width-exwide: 		1392px; // ability to adapt to extra wide displays beyound this width
+$width-wide:		1392px; // normal viewing for most newer desktops and laptops up to this width
+$width-default:     1140px; // common width target
+$width-mid:         820px;  // portrait tablets 
+$width-narrow:      640px;  // landscape older phones

data/lib/stylesheets/utility/variables/_colors.scss

@@ -0,0 +1,144 @@
+
+// Global Variables  -- From Unity Blue
+//==================================================
+
+//== Unity "Blue" Theme Color Palette
+// --------------------------------------------------
+//## Do NOT use these varible names, but instead use the
+//## varible names that follow this section.  (here for reference)
+
+$light-grey:        #f5f7f8;
+$light-grey-10:     #f0f3f5;
+$light-grey-20:     #ebeff1;
+$light-grey-30:     #d7dee2;
+$light-grey-40:     #c7d1d6;
+$light-grey-50:     #b2c0cc;
+
+$medium-grey:       #91a0aa;
+$medium-grey-10:    #697785;
+$medium-grey-20:    #586877;
+
+$dark-grey:         #44535f;
+$dark-grey-10:      #414b57;
+$brand-grey:        #717074;
+
+$light-green:       #e9f4e2;
+$light-green-10:    #daeccf;
+$light-green-20:    #dcf5be;
+$green:             #6db33f;
+$medium-green:      #5e9e41;
+$dark-green:        #339900;
+
+$light-orange:      #ffedb2;
+$orange:            #f8981d;
+$dark-orange:       #cc6600;
+
+$light-blue:        #cbe5ff;
+$light-blue-10:     #98cbff;
+$light-blue-20:     #aac5e1;
+$blue:              #5384c0;
+$blue-10:           #4a7db1;
+$blue-20:           #4679b9;
+$medium-blue:       #3a87c5;
+$medium-blue-10:    #0095d3;
+$dark-blue:         #0066cc;
+
+//== Global Colors
+// --------------------------------------------------
+//## Common colors for components
+
+
+
+
+
+
+
+
+
+
+				
+
+// Below are using naming convention of 'color-' prefix
+// These are the variable names to be used throughout SASS
+// and are arranged alphabetically (more or less)
+
+$color-primary:  	 			#1f9cda;   	
+$color-active: 	 	 			#0095d3;   
+$color-aside-block:				#148cc7;	
+$color-block-text:	 			#697785;	
+$color-block-title:  			#697785;		
+$color-body-text:    			#697785;					//  $medium-grey-10		
+$color-body-bg:                	#ffffff !default;		  	//** Background color for `<body>`.
+$color-brand-primary:           $dark-blue;					//** Brand color overrides
+$color-button-default:  		$light-grey-30;				
+$color-button-primary:  		$light-blue;		
+$color-button-text-inverted: 	#ffffff;			
+$color-button-text: 			#555555;	
+$color-card-border:				#b2c0cc;					//** $light-grey-50	
+$color-content-title:  			#006699;		
+$color-disabled-state:			#ebeff1;		
+$color-divider:					#cccccc;
+$color-error:           		#de5251;			
+$color-footer-bg: 				transparent;		
+$color-h4:              		#148cc7;				
+$color-heading-text: 			#44535f;					// dark-grey	
+$color-hero-subtext: 			rgba(104, 119, 133, 0.8);		
+$color-hero-title:   			#3a87c5;		
+		
+$color-masthead-bg:   			#3a87c5;					// medium-blue
+$color-masthead-bg-pattern:     #836DB8;   			        // was medium-blue-10
+$color-masthead-bg-design:   	#f8981d;					// orange	
+$color-masthead-bg-style:   	#6db33f;					// green	
+
+$color-main-title-design:		#f8981d;					// orange	used for Page titles
+$color-main-title-style:		#6db33f;					// green	used for Page titles
+$color-main-title-pattern:		#836DB8;  //#0095d3;	   medium-blue-10	used for Page titles
+
+
+$color-highlight:				#E9F4E2;	
+$color-hover-state: 			#39f4e2;		
+$color-hover: 	 	 			#85BAD9;
+$color-info: 	 	 			$light-blue-10;
+
+
+//** Global link text colors
+$color-link:              		$dark-blue;
+$color-link-hover:        		darken($color-link, 10%);
+$color-link-active:       		$medium-blue-10;
+
+$color-menu-text:	 			#ffffff;	
+$color-nav-category:			#333333; 		
+$color-nav-index:   			#006699;
+
+$color-primary-hover-bg:        $light-green;				//** Background color of selection bar on white background, as in
+$color-primary-active-bg:       $light-green-10;			//**            actions menu, datagrid row, dropdown item, list box item, tree item
+$color-primary-hover:     		$medium-grey-20;			//** Text color of selection bar on white background, as in
+$color-primary-active:    		$color-primary-hover;		//**      actions menu, datagrid row, dropdown item, list box item, tree item
+$color-primary:					#1f9cda;	
+
+	
+$color-selected-state:			#daeccf;		
+$color-separator-line: 			#e8e8e8;	
+
+$color-secondary-hover-bg:      $light-blue-20;				//** Background color of selection bar on grey backgrounds, as in
+$color-secondary-active-bg:     $blue-10;					//**            object navigator, tree item in an object navigator
+$color-secondary-hover:   		$color-primary-hover;  		//** Text color of selection bar on grey backgrounds, as in
+$color-secondary-active:  		#fff;						//**      object navigator, tree item in an object navigator
+	
+$color-side-nav-text:  			#898989;
+$color-site-name:  				white; 
+$color-spinner-tip:				$medium-blue-10;		
+$color-submitted:       		#898989;
+$color-text-disabled:      		$light-grey-30;	 			//** Global 'disabled' text color
+$color-text-side-nav: 			#898989; 			
+$color-success:         		#de5251;		
+$color-warn:      				$light-orange;	
+
+//  testing
+
+$light-grey:        #f5f7f8;
+$light-grey-10:     darken($light-grey, 1%);
+$light-grey-20:     darken($light-grey, 2%);
+$light-grey-30:     darken($light-grey, 3%);
+$light-grey-40:     darken($light-grey, 4%);
+$light-grey-50:     darken($light-grey, 5%);

data/lib/stylesheets/utility/variables/_globals.scss

@@ -0,0 +1,31 @@
+/**
+ * Global parameters. Every measure, color, ... should be relative to those,
+ * so that the design stayed coherent if we change one of these values.
+ *
+ * The following are based on Unity visual specifications for VMware.
+ * Using the box model aspects of spacial measures for separation of main
+ * html tags that are consistent across Unity.
+ */
+
+
+body  {  
+	background:    	$color-body-bg;
+}
+
+
+
+.clearfix {
+	&:after {
+		content: "";
+		display: table;
+		clear: both;
+	}
+}
+
+.hidden {
+	display: none;
+}
+
+.invisible {
+	visibility: hidden;
+}

data/lib/stylesheets/utility/variables/_grid.scss

@@ -0,0 +1,12 @@
+// Susy grid.
+$container-style:      	magic;
+$container-width:      	$width-default;
+$total-columns:        	12;
+$column-width:         	80px;
+$gutter-width:         	20px;
+$grid-padding:         	$gutter-width;
+$debug-grid:           	true;
+
+$max-width:			   	$width-default;
+$height-header:        	80px;
+$height-header-wrapper:	120px;

data/lib/stylesheets/utility/variables/_legacy.scss

@@ -0,0 +1,4 @@
+// Legacy support.
+$legacy-support-for-ie6: false;
+$legacy-support-for-ie7: false;
+$legacy-support-for-ie8: false;

data/lib/stylesheets/utility/variables/_typography.scss

@@ -0,0 +1,21 @@
+$font-family-default:  ProximaNova-Reg, Helvetica, Arial, sans-serif;
+$font-headings:		   ProximaNova-Light, Helvetica, Arial, sans-serif;
+$font-body-text:	   ProximaNova-Reg, Helvetica, Arial, sans-serif;
+$font-secondary-text:  Arial, Sans-Serif;
+$font-iconic:          Font-Awesome;
+
+$font-main-menu:	   OpenSans-Regular, Helvetica, Arial, sans-serif;
+$font-toc-active:	   OpenSans-Semibold, Helvetica, Arial, sans-serif;
+
+
+// generic - direct (should be avoided, to provide easier theme changes)
+$font-light:		   ProximaNova-Light, Helvetica, Arial, sans-serif;
+$font-regular:		   ProximaNova-Reg,   Helvetica, Arial, sans-serif;
+$font-semibold:		   ProximaNova-Sbold, Helvetica, Arial, sans-serif;
+$font-bold:			   ProximaNova-Bold,  Helvetica, Arial, sans-serif;
+
+
+// base level defaults
+$font-size:            16px;
+$font-weight-default:  300;
+

data/lib/stylesheets/ux/_lists.scss

@@ -0,0 +1,28 @@
+/*** Lists ***/
+
+ul {
+	margin:         	0;
+	padding: 			0;
+}
+li {
+	list-style-type: 	none;
+	margin: 			0;
+	padding: 			0;
+}
+
+.ux-unstyled {
+	list-style-type: 	none;
+	margin: 			0;
+	padding: 			0;
+}
+
+dl {
+	dd {
+		margin: 		0;
+		font-weight: 	600;
+	}
+
+	dt {
+		margin: 		0 0 rem(1) rem(2);
+	}
+}

data/lib/stylesheets/ux/_ux-buttons.scss

@@ -0,0 +1,156 @@
+// Include the variables.
+@import "../../utility/variables/*";
+
+
+
+
+
+
+fieldset.ux-radio-grp { 
+    width:     				40%; 
+    min-width: 				20em; 
+	.ux-radio  {   // provides for custom radio element, instead of native
+		display:			block;
+		margin-bottom: 		1em;
+		position: 			relative;
+		padding-left: 		1.8em;
+		text-indent:  		-1.4em;
+		font-family: 		$font-family-default;
+		font-weight: 		300;
+		font-size: 			1em;
+		margin-top: 		-1px;
+		min-height: 		1.13em;
+		text-align: 		left;
+		
+		> input {
+			margin-right:   0.8em;
+		}
+	
+		> label::before {
+			opacity: 		0;
+			cursor: 		pointer;
+			position: 		absolute;
+			content: 		'';
+			width: 			1em;
+			height: 		1em;
+			left: 			0;
+			top: 			0;
+			background: 	#fbfaf9;
+			box-shadow: 	inset 0px 0px 2px 0px $color-separator-line;
+			border: 		1px solid $color-separator-line;
+			border-radius:  49%;
+		}
+		&::hover > label::before   {
+			box-shadow: 	0 0 0 4px #fff inset;
+			background: 	$color-separator-line;
+		}
+		
+	}
+}
+
+/*  Temporary mock up -- Needs to be setup properly  */
+
+	ul.ux-button-group.round.toggle  {
+		margin-left: auto;
+		margin-right: auto;
+		
+		> * > .button {
+			-webkit-border-radius:	0;
+			        border-radius:	0;
+			padding: 				6px  22.5px;
+			border: 				#eee thin solid;
+			box-shadow: 			0 2px 0 0 #e6e6e6;
+		}
+
+		> *:first-child > .button {
+			-webkit-border-bottom-left-radius: 5px;
+			-webkit-border-top-left-radius:    5px;
+			        border-bottom-left-radius: 5px;
+			        border-top-left-radius:    5px;
+		}
+
+		> *:last-child > .button {
+			-webkit-border-bottom-right-radius: 5px;
+			-webkit-border-top-right-radius:    5px;
+			        border-bottom-right-radius: 5px;
+			        border-top-right-radius:    5px;
+		}
+		
+		li   {
+			list-style: 		none;
+			display:    		inline-block;
+			text-indent: 		-5px;
+			margin: 			0;
+			padding:			0;
+		}
+		input[data-toggle] {
+		  display: 				none;
+		}
+		
+		input[data-toggle]:checked + label,
+		input[data-toggle]:checked + label:active {
+		  background-color:  	$color-selected-state;
+		  box-shadow: 			0 2px 4px rgba(0, 0, 0, 0.15) inset, 
+		              			0 1px 2px rgba(0, 0, 0, 0.05);
+		}
+		
+		.button-group.toggle {
+		  li:not(first-child) {
+		    margin: 0 -0.9rem;
+		  }
+		}
+	}
+	
+	/**
+ * Button elements and elements that have the "button" class are styled.
+ * Possible additional classes to change the color:
+ *     - clr-primary
+ *     - clr-error
+ *     - clr-success
+ */
+
+$button-shadow-height: 3px;
+
+button, 
+.ux-button {
+	padding: 		rem(0.8) rem(1.5);
+	outline: 		none;
+	border-radius:	3px;
+	font-family: 	$font-family-default;
+	font-weight: 	400;
+	font-size: 		rem(0.8);
+	text-transform: uppercase;
+	cursor: 		pointer;
+
+	@include button-color($color-button-default);
+
+	&.ux-primary {
+		@include button-color($color-button-primary);
+	}
+	&.ux-info {
+		@include button-color($color-info);
+	}
+	&.ux-warn {
+		@include button-color($color-warn);
+	}
+
+	&.ux-error {
+		@include button-color($color-error);
+	}
+
+	&.ux-success {
+		@include button-color($color-success);
+	}
+
+	&:active:not(.disabled) {
+		position: 	relative;
+		top: 		$button-shadow-height;
+		box-shadow: none;
+	}
+
+	&:disabled, &.disabled {
+		opacity: 	0.4;
+		cursor: 	default;
+	}
+
+}