touchstonejs-ui/less/components/keypad.less

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

// 
// Keypad
// ==============================

// Wrapper
// ------------------------------

.Keypad {
	.display-flex();
	.flex-flow(row wrap);
	.translate3d(0,0,0);
	.transition-transform( 200ms cubic-bezier(0.77, 0, 0.175, 1) );
	font-size: 90%;
	height: 40%;
	position: relative;

	// taller devices need, proportionally, less space for the keyboard
	@media (min-height: 569px) {
		font-size: 100%;
		height: 33.33%;
	}
}

// by default the keypad is visible
// hide the keypad by applying the modifier "is-stowed"

.Keypad.is-stowed {
	.translate3d(0,100%,0);
}

// Cells
// ------------------------------

.Keypad-cell {
	.size(33.33%, 25%);
	padding-top: 1px;
	padding-left: 1px;

	&:nth-child(3n+1) {
		padding-left: 0;
	}
}

// Buttons
// ------------------------------

.Keypad-button {
	.square(100%);
	.display-flex();
	.flex-direction(column);
	.align-items(center);
	.justify-content(center);
	// .transition-transform(10ms ease-in-out);
	line-height: 1;
	position: relative;
	text-align: center;

	// remove buttons styles
	border: none;
	background: none;
	outline: none;
	-webkit-appearance: none;

	// disable user interaction (and provide visual feedback) with disabled buttons
	&.disabled {
		pointer-events: none;
		
		.Keypad-button-primary-label,
		.Keypad-button-secondary-label,
		.Keypad-button-icon {
			opacity: .3;
		}
	}
}

// labels

.Keypad-button-primary-label {
	font-size: 1.4em;
}
.Keypad-button-secondary-label {
	font-size: .8em;
}

// icons

.Keypad-button-icon {
	display: block;
	height: 35%;
	width: 100%;

	> svg {
		max-height: 100%;
		max-width: 100%;
	}
}

// Variants
// ------------------------------

// default

.Keypad--default .Keypad-button {
	background-color: darken(@body-bg, 5%);
	color: black;

	&.Tappable-active {
		background-color: darken(@body-bg, 10%);
	}

	// non-primary buttons e.g. decimal/delete
	&.is-auxiliary {
		background-color: darken(@body-bg, 15%);

		&.Tappable-active {
			background-color: darken(@body-bg, 20%);
		}
	}

	// colour any svg icons appropriately
	.svg-path {
		fill: black;
	}
}

// black translucent - best on light, colourful backgrounds

.Keypad--black-translucent .Keypad-button {
	background-color: rgba(0, 0, 0, 0.1);
	color: white;

	&.Tappable-active {
		background-color: rgba(0, 0, 0, 0.1);
	}

	// non-primary buttons e.g. decimal/delete
	&.is-auxiliary {
		background-color: rgba(0, 0, 0, 0.15);

		&.Tappable-active {
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	// colour any svg icons appropriately
	.svg-path {
		fill: white;
	}
}

// white translucent - best on dark, colourful backgrounds

.Keypad--white-translucent .Keypad-button {
	background-color: rgba(255, 255, 255, 0.45);
	color: black;

	&.Tappable-active {
		background-color: rgba(255, 255, 255, 0.35);
	}

	// non-primary buttons e.g. decimal/delete
	&.is-auxiliary {
		background-color: rgba(255, 255, 255, 0.25);

		&.Tappable-active {
			background-color: rgba(255, 255, 255, 0.15);
		}
	}

	// colour any svg icons appropriately
	.svg-path {
		fill: black;
	}
}