touchstonejs-ui/less/components/passcode.less

React.js UI components for the TouchstoneJS platform http://touchstonejs.io

// 
// Pin Entry
// ==============================

@passcode-gutter:        4px;

// base

.Passcode {
	margin: 0 auto;
	max-width: 60%;
	text-align: center;
}

// label

.Passcode-label {
	// font-size: @font-size-sm;
}

// evenly space the fields

.Passcode-fields {
	.display-flex();
}

.Passcode-field {
	.flex(1,0,0);
	margin: @passcode-gutter;
	position: relative;
}

// simulate inputs

.Passcode-input {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: inset 0 -4px 0 currentColor;
	bottom: 0;
	height: 60px;
	left: @passcode-gutter;
	right: @passcode-gutter;
	position: relative;
	text-align: center;
	width: 100%;

	&:after {
		.square(16px);
		.translateY(-50%);
		background-color: currentColor;
		border-radius: 50%;
		bottom: 0;
		content: "";
		display: none;
		left: 0;
		margin: 0 auto;
		position: absolute;
		right: 0;
		top: 0;
		top: 50%;
	}

	// remove all browser styles
	&,
	&:hover,
	&:active,
	&:focus {
		outline: none;
		-webkit-appearance: none;
	}

	// fill value
	&.has-value {
		box-shadow: none;
		
		&:after {
			display: block;
		}
	}
}