Mixin facts 5/9 step 3

#1



https://www.codecademy.com/courses/learn-sass/lessons/mixins-and-parent-selector/exercises/multiple-arguments?action=lesson_resume

getting the following error

Did you include the transition mixin with a total of 0.4s in main.scss?

code below


@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: repeating-linear-gradient(
    $direction,
    $stripe-background,
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
  );
}

@mixin transform($transformation) {
  transform: $transformation;
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;  
}

@mixin photo-content {
  object-fit: cover;
}

@mixin backface-visibility($visibility:hidden){
  backface-visibility:$visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

@mixin transform-style($style){
  transform-style:$style;
  -moz-transform-style:$style;
  -o-transform-style:$style;
  -ms-transform-style:$style;
  -webkit-transform-style:$style;
}

@mixin transition($time){
  transition: $time;
  -webkit-transition: $time;
  -moz-transition: $time;
  -o-transition: $time;
}

//Add your own mixins here

.notecard {
  width: 300px;
  height: 180px;
  border: 1px solid black;
  display: inline-block;
  margin: 20px;
  font-family: Roboto, sans-serif;
  box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
  &:hover{
    @include transform(rotatey(-180deg));
  }
  @include transform-style(preserve-3d);
  @include transition(0.4s);
  
  .front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    @include backface-visibility;
  }
  
  .front {
  z-index: 3;
  font-size: 20px;

    .word {
      display: block;
      text-align: center;
      position: relative;
      top: 40%;
    }    
  }
  
  
  .back {
  z-index: 1;
  word-wrap: break-word;
  line-height: 1.6;
    @include transform(rotatey(-180deg));
    
    .definition {
      width: 100%;
      height: 100%;
            
      .photo {
        width: 60%;
        margin: 0px auto;
          
      }
    }
  }
}

#3

If you're using Mozilla firefox and have problem on this assignment just change browser on this one and it will work.
I'm using firefox and it didn't work from ne on this exercise changed to Opera for this one and all went well.

#4

Cheers dayfiri - I've spent more time now trying to get past this bloody bug than I have on the course in total so far. Out of everything I'd seen as a workaround only your suggestion worked, swapping to Chrome did the trick.

It was first reported months ago, someone really should get it fixed.

#5

I'm glad we found the fix :slight_smile:
Hope others will see it.

#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.