Sass support for Fancybox.

fancybox-buttons.scss

//Auxiliar Functions

@function parseInt($n) {
  @return $n / ($n * 0 + 1);
}

$base-size: 16;

@mixin rem($property, $values) {
  $px: ();
  $rem: ();

  @each $value in $values {
    @if $value == 0 or $value == auto {
      $px: append($px, $value);
      $rem: append($rem, $value);
    } @else {
      $unit: unit($value);
      $val: parseInt($value);

      @if $unit == "px" {
        $px: append($px, $value);
        $rem: append($rem, ($val / $base-size + rem));
      }

      @if $unit == "rem" {
        $px: append($px, ($val * $base-size + px));
        $rem: append($rem, $value);
      }
    }
  }

  @if $px == $rem {
    #{$property}: $px;
  } @else {
    #{$property}: $px;
    #{$property}: $rem;
  }
}

fancybox-thumbs.scss

//Auxiliar Functions

@function parseInt($n) {
  @return $n / ($n * 0 + 1);
}

$base-size: 16;

@mixin rem($property, $values) {
  $px: ();
  $rem: ();

  @each $value in $values {
    @if $value == 0 or $value == auto {
      $px: append($px, $value);
      $rem: append($rem, $value);
    } @else {
      $unit: unit($value);
      $val: parseInt($value);

      @if $unit == "px" {
        $px: append($px, $value);
        $rem: append($rem, ($val / $base-size + rem));
      }

      @if $unit == "rem" {
        $px: append($px, ($val * $base-size + px));
        $rem: append($rem, $value);
      }
    }
  }

  @if $px == $rem {
    #{$property}: $px;
  } @else {
    #{$property}: $px;
    #{$property}: $rem;
  }
}

//colors
$white: #fff;
$cabin: #222;
$woodsmoke: #111;

#fancybox-thumbs {
  position: fixed;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 8050;
  &.bottom {
    @include rem(bottom, 2px);
    //bottom: 2px;
  }
  &.top {
    @include rem(top, 2px);
    top: 2px;
  }
  ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      float: left;
      @include rem(padding, 1px);
      //padding: 1px;
      opacity: 0.5;
      &.active {
        opacity: 0.75;
        padding: 0;
        border: 1px solid $white;
      }
      &:hover {
        opacity: 1;
      }
      a {
        display: block;
        position: relative;
        overflow: hidden;
        border: 1px solid $cabin;
        background: $woodsmoke;
        outline: none;
      }
      img {
        display: block;
        position: relative;
        border: 0;
        padding: 0;
        max-width: none;
      }
    }
  }
}

fancybox.scss

@function parseInt($n) {
  @return $n / ($n * 0 + 1);
}

$base-size: 16;

@mixin rem($property, $values) {
  $px: ();
  $rem: ();

  @each $value in $values {
    @if $value == 0 or $value == auto {
      $px: append($px, $value);
      $rem: append($rem, $value);
    } @else {
      $unit: unit($value);
      $val: parseInt($value);

      @if $unit == "px" {
        $px: append($px, $value);
        $rem: append($rem, ($val / $base-size + rem));
      }

      @if $unit == "rem" {
        $px: append($px, ($val * $base-size + px));
        $rem: append($rem, $value);
      }
    }
  }

  @if $px == $rem {
    #{$property}: $px;
  } @else {
    #{$property}: $px;
    #{$property}: $rem;
  }
}

//colors
$alabaster: #f9f9f9;
$tundora: #444;
$black50: rgba(0, 0, 0, 0.5);
$black80: rgba(0, 0, 0, 0.8);
$cabin: #222;
$white: #fff;
$black: #000;

//fonts
$fontHN: Helvetica Neue;
$fontH: Helvetica;
$fontA: Arial;
$fontSS: sans-serif;

//urls
$urlSprite: url(fancybox_sprite.png);
$urlLoading: url(fancybox_loading.gif);
$urlBlank: url(blank.gif);
$urlOverlay: url(fancybox_overlay.png);
$urlSprite2x: url([email protected]);
$urlLoading2x: url([email protected]);

//@extend-elements
%extend_body {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  vertical-align: top;
}

//original selectors
%extend_display {
  display: block;
  width: 100%;
  height: 100%;
}

.fancybox-wrap {
  @extend %extend_body;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8020;
  iframe {
    @extend %extend_body;
  }
  object {
    @extend %extend_body;
  }
}

.fancybox-skin {
  @extend %extend_body;
  position: relative;
  background: $alabaster;
  color: $tundora;
  @include text-shadow(none);
  //text-shadow: none;
  @include border-radius(4px);
  //border-radius: 4px;
}

.fancybox-outer {
  @extend %extend_body;
  position: relative;
}

.fancybox-inner {
  @extend %extend_body;
  position: relative;
  overflow: hidden;
}

.fancybox-image {
  @extend %extend_body;
  @extend %extend_display;
  max-width: 100%;
  max-height: 100%;
}

.fancybox-nav {
  @extend %extend_body;
  position: absolute;
  top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
  background: transparent $urlBlank;
  z-index: 8040;
  span {
    @extend %extend_body;
    position: absolute;
    top: 50%;
    @include rem(width, 36px);
    //width: 36px;
    @include rem(height, 34px);
    //height: 34px;
    @include rem(margin-top, -18px);
    //margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
  }
  &:hover span {
    visibility: visible;
  }
}

.fancybox-tmp {
  @extend %extend_body;
  position: absolute;
  @include rem(top, -99999px);
  @include rem(left, -99999px);
  @include rem(max-width, 99999px);
  @include rem(max-height, 99999px);
  //top: -99999px;
  //left: -99999px;
  //max-width: 99999px;
  //max-height: 99999px;
  overflow: visible !important;
}

.fancybox-opened {
  z-index: 8030;
  .fancybox-skin {
    //box-shadow: 0 10px 25px $black50;
    @include box-shadow(0 10px 25px $black50);
  }
  .fancybox-title {
    visibility: visible;
  }
}

.fancybox-error {
  color: $tundora;
  @include rem(font-size, 14px/20px);
  font-family: $fontHN, $fontH, $fontA, $fontSS;
  //font: 14px/20px $fontHN, $fontH, $fontA, $fontSS;
  margin: 0;
  @include rem(padding, 15px);
  //padding: 15px;
  white-space: nowrap;
}

.fancybox-iframe {
  @extend %extend_display;
}

#fancybox-loading {
  background-image: $urlSprite;
  position: fixed;
  top: 50%;
  left: 50%;
  @include rem(margin-top, -22px);
  @include rem(margin-left, -22px);
  //margin-top: -22px;
  //margin-left: -22px;
  @include rem(background-position, 0 -108px);
  //background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 8060;
  div {
    @include rem(width, 44px);
    @include rem(height, 44px);
    //width: 44px;
    //height: 44px;
    background: $urlLoading center center no-repeat;
  }
}

.fancybox-close {
  background-image: $urlSprite;
  position: absolute;
  @include rem(top, -18px);
  @include rem(right, -18px);
  //top: -18px;
  //right: -18px;
  @include rem(width, 36px);
  @include rem(height, 36px);
  //width: 36px;
  //height: 36px;
  cursor: pointer;
  z-index: 8040;
}

.fancybox-prev {
  left: 0;
  span {
    background-image: $urlSprite;
    @include rem(left, 10px);
    //left: 10px;
    @include rem(background-position, 0 -36px);
    //background-position: 0 -36px;
  }
}

.fancybox-next {
  right: 0;
  span {
    background-image: $urlSprite;
    @include rem(right, 10px);
    //right: 10px;
    @include rem(background-position, 0 -72px);
    //background-position: 0 -72px;
  }
}

.fancybox-lock {
  overflow: visible !important;
  width: auto;
  body {
    overflow: hidden !important;
  }
  .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
  }
}

.fancybox-lock-test {
  overflow-y: hidden !important;
}

.fancybox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  z-index: 8010;
  background: $urlOverlay;
}

.fancybox-overlay-fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

.fancybox-title {
  visibility: hidden;
  @include rem(font-size, 13px/20px);
  font-family: $fontHN, $fontH, $fontA, $fontSS;
  //font: normal 13px/20px $fontHN, $fontH, $fontA, $fontSS;
  position: relative;
  //Instead of the line below you could use @includetext-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
  text-shadow: none;
  z-index: 8050;
}

.fancybox-title-float-wrap {
  position: absolute;
  bottom: 0;
  right: 50%;
  @include rem(margin-bottom, -35px);
  //margin-bottom: -35px;
  z-index: 8050;
  text-align: center;
  .child {
    display: inline-block;
    margin-right: -100%;
    @include rem(padding, 2px 20px);
    //padding: 2px 20px;
    background: transparent;
    background: $black80;
    @include border-radius(15px);
    //border-radius: 15px;
    @include text-shadow(0 1px 2px $cabin);
    //text-shadow: 0 1px 2px $cabin;
    color: $white;
    font-weight: bold;
    @include rem(line-height, 24px);
    //line-height: 24px;
    white-space: nowrap;
  }
}

.fancybox-title-outside-wrap {
  position: relative;
  @include rem(margin-top, 10px);
  //margin-top: 10px;
  color: $white;
}

.fancybox-title-inside-wrap {
  @include rem(padding-top, 10px);
  //padding-top: 10px;
}

.fancybox-title-over-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  color: $white;
  @include rem(padding, 10px);
  //padding: 10px;
  background: $black;
  background: $black80;
}

@media only screen

and
(
-webkit-min-device-pixel-ratio:

1.5
)
,
only screen

and
(
min--moz-device-pixel-ratio:

1.5
)
,
only screen

and
(
min-device-pixel-ratio:

1.5
)
{
#fancybox-loading {
  background-image: $urlSprite2x;
  @include rem(background-size, 44px 152px);
  //background-size: 44px 152px;
  div {
    background-image: $urlLoading2x;
    @include rem(background-size, 24px 24px);
    //background-size: 24px 24px;
  }
}

.fancybox-close {
  background-image: $urlSprite2x;
  @include rem(background-size, 44px 152px);
  //background-size: 44px 152px;
}

.fancybox-prev span {
  background-image: $urlSprite2x;
  @include rem(background-size, 44px 152px);
  //background-size: 44px 152px;
}

.fancybox-next span {
  background-image: $urlSprite2x;
  @include rem(background-size, 44px 152px);
  //background-size: 44px 152px;
}

}
.fancybox-type-iframe .fancybox-inner {
}