houdini/app/assets/stylesheets/components/inputs.css.scss

/* License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later */
@import 'mixins';

@mixin basicInputs {
	input[type="text"], input, input[type="email"], input[type="number"], input[type="password"], select {
		@content;
	}
}

@mixin inputStyleReset {
	color: $charcoal;
	padding: 4px 8px;
	font-size: 16px; // inputs should all be 16px to prevent zooming on mobile
	@include border-radius(0);
	@include transition(border-color 0.2s ease-out);
	border-top: 1px solid lighten($grey, 35%);
	border-right: 1px solid lighten($grey, 35%);
	border-left: 1px solid lighten($grey, 35%);
	border-bottom: 2px solid lighten($grey, 35%);
	margin-bottom: 12px;
	&:focus {
		border-bottom: 2px solid lighten($grey, 15%);
	}
}

@mixin clickableLabel {
	cursor: pointer;
	display: inline-block;
	position: relative;
	font-weight: normal;
	@include setColorAndHover($charcoal);
	margin: 0;
}


@include basicInputs {
	@include inputStyleReset;
	&.input--50 { max-width: 50px; }
	&.input--100 { max-width: 100px; }
	&.input--150 { max-width: 150px; }
	&.input--175 { max-width: 175px; }
	&.input--200 { max-width: 200px; }
	&.input--250 { max-width: 250px; }
	&.input--300 { max-width: 300px; }
	&.input--400 { max-width: 400px; }
	&.input--half { max-width: 48%; }
	&.input--mini { width: 3em; }
	&.input--small { width: 10em; }
	&.input--medium { width: 15em; }
	&.input--large { width: 20em; }
}

.input--prepend { position: relative; }
.input--prepend .prepend {
		position: absolute;
		left: 7px;
		top: 16px;
		font-weight: bold;
		line-height: 0;
		font-size: 13px;
		color: rgba($grey, 0.8);
	}
.input--prepend input { padding-left: 24px; }


.field input,
.field textarea {
	margin-bottom: 0;
}

input.date-picker {
	max-width: 100px;
}

.input--percent {
  position: relative;
}
.input--percent input {
  width: 58px;
  text-align: right;
  padding-right: 18px;
}
.input--percent:after {
  position: absolute;
  left: 40px;
  font-size: 12px;
  color: grey;
  top: 4px;
  content: '%';
}

select {
	width: 100%;
	height: 33px;
	background: white;
  line-height: 1.5;
	&.selectState {
		width: 70px;
	}
}

select.select {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAmCAYAAADTGStiAAAACXBIWXMAAAsTAAALEwEAmpwYAAA51WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMjEgNzkuMTU0OTExLCAyMDEzLzEwLzI5LTExOjQ3OjE2ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIKICAgICAgICAgICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTUtMDQtMTZUMTY6MDI6MTEtMDc6MDA8L3htcDpDcmVhdGVEYXRlPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNS0wNC0xNlQxNjoyODo1My0wNzowMDwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6TWV0YWRhdGFEYXRlPjIwMTUtMDQtMTZUMTY6Mjg6NTMtMDc6MDA8L3htcDpNZXRhZGF0YURhdGU+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDxwaG90b3Nob3A6Q29sb3JNb2RlPjM8L3Bob3Rvc2hvcDpDb2xvck1vZGU+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6NTUzOGQwOWUtNzgzZS00YTU4LTgzN2YtZTEwNTNkYmRjYWY3PC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD54bXAuZGlkOjYyODI5YmE4LWVlMTUtNDlkYi04NmUwLTZjMTc0ZGUyOWE3ZTwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD54bXAuZGlkOjYyODI5YmE4LWVlMTUtNDlkYi04NmUwLTZjMTc0ZGUyOWE3ZTwveG1wTU06T3JpZ2luYWxEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06SGlzdG9yeT4KICAgICAgICAgICAgPHJkZjpTZXE+CiAgICAgICAgICAgICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0iUmVzb3VyY2UiPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6YWN0aW9uPmNyZWF0ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0Omluc3RhbmNlSUQ+eG1wLmlpZDo2MjgyOWJhOC1lZTE1LTQ5ZGItODZlMC02YzE3NGRlMjlhN2U8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTUtMDQtMTZUMTY6MDI6MTEtMDc6MDA8L3N0RXZ0OndoZW4+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpzb2Z0d2FyZUFnZW50PkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0iUmVzb3VyY2UiPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6YWN0aW9uPnNhdmVkPC9zdEV2dDphY3Rpb24+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDppbnN0YW5jZUlEPnhtcC5paWQ6NTUzOGQwOWUtNzgzZS00YTU4LTgzN2YtZTEwNTNkYmRjYWY3PC9zdEV2dDppbnN0YW5jZUlEPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6d2hlbj4yMDE1LTA0LTE2VDE2OjI4OjUzLTA3OjAwPC9zdEV2dDp3aGVuPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6c29mdHdhcmVBZ2VudD5BZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCk8L3N0RXZ0OnNvZnR3YXJlQWdlbnQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpjaGFuZ2VkPi88L3N0RXZ0OmNoYW5nZWQ+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgICAgICA8L3JkZjpTZXE+CiAgICAgICAgIDwveG1wTU06SGlzdG9yeT4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzIwMDAwLzEwMDAwPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+NjU1MzU8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjMwPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjM4PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgI
	background-position: center right;
	background-repeat: no-repeat;
	padding-right: 1rem;
}

label {
	@include no-select;
	color: $sea-foam;
	display: inherit;
	font-weight: bold;
	text-align: left;
	margin-bottom: 5px;
}

input {
	width: 100%;
}

textarea {
	border-color: lighten($grey, 35%);
	border-bottom: 2px solid lighten($grey, 35%);
	@include transition(border-bottom 0.2s ease);
	color: $charcoal;
	padding: 5px 8px;
	font-size: 15px;
	line-height: 1.3;
	resize: none;
	width: 100%;
	&:focus {
		border-bottom: 2px solid lighten($grey, 15%);
	}
}

input[type="submit"] {
	@include border-radius(0);
}

input[type="file"] {
	height: auto;
	line-height: 1;
	border: none;
	&.disabled {
		pointer-events: none;
		@include opacity(0.5);
	}
}

input[type="file"]::-webkit-file-upload-button {
	padding: 7px;
	@include setBackgroundAndHover($sky);
	color: white;
	font-weight: bold;
	@include border-radius(3px);
	cursor: pointer;
	border: none;
	font-weight: bold;
	&:focus {outline:none;}
}

.input--mini {
	width: 3em;
}
.input--small {
	width: 10em;
}
.input--medium {
	width: 15em;
}
.input--large {
	width: 20em;
}

input[type='text'].input--bigText {
	font-size: 20px;
}

input[readonly] {
	@include transition(none);
	@include no-select;
	pointer-events: none;
	padding: 0 5px;
	font-size: 15px;
	line-height: 26px;
}
textarea[readonly] {
  @include transition(none);
  border-color: rgba(black, 0.02);
}

input.removeField {
	border-color: rgba($red, 0.1);
	@include transition(none);
	@include no-select;
	pointer-events: none;
}



input::-ms-clear { display: none; }

// Radio buttons
input[type='radio'] {
	display: none;
}
input[type='radio'] + label {
	@include clickableLabel;
	margin-bottom: 5px;
}
input[type='radio'] + label:before {
	content: '';
	margin-right: 8px;
	background-color: #fff;
	vertical-align: middle;
	display: inline-block;
	width: 17px;
	height: 17px;
	border: 1px #ccc solid;
	@include border-radius(50%);
}
input[type='radio'].radio--large  + label:before {
	width: 21px;
	height: 21px;
}
input[type='radio'] + label:hover:before {
	background-color: rgba(black, 0.1);
}
input[type='radio'] + label {
	cursor: pointer;
	position: relative;
}
input[type='radio']:checked + label:before {
	background-color: $bluegrass;
}
input[type='radio'].radio--both {
	@extend input[type='radio'];
	& + label {
		@include opacity(0.9);
	}
	&:checked + label:before {
		background-color: rgba($grey, 0.8);
	}
}

// Button for clearing out input fields
.clear-input {
	position: absolute;
	right: 6px;
	cursor: pointer;
	top: 6px;
	font-size: 18px;
	@include setColorAndHover(rgba($grey,0.4));
}

// Checkbox
fieldset.checkbox input,
input[type='checkbox'] {
	display: none;
}
fieldset.checkbox label,
input[type='checkbox'] + label {
	@include clickableLabel;
}
fieldset.checkbox label:before,
input[type='checkbox'] + label:before {
	content: '';
	vertical-align: text-bottom;
	display: inline-block;
	background: $fog;
	border: 1px #ccc solid;
	margin-right: 5px;
	float: none;
	width: 20px;
	height: 20px;
	line-height: 20px;
	padding: 0;
	text-align: center;
	font-family: 'FontAwesome';
	color: $sea-foam;
	font-size: 15px;
}
fieldset.checkbox label:hover:before,
input[type='checkbox']:checked + label:before {
	content: '\f00c';
}
fieldset.checkbox label:hover:before,
input[type='checkbox'] + label:hover:before {
	background-color: $sage;
}
.prepend--dollar { // add this class to the parent of the input
	@extend .u-prepend;
	@include basicInputs { padding-left: 18px;}
	&:before {
		padding: 0 8px;
		content: '$';
		font-size: 15px;
		line-height: 29px;
	}
}

.prepend--euro { // add this class to the parent of the input
	@extend .u-prepend;
	@include basicInputs { padding-left: 18px;}
	&:before {
		padding: 0 8px;
		content: '€';
		font-size: 15px;
		line-height: 29px;
	}
}

@media screen and (max-width: 350px) {
	@include basicInputs {
		font-size: 13px;
	}
}