Right-aligned sizing styles

Author: bradfrost

.gitignore

@@ -10,3 +10,6 @@ latest-change.txt
 *-ck.js
 
 /core/source/css/.sass-cache/
+
+/public/styleguide/css/styleguide.css
+/public/styleguide/css/styleguide.scss

core/styleguide/css/styleguide.scss

@@ -407,19 +407,18 @@ $animate-quick: 0.2s;
 		max-width: none;
 
 		> li {
-			display: inline-block;
+			float: left;
 			border: 0;
 			border-left: 1px solid $sg-tint;
 		}
 	}
 }
 
-.sg-find {
+//Media Queries Dropdown
+#sg-size-mq {
 	display: none;
-}
 
-@media all and (min-width: $sg-bp-med) {
-	.sg-find {
+	@media all and (min-width: $sg-bp-med) {
 		display: block;
 	}
 }
@@ -429,6 +428,7 @@ $animate-quick: 0.2s;
 	border: 0;
 	padding: 0;
 }
+
 .sg-input {
 	margin: -2px 0 0 0;
 	padding: 0;

core/templates/partials/ishControls.mustache

@@ -10,13 +10,13 @@
 						</form><!--end #sg-form-->
 					</div><!--end #sg-current-size-->
 					<ul class="sg-acc-panel sg-size-options">
-						{{^ ishControlsHide.s }}<li class="sg-quarter"><a href="#" id="sg-size-s">S</a></li>{{/ ishControlsHide.s }}
-						{{^ ishControlsHide.m }}<li class="sg-quarter"><a href="#" id="sg-size-m">M</a></li>{{/ ishControlsHide.m }}
-						{{^ ishControlsHide.l }}<li class="sg-quarter"><a href="#" id="sg-size-l">L</a></li>{{/ ishControlsHide.l }}
-						{{^ ishControlsHide.full }}<li class="sg-half"><a href="#" id="sg-size-full">Full</a></li>{{/ ishControlsHide.full }}
-						{{^ ishControlsHide.random }}<li class="sg-half"><a href="#" id="sg-size-random">Random</a></li>{{/ ishControlsHide.random }}
-						{{^ ishControlsHide.disco }}<li class="sg-half"><a href="#" class="mode-link" id="sg-size-disco">Disco</a></li>{{/ ishControlsHide.disco }}
-						{{^ ishControlsHide.hay }}<li class="sg-half"><a href="#" class="mode-link" id="sg-size-hay">Hay!</a></li>{{/ ishControlsHide.hay }}
+						{{^ ishControlsHide.s }}<li><a href="#" id="sg-size-s">S</a></li>{{/ ishControlsHide.s }}
+						{{^ ishControlsHide.m }}<li><a href="#" id="sg-size-m">M</a></li>{{/ ishControlsHide.m }}
+						{{^ ishControlsHide.l }}<li><a href="#" id="sg-size-l">L</a></li>{{/ ishControlsHide.l }}
+						{{^ ishControlsHide.full }}<li><a href="#" id="sg-size-full">Full</a></li>{{/ ishControlsHide.full }}
+						{{^ ishControlsHide.random }}<li><a href="#" id="sg-size-random">Random</a></li>{{/ ishControlsHide.random }}
+						{{^ ishControlsHide.disco }}<li><a href="#" class="mode-link" id="sg-size-disco">Disco</a></li>{{/ ishControlsHide.disco }}
+						{{^ ishControlsHide.hay }}<li><a href="#" class="mode-link" id="sg-size-hay">Hay!</a></li>{{/ ishControlsHide.hay }}
 					</ul>
 				</li>
 				{{^ ishControlsHide.mqs }}