Changeset 110714 in spip-zone


Ignore:
Timestamp:
Jun 17, 2018, 3:02:00 PM (3 years ago)
Author:
tcharlss@…
Message:

Les variables de couleur dans une map, ce qui permet de faire des automatismes si besoin + la mixin qui va avec pour récupérer une couleur : color(texte) par ex.

Location:
_squelettes_/integraal/theme/trunk/scss
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • _squelettes_/integraal/theme/trunk/scss/base/_mixins.scss

    r107770 r110714  
    2121  @return $pixels / $context * 1em;
    2222}
     23
     24/**
     25 * Retourner une couleur parmi le jeu de couleurs du projet
     26 *
     27 * @example
     28 * background-color: color(principale);
     29 *
     30 * @param string $couleur
     31 *     Nom de la couleur
     32 * @param sap $palette
     33*      Nom de la map à utiliser
     34 * @return string
     35 *     Code de la couleur
     36 */
     37 @function color($couleur) {
     38  @if map-has-key($couleurs, $couleur) {
     39    @return map-get($couleurs, $couleur);
     40  }
     41  @warn "Pas de couleur `#{$couleur}` dans $couleurs.";
     42  @return null;
     43}
  • _squelettes_/integraal/theme/trunk/scss/base/_typo.scss

    r110709 r110714  
    55
    66body {
    7         color: $couleur-texte;
     7        color: color(texte);
    88        font-family: $typo-font-text;
    99        font-size: $typo-font-size-fluid;
     
    2929// Liens
    3030a {
    31         color: $couleur-lien;
     31        color: color(lien);
    3232        text-decoration:none;
    3333
     
    3636        }
    3737        &:focus {
    38                 background-color: $couleur-lien !important;
     38                background-color: color(lien) !important;
    3939                color: white !important;
    4040                outline: 0;
    4141        }
    4242        &:visited {
    43                 color: $couleur-lien;
    44         }
    45 }
    46 .link-block-wrapper{
    47         position:relative;
    48 
    49         a {
    50                 position:inherit;
    51 
    52                 &:before {
    53                         content: "";
    54                         position: absolute;
    55                         bottom: 0;
    56                         left: 0;
    57                         right: 0;
    58                         top: 0;
    59                 }
     43                color: color(lien);
    6044        }
    6145}
     
    7256
    7357ul.spip {
    74     list-style: square;
     58  list-style: square;
    7559}
    7660ol.spip {
  • _squelettes_/integraal/theme/trunk/scss/base/_variables.scss

    r110705 r110714  
    22 * Définition des variables du projet
    33 *
    4 **/
     4 */
    55
    6 /* Palette de couleurs */
    7 $couleur-rouge: #d44423;
    8 $couleur-beige: #c7b698;
    9 $couleur-beige-clair: #e8e0d1;
    10 $couleur-sombre: #322c20;
     6/**
     7 * Palette de couleurs
     8 * À ne pas utiliser directement, sert pour la map suivante
     9 */
     10$couleur-rouge:    hsl(  0, 55%, 50%);
     11$couleur-emeraude: hsl(160, 50%, 50%);
     12$couleur-bleu:     hsl(200, 50%, 50%);
     13$couleur-gris:     hsl( 30, 10%, 65%);
     14$couleur-sombre:   hsl( 30, 10%, 10%);
     15$couleur-claire:   hsl( 30, 10%, 90%);
     16$couleur-vert:     hsl( 85, 85%, 40%);
     17$couleur-jaune:    hsl( 45, 80%, 55%);
    1118
    12 /* Palette fonctionnelle */
    13 $couleur-texte: black;
    14 $couleur-lien: $couleur-beige;
     19/**
     20 * Palette fonctionnelle
     21 * Utiliser ces couleurs au moyen de la mixin color(nom-de-lacouleur)
     22 */
     23$couleurs: (
     24  principale:  $couleur-emeraude,
     25  secondaire:  $couleur-rouge,
     26  texte:       $couleur-sombre,
     27  texte-clair: $couleur-gris,
     28  lien:        $couleur-emeraude,
     29  lien-clair:  lighten($couleur-emeraude, 10),
     30  lien-sombre: darken($couleur-emeraude, 10),
     31  bordure:     lighten($couleur-gris, 10),
     32  claire:      $couleur-claire,
     33  sombre:      $couleur-sombre,
     34  success:     $couleur-vert,
     35  error:       $couleur-rouge,
     36  warning:     $couleur-jaune,
     37  info:        $couleur-bleu,
     38);
    1539
    16 /* Typographie */
    17 $typo-font-size:       em(16px);
    18 $typo-font-size-fluid: calc(#{$typo-font-size} + 0.25vw); // proportionnelle à la largeur de l'écran
    19 $typo-line-height:     1.5;
    20 $bs:                   $typo-font-size * $typo-line-height / 1em * 1rem; // base spacing = hauteur d'1 ligne
     40/**
     41 * Typographie
     42 */
     43// Taille de police de base
     44$typo-font-size: em(16px);
     45// Taille de police proportionnelle à la largeur de l'écran
     46$typo-font-size-fluid: calc(#{$typo-font-size} + 0.25vw);
     47// Interlignes
     48$typo-line-height: 1.5;
     49// Base spacing = hauteur d'1 ligne
     50$bs: $typo-font-size * $typo-line-height / 1em * 1rem;
    2151
    22 /* Familles de polices */
    23 $typo-font-text: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Geneva", "Verdana", sans-serif, sans; // Texte principal
    24 $typo-font-heading: "Arial Black", "Arial Bold", "Gadget", sans-serif, sans; // Titres
    25 $typo-font-alt: "Palatino", "Palatino Linotype", "Palatino LT STD", "Book Antiqua", "Georgia", serif;; // Textes alternatifs (par ex. chapos, sous-titre etc.)
     52/**
     53 * Familles de polices
     54 */
     55// Texte principal
     56$typo-font-text: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Geneva", "Verdana", sans-serif, sans;
     57// Titres
     58$typo-font-heading: "Arial Black", "Arial Bold", "Gadget", sans-serif, sans;
     59// Textes alternatifs (par ex. chapos, sous-titre etc.)
     60$typo-font-alt: "Palatino", "Palatino Linotype", "Palatino LT STD", "Book Antiqua", "Georgia", serif;
  • _squelettes_/integraal/theme/trunk/scss/modules/_buttons.scss

    r110708 r110714  
    2020**/
    2121$ubtn-namespace:  '.button';
    22 $ubtn-bgcolor:     $couleur-beige;
    23 $ubtn-font-color:  $couleur-texte;
     22$ubtn-bgcolor:     color(principale);
     23$ubtn-font-color:  color(texte);
    2424$ubtn-font-weight: 300;
    2525$ubtn-font-size:   $typo-font-size;
     
    2727$ubtn-font-family: $typo-font-text;
    2828/* Variantes de couleur (génère une classe pour chaque entrée) */
    29 $ubtn-colors: ('rouge' $couleur-rouge  white) ('sombre' $couleur-sombre white);
     29$ubtn-colors: ('rouge' color(principale) white) ('sombre' color(sombre) white);
    3030/* Variantes de formes pour types/shapes (génère une classe pour chaque entrée) */
    3131$ubtn-shapes: (
  • _squelettes_/integraal/theme/trunk/scss/modules/_forms.scss

    r110708 r110714  
    2020        &:focus{
    2121                background-color: white;
    22                 border-color: $couleur-texte;
     22                border-color: color(texte);
    2323        }
    2424}
Note: See TracChangeset for help on using the changeset viewer.