Merge pull request #4 from silverstripe-rebelalliance/master

Added styles for userforms and fixed strange form behaviour at different screen widths.

css/form.css

@@ -16,9 +16,16 @@ textarea:invalid {
 .no-boxshadow textarea:invalid {
     background-color: #f0dddd
 }
+form {
+    max-width: 70%;
+}
 form .message {
-    padding: 6px 15px;
-    border: 1px solid;
+    float:right;
+    padding-top: 6px;
+    color:#b80000;
+}
+.holder-required {
+    background-color:#ffb8b8;
 }
 form .good {
     background-color: #ecf9d0;
@@ -30,7 +37,12 @@ form .bad {
 }
 .checkbox,
 .radio {
-    margin-top: 1px
+    margin-top: 3px;
+}
+.checkbox label.right,
+.radio label.right {
+    float:left;
+    text-align: left;
 }
 #MemberLoginForm_LoginForm_action_dologin,
 .Actions .action {
@@ -49,22 +61,31 @@ form .bad {
 div.field {
     width: 100%;
     float: left;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
+    padding:10px;
 }
+
 .ui-widget {
     font-family: Arial, Helvetica, sans-serif
 }
 form label.left {
     float: left;
-    width: 25%;
+    width: 20%;
     padding-right: 5%;
     margin-top: 3px;
     display: block;
     font-size: 13px;
 }
-.main form .middleColumn {
+form label.right {
     float: right;
-    width: 70% !important;
+    width: 20%;
+    padding-left: 5%;
+    display: block;
+    font-size: 13px;
+}
+.main form .middleColumn {
+    float: left;
+    width: 50% !important;
 }
 	.main form .middleColumn .middleColumn {
 	    width: 100% !important
@@ -81,9 +102,18 @@ form textarea,
 form .textajaxuniquetext,
 form select {
     width: 98%;
-    padding: 6px 1%;
+    padding: 3px 1%;
     font-size: 15px;
+    background-color:#fff;
 }
+
+form input.text:focus,
+form textarea:focus,
+form .textajaxuniquetext:focus,
+form select:focus {
+    outline:none;
+}
+
 form input.sitetreeurlsegment {
     width: 200px
 }
@@ -107,10 +137,40 @@ form #DMYDate-month,
 form #DMYDate-day {
     width: 25px
 }
+form .checkboxset ul,
+form .optionset ul {
+    margin: 0;
+}
+
 form .checkboxset li,
 form .optionset li {
-    margin-bottom: 5px
+    margin-bottom: 5px;
+    list-style-type:none;
 }
+form .checkboxset li .checkbox,
+form .optionset li .radio{
+    margin-top: 5px;
+}
+
+input[type="submit"] {
+    border-radius:20px;
+    background-color:#b80000;
+    border:none;
+    color:#fff;
+    font-weight: bold;
+    font-size: 13px;
+}
+
+.resetformaction {
+    float:right;
+    border-radius:20px;
+    background-color:#9F9F9F;
+    border:none;
+    color:#fff;
+    font-weight: bold;
+    font-size: 13px;
+}
+
 @media only screen and (max-width: 700px) { 
     .main form .middleColumn {
 	    float: right;
@@ -126,7 +186,41 @@ form .optionset li {
 	#MemberLoginForm_LoginForm label {
 	    margin-bottom: 8px
 	}
+    div.field {
+        position:relative;
+        border-bottom:1px solid #E5E5E5;
+        padding-bottom: 20px;
     }
+    .checkbox label.right,
+    .radio label.right {
+        float:left;
+        text-align: left;
+    }
+    form label.left {
+        width:50%;
+        padding:0;
+    }
+    form label.right {
+        position: absolute;
+        right: 10px;
+        margin-top: 3px;
+        width:50%;
+        padding:0;
+    }
+    .checkbox label.right,
+    .radio label.right {
+        position:relative;
+        right:auto;
+        margin-top:0;
+    }
+}
+
+@media only screen and (max-width: 900px) { 
+    form {
+        max-width: 100%;
+    }
+}
+
 @media only screen and (min-width: 700px) { 
 	#MemberLoginForm_LoginForm #Remember,
 	#MemberLoginForm_LoginForm .Actions,

css/layout.css

@@ -148,8 +148,7 @@ content img.right {
 }
 .search-bar form input.text {
     width: 155px;
-    padding-left: 10px;
-    padding-right: 35px;
+    padding:6px 35px 6px 10px;
     color: #888;
     margin: 0;
     border: none;
@@ -175,6 +174,11 @@ content img.right {
 .search-bar form input.action:hover {
     color: #000
 }
+
+#Search {
+	padding:0;
+}
+
 .search-bar form input:focus,
 .header textarea:focus {
     outline: none
@@ -338,8 +342,14 @@ aside {
     padding-bottom: 20px;
 }
 .no-sidebar .content-container {
-    float: left
+    float: left;
+    width:100%;
 }
+
+.no-sidebar aside {
+	display:none;
+}
+
 .header {
     background: #161616
 }