hunk.code_window:         this.$el.css('color', disabled ? 'grey' : '');
       },
       show_wow: function() {
           var $body = $('body');
  
hunk.labels: keep keep add keep
hunk.after_edit:         var class_to_add = 'o_wow_thumbs';
           if (Math.random() > 0.9) {
               var other_classes = ['o_wow_peace', 'o_wow_heart'];
               class_to_add = other_classes[Math.floor(Math.random()*other_classes.length)];
           }
  
hunk.file_path: addons/web/static/src/js/views/form_widgets.js
hunk.type: add
file: /************** DEFINITION of ANIMATIONS *************/
  // 'marked' effects
  @keyframes markAnim {
      0% {
          opacity: 0;
          transform: scaleX(0.50) scaleY(0.50);
      }
      30% {
          opacity: 1;
          transform: scaleX(1.00) scaleY(1.00);
      }
      100% {
          opacity: 0;
          transform: scaleX(1.00) scaleY(1.00);
      }
  }
  
  @-moz-keyframes markAnim {
      0% {
          opacity: 0;
          -moz-transform: scaleX(0.50) scaleY(0.50);
      }
      30% {
          opacity: 1;
          -moz-transform: scaleX(1.00) scaleY(1.00);
      }
      100% {
          opacity: 0;
          -moz-transform: scaleX(1.00) scaleY(1.00);
      }
  }
  
  @-webkit-keyframes markAnim {
      0% {
          opacity: 0;
          -webkit-transform: scaleX(0.50) scaleY(0.50);
      }
      30% {
          opacity: 1;
          -webkit-transform: scaleX(1.00) scaleY(1.00);
      }
      100% {
          opacity: 0;
          -webkit-transform: scaleX(1.00) scaleY(1.00);
      }
  }
  
  @-o-keyframes markAnim {
      0% {
          opacity: 0;
          -o-transform: scaleX(0.50) scaleY(0.50);
      }
      30% {
          opacity: 1;
          -o-transform: scaleX(1.00) scaleY(1.00);
      }
      100% {
          opacity: 0;
          -o-transform: scaleX(1.00) scaleY(1.00);
      }
  }
  
  @-ms-keyframes markAnim {
      0% {
          opacity: 0;
          -ms-transform: scaleX(0.50) scaleY(0.50);
      }
      30% {
          opacity: 1;
          -ms-transform: scaleX(1.00) scaleY(1.00);
      }
      100% {
          opacity: 0;
          -ms-transform: scaleX(1.00) scaleY(1.00);
      }
  }
  
  // 'bounce' effect
  @-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
              transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
              transform: scale3d(.3, .3, .3);
    }
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
      -webkit-transform: scale3d(.9, .9, .9);
              transform: scale3d(.9, .9, .9);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
              transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      -webkit-transform: scale3d(.97, .97, .97);
              transform: scale3d(.97, .97, .97);
    }
    100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  
  @keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
              transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
      opacity: 0;
      -webkit-transform: scale3d(.3, .3, .3);
              transform: scale3d(.3, .3, .3);
    }
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
              transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
      -webkit-transform: scale3d(.9, .9, .9);
              transform: scale3d(.9, .9, .9);
    }
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
              transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
      -webkit-transform: scale3d(.97, .97, .97);
              transform: scale3d(.97, .97, .97);
    }
    100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
              transform: scale3d(1, 1, 1);
    }
  }
  
  /************** MIXINS for ANIMATIONS *************/
  .o-display-marked(@content, @top, @left, @color) {
      position: absolute;
      top: @top;
      left: @left;
      font-size: 300px;
      font-family: "FontAwesome";
      content: @content;
      color: @color;
      animation: markAnim ease-in-out 1s;
      animation-iteration-count: 1;
      transform-origin: 50% 50%;
      animation-fill-mode:forwards; /*when the spec is finished*/
      -webkit-animation: markAnim ease-in-out 1s;
      -webkit-animation-iteration-count: 1;
      -webkit-transform-origin: 50% 50%;
      -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
      -moz-animation: markAnim ease-in-out 1s;
      -moz-animation-iteration-count: 1;
      -moz-transform-origin: 50% 50%;
      -moz-animation-fill-mode:forwards; /*FF 5+*/
      -o-animation: markAnim ease-in-out 1s;
      -o-animation-iteration-count: 1;
      -o-transform-origin: 50% 50%;
      -o-animation-fill-mode:forwards; /*Not implemented yet*/
      -ms-animation: markAnim ease-in-out 1s;
      -ms-animation-iteration-count: 1;
      -ms-transform-origin: 50% 50%;
      -ms-animation-fill-mode:forwards; /*IE 10+*/
  
      @media (max-width: 992px) {
          left: 40%;
          font-size: 30vw;
      }
  }
  
  
  /************** USAGE of ANIMATIONS *************/
  // Animation on wow button
  .o_wow_marked:after {
      .o-display-marked("\f164", 20%, 40%, #21b799);
  }
  