@charset "UTF-8"; @import "compass"; // Remove useless vendor prefix $support-for-original-webkit-gradients : false; $experimental-support-for-microsoft : false; $experimental-support-for-opera : false; $experimental-support-for-khtml : false; // ------------------ // OUTPUT CONFIG // ------------------ // User modifiable $responsive : true !default; $adaptive : false !default; // Shouldn't be modified by user $user-mode : false !default; // check whether the mixin call is coming from framework or user $in-media : false !default; // check whether the content is inside media query // Must be true $include-normalize : true !default; $include-typography : true !default; $include-grid : true !default; $include-tile : true !default; // Default is false $include-animate : false !default; $include-print : false !default; $include-code : false !default; // ---------- // COLOR // ---------- $main-color : #2a71e3 !default; $sub-color : #d7d7d7 !default; $link-color : $main-color !default; $passive-color : #d7d7d7 !default; $blue-color : #2a71e3 !default; $yellow-color : #fac741 !default; $red-color : #d35400 !default; $green-color : #229e61 !default; // --------------- // GLOBAL VALUE // --------------- $g-radius : 3px !default; $g-transition : all .2s ease-out !default; // ---------------------------- // BASE FONT and LINE-HEIGHT // ---------------------------- $body-font-size : 16px !default; $body-line-height : 1.5 !default; // -------------- // EM CONVERTER // -------------- // Strips unit and return plain number @function stripUnit($num) { @return $num / ($num * 0 + 1); } // Convert the number to EM @function convertToEm($value, $context: $body-font-size) { // if not number, return it as is @if type-of($value) != number { @return $value; } $value: stripUnit($value) / stripUnit($context) * 1em; // turn 0em into 0 @if ($value == 0em) { $value: 0; } @return $value; } @function em($values, $context: $body-font-size) { // if only contain single number, convert it directly @if type-of($values) == number { @return convertToEm($values, $context); } // if contains multiple values, loop through it $emValues : (); @each $val in $values { $emValues: append($emValues, convertToEm($val, $context) ); } @return join((), $emValues, space ); } // ------------------- // MEDIA QUERIES // ------------------- $mini-screen : 480px !default; $small-screen : 767px !default; $medium-screen : 1120px !default; $large-screen : 1440px !default; $retina-screen : 192dpi !default; @function translateSize($size) { // if number, return it as it is @if type-of($size) == number { @return $size; } // if keyword, return the translated size @else if $size == mini { @return $mini-screen; } @else if $size == small { @return $small-screen; } @else if $size == medium { @return $medium-screen; } @else if $size == large { @return $large-screen; } @else if $size == retina { @return $retina-screen; } } // Standalone mixin @mixin below($named-size) { @if $responsive { $in-media: true !global; $size: translateSize($named-size); @if $named-size == retina { @media only screen and (-webkit-max-device-pixel-ratio: 2), (max-resolution: $size) { @content; } } @else { @media only screen and (max-width: $size) { @content; } } $in-media: false !global; } } @mixin above($named-size) { @if $responsive { $in-media: true !global; $size: translateSize($named-size) + 1px; @if $named-size == retina { @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: $size) { @content; } } @else { @media only screen and (min-width: $size) { @content; } } $in-media: false !global; } } @mixin between($smaller-size, $larger-size) { @if $responsive { $in-media: true !global; $smaller-size: translateSize($smaller-size); $larger-size: translateSize($larger-size); @media only screen and (min-width: $smaller-size) and (max-width: $larger-size) { @content; } $in-media: false !global; } } @mixin print { @media only print { @content; } } // ---------------------------------------------- // CLEARING FLOAT // Make a container wraps floated element // ---------------------------------------------- @mixin clearfix { zoom: 1; &::before, &::after { content: " "; display: table; } &::after { clear: both; } } // -------------------------------- // SELECTION // Change the text highlight color // -------------------------------- @mixin selection($background-color:lighten($main-color, 35%), $color:white) { ::-moz-selection { background: $background-color; text-shadow: none !important; color: $color !important; } ::selection { background: $background-color; text-shadow: none !important; color: $color !important; } } // ------------------------------------------------------ // DISABLE SELECTION // Prevents user to select/highlight the element's text // ------------------------------------------------------ @mixin disable-user-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } @mixin user-select($value) { -webkit-touch-callout: $value; -webkit-user-select: $value; -khtml-user-select: $value; -moz-user-select: $value; -ms-user-select: $value; user-select: $value; } // --------------------- // TEXT DIRECTION // --------------------- $text-direction : ltr !default; // Controls default global text direction, 'rtl' or 'ltr' $default-float : left !default; $default-opposite : right !default; // No need to change this conditional statement, $text-direction variable controls it all. @if $text-direction == ltr { $default-float : left; $default-opposite : right; } @else { $default-float : right; $default-opposite : left; } // ------------- // TRIANGLE // ------------- @mixin triangle( $width, $direction : top, $color : $main-color, $height : false) { // If height is not specified, make the triangle equalateral @if not $height { // If normal triangle, `height` is set to half `width` @if $direction == top or $direction == up or $direction == right or $direction == left or $direction == bottom or $direction == down { $height : ($width / 2) * 1.732; } // Else if cornered triangle, `heigth` is the same as `width` @else if $direction == top-right or $direction == top-left or $direction == bottom-right or $direction == bottom-left { $height : $width; } } width: 0; height: 0; font-size: 0; line-height: 0%; border-style: solid; border-color: transparent; // Top /\ @if $direction == top or $direction == up { border-width : 0 $width/2 $height $width/2; border-bottom-color : $color; } // Right |> @else if $direction == right { border-width : $width/2 0 $width/2 $height; border-left-color : $color; } // Bottom \/ @else if $direction == bottom or $direction == down { border-width : $height $width/2 0 $width/2; border-top-color : $color; } // Left <| @else if $direction == left { border-width : $width/2 $height $width/2 0; border-right-color : $color; } // __ // Top-right \ | // \| @else if $direction == top-right { border-width : 0 $width $height 0; border-right-color : $color; } // Bottom-right /| // /_| @else if $direction == bottom-right { border-width : 0 0 $height $width; border-bottom-color : $color; } // Bottom-left |\ // |_\ @else if $direction == bottom-left { border-width : $height 0 0 $width; border-left-color : $color; } // __ // Top-left | / // |/ @else if $direction == top-left { border-width : $height $width 0 0; border-top-color : $color; } } // ------------------------------------------------ // CSS3 - VENDOR PREFIX // for property that is not supported by Compass // ------------------------------------------------ @mixin css3($property, $value, $moz : $experimental-support-for-mozilla, $webkit : $experimental-support-for-webkit, $o : $experimental-support-for-opera, $ms : $experimental-support-for-microsoft, $khtml : $experimental-support-for-khtml, $official : true) { @if $webkit { -webkit-#{$property}: $value; } @if $khtml { -khtml-#{$property}: $value; } @if $moz { -moz-#{$property}: $value; } @if $ms { -ms-#{$property}: $value; } @if $o { -o-#{$property}: $value; } @if $official { #{$property}: $value; } }