tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Form.scss reformatting (no functional changes)

Browse Source
This commit is contained in:
Ingo Schommer 2013-06-15 11:24:22 +02:00
parent 7c3e1a43e3
commit 1fd8a55012
2 changed files with 115 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/Form.css
View File

@ -1,42 +1,22 @@
/** Fields */ form { /** Messages */ }
form * { font-size: 12px; } form * { font-size: 12px; }
form fieldset { margin: 0; padding: 0; border-style: none; } form fieldset { margin: 0; padding: 0; border-style: none; }
form .field { clear: both; padding: 0.2em; margin: 0 0 0 10em; vertical-align: middle; } form .field { clear: both; padding: 0.2em; margin: 0 0 0 10em; vertical-align: middle; }
form p.checkbox { margin: 0 0 0 8.5em; } form p.checkbox { margin: 0 0 0 8.5em; }
form .field.nolabel { margin-left: 0; } form .field.nolabel { margin-left: 0; }
form label.left { float: left; width: 10em; margin-left: -10em; } form label.left { float: left; width: 10em; margin-left: -10em; }
form input.maxlength { width: auto; } form input.maxlength { width: auto; }
form .actions { float: right; } form .actions { float: right; }
form .validation, form .error, form .required { border: 1px solid #f00; background: #fcc; padding: 0.5em; width: 50%; } form .validation, form .error, form .required { border: 1px solid #f00; background: #fcc; padding: 0.5em; width: 50%; }
form .field span.readonly { border: 1px #CCC dotted; background-color: #F7F7F7; display: block; width: 98%; padding: 3px; margin: 5px 0; } form .field span.readonly { border: 1px #CCC dotted; background-color: #F7F7F7; display: block; width: 98%; padding: 3px; margin: 5px 0; }
form .indicator.inline { display: inline; margin-left: 5px; vertical-align: middle; } form .indicator.inline { display: inline; margin-left: 5px; vertical-align: middle; }
form .indicator.block { display: inline; } form .indicator.block { display: inline; }
/* Emulating link styling for actions requiring lesser attention, e.g. "cancel" FormActions */
form button.minorAction { background: none; padding: 0; border: 0; color: #0074C6; text-decoration: underline; } form button.minorAction { background: none; padding: 0; border: 0; color: #0074C6; text-decoration: underline; }
/** Messages */
form .message.notice { background-color: #FCFFDF; border-color: #FF9300; }
form .message { margin: 1em 0; padding: 0.5em; font-weight: bold; border: 1px black solid; background-color: #B9FFB9; border-color: #00FF00; } form .message { margin: 1em 0; padding: 0.5em; font-weight: bold; border: 1px black solid; background-color: #B9FFB9; border-color: #00FF00; }
form .message.notice { background-color: #FCFFDF; border-color: #FF9300; }
form .message.warning { background-color: #FFD2A6; border-color: #FF9300; } form .message.warning { background-color: #FFD2A6; border-color: #FF9300; }
form .message.bad { background-color: #FF8080; border-color: #FF0000; } form .message.bad { background-color: #FF8080; border-color: #FF0000; }
form .message.required, form .message.validation { display: block; margin-top: 5px; color: #FF9300; width: 240px; border-color: #FF9300; } form .message.required, form .message.validation { display: block; margin-top: 5px; color: #FF9300; width: 240px; border-color: #FF9300; }
form .message.validation { color: #FF4040; width: 240px; border-color: #FF4040; } form .message.validation { color: #FF4040; width: 240px; border-color: #FF4040; }
.typography .ss-tabset ul { margin: 0; } .typography .ss-tabset ul { margin: 0; }

62
scss/Form.scss
View File

@ -1,55 +1,52 @@
/** form {
* Fields
*/ * {
form * {
font-size: 12px; font-size: 12px;
} }
form fieldset {
fieldset {
margin: 0; margin: 0;
padding: 0; padding: 0;
border-style: none; border-style: none;
} }
form .field { .field {
clear: both; clear: both;
padding: 0.2em; padding: 0.2em;
margin: 0 0 0 10em; margin: 0 0 0 10em;
vertical-align: middle; vertical-align: middle;
} }
form p.checkbox { p.checkbox {
margin: 0 0 0 8.5em; margin: 0 0 0 8.5em;
} }
form .field.nolabel { .field.nolabel {
margin-left: 0; margin-left: 0;
} }
form label.left { label.left {
float: left; float: left;
width: 10em; width: 10em;
margin-left: -10em; margin-left: -10em;
} }
form input.maxlength { input.maxlength {
width: auto; width: auto;
} }
form .actions{ .actions{
float : right; float : right;
} }
form .validation, .validation, .error, .required {
form .error,
form .required
{
border: 1px solid #f00; border: 1px solid #f00;
background: #fcc; background: #fcc;
padding: 0.5em; padding: 0.5em;
width: 50%; width: 50%;
} }
form .field span.readonly { .field span.readonly {
border: 1px #CCC dotted; border: 1px #CCC dotted;
background-color: #F7F7F7; background-color: #F7F7F7;
display: block; display: block;
@ -58,18 +55,18 @@ form .field span.readonly {
margin:5px 0; margin:5px 0;
} }
form .indicator.inline { .indicator.inline {
display: inline; display: inline;
margin-left: 5px; margin-left: 5px;
vertical-align: middle; vertical-align: middle;
} }
form .indicator.block { .indicator.block {
display: inline; display: inline;
} }
/* Emulating link styling for actions requiring lesser attention, e.g. "cancel" FormActions */ // Emulating link styling for actions requiring lesser attention, e.g. "cancel" FormActions
form button.minorAction { button.minorAction {
background: none; background: none;
padding: 0; padding: 0;
border: 0; border: 0;
@ -80,39 +77,44 @@ form button.minorAction {
/** /**
* Messages * Messages
*/ */
form .message.notice { .message {
background-color: #FCFFDF;
border-color: #FF9300;
}
form .message {
margin: 1em 0; margin: 1em 0;
padding: 0.5em; padding: 0.5em;
font-weight: bold; font-weight: bold;
border: 1px black solid; border: 1px black solid;
background-color: #B9FFB9; background-color: #B9FFB9;
border-color: #00FF00; border-color: #00FF00;
&.notice {
background-color: #FCFFDF;
border-color: #FF9300;
} }
form .message.warning {
&.warning {
background-color: #FFD2A6; background-color: #FFD2A6;
border-color: #FF9300; border-color: #FF9300;
} }
form .message.bad {
&.bad {
background-color: #FF8080; background-color: #FF8080;
border-color: #FF0000; border-color: #FF0000;
} }
form .message.required,
form .message.validation { &.required, &.validation {
display:block; display:block;
margin-top:5px; margin-top:5px;
color:#FF9300; color:#FF9300;
width:240px; width:240px;
border-color: #FF9300; border-color: #FF9300;
} }
form .message.validation {
&.validation {
color:#FF4040; color:#FF4040;
width:240px; width:240px;
border-color: #FF4040; border-color: #FF4040;
} }
}
}
.typography .ss-tabset ul { .typography .ss-tabset ul {
margin: 0; margin: 0;