From 02984bc9cb78fedcb723ab42a62e8d0dc803b81b Mon Sep 17 00:00:00 2001
From: Brian Federle <brian.federle@citrix.com>
Date: Tue, 1 Oct 2013 12:05:39 -0700
Subject: [PATCH] Style createForm

---
 ui/scripts/ui/dialog.js          |  2 +-
 ui/stylesheets/cloudstack.scss   | 12 ++-----
 ui/stylesheets/csui/_dialog.scss | 15 ++++++++-
 ui/stylesheets/csui/_form.scss   | 57 +++++++++++++++++++++++++++++---
 4 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index 7bd203414b6..bfd0d93ee53 100644
--- a/ui/scripts/ui/dialog.js
+++ b/ui/scripts/ui/dialog.js
@@ -76,7 +76,7 @@
                     dialogClass: 'create-form',
                     closeOnEscape: false,
                     draggable: false,
-                    width: 400,
+                    width: 800,
                     title: _l(args.form.title),
                     open: function() {
                         if (args.form.preFilter) {
diff --git a/ui/stylesheets/cloudstack.scss b/ui/stylesheets/cloudstack.scss
index ef197b7fb34..c87a57e1542 100644
--- a/ui/stylesheets/cloudstack.scss
+++ b/ui/stylesheets/cloudstack.scss
@@ -251,16 +251,8 @@ body {
     }
 
     .section-select, .filters {
-        @include span-columns(3);
+        @include span-columns(4);
 
         margin: 8px;
-
-        label {
-            top: 0px;
-            margin-right: 8px;
-        }
-
-        select {
-        }
     }
-}
\ No newline at end of file
+}
diff --git a/ui/stylesheets/csui/_dialog.scss b/ui/stylesheets/csui/_dialog.scss
index f6c37dc743e..d376ba40db5 100644
--- a/ui/stylesheets/csui/_dialog.scss
+++ b/ui/stylesheets/csui/_dialog.scss
@@ -27,7 +27,8 @@
 
         width: 100%;
         background-color: white;
-        padding: 10px;
+        padding-top: 10px;
+        padding-bottom: 20px;
     }
 
     .ui-dialog-content {
@@ -42,6 +43,18 @@
     .ui-dialog-titlebar-close {
         float: right;
     }
+
+    &.create-form {
+        max-height: 900px;
+        overflow: hidden;
+
+        @include csui-form;
+        
+        form {
+            max-height: 700px;
+            overflow: auto;
+        }
+    }
 }
 
 // Defaults
diff --git a/ui/stylesheets/csui/_form.scss b/ui/stylesheets/csui/_form.scss
index 67891d619d3..94d088186d9 100644
--- a/ui/stylesheets/csui/_form.scss
+++ b/ui/stylesheets/csui/_form.scss
@@ -30,8 +30,10 @@
     font-size: 14px;
     padding-right: 25px;
     padding-left: 10px;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 @mixin csui-dropdown-dark {
@@ -51,8 +53,6 @@
 
 @mixin csui-label {
     font-size: 14px;
-    position: relative;
-    top: 7px;
 }
 
 @mixin csui-textfield {
@@ -73,8 +73,55 @@
     }
 }
 
+@mixin csui-checkbox {
+    margin-top: 25px;
+    margin-bottom: 10px;
+}
+
+@mixin csui-form {
+    .message {
+        @include row;
+    }
+    
+    form {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        border-bottom: 1px solid #ccc;
+        border-top: 1px solid #ccc;
+    }
+
+    .form-item {
+        @include row;
+        @include span-columns(12);
+        
+        display: inline-block; // Needed for legacy code in JS
+        margin-top: 5px;
+        margin-bottom: 5px;
+
+        label {
+            @include span-columns(3);
+            @include shift(0.5);
+
+            text-align: right;
+            position: relative;
+            top: 20px;
+        }
+
+        input, select, .dynamic-input {
+            @include span-columns(7);
+            @include shift(0.2);
+        }
+    }
+
+    .dynamic-input {
+        display: inline-block;
+        border: 1px solid gray;
+        background: #ccc;
+    }
+}
 
 // Defaults
 label { @include csui-label; }
 select { @include csui-dropdown; }
-input[type=text], input[type=password] { @include csui-textfield; }
\ No newline at end of file
+input[type=text], input[type=password] { @include csui-textfield; }
+input[type=checkbox], input[type=radio] { @include csui-checkbox; }
\ No newline at end of file