rtpl-compass 1.0

data/templates/project/sass/source/lib/_default.sass

@@ -0,0 +1,226 @@
+// ---------------------------------------------------------------------------------------------------------------------
+// --- Placeholder selectors -------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+%relative
+  position: relative
+
+%absolute
+  position: absolute
+
+%fixed
+  position: fixed
+
+%default-zi
+  z-index: 1
+
+// Display
+%dib
+  display: inline-block
+
+%block
+  display: block
+
+%none
+  display: none
+
+// Vertical-align
+%vab
+  vertical-align: baseline
+
+%vat
+  vertical-align: top
+
+%vam
+  vertical-align: middle
+
+%vab
+  vertical-align: bottom
+
+// Animation
+%anim-light
+  +transition(all .25s ease)
+
+// Cursor
+%cur-pointer
+  cursor: pointer
+
+%cur-default
+  cursor: default
+
+%cur-help
+  cursor: help
+
+%cur-not-allowed
+  cursor: not-allowed
+
+// Figure
+%circle
+  border-radius: 50%
+
+// --Typography--
+%ellipsis
+  +ellipsis(no-wrap)
+
+%break
+  word-wrap: break-word
+
+%nowrap
+  white-space: nowrap
+
+%no-select
+  +user-select(none)
+
+%has-ps-icon
+  @extend %relative
+
+  +bf
+    @extend %absolute, %default-zi
+    content: ''
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- Default classes -------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+.table
+  @extend .full-width
+  display: table
+
+// .row
+//   display: table-row
+
+.cell
+  display: table-cell
+
+// Float
+.left
+  float: left
+
+.right
+  float: right
+
+// Width
+.full-width
+  width: 100%
+
+.half-width
+  width: 50%
+
+.full-height
+  height: 100%
+
+.box
+  @extend %dib, %vat
+
+.segment,
+.icon
+  @extend %dib, %vam
+
+.full-size
+  @extend .full-width, .full-height
+
+.window
+  overflow: hidden
+  @extend .full-width
+
+.wrapper
+  @extend .full-width, %dib, %vat
+
+// Text-align
+.tac
+  text-align: center
+
+.tal
+  text-align: left
+
+.tar
+  text-align: right
+
+// Alignment Blocks In Width
+.jbox
+  line-height: 0
+  text-align: justify
+  +legacy-pie-clearfix
+  .box
+    line-height: normal
+
+// Other
+.clear
+  clear: both
+
+.clearfix
+  +pie-clearfix
+
+// --Images--
+.loading
+  background: #fff url(../images/required/loading.gif) no-repeat center
+
+.img-rwd
+  @extend %block
+  max-width: 100%
+  height: auto
+
+// --Position--
+.aborted
+  +pos(absolute, false, false, false, -10000px, 0)
+  opacity: 0
+  visibility: hidden
+
+.ceiling-pos
+  @extend %absolute, %default-zi
+  top: 0
+  left: 0
+
+.left-pos
+  @extend %absolute, %default-zi
+  top: 50%
+  left: 0
+
+.right-pos
+  @extend %absolute, %default-zi
+  top: 50%
+  right: 0
+
+.top-pos
+  @extend %absolute, %default-zi
+  top: 0
+  left: 50%
+
+.bottom-pos
+  @extend %absolute, %default-zi
+  left: 50%
+  bottom: 0
+
+.center-pos
+  +pos("a", 0, 0, 0, 0, 1)
+  margin: auto
+
+.has-ps-left-icon
+  @extend %has-ps-icon
+  +bf
+    @extend .left-pos
+
+.has-ps-right-icon
+  @extend %has-ps-icon
+  +bf
+    @extend .right-pos
+
+.has-ps-top-icon
+  @extend %has-ps-icon
+  +bf
+    @extend .top-pos
+
+.has-ps-bottom-icon
+  @extend %has-ps-icon
+  +bf
+    @extend .bottom-pos
+
+.has-ps-center-icon
+  @extend %has-ps-icon
+  +bf
+    @extend .center-pos
+
+// Scroll
+.default-scroll
+  overflow: auto
+  -webkit-overflow-scrolling: touch

data/templates/project/sass/source/lib/_mixins.sass

@@ -0,0 +1,15 @@
+// To enable SVG gradient support in Opera and IE9
+$experimental-support-for-svg: true
+
+// Mixins
+@import mixins/animations.sass
+@import mixins/background.sass
+@import mixins/base.sass
+@import mixins/browsers.sass
+@import mixins/fonts.sass
+@import mixins/forms.sass
+@import mixins/media.sass
+@import mixins/positions.sass
+@import mixins/sprites.sass
+@import mixins/width.sass
+@import mixins/gridsystem.sass

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

@@ -0,0 +1,85 @@
+// Based on http://www.w3.org/TR/css3-animations/
+
+$default-animation-name: none
+$default-animation-duration: 0
+$default-animation-timing-function: ease
+$default-animation-iteration-count: 1
+$default-animation-direction: normal
+$default-animation-play-state: running
+$default-animation-delay: 0
+$default-animation-fill-mode: none
+
+=animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false)
+  $name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10)
+  +experimental(animation-name, $name)
+
+
+=animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false)
+  $duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10)
+  +experimental(animation-duration, $duration)
+
+
+=animation-timing-function($timing-function-1: $default-animation-timing-function, $timing-function-2: false, $timing-function-3: false, $timing-function-4: false, $timing-function-5: false, $timing-function-6: false, $timing-function-7: false, $timing-function-8: false, $timing-function-9: false, $timing-function-10: false)
+  $timing-function: compact($timing-function-1, $timing-function-2, $timing-function-3, $timing-function-4, $timing-function-5, $timing-function-6, $timing-function-7, $timing-function-8, $timing-function-9, $timing-function-10)
+  +experimental(animation-timing-function, $timing-function)
+
+
+=animation-iteration-count($iteration-count-1: $default-animation-count, $iteration-count-2: false, $iteration-count-3: false, $iteration-count-4: false, $iteration-count-5: false, $iteration-count-6: false, $iteration-count-7: false, $iteration-count-8: false, $iteration-count-9: false, $iteration-count-10: false)
+  $iteration-count: compact($iteration-count-1, $iteration-count-2, $iteration-count-3, $iteration-count-4, $iteration-count-5, $iteration-count-6, $iteration-count-7, $iteration-count-8, $iteration-count-9, $iteration-count-10)
+  +experimental(animation-iteration-count, $iteration-count)
+
+
+=animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false)
+  $direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10)
+  +experimental(animation-direction, $direction)
+
+
+=animation-play-state($play-state-1: $default-animation-play-state, $play-state-2: false, $play-state-3: false, $play-state-4: false, $play-state-5: false, $play-state-6: false, $play-state-7: false, $play-state-8: false, $play-state-9: false, $play-state-10: false)
+  $play-state: compact($play-state-1, $play-state-2, $play-state-3, $play-state-4, $play-state-5, $play-state-6, $play-state-7, $play-state-8, $play-state-9, $play-state-10)
+  +experimental(animation-play-state, $play-state)
+
+
+=animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false)
+  $delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10)
+  +experimental(animation-delay, $delay)
+
+
+=animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false)
+  @if $animation-1 == default
+    $animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode))
+
+
+  $animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10)
+  +experimental(animation, $animation)
+
+
+// Simple animation with named arguments
+=animation-simple($name: $default-animation-name, $duration: $default-animation-duration, $timing-function: $default-animation-timing-function, $delay: $default-animation-delay, $iteration-count: $default-animation-iteration-count, $direction: $default-animation-direction)
+  +experimental(animation, $name $duration $timing-function $delay $iteration-count $direction)
+
+=anim($name, $value)
+  +experimental(animation, $name $value, -moz, -webkit, -o, -ms, not -khtml)
+
+=animFull($name, $value)
+  +experimental(animation, $name $value, -moz, -webkit, -o, -ms, not -khtml)
+  @at-root
+    +keyframes($name)
+      @content
+
+// This one is from https://developer.mozilla.org/en/CSS/animation-fill-mode
+=animation-fill-mode($fill-mode)
+  +experimental(animation-fill-mode, $fill-mode)
+
+// Spin animation
+=spin($duration: 1, $revers: false)
+  $duration: lessPoint($duration, 1s)
+  +anim(spin, $duration infinite linear)
+  @at-root
+    +keyframes(spin)
+      0%
+        +rotate(0)
+      100%
+        @if $revers
+          +rotate(-359)
+        @else
+          +rotate(359)

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

@@ -0,0 +1,41 @@
+//simple gradient
+=g($color1, $color2)
+  background-color: $color1
+  +background-image(linear-gradient($color1, $color2))
+
+=gh($size, $color1, $color2)
+  background-color: $color1
+  +background-image(linear-gradient($size, $color1, $color2))
+
+=strongGradient($size, $beginColor, $endColor, $separator)
+  background-color: $beginColor
+  +background-image(linear-gradient($size, $beginColor, $beginColor $separator, $endColor $separator, $endColor))
+
+@function hexToRGB($color)
+  $red: red($color)
+  $green: green($color)
+  $blue: blue($color)
+  @return rgb+unquote('(')+($red, $green, $blue)+unquote(')')
+
+@function hexToRGBA($color, $alpha)
+  $red: red($color)
+  $green: green($color)
+  $blue: blue($color)
+  @return rgba+unquote('(')+($red, $green, $blue, $alpha)+unquote(')')
+
+=rgbaBg($color, $alpha)
+  background-color: $color
+  background-color: hexToRGBA($color, $alpha)
+
+=bgImgBl($path)
+  +image-size($path)
+  background: transparent url("../"+$path) no-repeat top center
+  +background-size(100% 100%)
+
+// Candystriping
+=candystriping($bg:#428BCA, $deg:45, $size: 50)
+  $size: lessPoint($size)
+  $deg: lessPoint($deg, 1deg)
+  background-color: $bg
+  @include background-image(linear-gradient($deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) )
+  +background-size($size $size)

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

@@ -0,0 +1,158 @@
+@function lessPoint($value, $unit: $units)
+  @return if(unitless($value), $value*$unit, $value)
+
+=legacy-pie-clearfix
+  &:after
+    clear: both
+    overflow: hidden
+    visibility: hidden
+    display: inline-block
+    width: 100%
+    height: 0
+    content: "\0020"
+
+=pie-clearfix
+  &:after
+    clear: both
+    display: table
+    content: ""
+
+// Reset the box model measurements
+=reset-box-model
+  margin: 0
+  padding: 0
+  border: 0
+
+=dib($align:top)
+  display: inline-block
+  vertical-align: $align
+
+//triangle
+=triangle($width, $height, $bg, $direction)
+  $width: lessPoint($width)
+  $height: lessPoint($height)
+  $halfWidth: ($width/2)
+  border-style: solid
+  @if $direction == "top"
+    border-width: 0 $halfWidth $height $halfWidth
+    border-color: transparent transparent $bg transparent
+  @if $direction == "right"
+    border-width: $halfWidth 0 $halfWidth $height
+    border-color: transparent transparent transparent $bg
+  @if $direction == "bottom"
+    border-width: $height $halfWidth 0 $halfWidth
+    border-color: $bg transparent transparent transparent
+  @if $direction == "left"
+    border-width: $halfWidth $height $halfWidth 0
+    border-color: transparent $bg transparent transparent
+  @if $direction == "top-left"
+    border-width: $height $width 0 0
+    border-color: $bg transparent transparent transparent
+  @if $direction == "top-right"
+    border-width: 0 $width $height 0
+    border-color: transparent $bg transparent transparent
+  @if $direction == "bottom-right"
+    border-width: 0 0 $height $width
+    border-color: transparent transparent $bg transparent
+  @if $direction == "bottom-left"
+    border-width: $width 0 0 $height
+    border-color: transparent transparent transparent $bg
+
+// Arrows
+=arrow($direction, $width, $height, $bg, $once: true, $pos: true)
+  $mirrorSide: opposite-position($direction)
+  $secPos: null
+  $top: "top"
+  $bottom: "bottom"
+  $left: "left"
+  @if $once
+    +psAbsPos
+  @if $pos
+    @if $direction == $top or $direction == $bottom
+      $secPos: $left
+    @else
+      $secPos: $top
+    #{$mirrorSide}: 100%
+    #{$secPos}: 50%
+    margin-#{$secPos}: -(lessPoint($width))
+  @else
+    @content
+  +triangle($width, $height, $bg, $direction)
+
+// Border
+=brd($width, $color, $direction: false, $weight: solid)
+  $width: lessPoint($width)
+  @if $direction
+    border-#{$direction}: $width $weight $color
+  @else
+    border: $width $weight $color
+
+// rotate
+=rotate($deg: 0)
+  $deg: lessPoint($deg, 1deg)
+  +experimental(transform, rotate($deg), -moz, -webkit, -o, -ms, not -khtml)
+  zoom: 1
+
+=selection
+  &::selection
+    @content
+  &::-moz-selection
+    @content
+
+=gpu
+  +transform(translate3d(0, 0, 0))
+
+// CSS Selectors
+=first
+  &:first-child
+    @content
+
+=last
+  &:last-child
+    @content
+
+=nth($child)
+  &:nth-child(#{$child})
+    @content
+
+=nth_n($child, $number: 1)
+  &:nth-child(#{$child}n+#{$number})
+    @content
+
+=nth_e($child)
+  $number: $child - 1
+  &:nth-child(#{$child}n-#{$number})
+    @content
+
+=firstlet
+  &:first-letter
+    @content
+
+=h
+  &:hover
+    @content
+
+=focus
+  &:focus
+    @content
+
+=act
+  &:active
+    @content
+
+=target
+  &:target
+    @content
+
+=bf
+  &:before
+    @content
+
+=af
+  &:after
+    @content
+
+=psBoth
+  &:before,
+  &:after
+    @content

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

@@ -0,0 +1,54 @@
+// All IE
+=ie
+  .ie &
+    @content
+
+// IE11
+=ie11
+  .ie11 &
+    @content
+
+// IE10
+=ie10
+  .ie10 &
+    @content
+
+// IE9
+=ie9
+  .ie10 &
+    @content
+
+// IE8
+=ie8
+  .ie8 &
+    @content
+
+// Firefox
+=ff
+  .ff &
+    @content
+
+// Opera
+=opera
+  .opera &
+    @content
+
+// Safari
+=safari
+  .safari &
+    @content
+
+// Chrome
+=chrome
+  .chrome &
+    @content
+
+// IOS
+=ios
+  .ios &
+    @content
+
+// Android
+=android
+  .android &
+    @content

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

@@ -0,0 +1,84 @@
+// Web safe font combinations
+$Arial: Arial, Helvetica, sans-serif
+$Verdana: Verdana, Geneva, sans-serif
+$Tahoma: Tahoma, Geneva, sans-serif
+$ArialBlack: "Arial Black", Gadget, sans-serif
+$ComicSansMS: "Comic Sans MS", cursive, sans-serif
+$Impact: Impact, Charcoal, sans-serif
+$LucidaSansUnicode: "Lucida Sans Unicode", "Lucida Grande", sans-serif
+$TrebuchetMS: "Trebuchet MS", Helvetica, sans-serif
+$Georgia: Georgia, serif
+$PalatinoLinotype: "Palatino Linotype", "Book Antiqua", Palatino, serif
+$TimesNewRoman: "Times New Roman", Times, serif
+$CourierNew: "Courier New", Courier, monospace
+$LucidaConsole: "Lucida Console", Monaco, monospace
+
+// Bulletproof font face
+=ff($name, $fontFiles, $svgFontName: $fontFiles, $folder: $fontFiles)
+  @font-face
+    font-family: $name
+    src: url('../fonts/#{$folder}/#{$fontFiles}.eot?#iefix') format('embedded-opentype'), url('../fonts/#{$folder}/#{$fontFiles}.woff') format('woff'), url('../fonts/#{$folder}/#{$fontFiles}.ttf') format('truetype'), url('../fonts/#{$folder}/#{$fontFiles}.svg##{$svgFontName}') format('svg')
+
+// Calculating font-size value from Photoshop
+@function rem($fontUnit, $defaultFontSize: $base-font-size)
+  $fontUnit: lessPoint($fontUnit)
+  $defaultFontSize: lessPoint($defaultFontSize)
+  @return $fontUnit/$defaultFontSize + rem
+
+=rem($fontUnit, $defaultFontSize: $base-font-size)
+  $fontUnit: lessPoint($fontUnit)
+  $defaultFontSize: lessPoint($defaultFontSize)
+  font-size: $fontUnit
+  font-size: rem($fontUnit, $defaultFontSize)
+
+// Calculating letter-spacing value from Photoshop
+=lsps($photoshopValue)
+  $cssValue: $photoshopValue/1000
+  letter-spacing: $cssValue + em
+
+// Calculating line-height value from px to percentage
+@function mlh($fontSize, $height)
+  $height: lessPoint($height)
+  $fontSize: lessPoint($fontSize)
+  @return $height/$fontSize
+
+=mlh($fontSize, $height)
+  line-height: mlh($fontSize, $height)
+
+=fontSmoothing($val: antialiased)
+  +experimental(font-smoothing, $val, -moz, -webkit, -o, -ms, not -khtml)
+
+=resDec
+  &,
+  &:hover
+    text-decoration: none
+
+=shFontBox($fontSize, $lineHeight)
+  +rem($fontSize)
+  +mlh($fontSize, $lineHeight)
+
+=shFont($font-size: $base-font-size, $font-family: $Arial, $line-height: "normal", $color: false, $font-weight: false, $font-style: false, $rem: true)
+  $font-size: lessPoint($font-size)
+  $stingLH: null
+  // Calculating line-height
+  @if $line-height == "normal"
+    $stingLH: unquote('/')+"normal"
+  @else if $line-height == false
+    $stingLH: ''
+  @else if unitless($line-height)
+    $stingLH: unquote('/') + $line-height
+  @else
+    $stingLH: unquote('/') + mlh($font-size, $line-height)
+  // Add color
+  @if $color
+    color: $color
+  // Add font-style
+  @if $font-style == false
+    $font-style: null
+  // Add font-weight
+  @if $font-weight == false
+    $font-weight: null
+  // Build font string
+  font: $font-style $font-weight unquote($font-size + $stingLH) $font-family
+  @if $rem
+    font-size: rem($font-size)

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

@@ -0,0 +1,16 @@
+// ** Placeholder
+=placeholder($color)
+  // Vendor Extension Prefixes Placeholders
+  $prefixPlaceholders: ":-moz-placeholder", "::-moz-placeholder", "::-webkit-input-placeholder", ":-ms-input-placeholder", ".text-placeholder"
+
+  @each $prefixPlaceholder in $prefixPlaceholders
+    &#{$prefixPlaceholder}
+      opacity: 1
+      color: $color
+      @content
+    @if $prefixPlaceholder == ".text-placeholder"
+      &#{$prefixPlaceholder}:focus
+        opacity: 0
+    @else
+      &:focus#{$prefixPlaceholder}
+        opacity: 0