shibori 1.0.0.beta1

data/public/styleguide/css/styleguide.scss

@@ -0,0 +1,950 @@
+/*------------------------------------*\
+    $PATTERN LAB STYLES
+\*------------------------------------*/
+/**
+ * NOTE: These styles are specific to Pattern Lab and should not be modified.
+ * Edit all project styles in /source/css/
+ *
+ * Second note: Any important declarations are to prevent brand styles from overriding style guide
+ */
+
+
+/*------------------------------------*\
+    $CONTENTS
+\*------------------------------------*/
+/**
+ * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
+ * -----Font
+ * -----Colors
+ * -----Typography
+ * -----Defaults
+ * -----Breakpoints
+ * MIXINS---------------------------------Sass mixins
+ * GLOBAL ELEMENTS------------------------Establish global styles
+ * -----Main
+ * -----Headings
+ * -----Text-related elements (p, blockquote, lists)
+ * -----Defaults
+ * -----Breakpoints
+ * STYLE GUIDE INTERFACE------------------CSS for the Pattern Lab Container.
+ * -----Header
+ * -----Navigation
+ * -----Controls
+ * -----Main Container
+ * -----Viewport
+ * -----Section Headers
+ * -----Code View
+ * -----Icon Fonts
+ */
+
+
+
+
+
+/*------------------------------------*\
+    $PATTERN LAB VARIABLES
+\*------------------------------------*/
+/*Fonts*/
+$sg-font : "BentonSans", "Helvetica", "Arial", sans-serif;
+$sg-font-mono: monospace;
+
+/* Style Guide Interface Colors */
+$sg-primary : #222;
+$sg-secondary : #808080;
+$sg-tertiary : #ddd;
+$sg-quaternary : #fff;
+$sg-quinary : #999;
+$sg-tint : rgba(255,255,255,0.05);
+$sg-tint-2 : rgba(255,255,255,0.25);
+$sg-tone : rgba(0,0,0,0.1);
+$sg-tone-2 : rgba(0,0,0,0.3);
+
+/* Typography */
+$sg-font-size-norm : 100%;
+$sg-font-size-sm : 70%;
+$sg-font-size-large : 120%;
+
+/* Defaults */
+$sg-space : 1em;
+$sg-doublespace : $sg-space*2;
+$sg-pad : 1em;
+$sg-pad-half : $sg-pad/2;
+
+/* Dimensions */
+$offset-top: 2em;
+
+/* Breakpoints */
+$sg-bp-small : 24em;
+$sg-bp-small-2 : 30em;
+$sg-bp-med : 48em;
+$sg-bp-large : 72em;
+$sg-bp-xl : 80em;
+
+$animate-quick: 0.2s;
+
+
+
+
+
+/*------------------------------------*\
+    $PATTERN LAB MIXINS
+\*------------------------------------*/
+@mixin sg-transition($transition-property, $transition-time, $method) {
+	-webkit-transition: $transition-property $transition-time $method;
+	-moz-transition: $transition-property $transition-time $method;
+	-ms-transition: $transition-property $transition-time $method;
+	-o-transition: $transition-property $transition-time $method;
+	transition: $transition-property $transition-time $method;
+}
+
+
+
+
+
+
+/*------------------------------------*\
+    $PATTERN LAB INTERFACE
+\*------------------------------------*/
+
+#patternlab-html, #patternlab-body {
+	margin: 0;
+	padding: 0;
+	background: $sg-tertiary;
+	-webkit-text-size-adjust: 100%;
+}
+
+.sg-nav-wrapper {
+	overflow: hidden;
+	background: $sg-tertiary;
+}
+
+.is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+
+//Clearfix
+.sg-cf {
+    /**zoom: 1;*/
+
+    &:before, &:after {
+    	content: " ";
+    	display: table;
+    }
+
+    &:after {
+	    clear: both;
+	}
+}
+
+.sg-main {
+	max-width: 90%;
+	margin: auto;
+}
+
+.sg-single-pattern {
+	max-width: 90%;
+	margin: 40px auto;
+}
+
+/*------------------------------------*\
+    $PATTERN LAB HEADER
+\*------------------------------------*/
+/* Header */
+.sg-header {
+	background: $sg-primary;
+	color: $sg-quaternary;
+	font-family: $sg-font;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 2;
+	width: 100%;
+
+	* {
+	  -moz-box-sizing: border-box;
+	  -webkit-box-sizing: border-box;
+	  box-sizing: border-box;
+	}
+
+	ul, ol {
+		padding: 0;
+		margin: 0;
+	}
+
+	li {
+		list-style: none;
+		border-bottom: 1px solid $sg-tint;
+	}
+
+	a {
+		font-size: $sg-font-size-sm;
+		color: $sg-secondary;
+		text-decoration: none;
+		display: block;
+		line-height: 1;
+		padding: $sg-pad;
+		@include sg-transition(background,0.15s,ease-out);
+		@include sg-transition(color,0.15s,ease-out);
+
+		&:hover, &:focus, &.active {
+			color: $sg-quaternary;
+			background: $sg-tint;
+		}
+	}
+
+	ol ol ol a { //3rd level nav item
+		padding-left: 2em;
+		text-transform: none;
+    }
+}
+
+
+
+/* Navigation */
+.sg-header .sg-nav-toggle {
+	display: inline-block;
+	padding: 0.9em $sg-pad;
+	border-bottom: 1px solid rgba(0,0,0,0);
+	position: relative;
+	z-index: 2;
+
+	span {
+		display: inline-block;
+		padding-right: 0.2em;
+	}
+
+	@media all and (min-width: $sg-bp-med) {
+		display: none;
+	}
+}
+
+.sg-nav-container {
+	@media all and (max-width: $sg-bp-med) {
+		overflow: hidden;
+		max-height: 0;
+		@include sg-transition(max-height,0.1s,ease-out);
+
+		&.active {
+			max-height: 50em;
+		}
+	}
+}
+
+.sg-nav {
+	z-index: 1;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+
+	> li {
+		cursor: pointer;
+
+		@media all and (min-width: $sg-bp-med) {
+			border-bottom: 0;
+			border-right: 1px solid $sg-tint;
+			float: left;
+			position: relative;
+
+			> ol {
+				position: absolute;
+				top: $offset-top;
+				left: 0;
+			}
+
+		}
+	}
+}
+
+/* Accordion */
+.sg-acc-handle {
+	&:after {
+		content: ' +';
+		float: right;
+		font-size: $sg-font-size-sm;
+
+		@media all and (min-width: $sg-bp-med) {
+			float: none;
+		}
+	}
+
+	&.active {
+		color: $sg-quaternary;
+		background: $sg-tint;
+		&:after {
+			content: ' -';
+		}
+	}
+
+	&.sg-icon:after {
+		content: "";
+	}
+}
+
+.sg-header .sg-icon {
+	width: auto;
+	font-size: 1rem;
+	padding: 0.5rem 1rem;
+}
+
+.sg-acc-panel {
+	overflow: hidden;
+	max-height: 0;
+	min-width: 10em;
+	@include sg-transition(max-height,0.1s,ease-out);
+
+	li {
+		background: $sg-primary;
+	}
+
+	&.active {
+		max-height: 120em;
+		overflow: auto;
+	}
+
+	&.sg-right {
+		position: absolute;
+		left: auto;
+		right: 0;
+	}
+
+	&.sg-left {
+		position: absolute;
+		left: auto;
+	}
+
+	[class^="sg-icon-"] {
+		&:before {
+			display: inline-block;
+			margin-right: 0.4em;
+		}
+	}
+}
+
+/* Controls (sizing, view mode) */
+.sg-controls {
+	border: 0;
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 2;
+}
+
+.sg-control-trigger {
+	border-bottom: 1px solid $sg-tint;
+
+	@media all and (min-width: $sg-bp-med) {
+		border: 0;
+	}
+
+	@media all and (min-width: $sg-bp-large) {
+		float: left;
+		width: 6em;
+	}
+}
+
+.sg-control {
+	> li {
+		float: left;
+
+		@media all and (min-width: $sg-bp-med) {
+			border-bottom: 0;
+			border-left: 1px solid $sg-tint;
+		}
+	}
+
+	.sg-input {
+		padding: 0.1em;
+		-webkit-transition: all $animate-quick ease-out;
+	    -moz-transition: all $animate-quick ease-out;
+	    -ms-transition: all $animate-quick ease-out;
+	    -o-transition: all $animate-quick ease-out;
+	    transition: all $animate-quick ease-out;
+
+		&:active, &:focus {
+			outline: 0;
+			background: $sg-quinary;
+			color: #000;
+		}
+	}
+}
+
+.sg-current-size {
+	font-size: 70%;
+	color: $sg-secondary;
+	padding: 0.85em 0.7em;
+
+	&:hover {
+		.sg-input {
+			background: $sg-quinary;
+			color: #000;
+		}
+	}
+
+	@media all and (min-width: $sg-bp-large) {
+		float: left;
+	}
+}
+
+.sg-size {
+	width: 135px;
+
+	@media all and (min-width: $sg-bp-med) {
+		width: auto;
+	}
+}
+
+.sg-size-options {
+
+	@media all and (min-width: $sg-bp-large) {
+		float: left;
+		position: static;
+		max-height: none;
+		max-width: none;
+
+		> li {
+			float: left;
+			border: 0;
+			border-left: 1px solid $sg-tint;
+		}
+	}
+}
+
+//Media Queries Dropdown
+#sg-size-mq {
+	display: none;
+
+	@media all and (min-width: $sg-bp-large) {
+		display: block;
+	}
+}
+
+#sg-form {
+	margin: 0;
+	border: 0;
+	padding: 0;
+}
+
+.sg-input {
+	margin: -2px 0 0 0;
+	padding: 0;
+	border: 0;
+	background-color: #222;
+	color: gray;
+	width: 25px;
+	text-align: right;
+
+	@media all and (min-width: $sg-bp-med) {
+		width: 35px;
+	}
+}
+
+.sg-input-active {
+	background-color: #fff;
+	color: #000;
+}
+
+.sg-view {
+	position: relative;
+
+	> ul {
+		position: absolute;
+		top: $offset-top;
+		left: 0;
+	}
+}
+
+//Checklist dropdown lists
+.sg-checkbox {
+	@extend .sg-icon-radio-unchecked;
+
+	&:before {
+		display: inline-block;
+		margin-right: 0.4em;
+	}
+
+	&.active {
+		@extend .sg-icon-radio-checked;
+	}
+}
+
+//Pattern States (active, inprogress, complete, etc)
+
+/* basic styling */
+.sg-pattern-state:before {
+	margin-right: 4px;
+	content: "\2022";
+	display: inline-block;
+	margin-bottom: -4px;
+	font-size: 18px;
+	vertical-align: bottom;
+}
+
+/* nav styling */
+.sg-nav .sg-pattern-state:before {
+	margin-top: -4px;
+	margin-bottom: 0;
+	margin-left: -4px;
+	height: 20px;
+	display: block;
+	float: left;
+}
+
+.sg-sub-nav .sg-pattern-state:before {
+	margin-left: -11px;
+	margin-right: 4px;
+}
+
+/* call out for pattern's pattern state */
+span.sg-pattern-state {
+	color: #999;
+}
+
+span.sg-pattern-state:before {
+	margin-bottom: -3px;
+	margin-left: 4px;
+}
+
+/* pattern states */
+.inprogress:before {
+	color: #FF4136 !important;
+}
+
+.inreview:before {
+	color: #FFCC00 !important;
+}
+
+.complete:before {
+	color: #2ECC40 !important;
+}
+
+
+
+/*------------------------------------*\
+    $PATTERN LAB VIEWPORT
+\*------------------------------------*/
+
+/* Viewport */
+
+#sg-vp-wrap {
+	text-align: center;
+	width: 100%;
+	position: fixed;
+	top: $offset-top;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 0;
+
+	&.wrap-animate {
+		-webkit-transition: left 0.3s ease-out;
+	    -moz-transition: left 0.3s ease-out;
+	    -ms-transition: left 0.3s ease-out;
+	    -o-transition: left 0.3s ease-out;
+	    transition: left 0.3s ease-out;
+	}
+
+}
+
+#sg-viewport {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	border: 0;
+	padding: 0;
+	margin: 0;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: white;
+
+  &.hay-mode {
+		-webkit-transition: all 40s linear;
+	    -moz-transition: all 40s linear;
+	    -ms-transition: all 40s linear;
+	    -o-transition: all 40s linear;
+	    transition: all 40s linear;
+	}
+}
+
+.no-resize {
+	#sg-cover, #sg-rightpull-container {
+		display: none;
+	}
+
+	#sg-viewport {
+		overflow: hidden !important;
+	}
+
+}
+
+#sg-cover {
+	width: 100%;
+	height: 100%;
+	display: none;
+	position: absolute;
+	z-index: 20;
+	cursor: col-resize;
+}
+
+#sg-gen-container {
+	height: 100%;
+	position: relative;
+	text-align: center;
+	margin: 0 auto;
+	-webkit-overflow-scrolling: touch;
+	overflow-y: auto;
+	overflow-x: hidden;
+
+	&.hay-mode {
+		-webkit-transition: all 40s linear;
+	    -moz-transition: all 40s linear;
+	    -ms-transition: all 40s linear;
+	    -o-transition: all 40s linear;
+	    transition: all 40s linear;
+	}
+}
+
+#sg-rightpull-container {
+	width: 14px;
+	float: right;
+	margin: 0;
+	height: 100%;
+	cursor: col-resize;
+}
+
+#sg-rightpull {
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	background: #999;
+	-webkit-transition: background $animate-quick ease-out;
+    -moz-transition: background $animate-quick ease-out;
+    -ms-transition: background $animate-quick ease-out;
+    -o-transition: background $animate-quick ease-out;
+    transition: background $animate-quick ease-out;
+
+	&:hover {
+		background: #666;
+	}
+
+	&:active {
+		cursor: col-resize;
+		background: #444;
+	}
+}
+
+.vp-animate {
+  -webkit-transition: width 0.8s ease-out;
+  -moz-transition: width 0.8s ease-out;
+  -ms-transition: width 0.8s ease-out;
+  -o-transition: width 0.8s ease-out;
+  transition: width 0.8s ease-out;
+}
+
+
+
+
+
+/*------------------------------------*\
+    $PATTERN LAB CONTENT
+\*------------------------------------*/
+
+/* Section Pattern */
+.sg-pattern {
+	margin-bottom: $sg-doublespace;
+	position: relative; //Prevents absolutely-positioned elements from floating to the top
+	@extend .sg-cf;
+}
+
+/* Section Head */
+h2.sg-pattern-head {
+	margin: $sg-doublespace 0;
+	font-family: $sg-font;
+	font-size: 11px;
+	font-weight: normal;
+	padding: $sg-pad 0;
+	border-bottom: 1px solid $sg-tertiary;
+
+	a {
+		display: block;
+		color: $sg-secondary;
+		text-decoration: none;
+		cursor: pointer;
+		font-size: 11px;
+
+		&:hover {
+			color: $sg-primary;
+		}
+	}
+}
+
+//Annotations and code view container
+.sg-view-container {
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	font-family: $sg-font;
+	line-height: 1.4;
+	font-size: 90%;
+	background: $sg-primary;
+	color: $sg-secondary;
+	position: fixed;
+	top: auto;
+	padding: $sg-pad;
+	bottom: 0;
+	left: 0;
+	z-index: 2;
+	width: 100%;
+	height: 50%;
+	overflow-y: auto;
+	overflow-x: hidden;
+
+  	a {
+    	color: $sg-quinary;
+    }
+
+     pre {
+		padding: 0 1em;
+	}
+
+	&.anim-ready {
+		-webkit-transition: bottom 0.3s ease-out;
+		-moz-transition: bottom 0.3s ease-out;
+	  	-webkit-transition: bottom 0.3s ease-out;
+	  	-ms-transition: bottom 0.3s ease-out;
+	  	-o-transition: bottom 0.3s ease-out;
+	  	transition:  bottom 0.3s ease-out;
+	}
+}
+
+//Annotation and code view close button
+.sg-view-close {
+	width: 100%;
+	margin-bottom: -10px;
+}
+
+.sg-view-close-btn {
+	color: #fff;
+	text-decoration: none;
+	text-align: right;
+	display: block;
+}
+
+//Annotated elements Styles
+.has-annotation {
+	cursor: help !important;
+	box-shadow: 0 0 10px $sg-secondary;
+
+	a, input {
+		cursor: help !important;
+	}
+
+	&:hover {
+		box-shadow: 0 0 10px $sg-primary;
+	}
+
+	&.active {
+		box-shadow: inset 0 0 20px $sg-secondary;
+	}
+
+}
+
+.annotation-tip {
+	display: block;
+	position: absolute;
+	margin-top: -10px !important;
+	margin-left: -10px !important;
+	width: 25px !important;
+	height: 25px !important;
+	border-radius: 13px !important;
+	text-align: center !important;
+	background: #444 !important;
+	color: #fff !important;
+	font-weight: bold !important;
+	font-size: 16px !important;
+	z-index: 100;
+}
+
+#sg-comments-container {
+	max-width: 60em;
+	margin: 0 auto;
+}
+
+.sg-comment-container {
+	padding-bottom: 2em;
+	margin-bottom: $sg-space;
+	border-bottom: 1px solid $sg-tint-2;
+
+	p:last-child {
+		margin-bottom: 0;
+	}
+
+	h2 {
+		margin-bottom: 0.25em;
+	}
+}
+
+.sg-code, .sg-annotations {
+	clear: both;
+	color: $sg-primary;
+	margin: $sg-space 0;
+
+	a {
+		text-decoration: underline;
+	}
+}
+
+.sg-code {
+	pre {
+		white-space: -moz-pre-line;
+		white-space: -pre-line;
+		white-space: -o-pre-line;
+		word-wrap: break-word;
+		white-space: pre-line;
+		border-radius: 3px;
+		padding: 0 $sg-pad;
+	}
+}
+
+.sg-code-contains {
+	margin-bottom: 1rem;
+	font-size: 85%;
+	color: $sg-secondary;
+
+	code {
+		padding: 0.2em;
+		background: $sg-tone-2;
+		color: $sg-quinary;
+		position: relative;
+		top: -2px;
+	}
+}
+
+.sg-code-head {
+	color: $sg-secondary;
+	font-size: 1em;
+	font-weight: bold;
+	margin-bottom: 10px;
+}
+
+#sg-code-markup {
+	padding-top: 10px;
+}
+
+#sg-code-tabs {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+#sg-code-tabs li {
+	float: left;
+	background-color: #333;
+	font-size: 1.3em;
+	font-weight: bold;
+	padding: 5px 15px;
+	border-top: 2px solid #666;
+	margin-right: 2px;
+	cursor: pointer;
+}
+
+.sg-code-title-active {
+	color: #bbb;
+	background-color: #272822 !important;
+}
+
+div.clear {
+	clear: both;
+}
+
+.sg-code-patternname {
+	color: #aaa;
+}
+
+#sg-code-loader {
+	display: none;
+	position: absolute;
+	left: 45%;
+	top: 20%;
+	width: 150px;
+	padding: 10px;
+	text-align: center;
+	border-radius: 10px;
+	background-color: #000;
+	z-index: 100;
+}
+
+/* Pattern Lab icon fonts */
+@font-face {
+	font-family: 'icomoon';
+	src:url('../fonts/icomoon.eot?srsv7g');
+	src:url('../fonts/icomoon.eot?#iefixsrsv7g') format('embedded-opentype'),
+		url('../fonts/icomoon.woff?srsv7g') format('woff'),
+		url('../fonts/icomoon.ttf?srsv7g') format('truetype'),
+		url('../fonts/icomoon.svg?srsv7g#icomoon') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-icon-radio-unchecked, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox {
+	font-family: 'icomoon';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.sg-icon-search:before {
+	content: "\e600";
+	font-size: 85%;
+}
+.sg-icon-cog:before {
+	content: "\e601";
+}
+.sg-icon-minus:before {
+	content: "\e602";
+}
+.sg-icon-plus:before {
+	content: "\e603";
+}
+.sg-icon-menu:before {
+	content: "\e604";
+}
+.sg-icon-radio-checked:before, .sg-checkbox.active:before {
+	content: "\e605";
+}
+.sg-icon-radio-unchecked:before, .sg-checkbox:before {
+	content: "\e606";
+}
+.sg-icon-file:before {
+	content: "\e607";
+}
+.sg-icon-link:before {
+	content: "\e608";
+}
+.sg-icon-keyboard:before {
+	content: "\e609";
+}
+.sg-icon-qrcode:before {
+	content: "\e60a";
+}
+.sg-icon-eye:before {
+	content: "\e60b";
+}
+
+/******************************************************************/
+/* End Pattern Lab Interface code */