style(tickets): updated check box

polonel · Nov 4, 2018 · f790c28 · f790c28
1 parent cc80b50
commit f790c28
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 6 deletions.
diff --git a/src/sass/app.sass b/src/sass/app.sass
@@ -183,5 +183,6 @@ input[type="file"], input[type="checkbox"], input[type="radio"], select
 @import "partials/c3"
 @import "partials/easymde"
 @import "partials/searchbox"
+@import "partials/svgcheck"
 //
 @import "partials/ui"
diff --git a/src/sass/partials/svgcheck.sass b/src/sass/partials/svgcheck.sass
@@ -0,0 +1,52 @@
+.svgcheck
+  cursor: pointer
+  position: relative
+  top: -2px !important
+  margin: 0 !important
+  width: 16px
+  height: 16px
+  -webkit-tap-highlight-color: transparent
+  transform: translate3d(0,0,0)
+  &:before
+    content: ""
+    position: absolute
+    top: -15px
+    left: -15px
+    width: 24px
+    height: 24px
+    border-radius: 50%
+    // background: rgba(#223254,.03)
+    opacity: 0
+    transition: opacity .2s ease
+  svg
+    position: relative
+    z-index: 1
+    fill: none
+    stroke-linecap: butt
+    stroke-linejoin: round
+    stroke: lighten($text_color, 30%)
+    stroke-width: 2
+    transform: translate3d(0,0,0)
+    transition: all .2s ease
+    path
+      stroke-dasharray: 60
+      stroke-dashoffset: 0
+    polyline
+      stroke-dasharray: 22
+      stroke-dashoffset: 67
+  &:hover
+    &:before
+      opacity: 1
+    svg
+      stroke: $accent_color
+
+.svgcheckinput:checked + .svgcheck
+  svg
+    stroke: $accent_color
+    path
+      stroke-dashoffset: 60
+      transition: all .3s linear
+    polyline
+      stroke-dashoffset: 42
+      transition: all .2s linear
+      transition-delay: .15s
diff --git a/src/views/tickets.hbs b/src/views/tickets.hbs
@@ -118,8 +118,13 @@
                         {{#if_eq status compare=0}}
                             <tr class="ticket-new {{#overdue ../data.common.showOverdue date updated priority.overdueIn}} overdue {{/overdue}}" data-ticket="{{uid}}" data-ticketOid="{{_id}}">
                                 <td class="ticket-priority" style="border-color: {{priority.htmlColor}}">
-                                    <input id="c_{{_id}}" type="checkbox" class="poloCheckbox" />
-                                    <label for="c_{{_id}}"></label>
+                                    <input type="checkbox" id="c_{{_id}}" style="display: none;" class="svgcheckinput">
+                                    <label for="c_{{_id}}" class="svgcheck">
+                                        <svg width="16px" height="16px" viewBox="0 0 18 18">
+                                            <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+                                            <polyline points="1 9 7 14 15 4"></polyline>
+                                        </svg>
+                                    </label>
                                 </td>
                                 <td class="ticket-status ticket-new"><span>New</span></td>
                                 <td>{{uid}}</td>
@@ -146,8 +151,13 @@
                         {{#is status 1}}
                             <tr class="ticket-open {{#overdue ../data.common.showOverdue date updated priority.overdueIn}} overdue {{/overdue}}" data-ticket="{{uid}}" data-ticketOid="{{_id}}">
                                 <td class="ticket-priority" style="border-color: {{priority.htmlColor}}">
-                                    <input id="c_{{_id}}" type="checkbox" class="poloCheckbox"/>
-                                    <label for="c_{{_id}}"></label>
+                                    <input type="checkbox" id="c_{{_id}}" style="display: none;" class="svgcheckinput">
+                                    <label for="c_{{_id}}" class="svgcheck">
+                                        <svg width="16px" height="16px" viewBox="0 0 18 18">
+                                            <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+                                            <polyline points="1 9 7 14 15 4"></polyline>
+                                        </svg>
+                                    </label>
                                 </td>
                                 <td class="ticket-status ticket-open"><span>Open</span></td>
                                 <td>{{uid}}</td>
@@ -174,8 +184,13 @@
                         {{#is status 2}}
                             <tr class="ticket-pending" data-ticket="{{uid}}" data-ticketOid="{{_id}}">
                                 <td class="ticket-priority" style="border-color: {{priority.htmlColor}}">
-                                    <input id="c_{{_id}}" type="checkbox" class="poloCheckbox"/>
-                                    <label for="c_{{_id}}"></label>
+                                    <input type="checkbox" id="c_{{_id}}" style="display: none;" class="svgcheckinput">
+                                    <label for="c_{{_id}}" class="svgcheck">
+                                        <svg width="16px" height="16px" viewBox="0 0 18 18">
+                                            <path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+                                            <polyline points="1 9 7 14 15 4"></polyline>
+                                        </svg>
+                                    </label>
                                 </td>
                                 <td class="ticket-status ticket-pending"><span>Pending</span></td>
                                 <td>{{uid}}</td>