gerillass 0.0.6 → 2.3.1

data/scss/maps/_map-for-smartphones.scss

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+
+$map-for-smartphones: (
+  "iPhone4": (
+    width: 320px,
+    height: 480px,
+  ),
+  "iPhone-SE": (
+    width: 320px,
+    height: 568px,
+  ),
+  "iPhone5-SE": (
+    width: 320px,
+    height: 568px,
+  ),
+  "iPhone6": (
+    width: 375px,
+    height: 667px,
+  ),
+  "iPhone6-Plus": (
+    width: 414px,
+    height: 736px,
+  ),
+  "iPhone7": (
+    width: 375px,
+    height: 667px,
+  ),
+  "iPhone7-Plus": (
+    width: 414px,
+    height: 736px,
+  ),
+  "iPhone8": (
+    width: 375px,
+    height: 667px,
+  ),
+  "iPhone8-Plus": (
+    width: 414px,
+    height: 736px,
+  ),
+  "iPhone11": (
+    width: 414px,
+    height: 896px,
+  ),
+  "iPhone11-Pro": (
+    width: 375px,
+    height: 812px,
+  ),
+  "iPhone11-Pro-Max": (
+    width: 414px,
+    height: 896px,
+  ),
+  "iPhoneX": (
+    width: 375px,
+    height: 812px,
+  ),
+  "Galaxy-S7": (
+    width: 360px,
+    height: 640px,
+  ),
+  "Galaxy-S8": (
+    width: 360px,
+    height: 740px,
+  ),
+  "Galaxy-S8-Plus": (
+    width: 360px,
+    height: 740px,
+  ),
+  "Galaxy-S10": (
+    width: 360px,
+    height: 760px,
+  ),
+) !default;

data/scss/maps/_map-for-tablets.scss

@@ -0,0 +1,32 @@
+@charset "UTF-8";
+
+$map-for-tablets: (
+  "iPadMini": (
+    width: 768px,
+    height: 1024px,
+  ),
+  "iPad": (
+    width: 810px,
+    height: 1080px,
+  ),
+  "iPadAir": (
+    width: 834px,
+    height: 1112px,
+  ),
+  "iPadPro": (
+    width: 1024px,
+    height: 1366px,
+  ),
+  "Nexus7": (
+    width: 600px,
+    height: 960px,
+  ),
+  "Nexus9": (
+    width: 768px,
+    height: 1024px,
+  ),
+  "Nexus10": (
+    width: 800px,
+    height: 1280px,
+  ),
+) !default;

data/scss/utilities/_clear-unit.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+
+@function clearUnit($value) {
+  @if meta.type-of($value) != "number" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `clearUnit`. Pass a number, such as `24px`.";
+  }
+  @return math.div($value, ($value * 0 + 1));
+}

data/scss/utilities/_clear-whitespace.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "sass:string";
+
+@function clearWhitespace($string) {
+  @if meta.type-of($string) != "string" {
+    @error "`#{$string}` is not a valid $string for `clearWhitespace`. Pass a string.";
+  }
+  @while (string.index($string, " ") != null) {
+    $index: string.index($string, " ");
+    $string: "#{string.slice($string, 0, $index - 1)}#{string.slice($string, $index + 1)}";
+  }
+  @return $string;
+}

data/scss/utilities/_convert-to-em.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+
+@use "sass:string";
+@use "sass:math";
+@use "sass:meta";
+
+@function convertToEm($value) {
+  // Only a pixel length converts cleanly. A unitless number or another unit
+  // compiled to `calc(1.5 / 1px)em`, and a word or var() to `var(--x)/16pxem`.
+  @if meta.type-of($value) != "number" or math.unit($value) != "px" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `convertToEm`. Pass a pixel length, such as `24px`.";
+  }
+  $base-value: 16px;
+  $rem-value: math.div($value, $base-value);
+  @return $rem-value + string.unquote("em");
+}

data/scss/utilities/_convert-to-number.scss

@@ -0,0 +1,45 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
+@function convertToNumber($value) {
+
+  @if meta.type-of($value) != "string" {
+    @error "`#{$value}` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+  }
+
+  $string-numerals: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+
+  // Every character has to be a digit before the parse runs. Otherwise an
+  // empty string or a sign failed with Sass's own "Undefined operation", and a
+  // letter or a space was folded into nonsense such as `40-1`. The empty case
+  // is checked first because `@for $i from 1 through 0` counts down, not zero
+  // times.
+  @if string.length($value) == 0 {
+    @error "`\"\"` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+  }
+  @for $i from 1 through string.length($value) {
+    @if not list.index($string-numerals, string.slice($value, $i, $i)) {
+      @error "`#{meta.inspect($value)}` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+    }
+  }
+
+  $calc: 0;
+
+  @for $i from 1 through string.length($value) {
+    //Takes every digits in the $value
+    $digit: string.slice($value, $i, $i);
+
+    //Finds the index position of $digit in the $value
+    $index-of-digit: list.index($string-numerals, $digit);
+
+    // That is because SASS strings are not "0" based but "1", the index position of every digits will be more by one. Here is the simple calculation to find the actual number.
+    $actual-digit: $index-of-digit - 1;
+
+    // Calculates the actual number.
+    $calc: $calc * 10 + $actual-digit;
+  }
+  @return $calc;
+}

data/scss/utilities/_fill-nulls.scss

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+@use "sass:list";
+
+@function fillNulls($value, $seperation: comma, $skip: false) {
+  @if not list.index("comma" "space" "slash", $seperation) {
+    @error "`#{$seperation}` is not a valid $seperation for `fillNulls`. Pass `comma`, `space` or `slash`.";
+  }
+  $list: ();
+  @for $i from 1 through list.length($value) {
+    @if list.nth($value, $i) == null {
+      $list: list.append($list, if($skip, null, 0), $seperation);
+    } @else {
+      $list: list.append($list, list.nth($value, $i), $seperation);
+    }
+  }
+  @return $list;
+}

data/scss/utilities/_fluid.scss

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+@use "../utilities/clear-unit" as *;
+@use "../utilities/remify" as *;
+
+// A value that grows with the viewport between two widths, then stops.
+//
+// clamp() takes a floor, a preferred value and a ceiling. The preferred value
+// is the straight line through (min-viewport, min) and (max-viewport, max):
+//
+//   slope     = (max - min) / (max-viewport - min-viewport)
+//   intercept = min - slope * min-viewport
+//   preferred = intercept + slope * 100vw
+//
+// The intercept is emitted in rem rather than px deliberately. A preferred
+// value made only of vw ignores browser zoom, which fails WCAG 1.4.4, and
+// keeping a rem term in the sum is what restores it. This is the part that is
+// easy to get wrong by hand, and the reason this is a function rather than a
+// mixin: the value is the hard part, and it belongs to any property, not just
+// font-size.
+//
+// Sass cannot add rem to vw, so the sum is assembled as a string. CSS evaluates
+// it; Sass only writes it.
+
+$_fluid-root-size: 16px;
+
+@function fluid($min, $max, $min-viewport: 320px, $max-viewport: 1280px) {
+  // Pairs rather than a map: two arguments can legitimately hold the same
+  // length, and a map would reject that as a duplicate key.
+  $given: (($min, "$min"), ($max, "$max"), ($min-viewport, "$min-viewport"), ($max-viewport, "$max-viewport"));
+  @each $pair in $given {
+    $value: list.nth($pair, 1);
+    $label: list.nth($pair, 2);
+    @if meta.type-of($value) != "number" or math.is-unitless($value) {
+      @error "`#{$value}` is not a valid #{$label} for `fluid`. Pass a length in px or rem.";
+    }
+    @if math.unit($value) != "px" and math.unit($value) != "rem" {
+      @error "`#{$value}` is not a valid #{$label} for `fluid`. Pass a length in px or rem, not #{math.unit($value)}.";
+    }
+  }
+
+  // Everything is compared in px, because Sass cannot convert rem to px on its
+  // own: it has no way to know the root font size, so the assumption is stated
+  // here rather than hidden.
+  $min-px: $min;
+  $max-px: $max;
+  $from-px: $min-viewport;
+  $to-px: $max-viewport;
+  @if math.unit($min) == "rem" { $min-px: clearUnit($min) * $_fluid-root-size; }
+  @if math.unit($max) == "rem" { $max-px: clearUnit($max) * $_fluid-root-size; }
+  @if math.unit($min-viewport) == "rem" { $from-px: clearUnit($min-viewport) * $_fluid-root-size; }
+  @if math.unit($max-viewport) == "rem" { $to-px: clearUnit($max-viewport) * $_fluid-root-size; }
+
+  @if $from-px >= $to-px {
+    @error "`fluid` needs $min-viewport to be smaller than $max-viewport, and was given #{$min-viewport} and #{$max-viewport}.";
+  }
+  @if $min-px > $max-px {
+    @error "`fluid` needs $min to be no larger than $max, and was given #{$min} and #{$max}. clamp() would return the floor at every width, so the value would never grow.";
+  }
+
+  $slope: math.div($max-px - $min-px, $to-px - $from-px);
+  $intercept: $min-px - $slope * $from-px;
+
+  // Four decimals is past the point any browser renders differently, and keeps
+  // the output readable.
+  $vw: math.div(math.round($slope * 100 * 10000), 10000);
+  $floor: math.div(math.round(clearUnit(remify($min-px)) * 10000), 10000);
+  $base: math.div(math.round(clearUnit(remify($intercept)) * 10000), 10000);
+  $ceiling: math.div(math.round(clearUnit(remify($max-px)) * 10000), 10000);
+
+  @return string.unquote("clamp(#{$floor}rem, #{$base}rem + #{$vw}vw, #{$ceiling}rem)");
+}

data/scss/utilities/_font-sizer.scss

@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+
+@function fontSizer($size, $time) {
+  @if meta.type-of($size) != "number" {
+    @error "`#{meta.inspect($size)}` is not a valid $size for `fontSizer`. Pass a length, such as `16px`.";
+  }
+  @if meta.type-of($time) != "number" {
+    @error "`#{meta.inspect($time)}` is not a valid $time for `fontSizer`. Pass a multiplier, such as `1.5`.";
+  }
+  // Two units multiply into a unit squared, which Sass writes as
+  // `calc(16px * 1px)`: not a length anywhere in CSS.
+  @if not math.is-unitless($size) and not math.is-unitless($time) {
+    @error "`fontSizer(#{$size}, #{$time})` multiplies two units, which is not a length. Pass the multiplier without a unit, such as `1.5`.";
+  }
+  @return $size * $time;
+}

data/scss/utilities/_font-source.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "../maps/map-for-font-formats" as *;
+@use "../utilities/clear-whitespace" as *;
+
+@function fontSource($font-family, $file-path, $file-formats) {
+  $list: ();
+  @if map.has-key($map-for-font-formats, $file-formats) {
+    @if list.index(eot woff2 woff ttf, $file-formats) {
+      $src-value: url('#{$file-path}.#{if(not list.index(eot, $file-formats), $file-formats, $file-formats+"?#iefix")}')
+        #{map.get($map-for-font-formats, $file-formats)};
+      $list: list.append($list, $src-value, comma);
+    } @else if list.index(svg, $file-formats) {
+      $font-family: clearWhitespace($font-family);
+      $src-value: url('#{$file-path}.#{$file-formats + "#" + $font-family}')
+        #{map.get($map-for-font-formats, $file-formats)};
+      $list: list.append($list, $src-value, comma);
+    }
+  }
+  @return $list;
+}

data/scss/utilities/_index.scss

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+
+@forward "clear-unit";
+@forward "clear-whitespace";
+@forward "convert-to-em";
+@forward "convert-to-number";
+@forward "fill-nulls";
+@forward "fluid";
+@forward "font-sizer";
+@forward "font-source";
+@forward "is-color";
+@forward "is-gutter";
+@forward "is-number";
+@forward "is-time";
+@forward "map-deep-get";
+@forward "pixelify";
+@forward "pseudo-selector";
+@forward "remify";
+@forward "shade";
+@forward "shorthand-property";
+@forward "tint";
+@forward "validate-breakpoint";
+@forward "validate-length";
+@forward "validate-ratio";
+@forward "validate-scissors";

data/scss/utilities/_is-color.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+
+@function isColor($value) {
+  $list: ();
+  @for $i from 1 through list.length($value) {
+    @if meta.type-of(list.nth($value, $i)) == "color" {
+      $list: list.append($list, list.nth($value, $i), comma);
+    } @else {
+      @error "'#{list.nth($value, $i)}' is not a color value, please replace it with a valid one.";
+    }
+  }
+  @return $list;
+}

data/scss/utilities/_is-gutter.scss

@@ -0,0 +1,24 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "sass:string";
+
+// True for anything that can legally sit where a CSS length is expected: a
+// number, a Sass calculation such as calc() or clamp(), or an unquoted string
+// holding a parenthesis, which is how var() and env() arrive.
+//
+// Written because `meta.type-of($value) == number` rejects `var(--gap)`, and a
+// gutter expressed as a custom property is perfectly reasonable CSS.
+
+@function isGutter($value) {
+  @if meta.type-of($value) == "number" {
+    @return true;
+  }
+  @if meta.type-of($value) == "calculation" {
+    @return true;
+  }
+  @if meta.type-of($value) == "string" and string.index(string.quote($value), "(") {
+    @return true;
+  }
+  @return false;
+}

data/scss/utilities/_is-number.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+
+@function isNumber($value) {
+  @if meta.type-of($value) == "number" {
+    @return $value;
+  } @else {
+    @warn "Please make sure you pass a valid number!";
+  }
+}

data/scss/utilities/_is-time.scss

@@ -0,0 +1,14 @@
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+
+@function isTime($value) {
+  @for $i from 1 through list.length($value) {
+    @if (meta.type-of($value) == "number" and list.index("ms" "s", math.unit($value)) != null) or $value == 0 {
+      @return $value;
+    } @else {
+      @error "'#{$value}' is not a valid time value. Time values must be specified in either seconds (s) or milliseconds (ms). Please try one of the following forms: '1s', '0.2s', or '3ms'";
+    }
+  }
+}

data/scss/utilities/_map-deep-get.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "sass:map";
+
+@function mapDeepGet($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+  @return $map;
+}

data/scss/utilities/_pixelify.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+@use "../utilities/clear-unit" as *;
+
+// This function checks if the argument has a px unit. If not, it adds a px unit to the end of the argument.
+
+@function pixelify($value) {
+  @if meta.type-of($value) != "number" {
+    @error "`#{$value}` is not a valid $value for `pixelify`. Pass a number, with or without a unit.";
+  }
+  @if math.unit($value) == "px" {
+    @return $value;
+  } @else if math.unit($value) != "px" {
+    @return clearUnit($value) * 1px;
+  } @else if math.is-unitless($value) == true {
+    @return $value * 1px;
+  }
+}

data/scss/utilities/_pseudo-selector.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+@use "sass:list";
+
+@function pseudoSelector($elements, $pseudo: null) {
+  $list: ();
+  @each $element in $elements {
+    $element: if($pseudo, $element + ":" + $pseudo, $element);
+    $list: list.append($list, $element, comma);
+  }
+  @return $list;
+}

data/scss/utilities/_remify.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+
+@function remify($value) {
+  // Only a pixel length converts cleanly. Anything else used to reach the
+  // arithmetic unchecked: a word failed with Sass's own "Undefined operation",
+  // and a unitless number or another unit compiled to `calc(1.5rem / 1px)`.
+  @if meta.type-of($value) != "number" or math.unit($value) != "px" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `remify`. Pass a pixel length, such as `24px`.";
+  }
+  $base-value: 16px;
+  $rem-value: math.div($value, $base-value);
+  @return $rem-value * 1rem;
+}

data/scss/utilities/_shade.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "sass:color";
+@use "../utilities/is-color" as *;
+
+@function shade($color, $percentage) {
+  @if isColor($color) {
+    @return color.mix(black, $color, $percentage);
+  }
+}

data/scss/utilities/_shorthand-property.scss

@@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+@use "sass:list";
+
+@function shorthandProperty($value) {
+  @if list.length($value) == 1 {
+    @return list.nth($value, 1) list.nth($value, 1) list.nth($value, 1) list.nth($value, 1);
+  } @else if list.length($value) == 2 {
+    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 1) list.nth($value, 2);
+  } @else if list.length($value) == 3 {
+    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3) list.nth($value, 2);
+  } @else if list.length($value) == 4 {
+    @return list.nth($value, 1) list.nth($value, 2) list.nth($value, 3) list.nth($value, 4);
+  } @else if list.length($value) > 4 {
+    @error "You've passed #{list.length($value)} arguments. Please do not pass more than 4.";
+  }
+}

data/scss/utilities/_tint.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "sass:color";
+@use "../utilities/is-color" as *;
+
+@function tint($color, $percentage) {
+  @if isColor($color) {
+    @return color.mix(white, $color, $percentage);
+  }
+}

data/scss/utilities/_validate-breakpoint.scss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "../maps/map-for-breakpoints" as *;
+
+// Returns the width of a key from $map-for-breakpoints, and anything else as it
+// is: a declaration takes a percentage or a CSS function, and the condition
+// mixins check their own sizes through scss/internal/_condition-width.scss.
+//
+// What it refuses is what cannot be a breakpoint anywhere. A word that is not a
+// key used to come back unchanged, so `breakpoint(min, huge)` compiled to
+// `@media (min-width: huge)`, which never matches, without a word; the keys are
+// case-sensitive, so `"MEDIUM"` did the same. A list used to give its first
+// item, because the loop here returned on its first pass.
+//
+// null comes back as null, as it always did, so `width: validateBreakpoint(null)`
+// still leaves the declaration out. The condition mixins refuse it themselves.
+@function validateBreakpoint($value) {
+  @if $value == null {
+    @return null;
+  }
+  @if map.has-key($map-for-breakpoints, $value) {
+    @return map.get($map-for-breakpoints, $value);
+  }
+  @if list.length($value) > 1 {
+    @error "`#{meta.inspect($value)}` is not a breakpoint. Pass one key from $map-for-breakpoints or one length; a range is written with `between`, such as `breakpoint(between, small large)`.";
+  }
+  // A quoted length such as "600px" starts with a digit, a dot or a sign, and a
+  // CSS function holds a parenthesis. Of the words, the sizing keywords stay
+  // accepted, because `max-width: validateBreakpoint(none)` is valid CSS; a
+  // condition mixin still refuses them through conditionWidth. Anything else is
+  // a word that cannot be a breakpoint.
+  $sizing-keywords: "auto" "none" "min-content" "max-content" "fit-content" "stretch" "inherit" "initial" "unset" "revert" "revert-layer";
+  @if meta.type-of($value) == "string" and not list.index($sizing-keywords, string.to-lower-case($value)) and not string.index($value, "(") and not string.index("0123456789.+-", string.slice($value, 1, 1)) {
+    @error "`#{$value}` is not a breakpoint. $map-for-breakpoints has #{map.keys($map-for-breakpoints)}; pass one of those, or a length such as `600px`.";
+  }
+  @return $value;
+}

data/scss/utilities/_validate-length.scss

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+@function validateLength($value) {
+  // null means "leave this out": `position` skips an edge given null, as its
+  // documentation shows. It is not a mistake to warn about, and the warning
+  // printed empty backticks, because null interpolates to nothing.
+  @if $value == null {
+    @return null;
+  }
+
+  $keywords: ("auto", "inherit", "initial", "unset", "revert", 0);
+
+  @if list.index($keywords, $value) {
+    @return $value;
+  }
+  @if meta.type-of($value) == "number" and not math.is-unitless($value) {
+    @return $value;
+  }
+  // calc(), clamp(), min() and max() arrive as Sass calculations; var() and
+  // env() arrive as unquoted strings holding a parenthesis. Both are valid
+  // lengths, and warning about them means warning about correct modern CSS,
+  // which this function used to do.
+  @if meta.type-of($value) == "calculation" {
+    @return $value;
+  }
+  @if meta.type-of($value) == "string" and string.index(string.quote($value), "(") {
+    @return $value;
+  }
+
+  @warn "`#{$value}` does not look like a length. Pass a number with a unit such as `20px`, a CSS function such as `var(--gap)` or `calc(1rem + 2px)`, or one of: auto, inherit, initial, unset, revert, 0.";
+  @return $value;
+}