ENHANCEMENT:added styling for userforms - plus fixed strange form styling.
This commit is contained in:
Jeremy Bridson
parent
f9e2128e14
commit
bf3fd0f088
114
css/form.css
114
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,12 +137,42 @@ 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 {
|
||||
.main form .middleColumn {
|
||||
float: right;
|
||||
width: 100% !important;
|
||||
: ;
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -141,8 +141,7 @@ a.btn:hover {
|
|||
}
|
||||
.search-bar form input.text {
|
||||
width: 155px;
|
||||
padding-left: 10px;
|
||||
padding-right: 35px;
|
||||
padding:6px 35px 6px 10px;
|
||||
color: #888;
|
||||
margin: 0;
|
||||
border: none;
|
||||
|
|
@ -168,6 +167,11 @@ a.btn:hover {
|
|||
.search-bar form input.action:hover {
|
||||
color: #000
|
||||
}
|
||||
|
||||
#Search {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
.search-bar form input:focus,
|
||||
.header textarea:focus {
|
||||
outline: none
|
||||
|
|
@ -331,8 +335,14 @@ aside {
|
|||
padding-bottom: 20px;
|
||||
}
|
||||
.no-sidebar .content-container {
|
||||
float: left
|
||||
float: left;
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.no-sidebar aside {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #161616
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue