silverstripe-userforms/scss/UserForm_cms.scss

/**
 * Styles for cms
 */

.cms {

	.uf-field-editor {
		
		> div.ss-gridfield-buttonrow-before {
			margin-bottom: 10px;
			overflow: auto;
		}
		
		// Row styles
		table.ss-gridfield-table {

			// Standard rows
			.ss-gridfield-item {
				&, &:hover {
					background: white;
				}
					
				td {
					border-right-width: 0;
					border-bottom: 1px solid #EEE;
						
					&:last-child {
						border-right-width: 1px;
					}
				}
			}

			.ss-gridfield-item.inFieldGroup {
				&, &:hover {
					background: #f2f9fd;
				}
				
				td {
					// border style for darker background
					border-bottom: 1px solid #CCC;
				}
				
				.col-reorder, .handle {
					// level 1
					background: #BEE0F8;
				}
				
				&.inFieldGroup-level-2 {
					.col-reorder, .handle {
						background: #99CEF4;
					}
				}
				
				&.inFieldGroup-level-3 {
					.col-reorder, .handle {
						background: #89BEF4;
					}
				}
			}

			.ss-gridfield-item[data-class='EditableFormStep'] {
				&, &:hover {
					background: #dae2e7;
				}

				label {
					font-weight: bold;
					color: black;
					font-size: 1.1em;
				}
			}

			.ss-gridfield-item[data-class='EditableFieldGroup'] {
				td {
					border-top: 1px inset #c9e6f9;
				}
				
				&.inFieldGroup-level-2 td {
					border-top-color: #a8d7f5;
				}
				
				&.inFieldGroup-level-3 td {
					border-top-color: #94cef3;
				}
				
				label {
					font-weight: bold;
					color: #444;
				}
			}

			.ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
				td {
					border-bottom: 1px outset #c9e6f9;
				}
				
				&.inFieldGroup-level-2 td {
					border-bottom-color: #a8d7f5;
				}
				
				&.inFieldGroup-level-3 td {
					border-bottom-color: #94cef3;
				}
				
				label {
					color: #777;
				}
			}
		}
	}
}