bug fix and optimize for previous and rewind icon

saeedalipoor · 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));
 }