ux(): updated graph form styles

public/app/partials/panelgeneral.html

@@ -1,61 +1,42 @@
-<div class="editor-row">
-  <div class="section">
-    <h5>General options</h5>
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item">
-					Title
-				</li>
-				<li>
-					<input type="text" class="input-xlarge tight-form-input" ng-model='ctrl.panel.title'></input>
-				</li>
-				<li class="tight-form-item">
-					Span
-				</li>
-				<li>
-					<select class="input-mini tight-form-input" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
-				</li>
-				<li class="tight-form-item">
-					Height
-				</li>
-				<li>
-					<input type="text" class="input-small tight-form-input" ng-model='ctrl.panel.height'></input>
-				</li>
-				<li class="tight-form-item">
-					<label class="checkbox-label" for="panel.transparent">Transparent</label>
-					<input class="cr1" id="panel.transparent" type="checkbox" ng-model="ctrl.panel.transparent" ng-checked="ctrl.panel.transparent">
-					<label for="panel.transparent" class="cr1"></label>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+<div class="gf-form-group">
+	<div class="gf-form-inline">
+		<div class="gf-form gf-size-max-xxl">
+			<span class="gf-form-label gf-size-sm">Title</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label gf-size-xs">Span</span>
+			<select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
+		</div>
+		<div class="gf-form gf-size-max-lg">
+			<span class="gf-form-label">Height</span>
+			<input type="text" class="gf-form-input" ng-model='ctrl.panel.height' placeholder="100px"></input>
+		</div>
+		<div class="gf-form">
+			<editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox>
 		</div>
 	</div>
-	<div class="section">
-		<h5>Templating options</h5>
-		<div class="tight-form last">
-			<ul class="tight-form-list">
-				<li class="tight-form-item">
-					Repeat Panel
-				</li>
-				<li>
-					<select class="input-small tight-form-input last" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list">
-						<option value=""></option>
-					</select>
-				</li>
-				<li class="tight-form-item">
-					Min span
-				</li>
-				<li>
-					<select class="input-small tight-form-input last" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
-						<option value=""></option>
-					</select>
-				</li>
-			</ul>
-			<div class="clearfix"></div>
+
+	<div class="gf-form-inline">
+		<div class="gf-form gf-size-max-xxl">
+			<span class="gf-form-label gf-size-sm">Repeat Panel</span>
+			<select class="gf-form-input" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list">
+				<option value=""></option>
+			</select>
+		</div>
+		<div class="gf-form">
+			<span class="gf-form-label gf-size-xs">Min span</span>
+			<select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
+				<option value=""></option>
+			</select>
 		</div>
 	</div>
 </div>
 
+<br>
+<br>
+<br>
+
 <panel-links-editor panel="ctrl.panel"></panel-links-editor>
 
 

public/sass/_variables.scss

@@ -127,7 +127,7 @@ $lead-font-size:   1.25rem !default;
 $lead-font-weight: 300 !default;
 
 $headings-margin-bottom: ($spacer / 2) !default;
-$headings-font-family:   "Open Sans" !default;
+$headings-font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
 $headings-font-weight:   400 !default;
 $headings-line-height:   1.1 !default;
 

public/sass/components/_gf-form.scss

@@ -1,4 +1,4 @@
-$gf-form-margin: 4px;
+$gf-form-margin: 0.4rem;
 
 .gf-form {
   margin-top: $gf-form-margin;
@@ -31,14 +31,14 @@ $gf-form-margin: 4px;
   flex-wrap: wrap;
   align-content: flex-start;
 
-  .gf-form {
+  .gf-form-flex {
     flex-grow: 1;
   }
 }
 
 .gf-form-button-row {
-  margin-top: 20px;
-  margin-bottom: 10px;
+  margin-top: $spacer * 2;
+  margin-bottom: $spacer;
 }
 
 .gf-form-label {
@@ -61,6 +61,7 @@ $gf-form-margin: 4px;
   .gf-size-#{$size} { width: $value; }
 
   .gf-size-max-#{$size} {
+    flex-grow: 1;
     max-width: $value;
   }
 }