// Juice v0.0.8
// ------------
// ----------------------------------
// Variable settings
// ----------------------------------
// Base px
$base-px-default: 16px !default;
// Breakpoints
$hdpi-ratio-default: 1.3 !default;
// Border Radius
$border-radius-default: 5px !default;
// Placeholder Color
$placeholder-color-default: #555555 !default;
// Triangle
$triangle-direction-default: right !default;
$triangle-size-default: $base-px-default !default;
$triangle-color-default: #222222 !default;
$triangle-element-default: after !default;
// Circle
$circle-size-default: $base-px-default !default;
$circle-color-default: inherit !default;
$circle-border-width-default: null !default;
$circle-border-color-default: #222222 !default;
$circle-display-default: inline-block !default;
// Position
$position-default: null !default;
// Tint/Shade
$mix-percent-default: 15% !default;
// ----------------------------------
// Mixins
// ----------------------------------
// Breakpoints
// -----------
$breakpoints: (
"xxlarge": (min-width: 120.0625em), // >= 1921px
"xlarge-only": (min-width: 90.0625em) and (max-width: 120em), // 1441px - 1920px
"xlarge-up": (min-width: 90.0625em), // <= 1920px
"xlarge": (max-width: 120em), // <= 1920px
"large-only": (min-width: 64.0625em) and (max-width: 90em), // 1025px - 1440px
"large-up": (min-width: 64.0625em), // <= 1440px
"large": (max-width: 90em), // <= 1440px
"medium-only": (min-width: 40.0625em) and (max-width: 64em), // 641px - 1024px
"medium-up": (min-width: 40.0625em), // <= 1024px
"medium": (max-width: 64em), // <= 1024px
"not-small": (min-width: 40.0625em), // >= 641px
"small": (max-width: 40em), // <= 640px
"xsmall": (max-width: 30em), // <= 480px
"xxsmall": (max-width: 20em), // <= 320px
"iphone3": (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1),
"iphone3-landscape": (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (orientation: landscape),
"iphone3-portrait": (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) and (orientation: portrait),
"iphone4": (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3),
"iphone4-landscape": (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation: landscape),
"iphone4-portrait": (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation: portrait),
"iphone5": (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71),
"iphone5-landscape": (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation: landscape),
"iphone5-portrait": (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation: portrait),
"iphone6": (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2),
"iphone6-landscape": (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape),
"iphone6-portrait": (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait),
"iphone6-plus": (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3),
"iphone6-plus-landscape": (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape),
"iphone6-plus-portrait": (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait),
"ipad": (min-device-width: 768px) and (max-device-width: 1024px),
"ipad-landscape": (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape),
"ipad-portrait": (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait),
"ipad-retina": (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2),
"ipad-retina-landscape": (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape),
"ipad-retina-portrait": (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait),
"hdpi": "(-webkit-min-device-pixel-ratio: $hdpi-ratio-default),
only screen and (min--moz-device-pixel-ratio: $hdpi-ratio-default),
only screen and (-moz-min-device-pixel-ratio: $hdpi-ratio-default),
only screen and (-o-min-device-pixel-ratio: #{$hdpi-ratio-default}/1),
only screen and (min-resolution: #{round($hdpi-ratio-default*96)}dpi),
only screen and (min-resolution: #{$hdpi-ratio-default}dppx)"
);
@mixin bp($break, $viewport1: null) {
// preset breakpoint
@if not $viewport1 {
@if map-has-key($breakpoints, $break) {
@media only screen and #{inspect(map-get($breakpoints, $break))} { @content; }
}
@else {
@warn "Couldn't find a breakpoint named #{$break}.";
}
}
@else {
// min breakpoint
@if $break == min {
@media screen and (min-width: $viewport1) { @content; }
}
// max breakpoint
@else if $break == max {
@media screen and (max-width: $viewport1) { @content; }
}
// min & max breakpoint
@else {
@media screen and (min-width: $break) and (max-width: $viewport1) { @content; }
}
}
}
// Single side border radius
// -------------------------
@mixin border-top-radius($radius: $border-radius-default) {
border-top-right-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-right-radius($radius: $border-radius-default) {
border-top-right-radius: $radius;
border-bottom-right-radius: $radius;
}
@mixin border-bottom-radius($radius: $border-radius-default) {
border-bottom-right-radius: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius: $border-radius-default) {
border-top-left-radius: $radius;
border-bottom-left-radius: $radius;
}
// Transforms
// ----------
@mixin transform-single($property, $value) {
transform: #{$property}unquote('('#{$value}')');
}
@mixin rotate($deg) {
@include transform-single(rotate, $deg);
}
@mixin rotateX($deg) {
@include transform-single(rotateX, $deg);
}
@mixin rotateY($deg) {
@include transform-single(rotateY, $deg);
}
@mixin rotateZ($deg) {
@include transform-single(rotateZ, $deg);
}
@mixin rotate3d($x, $y, $z, $deg) {
$multi-var: $x, $y, $z, $deg;
@include transform-single(rotate3d, $multi-var);
}
@mixin scale($ratio) {
@include transform-single(scale, $ratio);
}
@mixin scaleX($ratio) {
@include transform-single(scaleX, $ratio);
}
@mixin scaleY($ratio) {
@include transform-single(scaleY, $ratio);
}
@mixin scaleZ($ratio) {
@include transform-single(scaleZ, $ratio);
}
@mixin scale3d($x, $y, $z) {
$multi-var: $x, $y, $z;
@include transform-single(scale3d, $multi-var);
}
@mixin skew($x, $y) {
$multi-var: $x, $y;
@include transform-single(skew, $multi-var);
backface-visibility: hidden;
}
@mixin skewX($deg) {
@include transform-single(skewX, $deg);
backface-visibility: hidden;
}
@mixin skewY($deg) {
@include transform-single(skewY, $deg);
backface-visibility: hidden;
}
@mixin translate($x, $y) {
$multi-var: $x, $y;
@include transform-single(translate, $multi-var);
}
@mixin translateX($x) {
@include transform-single(translateX, $x);
}
@mixin translateY($y) {
@include transform-single(translateY, $y);
}
@mixin translateZ($z) {
@include transform-single(translateZ, $z);
}
@mixin translate3d($x, $y, $z) {
$multi-var: $x, $y, $z;
@include transform-single(translate3d, $multi-var);
}
// Emboss effect
// -------------
@mixin box-emboss($opacity, $opacity2){
box-shadow: rgba(white,$opacity) 0 1px 0, inset rgba(black,$opacity2) 0 1px 0;
}
// Letterpress effect
// ------------------
@mixin letterpress($opacity){
text-shadow: rgba(white,$opacity) 0 1px 0;
}
// Placeholder text
// ----------------
@mixin placeholder-color($color: $placeholder-color-default) {
&::placeholder {
color: $color;
}
}
// Sizing
// ------
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
@mixin square($size) {
@include size($size, $size);
}
// Normal & hover state
// --------------------
@mixin hoverer($property, $normal, $hovered) {
#{$property}: $normal;
&:hover {
#{$property}: $hovered;
}
}
// Add responsive styling for multiple breakpoints
// -----------------------------------------------
@mixin responsive($property, $full, $medium:false, $small:false) {
#{$property}: $full;
@if $medium {
@include bp(medium) {
#{$property}: $medium;
}
}
@if $small {
@include bp(small) {
#{$property}: $small;
}
}
}
// Create a triangle using borders (add in the option to make a border and triangle shape)
// Cut down on the code (Use sass maps for "trbl" and translate direction, maybe direction and border direction)
// ------------------------------------------------------------------------------------------------------------------
@mixin triangle($direction: $triangle-direction-default,
$size: $triangle-size-default,
$color: $triangle-color-default,
$center: false,
$element: $triangle-element-default) {
&:#{$element} {
@if not $center {
position: absolute;
}
content:'';
@include square(0);
-webkit-transform: rotate(360deg);
border-style: solid;
@if $direction == up {
border-width: 0 $size ($size*1.625) $size;
border-color: transparent transparent $color transparent;
@if $center {
@include absolute(null,null,100%,50%);
transform: translateX(-$size);
}
}
@else if $direction == up-right {
border-width: 0 $size $size 0;
border-color: transparent $color transparent transparent;
@if $center {
@include absolute(0,0);
}
}
@else if $direction == right {
border-width: $size 0 $size ($size*1.625);
border-color: transparent transparent transparent $color;
@if $center {
@include absolute(50%,null,null,100%);
transform: translateY(-$size);
}
}
@else if $direction == down-right {
border-width: 0 0 $size $size;
border-color: transparent transparent $color transparent;
@if $center {
@include absolute(null,0,0);
}
}
@else if $direction == down {
border-width: ($size*1.625) $size 0 $size;
border-color: $color transparent transparent transparent;
@if $center {
@include absolute(100%,null,null,50%);
transform: translateX(-$size);
}
}
@else if $direction == down-left {
border-width: $size 0 0 $size;
border-color: transparent transparent transparent $color;
@if $center {
@include absolute(null,null,0,0);
}
}
@else if $direction == left {
border-width: $size ($size*1.625) $size 0;
border-color: transparent $color transparent transparent;
@if $center {
@include absolute(50%,100%);
transform: translateY(-$size);
}
}
@else if $direction == up-left {
border-width: $size $size 0 0;
border-color: $color transparent transparent transparent;
@if $center {
@include absolute(0,null,null,0);
}
}
@else {
@warn "Available directions: up, up-right, right, down-right, down, down-left, left, up-left.";
}
@content;
}
}
// Create a circle, with an optional border
@mixin circle($size: $circle-size-default,
$color: $circle-color-default,
$border-width: $circle-border-width-default,
$border-color: $circle-border-color-default,
$display: $circle-display-default) {
display: $display;
border-radius: 50%;
@if $border-width {
@include square($size);
background-color: $color;
border: $border-width solid $border-color;
}
@else{
@if $color == inherit {
border-width: $size/2;
border-style: solid;
@include square(0);
}
@else {
@include square($size);
background-color: $color;
}
}
}
// Advanced positioning
// --------------------
@mixin position($type,
$top: $position-default,
$right: $position-default,
$bottom: $position-default,
$left: $position-default) {
position: $type;
$allowed_types: absolute relative fixed;
@if not index($allowed_types, $type) {
@warn "Unknown position: #{$type}.";
}
@each $data in top $top, right $right, bottom $bottom, left $left {
#{nth($data, 1)}: nth($data, 2);
}
}
@mixin absolute($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) {
@include position(absolute, $top, $right, $bottom, $left);
}
@mixin relative($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) {
@include position(relative, $top, $right, $bottom, $left);
}
@mixin fixed($top: $position-default, $right: $position-default, $bottom: $position-default, $left: $position-default) {
@include position(fixed, $top, $right, $bottom, $left);
}
// ----------------------------------
// Placeholders
// ----------------------------------
// Clearfix
// --------
%clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content:'';
line-height: 0;
}
&:after {
clear: both;
}
}
// Hide text
// ---------
%hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
}
// Center an element vertically and horizontally
// ---------------------------------------------
%centerer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// Center an element vertically
// ----------------------------
%vert-centerer {
position: relative;
top: 50%;
transform: translateY(-50%);
}
// Cover everything
// ----------------
%coverer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// Center a block level element
// ----------------------------
%center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// ----------------------------------
// Functions
// ----------------------------------
// Mix white with another color
// ----------------------------
@function tint($color, $percent: $mix-percent-default){
@return mix(white, $color, $percent);
}
// Mix black with another color
// ----------------------------
@function shade($color, $percent: $mix-percent-default){
@return mix(black, $color, $percent);
}
// Strip the units from a value
// ----------------------------
@function strip-units($value) {
@return $value / ($value * 0 + 1);
}
// Calculate rems from a px value
// ------------------------------
@function rem-calc($px, $base-val: $base-px-default) {
@if not unitless($px) {
$px: strip-units($px);
}
@if not unitless($base-val) {
$base-val: strip-units($base-val);
}
@return ($px / $base-val) * 1rem;
}
// Calculate ems from a px value
// ------------------------------
@function em-calc($px, $base-val: $base-px-default) {
@if not unitless($px) {
$px: strip-units($px);
}
@if not unitless($base-val) {
$base-val: strip-units($base-val);
}
@return ($px / $base-val) * 1em;
}
// Create a random color
// ---------------------
@function random-color($min: 0, $max: 255, $alpha: 1) {
@if $min < 0 {
$min: -1;
} @else {
$min: $min - 1;
}
@if $max > 255 {
$max: 256;
} @else {
$max: $max + 1;
}
$red: random($max) + $min;
$green: random($max) + $min;
$blue: random($max) + $min;
@return rgba($red, $green, $blue, $alpha);
}
// Reverse a string
// ----------------
@function reverse($string) {
$reversed-string: '';
@for $i from 1 through str-length($string) {
$char: str-slice($string, $i, $i);
$reversed-string: "#{$char}#{$reversed-string}";
}
@return #{$reversed-string};
}
!
