+++ /dev/null
-/* ------------------------------
- Util: Mixins
------------------------------- */
-
-/* Calculate px to rem */
-@function calculateRem($size) {
- $remSize: $size / $base-font-size;
- @return $remSize * 1rem;
-}
-
-@mixin font-size($size) {
- font-size: $size;
- font-size: calculateRem($size);
-}
-
-/* Photoshop letter spacing */
-@function tracking($target) {
- @return ($target / 1000) * 1rem;
-}
-
-@mixin tracking($target) {
- letter-spacing: tracking($target);
-}
-
-/* Float fix */
-@mixin clearfix {
- &:after {
- content: "";
- display: table;
- clear: both;
- }
-}
-
-/* Input placeholder selector */
-@mixin placeholder {
- $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
- @each $placeholder in $placeholders {
- &:#{$placeholder}-placeholder {
- @content;
- }
- }
-}
-
-@mixin keyframes($animation-name) {
- @keyframes #{$animation-name} {
- @content;
- }
-}
-
-@keyframes slide-up {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- transform: translate(0,0);
- }
-}
-
-@mixin cascading {
- @for $i from 1 through 14 {
- &:nth-child(#{$i}) {
- animation: slide-up 250ms cubic-bezier(0.645, 0.045, 0.355, 1) forwards #{$i * 0.1}s;
- }
- }
-}
-
-$scrimStops: 0% 0%, 26.2% 19%, 45.9% 34%, 61.8% 47%, 72.2% 56.5%, 80.6% 65%, 87.4% 73%, 92.5% 80.2%, 95.8% 86.1%, 97.9% 91%, 99.2% 95.2%, 99.8% 98.2%, 100% 100%;
-
-@function getColorStop($colorTo, $colorFrom, $weight, $stop) {
- @return mix($colorFrom, $colorTo, $weight) $stop;
-}
-
-@function getColorStops($colorTo, $colorFrom) {
- $stops: ();
- @each $scrimStop in $scrimStops {
- $stops: append($stops, getColorStop($colorTo, $colorFrom, nth($scrimStop, 1), nth($scrimStop, 2)), comma)
- }
- @return $stops;
-}
-
-@function scrim-linear-gradient($args...) {
- @if (length($args) == 2) {
- @return linear-gradient(#{getColorStops(nth($args, 1), nth($args, 2))});
- }
- @return linear-gradient(#{nth($args, 1)}, #{getColorStops(nth($args, 2), nth($args, 3))});
-}
-
-@function unicode($str) {
- @return unquote("\"") + $str + unquote("\"");
-}
-
-/* Breakpoints */
-$phone: 450px;
-$smartphone: 767px;
-$tablet: 1024px;
-$only-desktop: 1025px;
-$screen-xs: 1280px;
-$screen-sm: 1368px;
-$screen-md: 1418px;
-$screen-xl: 1680px;
-
-
-@mixin mq($breakpoint) {
- @media only screen and (max-width: $breakpoint) {
- @content;
- }
-
-}
-@mixin rwd($canvas) {
-
- // Really Small devices
- @if $canvas == 'phone' {
- @media only screen and (max-width: $phone) {
- @content;
- }
- }
-
- // Smartphones
- @else if $canvas == 'smartphone' {
- @media only screen and (max-width: $smartphone) {
- @content;
- }
- }
- @else if $canvas == 'smartphone-portrait' {
- @media only screen and (max-width: $smartphone) and (orientation: portrait) {
- @content;
- }
- }
- @else if $canvas == 'smartphone-landscape' {
- @media only screen and (max-width: $smartphone) and (orientation: landscape) {
- @content;
- }
- }
-
- // Tablets
- @else if $canvas == 'tablet' {
- @media only screen and (max-width: $tablet) {
- @content;
- }
- }
- @else if $canvas == 'tablet-portrait' {
- @media only screen and (max-width: $tablet) and (orientation: portrait) {
- @content;
- }
- }
- @else if $canvas == 'tablet-landscape' {
- @media only screen and (max-width: $tablet) and (orientation: landscape) {
- @content;
- }
- }
-
- // Screens
- @else if $canvas == 'screen-xs' {
- @media only screen and (max-width: $screen-xs) {
- @content;
- }
- }
- @else if $canvas == 'screen-sm' {
- @media only screen and (max-width: $screen-sm) {
- @content;
- }
- }
- @else if $canvas == 'screen-md' {
- @media only screen and (max-width: $screen-md) {
- @content;
- }
- }
- @else if $canvas == 'screen-xl' {
- @media only screen and (max-width: $screen-xl) {
- @content;
- }
- }
-
- // More than tablets
- @else if $canvas == 'only-desktop' {
- @media only screen and (min-width: 1025px) {
- @content;
- }
- }
-
- // Print styles
- @else if $canvas == 'print' {
- @media print {
- @content;
- }
- }
-
-}