From e3d5063403833d8f0a1ebaa182374b4ccc93499c Mon Sep 17 00:00:00 2001
From: Michel Felipe <mfelipeof@gmail.com>
Date: Wed, 15 Jun 2016 16:18:57 -0300
Subject: [PATCH] New 'checkbox-nice' form UI

---
 src/app/index.scss                   |  1 +
 src/app/layout/scss/_forms.scss      | 36 ++++++++++++++++++++++++++++++++++++
 src/app/layout/scss/_mixins.scss     | 12 ++++++++++++
 src/app/layout/scss/skins/_whbl.scss |  7 +++++++
 src/app/login/login.html             |  7 ++++---
 5 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 src/app/layout/scss/_forms.scss

diff --git a/src/app/index.scss b/src/app/index.scss
index 8435161..4e0eefc 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 {
 @import "layout/scss/layout";
 @import "layout/scss/sidebar";
 @import "layout/scss/tables";
+@import "layout/scss/forms";
diff --git a/src/app/layout/scss/_forms.scss b/src/app/layout/scss/_forms.scss
new file mode 100644
index 0000000..9939a40
--- /dev/null
+++ b/src/app/layout/scss/_forms.scss
@@ -0,0 +1,36 @@
+label {
+  cursor: pointer;
+}
+
+.checkbox-nice {
+	position: relative;
+	padding-left: 15px;
+
+	input[type=checkbox] {
+		visibility: hidden;
+	}
+	label {
+		padding-top: 3px;
+	}
+	&.checkbox-inline > label {
+		margin-left: 16px;
+	}
+	label:before {
+    @include checkbox-mark(22px, 22px, 1px, 1px, #ffffff, 2px solid $main-bg-color);
+		@include border-radius(3px);
+	}
+	label:after {
+    @include checkbox-mark(12px, 7px, 7px, 6px, transparent, 3px solid #000);
+		@include opacity(0);
+
+		border-top: none;
+		border-right: none;
+		transform: rotate(-45deg);
+	}
+	label:hover::after {
+		@include opacity(0.3);
+	}
+	input[type=checkbox]:checked + label:after {
+		@include opacity(1);
+	}
+}
diff --git a/src/app/layout/scss/_mixins.scss b/src/app/layout/scss/_mixins.scss
index 37063cb..dcb23e5 100644
--- a/src/app/layout/scss/_mixins.scss
+++ b/src/app/layout/scss/_mixins.scss
@@ -3,3 +3,15 @@
 	border-radius: $radius;
 	background-clip: padding-box; /* stops bg color from leaking outside the border: */
 }
+
+@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
+	width: $width;
+	height: $height;
+	cursor: $cursor;
+	position: $position;
+	left: $left;
+	top: $top;
+	background: $bg;
+	content: $content;
+	border: $border;
+}
diff --git a/src/app/layout/scss/skins/_whbl.scss b/src/app/layout/scss/skins/_whbl.scss
index a915a40..1b15d03 100644
--- a/src/app/layout/scss/skins/_whbl.scss
+++ b/src/app/layout/scss/skins/_whbl.scss
@@ -306,6 +306,13 @@ $whbl-font-color: #16191c;
 		color: white;
 	}
 
+	/* Form overrides */
+	.checkbox-nice {
+		label:after {
+			border-color: $whbl-primary-color;
+		}
+	}
+
 }
 .rtl.skin-whbl #content-wrapper {
 	border-left: 0;
diff --git a/src/app/login/login.html b/src/app/login/login.html
index cc74405..a4ca688 100644
--- a/src/app/login/login.html
+++ b/src/app/login/login.html
@@ -12,9 +12,10 @@
       <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="vm.credentials.password">
     </div>
     <div class="form-inline">
-      <div class="checkbox">
-        <label>
-          <input type="checkbox" > {{"auth.form.keepLoggedIn" | translate}}
+      <div class="checkbox-nice">
+        <input type="checkbox" id="keep-logged">
+        <label for="keep-logged">
+          {{"auth.form.keepLoggedIn" | translate}}
         </label>
       </div>
     </div>
--
libgit2 0.21.2