bobjoll 1.634.3

package/scss/modules/mixins/_grid.scss

@@ -0,0 +1,75 @@
+@mixin grid($grid-columns: 12) {
+  $grid-media-width: map-values($breakpoints);
+  $grid-media-mode: map-keys($breakpoints);
+
+  @each $current-media-width in $grid-media-width {
+    $i: index($grid-media-width, $current-media-width);
+    $mode: nth($grid-media-mode, $i);
+
+    @include grid-media($current-media-width, $mode, $grid-columns);
+
+    @for $i from 1 through $grid-columns {
+      .col__#{$mode}--#{$i} {
+        @extend %col;
+      }
+    } 
+  }
+}
+
+@mixin grid-media($grid-media-width, $grid-media-mode, $grid-columns) {
+  @if $grid-media-mode == 'xs' {
+    @include grid-columns($grid-media-mode, $grid-columns);
+  }   
+  @media screen and (min-width: ($grid-media-width + 0px)) {
+    @include grid-columns($grid-media-mode, $grid-columns);
+  }
+}
+
+@mixin grid-columns($grid-media-mode, $grid-columns) {
+  $grid-mode-list: '' 'offset';
+  @each $current-grid-mode in $grid-mode-list {
+    @if $current-grid-mode != '' {
+      @for $i from $grid-columns through 0 {
+        .col__#{$grid-media-mode}--#{$current-grid-mode}-#{$i} {
+          @include grid-style($i, $current-grid-mode);
+        }
+      }
+    } @else {
+      @for $i from $grid-columns through 1 {
+        .col__#{$grid-media-mode}--#{$i} {
+          @include grid-style($i, $current-grid-mode);
+        }
+      }
+    }
+  }
+}
+
+@mixin grid-style($span: $columns of $container-columns, $mode: '') {
+  $columns: nth($span, 1);
+  $container-columns: $grid-columns;
+  $percentage: $columns / $container-columns * 100%;
+
+  @if $percentage == 0% and $mode != offset {
+    $percentage: auto;
+  }
+
+  @if $mode == '' {
+    @if $grid-mode == 'flexbox' {
+      width: $percentage; 
+    } @else if $grid-mode == 'float' {
+      width: $percentage;  
+    }  
+  }
+
+  @if $mode == pull and $grid--pull {
+    right: $percentage;
+  }
+
+  @if $mode == push and $grid--push {
+    left: $percentage;
+  }
+
+  @if $mode == offset and $grid--offset {
+    margin-left: $percentage;
+  }
+}

package/scss/modules/mixins/_helpers.scss

@@ -0,0 +1,224 @@
+// Fluid typo
+@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
+	@each $property in $properties {
+		#{$property}: $min-value;
+	}
+
+	@media screen and (min-width: $min-vw) {
+		@each $property in $properties {
+			#{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
+		}
+	}
+
+	@media screen and (min-width: $max-vw) {
+		@each $property in $properties {
+			#{$property}: $max-value;
+		}
+	}
+}
+
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return $number / ($number * 0 + 1);
+  }
+
+  @return $number;
+}
+
+// Last of map
+@function map-get-last($map) {
+	$last-key: '';
+
+	@each $key, $value in $map {
+		$last-key: $key;
+	}
+
+	@return $last-key;
+}
+
+// Extend map
+@function map-extend($parent-map, $child-map) {
+	$result: $parent-map;
+
+	@each $key, $value in $child-map {
+		@if (not map-has-key($result, $key)) or (type-of(map-get($result, $key)) != type-of($value)) or (not (type-of(map-get($result, $key)) == map and type-of($value) == map)) {
+			$result: map-merge($result, ($key: $value));
+		}
+		@else {
+			$result: map-merge($result, ($key: map-extend(map-get($result, $key), $value)));
+		}
+	}
+
+	@return $result;
+}
+
+// Color
+@function color($color, $group, $opacity: 1, $darken: 0) {
+	$array: map-get($colors, $group);
+
+	@if type-of($array) == "map" {
+		$hex: map-get($array, $color);
+
+		@if $hex == null {
+			@warn "Sorry, but '#{$color}' is not found in '#{$group}'.";
+		} @else {
+			@if type-of($hex) == 'color' {
+				$hex: ( $hex, $opacity, $darken );
+			}
+
+			$color: nth($hex, 1);
+
+			@if nth($hex, 2) and nth($hex, 2) != 1 {
+				$color: rgba($color, nth($hex, 2));
+			}
+
+			@if nth($hex, 3) and nth($hex, 3) != 0 {
+				$color: call(get-function(if(nth($hex, 3) >=0, darken, lighten)), $color, abs(nth($hex, 3)));
+			}
+
+			@if type-of($hex) == 'list' {
+				@if $opacity != 1 {
+					$color: rgba($color, $opacity);
+				}
+
+				@if $darken != 1 {
+					$color: call(get-function(if($darken >=0, darken, lighten)), $color, abs($darken));
+				}
+			}
+
+			@return $color;
+		}
+	} @else {
+		@debug('$array', $array);
+		@debug('$color', $color, $group);
+	}
+}
+
+// Breakpoint
+@mixin breakpoint($size: null, $width: 'max') {
+	@if (map-get($breakpoints, $size)) {
+		$size: map-get($breakpoints, $size) + 0px;
+	}
+
+	@media screen and (#{$width}-width: $size) {
+		@content;
+	}
+}
+
+// Classes
+@mixin element($element) {
+    &__#{$element} {
+        @content;
+    }
+}
+
+@mixin modifier($modifier) {
+    &--#{$modifier} {
+        @content;
+    }
+}
+
+// Fonts
+@mixin font-size($var) {
+	@if (type-of($var) == 'map') {
+		$min-width: if(map-has-key($var, 'min-vw'), map-get($var, 'min-vw'), false);
+		$max-width: if(map-has-key($var, 'max-vw'), map-get($var, 'max-vw'), false);
+		$min-value: if(map-has-key($var, 'min-value'), map-get($var, 'min-value'), false);
+		$max-value: if(map-has-key($var, 'max-value'), map-get($var, 'max-value'), false);
+
+		@if ($min-width != false AND $max-width != false AND $min-value != false AND $max-value != false) {
+			@include fluid-type(font-size, $min-width, $max-width, $min-value, $max-value);
+		} @else {
+			@each $breakpoint, $font-size in $var {
+				@if $breakpoint == null {
+					font-size: $font-size;
+				} @else {
+					@media screen and (min-width: map-get($breakpoints, $breakpoint)) {
+						font-size: $font-size;
+					}
+				}
+			}
+		}
+	} @else {
+		font-size: $var;
+	}
+}
+
+// Extending Placeholder
+@mixin _($name) {
+    @extend %#{$name}-#{$current-breakpoint} !optional;
+}
+
+// Color classes
+@mixin color-classes($array: $colors, $keys: $colors-keys) {
+	@each $key in $keys {
+		$colors: map-get($array, $key);
+		$colors-text: map-get($array, #{$key}-text);
+
+		@each $color-name, $color-hex in $colors {
+			$color-value: color($color-name, $key);
+			$color-text: pick-visible-color(
+				$color-value,
+				color('text', 'general'),
+				color('text-inverted', 'general')
+			);
+			
+			@if $colors-text {
+				$color-text: map-get($colors-text, $color-name);
+			} @else {
+				
+			}
+
+			.bg {
+				@include element($key) {
+					@include modifier($color-name) {
+						color: $color-text;
+						background-color: $color-value;
+					}
+				}
+			}
+
+			.text {
+				@include element($key) {
+					@include modifier($color-name) {
+						color: $color-value;
+					}
+				}
+			}
+			
+			a.text:hover {
+				@include element($key) {
+					@include modifier($color-name) {
+						color: color($color-name, $key, 1, 10);
+					}
+				}
+			}
+		}
+	}
+}
+
+// Best color for background
+@function luma($c) {
+	$-local-red: red(rgba($c, 1.0));
+	$-local-green: green(rgba($c, 1.0));
+	$-local-blue: blue(rgba($c, 1.0));
+
+	@return (0.2126 * $-local-red  +
+	       0.7152 * $-local-green +
+	       0.0722 * $-local-blue) / 255;
+}
+
+@function pick-visible-color($bg, $c1, $c2) {
+	$bg-luma: luma($bg);
+	$c1-luma: luma($c1);
+	$c2-luma: luma($c2);
+
+	$c1-diff: abs($bg-luma - $c1-luma);
+	$c2-diff: abs($bg-luma - $c2-luma);
+
+	@if $c1-diff > $c2-diff {
+		@return $c1;
+	} @else {
+		@return $c2;
+	}
+}