OwlCyberSecurity - MANAGER

Edit File: _forms.less

// Forms

// Normalize LTR Label (JBS request)
// --------------------------

.form-horizontal {
	// Float the labels left
	.control-label {
		padding-right: 5px;
		text-align: left;
		// Set a width for the spacer hr so it shows
		.spacer hr {
			width: 380px;
			@media (max-width: 420px) {
				width: 220px;
			}
		}
	}
	.field-spacer>.control-label{
		width: auto;
	}
	#jform_catid_chzn {
		vertical-align: middle;
	}
}

.form-vertical {
	.control-label {
		> label {
			display: inline-block;
			.ie7-inline-block();
		}
	}
	.controls {
		margin-left: 0;
	}
}
@media (max-width: @lg-max) {
	.form-horizontal-desktop {
		.control-label {
			float: none;
			width: auto;
			padding-right: 0;
			padding-top: 0;
			text-align: left;
			> label {
				display: inline-block;
				.ie7-inline-block();
			}
		}
		.controls {
			margin-left: 0;
		}
	}
}

@media (max-width: @xl-max) {
	.row-fluid .row-fluid .form-horizontal-desktop {
		.control-label {
			float: none;
			width: auto;
			padding-right: 0;
			padding-top: 0;
			text-align: left;
			> label {
				display: inline-block;
				.ie7-inline-block();
			}
		}
		.controls {
			margin-left: 0;
		}
	}
}

.form-inline-header {
	margin: 5px 0;
	.control-group,
	.control-label,
	.controls {
		display: inline-block;
		.ie7-inline-block();
	}
	.control-label {
		width: auto;
		padding-right: 10px;
	}
	.controls {
		padding-right: 20px;
	}
}
/* Make fieldsets responsive */
fieldset[class^="form-"] {
	min-width: 100%;
}
/* Make fieldsets responsive in Firefox. See http://getbootstrap.com/css/#tables-responsive */
@-moz-document url-prefix() {
  fieldset[class^="form-"] { display: table-cell; }
}

/* Display checkboxes without bullets in list */
fieldset.checkboxes input {
	float: left;
}

fieldset.checkboxes li {
	list-style: none;
}

/* Make form elements responsive */
.control-group,
.controls,
.controls input[type="text"],
.controls input[type="number"],
.controls input[type="email"],
.controls select,
.controls textarea
{
	max-width: 100%;
}

/* Min-width on buttons */
.controls .btn-group > .btn {
	min-width: 50px;
	margin-left: -1px;
}

.controls .btn-group.btn-group-yesno {
	width: 220px;
	max-width: 100%;
	> .btn {
		width: 50%;
		min-width: 40px;
		padding: 2px 0;
	}
}

/* Title field */
input.input-large-text {
	font-size: 18px;
	line-height: 22px;
	height: auto;
}

/* Customize Textarea Resizing */
textarea {
	resize: both;
}

textarea.vert {
	resize: vertical;
}

textarea.noResize {
	resize: none;
}

/* Repeatable SubForm */
.subform-repeatable {
	padding-right: 10px;
	> .btn-toolbar {
		margin: 0;
		.group-add {
			line-height: 26px;
			width: 56px;
			font-size: 13px;
			margin-left: 28px;
		}
	}
}
.subform-repeatable-group {
	margin-top: 20px;
	margin-left: 28px;
	border: 1px solid @inputBorder;
	padding: 8px 25px 15px;
	position: relative;
	border-radius: @inputBorderRadius;
	> .btn-toolbar {
		margin: 0;
		.btn-group {
			margin-right: 0px;
			margin-top: -1px;
			position: static;
		}
		.btn {
			font-size: 13px;
			line-height: 26px;
			background-color: #F3F3F3;
			position: absolute;
			span {
				vertical-align: middle;
				line-height: 11px;
			}
			&.btn-success {
				color: #378137;
				bottom: 0;
				right: 0;
				border-radius: @inputBorderRadius 0 0 0;
				border-width: 1px 0 0 1px;
				padding-top: 1px;
				.icon-plus:before {
					content: "]";
				}
			}
			&.btn-danger {
				color: #942a25;
				top: 0;
				right: 0;
				border-radius: 0 0 0 @inputBorderRadius;
				border-width: 0 0 1px 1px;
				.icon-minus:before {
					content: "I";

}
			}
			&.btn-primary {
				color: #24748c;
				color: #333;
				right: 100%;
				top: 50%;
				margin-top: -27px;
				margin-right: 1px;
				border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
				border-width: 1px 0 1px 1px;
				line-height: 52px;
				.icon-move:before {
					content: "Z";
				}
			}
			[class^="icon-"], [class*=" icon-"] {
				margin: 0;
			}
			&:hover {
				background-color: #E6E6E6;
			}
		}
	}
	&:nth-child(odd) {
	}
	&:nth-child(even) {
	}
	&:last-of-type {
	}
	.control-group:last-of-type {
		margin-bottom: 10px;
	}
}
@media (max-width: @lg-max) {
	.subform-repeatable-group > .btn-toolbar .btn-group {
		margin-bottom: 10px;
	}
}

.subform-table-layout {
	.control-group {
		margin-bottom: 10px;
		&:last-of-type {
			margin-bottom: 0;
		}
	}
	.controls {
		padding-right: 20px;
	}
	.btn-group {

}
	input {
		width: 100%;
		max-width: 206px;
	}
	table .btn-group {
		margin: 0 7px;
	}
}
@media (max-width: 1024px) {
	.subform-table-layout {
		.subform-repeatable {
			padding-right: 0;
			tbody td:last-of-type {
				text-align: right;
				padding-bottom: 15px;
			}
		}
		table, thead, tbody, th, td, tr {
			display: block;
		}
		table {
			border: 1px solid #ddd;
		}
		thead {

th {
				position: absolute;
				top: -9999px;
				left: -9999px;
				&:last-of-type {
					position: static;
					width: 100% !important;
					text-align: right;
					box-sizing: border-box;
					border-left: 0;
				}
			}
		}
		tr {
			margin: 0;
    		padding: 0;
			border: 0;
		}
		td {
			border: none;
			position: relative;
			padding-left: 50%;
		}
		tbody {
			td:first-of-type {
				padding-top: 15px;
				border-top: 1px solid #ddd;
				&:before {top:18px;}
			}
		}

td:before {
			content: attr(data-column);
			position: absolute;
			top: 13px;
			left: 10px;
			padding-right: 10px;
		}
	}
}

/* Remove unneeded space between label and field in vertical forms */
.controls > .radio:first-child,
.controls > .checkbox:first-child {
	padding-top: 0;

.form-horizontal & {
		padding-top: 5px;
	}
}

/* Align btn-group to label */
.form-horizontal .controls > .radio.btn-group:first-child {
	padding-top: 0;
}

/* Align btn-group-yesno to label */
.form-horizontal .controls > .radio.btn-group-yesno:first-child {
	padding-top: 2px;
}

/* Fix field media width */
input.field-media-input {
	width: auto;
}