ux(): fixed invite box

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

@@ -4,56 +4,44 @@
 		<i class="fa fa-remove"></i>
 	</a>
 
-	<h1>
-		Invite Users
-	</h1>
-
-	<div class="modal-tagline">
-		Send invite or add existing Grafana users to the organization
-		<span class="highlight-word">{{contextSrv.user.orgName}}</span>
-	</div>
-
-	<br>
-	<br>
+	<div class="p-a-2">
+		<h1>
+			Invite Users
+		</h1>
+
+		<div class="modal-tagline">
+			Send invite or add existing Grafana users to the organization
+			<span class="highlight-word">{{contextSrv.user.orgName}}</span>
+		</div>
 
-	<form name="inviteForm">
-		<div style="display: inline-block">
-			<div class="norm-form-container">
-				<div class="norm-form" ng-repeat="invite in invites">
-					<ul class="norm-form-list">
-						<li class="norm-form-item">
-							Email or Username
-						</li>
-						<li>
-							<input type="text" ng-model="invite.loginOrEmail" required class="input-large norm-form-input" placeholder="email@test.com">
-						</li>
-						<li class="norm-form-item">
-							Name
-						</li>
-						<li>
-							<input type="text" ng-model="invite.name" class="input-large norm-form-input" placeholder="name (optional)">
-						</li>
+		<br>
+		<br>
 
-						<li class="norm-form-item">
-							Role
-						</li>
-						<li>
-							<select ng-model="invite.role" class="input-small norm-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
-							</select>
-						</li>
-						<li class="norm-form-item last" ng-show="$index > 0">
-							<a class="pointer" tabindex="1" ng-click="removeInvite(invite)">
-								<i class="fa fa-remove"></i>
-							</a>
-						</li>
-						<div class="clearfix"></div>
-					</ul>
+		<form name="inviteForm">
+			<div class="gf-form-inline" ng-repeat="invite in invites">
+				<div class="gf-form gf-size-max-xxl">
+					<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">
+					<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">
+					<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>
+				</div>
+				<div class="gf-form gf-size-auto">
+					<a class="gf-form-label pointer" tabindex="1" ng-click="removeInvite(invite)">
+						<i class="fa fa-remove"></i>
+					</a>
 				</div>
 			</div>
 
 			<div style="margin-top: 20px; text-align: left;">
 				<a class="btn btn-inverse" ng-click="addInvite()">+ Invite another</a>
-				<div class="form-inline" style="margin-top: 20px">
+				<div class="gf-form" style="margin-top: 20px">
 					<editor-checkbox text="Skip sending invite email" model="options.skipEmails" change="targetBlur()"></editor-checkbox>
 				</div>
 			</div>
@@ -61,10 +49,7 @@
 			<div class="" style="margin-top: 30px; margin-bottom: 20px;">
 				<button type="submit" class="btn btn-success" ng-click="sendInvites();">Invite Users</button>
 				<a class="btn-text" ng-click="dismiss()">Cancel</a>
-
 			</div>
-		</div>
-	</form>
+		</form>
+	</div>
 </div>
-
-

public/sass/_grafana.scss

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

public/sass/_variables.dark.scss

@@ -172,18 +172,6 @@ $dropdownLinkBackgroundHover:   $blue-dark;
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
-
-// Z-index master list
-// -------------------------
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
-$zindexDropdown:          1000;
-$zindexPopover:           1010;
-$zindexTooltip:           1020;
-$zindexFixedNavbar:       1030;
-$zindexModalBackdrop:     1040;
-$zindexModal:             1050;
-
 // -------------------------
 $placeholderText:         darken($text-color, 25%);
 

public/sass/_variables.light.scss

@@ -193,18 +193,6 @@ $dropdownLinkBackgroundHover:   $blue;
 // --------------------------------------------------
 
 
-// Z-index master list
-// -------------------------
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
-$zindexDropdown:          1000;
-$zindexPopover:           1010;
-$zindexTooltip:           1030;
-$zindexFixedNavbar:       1030;
-$zindexModalBackdrop:     1040;
-$zindexModal:             1050;
-
-
 // Input placeholder text color
 // -------------------------
 $placeholderText:         $gray-light;

public/sass/_variables.scss

@@ -171,7 +171,7 @@ $table-sm-cell-padding:         .3rem !default;
 
 // Forms
 $input-padding-x:                .75rem !default;
-$input-padding-y:                .5rem !default;
+$input-padding-y:                .6rem !default;
 $input-line-height:              1.25rem !default;
 
 $input-border-radius:            $border-radius !default;
@@ -196,3 +196,16 @@ $cursor-disabled:                not-allowed !default;
 $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
 $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
 $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
+
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+$zindex-dropdown:          1000;
+$zindex-popover:           1010;
+$zindex-tooltip:           1020;
+$zindex-navbar-fixed:      1030;
+$zindex-modal-backdrop:    1040;
+$zindex-modal:             1050;
+
+

public/sass/components/_dropdown.scss

@@ -42,7 +42,7 @@
   position: absolute;
   top: 100%;
   left: 0;
-  z-index: $zindexDropdown;
+  z-index: $zindex-dropdown;
   display: none; // none by default, but block on "open" of the menu
   float: left;
   min-width: 140px;
@@ -139,7 +139,7 @@
   right: 0;
   bottom: 0;
   top: 0;
-  z-index: $zindexDropdown - 10;
+  z-index: $zindex-dropdown - 10;
 }
 
 // Right aligned dropdowns
@@ -239,5 +239,5 @@
 // ---------
 .typeahead {
   z-index: 1051;
-  margin-top: 2px; // give it some space to breathe  
+  margin-top: 2px; // give it some space to breathe
 }

public/sass/components/_modals.scss

@@ -9,7 +9,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: $zindexModalBackdrop;
+  z-index: $zindex-modal-backdrop;
   background-color: $black;
 }
 
@@ -21,7 +21,7 @@
 // Base modal
 .modal {
   position: fixed;
-  z-index: $zindexModal;
+  z-index: $zindex-modal;
   width: 100%;
 	background-color: $panel-bg;
   @include box-shadow(0 3px 7px rgba(0,0,0,0.3));

public/sass/components/_popovers.scss

@@ -7,7 +7,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: $zindexPopover;
+  z-index: $zindex-popover;
   display: none;
   max-width: 480px;
   padding: 1px;

public/sass/components/_tooltip.scss

@@ -6,7 +6,7 @@
 // Base class
 .tooltip {
   position: absolute;
-  z-index: $zindexTooltip;
+  z-index: $zindex-tooltip;
   display: block;
   visibility: visible;
   font-size: 11px;
@@ -26,7 +26,7 @@
   color: $tooltipColor;
   text-align: center;
   text-decoration: none;
-  background-color: $tooltipBackground;  
+  background-color: $tooltipBackground;
 }
 
 // Arrows

public/sass/utils/_spacings.scss

@@ -0,0 +1,39 @@
+// Margin and Padding
+
+.m-x-auto {
+  margin-right: auto !important;
+  margin-left:  auto !important;
+}
+
+@each $prop, $abbrev in (margin: m, padding: p) {
+  @each $size, $lengths in $spacers {
+    $length-x:   map-get($lengths, x);
+    $length-y:   map-get($lengths, y);
+
+    .#{$abbrev}-a-#{$size} { #{$prop}:        $length-y $length-x !important; } // a = All sides
+    .#{$abbrev}-t-#{$size} { #{$prop}-top:    $length-y !important; }
+    .#{$abbrev}-r-#{$size} { #{$prop}-right:  $length-x !important; }
+    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
+    .#{$abbrev}-l-#{$size} { #{$prop}-left:   $length-x !important; }
+
+    // Axes
+    .#{$abbrev}-x-#{$size} {
+      #{$prop}-right:  $length-x !important;
+      #{$prop}-left:   $length-x !important;
+    }
+    .#{$abbrev}-y-#{$size} {
+      #{$prop}-top:    $length-y !important;
+      #{$prop}-bottom: $length-y !important;
+    }
+  }
+}
+
+// Positioning
+
+.pos-f-t {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-navbar-fixed;
+}