bulma-rails 0.9.4 → 1.0.4

data/app/assets/stylesheets/bulma_sass/utilities/functions.scss

@@ -0,0 +1,310 @@
+@use "sass:color";
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+@function mergeColorMaps($bulma-colors, $custom-colors) {
+  // We return at least Bulma's hard-coded colors
+  $merged-colors: $bulma-colors;
+
+  // We want a map as input
+  @if meta.type-of($custom-colors) == "map" {
+    @each $name, $components in $custom-colors {
+      // The color name should be a string
+      // and the components either a single color
+      // or a colors list with at least one element
+      @if meta.type-of($name) ==
+        "string" and
+        (
+          meta.type-of($components) ==
+            "list" or
+            meta.type-of($components) ==
+            "color"
+        ) and
+        list.length($components) >=
+        1
+      {
+        $color-base: null;
+        $color-invert: null;
+        $color-light: null;
+        $color-dark: null;
+        $value: null;
+
+        // The param can either be a single color
+        // or a list of 2 colors
+        @if meta.type-of($components) == "color" {
+          $color-base: $components;
+          $color-invert: bulmaFindColorInvert($color-base);
+          $color-light: bulmaFindLightColor($color-base);
+          $color-dark: bulmaFindDarkColor($color-base);
+        } @else if meta.type-of($components) == "list" {
+          $color-base: list.nth($components, 1);
+
+          // If Invert, Light and Dark are provided
+          @if list.length($components) > 3 {
+            $color-invert: list.nth($components, 2);
+            $color-light: list.nth($components, 3);
+            $color-dark: list.nth($components, 4);
+
+            // If only Invert and Light are provided
+          } @else if list.length($components) > 2 {
+            $color-invert: list.nth($components, 2);
+            $color-light: list.nth($components, 3);
+            $color-dark: bulmaFindDarkColor($color-base);
+
+            // If only Invert is provided
+          } @else {
+            $color-invert: list.nth($components, 2);
+            $color-light: bulmaFindLightColor($color-base);
+            $color-dark: bulmaFindDarkColor($color-base);
+          }
+        }
+
+        $value: $color-base, $color-invert, $color-light, $color-dark;
+
+        // We only want to merge the map if the color base is an actual color
+        @if meta.type-of($color-base) == "color" {
+          // We merge this colors elements as map with Bulma's colors map
+          // (we can override them this way, no multiple definition for the same name)
+          // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
+          $merged-colors: map.merge(
+            $merged-colors,
+            (
+              $name: $value,
+            )
+          );
+        }
+      }
+    }
+  }
+
+  @return $merged-colors;
+}
+
+@function powerNumber($number, $exp) {
+  $value: 1;
+
+  @if $exp > 0 {
+    @for $i from 1 through $exp {
+      $value: $value * $number;
+    }
+  } @else if $exp < 0 {
+    @for $i from 1 through -$exp {
+      $value: math.div($value, $number);
+    }
+  }
+
+  @return $value;
+}
+
+@function bulmaColorLuminance($color) {
+  @if meta.type-of($color) != "color" {
+    @return 0.55;
+  }
+
+  $color-rgb: (
+    "red": color.channel($color, "red", $space: rgb),
+    "green": color.channel($color, "green", $space: rgb),
+    "blue": color.channel($color, "blue", $space: rgb),
+  );
+
+  @each $name, $value in $color-rgb {
+    $adjusted: 0;
+    $value: math.div($value, 255);
+
+    @if $value < 0.03928 {
+      $value: math.div($value, 12.92);
+    } @else {
+      $value: math.div($value + 0.055, 1.055);
+      $value: powerNumber($value, 2);
+    }
+
+    $color-rgb: map.merge(
+      $color-rgb,
+      (
+        $name: $value,
+      )
+    );
+  }
+
+  @return map.get($color-rgb, "red") * 0.2126 + map.get($color-rgb, "green") *
+    0.7152 + map.get($color-rgb, "blue") * 0.0722;
+}
+
+@function bulmaFindColorInvert($color) {
+  @if bulmaColorLuminance($color) > 0.55 {
+    @return rgba(#000, 0.7);
+  } @else {
+    @return #fff;
+  }
+}
+
+@function bulmaFindLightColor($color, $l: 96%) {
+  @if meta.type-of($color) == "color" {
+    $l: 96%;
+
+    @if color.channel($color, "lightness", $space: hsl) > 96% {
+      $l: color.channel($color, "lightness", $space: hsl);
+    }
+
+    @return color.change($color, $lightness: $l);
+  }
+
+  @return $background;
+}
+
+@function bulmaFindDarkColor($color, $base-l: 29%) {
+  @if meta.type-of($color) == "color" {
+    $luminance: bulmaColorLuminance($color);
+    $luminance-delta: 0.53 - $luminance;
+    $target-l: math.round($base-l + $luminance-delta * 53);
+
+    @return color.change($color, $lightness: max($base-l, $target-l));
+  }
+
+  @return $text-strong;
+}
+
+@function bulmaRgba($color, $alpha) {
+  @if meta.type-of($color) != "color" {
+    @return $color;
+  }
+
+  @return rgba($color, $alpha);
+}
+
+@function bulmaDarken($color, $amount) {
+  @if meta.type-of($color) != "color" {
+    @return $color;
+  }
+
+  @return color.adjust($color, $lightness: -$amount, $space: hsl);
+}
+
+@function bulmaLighten($color, $amount) {
+  @if meta.type-of($color) != "color" {
+    @return $color;
+  }
+
+  @return color.adjust($color, $lightness: $amount, $space: hsl);
+}
+
+@function bulmaColorBrightness($n) {
+  $color-brightness: math.round(
+    math.div(
+      (color.channel($n, "red", $space: rgb) * 299) +
+        (color.channel($n, "green", $space: rgb) * 587) +
+        (color.channel($n, "blue", $space: rgb) * 114),
+      1000
+    )
+  );
+  $light-color: math.round(
+    math.div(
+      (color.channel(#ffffff, "red", $space: rgb) * 299) +
+        (color.channel(#ffffff, "green", $space: rgb) * 587) +
+        (color.channel(#ffffff, "blue", $space: rgb) * 114),
+      1000
+    )
+  );
+
+  @if abs($color-brightness) < math.div($light-color, 2) {
+    @return "dark";
+  }
+
+  @return "bright";
+}
+
+@function bulmaEnoughContrast($foreground, $background) {
+  $r: (
+      max(
+        color.channel($foreground, "red", $space: rgb),
+        color.channel($background, "red", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "red", $space: rgb),
+        color.channel($background, "red", $space: rgb)
+      )
+    );
+  $g: (
+      max(
+        color.channel($foreground, "green", $space: rgb),
+        color.channel($background, "green", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "green", $space: rgb),
+        color.channel($background, "green", $space: rgb)
+      )
+    );
+  $b: (
+      max(
+        color.channel($foreground, "blue", $space: rgb),
+        color.channel($background, "blue", $space: rgb)
+      )
+    ) -
+    (
+      min(
+        color.channel($foreground, "blue", $space: rgb),
+        color.channel($background, "blue", $space: rgb)
+      )
+    );
+  $sum-rgb: $r + $g + $b;
+
+  @if $sum-rgb < 500 {
+    @return false;
+  }
+
+  @return true;
+}
+
+// By Cory Simmons https://corysimmons.com/
+@function bulmaStringToNumber($value) {
+  @if meta.type-of($value) == "number" {
+    @return $value;
+  } @else if meta.type-of($value) != "string" {
+    $_: log("Value for `to-number` should be a number or a string.");
+  }
+
+  $result: 0;
+  $digits: 0;
+  $minus: string.slice($value, 1, 1) == "-";
+  $numbers: (
+    "0": 0,
+    "1": 1,
+    "2": 2,
+    "3": 3,
+    "4": 4,
+    "5": 5,
+    "6": 6,
+    "7": 7,
+    "8": 8,
+    "9": 9,
+  );
+
+  @for $i from if($minus, 2, 1) through string.length($value) {
+    $character: string.slice($value, $i, $i);
+
+    @if not(list.index(map.keys($numbers), $character) or $character == ".") {
+      @return to-length(
+        if($minus, -$result, $result),
+        string.slice($value, $i)
+      );
+    }
+
+    @if $character == "." {
+      $digits: 1;
+    } @else if $digits == 0 {
+      $result: $result * 10 + map.get($numbers, $character);
+    } @else {
+      $digits: $digits * 10;
+      $result: $result + map.get($numbers, $character) / $digits;
+    }
+  }
+
+  @return if($minus, -$result, $result);
+}

data/app/assets/stylesheets/bulma_sass/utilities/initial-variables.scss

@@ -0,0 +1,157 @@
+// Scheme Hue and Saturation
+
+$scheme-h: 221 !default;
+$scheme-s: 14% !default;
+$dark-l: 20% !default;
+$light-l: 90% !default;
+
+// Colors
+
+$black: hsl(221, 14%, 4%) !default;
+$black-bis: hsl(221, 14%, 9%) !default;
+$black-ter: hsl(221, 14%, 14%) !default;
+
+$grey-darker: hsl(221, 14%, 21%) !default;
+$grey-dark: hsl(221, 14%, 29%) !default;
+$grey: hsl(221, 14%, 48%) !default;
+$grey-light: hsl(221, 14%, 71%) !default;
+$grey-lighter: hsl(221, 14%, 86%) !default;
+$grey-lightest: hsl(221, 14%, 93%) !default;
+
+$white-ter: hsl(221, 14%, 96%) !default;
+$white-bis: hsl(221, 14%, 98%) !default;
+$white: hsl(221, 14%, 100%) !default;
+
+$orange: hsl(14, 100%, 53%) !default;
+$yellow: hsl(42, 100%, 53%) !default;
+$green: hsl(153, 53%, 53%) !default;
+$turquoise: hsl(171, 100%, 41%) !default;
+$cyan: hsl(198, 100%, 70%) !default;
+$blue: hsl(233, 100%, 63%) !default;
+$purple: hsl(271, 100%, 71%) !default;
+$red: hsl(348, 100%, 70%) !default;
+
+// Typography
+
+$family-sans-serif: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+  "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+$family-monospace: "Inconsolata", "Hack", "SF Mono", "Roboto Mono",
+  "Source Code Pro", "Ubuntu Mono", monospace !default;
+$render-mode: optimizeLegibility !default;
+
+$size-1: 3rem !default;
+$size-2: 2.5rem !default;
+$size-3: 2rem !default;
+$size-4: 1.5rem !default;
+$size-5: 1.25rem !default;
+$size-6: 1rem !default;
+$size-7: 0.75rem !default;
+
+$weight-light: 300 !default;
+$weight-normal: 400 !default;
+$weight-medium: 500 !default;
+$weight-semibold: 600 !default;
+$weight-bold: 700 !default;
+$weight-extrabold: 800 !default;
+
+// Spacing
+
+$block-spacing: 1.5rem !default;
+$aspect-ratios: (
+  (1, 1),
+  (5, 4),
+  (4, 3),
+  (3, 2),
+  (5, 3),
+  (16, 9),
+  (2, 1),
+  (3, 1),
+  (4, 5),
+  (3, 4),
+  (2, 3),
+  (3, 5),
+  (9, 16),
+  (1, 2),
+  (1, 3)
+) !default;
+
+// Responsiveness
+
+// The container horizontal gap, which acts as the offset for breakpoints
+$gap: 32px !default;
+
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default;
+
+// 960px container + 4rem
+$desktop: 960px + 2 * $gap !default;
+
+// 1152px container + 4rem
+$widescreen: 1152px + 2 * $gap !default;
+$widescreen-enabled: true !default;
+
+// 1344px container + 4rem
+$fullhd: 1344px + 2 * $gap !default;
+$fullhd-enabled: true !default;
+$breakpoints: (
+  "mobile": (
+    "until": $tablet,
+  ),
+  "tablet": (
+    "from": $tablet,
+  ),
+  "tablet-only": (
+    "from": $tablet,
+    "until": $desktop,
+  ),
+  "touch": (
+    "from": $desktop,
+  ),
+  "desktop": (
+    "from": $desktop,
+  ),
+  "desktop-only": (
+    "from": $desktop,
+    "until": $widescreen,
+  ),
+  "until-widescreen": (
+    "until": $widescreen,
+  ),
+  "widescreen": (
+    "from": $widescreen,
+  ),
+  "widescreen-only": (
+    "from": $widescreen,
+    "until": $fullhd,
+  ),
+  "until-fullhd": (
+    "until": $fullhd,
+  ),
+  "fullhd": (
+    "from": $fullhd,
+  ),
+) !default;
+
+// Miscellaneous
+
+$duration: 294ms !default;
+$easing: ease-out !default;
+$radius-small: 0.25rem !default;
+$radius: 0.375rem !default;
+$radius-medium: 0.5em !default;
+$radius-large: 0.75rem !default;
+$radius-rounded: 9999px !default;
+$speed: 86ms !default;
+
+// Flags
+
+$variable-columns: true !default;
+$rtl: false !default;
+
+// Prefixes
+
+$class-prefix: "" !default;
+$cssvars-prefix: "bulma-" !default;
+$helpers-prefix: "is-" !default;
+$helpers-has-prefix: "has-" !default;
+$variables-host: ":root" !default;