whmcsCrosterTemplates/assets/less/forms.less

//some extra form variables

@input-border: @default-border-color;
@input-bg: @white;
@input-color: @baseFontcolor;

@input-focus-border: @themeColor;
@input-focus-bg: @white;
@input-focus-color: @gray-lighter;

form {
	.input-icon {
		position:relative;
		input {
			padding-left:33px !important;
		}
		[class*="fa-"], [class^="fa-"], [class*=" glyphicon-"], [class^="glyphicon-"] {
			display:block;
			position:absolute;
			margin:11px 2px 4px 10px;
			width:16px;
			min-width:16px;
			height:16px;
			font-size:16px;
			font-weight: 400;
		}
	}

	.input-icon.right input {
		padding-left:15px !important;
		padding-right:33px !important;
	}
	.input-icon.right [class*="fa-"], [class^="fa-"] {
		right:8px;
		float:right;
	}
	
	.labels {
		cursor:pointer;
	}
	.input-group-addon {
		border: 1px solid @default-border-color;
		
		[class*=" fa-"], [class^="fa-"], [class*=" glyphicon-"], [class^="glyphicon-"] {
			color: @baseFontcolor;
		}
	}
	.form-group {
		.help-block {
			font-size: @baseFontSize - 1;
			margin-bottom: 5px;
		}
		
	}
	select, select.form-control {
		background-repeat: no-repeat!important;
		background-size: 10px 10px!important;
		background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI2cHgiIHZpZXdCb3g9IjAgMCAxMCA2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0NC4xICg0MTQ1NSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+UGF0aCA0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlZlbmRvciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImRldmVsb3Blci1kYXNoYm9hcmQtc3VibWl0LXRoZW1lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTY1LjAwMDAwMCwgLTQ5NC4wMDAwMDApIiBmaWxsPSIjRDFEOEREIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ1MC4wMDAwMDAsIDQ1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoLTQiIHBvaW50cz0iNTE1IDQyIDUyNSA0MiA1MjAgNDgiPjwvcG9seWdvbj4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+')!important;
		background-position: right 10px center!important;
		-webkit-appearance: none!important;
	}
}

.form-control {
	 background-color:@input-bg;
	 border:1px solid @input-border;
	 box-shadow:none !important;
	 height: 43px;
	 
	 &:hover {
		border-color:darken(@input-border,10%);
	 }
	 &:focus {
		.box-shadow(none);
		color: @input-color;		
		border-color:@input-focus-border;
		background-color:@input-focus-bg;
		outline:0 none;
		.transition-duration(0.1s);
	 }
	 
	 &.disabled, &.readonly, &disabled, &readonly {
		background-color: darken(@gray-lighter, 2%);
	 }
}

#inputCaptcha.form-control {
	height: 29px;
 }

.input-lg {
	height: 46px;
}

.input-sm {
	height: 30px;
}

.input-group-append {
	.btn {
		padding: .375rem .75rem;
	}
}

.input-fw-200 {
	@media (min-width:541px) {
		max-width: 200px;
	}
}

.input-group-text, .input-group-append {
	[class*="fa-"], [class^="fa-"] {
		opacity: 0.50;
	}
}

@media (min-width: 768px) {
	.form-inline .form-control {
		min-width: 50px;
	}
}

.checkbox label, .radio label {
    margin-bottom: 0;
}

.tswicther[type=checkbox] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	+ span {
		display: flex;
		justify-content: center;
		cursor: pointer;
		font-size: 125%;
		transition: all .4s ease .2s;
		.fad {
			font-family: "Font Awesome 5 Duotone";
			&:before {
				content: "\f185";
			}
			&:after {
				content: "\10f185";
			}
		}
	}
	&:checked {
		+ span {
			transform: rotate(365deg);
			.fad {
				&:before {
					content: "\f186";
				}
				&:after {
					content: "\10f186";
				}
			}
		}	
	}
}


.select2-container--default {
	.select2-selection--single {
		.select2-selection__arrow {
			right: 5px;
		}
	}
}
.select2-container {
	width: 100%!important;
	min-width: 70px;
	
	.select2-selection--single, .select2-container--default {
		border: 1px solid @default-border-color;
		height: 43px;
		
		.select2-selection__rendered {
			line-height: 40px;
		}
		.select2-selection__arrow {
			height: 40px;
		}
	}
	
	.select2-selection--single {
		.select2-selection__rendered {
			padding-left: 0.75rem;
			padding-right: 0.75rem;
		}
	}

	.select2-dropdown {
		border: 1px solid @default-border-color;
	}
	.select2-search--dropdown .select2-search__field {
		outline: none!important;
		border-color: @default-border-color;
	}
	&.select2-container--default {
		.select2-results__option[aria-selected=true] {
			background-color: @gray-lighter;
		}
		.select2-results__option--highlighted.select2-results__option--selectable,
		.select2-results__option--highlighted[aria-selected] {
			background-color: @themeColor!important;
		}
	}
}