formflex.less

//////////////////////////////// BASIC FORM ELEMENTS
[class^="ffx-"], [class^="ffx-"] * {
box-sizing: border-box;
}

[class^="ffx-"]::-webkit-input-placeholder,
.wpcf7-form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: @formflex_input_fontcolor;
opacity: 0.8;
}
[class^="ffx-"]:-moz-placeholder,
.wpcf7-form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: @formflex_input_fontcolor;
opacity: 0.8;
}
[class^="ffx-"]::-moz-placeholder,
.wpcf7-form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
color: @formflex_input_fontcolor;
opacity: 0.8;
}
[class^="ffx-"]:-ms-input-placeholder,
.wpcf7-form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: @formflex_input_fontcolor;
opacity: 0.8;
}
[class^="ffx-"]::-ms-input-placeholder,
.wpcf7-form-control::-ms-input-placeholder { /* Microsoft Edge */
color: @formflex_input_fontcolor;
opacity: 0.8;
}

.ffx-input,
.wpcf7-text {
display: block;
height: @formflex_input_height;
border: 1px solid @formflex_bd;
padding: 0 5px;
margin: 0;
font-size: @formflex_input_font_size;
color: @formflex_input_fontcolor;
border-radius: @formflex_input_round;
transition: 0.3s;
background-color: @formflex_input_bgcolor;
font-weight: @formflex_input_font_weight;
max-width: 100%;
width: 100%;
	&[readonly],&.readonly {
	border-color: transparent !important;
	background-color: #fff !important;
	}
	&:hover {
	border-color: @formflex_bd_hover;
	outline:0px !important;
	}
	&:active {
	outline:0px !important;
	}
	&:focus {
	outline:0px !important;
	}
}

.ffx-name, .ffx-legend, .wpcf7-list-item-label {
display: block;
margin: 0;
font-size: @formflex_name_fz;
color: @formflex_name_color;
border: none;
font-weight: @formflex_name_font_weight;
padding: 10px 0;
	i {
	font-size: 18px;
	color: @formflex_name_color;
	width: 20px;
	}
	em {
	color: @formflex_name_color;
	}
	&.ffx-legend {
	margin: 0;
	}
}

.ffx-textarea,
.wpcf7-textarea {
display: block;
border: 1px solid @formflex_bd;
margin: 0;
padding: 5px;
font-size: @formflex_input_font_size;
color: @formflex_input_fontcolor;
background-color: @formflex_input_bgcolor;
min-height: 100px;
height: 100px;
width: 100%;
max-width: 100%;
min-width: 100%;
border-radius: @formflex_input_round;
font-weight: @formflex_input_font_weight;
	&:hover {
	border-color: @formflex_bd_hover;
	outline:0px !important;
	}
	&:active {
	outline:0px !important;
	}
	&:focus {
	outline:0px !important;
	}
	&[disabled=disabled] {
	background-color: #eee;
	}
}

.ffx-select,
.wpcf7-select {
border: 1px solid @formflex_bd;
overflow: hidden;
background-image: url(../img/ffx-select-arrow-on.svg);
background-repeat: no-repeat;
background-position: top right;
background-size: auto @formflex_input_height;
height: @formflex_input_height;
background-color: @formflex_input_bgcolor;
display: block;
border-radius: @formflex_input_round;
height: @formflex_input_height;
line-height: normal !important;
min-width: 100px;
color: @formflex_input_fontcolor;
-webkit-appearance:none;
-moz-appearance : none;
appearance: none;
font-size: @formflex_input_font_size;
padding-left: 5px;
padding-right: @formflex_input_height;
font-weight: @formflex_input_font_weight;
position: relative;
margin: 0;
max-width: 100%;
width: 100%;
	&:hover {
	background-image: url(../img/ffx-select-arrow-off.svg);
	}
	option {
	background-color: @formflex_option_bgcolor;
	}
	&:disabled {
	background-color: #eee;
	}
	&:focus {
	outline: none;
	}
	&:first-child {
	margin-left: 0;
	}
}

.ffx-file {
position: relative;
overflow: hidden;
margin: 0;
vertical-align: top;
	.ffx-file__infos {
	border: 1px solid @formflex_bd;
	border-right: 0;
	height: @formflex_input_height;
	line-height: @formflex_input_height;
	display: block;
	float: left;
	width: 100%;
	padding: 0 5px;
	font-size: @formflex_input_font_size;
	color: @formflex_input_fontcolor;
	background-color: @formflex_input_bgcolor;
	font-weight: @formflex_input_font_weight;
	}
	.ffx-file__btn {
	background-color: @formflex_main_color_theme;
	height: @formflex_input_height;
	line-height: @formflex_input_height;
	float: left;
	color: #fff;
	font-size: @formflex_input_font_size;
	width: 100px;
	text-align: center;
	position: absolute;
	top: 0;
	right: 0;
	}
	input {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	opacity: 0;
	filter: alpha(opacity=0);
	transform: translate(-200px, 0) scale(6);
	font-size: 400px;
	direction: ltr;
	cursor: pointer;
	}
	&:hover {
		.ffx-file__btn {
		background-color: @formflex_main_color_theme_hover;
		}
	}
}

.ffx-checkskin,
.wpcf7-list-item>label {
min-height: 10px;
position: relative;
display: block;
margin: 5px 0;
cursor: pointer;
	input {
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	}
	.ffx-name,
	.wpcf7-list-item-label {
	padding: 0;
	padding-left: @formflex_input_height + 10 + @formflex_checkskin_input_size_decal;
	margin-left: 0;
	min-height: @formflex_input_height + @formflex_checkskin_input_size_decal;
	padding-top: 0;
	bottom: 0;
	vertical-align: top;
	display: flex;
	align-items: center;
	position: relative;
	}
	.ffx-name::before,
	.wpcf7-list-item-label::before {
	height:  @formflex_input_height + @formflex_checkskin_input_size_decal;
	line-height: @formflex_input_height + @formflex_checkskin_input_size_decal;
	width: @formflex_input_height  + @formflex_checkskin_input_size_decal;
	position: relative;
	top: @formflex_checkskin_input_size_decal/2*-1;
	text-align: center;
	background-color: @formflex_checkskin_bg_color;
	border: 1px solid @formflex_checkskin_bd_color;
	color: @formflex_checkskin_iconcolor;
	overflow: hidden;
	position: absolute;
	left: 0;
	vertical-align: top;
	box-sizing: border-box;
	display: block;
	content: ' ';
	}
	&:hover {
		.ffx-name,
		.wpcf7-list-item-label {
		color: @formflex_name_color_hover;
			&::before {
			border-color: @formflex_checkskin_bd_color_hover;
			}
		}
	}
	input[type="radio"] + .ffx-name,
	input[type="radio"] + .wpcf7-list-item-label {
		&::before {
		border-radius: 100px;
		}
	}
	input[type="checkbox"] + .ffx-name,
	input[type="checkbox"] + .wpcf7-list-item-label {
		&::before {
		border-radius: @formflex_checkskin_checkbox_round;
		}
	}
	input:checked + .ffx-name,
	input:checked + .wpcf7-list-item-label {
		&::before {
		border: none;
		// svg in background
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 442.5 442.5'%3E%3Cpath d='M434.5 98.5l-38.8-38.8c-5.3-5.3-11.8-8-19.4-8 -7.6 0-14.1 2.7-19.4 8L169.6 247.2l-83.9-84.2c-5.3-5.3-11.8-8-19.4-8 -7.6 0-14.1 2.7-19.4 8L8 201.9C2.7 207.2 0 213.7 0 221.3c0 7.6 2.7 14.1 8 19.4l103.4 103.3 38.8 38.8c5.3 5.3 11.8 8 19.4 8 7.6 0 14.1-2.7 19.4-8l38.8-38.8L434.5 137.3c5.3-5.3 8-11.8 8-19.4C442.5 110.3 439.9 103.8 434.5 98.5z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 40%;
		background-color: @formflex_checkskin_bg_color_checked;
		}
	}
	input:checked + .ffx-name:hover,
	input:checked + .wpcf7-list-item-label:hover {
		&::before {
		background-color: @formflex_checkskin_bg_color_checked_hover;
		}
	}
	input:active + .ffx-name,
	input:active + .wpcf7-list-item-label {
		&::before {
		background-color: @formflex_checkskin_bg_color_mousedown !important;
		height: @formflex_input_height + @formflex_checkskin_input_size_decal;
		line-height: @formflex_input_height + @formflex_checkskin_input_size_decal;
		width: @formflex_input_height + @formflex_checkskin_input_size_decal;
		border: none;
		}
	}
}

//////////////////////////////// CONTAINER FORM ELEMENTS

.ffx-label {
min-height: 10px;
position: relative;
display: block;
margin: 5px 0;
}

.ffx-search {
position: relative;
padding: 0;
margin: 0;
border: none;
	button {
	position: absolute;
	z-index: 2;
	top: 0px;
	height: @formflex_input_height ;
	width: @formflex_input_height;
	line-height: @formflex_input_height;
	left: 0px;
	padding: 0;
	font-size: @formflex_icons_fz;
	color: @formflex_input_fontcolor;
	border: none;
	background-color: transparent;
	cursor: pointer;
		&:hover {
		color: @formflex_main_color_theme_hover !important;
		outline:0px !important;
		}
		&:active {
		outline:0px !important;
		}
		&:focus {
		outline:0px !important;
		}
	}
	.ffx-label {
	margin-top: 0;
	margin-bottom: 0;
		.ffx-input {
		padding-left: @formflex_input_height;
		margin-left: 0;
		}
	}
}

.ffx-fieldset {
padding: 0;
border: none;
margin: 5px 0;
position: relative;
@media all and (min-width:@formflex_mobile_size_switch) {
flex-wrap: wrap;
display: flex;
align-items: flex-end;
margin-right: -5px;
	.ffx-label, .ffx-checkskin {
	min-height: 10px;
	margin: 0;
	}
	.ffx-legend {
	flex-basis: 100%;
	}
	.ffx-label {
	flex-grow: 1;
	margin-right: 5px;
	}
	.ffx-buttonsset {
	margin-right: 5px;
	}
	.ffx-dragzone {
	margin-right: 5px;
	}
	.ffx-checkskin {
	margin-right: 10px;
	}
}
@media all and (max-width:@formflex_mobile_size_switch) {
display: block;
	.ffx-label, .ffx-checkskin {
	display: block;
	}
}
}

//////////////////////////////// HELPERS ELEMENTS

.ffx-round-icon {
display: block;
height: @formflex_input_height;
line-height: @formflex_input_height;
width: @formflex_input_height;
text-align: center;
background-color: @formflex_main_color_theme;
font-size: @formflex_icons_fz;
color: #fff;
border-radius: 100px;
cursor: pointer;
border: none;
display: inline-block;
	&:hover {
	background-color: @formflex_main_color_theme_hover;
	}
	&.ffx-round-icon--delete {
	display: none;
	}
	&.ffx-round-icon--dupplicate {
	display: none;
	}
	&.ffx-round-icon--green {
	background-color: yellowgreen;
		&:hover {
		background-color: #8DBA2C;
		}
	}
	&.ffx-round-icon--gray-on-white {
	background-color: #fff;
	color: #666;
		&:hover {
		background-color: #fff;
		color: #000;
		}
	}
	&.ffx-round-icon--blue {
	background-color: #00BFFF;
		&:hover {
		background-color: #04A5DB;
		}
	}
	&.ffx-round-icon--red {
	background-color: red;
		&:hover {
		background-color: #C61111;
		}
	}
}
.ffx-clone .ffx-round-icon--delete {
display: inline-block;
}
.dupplicate_wrapper .ffx-round-icon--dupplicate {
display: inline-block;
}

.ffx-lang-menu {
overflow: hidden;
border-bottom: 1px solid @formflex_bd;
list-style-type: none;
margin: 0;
padding: 0;
	li {
	float: left;
	padding: 5px 15px;
	background-color: @formflex_main_color_theme;
	font-size: @formflex_input_font_size;
	color: #fff;
	cursor: pointer;
	margin-right: 1px;
		&:hover, &.selected {
		background-color: darken(@formflex_main_color_theme,20%);
		color: #fff;
		}
	}
}

.ffx-children-wrapper .ffx-round-icon--delete {
display: inline-block;
}

.ffx-children-wrapper {
margin-left: @formflex_input_height;
}

.ffx-error {
display: none;
position: absolute;
background: #a31916;
border-radius: 3px;
	.ffx-error__info {
	padding: 5px;
	white-space: nowrap;
	font-size: 10px;
	color: #fff;
	vertical-align: middle;
	position: relative;
	z-index: 2;
	font-weight: 400;
	font-size: 12px;
	display: block;
	}
	.ffx-error__arrow {
	background: #a31916;
	transform: rotate(45deg);
	height: 10px;
	width: 10px;
	position: absolute;
	z-index: 1;
	bottom: -5px;
	left: 10px;
	display: block;
	}
}

//////////////////////////////// FORM 7 style

div.wpcf7 .ajax-loader {
display: block;
margin: auto;
padding: 15px;
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
}

div.wpcf7-response-output {
margin: 0;
padding: 15px;
font-size: @formflex_name_fz;
color: @formflex_name_color;
font-weight: @formflex_name_font_weight;
}

.wpcf7-form-control-wrap {
display: block;
	.wpcf7-checkbox, .wpcf7-radio, .wpcf7-acceptance {
	display: block;
		.wpcf7-list-item {
		display: block;
		margin: 0;
		}
	}
}