change vote buttons to more sexy

2018-05-12 14:19:55 +03:00
parent 83feea56e2
commit 37eaef2c0e
9 changed files with 19 additions and 7 deletions
@@ -1,6 +1,7 @@
 .comment__score-value {
  display: inline-block;
  min-width: 24px;
+  vertical-align: middle;
  text-align: center;
  font-size: 14px;
 }
@@ -1,6 +1,6 @@
 .comment__vote_disabled {
  &, &:hover {
-    border-top-color: #ededed;
+    background-image: url('comment__vote_disabled.svg');
    cursor: not-allowed;
  }
 }
@@ -0,0 +1,3 @@
+<svg width="14" height="17" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ededed" d="M4.426 16.116V6.72H.394L7-.012l6.606 6.732H9.574v9.396z" fill-rule="evenodd"/>
+</svg>
@@ -1,4 +1,4 @@
 .comment__vote_selected {
-  border-top-color: #0aa;
+  background-image: url('comment__vote_selected.svg');
  cursor: default;
 }
@@ -0,0 +1,3 @@
+<svg width="14" height="17" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#0aa" d="M4.426 16.116V6.72H.394L7-.012l6.606 6.732H9.574v9.396z" fill-rule="evenodd"/>
+</svg>
@@ -1,3 +1,4 @@
 .comment__vote_type_down {
+  transform: scale(1, -1);
  margin-left: 4px;
 }
@@ -1,4 +1,3 @@
 .comment__vote_type_up {
-  transform: scale(1, -1);
  margin-right: 4px;
 }
@@ -1,13 +1,15 @@
 .comment__vote {
  display: inline-block;
-  border-top: 9px solid #dedede;
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent;
+  width: 16px;
+  height: 14px;
+  vertical-align: middle;
  font-size: 0;
  line-height: 0;
+  background: url('comment__vote.svg') center no-repeat;
+  background-size: contain;
  cursor: pointer;

  &:hover {
-    border-top-color: #0aa;
+    background-image: url('_selected/comment__vote_selected.svg');
  }
 }
@@ -0,0 +1,3 @@
+<svg width="14" height="17" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#dedede" d="M4.426 16.116V6.72H.394L7-.012l6.606 6.732H9.574v9.396z" fill-rule="evenodd"/>
+</svg>