ux(): updated some forms with the new flexbox based classes

public/app/features/datasources/partials/http_settings.html

@@ -8,7 +8,7 @@
 	</div>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-sx">
+		<span class="gf-form-label gf-size-xs">
 			Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
 		</span>
 		<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>

public/app/features/profile/partials/profile.html

@@ -10,25 +10,19 @@
 		<h3>Preferences</h3>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-s">Name</span>
-			<input class="gf-form-input gf-size-xxl" type="text" required ng-model="user.name" >
+			<span class="gf-form-label gf-size-xs">Name</span>
+			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" >
 		</div>
-		<br>
-
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-s">Email</span>
-			<input class="gf-form-input gf-size-xxl" type="email" required ng-model="user.email">
+			<span class="gf-form-label gf-size-xs">Email</span>
+			<input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email">
 		</div>
-		<br>
-
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-s">Username</span>
-			<input class="gf-form-input gf-size-xxl" type="text" required ng-model="user.login">
+			<span class="gf-form-label gf-size-xs">Username</span>
+			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login">
 		</div>
-		<br>
-
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-s">UI Theme</span>
+			<span class="gf-form-label gf-size-xs">UI Theme</span>
 			<select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
 		</div>
 

public/sass/components/_gf-form.scss

@@ -67,6 +67,7 @@ $gf-form-margin: 4px;
     width: 100%;
     margin-right: $gf-form-margin;
   }
+  &.gf-size-auto { width: auto; }
 }
 
 input[type=checkbox].gf-form-checkbox {
@@ -80,6 +81,7 @@ select.gf-form-input {
   display: block;
   width: 100%;
   margin-right: $gf-form-margin;
+  &.gf-size-auto { width: auto; }
 }
 
 @each $size, $value in $form-sizes {
@@ -90,7 +92,6 @@ select.gf-form-input {
   }
 }
 
-.gf-size-auto { width: auto; }
 .gf-size-max { width: 100%; }
-
+.gf-size-auto { width: auto; }