Added position: relative to sg-pattern

Prevents absolutely-positioned elements from floating to the top

Author: bradfrost

core/styleguide/css/styleguide.css

@@ -49,7 +49,6 @@
 /*------------------------------------*\
     $PATTERN LAB INTERFACE 
 \*------------------------------------*/
-
 #patternlab-html, #patternlab-body {
   margin: 0;
   padding: 0;
@@ -70,7 +69,7 @@
   clip: rect(1px, 1px, 1px, 1px); }
 
 .sg-cf, .sg-pattern {
-  /*zoom: 1;*/ }
+  /**zoom: 1;*/ }
   .sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after {
     content: " ";
     display: table; }
@@ -227,6 +226,9 @@
     min-width: 0; }
     .sg-controls .sg-nav-phases .sg-acc-panel.active {
       max-height: none; }
+  @media all and (min-width: 69.5em) {
+    .sg-controls {
+      width: 41.5em; } }
 
 .sg-control-trigger {
   border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
@@ -263,7 +265,7 @@
   .sg-current-size:hover .sg-input {
     background: #999999;
     color: #000; }
-  @media all and (min-width: 72.5em) {
+  @media all and (min-width: 69.5em) {
     .sg-current-size {
       float: left; } }
 
@@ -273,7 +275,7 @@
     .sg-size {
       width: auto; } }
 
-@media all and (min-width: 72.5em) {
+@media all and (min-width: 69.5em) {
   .sg-size-options {
     float: left;
     position: static;
@@ -284,16 +286,12 @@
       border: 0;
       border-left: 1px solid rgba(255, 255, 255, 0.05); } }
 
-.sg-find, .sg-mqs {
-	display: none;
-}
+.sg-find {
+  display: none; }
 
 @media all and (min-width: 48em) {
-	.sg-find, .sg-mqs {
-		display: block;
-	}
-}
-
+  .sg-find {
+    display: block; } }
 #sg-form {
   margin: 0;
   border: 0;
@@ -322,7 +320,7 @@
     top: 2em;
     left: 0; }
 
-.sg-iconitem:before {
+.sg-checkbox:before {
   display: inline-block;
   margin-right: 0.4em; }
 
@@ -338,8 +336,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 0; 
-}
+  z-index: 0; }
   #sg-vp-wrap.wrap-animate {
     -webkit-transition: left 0.3s ease-out;
     -moz-transition: left 0.3s ease-out;
@@ -358,8 +355,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: white;
-}
+  background-color: white; }
   #sg-viewport.hay-mode {
     -webkit-transition: all 40s linear;
     -moz-transition: all 40s linear;
@@ -387,8 +383,7 @@
   margin: 0 auto;
   -webkit-overflow-scrolling: touch;
   overflow-y: auto;
-  overflow-x: hidden;
-}
+  overflow-x: hidden; }
   #sg-gen-container.hay-mode {
     -webkit-transition: all 40s linear;
     -moz-transition: all 40s linear;
@@ -401,8 +396,7 @@
   float: right;
   margin: 0;
   height: 100%;
-  cursor: col-resize; 
-}
+  cursor: col-resize; }
 
 #sg-rightpull {
   margin: 0;
@@ -432,7 +426,8 @@
 \*------------------------------------*/
 /* Section Pattern */
 .sg-pattern {
-  margin-bottom: 2em; }
+  margin-bottom: 2em;
+  position: relative; }
 
 /* Section Head */
 .sg-pattern-head {
@@ -522,13 +517,12 @@
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;
-  text-align: right; 
+  text-align: right;
   display: block; }
 
 .has-annotation {
   cursor: help !important;
-  box-shadow: 0 0 10px gray;
- }
+  box-shadow: 0 0 10px gray; }
   .has-annotation a, .has-annotation input {
     cursor: help !important; }
   .has-annotation:hover {
@@ -537,20 +531,19 @@
     box-shadow: inset 0 0 20px gray; }
 
 .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;
-}
+  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;
@@ -641,75 +634,70 @@ div.clear {
 .spinner {
   height: 30px;
   width: 30px;
-  margin-left: auto; margin-right: auto;
+  margin-left: auto;
+  margin-right: auto;
   background-position: center center;
   background-repeat: no-repeat;
-  background: url('../images/spinner.gif');
+  background: url("../images/spinner.gif");
   border-radius: 50%;
   opacity: .7; }
 
+/* Pattern Lab icon fonts */
 /* 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;
-}
-
-.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .icon-radio-unchecked, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .icon-eye, .sg-iconitem {
-	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;
-}
+  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; }
+
+.icon-search, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-radio-checked, .icon-radio-unchecked, .icon-file, .icon-link, .icon-keyboard, .icon-qrcode, .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; }
 
 .icon-search:before {
-	content: "\e600";
-}
+  content: "\e600"; }
+
 .icon-cog:before {
-	content: "\e601";
-}
+  content: "\e601"; }
+
 .icon-minus:before {
-	content: "\e602";
-}
+  content: "\e602"; }
+
 .icon-plus:before {
-	content: "\e603";
-}
+  content: "\e603"; }
+
 .icon-menu:before {
-	content: "\e604";
-}
+  content: "\e604"; }
+
 .icon-radio-checked:before, .sg-checkbox.active:before {
-	content: "\e605";
-}
+  content: "\e605"; }
+
 .icon-radio-unchecked:before, .sg-checkbox:before {
-	content: "\e606";
-}
+  content: "\e606"; }
+
 .icon-file:before {
-	content: "\e607";
-}
+  content: "\e607"; }
+
 .icon-link:before {
-	content: "\e608";
-}
+  content: "\e608"; }
+
 .icon-keyboard:before {
-	content: "\e609";
-}
+  content: "\e609"; }
+
 .icon-qrcode:before {
-	content: "\e60a";
-}
+  content: "\e60a"; }
+
 .icon-eye:before {
-	content: "\e60b";
-}
+  content: "\e60b"; }
 
 /******************************************************************/
 /* End Pattern Lab Interface code */

core/styleguide/css/styleguide.scss

@@ -611,6 +611,7 @@ $animate-quick: 0.2s;
 /* Section Pattern */
 .sg-pattern {
 	margin-bottom: $sg-doublespace;
+	position: relative; //Prevents absolutely-positioned elements from floating to the top
 	@extend .sg-cf;
 }