MusareReact/frontend/app/styles/specific/form.scss

@import "../colors";
@import "../breakpoints";

.customInput {
	color: $musare_color_primary_gray;
	display: block;
	margin-bottom: 16px;

	span {
		display: block;
		font-size: 12px;
		line-height: 16px;
		margin-left: 4px;
		margin-bottom: 5px;
	}

	> input, textarea {
		display: block;
		box-sizing: border-box;
		width: 100%;
		border: 1px solid $musare_color_primary_blue;
		font-size: 15px;
		line-height: 20px;
		padding: 10px;
		resize: none;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

		&.has-validation-errors {
			border-color: $musare_color_primary_red;
		}
	}

	.radio-options {
		label {
			input[type="radio"] {
				border: 0;
				clip: rect(0 0 0 0);
				height: 1px;
				margin: -1px;
				overflow: hidden;
				padding: 0;
				position: absolute;
				width: 1px;
			}

			input[type="radio"] + span::before {
				content: '';
				display: inline-block;
				width: 16px;
				height: 16px;
				vertical-align: -4px;
				border-radius: 50px;
				border: 4px solid $musare_color_white;
				background-color: white;
				//box-shadow: 0 0 0 0.15em #000;
				margin-right: 16px;
				//transition: 0.5s ease all;
			}

			input[type="radio"]:checked + span::before {
				background: $musare_color_primary_blue;
			}

			/*input {
				float: left;
			}*/

			span {
				font-size: 15px;
			}
		}
	}

	ul {
		display: block;
		list-style-position: inside;
		color: $musare_color_primary_red;
		margin-top: 4px;
		font-size: 12px;
		line-height: 16px;
	}
}

@mixin forPlaceholder() {
	&::placeholder, &::-webkit-input-placeholder {
		@content;
	}

	&:-moz-placeholder, &::-moz-placeholder {
		@content;
	}

	&:-ms-input-placeholder, &::-ms-input-placeholder {
		@content;
	}
}

// TODO: Optimize this
input[type=range] {
	height: 26px;
	-webkit-appearance: none;
	margin: 10px 0;
	width: 100%;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000;
	background: #C4C4C4;
	border-radius: 0px;
	border: 0px solid #C4C4C4;
}
input[type=range]::-webkit-slider-thumb {
	box-shadow: 0px 0px 0px #000000;
	border: 0px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 50px;
	background: #2FBEFF;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
	background: #C4C4C4;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 0px 0px 0px #000000;
	background: #C4C4C4;
	border-radius: 0px;
	border: 0px solid #C4C4C4;
}
input[type=range]::-moz-range-thumb {
	box-shadow: 0px 0px 0px #000000;
	border: 0px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 50px;
	background: #2FBEFF;
	cursor: pointer;
}
input[type=range]::-ms-track {
	width: 100%;
	height: 6px;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
	background: #C4C4C4;
	border: 0px solid #C4C4C4;
	border-radius: 0px;
	box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-fill-upper {
	background: #C4C4C4;
	border: 0px solid #C4C4C4;
	border-radius: 0px;
	box-shadow: 0px 0px 0px #000000;
}
input[type=range]::-ms-thumb {
	margin-top: 1px;
	box-shadow: 0px 0px 0px #000000;
	border: 0px solid #000000;
	height: 20px;
	width: 20px;
	border-radius: 50px;
	background: #2FBEFF;
	cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
	background: #C4C4C4;
}
input[type=range]:focus::-ms-fill-upper {
	background: #C4C4C4;
}