silverstripe-userforms/scss/UserForm_cms.scss

/**
 * Animations
 */

@keyframes rowSlide {
	0% {top: 20%;}
	100% {top: 80%;}
}

@keyframes flashBackground {
	0% {background-color: white;}
	10% {background-color: #dcfedd;}
	70% {background-color: #dcfedd;}
}

/**
 * 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;
				}

				&.newField {
					position: fixed;
					animation: rowSlide .5s ease forwards;
				}

				&.flashBackground {
					animation: flashBackground 2s linear;
				}

				&.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;
				}
			}
		}

		.stickyButtons {
			position: fixed;
			top: 40px;
			z-index: 2;
			background: #E6EAED;
			box-shadow: 0 12px 4px -8px #999;
			padding: 12px;
			margin-left: -12px;

			& button.action {
				margin-bottom: 0;
			}

			~ .ss-gridfield-table {
				margin-top: 40px;
			}
		}
	}
}