ng-dynaform/src/styles.scss

/* You can add global styles to this file, and also import other style files */

@import url("https://use.fontawesome.com/releases/v5.1.0/css/all.css");
@import "~@progress/kendo-theme-bootstrap/scss/all";

h1 {
	color: magenta;
	border-bottom: 4px blueviolet solid;
	margin-bottom: 1em;
}


.form-group {
	margin-bottom: 4px;
}

div.col-sm-8 {
	margin-bottom: 2px;
}

label.col-sm-4 {
	background-color: lavenderblush;
	border-left: 15px white solid;
	padding-top: 4px;
	margin-bottom: 2px;
}

div.col-sm-8 {
	label {
		font-size: 0.85em;
	}
	textarea {
		margin-bottom: 5px;
	}
}

.red input { 
	color: rgb(202, 28, 28) !important;
}

.bgPaleBlue input {
	background-color: rgb(230, 243, 243) !important;
}

#yoyo {
	input {
		border-color: purple;
		border-width: 2px;
		width: 50%;
	}
}

// ---------------------------------------------------------------------------------------------------------------------
// Input styles

.timepicker {
	display: inline-block;
	max-width: 140px;
}

.datepicker {
	display: inline-block;
	max-width: 165px;
}

.ng-touched.ng-invalid {
	input[type=text]#{&},
	input[type=password]#{&},
	textarea#{&},
	select#{&}
	{
		border-left: 3px red solid;
	}
}
// ---------------------------------------------------------------------------------------------------------------------
// FormGroup Heading Styles

.h-dyna-2 {
	font-size: 1.5em;
}

.h-dyna-3 {
	font-size: 1.25em;
}

.h-dyna-4 {
	font-size: 1.1em;
}

// ---------------------------------------------------------------------------------------------------------------------
// Button Groups

.buttongroup a {
	margin-right: 4px;
}

// ---------------------------------------------------------------------------------------------------------------------
// Repeating Comtainers (series of buttons alowwing user to focus a repeating container member)

.dyna-repeating-container-selector {
	margin-bottom: 5px; 
	a.btn {
		margin-right: 4px;
	}
	.btn-primary {
		color: white !important;
	}
}

.dyna-rc-container.dyna-rc-display-all, .dyna-rc-control.dyna-rc-display-all {
	margin-bottom: 7px;
	border-bottom: 4px #CCC solid;
}

.dyna-hidden {
	display: none;
}

// ---------------------------------------------------------------------------------------------------------------------
// Errors

.dyna-error label.col-sm-4 {
	span {
		display: inline-block;
		margin-left: 0.5em;
		color: red;
	}
}