mirror of
https://github.com/silverstripe/silverstripe-simple
synced 2024-10-22 11:05:50 +02:00
ENHANCEMENT:added styling for userforms - plus fixed strange form styling.
This commit is contained in:
parent
f9e2128e14
commit
bf3fd0f088
114
css/form.css
114
css/form.css
@ -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,
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user