silverstripe-userforms/scss/UserForm_cms.scss

/**
 * Styles for cms
 */

.cms {
	.uf-field-editor {
		padding-bottom: 0;

		// Row styles
		table.ss-gridfield-table {
			// Standard rows
			.ss-gridfield-item {
				height: 46px;

				&, &:hover {
					background: white;
				}
					
				td {
					border-right-width: 0;
					border-top: 1px solid #EEE;
						
					&:last-child {
						border-right-width: 1px;
					}
				}

				.handle {
					min-height: 46px;
				}
			}

			.ss-gridfield-item.ui-sortable-placeholder {
				height: 50px;
			}

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

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

				label {
					font-weight: bold;
					color: black;
					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'] {
				td {
					border-top: 1px solid #a8d7f5;
				}
				
				label {
					font-weight: bold;
					color: #444;
				}
			}

			.ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
				td {
					border-bottom: 1px solid #a8d7f5;
				}

				+ .ss-gridfield-item[data-class='EditableFieldGroupEnd'] {
					border-top: 0;
				}

				.col-buttons .action{
					display: none;
				}
				
				label {
					color: #777;
				}
			}
		}
	}
}