ux(): completed gf-size class rename

public/app/features/dashboard/timepicker/dropdown.html

@@ -4,7 +4,7 @@
 
 		<label class="small">From:</label>
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.from" input-datetime>
 			</div>
 			<div class="gf-form">
@@ -21,7 +21,7 @@
 
 		<label class="small">To:</label>
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.to" input-datetime>
 			</div>
 			<div class="gf-form">
@@ -37,7 +37,7 @@
 
 		<label class="small">Refreshing every:</label>
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
 			</div>
 			<div class="gf-form">

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

@@ -14,7 +14,7 @@
 		<div class="gf-form-group">
 			<div class="gf-form">
 				<span class="gf-form-label width-7">Name</span>
-				<input class="gf-form-input gf-size-max-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
+				<input class="gf-form-input max-width-21" type="text" ng-model="current.name" placeholder="My data source name" required>
 				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
 			</div>
 

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

@@ -5,7 +5,7 @@
 
 	<div class="gf-form">
 		<span class="gf-form-label width-7">Url</span>
-		<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
+		<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
 	</div>
 
 	<div class="gf-form">
@@ -27,14 +27,14 @@
 		<span class="gf-form-label width-7">
 			User
 		</span>
-		<input class="gf-form-input gf-size-max-xxl" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
+		<input class="gf-form-input max-width-21" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
 	</div>
 
 	<div class="gf-form" ng-if="current.basicAuth">
 		<span class="gf-form-label width-7">
 			Passord
 		</span>
-		<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
+		<input class="gf-form-input max-width-21" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
 	</div>
 </div>
 

public/app/features/org/partials/invite.html

@@ -19,15 +19,15 @@
 
 		<form name="inviteForm">
 			<div class="gf-form-inline" ng-repeat="invite in invites">
-				<div class="gf-form gf-size-max-xxl">
+				<div class="gf-form max-width-21">
 					<span class="gf-form-label">Email or Username</span>
 					<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
 				</div>
-				<div class="gf-form gf-size-max-xl">
+				<div class="gf-form max-width-14">
 					<span class="gf-form-label">Name</span>
 					<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
 				</div>
-				<div class="gf-form gf-size-max-lg">
+				<div class="gf-form max-width-10">
 					<span class="gf-form-label">Role</span>
 					<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
 					</select>

public/app/features/org/partials/orgApiKeys.html

@@ -1,4 +1,4 @@
-<navbar icon="icon-gf icon-gf-users" title="Organization">
+<navbar icon="icon-gf icon-gf-users" title="Organization" title-url="org">
 </navbar>
 
 <div class="page-container">
@@ -9,7 +9,7 @@
 	<h3 class="page-heading">Add new</h3>
 	<form name="addTokenForm" class="gf-form-group">
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxl">
+			<div class="gf-form max-width-21">
 				<span class="gf-form-label">Add a key</span>
 				<input type="text" class="gf-form-input" ng-model='token.name' placeholder="Name"></input>
 			</div>

public/app/features/org/partials/orgDetails.html

@@ -9,8 +9,8 @@
 	<h3 class="page-heading">General</h3>
 	<form name="orgForm" class="gf-form-group">
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
-				<span class="gf-form-label gf-size-xs">Name</span>
+			<div class="gf-form max-width-28">
+				<span class="gf-form-label width-6">Name</span>
 				<input class="gf-form-input" type="text" required ng-model="org.name">
 			</div>
 			<div class="gf-form">
@@ -24,33 +24,33 @@
 
 	<form name="addressForm" class="gf-form-group">
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<span class="gf-form-label width-7">Address1</span>
 				<input class="gf-form-input" type="text" ng-model="address.address1">
 			</div>
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<span class="gf-form-label width-7">Address2</span>
 				<input class="gf-form-input" type="text" ng-model="address.address2">
 			</div>
 		</div>
 
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<span class="gf-form-label width-7">City</span>
 				<input class="gf-form-input" type="text" ng-model="address.city">
 			</div>
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<span class="gf-form-label width-7">Postal code</span>
 				<input class="gf-form-input" type="text" ng-model="address.zipCode">
 			</div>
 		</div>
 
 		<div class="gf-form-inline">
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<span class="gf-form-label width-7">State</span>
 				<input class="gf-form-input" type="text" ng-model="address.state">
 			</div>
-			<div class="gf-form gf-size-max-xxxl">
+			<div class="gf-form max-width-28">
 				<span class="gf-form-label width-7">Country</span>
 				<input class="gf-form-input" type="text" ng-model="address.country">
 			</div>

public/app/features/org/partials/orgUsers.html

@@ -1,4 +1,4 @@
-<navbar icon="icon-gf icon-gf-users" title="Organization Users">
+<navbar icon="icon-gf icon-gf-users" title="Organization Users" title-url="org">
 </navbar>
 
 <div class="page-container">

public/app/features/playlist/partials/playlist.html

@@ -10,16 +10,16 @@
 	<div class="gf-form-group">
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Name</span>
-			<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input gf-size-max-xxl">
+			<input type="text" required ng-model="ctrl.playlist.name" class="gf-form-input max-width-21">
 		</div>
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Interval</span>
-			<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input gf-size-max-xxl">
+			<input type="text" required ng-model="ctrl.playlist.interval" placeholder="5m" class="gf-form-input max-width-21">
 		</div>
 	</div>
 
 	<div class="gf-form-group">
-		<div class="gf-size-max-xxxl">
+		<div class="max-width-28">
 			<h5 class="page-headering">Add dashboards</h5>
 			<div style="">
 				<playlist-search class="playlist-search-container" search-started="ctrl.searchStarted(promise)"></playlist-search>

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

@@ -8,18 +8,18 @@
 
 	<form name="userForm" class="gf-form-group">
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-lg">Old Password</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="command.oldPassword">
+			<span class="gf-form-label width-10">Old Password</span>
+			<input class="gf-form-input max-width-21" type="text" required ng-model="command.oldPassword">
 		</div>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-lg">New Password</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4"  ng-model="command.newPassword">
+			<span class="gf-form-label width-10">New Password</span>
+			<input class="gf-form-input max-width-21" type="text" required ng-minlength="4"  ng-model="command.newPassword">
 		</div>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-lg">Confirm Password</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4"  ng-model="command.confirmNew">
+			<span class="gf-form-label width-10">Confirm Password</span>
+			<input class="gf-form-input max-width-21" type="text" required ng-minlength="4"  ng-model="command.confirmNew">
 		</div>
 
 		<div class="gf-form-button-row">

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

@@ -11,15 +11,15 @@
 
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Name</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.name" >
+			<input class="gf-form-input max-width-21" type="text" required ng-model="user.name" >
 		</div>
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Email</span>
-			<input class="gf-form-input gf-size-max-xxl" type="email" required ng-model="user.email">
+			<input class="gf-form-input max-width-21" type="email" required ng-model="user.email">
 		</div>
 		<div class="gf-form">
 			<span class="gf-form-label width-7">Username</span>
-			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="user.login">
+			<input class="gf-form-input max-width-21" type="text" required ng-model="user.login">
 		</div>
 		<div class="gf-form">
 			<span class="gf-form-label width-7">UI Theme</span>

public/app/partials/login.html

@@ -20,16 +20,16 @@
       <form name="loginForm" class="login-form gf-form-group">
 				<div class="gf-form" ng-if="loginMode">
 					<span class="gf-form-label width-7">User</span>
-					<input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}>
+					<input type="text" name="username" class="gf-form-input max-width-14" required ng-model='formModel.user' placeholder={{loginHint}}>
 				</div>
 				<div class="gf-form" ng-if="loginMode">
 					<span class="gf-form-label width-7">Password</span>
-					<input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
+					<input type="password" name="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password">
 				</div>
 
 				<div class="gf-form" ng-if="!loginMode">
 						<span class="gf-form-label width-7">Email</span>
-						<input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email">
+						<input type="email" class="gf-form-input max-width-14" required ng-model='formModel.email' placeholder="email">
 				</div>
 
 				<div class="gf-form-button-row">

public/app/partials/panelgeneral.html

@@ -1,29 +1,29 @@
 <div class="gf-form-group">
 	<div class="gf-form-inline">
-		<div class="gf-form gf-size-max-xxl">
-			<span class="gf-form-label width-7">Title</span>
+		<div class="gf-form max-width-21">
+			<span class="gf-form-label width-8">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>
+			<span class="gf-form-label width-6">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-xxl">
-			<span class="gf-form-label width-7">Height</span>
-			<input type="text" class="gf-form-input gf-size-max-xs" ng-model='ctrl.panel.height' placeholder="100px"></input>
+		<div class="gf-form max-width-21">
+			<span class="gf-form-label width-8">Height</span>
+			<input type="text" class="gf-form-input max-width-6" ng-model='ctrl.panel.height' placeholder="100px"></input>
 			<editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox>
 		</div>
 	</div>
 
 	<div class="gf-form-inline">
-		<div class="gf-form gf-size-max-xxl">
-			<span class="gf-form-label width-7">Repeat Panel</span>
+		<div class="gf-form max-width-21">
+			<span class="gf-form-label width-8">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>
+			<span class="gf-form-label width-6">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>

public/app/partials/signup_invited.html

@@ -22,19 +22,19 @@
 			<form name="inviteForm" class="login-form gf-form-group">
 				<div class="gf-form">
 					<span class="gf-form-label width-7">Email</span>
-					<input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email">
+					<input type="email" name="email" class="gf-form-input max-width-21" required ng-model='formModel.email' placeholder="Email">
 				</div>
 				<div class="gf-form">
 					<span class="gf-form-label width-7">Name</span>
-					<input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)">
+					<input type="text" name="name" class="gf-form-input max-width-21" ng-model='formModel.name' placeholder="Name (optional)">
 				</div>
 				<div class="gf-form">
 					<span class="gf-form-label width-7">Username</span>
-					<input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username">
+					<input type="text" name="username" class="gf-form-input max-width-21" required ng-model='formModel.username' placeholder="Username">
 				</div>
 				<div class="gf-form">
 					<span class="gf-form-label width-7">Password</span>
-					<input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
+					<input type="password" name="password" class="gf-form-input max-width-21" required ng-model="formModel.password" id="inputPassword" placeholder="password">
 				</div>
 
 				<div style="margin-left: 7.5rem; width: 254px;">

public/app/partials/signup_step2.html

@@ -31,28 +31,28 @@
 			<form name="signUpForm" class="login-form gf-form-group">
 
 				<div class="gf-form" ng-if="verifyEmailEnabled">
-					<span class="gf-form-label gf-size-md">
+					<span class="gf-form-label width-9">
 						Email code<tip>Email verification code (sent to your email)</tip>
 					</span>
-					<input type="text" class="gf-form-input gf-size-max-xl" ng-model="formModel.code" required></input>
+					<input type="text" class="gf-form-input max-width-14" ng-model="formModel.code" required></input>
 				</div>
 
 				<div class="gf-form" ng-if="!autoAssignOrg">
-					<span class="gf-form-label gf-size-md">Org. name</span>
-					<input type="text" name="orgName" class="gf-form-input gf-size-max-xl" ng-model='formModel.orgName' placeholder="Name your organization">
+					<span class="gf-form-label width-9">Org. name</span>
+					<input type="text" name="orgName" class="gf-form-input max-width-14" ng-model='formModel.orgName' placeholder="Name your organization">
 				</div>
 
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-md">Your name</span>
-					<input type="text" name="name" class="gf-form-input gf-size-max-xl" ng-model='formModel.name' placeholder="(optional)">
+					<span class="gf-form-label width-9">Your name</span>
+					<input type="text" name="name" class="gf-form-input max-width-14" ng-model='formModel.name' placeholder="(optional)">
 				</div>
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-md">Username</span>
-					<input type="text" class="gf-form-input gf-size-max-xl" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
+					<span class="gf-form-label width-9">Username</span>
+					<input type="text" class="gf-form-input max-width-14" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
 				</div>
 				<div class="gf-form">
-					<span class="gf-form-label gf-size-md">Password</span>
-					<input type="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
+					<span class="gf-form-label width-9">Password</span>
+					<input type="password" class="gf-form-input max-width-14" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
 				</div>
 
 				<div style="margin-left: 7.5rem; width: 254px;">

public/app/plugins/datasource/elasticsearch/partials/config.html

@@ -5,24 +5,24 @@
 
 <div class="gf-form-group">
 	<div class="gf-form-inline">
-		<div class="gf-form gf-size-max-xxxl">
-			<span class="gf-form-label gf-size-md">Index name</span>
+		<div class="gf-form max-width-28">
+			<span class="gf-form-label width-9">Index name</span>
 			<input class="gf-form-input" type="text" ng-model='ctrl.current.database' placeholder="" required></input>
 		</div>
 
-		<div class="gf-form gf-size-xl">
-			<span class="gf-form-label gf-size-md">Pattern</span>
+		<div class="gf-form width-14">
+			<span class="gf-form-label width-9">Pattern</span>
 			<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
 		</div>
 	</div>
 
-	<div class="gf-form gf-size-max-xxxl">
-		<span class="gf-form-label gf-size-md">Time field name</span>
+	<div class="gf-form max-width-28">
+		<span class="gf-form-label width-9">Time field name</span>
 		<input class="gf-form-input" type="text"  ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
 	</div>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-md">Version</span>
+		<span class="gf-form-label width-9">Version</span>
 		<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
 	</div>
 
@@ -32,6 +32,6 @@
 <div class="gf-form-group">
 	<div class="gf-form">
 		<span class="gf-form-label">Group by time interval</span>
-		<input class="gf-form-input gf-size-max-md" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
+		<input class="gf-form-input max-width-9" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
 	</div>
 </div>

public/app/plugins/datasource/influxdb/partials/config.html

@@ -24,9 +24,9 @@
 </div>
 
 <div class="gf-form-group">
-	<div class="gf-form gf-size-max-xxl">
+	<div class="gf-form max-width-21">
 		<span class="gf-form-label">Default group by time</span>
-		<input type="text" class="gf-form-input gf-size-xs" ng-model="ctrl.current.jsonData.timeInterval"
+		<input type="text" class="gf-form-input width-6" ng-model="ctrl.current.jsonData.timeInterval"
 		spellcheck='false' placeholder="example: >10s"></input>
 		<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >10s'" data-placement="right"></i>
 	</div>

public/sass/_grafana.scss

@@ -22,6 +22,7 @@
 @import "utils/validation";
 @import "utils/angular";
 @import "utils/spacings";
+@import "utils/widths";
 
 // LAYOUTS
 @import "layout/page";

public/sass/_variables.scss

@@ -77,17 +77,6 @@ $grid-gutter-width: 30px !default;
 
 $enable-flex: false;
 
-$form-sizes: (
-  xs: 5.7rem,
-  sm: 7rem,
-  md: 8.5rem,
-  lg: 10rem,
-  xl: 14rem,
-  xxl: 21rem,
-  xxxl: 28rem
-) !default;
-
-
 // Typography
 // -------------------------
 

public/sass/components/_gf-form.scss

@@ -57,18 +57,6 @@ $gf-form-margin: 0.2rem;
   flex-shrink: 0;
 }
 
-@each $size, $value in $form-sizes {
-  .gf-size-#{$size} { width: $value; }
-
-  .gf-size-max-#{$size} {
-    flex-grow: 1;
-    max-width: $value;
-  }
-}
-
-.gf-size-max { width: 100%; }
-.gf-size-auto { width: auto; }
-
 .gf-form-input {
   display: block;
   width: 100%;

public/sass/utils/_spacings.scss

@@ -28,19 +28,6 @@
   }
 }
 
-// widths
-@for $i from 1 through 30 {
-  .width-#{$i} {
-    width: ($spacer * $i) - $gf-form-margin;
-  }
-}
-
-@for $i from 1 through 30 {
-  .max-width-#{$i} {
-    max-width: ($spacer * $i) - $gf-form-margin;
-    flex-grow: 1;
-  }
-}
 
 // Positioning
 

public/sass/utils/_widths.scss

@@ -0,0 +1,19 @@
+
+
+.max-width { width: 100%; }
+.width-auto { width: auto; }
+
+// widths
+@for $i from 1 through 30 {
+  .width-#{$i} {
+    width: ($spacer * $i) - $gf-form-margin;
+  }
+}
+
+@for $i from 1 through 30 {
+  .max-width-#{$i} {
+    max-width: ($spacer * $i) - $gf-form-margin;
+    flex-grow: 1;
+  }
+}
+