Merge branch 'master' into talmdal_dev

Conflicts:
	lib/gallery.common.css

1 files changed, 166 insertions, 50 deletions

diff --git a/lib/gallery.common.css b/lib/gallery.common.css
index 12d96d41..2a8eddb2 100644
--- a/lib/gallery.common.css
+++ b/lib/gallery.common.css
@@ -1,12 +1,14 @@
 /**
- * Gallery 3 commonly reused screen styles
+ * Gallery 3 commonly re-used screen styles
  *
  * Sheet organization:
+ *
  *  1)  Text
- *  2)  Dimension and scale
- *  3)  States and interactions
- *  4)  Positioning and order
- *  5)  Containers/widgets
+ *  2)  Forms
+ *  3)  Dimension and scale
+ *  4)  States and interactions
+ *  5)  Positioning and order
+ *  6)  Containers/widgets
  */
 
 /** *******************************************************************
@@ -25,9 +27,133 @@
   text-align: right;
 }
 
+/** *******************************************************************
+ * 2) Forms
+ **********************************************************************/
+
+fieldset {
+  border: 1px solid #ccc;
+  padding: .8em 1em;
+}
+
+#g-banner fieldset,
+#g-sidebar fieldset {
+  border: none;
+  padding: 0;
+}
+
+legend {
+  font-weight: bold;
+  margin-left: .8em;
+}
+
+#g-banner legend,
+#g-sidebar legend,
+#g-content #g-search-form legend,
+input[type="hidden"] {
+  display: none;
+}
+
+input.textbox,
+input[type="text"],
+input[type="password"] {
+  width: 50%;
+}
+
+textarea {
+  width: 100%;
+  height: 12em;
+}
+
+input[type="text"],
+input[type="password"],
+textarea {
+  border: 1px solid #e8e8e8;
+  border-top-color: #ccc;
+  border-left-color: #ccc;
+  color: #333;
+}
+
+input:focus,
+input.textbox:focus,
+input[type=text]:focus,
+textarea:focus,
+option:focus {
+  background-color: #ffc;
+  color: #000;
+}
+
+/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+form li {
+  margin: 0;
+  padding: .3em 0;
+}
+
+form ul ul {
+  clear: both;
+}
+
+form ul ul li {
+  float: left;
+}
+
+input,
+select,
+textarea {
+  display: block;
+  clear: both;
+  padding: .2em;
+}
+
+input[type="submit"],
+input[type="reset"] {
+  display: inline;
+  clear: none;
+  float: left;
+}
+
+/* Short forms ~~~~~~~~~~~~~~~~~~~~~~~ */
+
+.g-short-form label {
+  display: none;
+}
+
+.g-short-form fieldset {
+  border: none;
+  padding: 0;
+}
+
+.g-short-form li {
+  float: left;
+  margin: 0 !important;
+  padding: .4em 0;
+}
+
+.g-short-form .textbox,
+.g-short-form input[type=text] {
+  color: #666;
+  padding: .3em .6em;
+}
+
+.g-short-form .textbox.g-error {
+  border: 1px solid #f00;
+  color: #f00;
+  padding-left: 24px;
+}
+
+.g-short-form .g-cancel {
+  display: block;
+  padding: .2em .8em;
+}
+
+#g-sidebar .g-short-form li {
+  padding-left: 0;
+  padding-right: 0;
+}
 
 /** *******************************************************************
- * 2) Dimension and scale
+ * 3) Dimension and scale
  **********************************************************************/
 
 .g-narrow {
@@ -39,7 +165,7 @@
 }
 
 /** *******************************************************************
- * 3) States and interactions
+ * 4) States and interactions
  **********************************************************************/
 
 .g-active,
@@ -77,6 +203,22 @@ form li.g-warning {
   padding: .3em .8em .3em 1em;
 }
 
+form.g-error input[type="text"],
+li.g-error input[type="text"],
+form.g-error input[type="password"],
+li.g-error input[type="password"],
+form.g-error input[type="checkbox"],
+li.g-error input[type="checkbox"],
+form.g-error input[type="radio"],
+li.g-error input[type="radio"],
+form.g-error textarea,
+li.g-error textarea,
+form.g-error select,
+li.g-error select {
+  border: 2px solid #f00;
+  margin-bottom: .2em;
+}
+
 .g-error,
 .g-denied,
 tr.g-error td.g-error {
@@ -148,7 +290,7 @@ form .g-error {
 }
 
 /** *******************************************************************
- * 4) Positioning and order
+ * 5) Positioning and order
  **********************************************************************/
 
 .g-left {
@@ -178,7 +320,7 @@ form .g-error {
 }
 
 /** *******************************************************************
- * 5) Containers/widgets
+ * 6) Containers/widgets
  **********************************************************************/
 
 /* Generic block container ~~~~~~~~~~~~~~~ */
@@ -215,18 +357,24 @@ form .g-error {
   display: inline-block;
 }
 
-/* Status messages ~~~~~~~~~~~~~~~~~~~~~~~ */
+/* Status and validation messages ~~~~ */
+
+.g-message {
+  font-size: .8em;
+}
 
 .g-message-block {
   border: 1px solid #ccc;
+  width: 100%;
 }
 
 #g-action-status {
   margin-bottom: 1em;
-  width: 100% !important;
 }
 
-#g-action-status li {
+#g-action-status li,
+p#g-action-status,
+div#g-action-status {
   padding-top: .4em;
   padding-bottom: .3em;
 }
@@ -296,11 +444,6 @@ form .g-error {
   width: 40%;
 }
 
-.g-inline * {
-  float: left;
-  margin-right: .4em;
-}
-
 /* Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #g-dialog {
@@ -308,14 +451,12 @@ form .g-error {
 }
 
 #g-dialog .g-narrow {
-  margin: 0 auto;
-  width: 270px;
+  width: 280px;
 }
 
-#g-dialog fieldset {
+#g-dialog form fieldset {
   border: none;
-  padding: 0 !important;
-  width: 99%;
+  padding: 0;
 }
 
 #g-dialog legend {
@@ -339,36 +480,11 @@ form .g-error {
   margin: .4em 1em;
 }
 
-/* Inline layout (forms, lists) ~~~~~~~~~~ */
-
-.g-short-form label {
-  display: none;
-}
-
-.g-short-form fieldset {
-  border: none;
-  padding: 0 !important;
-}
+/* Inline layout  ~~~~~~~~~~ */
 
-.g-short-form li {
+.g-inline * {
   float: left;
-  padding: .4em 0;
-}
-
-.g-short-form input[type="text"] {
-  color: #666;
-  padding: .3em .6em;
-  width: auto;
-}
-
-.g-short-form .g-cancel {
-  display: block;
-  padding: .2em .8em;
-}
-
-#g-sidebar .g-short-form li {
-  padding-left: 0;
-  padding-right: 0;
+  margin-right: .4em;
 }
 
 /* Right to left styles ~~~~~~~~~~~~~~~~~~~~ */