shibori 1.0.0.beta1

data/public/styleguide/css/styleguide-specific.scss

@@ -0,0 +1,204 @@
+/*------------------------------------*\
+    $PATTERN LAB-SPECIFIC STYLES
+\*------------------------------------*/
+/**
+ * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
+ * This is helpful for displaying demo styles for grids, animations, color swatches, etc
+ * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
+ * These styles will not be your production CSS.
+ */
+
+
+/* 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 : 80%;
+$sg-font-size-large : 120%;
+
+/* Defaults */
+$sg-space : 1em;
+$sg-doublespace : $sg-space*2;
+$sg-pad : 1em;
+$sg-pad-half : $sg-pad/2;
+$sg-border-rad: 4px;
+
+/* 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;
+
+
+// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles
+.demo {
+	overflow: hidden;
+	margin-bottom: 1rem;
+}
+
+.demo .gi, .demo .demo-block {
+	background: $sg-tertiary;
+	color: $sg-secondary;
+	text-align: center;
+	margin-bottom: $sg-pad-half;
+	padding: 1em !important;
+
+	&:nth-of-type(2n) {
+		color: $sg-tertiary;
+		background: $sg-secondary;
+	}
+
+	.gi {
+		background: $sg-tone;
+		color: $sg-tertiary;
+
+		&:nth-of-type(2n) {
+			background: $sg-tone-2;
+		}
+	}
+}
+
+//Demo box for animation
+.demo-animate {
+	background: #ddd;
+	padding: $sg-pad;
+	margin-bottom: $sg-space;
+	text-align: center;
+}
+
+//Animate Demo to show
+.animate-move {
+	position: relative;
+
+	.demo-shape {
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: 20px;
+		background: $sg-secondary;
+	}
+
+	&:hover {
+		> .demo-shape {
+			left: 100%;
+			margin-left: -20px;
+		}
+	}
+}
+
+// Style Guide color swatches
+.sg-colors {
+	overflow: hidden;
+	display:flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: center;
+  align-items: flex-start;
+
+	li {
+		box-sizing: border-box;
+		overflow: hidden;
+		margin: 0 0 1em 0;
+		flex-grow: 0;
+	 	flex-shrink: 1;
+		width: 100%;
+
+		@media all and (min-width: $sg-bp-small) {
+			width: calc(50% - 1em);
+			margin-right: 1em;
+		}
+
+		@media all and (min-width: $sg-bp-med) {
+			width: calc(25% - 1em);
+			margin-right: 1em;
+		}
+
+		@media all and (min-width: $sg-bp-large) {
+			width: calc(15% - 1em);
+			margin-right: 1em;
+		}
+	}
+}
+
+.sg-swatch {
+	display: block;
+	height: 120px;
+	border-radius: $sg-border-rad - 2;
+	margin-bottom: 10px;
+	margin-right: 0.3em;
+	box-shadow: inset 0 0 1px rgba(#000, .2);
+}
+
+.sg-label {
+	display: block;
+	line-height: 1;
+	font-family: monospace;
+	font-size: $sg-font-size-sm;
+}
+
+.sg-grid-example .col {
+  height: 150px;
+  border: 1px solid #eee;
+  margin-bottom: 20px;
+  text-align: center;
+  padding: 20px;
+  font-size: .75em;
+}
+
+.sg-icons {
+  list-style-type: none;
+  padding-left: 0;
+
+	li {
+		text-align: center;
+
+		.icon {
+			display: inline-block;
+      margin: 0 auto;
+
+      &:before {
+        position: relative;
+        top: -10px;
+        left: 3px;
+      }
+		}
+
+		.codes {
+      position: relative;
+	    font-family: monospace;
+	    border-radius: 2px;
+	    height: 30px;
+	    line-height: 30px;
+      color: $sg-tone-2;
+			font-size: $sg-font-size-sm;
+
+      &:nth-child(odd) {
+        margin-top: -15px;
+      }
+		}
+  }
+
+  .bit-4 {
+    width: 17%;
+    float: left;
+    margin: 0 1.5%;
+    margin-bottom: 40px;
+  }
+}