_wimmSASS.scss

@import 'utils/reset';
@import 'utils/browsers_compat';

/*
    WIMM SASS
    Mixins and helpers functions
*/
@mixin animatedMenuBarTopBottom($padding, $textcolorhover, $barcolor) {

  padding-top: $padding;
  padding-bottom: $padding;
  position: relative;

  &:hover {
    text-decoration: none;
    color: $textcolorhover;
    font-weight: normal;
    &:before, &:after {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
  }

  &:before {
    transition: all 0.3s;
    content:"";
    position: absolute;
    transform: translate3d(0,-10px,0);
    top:0; left: 0; width: 100%; height: 1px; background: $barcolor;
    opacity: 0;
  }
  &:after {
    transition: all 0.3s;
    content:"";
    transform: translate3d(0,10px,0);
    position: absolute;
    bottom:0; left: 0; width: 100%; height: 1px; background: $barcolor;
    opacity: 0;

  }


}

@mixin animatedMenuBarTop($padding, $textcolorhover, $barcolor) {

  padding-top: $padding;
  padding-bottom: $padding;
  position: relative;

  &:hover {
    text-decoration: none;
    color: $textcolorhover;
    font-weight: normal;
    &:before, &:after {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
  }

  &:before {
    transition: all 0.3s;
    content:"";
    position: absolute;
    transform: translate3d(0,-10px,0);
    top:0; left: 0; width: 100%; height: 1px; background: $barcolor;
    opacity: 0;
  }


}

@mixin animatedMenuBarBottom($padding, $textcolorhover, $barcolor) {

  padding-top: $padding;
  padding-bottom: $padding;
  position: relative;

  &:hover {
    text-decoration: none;
    color: $textcolorhover;
    font-weight: normal;
    &:before, &:after {
      opacity: 1;
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);

    }
  }
  &:after {
    transition: all 0.3s;
    -webkit-transition: all 0.3s;

    content:"";
    transform: translate3d(0,10px,0);
    -webkit-transform: translate3d(0,10px,0);

    position: absolute;
    bottom:0; left: 0; width: 100%; height: 1px; background: $barcolor;
    opacity: 0;

  }

}

//Helper class to remove gutter to a boostrap row
.no-gutter > [class*='col-'] {
  padding-right:0;
  padding-left:0;
}


//Create a flip card
@mixin flipCard() {
  transition: 0.6s;
  -webkit-transition: 0.6s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  text-align: center;
  position: relative;

  &:hover {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);

  }

  .front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .front {
    text-align: center;
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
  }
  .back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);

    padding: 50px;
  }

}

//Create a flip card (change class with JS to flip)
@mixin flipCardOnClassIs($classHover) {

  transition: 0.6s;
  -webkit-transition: 0.6s;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  text-align: center;
  position: relative;

  &.#{$classHover} {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);

  }

  .front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .front {
    text-align: center;
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
  }
  .back {
    transform: rotateY(180deg);
    padding: 50px;
  }
}

@mixin modalFlipHorizontal {
  .overlay {
    perspective: 1300px;
    -webkit-perspective: 1300px;

    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;

    z-index: 1000;

    background-color: rgba(0, 0, 0, 0);
    .wimm_modale {
      transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;

      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;

      width:60%;
      position: absolute;
      left: 50%;
      margin-left: -30%;
      max-height: 95%;
      min-height: 20%;
      top: 15%;
      background: white;
      transition: all 0.3s;
      -webkit-transition: all 0.3s;

      transform: rotateY(-70deg);
      -webkit-transform: rotateY(-70deg);

      border-radius: 4px;
      opacity: 0;
      overflow: auto;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.35);

      .close_modale {
        color: red;
        position: absolute;
        top: 15px;
        right: 15px;
        &:hover { cursor: pointer;}
      }
    }
  }
  &.opened {
    .overlay {
      visibility: visible;
      background-color: rgba(0, 0, 0, 0.45);
      .wimm_modale {
        visibility: visible;
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);

        opacity: 1;

      }
    }
  }

}


@mixin gradientOblique($color1,$color2) {
  background: $color1; /* Old browsers */
  background: -moz-linear-gradient(45deg, $color1 0%, $color2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, $color1 0%,$color2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg, $color1 0%,$color2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

@mixin gradientVertical($color1, $color2) {
  background: $color1; /* Old browsers */
  background: -moz-linear-gradient(top,  $color1 0%, $color2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  $color1 0%,$color2 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  $color1 0%,$color2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=0 ); /* IE6-9 */

}


//smooth link transitions by default
a, .btn {
  transition: all 0.6s;
  -webkit-transition: all 0.6s;

}


//Tiny MCS classes
.left { float: left; margin-right: 15px;}
.right { float: right; margin-left: 15px;}

#msg {
  display: none;
  position: fixed;
  width: 90%;
  bottom: 0;
  margin-left: -45%;
  border-radius: 10px 10px 0px 0px;
  left: 50%;
  overflow: hidden;
  z-index: 50;
  color: white;
  padding: 0px;

  .notification {
    padding: 15px;
    &.success {
      background: green;
      color: white;
    }
    &.error {
      background:red;
      color: white;
    }
  }

}

#loadingScreen {
  .overlay {
    perspective: 1300px;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: all 0.6s;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0);

    .wait_msg {
      transform-style: preserve-3d;

      backface-visibility: hidden;
      width: 50px;
      position: absolute;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;
      height: 50px;
      top: 50%;
      color: white;
      transition: all 0.3s;
      transform: rotateY(-70deg);
      border-radius: 4px;
      opacity: 0;
      overflow: auto;
      text-shadow: 0 0 15px rgba(0, 0, 0, 0.35);;
    }
  }

  &.opened {
    .overlay {
      visibility: visible;
      background-color: rgba(0, 0, 0, 0.45);
      .wait_msg {
        visibility: visible;
        transform: rotateY(0deg);
        opacity: 1;
      }
    }
  }
}

@mixin animatedGaleryBase($background) {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 320px;
  max-width: 480px;
  max-height: 360px;
  width: 48%;
  background: $background;
  text-align: center;
  figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  img,.image {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: none;
    opacity: 0.8
  }
}

@mixin animatedGalerySarah($background,$textcolor) {
  background: $background;
  img,.image  {
    max-width: none;
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  &:hover {
    img,.image  {
      opacity: 0.4;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    h2::after {
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }
    p {
      opacity: 1;
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }

  }
  figcaption {
    text-align: left;
  }
  h2 {
    position: relative;
    overflow: hidden;
    padding: 0.5em 0;
    color: $textcolor;

    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: $textcolor;
      content: '';
      -webkit-transition: -webkit-transform 0.35s;
      transition: transform 0.35s;
      -webkit-transform: translate3d(-100%,0,0);
      transform: translate3d(-100%,0,0);
    }
  }
  p {
    padding: 1em 0;
    opacity: 0;
    color: $textcolor;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
  }


}


@mixin hovered_card($height, $backgroundColor,$textColor) {
  position:relative;
  .image {
    background-size: cover;
    background-position: 50% 50%;
    height:$height;
  }
  .hover {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:15px;
    background: transparentize($backgroundColor,0.2);
    color: $textColor;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    opacity:0;
    visibility: hidden;
  }
  &:hover {
    .hover {
      opacity:1;
      visibility: visible;
    }
  }
}

@mixin hovered_card_effect_horizontallines($color){
  .hover {
    &:before, &:after {
      content: '';
      position: absolute;
      left:15px;
      right:15px;
      border-bottom:1px solid $color;
      transition: all 0.4s;
      -webkit-transition: all 0.4s;
      opacity:0;


    }
    &:before {
      transform: translateY(-20px);
      -webkit-transform: translateY(-30px);
      top:15px;
    }
    &:after {
      transform: translateY(20px);
      -webkit-transform: translateY(30px);
      bottom:15px;
    }
  }

  &:hover {
    .hover {
      &:before,&:after {
        transform: translateY(0px);
        -webkit-transform: translateY(0px);
        opacity:1;
      }
    }
  }
}

@mixin hovered_card_effect_blur($blur){
  overflow:hidden;
  .image {
    overflow:hidden;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;

    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
  &:hover {
    .image {
      overflow:hidden;

      -webkit-filter: blur($blur);
      -moz-filter: blur($blur);
      -o-filter: blur($blur);
      -ms-filter: blur($blur);
      filter: blur($blur);
    }
  }
}

@mixin hovered_card_effect_zoom($initSize, $zoomLevel){
  overflow:hidden;
  .image {
    overflow:hidden;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    background-size:$initSize;

  }
  &:hover {
    .image {
      background-size:$zoomLevel;
    }
  }
}



@mixin hovered_card_effect_borders($color){
  .hover {
    padding:25px;
    &:before, &:after {
      content: '';
      position: absolute;
      left:10px;
      right:10px;
      transition: all 0.4s;
      -webkit-transition: all 0.4s;
      opacity:0;


    }
    &:before {
      transform:scale(1.1);
      -webkit-transform:scale(1.1);
      top:10px;
      bottom:10px;
      border-top:1px solid $color;
      border-left:1px solid $color;


    }
    &:after {
      transform:scale(1.1);
      -webkit-transform:scale(1.1);
      top:10px;
      bottom:10px;
      border-bottom:1px solid $color;
      border-right:1px solid $color;

    }
  }

  &:hover {
    .hover {
      &:before,&:after {
        transform:scale(1);
        -webkit-transform:scale(1);
        opacity:1;
      }
    }
  }
}



@mixin placeholder() {
  &::-webkit-input-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
}