New 'checkbox-nice' form UI

Michel Felipe
1 parent 49a048fb
Showing 5 changed files with 60 additions and 3 deletions Show diff stats
src/app/index.scss
src/app/layout/scss/_forms.scss
src/app/layout/scss/_mixins.scss
src/app/layout/scss/skins/_whbl.scss
src/app/login/login.html
@@ -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";
@@ -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);
+	}
+}
@@ -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;
+}
@@ -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;
@@ -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>
...	...	@@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 {
82	82	@import "layout/scss/layout";
83	83	@import "layout/scss/sidebar";
84	84	@import "layout/scss/tables";
	85	+@import "layout/scss/forms";
...	...
...	...	@@ -0,0 +1,36 @@
	1	+label {
	2	+ cursor: pointer;
	3	+}
	4	+
	5	+.checkbox-nice {
	6	+ position: relative;
	7	+ padding-left: 15px;
	8	+
	9	+ input[type=checkbox] {
	10	+ visibility: hidden;
	11	+ }
	12	+ label {
	13	+ padding-top: 3px;
	14	+ }
	15	+ &.checkbox-inline > label {
	16	+ margin-left: 16px;
	17	+ }
	18	+ label:before {
	19	+ @include checkbox-mark(22px, 22px, 1px, 1px, #ffffff, 2px solid $main-bg-color);
	20	+ @include border-radius(3px);
	21	+ }
	22	+ label:after {
	23	+ @include checkbox-mark(12px, 7px, 7px, 6px, transparent, 3px solid #000);
	24	+ @include opacity(0);
	25	+
	26	+ border-top: none;
	27	+ border-right: none;
	28	+ transform: rotate(-45deg);
	29	+ }
	30	+ label:hover::after {
	31	+ @include opacity(0.3);
	32	+ }
	33	+ input[type=checkbox]:checked + label:after {
	34	+ @include opacity(1);
	35	+ }
	36	+}
...	...
...	...	@@ -3,3 +3,15 @@
3	3	border-radius: $radius;
4	4	background-clip: padding-box; /* stops bg color from leaking outside the border: */
5	5	}
	6	+
	7	+@mixin checkbox-mark($width, $height, $top, $left, $bg, $border, $content: "", $cursor: pointer, $position: absolute) {
	8	+ width: $width;
	9	+ height: $height;
	10	+ cursor: $cursor;
	11	+ position: $position;
	12	+ left: $left;
	13	+ top: $top;
	14	+ background: $bg;
	15	+ content: $content;
	16	+ border: $border;
	17	+}
...	...
...	...	@@ -306,6 +306,13 @@ $whbl-font-color: #16191c;
306	306	color: white;
307	307	}
308	308
	309	+ /* Form overrides */
	310	+ .checkbox-nice {
	311	+ label:after {
	312	+ border-color: $whbl-primary-color;
	313	+ }
	314	+ }
	315	+
309	316	}
310	317	.rtl.skin-whbl #content-wrapper {
311	318	border-left: 0;
...	...
...	...	@@ -12,9 +12,10 @@
12	12	<input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' \| translate}}" ng-model="vm.credentials.password">
13	13	</div>
14	14	<div class="form-inline">
15		- <div class="checkbox">
16		- <label>
17		- <input type="checkbox" > {{"auth.form.keepLoggedIn" \| translate}}
	15	+ <div class="checkbox-nice">
	16	+ <input type="checkbox" id="keep-logged">
	17	+ <label for="keep-logged">
	18	+ {{"auth.form.keepLoggedIn" \| translate}}
18	19	</label>
19	20	</div>
20	21	</div>
...	...