sc-rounded-input-style.html

<dom-module id="sc-rounded-input-style">
	<template>
		<style>
			html,
			:host > * {
				--sc-rounded-input: {
					height: 37px;
					background: white;
					border-radius: 3px;
					border: var(--sc-rounded-input-border-width, 1px) solid var(--sc-rounded-input-border-color, #A1A1A1);
					box-sizing: border-box;
					margin-bottom: 5px;
					padding: 4px 5px 0 9px;
				}
			}

			nodecg-typeahead-input.sc-rounded-input {
				--nodecg-typeahead-combobox: {
					@apply --sc-rounded-input;
				};
			}

			vaadin-combo-box.sc-rounded-input {
				@apply --sc-rounded-input;
			}

			nodecg-typeahead-input.sc-rounded-input,
			vaadin-combo-box.sc-rounded-input {
				--paper-input-container: {
					top: -2px;
				};
				--paper-input-container-disabled: {
					top: 2px;
				};
				--paper-input-container-underline: {
					transform: translateY(-5px);
				};
				--paper-input-container-underline-focus: {
					position: relative;
					top: -5px;
				};
				--paper-input-container-underline-disabled: {
					transform: translateY(-2px);
				};
			}

			paper-input.sc-rounded-input,
			paper-dropdown-menu.sc-rounded-input {
				@apply --sc-rounded-input;
				--paper-input-container: {
					padding: 0;
				}
			}

			input.sc-rounded-input {
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				@apply --sc-rounded-input;
			}
		</style>
	</template>
</dom-module>