compass-vikingR-template 1.2.4

data/templates/project/sass/_mixins.scss

@@ -0,0 +1,318 @@
+// Mixins
+
+@mixin legacy-pie-clearfix {
+    &:after {
+        content: "\0020";
+        height: 0;
+        clear: both;
+        overflow: hidden;
+        visibility: hidden;
+        display: inline-block;
+        width: 100%;
+    }
+}
+@mixin pie-clearfix {
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+@mixin reset-box-model {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: none;
+}
+@mixin no-bullets{
+    list-style: none;
+    li {
+        margin-left: 0;
+    }
+}
+@mixin dib($align: top){
+    display: inline-block;
+    vertical-align: $align;
+}
+// Icons
+@mixin icons($name) {
+    @include icons-sprite($name);
+    height: icons-sprite-height($name);
+    width: icons-sprite-width($name);
+}
+@mixin centerWidthIcons($name) {
+    margin-left: -(icons-sprite-width($name)/2);
+}
+@mixin centerHeightIcons($name) {
+    margin-top: -(icons-sprite-height($name)/2);
+}
+@mixin iconsPos($fileName, $distance, $alignmentHeight, $size: "right"){
+    @include icons($fileName);
+    margin-#{$size}: $distance;
+    @if $alignmentHeight{
+        @include centerHeightIcons($fileName);
+    }
+    else{
+        @include centerWidthIcons($fileName);
+    }
+}
+
+// Size
+// ** Responsive Web Design *width*--
+@mixin rwd-width($el-width, $parent-width: $standard) {
+    width: $el-width * 100% / $parent-width;
+}
+@function rwd-width-val($el-width, $parent-width: $standard){
+    @return $el-width * 100% / $parent-width;
+}
+
+// Animation
+@mixin animation($name, $value) {
+    @include experimental(animation, $name $value, -moz, -webkit, -o, -ms, not -khtml);
+}
+@mixin keyframes($name) {
+    @-webkit-keyframes #{$name} {
+        @content;
+    }
+    @-moz-keyframes #{$name} {
+        @content;
+    }
+    @-ms-keyframes #{$name} {
+        @content;
+    }
+    @keyframes #{$name} {
+        @content;
+    }
+}
+
+// Arrows
+@mixin arrowBorder($side, $height, $color){
+    $mirrorSide: opposite-position($side);
+    border:{
+        #{$side}:{
+            width: $height;
+            color: $color;
+        }
+        #{$mirrorSide}:{
+            width: 0;
+        }
+    }
+}
+@mixin arrow($side, $width, $height, $color, $once: true, $pos: true){
+    $top: "top";
+    $bottom: "bottom";
+    $left: "left";
+
+    @if $once{
+        @include pseudoAbsPos;
+    }
+
+    @if $pos{
+        $secPos: null;
+        @if $side == $top or $side == $bottom { $secPos: $left}
+        @else{ $secPos: $top }
+
+        #{$side}: 100%;
+        #{$secPos}: 50%;
+        margin-#{$secPos}: -$width;
+    }
+    @else{
+        @content;
+    }
+
+    border: $width solid transparent;
+    @include arrowBorder($side, $height, $color);
+}
+
+// Grids
+// ** Add just the horizontal grid to an element's background
+@mixin column-grid-background($myoffset, $total: $grid-background-total-columns, $column: $grid-background-column-width, $gutter: $grid-background-gutter-width, $offset: $grid-background-offset, $column-color: $grid-background-column-color, $gutter-color: $grid-background-gutter-color, $force-fluid: $grid-background-force-fluid) {
+  @if $show-grid-backgrounds and $show-column-grid-backgrounds {
+    @include background-image(get-column-gradient($total, $column, $gutter, $offset, $column-color, $gutter-color, $force-fluid));
+    background-position: $myoffset 0;
+  }
+}
+@function columnWidth($numberOfColumns, $gutterWidth, $fullWidth){
+    $contentWidth: $fullWidth - $gutterWidth; // Content width;
+    $numberOfGutter: $numberOfColumns - 1; // Number of gutter;
+    $columnWidth: ($contentWidth - ($numberOfGutter*$gutterWidth))/$numberOfColumns; // Column width;
+    @return $columnWidth;
+}
+@mixin grids($numberOfColumns: 12, $gutterWidth: 20, $fullWidth: 960){
+    // Default
+    $title: "Grid System";
+    $desc: "Column Grid";
+    $grid-background-column-color: rgba(251, 188, 188, .5);
+    // Function
+    $myoffset: ($gutterWidth/2)+px;
+    $ColumnWwidth: columnWidth($numberOfColumns, $gutterWidth, $fullWidth);
+    $name: $fullWidth + " " + $title + ": " + $numberOfColumns + ", " + $desc + " " + $numberOfColumns + "x" + $ColumnWwidth + "x" + $gutterWidth;
+    // Settings
+    $grid-background-total-columns: $numberOfColumns;
+    $grid-background-column-width: $ColumnWwidth;
+    $grid-background-gutter-width: $gutterWidth;
+
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: -($grid/2);
+
+    width: $grid;
+    height: 100%;
+
+    @include column-grid-background($myoffset);
+
+    &:before{
+        content: '#{$name}';
+
+        position: fixed;
+        top: 5px;
+        left: 5px;
+
+        font: italic 10px/normal Arial, Helvetica, sans-serif;
+        color: #444;
+    }
+}
+// Font
+// ** Bulletproof font face
+@mixin fontFace($name, $fontFiles, $svgFontName: $fontFiles, $folder: $fontFiles){
+    @font-face {
+        font-family: $name;
+        src: url('../fonts/#{$folder}/#{$fontFiles}.eot?#iefix') format('embedded-opentype'), // IE6-IE9
+             url('../fonts/#{$folder}/#{$fontFiles}.woff') format('woff'), // Modern Browsers
+             url('../fonts/#{$folder}/#{$fontFiles}.ttf') format('truetype'), // Safari, Android, iOS
+             url('../fonts/#{$folder}/#{$fontFiles}.svg##{$svgFontName}') format('svg'); // Legacy iOS
+    }
+}
+// ** Responsive Web Design *font-size*
+@mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) {
+    @if not $relative-font-sizing and $from-size != $base-font-size {
+        @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to";
+    }
+    font-size: $font-unit * $to-size / $from-size;
+}
+@function adjust-font-size-to-val($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size){
+    @if not $relative-font-sizing and $from-size != $base-font-size {
+        @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to";
+    }
+    @return $font-unit * $to-size / $from-size;
+}
+@mixin rem-font-size($fontUnit){
+    $defaultFontSize: $base-font-size;
+    font-size: $fontUnit;
+    font-size: $fontUnit/$defaultFontSize+rem;
+}
+@function rem-font-size($fontUnit){
+    $defaultFontSize: $base-font-size;
+    @return $fontUnit/$defaultFontSize+rem;
+}
+@mixin photoshopLetterSpacing($photoshopValue){
+    $cssValue: $photoshopValue/1000;
+    letter-spacing: $cssValue+em;
+}
+
+@mixin centerBlock($Static, $Max: false, $Min: false){
+    @if ($Static){
+        width: $Static;
+    }
+    @if($Max){
+        max-width: $Max;
+    }
+    @if($Min){
+        min-width: $Min;
+    }
+    margin: auto;
+}
+// ** Align icons
+@mixin alignIcon($top){
+    @include pos(relative, #{$top}px, false, false, false, false);
+}
+// ** Pseudo
+@mixin pseudoAbsPos($top: false, $right: false, $bottom: false, $left: false, $zIndex: false){
+    @include pos(absolute, $top, $right, $bottom, $left, $zIndex);
+
+    content: '';
+}
+@mixin pos($pos, $top: false, $right: false, $bottom: false, $left: false, $zIndex: false){
+    @if $pos == "absolute"{
+        @extend .absolute;
+    }
+    @else if $pos == "relative"{
+        @extend .relative;
+    }
+    @else if $pos == "fixed"{
+        @extend .fixed;
+    }
+    @else{
+        position: $pos;
+    }
+    @if $top{
+        top: $top;
+    }
+    @if $right{
+        right: $right;
+    }
+    @if $bottom{
+        bottom: $bottom;
+    }
+    @if $left{
+        left: $left;
+    }
+    @if $zIndex{
+        z-index: $zIndex;
+    }
+}
+
+// Background
+@mixin strongGradient($size, $beginColor, $endColor, $separator){
+    background-color: $beginColor;
+    @include background-image(linear-gradient($size, $beginColor, $beginColor $separator, $endColor $separator, $endColor));
+}
+@mixin rgbaBox($red, $green, $blue, $opacity, $color){
+    background-color: $color;
+    background-color: rgba($red, $green, $blue, $opacity);
+}
+@mixin svg-bg-with-fallback($file_name) {
+    @include dib(middle);
+
+    height: icons-sprite-height($file_name);
+    width: icons-sprite-width($file_name);
+
+    background-repeat: no-repeat;
+    background-image: inline-image('svg/#{$file_name}.svg', image/svg\+xml);
+
+    html.no-svg & {
+        @include icons-sprite($file_name);
+    }
+}
+
+// Form
+@mixin fieldEvent($border, $background, $color){
+    @if $border{
+        border-color: $border;
+    }
+    @if $background{
+        background: $background;
+    }
+    @if $color{
+        color: $color;
+    }
+}
+// ** Placeholder
+@mixin placeholder($name, $color){
+    &#{$name}{
+        color: $color;
+        opacity: 1;
+    }
+    @if $name == ".text-placeholder"{
+        &#{$name}:focus{
+            opacity: 0;
+        }
+    }
+    @else{
+        &:focus#{$name}{
+            opacity: 0;
+        }
+    }
+}