skins/vector/components/watchstar.less

   1 /* Watch/Unwatch Icon Styling */
   2 #ca-unwatch.icon a,
   3 #ca-watch.icon a {
   4         margin: 0;
   5         padding: 0;
   6         outline: none;
   7         display: block;
   8         width: 26px;
   9         /* This hides the text but shows the background image */
  10         padding-top: 3.1em;
  11         margin-top: 0;
  12         /* Only applied in IE6 */
  13         margin-top: -0.8em !ie;
  14         height: 0;
  15         overflow: hidden;
  16         background-position: 5px 60%;
  17 }
  18 #ca-unwatch.icon a {
  19         .background-image-svg('images/unwatch-icon.svg', 'images/unwatch-icon.png');
  20 }
  21 #ca-watch.icon a {
  22         .background-image-svg('images/watch-icon.svg', 'images/watch-icon.png');
  23 }
  24 #ca-unwatch.icon a:hover,
  25 #ca-unwatch.icon a:focus {
  26         .background-image-svg('images/unwatch-icon-hl.svg', 'images/unwatch-icon-hl.png');
  27 }
  28 #ca-watch.icon a:hover,
  29 #ca-watch.icon a:focus {
  30         .background-image-svg('images/watch-icon-hl.svg', 'images/watch-icon-hl.png');
  31 }
  32 #ca-unwatch.icon a.loading,
  33 #ca-watch.icon a.loading {
  34         .background-image-svg('images/watch-icon-loading.svg', 'images/watch-icon-loading.png');
  35         .rotation(700ms);
  36         background-position: 50% 60%;
  37         -webkit-transform-origin: 50% 57%;
  38         transform-origin: 50% 57%;
  39 }
  40 #ca-unwatch.icon a span,
  41 #ca-watch.icon a span {
  42         display: none;
  43 }