CSS and JS Additions/fixes
This commit is contained in:
Jay Wood
242
css/sass/partials/_mixins.scss
Normal file
242
css/sass/partials/_mixins.scss
Normal file
@ -0,0 +1,242 @@
|
||||
//
|
||||
// Mixins
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Create REM values with PX fall back
|
||||
//
|
||||
// Generate a REM with PX fallback from
|
||||
// $baseFontSize. Enter the desired size based
|
||||
// on pixels in numerical form. Supports shorthand.
|
||||
//
|
||||
// Forked from: http://codepen.io/thejameskyle/pen/JmBjc
|
||||
//
|
||||
// @author Greg Rickaby
|
||||
// @since 1.0
|
||||
//
|
||||
// Usage: @include rem($property, $values);
|
||||
// Example Usage:
|
||||
// @include rem(font-size, 16px);
|
||||
// @include rem(margin, 0 24px 0 12px);
|
||||
//
|
||||
// Outputs:
|
||||
// font-size: 16px;
|
||||
// font-size: 1.6rem;
|
||||
// margin: 0 24px 0 12px;
|
||||
// margin: 0 2.4rem 0 1.2rem;
|
||||
// ----------------------------------
|
||||
$baseFontSize: 10; // Based on HTML reset html { font-size: 62.5%; }
|
||||
|
||||
@function parseInt($n) {
|
||||
@return $n / ($n * 0 + 1);
|
||||
}
|
||||
|
||||
@mixin rem($property, $values) {
|
||||
$px : ();
|
||||
$rem: ();
|
||||
|
||||
$root: $baseFontSize;
|
||||
|
||||
@each $value in $values {
|
||||
@if $value == 0 or $value == auto {
|
||||
$px : append($px , $value);
|
||||
$rem: append($rem, $value);
|
||||
}
|
||||
|
||||
@else if type-of($value) == number {
|
||||
$unit: unit($value);
|
||||
$val: parseInt($value);
|
||||
|
||||
@if $unit == "px" {
|
||||
$px : append($px, $value);
|
||||
$rem: append($rem, ($val / $root + rem));
|
||||
}
|
||||
|
||||
@if $unit == "rem" {
|
||||
$px : append($px, ($val * $root + px));
|
||||
$rem: append($rem, $value);
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
$px : append($px, $value);
|
||||
$rem: append($rem, $value);
|
||||
}
|
||||
}
|
||||
|
||||
@if $px == $rem {
|
||||
#{$property}: $px;
|
||||
} @else {
|
||||
#{$property}: $px;
|
||||
#{$property}: $rem;
|
||||
}
|
||||
}
|
||||
|
||||
@function rem($value) {
|
||||
$root: $baseFontSize;
|
||||
$val: parseInt($value);
|
||||
$return: ();
|
||||
|
||||
@if unit($value) == "px" {
|
||||
$return: append($return, ($val / $root + rem));
|
||||
} @else {
|
||||
$return: append($return, ($val * $root + px));
|
||||
}
|
||||
|
||||
@return $return;
|
||||
}
|
||||
|
||||
// Responsive Breakpoints
|
||||
// ----------------------------------
|
||||
|
||||
@mixin breakpoint($point) {
|
||||
@if $point == smallscreen {
|
||||
@media screen and (max-width: 1380px) { @content; }
|
||||
}
|
||||
|
||||
@else if $point == desktop {
|
||||
@media screen and (max-width: 1140px) { @content; }
|
||||
}
|
||||
|
||||
@else if $point == tablet {
|
||||
@media screen and (max-width: 800px) { @content; }
|
||||
}
|
||||
|
||||
@else if $point == tablet-small {
|
||||
@media screen and (max-width: 700px) { @content; }
|
||||
}
|
||||
|
||||
@else if $point == mobilelandscape {
|
||||
@media screen and (max-width: 600px) { @content; }
|
||||
}
|
||||
|
||||
@else if $point == mobile {
|
||||
@media screen and (max-width: 480px) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Border Radius
|
||||
// ----------------------------------
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
// Single Corner Border Radius
|
||||
// ----------------------------------
|
||||
@mixin border-top-left-radius($radius) {
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
-moz-border-radius-topleft: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
@mixin border-top-right-radius($radius) {
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
-moz-border-radius-topright: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
@mixin border-bottom-right-radius($radius) {
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
-moz-border-radius-bottomright: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
@mixin border-bottom-left-radius($radius) {
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
-moz-border-radius-bottomleft: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
|
||||
// Single Side Border Radius
|
||||
// ----------------------------------
|
||||
@mixin border-top-radius($radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-top-left-radius($radius);
|
||||
}
|
||||
@mixin border-right-radius($radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-bottom-right-radius($radius);
|
||||
}
|
||||
@mixin border-bottom-radius($radius) {
|
||||
@include border-bottom-right-radius($radius);
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
@mixin border-left-radius($radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
// ----------------------------------
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow;
|
||||
-moz-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
// Box Sizing
|
||||
// ----------------------------------
|
||||
@mixin box-sizing($sizing...) {
|
||||
-webkit-box-sizing: $sizing;
|
||||
-moz-box-sizing: $sizing;
|
||||
box-sizing: $sizing;
|
||||
}
|
||||
|
||||
// Transitions
|
||||
// ----------------------------------
|
||||
@mixin transition($transition...) {
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
-o-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
@mixin transition-delay($transition-delay) {
|
||||
-webkit-transition-delay: $transition-delay;
|
||||
-moz-transition-delay: $transition-delay;
|
||||
-o-transition-delay: $transition-delay;
|
||||
transition-delay: $transition-delay;
|
||||
}
|
||||
@mixin transition-duration($transition-duration) {
|
||||
-webkit-transition-duration: $transition-duration;
|
||||
-moz-transition-duration: $transition-duration;
|
||||
-o-transition-duration: $transition-duration;
|
||||
transition-duration: $transition-duration;
|
||||
}
|
||||
|
||||
// Transformations
|
||||
// ----------------------------------
|
||||
@mixin rotate($degrees) {
|
||||
-webkit-transform: rotate($degrees);
|
||||
-moz-transform: rotate($degrees);
|
||||
-ms-transform: rotate($degrees);
|
||||
-o-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
@mixin scale($ratio) {
|
||||
-webkit-transform: scale($ratio);
|
||||
-moz-transform: scale($ratio);
|
||||
-ms-transform: scale($ratio);
|
||||
-o-transform: scale($ratio);
|
||||
transform: scale($ratio);
|
||||
}
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-moz-transform: translate($x, $y);
|
||||
-ms-transform: translate($x, $y);
|
||||
-o-transform: translate($x, $y);
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
@mixin skew($x, $y) {
|
||||
-webkit-transform: skew($x, $y);
|
||||
-moz-transform: skew($x, $y);
|
||||
-ms-transform: skewX($x) skewY($y); // See https://github.com/twitter/bootstrap/issues/4885
|
||||
-o-transform: skew($x, $y);
|
||||
transform: skew($x, $y);
|
||||
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
|
||||
}
|
||||
@mixin translate3d($x, $y, $z) {
|
||||
-webkit-transform: translate3d($x, $y, $z);
|
||||
-moz-transform: translate3d($x, $y, $z);
|
||||
-o-transform: translate3d($x, $y, $z);
|
||||
transform: translate3d($x, $y, $z);
|
||||
}
|
||||
Reference in New Issue
Block a user