Initial commit

2018-06-29 00:00:48 -07:00
commit f72587d80e
59 changed files with 10681 additions and 0 deletions
@@ -0,0 +1,126 @@
+/* Button */
+
+	input[type="submit"],
+	input[type="reset"],
+	input[type="button"],
+	button,
+	.button {
+		@include vendor('appearance', 'none');
+		@include vendor('transition', (
+			'background-color #{_duration(transition)} ease-in-out',
+			'box-shadow #{_duration(transition)} ease-in-out',
+			'color #{_duration(transition)} ease-in-out'
+		));
+		border: 0;
+		border-radius: _size(border-radius);
+		cursor: pointer;
+		display: inline-block;
+		font-weight: _font(weight-bold);
+		height: _size(element-height);
+		line-height: _size(element-height);
+		padding: 0 1.75rem;
+		text-align: center;
+		text-decoration: none;
+		white-space: nowrap;
+
+		&.small {
+			font-size: 0.8rem;
+			height: _size(element-height) * 0.75;
+			line-height: _size(element-height) * 0.75;
+			padding: 0 1.25rem;
+		}
+
+		&.large {
+			font-size: 1.35rem;
+			height: _size(element-height) * 1.25;
+			line-height: _size(element-height) * 1.25;
+			padding: 0 2rem;
+		}
+
+		&.wide {
+			min-width: 13rem;
+		}
+
+		&.icon {
+			&:before {
+				margin-right: 0.5rem;
+			}
+		}
+
+		&.fit {
+			width: 100%;
+		}
+
+		&.disabled,
+		&:disabled {
+			@include vendor('pointer-events', 'none');
+			opacity: 0.25;
+		}
+	}
+
+	@mixin color-button($p: null) {
+		$highlight: _palette($p, highlight);
+
+		input[type="submit"],
+		input[type="reset"],
+		input[type="button"],
+		button,
+		.button {
+			background-color: transparent;
+			box-shadow: inset 0 0 0 1px _palette($p, fg-bold);
+			color: _palette($p, fg-bold) !important;
+
+			@if ($p == $highlight) {
+				&:hover {
+					background-color: transparentize(_palette($p, fg-bold), 0.9);
+
+					&:active {
+						background-color: transparentize(_palette($p, fg-bold), 0.75);
+					}
+				}
+			}
+			@else {
+				&:hover {
+					box-shadow: inset 0 0 0 1px _palette($highlight, bg);
+					color: _palette($highlight, bg) !important;
+
+					&:active {
+						background-color: transparentize(_palette($highlight, bg), 0.75);
+					}
+				}
+			}
+
+			&.primary {
+				box-shadow: none;
+
+				@if $p == $highlight {
+					background-color: _palette($p, fg-bold);
+					color: _palette($p, bg) !important;
+
+					&:hover {
+						background-color: transparentize(_palette($p, fg-bold), 0.125);
+						box-shadow: none;
+
+						&:active {
+							background-color: transparentize(_palette($p, fg-bold), 0.5);
+						}
+					}
+				}
+				@else {
+					background-color: _palette($highlight, bg);
+					color: _palette($highlight, fg-bold) !important;
+
+					&:hover {
+						background-color: lighten(_palette($highlight, bg), 5);
+						box-shadow: none;
+
+						&:active {
+							background-color: darken(_palette($highlight, bg), 5);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	@include color-button;