clean up styles

This commit is contained in:
scott1702 2015-08-17 11:06:56 +12:00
parent bab2f2a074
commit cc67ddb98e
7 changed files with 86 additions and 48 deletions

View File

@ -19,12 +19,13 @@
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
} }
.userform-progress .step-button-wrapper.current .step-button-jump { .userform-progress .step-button-wrapper.viewed .step-button-jump {
background: #666; opacity: 1;
} }
.userform-progress .step-button-jump { .userform-progress .step-button-jump {
position: absolute; position: absolute;
top: 0; top: 0;
opacity: .7;
} }
.step-navigation .step-buttons { .step-navigation .step-buttons {
@ -40,3 +41,17 @@
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
.userformsgroup {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
margin-top: 12px;
margin-bottom: 12px;
}
.userformsgroup legend {
padding-left: 4px;
padding-right: 4px;
border: 0;
width: auto;
}

View File

@ -6,7 +6,7 @@
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td {
border-right-width: 0; border-right-width: 0;
border-bottom: 1px solid #EEE; border-top: 1px solid #EEE;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td:last-child { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item td:last-child {
border-right-width: 1px; border-right-width: 1px;
@ -15,16 +15,20 @@
background: #f2f9fd; background: #f2f9fd;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup td { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup td {
border-bottom: 1px solid #CCC; border-bottom: 0;
border-top: 1px solid #eee;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .handle { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup .handle {
background: #BEE0F8; background: #BEE0F8;
border-top: 0;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-2 .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-2 .handle { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-2 .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-2 .handle {
background: #99CEF4; background: #99CEF4;
border-top: 0;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-3 .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-3 .handle { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-3 .col-reorder, .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item.inFieldGroup.inFieldGroup-level-3 .handle {
background: #89BEF4; background: #89BEF4;
border-top: 0;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'], .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep']:hover { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'], .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep']:hover {
background: #dae2e7; background: #dae2e7;
@ -34,27 +38,30 @@
color: black; color: black;
font-size: 1.1em; font-size: 1.1em;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] td {
border-top: 1px solid #a6b6c1;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] + .ss-gridfield-item td {
border-top: 1px solid #dae2e7;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFormStep'] + .ss-gridfield-item[data-class='EditableFieldGroup'] td {
border-top: 1px solid #a8d7f5;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] td { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] td {
border-top: 1px inset #c9e6f9; border-top: 1px solid #a8d7f5;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'].inFieldGroup-level-2 td {
border-top-color: #a8d7f5;
}
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'].inFieldGroup-level-3 td {
border-top-color: #94cef3;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] label { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroup'] label {
font-weight: bold; font-weight: bold;
color: #444; color: #444;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] td { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] td {
border-bottom: 1px outset #c9e6f9; border-bottom: 1px solid #a8d7f5;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'].inFieldGroup-level-2 td { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] + .ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
border-bottom-color: #a8d7f5; border-top: 0;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'].inFieldGroup-level-3 td { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] .col-buttons .action {
border-bottom-color: #94cef3; display: none;
} }
.cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] label { .cms .uf-field-editor table.ss-gridfield-table .ss-gridfield-item[data-class='EditableFieldGroupEnd'] label {
color: #777; color: #777;

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

View File

@ -177,15 +177,14 @@ to determine the size and the number of rows in a text field.
To create a multi-page form, simply click the 'Add Page Break' button. To create a multi-page form, simply click the 'Add Page Break' button.
This will create a page break field which is used to create a new page in the form. You can drag and drop this page break to separate form fields at the desired location. This will create a page break field which is used to create a new page in the form. You can drag and drop this page break to separate form fields at the desired location.
![Multi-page forms](_images/multi-page-forms.png) ![Multi-page forms](_images/multi-page-forms.png)
## Adding fieldgroups ## Adding fieldgroups
Creating fieldgroups is as simple as clicking the 'Add fieldgroup' button, this create two 'markers' which act as the beginning/end for the fieldgroup. Any fields place between these two markers will be automatically included within the fieldgroup. Creating fieldgroups is as simple as clicking the 'Add fieldgroup' button, this create two 'markers' which act as the beginning/end for the fieldgroup. Any fields place between these two markers will be automatically included within the fieldgroup.
<!---
TODO: ![Adding fieldgroups](_images/fieldgroups.png)
Include screenshots of fieldgroups in action
-->
## Viewing form submissions ## Viewing form submissions

View File

@ -438,7 +438,6 @@ jQuery(function ($) {
} else if (index === 0) { } else if (index === 0) {
$button.css({marginLeft: 0}); $button.css({marginLeft: 0});
} }
}); });
this.update(1); this.update(1);

View File

@ -24,16 +24,15 @@
display: inline-block; display: inline-block;
list-style-type: none; list-style-type: none;
&.current { &.viewed .step-button-jump {
.step-button-jump { opacity: 1;
background: #666;
}
} }
} }
.step-button-jump { .step-button-jump {
position: absolute; position: absolute;
top: 0; top: 0;
opacity: .7;
} }
} }
@ -53,3 +52,18 @@
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }
.userformsgroup {
border: 1px solid #ccc;
border-radius: 4px;
padding: 8px;
margin-top: 12px;
margin-bottom: 12px;
legend {
padding-left: 4px;
padding-right: 4px;
border: 0;
width: auto;
}
}

View File

@ -3,12 +3,10 @@
*/ */
.cms { .cms {
.uf-field-editor { .uf-field-editor {
// Row styles // Row styles
table.ss-gridfield-table { table.ss-gridfield-table {
// Standard rows // Standard rows
.ss-gridfield-item { .ss-gridfield-item {
&, &:hover { &, &:hover {
@ -17,7 +15,7 @@
td { td {
border-right-width: 0; border-right-width: 0;
border-bottom: 1px solid #EEE; border-top: 1px solid #EEE;
&:last-child { &:last-child {
border-right-width: 1px; border-right-width: 1px;
@ -31,24 +29,26 @@
} }
td { td {
// border style for darker background border-bottom: 0;
border-bottom: 1px solid #CCC; border-top: 1px solid #eee;
} }
.col-reorder, .handle { .col-reorder, .handle {
// level 1
background: #BEE0F8; background: #BEE0F8;
border-top: 0;
} }
&.inFieldGroup-level-2 { &.inFieldGroup-level-2 {
.col-reorder, .handle { .col-reorder, .handle {
background: #99CEF4; background: #99CEF4;
border-top: 0;
} }
} }
&.inFieldGroup-level-3 { &.inFieldGroup-level-3 {
.col-reorder, .handle { .col-reorder, .handle {
background: #89BEF4; background: #89BEF4;
border-top: 0;
} }
} }
} }
@ -63,19 +63,23 @@
color: black; color: black;
font-size: 1.1em; font-size: 1.1em;
} }
td {
border-top: 1px solid #a6b6c1;
}
+ .ss-gridfield-item td {
border-top: 1px solid #dae2e7;
}
+ .ss-gridfield-item[data-class='EditableFieldGroup'] td {
border-top: 1px solid #a8d7f5;
}
} }
.ss-gridfield-item[data-class='EditableFieldGroup'] { .ss-gridfield-item[data-class='EditableFieldGroup'] {
td { td {
border-top: 1px inset #c9e6f9; border-top: 1px solid #a8d7f5;
}
&.inFieldGroup-level-2 td {
border-top-color: #a8d7f5;
}
&.inFieldGroup-level-3 td {
border-top-color: #94cef3;
} }
label { label {
@ -86,15 +90,15 @@
.ss-gridfield-item[data-class='EditableFieldGroupEnd'] { .ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
td { td {
border-bottom: 1px outset #c9e6f9; border-bottom: 1px solid #a8d7f5;
} }
&.inFieldGroup-level-2 td { + .ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
border-bottom-color: #a8d7f5; border-top: 0;
} }
&.inFieldGroup-level-3 td { .col-buttons .action{
border-bottom-color: #94cef3; display: none;
} }
label { label {