Problème de LESS .inner-shadow

Question

Je suis un tutoriel de tuts+ sur le découpage de PSD et la conversion en HTML et j'apprends pas mal de choses, mais je suis coincé avec quelque chose de vraiment ennuyeux. Lorsque j'essaie d'ajouter une ombre interne à un CTA principal avec .inner-shadow, j'obtiens une barre grise qui n'est pas du tout proche de la couleur ou de l'emplacement que je veux. Cela se produit même si je copie le code exactement tel qu'il est à partir des fichiers de code source disponibles avec la leçon.

Voici toutes les informations pertinentes (j'espère, faites-moi savoir si quelque chose d'essentiel manque) : Utilisation de : Sublime Text 2, Winless pour la compilation LESS, Chrome (version 24.0.1312.57 m) et Firefox (v. 18.0.2) pour afficher le site. Mixin LESS pertinent :

.inner-shadow (inset, @x: 0, @y: 0, @blur: 1px, @color: #000) {
-webkit-box-shadow: @arguments;
box-shadow: @arguments;

Code sous CTA :

.inner-shadow(inset, 0, -8px, 0, rgba(0, 0, 0, 0.2)); (rgba used to make the black less harsh and more transparent)

En utilisant la réinitialisation d'Eric Meyer.

Ce que j'attends est le suivant (à partir du fichier PSD) :

Voici ce que je reçois :

Notez que pour que l'ombre soit au bon endroit, je dois en fait entrer 8px au lieu de -8px pour l'axe Y dans .inner-shadow. Je ne sais pas pourquoi les axes sont inversés, mais en mettant -8px, l'ombre se trouve en fait en haut de la boîte !

Je ne sais vraiment pas quoi faire. J'apprécierais énormément toute aide.

Gracias.

-Edit- Voici le CSS pour cela :

    -webkit-box-shadow: 0 8px 0 rgba(0,0,0,0.2);
    box-shadow: 0 8px 0 rgba(0,0,0,0.2)

Answer 1

Essayez ceci

.inner-shadow (@inset: inset, @x: 0, @y: 0, @blur: 1px, @color: #000) {
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}