Retina ArrowUp & ArrowDown

[baptistebriel]

Hello,

Take a look to thoses screenshots : the icons ArrowUp & ArrowDown are looking strange on my Retina MBP. (It does not affect ArrowLeft & ArrowRight.)

Here's the current code :

.licon-arrowup:before{
     left: 8px;
}
.licon-arrowdown:before{
     left: 8px;
}

Perhaps you'll need to target it only on retina devices.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
     .licon-arrowup:before{
          left: 10px;
     }
     .licon-arrowdown:before{
          left: 10px;
     }
}

I don't use SASS, but here's an idea how to make this using LESS.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* i.licon-arrowup */
    .licon-arrowup{
        &:before{
            left: @size/4 + 2;
        }
    }

    /* i.licon-arrowdown */
    .licon-arrowdown{
        &:before{
            left: @size/4 + 2;
        }
    }
}

This is very strange because the :after has "right: 10px;", so left should be the same. How does it looks on normal screens ?
Have a nice day.