ENHANCEMENT:added styling for userforms - plus fixed strange form styling.

This commit is contained in:
Jeremy Bridson 2012-07-06 15:24:53 +12:00
parent f9e2128e14
commit bf3fd0f088
2 changed files with 117 additions and 13 deletions

View File

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

View File

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