feat(styling): enhancement

Author: jyounce

src/client/styles/base/last.scss

@@ -0,0 +1,17 @@
+/*************************
+ * IMPORT THIS FILE LAST!
+ *************************/
+:host([hidden]) {
+	display: none;
+}
+
+input[hidden] {
+	display: none;
+}
+
+.form-control {
+	&[disabled] {
+		opacity: .65;
+		pointer-events: none;
+	}
+}

src/client/styles/main/checkbox.scss renamed to src/client/styles/layout/checkbox.scss

@@ -3,11 +3,9 @@
  ***********/
 .checkbox {
 	position: relative;
-	top: remy(1);
-	margin-right: remy(6);
-	border: 1px solid mapGet($formControlColors, borders, checkbox, default);
-	&::before,
-	&::after {
+	top: -1px;
+	margin-right: 6px;
+	&::before, &::after {
 		opacity: 0;
 		position: absolute;
 		transition: all .3s;
@@ -26,15 +24,15 @@
 	height: $dim;
 	min-width: $dim;
 	min-height: $dim;
-	&::before { // outer circle
+	&::before { // outer square
 		$dim: 220%;
 		$coords: -61%;
 		top: $coords;
 		left: $coords;
 		width: $dim;
 		height: $dim;
 	}
-	&::after { // the dot
+	&::after { // the check
 		$dim: 50%;
 		$coords: 28%;
 		$width: remy(3.5);
@@ -51,25 +49,8 @@
 /* States
  *********/
 .sublabel {
-	&:focus {
-		outline: none;
-	}
-	&.active {
-		font-weight: 400;
-		letter-spacing: .025em;
-	}
-	&:focus .checkbox,
-	&:hover .checkbox,
-	&.active .checkbox {
-		border-color: mapGet($formControlColors, borders, active, default);
-	}
+	&:focus { outline: none; }
 	&:focus .checkbox::before,
-	&:hover .checkbox::before {
-		opacity: .1;
-		background-color: mapGet($formControlColors, bg, active, default);
-	}
-	&.active .checkbox::after {
-		opacity: 1;
-		border-color: mapGet($formControlColors, bg, active, default);
-	}
+	&:hover .checkbox::before { opacity: .1; }
+	&.active .checkbox::after { opacity: 1; }
 }

src/client/styles/layout/host.scss

@@ -0,0 +1,21 @@
+/*******
+ * HOST
+ *******/
+:host {
+	all: initial; // reset all styles first
+	contain: layout style; // paint cuts off the label above
+}
+
+:host {
+	width: 100%;
+	margin-bottom: 25px;
+	display: inline-block;
+}
+:host([inline]) {
+	width: auto;
+	margin-right: 15px;
+}
+:host([inline][right]) {
+	margin-right: 0;
+	margin-left: 15px;
+}

src/client/styles/layout/labels.scss

@@ -0,0 +1,13 @@
+/********
+ * LABEL
+ ********/
+.label {
+	margin-bottom: 12px;
+	cursor: text;
+}
+
+.sublabel {
+	display: flex;
+	cursor: pointer;
+	margin-bottom: 12px;
+}

src/client/styles/layout/options.scss

@@ -0,0 +1,26 @@
+/**********
+ * OPTIONS
+ **********/
+.form-control {
+	&.horizontal {
+		flex-direction: row;
+		.label {
+			align-self: flex-start;
+			margin-right: 15px;
+		}
+	}
+	&.right {
+		align-items: flex-end;
+		justify-content: flex-end;
+		.sublabel {
+			flex-direction: row-reverse;
+		}
+		.checkbox {
+			margin-right: 0;
+			margin-left: 6px;
+		}
+		.subtext {
+			text-align: right;
+		}
+	}
+}

src/client/styles/layout/root.scss

@@ -0,0 +1,10 @@
+/*****************
+ * COMPONENT ROOT
+ *****************/
+.form-control {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	margin-bottom: -12px;
+}

src/client/styles/layout/subtext.scss

@@ -0,0 +1,8 @@
+/**********
+ * SUBTEXT
+ **********/
+.subtext {
+	margin: -6px 0 12px; // 4px
+	padding: 0 0 0 1px;
+	width: 100%;
+}