Run Less in jsFiddle

Couleurs Cockpit

by Regisc

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<a href="http://lesscss.org/">
<h2>
Le statut Hover ne s'applique que sur les Alertes / Boutons :
</h2>
<hr>
<br/>
    <div class="somediv">
       BLANC <br/><br/>(icônes et textes de la « navbar / icônes et textes des boutons en « hover ou active »)
    </div>
    <br/>
    <div class="somediv1">
       ROUGE <br/><br/>(fond Alerte NOK / Message Erreur / Statut "Overdue")
    </div>
    <br/>
    <div class="somediv2">
      VERT <br/><br/>(fond Alerte OK / Message Succès / Statut "On time")
</div>
    <br/>
    <div class="somediv3">
        ORANGE <br/><br/>(fond Alerte Information / Message Avertissement)
    </div>
    <br/>
    <div class="somediv4">
        BLEU <br/><br/>(Bouton Action principale / Couleur personnalisable par défaut)
    </div>
    <br/>
    <div class="somediv5">
        GRIS FONCE <br/><br/>(Navbar / texte principal / icônes)
    </div>
    <br/> <div class="somediv5bis">
        GRIS MOYEN <br/><br/>(texte secondaire / libellés d'éléments de formulaires)
    </div>
    <br/>
    <div class="somediv6">
        GRIS CLAIR  <br/><br/>(Background des boutons / Blocs de la page d'accueil / Background élément liste lors d'une «sélection» / flèches des sliders / puces / badges / Traits de séparation sur fond blanc / bordures)
    </div>
    <br/>
    <div class="somediv6B">
        GRIS CLAIR > COULEUR PERSONNALISABLE <br/><br/>(Bouton Action secondaire / ex: barre outil, retour... )
    </div>
      <br/>
    <div class="somediv6R">
        GRIS CLAIR > ROUGE <br/><br/>(Bouton Action suppression / quitter / fermeture PopUp )
    </div>
    <br/>
   
</a>

CSS

// Less can go here

// Implementation
@Blanc:#FFFFFF;
@Rouge:#FB3C4A;
@Vert:#7FCEBB;
@Orange:#FFBA6A;
@Bleu-cockpit:#439AD5;
@Gris-fonce:#303030;
@Gris-moyen:#888888;
@Gris-clair:#ECF0F1;


body { 
    background: #ffffff; 
    padding: 30px; 
}
h2 { 
    color:#303030; 
    padding: 30px; 
}
.somediv {
    background: @Blanc;
    padding: 15px;
    color:#303030;
}

a {
    font-size:18px; 
    font: bold 80% "arial", sans-serif;
    text-align:center;
    text-decoration: none;
    color: #ffffff;
}
.somediv1 {
    background: @Rouge;
    padding: 15px;
    &:hover {background: desaturate(@Rouge, 15%)}
}

a {
    font-size:18px; 
    font: bold 80% "arial", sans-serif;
    text-align:center;
    text-decoration: none;
    color: #ffffff;
}

.somediv2 {
    background: @Vert;
    padding: 15px;
    &:hover {background: desaturate(@Vert, 15%)}
}


.somediv3 {
    background: @Orange;
    padding: 15px;
    &:hover {background: desaturate(@Orange, 15%)}
}



.somediv4 {
    background: @Bleu-cockpit;
    padding: 15px;
    &:hover {background: desaturate(@Bleu-cockpit, 15%)}
}


.somediv5 {
    background: @Gris-fonce;
    padding: 15px;
    
}
 .somediv5bis {
    background: @Gris-moyen;
    padding: 15px;
   
}
 .somediv6 {
    background: @Gris-clair;
    padding: 15px;
    color:#303030;
    
}

 .somediv6B {
    background: @Gris-clair;
    padding: 15px;
    &:hover {background:@Bleu-cockpit}
    color:#303030;
    &:hover {color:#ffffff}
}

 .somediv6R {
    background: @Gris-clair;
    padding: 15px;
    &:hover {background:@Rouge}
     color:#303030;
    &:hover {color:#ffffff}
}

JavaScript

/*
    jsFiddle does not directly support Less so we need these bits of code to bring it here. 
    
    Twitter: @aaronlayton
    Modified by meri
    Updated by max
*/

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type','text/less');

// Step 2: Set development mode to see errors
less.env = 'development';

// Step 3: Tell Less to refresh the styles
less.refreshStyles();