Toggle and Checkbox [ADD] New lui inputs

LuccaSA · Jul 24, 2015 · d557ac8 · d557ac8
1 parent e93c6ee
commit d557ac8
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 5 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -13,7 +13,6 @@
 </head>
 <body>
 	<aside id="toc">
-		<div class="lui loader"></div>
 	</aside>
 
 
@@ -426,6 +425,22 @@ <h2 class="lui divider below">Inputs</h2>
 		!--><input type="text" placeholder="your-domain" class="lui input"><!--
 		!--><span class="lui addon">.com</span>
 		</div>
+
+		<div class="lui input checkbox">
+			<input type="checkbox" checked />
+			<label></label>
+		</div>
+
+		<div class="lui divider">
+			<h4 class="lui underline">Switch</h4>
+		</div>
+		<div class="lui input switch">
+			<input type="checkbox" checked>
+			<label>
+				<span></span>
+			</label>
+		</div>
+
 	</article>
 	<article id="lui-callout">
 		<h2 class="lui divider below">Callouts</h2>

diff --git a/demo/demo.min.css b/demo/demo.min.css
diff --git a/demo/less/demo.less b/demo/less/demo.less
@@ -48,11 +48,9 @@ code {
         margin: 0 30px 20px 0;
         padding: 0;
         display: inline-block;
-        overflow: hidden;
         text-align: center;
         i {
             color: #162a36;
-            overflow: hidden;
             font-size: 24px;
         }
         input {

diff --git a/less2/elements/_button.less b/less2/elements/_button.less
@@ -354,7 +354,7 @@
 	// Status
 	// ====
 	&.status.loading, &.status.ok, &.status.failure {
-		color: transparent !important;
+		color: transparent;
 	}
 	&.status.ok:after, &.status.failure:after {
 		margin: 0;

diff --git a/less2/elements/_input.less b/less2/elements/_input.less
@@ -124,3 +124,169 @@
 .lui.input.x-large {
     font-size: @lui_sizes-x-large;
 }
+
+
+/**
+ * Checkbox
+ * --------------------------------------------------------------------------- */
+
+.lui.input.checkbox {
+	display: inline-block;
+	vertical-align: middle;
+	position: relative;
+	height: 1.25em;
+	width: 1.25em;
+    border: 1px solid @border-color;
+    overflow: hidden;
+
+	input, label {
+		margin: 0;
+	}
+
+	input {
+		position: absolute;
+		left: 0; top: 0;
+		z-index: 4;
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+		opacity: 0;
+	}
+
+	label {
+		display: block;
+        box-sizing: border-box;
+		position: relative;
+        width: 100%;
+        height: 100%;
+
+		.lui_icon_maker(checkbox, left); // Before is unchecked
+		.lui_icon_maker(check, right); // After is checked
+
+        &:before, &:after {
+			position: absolute;
+			top: 50%; left: 50%;
+            -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+			z-index: 2;
+			font-size: 1.25em;
+			margin: 0;
+		}
+
+        &:before {
+            color: #FFF;
+            //text-shadow: 0 0 2px @border-color;
+            //box-shadow: 0 0 0 1px @border-color;
+        }
+
+        &:after {
+            z-index: 3;
+            color: @lui_colors-primary;
+            opacity: 0;
+            .lui_transition();
+        }
+	}
+
+	input:checked ~ label {
+        &:after {
+            opacity: 1;
+        }
+	}
+
+	&:hover label:after {
+		opacity: 0.5;
+	}
+}
+
+
+/**
+ * Toggle
+ * --------------------------------------------------------------------------- */
+
+.lui.input.switch {
+    @width: 4.5em;
+    @height: 2.25em;
+
+	display: inline-block;
+	vertical-align: middle;
+	position: relative;
+	height: @height;
+	width: @width;
+
+	input {
+		position: absolute;
+		z-index: 3;
+		width: 100%;
+		height: 100%;
+		cursor: pointer;
+		opacity: 0;
+		margin: 0;
+	}
+
+	label {
+		display: block;
+		width: 100%;
+		height: 100%;
+		position: relative;
+		background: @lui_colors-grey;
+		color: darken(@lui_colors-grey, 15);
+		.lui_transition();
+		.lui_icon_maker(check, left);
+		.lui_icon_maker(close, right);
+
+		&:before, &:after {
+			display: block;
+			position: absolute;
+			top: 0.5em;
+			z-index: 1;
+		}
+
+		&:before {
+			left: 0.5em;
+		}
+
+		&:after {
+			right: 0.5em;
+		}
+
+		span {
+			background: #fff;
+			display: block;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0.5em;
+			right: 0;
+			height: 1.5em;
+			width: 1.5em;
+			margin: auto 0;
+			z-index: 2;
+			.lui_transition();
+
+			&:before {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				content: '';
+				display: block;
+				height: 50%;
+				width: 0.1em;
+				background: @lui_colors-grey_light;
+				box-shadow: -0.2em 0 0 0 @lui_colors-grey_light, 0.2em 0 0 0 @lui_colors-grey_light;
+				margin: auto;
+				.lui_transition();
+			}
+		}
+	}
+
+	input:checked ~ label {
+		background: @lui_colors-primary;
+		color: darken(@lui_colors-primary, 15);
+	}
+
+	input:checked ~ label span {
+		left: 2.5em;
+	}
+}