rtpl-compass 1.0

data/templates/project/sass/source/lib/mixins/_gridsystem.sass

@@ -0,0 +1,66 @@
+// Based on 960 Grid System - http://960.gs/
+
+// Default variables:
+// $numberOfColumns = 12 (Number of columns)
+// $gutterWidth = 20px (Gutter width)
+// $fullWidth = 960px (Full width)
+// $fluid = false (Activate fluid version)
+// $fluidMargin = 4% (Margin of container in fluid version)
+
+// ---
+// 960 Grid System: 12 Column Grid
+// +gridsystem
+// ---
+// 960 Grid System: 16 Column Grid
+// +gridsystem(16)
+// ---
+// Grid System: Fluid Version
+// +gridsystem(12, 2%, 100%, true)
+// ---
+// Variable Grid System
+// +gridsystem(8, 40, 960)
+
+=gridsystem($numberOfColumns: 12, $gutterWidth: 20px, $fullWidth: 960px, $fluid: false, $fluidMargin: 4%)
+  $gutterWidth: lessPoint($gutterWidth)
+  $fullWidth: lessPoint($fullWidth)
+  $width_for_columns: $fullWidth - $numberOfColumns*$gutterWidth
+  $column_width: $width_for_columns/$numberOfColumns
+  $gutterWidthHalf: $gutterWidth/2
+
+  .container_#{$numberOfColumns}
+    @if $fluid
+      width: 100% - $fluidMargin*2
+      margin-left: $fluidMargin
+      margin-right: $fluidMargin
+    @else
+      +center($fullWidth)
+
+  .grid
+    position: relative
+    float: left
+    margin-left: $gutterWidthHalf
+    margin-right: $gutterWidthHalf
+
+  .grid_#{$numberOfColumns}
+    float: none
+    clear: both
+
+  // Grid >> Children (Alpha ~ First, Omega ~ Last)
+  .alpha
+    margin-left: 0
+
+  .omega
+    margin-right: 0
+
+  // Grids
+  @for $i from 1 through $numberOfColumns
+    $grid_width: $column_width*$i + $gutterWidth*$i - $gutterWidth
+    .container_#{$numberOfColumns}
+      .grid_#{$i}
+        width: $grid_width
+        +bf
+          content: 'grid_#{$i}'
+        +h
+          cursor: pointer
+          +bf
+            content: '#{$grid_width}'

data/templates/project/sass/source/lib/mixins/_media.sass

@@ -0,0 +1,209 @@
+// Resolutions
+$FHD: 1920px
+$WXGA-plus: 1680px
+$HD: 1366px
+$WXGA: 1280px
+$XGALandscape: 1024px
+$XGAPortrait: 768px
+$VGA: 640px
+$HVGA: 480px
+$QVGA: 320px
+
+// Rafal Bromirski mixins rules (http://paranoida.com/)
+//   ---
+//   @ hdpi(ratio)                    // devices with hidpi displays (default ratio: 1.3)
+//   ---
+//   @ iphone3                        // only iPhone (2, 3G, 3GS) landscape & portrait
+//   @ iphone3-landscape              // only iPhone (2, 3G, 3GS) only landscape
+//   @ iphone3-portrait               // only iPhone (2, 3G, 3GS) only portrait
+//   ---
+//   @ iphone4                        // only iPhone (4, 4S) landscape & portrait
+//   @ iphone4-landscape              // only iPhone (4, 4S) only landscape
+//   @ iphone4-portrait               // only iPhone (4, 4S) only portrait
+//   ---
+//   @ iphone5                        // only iPhone (5) landscape & portrait
+//   @ iphone5-landscape              // only iPhone (5) only landscape
+//   @ iphone5-portrait               // only iPhone (5) only portrait
+//   ---
+//   @ ipad                           // only iPad (1, 2, Mini) landscape & portrait
+//   @ ipad-landscape                 // only iPad (1, 2, Mini) only landscape
+//   @ ipad-portrait                  // only iPad (1, 2, Mini) only portrait
+//   ---
+//   @ ipad-retina                    // only iPad (3, 4) landscape & portrait
+//   @ ipad-retina-landscape          // only iPad (3, 4) only landscape
+//   @ ipad-retina-portrait           // only iPad (3, 4) only portrait
+//   ---
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- hdpi ------------------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+// Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss)
+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+
+=hdpi($ratio: 1.3)
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), only screen and (min-resolution: #{round($ratio*96)}dpi), only screen and (min-resolution: #{$ratio}dppx)
+    @content
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- iphone ----------------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+=iphone
+  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
+    @content
+
+=iphone3
+  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
+  and (-webkit-device-pixel-ratio: 1)
+    @content
+
+=iphone3-portrait
+  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
+  and (-webkit-device-pixel-ratio: 1) and (orientation:portrait)
+    @content
+
+=iphone3-landscape
+  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
+  and (-webkit-device-pixel-ratio: 1) and (orientation:landscape)
+    @content
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- iphone-retina ---------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+=iphone4
+  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
+  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3)
+    @content
+
+=iphone4-portrait
+  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
+  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:portrait)
+    @content
+
+=iphone4-landscape
+  @media only screen and (min-device-width: 320px)  and (max-device-width: 480px)
+  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:landscape)
+    @content
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- iphone-5 --------------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+=iphone5
+  @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
+  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
+    @content
+
+=iphone5-portrait
+  @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
+  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
+    @content
+
+=iphone5-landscape
+  @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
+  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape)
+    @content
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- ipad + ipad mini ------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+=ipad
+  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
+  and (-webkit-device-pixel-ratio: 1)
+    @content
+
+=ipad-portrait
+  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
+  and (-webkit-device-pixel-ratio: 1) and (orientation:portrait)
+    @content
+
+=ipad-landscape
+  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
+  and (-webkit-device-pixel-ratio: 1) and (orientation:landscape)
+    @content
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- ipad-retina -----------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+=ipad-retina
+  @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
+  and (-webkit-device-pixel-ratio: 2)
+    @content
+
+=ipad-retina-portrait
+  @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
+  and (-webkit-device-pixel-ratio: 2) and (orientation:portrait)
+    @content
+
+=ipad-retina-landscape
+  @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
+  and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)
+    @content
+
+// Retina
+=retina
+  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
+    @content
+
+// Screen
+=mq($res-min, $res-max)
+  @media screen and ( min-width: if(unitless($res-min), $res-min*$units, $res-min) ) and ( max-width: if(unitless($res-max), $res-max*$units, $res-max) )
+    @content
+
+=mq-max($res)
+  @media screen and ( max-width: if(unitless($res), $res*$units, $res) )
+    @content
+
+=mq-min($res)
+  @media screen and ( min-width: if(unitless($res), $res*$units, $res) )
+    @content
+
+// Library screens
+
+=mqhd
+  @media only screen and (min-width: $HD)
+    @content
+
+// Only desktops & tablets landscape
+=mq1366and1024
+  @media only screen and (min-width: $XGALandscape + 1) and (max-width: $HD)
+    @content
+
+// >= 1024px
+=mq1024
+  @media only screen and (max-width: $XGALandscape)
+    @content
+
+// Only tablets portrait
+=mq1024and768
+  @media only screen and (min-width: $XGAPortrait + 1) and (max-width: $XGALandscape)
+    @content
+
+// >= 768px
+=mq768
+  @media only screen and (max-width: $XGAPortrait)
+    @content
+
+// Phones landscape
+=mq768and480
+  @media only screen and (min-width: $HVGA + 1) and (max-width: $XGAPortrait)
+    @content
+
+// >= 640px
+=mq640
+  @media only screen and (max-width: $VGA)
+    @content
+
+// >= 480px
+=mq480
+  @media only screen and (max-width: $HVGA)
+    @content
+
+// Small phones (>=320px)
+=mq320
+  @media only screen and (max-width: $QVGA)
+    @content

data/templates/project/sass/source/lib/mixins/_positions.sass

@@ -0,0 +1,42 @@
+// ** Align icons
+=alignIcon($top, $depth: true)
+  $top: lessPoint($top)
+  +pos("r", $top, false, false, false, false, $depth)
+
+=pos($pos: "a", $top: false, $right: false, $bottom: false, $left: false, $zIndex: false, $depth: true)
+  @if $pos == "a"
+    $pos: "absolute"
+  @if $pos == "r"
+    $pos: "relative"
+  @if $pos == "f"
+    $pos: "fixed"
+  @if $depth
+    @if $pos == "absolute"
+      @extend %absolute
+    @else if $pos == "relative"
+      @extend %relative
+    @else if $pos == "fixed"
+      @extend %fixed
+  @else
+    position: $pos
+  @if $top
+    top: lessPoint($top)
+  @if $right
+    right: lessPoint($right)
+  @if $bottom
+    bottom: lessPoint($bottom)
+  @if $left
+    left: lessPoint($left)
+  @if $pos == "absolute" && $pos == "fixed"
+    @if $zIndex
+      z-index: $zIndex
+    @else
+      z-index: 1
+  @else
+    @if $zIndex
+      z-index: $zIndex
+
+// ** Pseudo
+=psAbsPos($top: false, $right: false, $bottom: false, $left: false, $zIndex: false)
+  +pos(absolute, $top, $right, $bottom, $left, $zIndex)
+  content: ''

data/templates/project/sass/source/lib/mixins/_sprites.sass

@@ -0,0 +1,65 @@
+// Determines if you want to include magic selectors in your sprites
+$disable-magic-sprite-selectors:true
+
+// sized sprites
+=image-size($path)
+  width: image-width($path)
+  height: image-height($path)
+
+//shortcut
+=s($sprite, $map: $icons, $class: "icons")
+  @extend %#{$class}
+  +image-size(sprite-file($map, $sprite))
+  background-position: sprite-position($map, $sprite)
+
+//only position of sprite, to remove flicker effect in chrome
+=sp($sprite, $map: $icons, $class: "icons")
+  @extend %#{$class}
+  background-position: sprite-position($map, $sprite)
+
+//icons centered on width
+=centerWidthIcons($name, $map: $icons)
+  $width: image-width(sprite-file($map, $name))
+  margin-left: -($width/2)
+
+//icons centered on height
+=centerHeightIcons($name, $map: $icons)
+  $height: image-height(sprite-file($map, $name))
+  margin-top: -($height/2)
+
+=sah($sprite, $map: $icons)
+  +s($sprite, $map)
+  +centerHeightIcons($sprite, $map)
+
+=saw($sprite, $map: $icons)
+  +s($sprite, $map)
+  +centerWidthIcons($sprite, $map)
+
+//icons centered function
+=iconsPos($name, $distance, $alignmentHeight: true, $size: "right")
+  +s($name, $map: $icons)
+  margin-#{$size}: $distance
+  @if $alignmentHeight
+    +centerHeightIcons($name)
+  else
+    +centerWidthIcons($name)
+
+// SVG
+// insert svg
+=svg($name, $width, $height, $folder: $svg-folder)
+  $width: lessPoint($width)
+  $height: lessPoint($height)
+  +dib(middle)
+  width: $width
+  height: $height
+  background: url('../images/#{$folder}/#{$name}.svg') no-repeat 0 0
+  +background-size($width $height)
+
+// insert svg with fallback
+=svgPng($name, $map: $icons, $folderSvg: $svg-folder)
+  $path: sprite-file($map, $name)
+  $width: image-width($path)
+  $height: image-height($path)
+  +svg($name, $width, $height, $folderSvg)
+  html.no-svg &
+    +s($name, $map)

data/templates/project/sass/source/lib/mixins/_width.sass

@@ -0,0 +1,27 @@
+// ** Responsive Web Design *width*--
+@function rwd($elWidth, $parentWidth: $standard)
+  $elWidth: lessPoint($elWidth)
+  $parentWidth: lessPoint($parentWidth)
+  @return $elWidth * 100% / $parentWidth
+
+=rwd($elWidth, $parentWidth: $standard)
+  width: rwd($elWidth, $parentWidth)
+
+=center($Static: $standard, $Max: false, $Min: false)
+  @if ($Static)
+    width: lessPoint($Static)
+  @if ($Max)
+    max-width: lessPoint($Max)
+  @if ($Min)
+    min-width: lessPoint($Min)
+  margin: auto
+
+// Proportion units
+=propBl($width, $proportion: 1, $depth: true)
+  @if $depth
+    @extend %relative
+  @else
+    position: relative
+  overflow: hidden
+  width: $width
+  padding-bottom: $width/$proportion

data/templates/project/sass/source/plugins/_jquery.fancybox.sass

@@ -0,0 +1,197 @@
+$fancyboxPading: 15px
+
+$fancyboxSkinBg: #f9f9f9
+$fancyboxSkinFontColor: #444
+
+$fancyboxLoadingSize: 44px
+$fancyboxLoadingPos: $fancyboxLoadingSize/2
+
+$fancyboxNavWidth: 40%
+$fancyboxNavSpanWidtn: image-width(sprite-file($icons, fancyPrev))
+$fancyboxNavSpanHeight: image-height(sprite-file($icons, fancyPrev))
+
+$fancyboxOverlayBg: #000
+$fancyboxOverlayA: .75
+
+.fancybox-wrap,
+.fancybox-skin,
+.fancybox-outer,
+.fancybox-inner,
+.fancybox-image,
+.fancybox-wrap iframe,
+.fancybox-wrap object,
+.fancybox-nav,
+.fancybox-nav span,
+.fancybox-tmp
+  +reset-box-model
+  vertical-align: top
+
+.fancybox-wrap
+  +pos(absolute, 0, false, false, 0, 8020)
+  +focus
+    outline: none
+
+.fancybox-skin
+  @extend %relative
+  background: $fancyboxSkinBg
+  border-radius: 4px
+  color: $fancyboxSkinFontColor
+  text-shadow: none
+
+.fancybox-opened
+  z-index: 8030
+
+  .fancybox-skin
+    box-shadow: 0 10px 25px rgba(0, 0, 0, .5)
+
+.fancybox-outer,
+.fancybox-inner
+  @extend %relative
+
+.fancybox-inner
+  overflow: hidden
+
+  .fancybox-type-iframe &
+    -webkit-overflow-scrolling: touch
+
+.fancybox-error
+  padding: $fancyboxPading
+  margin: 0
+
+  color: $baseFontColor
+  font: italic bold $baseFontSize+unquote('/')+"normal" $baseFontFamily
+  font-size: rem($baseFontSize)
+  white-space: nowrap
+
+.fancybox-image,
+.fancybox-iframe
+  @extend %block, .full-size
+
+.fancybox-image
+  max-width: 100%
+  max-height: 100%
+
+#fancybox-loading
+  @extend %cur-pointer, .loading
+  +pos(fixed, 50%, false, false, 50%, 8060)
+  opacity: .8
+  width: $fancyboxLoadingSize
+  height: $fancyboxLoadingSize
+  margin: -$fancyboxLoadingPos 0 0 -$fancyboxLoadingPos
+  border-radius: 5px
+
+.fancybox-close
+  @extend %cur-pointer, %no-select
+  +pos(absolute, -18px, -18px, false, false, 8040)
+  +s(fancyClose)
+  +h
+    opacity: .9
+
+.fancybox-nav
+  @extend %cur-pointer
+  +pos(absolute, 0, false, false, false, 8040)
+  width: $fancyboxNavWidth
+  height: 100%
+  background: transparent
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
+  text-decoration: none
+
+  +h
+    span
+      visibility: visible
+
+  span
+    @extend %cur-pointer
+    +pos(absolute, 50%, false, false, false, 8040)
+    visibility: hidden
+    width: $fancyboxNavSpanWidtn
+    height: $fancyboxNavSpanHeight
+    margin-top: -($fancyboxNavSpanWidtn/2)
+    +h
+      opacity: .9
+
+.fancybox-prev
+  left: 0
+
+  span
+    left: 10px
+    +sp(fancyPrev)
+
+.fancybox-next
+  right: 0
+
+  span
+    right: 10px
+    +sp(fancyNext)
+
+.fancybox-tmp
+  +pos(absolute, -99999px, false, false, -99999px, false)
+  max-width: 99999px
+  max-height: 99999px
+  overflow: visible !important
+
+/* Overlay helper */
+.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
+  +pos(absolute, 0, false, false, 0, 8010)
+  overflow: hidden
+  display: none
+  +rgbaBg($fancyboxOverlayBg, $fancyboxOverlayA)
+
+.fancybox-overlay-fixed
+  +pos(fixed, false, 0, 0, false, 8000)
+
+/* Title helper */
+.fancybox-title
+  @extend %relative
+  z-index: 8050
+  visibility: hidden
+  +shFont($baseFontSize, $baseFontFamily, "normal", false, 700, italic)
+  text-shadow: none
+
+  .fancybox-opened &
+    visibility: visible
+
+.fancybox-title-float-wrap
+  @extend .tac
+  +pos(absolute, false, 50%, 0, false, 8050)
+  margin-bottom: -35px
+
+  .child
+    display: inline-block
+    padding: 2px 20px
+    margin-right: -100%
+    +rgbaBg(#000, .8)
+    border-radius: 15px
+    color: #FFF
+    font-weight: bold
+    text-shadow: 0 1px 2px #222
+    line-height: 24px
+    white-space: nowrap
+
+.fancybox-title-outside-wrap
+  @extend %relative
+  margin-top: 10px
+  color: #fff
+
+.fancybox-title-inside-wrap
+  padding-top: 10px
+
+.fancybox-title-over-wrap
+  +pos(absolute, false, false, 0, 0, false)
+  padding: 10px
+  color: #fff
+  +rgbaBg(#000, .8)