bug fix and optimize for previous and rewind icon

AlexandrPoddubsky · Feb 2, 2015 · f6883d2 · f6883d2
1 parent 46d298b
commit f6883d2
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 110 deletions.
diff --git a/build/icono.css b/build/icono.css
@@ -2675,29 +2675,22 @@
   margin: 7px;
 }
 .icono-rewind {
-  width: 0;
-  height: 0;
-  border: 10px solid transparent;
-  border-right: 10px solid;
-  margin: 7px;
-}
-.icono-rewind:before {
-  position: absolute;
-  right: 0;
-  top: -10px;
-  width: 0;
-  height: 0;
-  border: 10px solid transparent;
-  border-right: 10px solid;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
 }
-.icono-forward {
+.icono-forward,
+.icono-rewind {
   width: 0;
   height: 0;
   border: 10px solid transparent;
   border-left: 10px solid;
   margin: 7px;
 }
-.icono-forward:before {
+.icono-forward:before,
+.icono-rewind:before {
   position: absolute;
   left: 0;
   top: -10px;
@@ -2706,37 +2699,23 @@
   border: 10px solid transparent;
   border-left: 10px solid;
 }
-.icono-next {
+.icono-next,
+.icono-previous {
   width: 0;
   height: 0;
   border: 10px solid transparent;
   border-left: 10px solid;
-  margin: 7px;
-}
-.icono-next:before {
-  position: absolute;
-  left: 0;
-  top: -10px;
-  width: 0;
-  height: 0;
-  border-width: 10px 3px 10px 3px;
-  border-style: solid;
+  border-right: none;
+  margin: 7px 14px 7px 10px;
+  box-shadow: 4px 0;
 }
 .icono-previous {
-  width: 0;
-  height: 0;
-  border: 10px solid transparent;
-  border-right: 10px solid;
-  margin: 7px;
-}
-.icono-previous:before {
-  position: absolute;
-  right: 0;
-  top: -10px;
-  width: 0;
-  height: 0;
-  border-width: 10px 2px 10px 2px;
-  border-style: solid;
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+  margin: 7px 10px 7px 14px;
 }
 .icono-caretRight,
 .icono-caretRightCircle,
@@ -2781,7 +2760,6 @@
   width: 14px;
   height: 2px;
   position: absolute;
-  top: 0;
   bottom: 0;
   margin: auto 0;
   right: 2px;
@@ -2800,6 +2778,7 @@
 .icono-caretUpSquare:before,
 .icono-caretDownCircle:before,
 .icono-caretDownSquare:before {
+  top: 2px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
@@ -2818,6 +2797,7 @@
 .icono-caretUpSquare:after,
 .icono-caretDownCircle:after,
 .icono-caretDownSquare:after {
+  top: 0;
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);

diff --git a/dist/icono.min.css b/dist/icono.min.css
diff --git a/less/icons/caret.less b/less/icons/caret.less
@@ -7,17 +7,18 @@
         width: @14;
         height: @2;
         position: absolute;
-        top: 0;
         bottom: 0;
         margin: auto 0;
         right: @2;
         box-shadow: inset 0 0 0 @32;
         transform-origin: right;
     }
     &:before {
+        top: @2;
         .transform(rotate(45deg));
     }
     &:after {
+        top: 0;
         .transform(rotate(-45deg));
     }
 }

diff --git a/less/icons/next.less b/less/icons/next.less
@@ -4,14 +4,7 @@
     height: 0;
     border: @10 solid transparent;
     border-left: @10 solid;
-    margin: @7;
-    &:before{
-        position: absolute;
-        left: 0;
-        top: -@10;
-        width: 0;
-        height: 0;
-        border-width: @10 @3 @10 @3;
-        border-style: solid;
-    }
+    border-right: none;
+    margin: @7 @14 @7 @10;
+    box-shadow: @4 0;
 }
diff --git a/less/icons/previous.less b/less/icons/previous.less
@@ -1,17 +1,6 @@
 //*-- Previous --*\\
 .icono-previous{
-    width: 0;
-    height: 0;
-    border: @10 solid transparent;
-    border-right: @10 solid;
-    margin: @7;
-    &:before{
-        position: absolute;
-        right: 0;
-        top: -@10;
-        width: 0;
-        height: 0;
-        border-width: @10 @2 @10 @2;
-        border-style: solid;
-    }
+    &:extend(.icono-next all);
+    .transform(rotate(180deg));
+    margin: @7 @10 @7 @14;
 }
diff --git a/less/icons/rewind.less b/less/icons/rewind.less
@@ -1,17 +1,5 @@
 //*-- Rewind --*\\
 .icono-rewind{
-    width: 0;
-    height: 0;
-    border: @10 solid transparent;
-    border-right: @10 solid;
-    margin: @7;
-    &:before{
-        position: absolute;
-        right: 0;
-        top: -@10;
-        width: 0;
-        height: 0;
-        border: @10 solid transparent;
-        border-right: @10 solid;
-    }
+    &:extend(.icono-forward all);
+    .transform(rotate(180deg));
 }
diff --git a/sass/icons/previous.scss b/sass/icons/previous.scss
@@ -1,17 +1,6 @@
 //*-- Previous --*\\
 .icono-previous{
-    width: 0;
-    height: 0;
-    border: $U10 solid transparent;
-    border-right: $U10 solid;
-    margin: $U7;
-    &:before{
-        position: absolute;
-        right: 0;
-        top: -$U10;
-        width: 0;
-        height: 0;
-        border-width: $U10 $U2 $U10 $U2;
-        border-style: solid;
-    }
+    @extend .icono-next;
+    @include transform(rotate(180deg));
+    margin: $U7 $U10 $U7 $U14;
 }
diff --git a/sass/icons/rewind.scss b/sass/icons/rewind.scss
@@ -1,17 +1,5 @@
 //*-- Rewind --*\\
 .icono-rewind{
-    width: 0;
-    height: 0;
-    border: $U10 solid transparent;
-    border-right: $U10 solid;
-    margin: $U7;
-    &:before{
-        position: absolute;
-        right: 0;
-        top: -$U10;
-        width: 0;
-        height: 0;
-        border: $U10 solid transparent;
-        border-right: $U10 solid;
-    }
+    @extend .icono-forward;
+    @include transform(rotate(180deg));
 }