gate-theme.less

@import "_variables";

// This file produces styles for logic gates, connectors,
// inputs, and outputs.  It also has extendable selectors
// for active gates, which are reference-imported by each
// file that includes _themed-operators.less.

@remSize: 16px;

@background: #FFF3E0;
@borderColor: #FFA000;
@inactiveColor: #E0E0E0;
@inactiveHoverColor: #B3E5FC;
@activeColor: #FFC107;
@activeHoverColor: #FFB300;

@transitionDuration: @easing @duration;

@borderThickness: 2px / @remSize * 1rem;
@border: @borderThickness solid @borderColor;

@valueSize: 3rem + 2 * @borderThickness;	// The size of an input or output box.  Add a border thickness on each side to be covered by adjacent connectors.

@connectorThickness: .5rem;					// The length in the cross axis
@connectorCenterOffset: .5 * @connectorThickness + @borderThickness;	// The distance from the left/top edge to the center

@gateWidth: 4rem;							// The width of the entire gate object
@gateConcaveRadius: @gateWidth * .9;		// The radius of the circle carving out the concave part of OR/XOR gates
@gateInputOffset: 1rem;						// The distance from the edge of the gate to the center of the input connector.  Must match declared coordinates in the HTML.
@gateConcaveY: -@gateConcaveRadius * 1.8;	// The Y coordinate of the concave circle, relative to the gate
@gateConcaveX: @gateWidth / 2 - @gateConcaveRadius;	// The X coordinate of the concave circle, relative to the gate

@gateConcaveCenterY: -@gateConcaveY - @gateConcaveRadius;				// The distance from the center of the concave circle to the top of the gate
@gateConnectorNearOffset: @gateInputOffset - @connectorCenterOffset;	// The distance from the outer edge of the gate to the closest edge of the input connectors
@gateConnectorFarOffset: @gateInputOffset + @connectorCenterOffset;		// The distance from the outer edge of the gate to the far edge of the input connectors

// The offset of the entire gate object, from its
// declared Y coordinate.
// This is calculated to make sure that the outer 
// (away from the center of the gate) edge of the
// connector is flush with the circle.
@gateOffset: sqrt(pow(@gateConcaveRadius, 2)
				- pow(@gateWidth / 2 - @gateConnectorNearOffset, 2))
	- @gateConcaveCenterY;

// Applies a value at the current scale.
// This is used to set the base REM size
// and to work around an IE bug with REM
// values in line-heights for :after.
.scaleValue(@property, @value) {
	@{property}: unit(@value) * @remSize;
	@media (max-width: 640px), (max-height: 700px) {
		@{property}: 8px * unit(@value);
	}
}

:root {
	.scaleValue(font-size, 1);
	box-sizing: border-box;
}

.square(@size) {
	width: @size;
	height: @size;
}

// Draws a boxed a value (input or computed result).  The
// caller must extend .ActiveValueBox when active.
.ValueBox() {
	display: block;
	.square(@valueSize);
	box-sizing: border-box;
	background-color: @inactiveColor;
	border: @border;
	transition+: background @transitionDuration;

	position: relative;
	overflow: hidden;

	&:after {
		// Make the text element cover the parent border
		margin-left: -@borderThickness;
		margin-top: -@borderThickness;

		white-space: pre;
		content: '0\00000a1';
		font-size: 2rem;
		display: block;
		.square(@valueSize);
		.scaleValue(line-height, @valueSize);
		text-align: center;
		position: absolute;
		top: 0;
		transition: top @transitionDuration;
	}
}

// The size of concave circle atop OR and XOR gates.
.GateCircle() {
	.square(2 * @gateConcaveRadius);
	display: block;
	border-radius: 50%;
	position: absolute;
}

.ColorizeConnectors(@color) {
	+ div > .Connector {
		&, &:before {
			background-color: @color;
		}
	}
}

.Connectors.InactiveHover	{ .ColorizeConnectors(@inactiveHoverColor);	}
.Connectors.Active			{ .ColorizeConnectors(@activeColor);		}
.Connectors.ActiveHover		{ .ColorizeConnectors(@activeHoverColor);	}

// Applies active styles to a .ValueBox() element
.ActiveValueBox {
	background-color: @activeColor;
	&:after {
		top: -@valueSize;
	}
}

.Canvas input[type=checkbox] {
	// Hide the checkbox (but make sure it's still focusable), and draw
	// the subsequent label instead, since only Chrome allows :after on
	// checkboxes. To preserve scrolling behavior on focus, the <input>
	// must be explicitly positioned at the same location as the label.
	opacity: 0;

	+ label {
		.square(@valueSize);
		margin: -@borderThickness;
		padding: 0;
		cursor: pointer;
		transition+: box-shadow @transitionDuration;
		.ValueBox();

		&:hover {
			background-color: @inactiveHoverColor;
			&:extend(.Connectors.InactiveHover all);
		}
	}

	&:checked + label {
		&:extend(.ActiveValueBox all);
		&:extend(.Connectors.Active all);
		&:hover {
			background-color: @activeHoverColor;
			&:extend(.Connectors.ActiveHover all);
		}
	}

	&:focus + label {
		box-shadow: 0 0 5px 2px #E65100;
	}
}

.Canvas {
	@padding: 1rem;
	position: relative;

	// Add spacing around the content, without affecting
	// the offsets of absolutely positioned children, by
	// making the background & border extend outside the
	// element's boundaries
	overflow: visible;
	margin: @padding;
	&:before {
		content: '';
		display: block;
		background-color: @background;
		border: @borderThickness solid #FFB74D;
		position: absolute;
		top: -@padding;
		left: -@padding;
		right: -@padding;
		bottom: -@padding;
	}

	> *, > .Group > * {
		position: absolute !important;	// Override position: relative from checkboxes
	}
	> .Group {
		position: static !important;
	}
}

// A line connecting value boxes or combinators.
// These lines are laid out in style attributes,
// as if the line had zero thickness. Therefore,
// the position (top or left) sets the center of
// the line.
.Connector {
	background: @inactiveColor;
	transition: background @transitionDuration;
	z-index: 1;	 // Cover the borders of subsequent connectors.

	// Corners cover the joint between two connectors,
	// as a class applied to the second element.  They
	// are centered around the overlapping centers for
	// their two adjacent connectors, and have borders
	// to close the edges.
	&.Corner:before {
		content: '';
		display: block;
		position: absolute;

		// The corner must have the same dimensions as
		// the connectors.  Borders are added by every
		// direction separately for the correct sides.
		.square(@connectorThickness);
		transition: inherit;
		// Using inherit adds unwanted cascade to animations
		background-color: @inactiveColor;
	}

	&.Vertical {
		// Center the element in the cross axis, around the declared position
		width: @connectorThickness;
		margin-left: -@connectorCenterOffset;

		border-left: @border;
		border-right: @border;
		
		&.Corner:before {
			top: -@connectorCenterOffset;	// Cover the thickness of the adjoining connector, which is centered at our top
			left: -@borderThickness;		// Cover the parent's outer border
			border-top: @border;
			// Don't pad the edge facing our connector, 
			// so that the connector's border can cover
			// the pixel at the bend.
		}

		&.Corner.Left:before {
			border-right: @border;
			padding-left: @borderThickness;	// Stretch over the adjoining connector's borders
		}

		&.Corner.Right:before {
			border-left: @border;
			padding-right: @borderThickness;
		}

		&.Corner.Bottom:before {
			top: auto;
			bottom: -@connectorCenterOffset;	// Cover the thickness of the adjoining connector, which is centered at our right
			left: -@borderThickness;			// Cover the parent's outer border
			border-bottom: @border;
			border-top: none;
		}

		// A convex connector contains a chopped-off circle 
		// to match the concave curve at the top of a gate.
		// Because of the overflow: hidden, these cannot be
		// combined with corner connectors.
		&.Convex {
			overflow: hidden;
			// The main element just serves as a container to 
			// chop off the sides of the circle.
			background: none !important;	
			border: none;
			padding: 0 @borderThickness;	// Add padding to match the connector's border
			height: 1rem;	// Must be at least as tall as the visible part of the circle


			&:before {
				content: '';
				.GateCircle();
				// Using inherit adds unwanted cascade to animations
				background-color: @inactiveColor;
				transition: inherit;

				// Shift back to the center of the connector (see
				// Connector's negative margin, which centers the
				// visible portion)
				margin: 0 @connectorCenterOffset;	
				top: @gateConcaveY - @gateOffset;
			}
			&.Left:before {
				left: @gateConcaveX - @gateInputOffset;
			}
			&.Right:before {
				right: @gateConcaveX - @gateInputOffset;
			}

			// Add a border on the inner side of the connector
			// to cover the additional height (from the deeper
			// part of the concave circle)
			&:after {
				content: '';
				display: block;
				position: absolute;
				width: @gateWidth / 2 - @gateConnectorFarOffset;
				width: @gateConnectorFarOffset;
				// Distance from center to inner part of circle 
				// minus distance from center to the outer part
				// of the circle.
				height: sqrt(pow(@gateConcaveRadius, 2)
						   - pow(@gateWidth / 2 - @gateConnectorFarOffset, 2))
					 - (-@gateConcaveY + @gateOffset - @gateConcaveRadius)
					 - @borderThickness * .15;	// Subtract a pixel so the near edge of the border doesn't stretch beyond the curve
			}
			&.Left:after {
				right: 0;
				border-right: @border;
			}
			&.Right:after {
				left: 0;
				border-left: @border;
			}
		}

		// A junction covers the portion of the borders
		// that stick into the adjoining connector
		&.Junction.Top:before {
			content: '';
			display: block;
			background: @inactiveColor;
			transition: inherit;
			position: absolute;
			top: 0;
			right: -@borderThickness;			// Cover the parent's outer border
			width: @connectorThickness + 2 * @borderThickness;
			height: @connectorThickness / 2;	// Cover the distance from the center of the adjoining connector (our edge) to its border
		}
	}

	&.Horizontal {
		// Center the element in the cross axis, around the declared position
		height: @connectorThickness;
		margin-top: -@connectorCenterOffset;
		
		border-top: @border;
		border-bottom: @border;
		
		&.Corner.Left:before {
			left: -@connectorCenterOffset;	// Cover the thickness of the adjoining connector, which is centered at our left
			top: -@borderThickness;			// Cover the parent's outer border
			border-left: @border;
		}

		&.Corner.Right:before {
			right: -@connectorCenterOffset; // Cover the thickness of the adjoining connector, which is centered at our right
			top: -@borderThickness;			// Cover the parent's outer border
			border-right: @border;
		}

		&.Corner.Up:before {
			border-bottom: @border;
			padding-top: @borderThickness;
		}

		&.Corner.Down:before {
			border-top: @border;
			padding-bottom: @borderThickness;
		}

		// A junction covers the portion of the borders
		// that stick into the adjoining connector
		&.Junction.Right:before {
			content: '';
			display: block;
			background: @inactiveColor;
			transition: inherit;
			position: absolute;
			right: 0;
			top: -@borderThickness;			// Cover the parent's outer border
			width: @connectorThickness / 2;
			height: @connectorThickness + 2 * @borderThickness;
		}
	}
}

.Result {
	border-radius: @valueSize / 2;
	margin: -@borderThickness;
	.ValueBox();
}

.ActiveGate.OR, .ActiveGate.XOR {
	span:before, &:after {
		background-color: @activeColor;
	}
}
.ActiveGate.AND {
	background-color: @activeColor;
}
.ActiveGate.Result {
	+ div > .Result {
		&:extend(.ActiveValueBox all);
	}
}

.GateLabel() {
	font-size: 1.4rem;
	text-align: center;
}

.OrGate(@baseStraightHeight) {
	// The height of the entire tip portion, as expected
	// in element positions. The outgoing connector will
	// align to this height.  This height is not used in
	// the actual gate layout other than that alignment.
	@formalTipHeight: 3rem;			
	@tipRadius: @gateWidth;

	// Expand the straight portion to compensate for the negative margin,
	// then again to align the tip to the output connector. We calculate
	// the Y coordinate of the point along the curve where the connector
	// border reaches the tip.
	@straightHeight: @baseStraightHeight + @gateOffset
		+ (@formalTipHeight - sqrt(
			pow(@gateWidth, 2)
		  - pow(@gateWidth / 2 + @connectorThickness / 2, 2)));

	position: relative;
	width: @gateWidth;
	height: @straightHeight + @tipRadius;
	z-index: 0;
	margin-top: -@gateOffset;
	overflow: hidden; // Hide the rest of the concave circle (see below)
	// The straight portion is a separate element,
	// because it is shorter than the full parent.
	// This element also contains the label, which
	// extends into the bottom part.
	&:after {
		content: '';
		display: block;
		height: @straightHeight;
		background-color: @inactiveColor;
		border-left: @border;
		border-right: @border;
		transition: background @transitionDuration;

		.GateLabel();
		.scaleValue(line-height, @straightHeight + @tipRadius * .75);
		position: relative;
		z-index: 1;	// Cover the :before
	}
	// The concave curve on the top is implemented
	// as a large circle with the background color
	// to cover the top part of the straight part.
	&:before {
		content: '';
		.BlockingGateCircle();
		top: @gateConcaveY;
		z-index: 2;	// Cover the :after
	}
	.BlockingGateCircle() {
		.GateCircle();
		left: @gateConcaveX;
		box-sizing: border-box;
		background-color: @background;
		border: @border;
	}

	// To make the lower curve stop at an angle,
	// I make two curves that cover the complete
	// width of the element, and cut off half of
	// each one so that they meet in the middle.
	span {
		display: block;
		position: absolute;
		top: @straightHeight;
		height: @tipRadius;
		width: @gateWidth / 2;
		overflow: hidden;

		&:before {
			content: '';
			display: block;
			background-color: @inactiveColor;
			border-bottom: @border;
			position: absolute;
			height: @tipRadius;
			width: @gateWidth;
			transition: background @transitionDuration;
		}
	}

	span:first-child {
		left: 0;

		&:before {
			border-left: @border;
			border-bottom-left-radius: @tipRadius;
		}
	}

	span + span {
		right: 0;

		&:before {
			right: 0;
			border-right: @border;
			border-bottom-right-radius: @tipRadius;
		}
	}
}

.Gate.OR {
	.OrGate(1rem);
	&:after {
		content: 'OR';
	}
}

.Gate.XOR {
	@curveGap: .75rem; // The gap between the upper curve and the rest of the gate.
	@straightHeight: 2rem - @curveGap;
	.OrGate(@straightHeight + @curveGap);

	&:after {
		margin-top: @curveGap;
		height: @straightHeight + @gateOffset;
		content: 'XOR';
		.scaleValue(line-height, @straightHeight + @tipRadius * .56);
	}

	// The original circle from .OrGate() is now the upper 
	// curve, and is aligned to incoming connectors
	&:before {
		z-index: 3;	// This must be above the lower curve, or the border will be covered
	}

	// Add a second circle for the lower curve (the top of
	// the gate body)
	div {
		.BlockingGateCircle();
		top: @gateConcaveY + @curveGap;
		z-index: 2;	// THe must go between the :after (the staight part) and the :before (the upper curve)
	}
}

.Gate.AND {
	width: @gateWidth;
	height: 5rem;
	margin: -@borderThickness;	// Expand vertically so the connectors cover our border
	border-radius: 0 0 @gateWidth @gateWidth;
	background: @inactiveColor;
	border: @border;
	transition: background @transitionDuration;

	&:after {
		display: block;
		content: 'AND';
		.scaleValue(line-height, 5rem - @gateWidth / 5);
		.GateLabel();
	}
}