open-orchestra/open-orchestra-cms-bundle

/* ===================================================================
 * VARIABLES LESS
 * =================================================================*/
/* Fonts */
.Roboto {
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}
.Montserrat {
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
}
.FontAwesome {
  font-family: 'FontAwesome', sans-serif;
  font-weight: normal;
}

/* Taille de la font initiale */
@initialFontSize: 16px;

/* Couleurs */
@baseColor: #393d4e;
@green: #24bc7a;
@paleBlue: #e6eef1;
@lightBlue: #38b5e9;
@darkBlue: #252837;
@red: #ff3f3a;
@grey: #ddd;
//@lightGrey: #b3b8c1;
@lightGrey: #B4B8C1;
@purpleGrey: #50577b;
@lightPurple: #878eaf;

@tablet: 1024px;
@mobile: 767px;

/* ===================================================================
 * CLASSES LESS
 * =================================================================*/
.fontSize(@a) {
  font-size: 1em * (@a / @initialFontSize);
}

/*
 *   Checkbox :
 *   => @coche: motif à afficher pour la coche, code hexa ou image, ex: .checkbox(url("@{cssDir}images/barreHaut_puce.gif"));
 *   => @fontsize: taille de la coche en pixels
 *   => @left: position absolue left de la coche
 *   => @top: position absolue top de la coche
 *   => @color: couleur de la coche;
 */
.checkBox(@coche: '\f14a', @fontsize: 16px, @left: 2px, @top: 0, @color: @darkBlue) {
  /* Cachons la case à cocher */
  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
  }
  /* on prépare le label */
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label {
    position: relative; /* permet de positionner les pseudo-éléments */
    padding: 0 22px 0 25px; /* fait un peu d'espace pour notre case à venir */
    cursor: pointer;    /* affiche un curseur adapté */
    font-weight: normal;
    margin: 0 20px 20px 0;
    vertical-align: top;
    word-wrap: break-word;
  }
  /* Aspect des checkboxes */
  /* :before sert à créer la case à cocher */
  [type="checkbox"]:not(:checked) + label:before,
  [type="checkbox"]:checked + label:before{
    content: '\f096';
    font-family: 'FontAwesome';
    position: absolute;
    top: @top;
    left: @left;
    font-size: @fontsize+2;
    color: @color;
    transition: all .2s; /* on prévoit une animation */
  }
  [type="checkbox"]:checked + label:before { opacity: 0;}

  /* Aspect général de la coche */
  [type="checkbox"]:not(:checked) + label:after,
  [type="checkbox"]:checked + label:after {
    content: @coche;
    font-family: 'FontAwesome';
    position: absolute;
    top: @top;
    left: @left;
    font-size: @fontsize;
    color: @color;
    transition: all .2s; /* on prévoit une animation */
  }
  /* Aspect si "pas cochée" */
  [type="checkbox"]:not(:checked) + label:after {
    opacity: 0; /* coche invisible */
    transform: scale(0); /* mise à l'échelle à 0 */
  }
  /* Aspect si "cochée" */
  [type="checkbox"]:checked + label:after {
    opacity: 1; /* coche opaque */
    transform: scale(1); /* mise à l'échelle 1:1 */
  }

  /* aspect désactivée */
  [type="checkbox"]:disabled:not(:checked) + label:before,
  [type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    color: #999;
  }
  /* styles de la coche (si cochée/désactivée) */
  [type="checkbox"]:disabled:not(:checked) + label:after,
  [type="checkbox"]:disabled:checked + label:after {
    color: #999;
  }
  /* on style aussi le label quand désactivé */
  [type="checkbox"]:disabled + label {
    color: #aaa;
  }
}

/*
 *   Radio bouton :
 *   => @size: largeur et hauteur du bouton
 *   => @color: couleur du bouton;
 */
.radioBouton(@coche: '\f058', @size: 16px, @left: 0, @top: -0.5px, @color: @baseColor){
  /* Cachons le bouton radio */
  [type="radio"]:not(:checked),
  [type="radio"]:checked {
    position: absolute;
    left: -9999px;
  }
  /* on prépare le label */
  [type="radio"]:not(:checked) + label,
  [type="radio"]:checked + label {
    position: relative; /* permet de positionner les pseudo-éléments */
    padding: 0 22px 0 25px; /* fait un peu d'espace pour notre bouton à venir */
    cursor: pointer;    /* affiche un curseur adapté */
    font-weight: normal;
    margin-bottom: 0;
    vertical-align: top;
  }
  /* Aspect des boutons radios */
  /* :before sert à créer le bouton radio */
  [type="radio"]:not(:checked) + label:before,
  [type="radio"]:checked + label:before{
    content: '';
    //font-family: 'FontAwesome';
    position: absolute;
    top: @top;
    left: @left;
    //font-size: @size;
    //color: @color;
    transition: all .2s; /* on prévoit une animation */

    border: 2px solid @color;
    border-radius: 50%;
    width: 21px;
    height: 21px;
  }
  /* Aspect général de la coche */
  [type="radio"]:not(:checked) + label:after,
  [type="radio"]:checked + label:after {
    content: @coche;
    font-family: 'FontAwesome';
    position: absolute;
    top: -5px;
    left: 1px;
    font-size: @size;
    color: @color;
    transition: all .2s; /* on prévoit une animation */
    z-index: 2;
  }
  /* Aspect si "pas cochée" */
  [type="radio"]:not(:checked) + label:after{
    opacity: 0; /* coche invisible */
    transform: scale(0); /* mise à l'échelle à 0 */
  }
  /* Aspect si "cochée" */
  [type="radio"]:checked + label:after {
    opacity: 1; /* coche opaque */
    transform: scale(1); /* mise à l'échelle 1:1 */
  }

  /* aspect désactivée */
  [type="radio"]:disabled:not(:checked) + label:before,
  [type="radio"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    color: #999;
  }
  /* styles de la coche (si cochée/désactivée) */
  [type="radio"]:disabled:checked + label:after {
    color: #999;
  }
  /* on style aussi le label quand désactivé */
  [type="radio"]:disabled + label {
    color: #aaa;
  }
}

/*
 *   Dropdown stylé
 */
.styledSelect() {
  .styled-select{
    position: relative;
    &:not(.multiple):after {
      content: "\f13a";
      font-family: 'FontAwesome';
      color: @baseColor;
      position: absolute;
      right: 10px;
      top: 6px;
      pointer-events: none;
    }
    select {
      -webkit-appearance: none;
      -moz-appearance: none;
      -ms-appearance: none;
      -o-appearance: none;
      appearance: none;
      &[multiple]{ height: 175px; }
    }
    .top_bottom_mask{
      border: 10px solid #fff;
      height: 98.5%;
      position: absolute;
      right: 1px;
      top: 2px;
      width: 17px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      .top, .bottom{
        width: 15px;
        height: 15px;
        position: absolute;
        right: -2px;
        top: -2px;
      }
      .top:before,.bottom:before{
        content: "\f077";
        font-family: 'FontAwesome';
        color: @baseColor;
        position: absolute;
        right: 0;
        top: -4px;
        pointer-events: none;
        .fontSize(14);
      }
      .bottom {
        top: 93%;
        &:before {
          content: "\f078";
        }
      }
    }
  }
}