ng-dynaform/src/styles.scss

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


// VARIABLES: Not sure all these are needed - REFACTOR UNUSED OUT
// --------------
// Colour palette

$col-blue-lightest: #ebf5f7;
$col-blue-primary: #0085bc;

$col-charcoal: #444;

$col-danger: red;

// --------------------------------------------------------------------------------------------------------------------

// Clarity Dependency SCSS - No loner needed as of Clarity 2?
// @import "../node_modules/@clr/ui/src/utils/dependencies.clarity"; // Includes light theme

// PUT (or import) CLARITY VARIABLE OVERRIDES HERE
$clr-forms-select-hover-background: $col-blue-lightest;

// Clarity Component SCSS
@import "../node_modules/@clr/ui/src/utils/components.clarity";

.central-col {
	max-width: 80%;
	margin: 0 auto 2rem;
}

h1 {
	color: $col-blue-primary;
	border-bottom: 4px $col-blue-primary solid;
	margin-bottom: 1em;
}

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

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

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

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

.red input { 
	color: red !important;
}

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

#yoyo {
	input {
		border-color: purple;
		border-width: 2px;
		padding-left: 10px;
		padding-right: 10px;
	}
}

.multicolor {
	input, select, textarea {
		border-width: 1px;
		border-style: solid;
		border-top-color: green;
		border-left-color: blueviolet;
		border-right-color: teal;
		border-bottom-width: 2px;
		border-bottom-color: magenta;
		width: 200px;
		padding-left: 10px;
	}
}

.bordered {
	border-width: 5px;
	border-style: solid;
	border-top-color: green;
	border-left-color: blueviolet;
	border-right-color: teal;
	border-bottom-color: magenta;
	padding: 2em;
}

// ---------------------------------------------------------------------------------------------------------------------
// FormGroup Heading Styles

.h-dyna-2, .h-dyna-3, .h-dyna-d {
	color: $col-blue-primary;
	border-bottom: 1px $col-blue-primary dotted;
}

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

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

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

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

input, textarea, select {
	&.form-control:focus {
		box-shadow: none;
	}
	&.form-control-sm {
		font-size:1em;
	}
}

// These styles *might* not be necessary in apps that use dynaform
.clr-radio-container {
	margin-top: 1rem;
	> label {
		font-weight: 600;
	}
	&.clr-control-inline > label {
		margin-right: 0.5rem;
	}
}

.select:after {
	display: none;
}

.clr-input, .clr-select, .date-input {
	color: $col-charcoal;
	border-bottom:1px lighten($col-charcoal, 20%) solid;
	width: 100%;
	line-height: 100%;
	padding-left: 0;
	padding-right: 0;
	&:focus {
		color: $col-charcoal;
		background-size: 100% 100%;
	}
}

.clr-radio-wrapper ~ .clr-subtext {
	display: inline;
}

// ---------------------------------------------------------------------------------------------------------------------
//Custom Controls

.dropdownmodifiedinput {
	label {
		display: block;
		font-weight: 600;
	}
	.clr-input {
		margin-left: 5px;
		width: auto;
		overflow: hidden; // Trigger a block formatting context (BFC) so input takes up remaining width
	}
	.dropdown-toggle::after {
		display: none;
	}
}

.row-buttongroup, .row-checkbutton, .row-checkbuttongroup, .row-datepicker, .row-dropdownmodifiedinput {
	margin-top: 1rem;
}

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

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

// Checkbutton group
.aba-checkbutton-group {
	.btn { margin-left: 0; margin-right: 4px; }
}

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

// dyna-rc = Dynaform Repeating Container

.dyna-rc-selector {
	margin-bottom: 5px; 
	.dyna-rc-focus-block {
		background-color: $col-blue-lightest;
	}
	.btn {
		margin-right: 4px;
	}
}

.dyna-rc-member-container.dyna-rc-display-all, .dyna-rc-control.dyna-rc-display-all {
	// border-bottom: 4px #CCC solid;
	padding-bottom: 1rem;
}

// ---------------------------------------------------------------------------------------------------------------------
// Repeating Field and Container Buttons

.dyna-rep-add-container {
	@include clearfix;
}

.dyna-rep-btn-add {
	margin-left: 0;
}

.dyna-rep-btn-delete {
	float: right;
	margin-right: 0;
	padding: 0;
	color: $col-charcoal;
	cursor: pointer;
	.dyna-rf-field & {
		background-color: transparent;
		border: 0;
		transform: translateY(16px);
		&:disabled {
			color: #AAA !important;
			cursor: not-allowed;
		}
		&:hover {
			color: $col-danger;
		}
	}
	.dyna-rc-member-container & {
		&:hover {
			color: $col-danger;
		}
		&:disabled {
			cursor: not-allowed;
		}
	}
}


// ---------------------------------------------------------------------------------------------------------------------

.dyna-hidden {
	display: none;
}

div:not(.row-checkbox) + div.row-checkbox {
	margin-top: 8px;
}

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

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

.label-error {
	color: firebrick;
}

clr-control-error {
	color: firebrick !important;
}

// ---------------------------------------------------------------------------------------------------------------------
// Debugging

.__debug {
	margin: 2em 0;
}