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;

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

// Clarity Dependency SCSS
@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;
}

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: 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 - Clarity

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

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

.dropdownmodifiedinput
{
	.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;
	}
}

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

// CHeckbutton group
.aba-checkbutton-group {
	.btn { margin-left: 0; 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;
	&:first-child {
		padding-top: 7px;
		border-top: 4px #CCC solid;
	}
}

.dyna-hidden {
	display: none;
}

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

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

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

.__debug {
	margin: 2em 0;
}