silverstripe-userforms/css/FieldEditor.css
2013-09-07 15:07:22 +12:00

237 lines
5.6 KiB
CSS
Executable File

/**
* User Defined Form Builder CSS
*
*/
li.class-UserDefinedForm > a .jstree-pageicon { background-position: 0 -64px; }
.page-icon.class-UserDefinedForm {
background-position: 0 -64px;
}
/* Add a Field Menu
---------------------------------------- */
.MenuHolder {
color: #999;
border: 1px solid #ddd;
background: #f4f4f4;
overflow: hidden;
width: 100%;
}
.MenuHolder h2 {
float: left;
margin-left: 10px;
}
.MenuHolder select {
float: left;
width: 240px;
margin: 18px 0 0 8px;
font-size: 11px;
}
.MenuHolder .action {
float: left;
margin: 14px 0 0 4px;
font-size: 11px;
}
/* Options / Settings Area
---------------------------------------- */
.FormOptions {
padding: 10px 0 0 0;
}
/*
#ShowClearButton, #DisableSaveSubmissions{
padding-left:0;
}
#ShowClearButton label, #DisableSaveSubmissions label{
float:left;
font-weight:bold;
margin-right:43px;
}
*/
/* Field Listing
---------------------------------------- */
.FieldEditor .FieldList {
padding: 10px 0;
}
.FieldEditor .FieldList .EditableFormField {
margin: 2px;
padding: 3px 0;
border-top: 1px dotted #ccc;
width: 100%;
overflow: hidden;
}
.FieldEditor .FieldList .EditableFormField * {
display: inline;
vertical-align: middle;
}
.FieldEditor .FieldList .EditableFormField .fieldHandler,
.FieldEditor .FieldList .EditableFormField .handle {
cursor: move;
}
.FieldEditor .FieldList .EditableFormField .fieldInfo {
float: left;
padding-right: 10px;
}
.FieldEditor .FieldList .EditableFormField .fieldActions {
float: left;
margin-top: 10px;
}
.FieldEditor .FieldList .EditableFormField .fieldActions a {
padding: 0 5px 5px 20px;
font-size: 12px;
}
.FieldEditor .FieldList .EditableFormField .moreOptions {
background: url(../../cms/images/edit.gif) no-repeat top left;
}
.FieldEditor .FieldList .EditableFormField .moreOptions.showing {
color: #666;
text-decoration: none;
}
.FieldEditor .FieldList .EditableFormField .delete {
background: url(../../cms/images/delete.gif) no-repeat top left;
}
.FieldEditor .FieldList .EditableFormField input {
width: 250px;
margin-left: 0px;
}
/** Field Options **/
.FieldEditor .FieldList .EditableFormField div.extraOptions {
display: block;
overflow:hidden;
margin: 3px 0px 3px 38px;
background-color: #F4F4F4;
padding: 3px;
clear: both;
}
.FieldEditor .FieldList .EditableFormField .extraOptions * {
display: block;
}
.FieldEditor .FieldList .EditableFormField .extraOptions .handle {
float: left;
margin-right: 3px;
}
.FieldEditor .FieldList .EditableFormField .extraOptions ul {
padding: 5px 0;
}
.FieldEditor .FieldList .EditableFormField .extraOptions li {
padding: 3px 0;
width: 100%;
overflow: hidden;
}
.FieldEditor .FieldList .EditableFormField .extraOptions a {
background: none;
}
.FieldEditor .FieldList .EditableFormField .extraOptions input {
font-size: 11px;
padding: 2px;
float: left;
}
.FieldEditor .FieldList .EditableFormField .extraOptions .deleteOption {
width: 20px;
margin: 4px 0 0 4px;
background: none;
height: 20px;
float: left;
display: block;
}
.FieldEditor .FieldList .EditableFormField .extraOptions select {
width: 221px;
}
.FieldEditor .FieldList .EditableFormField .extraOptions .chzn-drop input {
font-size: 12px;
padding: 4px 20px 4px 5px;
float: none;
}
.FieldEditor .FieldList .EditableFormField a.addableOption,
.FieldEditor .FieldList .EditableFormField a.addCondition {
background: url(../../cms/images/add.gif) no-repeat top left;
padding: 1px 0 2px 20px;
font-size: 12px;
width: auto;
margin-left: 3px;
}
/* Field Options Group */
.FieldEditor .FieldList .fieldOptionsGroup {
padding: 4px 8px 8px 8px;
margin: 5px;
border: 1px solid #bbb;
}
.FieldEditor .FieldList .fieldOptionsGroup legend {
font-size: 15px;
padding: 0 4px;
}
/* Field Lengths */
.FieldEditor .FieldList .EditableFormField .fieldgroupField {
float: left;
}
.FieldEditor .FieldList .EditableFormField .fieldgroupField label {
float: left;
padding: 0 4px;
}
.FieldEditor .FieldList .EditableFormField .fieldgroupField input {
width: 80px;
}
.FieldEditor .FieldList .EditableFormField .middleColumn {
background: none;
}
/* CHECKBOX */
.FieldEditor .FieldList .EditableFormField .checkbox { }
.FieldEditor .FieldList .EditableFormField .checkbox input {
float: left;
width:auto;
margin: 0 8px 0 0;
}
/* CUSTOM RULES */
.FieldEditor .FieldList .customRules {
clear: both;
}
.FieldEditor .FieldList .customRules li {
clear: both;
}
.FieldEditor .FieldList .customRules li.firstField {
padding-bottom: 5px;
margin: 0 5px;
border-bottom: 1px solid #bbb;
}
.FieldEditor .FieldList .customRules label {
float: left;
margin: 0;
padding: 2px 4px;
font-size: 11px;
}
.FieldEditor .FieldList .customRules select {
float: left;
font-size: 11px;
width: 120px;
margin-right: 4px;
}
.FieldEditor .FieldList .customRules a {
background: none;
width: 20px;
float: left;
}
/* HIDE */
.FieldEditor .FieldList li.EditableFormField .hidden {
display: none !important;
}
/* Holder to prevent form from collapsing */
.FieldEditor .FieldList .removed-form-field {
height: 40px;
display: block;
overflow: hidden;
}