@qhealth-design-system/core 1.0.38

package/src/styles/imports/mixins.scss

@@ -0,0 +1,658 @@
+// REM font sizing with pixel fall back
+// This technique will allow external font sizes to be set for html and respected
+// if REMs are supported (everything but IE8 and older).
+@mixin sq-font-size($sizeValue: 1) {
+    @include sq-rem-attr(font-size, $sizeValue);
+}
+
+// Express the value of an attribute using rems falling back to pixels
+@mixin sq-rem-attr($attr, $sizeValue: 1){
+    #{$attr}: ($sizeValue * $base-font-pixel) + px;
+    #{$attr}: $sizeValue + rem;
+}
+
+// Transition shortcut
+@mixin sq-transition($params...) {
+    -webkit-transition: $params;
+       -moz-transition: $params;
+            transition: $params;
+}
+
+// Apply a prefixed transformation
+@mixin sq-transform($params) {
+  -webkit-transform: $params; // Chrome, Safari 3.1+
+     //-moz-transform: $params; // Firefox 3.5-15
+      -ms-transform: $params; // IE 9
+          transform: $params;
+}
+
+// 2D rotation with IE support
+@mixin sq-rotate($deg) {
+    $msRotVal: (((360 + $deg) % 360) / 90);   // Modulo lets us handle negative values.
+
+    @include sq-transform(rotate($deg + deg));
+    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$msRotVal}); /* stylelint-disable-line */
+}
+
+@mixin sq-border-box() {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+@mixin sq-reset-box-sizing() {
+    -webkit-box-sizing: content-box;
+       -moz-box-sizing: content-box;
+            box-sizing: content-box;
+}
+
+@mixin sq-box-shadow($params) {
+    -webkit-box-shadow: $params;
+       -moz-box-shadow: $params;
+            box-shadow: $params;
+}
+
+// Glow effect taken from foundation
+@mixin sq-block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:blue) {
+    -webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
+       -moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
+            transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
+
+    &:#{$selector} {
+        @include sq-box-shadow(0 0 5px $glowing-effect-color);
+        border-color: $glowing-effect-color;
+    }
+}
+
+// Legacy border radius helper
+@mixin sq-border-radius($radius: 4px) {
+    -webkit-border-radius: $radius;
+       -moz-border-radius: $radius;
+            border-radius: $radius;
+}
+
+// Opacity with IE filter fallback
+// Value should be expressed as a number between 0 and 100
+// with 0 being transparent and 100 being opaque
+@mixin sq-opacity($value) {
+    $decimal-value: $value/100;
+    -webkit-opacity: $decimal-value;
+       -moz-opacity: $decimal-value;
+            opacity: $decimal-value;
+    -ms-filter: #{"alpha(opacity=" + $value + ")"};
+    filter: alpha(opacity=$value);
+}
+
+// Individual border radius rule helper.
+@mixin sq-rounded($vert, $horz, $radius: 10px) {
+    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
+        -moz-border-radius-#{$vert}#{$horz}: $radius;
+            border-#{$vert}-#{$horz}-radius: $radius;
+}
+
+// Use an SVG background image (for perfect Retina-rendering) with a PNG fallback.
+@mixin sq-svg-background($suffixless-url) {
+    background-image: url($suffixless-url + ".svg");
+    .no-svg & {
+        background-image: url($suffixless-url + ".png");
+    }
+}
+
+@mixin sq-flex-box() {
+    .no-js &,
+    .no-flexbox & {
+        display: table;
+    }
+    .flexbox & {
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+    }
+}
+
+// Apply flex to an element
+@mixin sq-flex($values) {
+    // Table cell is a fallback to no flexbox support
+    .flexbox & {
+        -webkit-box-flex: $values;
+           -moz-box-flex: $values;
+            -webkit-flex: $values;
+                -ms-flex: $values;
+                    flex: $values;
+    }
+    .no-js &,
+    .no-flexbox & {
+      display: table-cell;
+      // Vertical align is needed to prevent auto vertical centering by some browsers
+      vertical-align: top;
+    }
+}
+
+// Em calculator based on James' in Squiz Map issue #4906
+@mixin sq-calc-ems($prop, $numerator, $denominator) {
+    $tmp: ($numerator/$denominator);
+    #{$prop}: #{$tmp}em;
+    #{$prop}: calc(#{$numerator}em / #{$denominator});
+}
+
+// CSS arrow helper
+// $direction: top, left, right, bottom
+@mixin sq-arrow($direction: top, $color: #000, $size: 5px, $height: 0) {
+    $_height: $size+$height;
+
+    height: 0;
+    width: 0;
+    content: ' ';
+    border-style: solid;
+
+    @if $direction == 'top' {
+        border-width: $size $size $_height $size;
+        border-color: transparent transparent $color transparent;
+    }
+
+    @else if $direction == 'right' {
+        border-width: $size $size $size $_height;
+        border-color: transparent transparent transparent $color;
+    }
+
+    @else if $direction == 'bottom' {
+        border-width: $_height $size $size $size;
+        border-color: $color transparent transparent transparent;
+    }
+
+    @else if $direction == 'left' {
+        border-width: $size $_height $size $size;
+        border-color: transparent $color transparent transparent;
+    }
+}
+
+@mixin sq-inline-block() {
+    display: inline-block;
+    *display: inline;
+    zoom: 1;
+}
+
+@mixin sq-list-reset() {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+// "Quantity queries" - a.k.a. "One of n siblings"
+// From this codepen: http://codepen.io/long-lazuli/pen/PwBbmo
+// http://alistapart.com/article/quantity-queries-for-css
+@mixin sq-one-of-n-siblings( $countArg... ){
+  &:nth-last-child(#{$countArg}):first-child,
+  &:nth-last-child(#{$countArg}):first-child ~ & {
+    @content;
+  }
+}
+
+@mixin sq-keyframes($name) {
+    @-webkit-keyframes #{$name} {
+        @content;
+    }
+
+    @-moz-keyframes #{$name} {
+        @content;
+    }
+
+    @-ms-keyframes #{$name} {
+        @content;
+    }
+
+    @keyframes #{$name} {
+        @content;
+    }
+}
+
+@mixin sq-skew($deg){
+    -webkit-transform: skew($deg); // Safari
+        -ms-transform: skew($deg); // IE 9
+            transform: skew($deg);
+}
+
+// Font face
+@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
+    $src: null;
+
+    $extmods: (
+        eot: "?",
+        svg: "#" + str-replace($name, " ", "_")
+    );
+
+    $formats: (
+        otf: "opentype",
+        ttf: "truetype"
+    );
+
+    @each $ext in $exts {
+        $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
+        $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
+        $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
+    }
+
+    @font-face {
+        font-family: quote($name);
+        font-style: $style;
+        font-weight: $weight;
+        src: $src;
+    }
+}
+
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// GLOBAL MIXINS
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+/**
+ * QLD-space - Mixin for setting a properties value to snap to the grid, with a fallback for REM.
+ *
+ * @param  {string} $property - The css property to apply the spacing ( padding, margin )
+ * @param  {number} $values   - The values of the property ( 0, 20px, 1unit, 5% )
+ *
+ * @return {number}           - The space in px and rems
+ */
+ @mixin QLD-space( $property, $values, $pixelfallback: $QLD-pixelfallback ) {
+	$unit: $QLD-unit; // The grid unit to use
+	$output: ();
+	$fallback: ();
+	$has_fallback: false;
+
+	@if type-of( $property ) != 'string' {
+	@error "I’m sorry Dave, I can’t do that; the QLD-space function only takes a string as first argument!";
+	}
+
+	// Loop through the $values list
+	@each $value in $values {
+	// This is a pixel on unitless unit. Let’s convert it to rems
+	@if type-of( $value ) == 'number' and unit( $value ) == 'unit' {
+		$value: $value / 1unit; // This is to remove the unit value
+		$rem: $value / ( ( $value / $unit ) * 0 + 1 );
+
+		$fallback: join( $fallback, round( $value * ( $unit * $unit ) ) + 0px );
+		$output: join( $output, #{ $rem }rem );
+
+		$has_fallback: true;
+	}
+
+        // We don’t know what this is so we don’t change it.
+        @else {
+            $fallback: join( $fallback, $value );
+            $output: join( $output, $value );
+        }
+	}
+
+	@if( $has_fallback and $pixelfallback ) {
+	#{ $property }: $fallback;
+	#{ $property }: $output;
+	}
+	@else {
+	#{ $property }: $output;
+	}
+}
+
+/**
+ * QLD-standard-space - Mixin for setting a properties value to snap to the grid, with a fallback for REM.
+ *
+ * @param  {string} $property - The css property to apply the spacing ( padding, margin )
+ * @param  {number} $values   - The values of the property ( 0, 20px, 1unit, 5% )
+ *
+ * @return {number}           - The space in px and rems
+ */
+ @mixin QLD-standard-space( $property, $values) {
+	$output: ();
+	$fallback: ();
+	$has_fallback: false;
+
+	@if type-of( $property ) != 'string' {
+	@error "I’m sorry Dave, I can’t do that; the QLD-space function only takes a string as first argument!";
+	}
+    
+	// Loop through the $values list
+	@each $value in $values {
+	// This is a pixel on unitless unit. Let’s convert it to rems
+	@if type-of( $value ) == 'number' {
+        //Map number input to the space map
+        $value: map-get( $QLD-space-map, $value );
+
+        // Get the value from supplied key for pixel and calculate the rem value
+        $rem: $value / $QLD-rem;
+        
+        $fallback: join( $fallback, $value + 0px );
+		$output: join( $output, #{ $rem }rem );
+
+		$has_fallback: true;
+	}
+
+        // We don’t know what this is so we don’t change it.
+        @else {
+            $fallback: join( $fallback, $value );
+            $output: join( $output, $value );
+        }
+	}
+
+	@if( $has_fallback) {
+	#{ $property }: $fallback;
+	#{ $property }: $output;
+	}
+	@else {
+	#{ $property }: $output;
+	}
+}
+
+/**
+ * QLD-clearfix - Clearing floats
+ */
+@mixin QLD-clearfix() {
+	&:before,
+	&:after {
+	content: " ";
+	display: table;
+	}
+
+	&:after {
+	clear: both;
+	}
+}
+
+
+/**
+ * QLD-media - Create media queries and wraps the @content code inside of it
+ *
+ * @param  {keywords} $breakpoint - Either one of the following keywords: sm, md, lg, xl, xxl
+ *
+ * @return {string}               - The code passed in via @content wrapped inside a media query
+ */
+ @mixin QLD-media($size, $direction: 'up') {
+    $property: if($direction=='up',min-width,max-width);
+    $adjustment: if($direction=='up',0,-1);
+
+    @if $size==sm {
+        @media ($property: $QLD-media-sm + $adjustment) {
+            @content;
+        }
+    } @else if $size==md {
+        @media ($property: $QLD-media-md + $adjustment) {
+            @content;
+        }
+    } @else if $size==lg {
+        @media ($property: $QLD-media-lg + $adjustment) {
+            @content;
+        }
+    } @else if $size==xl {
+        @media ($property: $QLD-media-xl + $adjustment) {
+            @content;
+        }
+    }
+}
+
+
+/**
+ * QLD-sronly - Hide an element from the screen but not a screen reader
+ */
+@mixin QLD-sronly() {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect( 0, 0, 0, 0 );
+	border: 0;
+}
+
+
+/**
+ * QLD-outline - Create outline based on the theme the user is using.
+ *
+ * @param  {keywords} $theme - `dark` or default ( `light` )
+ *
+ * @return {string}          - The code
+ */
+@mixin QLD-outline( $theme: 'light' ) {
+	@if $theme == 'dark' {
+	outline: 2px solid var(--QLD-color-dark-focus);
+	}
+	@else {
+	outline: 2px solid var(--QLD-color-light-focus);
+
+	// Only add the offset if it's the default style
+	outline-offset: 2px;
+	}
+}
+
+
+/**
+ * QLD-focus - Add the outline to focus
+ */
+@mixin QLD-focus( $theme: 'light' ) {
+	&:focus {
+	@include QLD-outline( $theme );
+	}
+
+	// Remove Modzilla inner HTML dotted line. github.com/necolas/normalize.css/blob/master/normalize.css#L285
+	&::-moz-focus-inner {
+	border: 0;
+	}
+}
+
+
+/**
+ * QLD-fontgrid Mixin for setting font-size and line-height that snaps to the grid.
+ *
+ * @param  {keywords} $fontsize-key   -  Either one of the following keywords: xs, sm, md, lg, xl, xxl, xxxl
+ * @param  {keywords} $lineheight-key -  Either one of the following keywords: heading, nospace, default
+ *
+ * @return {string}                   - The code; fontsize in REM, with PX fallback, and unitless line-height which matches vertical grid
+*/
+@mixin QLD-fontgrid( $fontsize-key, $lineheight-key: 'default' ) {
+
+	@if type-of( $fontsize-key ) != 'string' {
+	@error "Going somewhere, Solo?; the QLD-fontgrid mixin fontsize key takes a string!";
+	}
+
+	@if type-of( $lineheight-key ) != 'string' {
+	@error "Tell Jabba I've got his money; the QLD-fontgrid mixin lineheight key takes a string!";
+	}
+
+	@if not map-has-key( $QLD-fontsize-map, $fontsize-key ) {
+	@error "You shall not pass; the QLD-fontgrid mixin only takes the following fontsize keys strings: " + map-keys( $QLD-fontsize-map );
+	}
+
+	@if not map-has-key( $QLD-lineheight-map, $lineheight-key ) {
+	@error "There's a snake in my boot; the QLD-fontgrid mixin only takes the following lineheight keys strings: " + map-keys( $QLD-lineheight-map );
+	}
+
+	// Get the value from supplied key for pixel and calculate the rem value
+	$fontsize-px: map-get( $QLD-fontsize-map, $fontsize-key );
+	$fontsize-rem: $fontsize-px / $QLD-rem;
+
+	// Change the lineheight if it doesn't hit a QLD-unit e.g. 40px font size with 1.5 lineheight = 50px should be 52px
+	$lineheight-pixel: round( ( map-get( $QLD-lineheight-map, $lineheight-key ) * $fontsize-px ) / $QLD-unit ) * $QLD-unit;
+	$lineheight: $lineheight-pixel / $fontsize-px;
+
+	// Mixin output
+	font-size: $fontsize-px + 0px;   // Pixel fallback for non-rem support
+	font-size: $fontsize-rem + 0rem; // REM size
+	line-height: $lineheight;
+}
+
+/**
+ * QLD-container-padding - Select which level of padding 
+ *
+ * @param  {keywords} $values - Either one of the following 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 
+* @param  {keywords} $verHoz - vertical option sets top and bottom padding. horizontal option sets left and right padding
+* @param  {keywords} $option - Extra option for !important 
+ *
+ */
+ @mixin QLD-container-padding($values, $verHoz: 'vertical', $option: '') {
+    $output: ();
+    // Loop through the $values list
+	@each $value in $values {
+        // This is a pixel on unitless unit. Let’s convert it to rems
+        @if type-of( $value ) == 'number' {
+            // Get the value from supplied key for pixel and calculate the rem value
+            $padding-px: map-get( $QLD-space-map, $value );
+            $padding-rem: $padding-px / $QLD-rem;
+
+            @if $verHoz == 'vertical'{
+                padding-top: $padding-px + px + $option;   // Pixel fallback for non-rem support
+                padding-top: $padding-rem + rem + $option; // REM size
+                padding-bottom: $padding-px + px + $option;   // Pixel fallback for non-rem support
+                padding-bottom: $padding-rem + rem + $option; // REM size
+
+            } @else if $verHoz == 'horizontal'{
+                padding-left: $padding-px + px + $option;   // Pixel fallback for non-rem support
+                padding-left: $padding-rem + rem + $option; // REM size
+                padding-right: $padding-px + px + $option;   // Pixel fallback for non-rem support
+                padding-right: $padding-rem + rem + $option; // REM size
+            }
+            
+
+            $output: join( $output, $value );
+        }
+    }
+    // Mixin output 
+    $output:$output;
+}
+
+/**
+* QLD-container-margin - Select which level of margins 
+*
+* @param  {keywords} $values - Either one of the following 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 
+* @param  {keywords} $posNeg - pos option sets positive values, neg option sets negitive values
+* @param  {keywords} $verHoz - vertical option sets top and bottom margin. horizontal option sets left and right margin
+* @param  {keywords} $option - Extra option for !important 
+*
+*/
+ @mixin QLD-container-margin($values,$posNeg, $verHoz: 'vertical', $option: '') {
+    $output: ();
+
+    // Loop through the $values list
+	@each $value in $values {
+        // This is a pixel on unitless unit. Let’s convert it to rems
+        @if type-of( $value ) == 'number' {
+            // Get the value from supplied key for pixel and calculate the rem value
+            $padding-px: map-get( $QLD-space-map, $value );
+            $padding-rem: $padding-px / $QLD-rem;
+            
+            @if $posNeg == 'pos'{
+                $padding-px:($padding-px);
+                $padding-rem:($padding-rem);
+            } @else if $posNeg == 'neg'{
+                $padding-px:(-#{$padding-px});
+                $padding-rem:(-#{$padding-rem});
+            } 
+
+            @if $verHoz == 'vertical'{
+                margin-top: $padding-px + px + $option;   // Pixel fallback for non-rem support
+                margin-top: $padding-rem + rem + $option; // REM size
+                margin-bottom: $padding-px + px + $option;   // Pixel fallback for non-rem support
+                margin-bottom: $padding-rem + rem + $option; // REM size
+
+            } @else if $verHoz == 'horizontal'{
+                margin-left: $padding-px + px + $option;   // Pixel fallback for non-rem support
+                margin-left: $padding-rem + rem + $option; // REM size
+                margin-right: $padding-px + px + $option;   // Pixel fallback for non-rem support
+                margin-right: $padding-rem + rem + $option; // REM size
+            }
+
+            $output: join( $output, $value );
+        }
+    }
+    // Mixin output 
+    $output:$output;
+}
+
+/**
+ * QLD-getControlShape Mixin for setting a background image SVG for a control input
+ *
+ * @param  {keywords} $kind   -  Either one of the following keywords: checkbox, radio
+ * @param  {keywords} $part   -  Either one of the following keywords: foreground, background
+ * @param  {string} $color1   -  String representing the hex code of the first fill color
+ * @param  {string} $color2   -  String representing the hex code of the second fill color
+ *
+ * @return {string}           - The code; background image containing the encoded SVG
+*/
+@mixin QLD-getControlShape( $kind, $part, $color1: transparent, $color2: transparent ) {
+	$start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">';
+	$end: '</svg>';
+
+	$checkbox-background: '<path fill="#{ $color1 }" d="M0,0h32v32H0V0z"/><path fill="#{ $color2 }" d="M2,2h28v28H2V2z"/>';
+	$checkbox-foreground: '<path fill="#{ $color1 }" d="M25.6,11.4c0.2-0.2,0.2-0.5,0-0.7l-2.3-2.3c-0.2-0.2-0.5-0.2-0.7,0L14,17l-3.6-3.6c-0.2-0.2-0.5-0.2-0.7,0l-2.3,2.3 c-0.2,0.2-0.2,0.5,0,0.7l6.3,6.3c0.2,0.2,0.5,0.2,0.7,0L25.6,11.4L25.6,11.4z"/>';
+
+	$radio-background: '<circle fill="#{ $color1 }" cx="16" cy="16" r="16"/><circle fill="#{ $color2 }" cx="16" cy="16" r="14"/>';
+	$radio-foreground: '<circle fill="#{ $color1 }" cx="16" cy="16" r="12"/>';
+
+	@if( $kind == 'checkbox' and $part == 'background' ) {
+	background-image: QLD-svguri( $start + $checkbox-background + $end );
+	}
+
+	@if( $kind == 'checkbox' and $part == 'foreground' ) {
+	background-image: QLD-svguri( $start + $checkbox-foreground + $end );
+	}
+
+	@if( $kind == 'radio' and $part == 'background' ) {
+	background-image: QLD-svguri( $start + $radio-background + $end );
+	}
+
+	@if( $kind == 'radio' and $part == 'foreground' ) {
+	background-image: QLD-svguri( $start + $radio-foreground + $end );
+	}
+}
+
+
+/**
+ * QLD-side-nav-indent - Mixin for creating indent based off depth
+ *
+ * @param  {number} $depth         - How deep the menu goes
+ * @param  {string} $element       - The element to add the ul in front of
+ * @param  {number} $indent-size   - Size of the indent in units
+ *
+ * @return {number}          - The indented menu items
+ */
+ @mixin QLD-side-nav-indent(
+    $depth: $QLD-side-nav-depth,
+    $element: "a",
+    $indent-size: 1
+) {
+    $chain: $element;
+    @for $i from 1 to $depth + 1 {
+        $chain: "ul " + $chain;
+        $indent: if(
+            $i < 2,
+            ($indent-size * $i + 1) * 1unit,
+            ($indent-size * $i + 1) * 1.25unit
+        );
+
+        & #{$chain} {
+            @include QLD-space(padding-left, $indent);
+        }
+    }
+}
+
+
+/**
+ * QLD-box-shadow - Select which level of box shadow
+ *
+ * @param  {keywords} $level - Either one of the following 1, 2, 3
+ *
+ * @return {string}               - Returns different box-shadow variables
+ */
+ @mixin QLD-box-shadow($level) {
+    @if $level==1 {
+        box-shadow: $QLD-box-shaddow-level-one;
+    } @else if $level==2 {
+        box-shadow: $QLD-box-shaddow-level-two;
+    } @else if $level==3 {
+        box-shadow: $QLD-box-shaddow-level-three;
+    } @else if $level==4 {
+        box-shadow: $QLD-box-shaddow-level-four;
+    } 
+}
+
+
+
+
+