Commit e3d5063403833d8f0a1ebaa182374b4ccc93499c
1 parent
49a048fb
New 'checkbox-nice' form UI
Showing
5 changed files
with
60 additions
and
3 deletions
Show diff stats
src/app/index.scss
| @@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 { | @@ -82,3 +82,4 @@ h1, h2, h3, h4, h5 { | ||
| 82 | @import "layout/scss/layout"; | 82 | @import "layout/scss/layout"; |
| 83 | @import "layout/scss/sidebar"; | 83 | @import "layout/scss/sidebar"; |
| 84 | @import "layout/scss/tables"; | 84 | @import "layout/scss/tables"; |
| 85 | +@import "layout/scss/forms"; |
| @@ -0,0 +1,36 @@ | @@ -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 | +} |
src/app/layout/scss/_mixins.scss
| @@ -3,3 +3,15 @@ | @@ -3,3 +3,15 @@ | ||
| 3 | border-radius: $radius; | 3 | border-radius: $radius; |
| 4 | background-clip: padding-box; /* stops bg color from leaking outside the border: */ | 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 | +} |
src/app/layout/scss/skins/_whbl.scss
| @@ -306,6 +306,13 @@ $whbl-font-color: #16191c; | @@ -306,6 +306,13 @@ $whbl-font-color: #16191c; | ||
| 306 | color: white; | 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 | .rtl.skin-whbl #content-wrapper { | 317 | .rtl.skin-whbl #content-wrapper { |
| 311 | border-left: 0; | 318 | border-left: 0; |
src/app/login/login.html
| @@ -12,9 +12,10 @@ | @@ -12,9 +12,10 @@ | ||
| 12 | <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="vm.credentials.password"> | 12 | <input type="password" class="form-control" id="passwd" placeholder="{{'auth.form.password' | translate}}" ng-model="vm.credentials.password"> |
| 13 | </div> | 13 | </div> |
| 14 | <div class="form-inline"> | 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 | </label> | 19 | </label> |
| 19 | </div> | 20 | </div> |
| 20 | </div> | 21 | </div> |