vwochnik · September 28, 2015 18:10
diff --git a/index.html b/index.html
 <html>
  <head>
    <title>Test</title>
    <!-- include stylesheet -->
  </head>
  <body>
    <div class="overlay"></div>
  </body>
  <!-- include jQyery -->
  <!-- include javascript -->
 </html>
diff --git a/overlay-mx.scss b/overlay-mx.scss
 /*
 * Overlay mixin with fade animation
 */
 @mixin overlay($position, $z-index, $duration) {
  position: $position;
  left: 0; top: 0;
  width: 100%; height: 0;
  z-index: $z-index;
  @include transition(opacity $duration ease-in-out, height 0s linear, visibility 0s linear);
  visibility: hidden;
  overflow: hidden;
  @include opacity(0.0);

  &.fade-out {
    @include transition(opacity $duration ease-in-out, height 0s linear $duration, visibility 0s linear $duration);
  }

  &.visible {
    height: 100%;
    visibility: visible;
    @include opacity(1.0);
  }
 }
diff --git a/script.js b/script.js
 (function($) {
  
 })(jQyery);
diff --git a/style.scss b/style.scss
 .overlay {
  @include overlay(fixed, 99, 1s);
  background-color: rgba(0, 0, 96, 0.4);
 }
	/*
	* Overlay mixin with fade animation
	*/
	@mixin overlay($position, $z-index, $duration) {
	position: $position;
	left: 0; top: 0;
	width: 100%; height: 0;
	z-index: $z-index;
	@include transition(opacity $duration ease-in-out, height 0s linear, visibility 0s linear);
	visibility: hidden;
	overflow: hidden;
	@include opacity(0.0);

	&.fade-out {
	@include transition(opacity $duration ease-in-out, height 0s linear $duration, visibility 0s linear $duration);
	}

	&.visible {
	height: 100%;
	visibility: visible;
	@include opacity(1.0);
	}
	}
No results found