Move basic form styles from wind themes to gallery.common.css.

1 files changed, 155 insertions, 48 deletions

diff --git a/lib/gallery.common.css b/lib/gallery.common.css
index 939aa2f6..4f0517db 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,135 @@
   text-align: right;
 }
 
+/** *******************************************************************
+ * 2) Forms
+ **********************************************************************/
+
+#g-sidebar form {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+fieldset {
+  border: 1px solid #ccc;
+  padding: .8em 1em !important;
+}
+
+#g-banner fieldset,
+#g-sidebar fieldset {
+  border: none;
+}
+
+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[type="text"],
+input[type="password"] {
+  width: 50%;
+}
+
+input[type="text"],
+input[type="password"],
+textarea {
+  border: 1px solid #e8e8e8;
+  border-top-color: #ccc;
+  border-left-color: #ccc;
+  color: #333;
+}
+
+textarea {
+  width: 100%;
+  height: 12em;
+}
+
+input:focus,
+input.textbox:focus,
+input[type=text]:focus,
+textarea:focus,
+option:focus {
+  background-color: #ffc;
+  color: #000;
+}
+
+/* Form layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
+
+form li {
+  margin: 0 !important;
+  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;
+  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 +167,7 @@
 }
 
 /** *******************************************************************
- * 3) States and interactions
+ * 4) States and interactions
  **********************************************************************/
 
 .g-active,
@@ -77,6 +205,21 @@ 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 red;
+}
+
 .g-error, 
 .g-denied,
 tr.g-error td.g-error {
@@ -148,7 +291,7 @@ form .g-error {
 }
 
 /** *******************************************************************
- * 4) Positioning and order
+ * 5) Positioning and order
  **********************************************************************/
 
 .g-left {
@@ -178,7 +321,7 @@ form .g-error {
 }
 
 /** *******************************************************************
- * 5) Containers/widgets
+ * 6) Containers/widgets
  **********************************************************************/
 
 /* Generic block container ~~~~~~~~~~~~~~~ */
@@ -298,11 +441,6 @@ div#g-action-status {
   width: 40%;
 }
 
-.g-inline * {
-  float: left;
-  margin-right: .4em;
-}
-
 /* Dialogs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
 #g-dialog {
@@ -341,42 +479,11 @@ div#g-action-status {
   margin: .4em 1em;
 }
 
-/* Inline layout (forms, lists) ~~~~~~~~~~ */
-
-.g-short-form label {
-  display: none;
-}
+/* Inline layout  ~~~~~~~~~~ */
 
-.g-short-form fieldset {
-  border: none;
-  padding: 0 !important;
-}
-
-.g-short-form li {
+.g-inline * {
   float: left;
-  padding: .4em 0;
-}
-
-.g-short-form .textbox {
-  color: #666;
-  padding: .3em .6em;
-  width: auto;
-}
-
-.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;
+  margin-right: .4em;
 }
 
 /* Right to left styles ~~~~~~~~~~~~~~~~~~~~ */