bulma-rails 0.9.4 → 1.0.0

data/app/assets/stylesheets/sass/grid/grid.scss

@@ -0,0 +1,209 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$max-column-count: 12;
+$grip-gap: 0.75rem;
+$column-min-base: 1.5rem;
+
+@mixin fixed-grid-properties($suffix: "") {
+  @for $i from 1 through $max-column-count {
+    &.#{iv.$class-prefix}has-#{$i}-cols#{$suffix} {
+      .#{iv.$class-prefix}grid {
+        @include cv.register-var("grid-column-count", #{$i});
+      }
+    }
+  }
+}
+
+$grid-container-name: bulma-fixed-grid;
+
+.#{iv.$class-prefix}fixed-grid {
+  @extend %block;
+  container-name: $grid-container-name;
+  container-type: inline-size;
+
+  .#{iv.$class-prefix}grid {
+    @include cv.register-vars(
+      (
+        "grid-gap-count": calc(#{cv.getVar("grid-column-count")} - 1),
+        "grid-column-count": 2,
+      )
+    );
+
+    grid-template-columns: repeat(cv.getVar("grid-column-count"), 1fr);
+  }
+
+  @include fixed-grid-properties;
+
+  @include mx.container-until($grid-container-name, iv.$tablet) {
+    @include fixed-grid-properties("-mobile");
+  }
+
+  @include mx.container-from($grid-container-name, iv.$tablet) {
+    @include fixed-grid-properties("-tablet");
+  }
+
+  @include mx.container-from($grid-container-name, iv.$desktop) {
+    @include fixed-grid-properties("-desktop");
+  }
+
+  @include mx.container-from($grid-container-name, iv.$widescreen) {
+    @include fixed-grid-properties("-widescreen");
+  }
+
+  @include mx.container-from($grid-container-name, iv.$fullhd) {
+    @include fixed-grid-properties("-fullhd");
+  }
+
+  &.#{iv.$class-prefix}has-auto-count {
+    .#{iv.$class-prefix}grid {
+      @include mx.container-until($grid-container-name, iv.$tablet) {
+        @include cv.register-var("grid-column-count", 2);
+      }
+
+      @include mx.container-from($grid-container-name, iv.$tablet) {
+        @include cv.register-var("grid-column-count", 4);
+      }
+
+      @include mx.container-from($grid-container-name, iv.$desktop) {
+        @include cv.register-var("grid-column-count", 8);
+      }
+
+      @include mx.container-from($grid-container-name, iv.$widescreen) {
+        @include cv.register-var("grid-column-count", 12);
+      }
+
+      @include mx.container-from($grid-container-name, iv.$fullhd) {
+        @include cv.register-var("grid-column-count", 16);
+      }
+    }
+  }
+}
+
+.#{iv.$class-prefix}grid {
+  @include cv.register-vars(
+    (
+      "grid-gap": $grip-gap,
+      "grid-column-min": 9rem,
+      "grid-cell-column-span": 1,
+      "grid-cell-row-span": 1,
+    )
+  );
+
+  @extend %block;
+  display: grid;
+  gap: cv.getVar("grid-gap");
+  column-gap: #{cv.getVarWithBackup("grid-column-gap", "grid-gap")};
+  row-gap: #{cv.getVarWithBackup("grid-row-gap", "grid-gap")};
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(#{cv.getVar("grid-column-min")}, 1fr)
+  );
+  grid-template-rows: auto;
+
+  &.is-auto-fill {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(#{cv.getVar("grid-column-min")}, 1fr)
+    );
+  }
+
+  @for $i from 1 through 12 {
+    &.#{iv.$class-prefix}is-col-min-#{$i} {
+      @include cv.register-vars(
+        (
+          "grid-column-min": #{$column-min-base * $i},
+        )
+      );
+    }
+  }
+}
+
+@mixin cell-properties($suffix: "") {
+  @for $i from 1 through $max-column-count {
+    $name: $i + $suffix;
+
+    &.#{iv.$class-prefix}is-col-start-#{$name} {
+      @include cv.register-var("grid-cell-column-start", #{$i});
+    }
+
+    &.#{iv.$class-prefix}is-col-end-#{$name} {
+      @include cv.register-var("grid-cell-column-end", #{$i});
+    }
+
+    &.#{iv.$class-prefix}is-col-from-end-#{$name} {
+      @include cv.register-var("grid-cell-column-start", #{$i * -1});
+    }
+
+    &.#{iv.$class-prefix}is-col-span-#{$name} {
+      @include cv.register-var("grid-cell-column-span", #{$i});
+    }
+
+    &.#{iv.$class-prefix}is-row-start-#{$name} {
+      @include cv.register-var("grid-cell-row-start", #{$i});
+    }
+
+    &.#{iv.$class-prefix}is-row-end-#{$name} {
+      @include cv.register-var("grid-cell-row-end", #{$i});
+    }
+
+    &.#{iv.$class-prefix}is-row-from-end-#{$name} {
+      @include cv.register-var("grid-cell-row-start", #{$i * -1});
+    }
+
+    &.#{iv.$class-prefix}is-row-span-#{$name} {
+      @include cv.register-var("grid-cell-row-span", #{$i});
+    }
+  }
+}
+
+.#{iv.$class-prefix}cell {
+  grid-column-end: span cv.getVar("grid-cell-column-span");
+  grid-column-start: cv.getVar("grid-cell-column-start");
+  grid-row-end: span cv.getVar("grid-cell-row-span");
+  grid-row-start: cv.getVar("grid-cell-row-start");
+
+  // Sizes
+  &.#{iv.$class-prefix}is-col-start-end {
+    @include cv.register-var("grid-cell-column-start", -1);
+  }
+
+  &.#{iv.$class-prefix}is-row-start-end {
+    @include cv.register-var("grid-cell-row-start", -1);
+  }
+
+  @include cell-properties;
+  @include mx.mobile {
+    @include cell-properties("-mobile");
+  }
+
+  @include mx.tablet {
+    @include cell-properties("-tablet");
+  }
+
+  @include mx.tablet-only {
+    @include cell-properties("-tablet-only");
+  }
+
+  @include mx.desktop {
+    @include cell-properties("-desktop");
+  }
+
+  @include mx.desktop-only {
+    @include cell-properties("-desktop-only");
+  }
+
+  @include mx.widescreen {
+    @include cell-properties("-widescreen");
+  }
+
+  @include mx.widescreen-only {
+    @include cell-properties("-widescreen-only");
+  }
+
+  @include mx.fullhd {
+    @include cell-properties("-fullhd");
+  }
+}

data/app/assets/stylesheets/sass/helpers/_index.scss

@@ -0,0 +1,15 @@
+/* Bulma Helpers */
+@charset "utf-8";
+
+@forward "aspect-ratio";
+@forward "border";
+@forward "color";
+@forward "flexbox";
+@forward "float";
+@forward "gap";
+@forward "overflow";
+@forward "position";
+@forward "spacing";
+@forward "typography";
+@forward "visibility";
+@forward "other";

data/app/assets/stylesheets/sass/helpers/aspect-ratio.scss

@@ -0,0 +1,10 @@
+@use "../utilities/initial-variables" as iv;
+
+@each $pair in iv.$aspect-ratios {
+  $w: nth($pair, 1);
+  $h: nth($pair, 2);
+
+  .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
+    aspect-ratio: #{$w} / #{$h};
+  }
+}

data/app/assets/stylesheets/sass/helpers/border.scss

@@ -0,0 +1,15 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+$radii: (
+  "small": "radius-small",
+  "normal": "radius",
+  "large": "radius-large",
+  "rounded": "radius-rounded",
+);
+
+@each $name, $var in $radii {
+  .#{iv.$helpers-has-prefix}radius-#{$name} {
+    border-radius: cv.getVar($var);
+  }
+}

data/app/assets/stylesheets/sass/helpers/color.scss

@@ -0,0 +1,364 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+
+$digits: (
+  "00",
+  "05",
+  "10",
+  "15",
+  "20",
+  "25",
+  "30",
+  "35",
+  "40",
+  "45",
+  "50",
+  "55",
+  "60",
+  "65",
+  "70",
+  "75",
+  "80",
+  "85",
+  "90",
+  "95",
+  "100"
+);
+
+.#{iv.$helpers-has-prefix}background {
+  background-color: cv.getVar("background");
+}
+
+@each $name, $color in dv.$colors {
+  $background: hsl(
+    #{cv.getVar($name, "", "-h")},
+    #{cv.getVar($name, "", "-s")},
+    calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")})
+  );
+
+  $color: hsl(
+    #{cv.getVar($name, "", "-h")},
+    #{cv.getVar($name, "", "-s")},
+    calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")})
+  );
+
+  [class*="#{iv.$helpers-prefix}color-#{$name}"],
+  [class*="#{iv.$helpers-has-prefix}text-#{$name}"] {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-l")},
+        "color-l-delta": 0%,
+      )
+    );
+    color: $color !important;
+  }
+
+  [class*="#{iv.$helpers-prefix}background-#{$name}"],
+  [class*="#{iv.$helpers-has-prefix}background-#{$name}"] {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-l")},
+        "background-l-delta": 0%,
+      )
+    );
+    background-color: $background !important;
+  }
+
+  // Invert
+  .#{iv.$helpers-prefix}color-#{$name}-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-invert-l")},
+      )
+    );
+  }
+
+  // On Scheme
+  .#{iv.$helpers-prefix}color-#{$name}-on-scheme,
+  .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-on-scheme-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-on-scheme,
+  .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-on-scheme-l")},
+      )
+    );
+  }
+
+  // Light
+  .#{iv.$helpers-prefix}color-#{$name}-light,
+  .#{iv.$helpers-has-prefix}text-#{$name}-light {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-light-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-light,
+  .#{iv.$helpers-has-prefix}background-#{$name}-light {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-light-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-light-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-light-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-light-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-light-invert-l")},
+      )
+    );
+  }
+
+  // Dark
+  .#{iv.$helpers-prefix}color-#{$name}-dark,
+  .#{iv.$helpers-has-prefix}text-#{$name}-dark {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-dark-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-dark,
+  .#{iv.$helpers-has-prefix}background-#{$name}-dark {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-dark-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-dark-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar($name, "", "-dark-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-dark-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar($name, "", "-dark-invert-l")},
+      )
+    );
+  }
+
+  // Soft/Bold
+  .#{iv.$helpers-prefix}color-#{$name}-soft,
+  .#{iv.$helpers-has-prefix}text-#{$name}-soft {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar("soft-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-soft,
+  .#{iv.$helpers-has-prefix}background-#{$name}-soft {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar("soft-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-bold,
+  .#{iv.$helpers-has-prefix}text-#{$name}-bold {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar("bold-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-bold,
+  .#{iv.$helpers-has-prefix}background-#{$name}-bold {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar("bold-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-soft-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar("soft-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-soft-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar("soft-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}color-#{$name}-bold-invert,
+  .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
+    @include cv.register-vars(
+      (
+        "color-l": #{cv.getVar("bold-invert-l")},
+      )
+    );
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name}-bold-invert,
+  .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
+    @include cv.register-vars(
+      (
+        "background-l": #{cv.getVar("bold-invert-l")},
+      )
+    );
+  }
+
+  @each $digit in $digits {
+    .#{iv.$helpers-prefix}color-#{$name}-#{$digit},
+    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
+      @include cv.register-vars(
+        (
+          "color-l": #{cv.getVar($name, "", "-#{$digit}-l")},
+        )
+      );
+    }
+
+    .#{iv.$helpers-prefix}background-#{$name}-#{$digit},
+    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
+      @include cv.register-vars(
+        (
+          "background-l": #{cv.getVar($name, "", "-#{$digit}-l")},
+        )
+      );
+    }
+
+    .#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert,
+    .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
+      @include cv.register-vars(
+        (
+          "color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
+        )
+      );
+    }
+
+    .#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert,
+    .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
+      @include cv.register-vars(
+        (
+          "background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
+        )
+      );
+    }
+  }
+
+  // Hover
+  a.#{iv.$helpers-prefix}color-#{$name},
+  button.#{iv.$helpers-prefix}color-#{$name},
+  #{iv.$helpers-prefix}color-#{$name}.is-hoverable,
+  a.#{iv.$helpers-has-prefix}text-#{$name},
+  button.#{iv.$helpers-has-prefix}text-#{$name},
+  #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
+    &:hover,
+    &:focus-visible {
+      @include cv.register-vars(
+        (
+          "color-l-delta": #{cv.getVar("hover-color-l-delta")},
+        )
+      );
+    }
+
+    &:active {
+      @include cv.register-vars(
+        (
+          "color-l-delta": #{cv.getVar("active-color-l-delta")},
+        )
+      );
+    }
+  }
+
+  a.#{iv.$helpers-prefix}background-#{$name},
+  button.#{iv.$helpers-prefix}background-#{$name},
+  #{iv.$helpers-prefix}background-#{$name}.is-hoverable,
+  a.#{iv.$helpers-has-prefix}background-#{$name},
+  button.#{iv.$helpers-has-prefix}background-#{$name},
+  #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
+    &:hover,
+    &:focus-visible {
+      @include cv.register-vars(
+        (
+          "background-l-delta": #{cv.getVar("hover-background-l-delta")},
+        )
+      );
+    }
+
+    &:active {
+      @include cv.register-vars(
+        (
+          "background-l-delta": #{cv.getVar("active-background-l-delta")},
+        )
+      );
+    }
+  }
+
+  // Palettes
+  .#{iv.$helpers-prefix}palette-#{$name} {
+    --h: #{cv.getVar($name, "", "-h")};
+    --s: #{cv.getVar($name, "", "-s")};
+    --l: #{cv.getVar($name, "", "-l")};
+    --color: hsl(var(--h), var(--s), var(--l));
+
+    @each $digit in $digits {
+      --#{$digit}-l: #{cv.getVar($name, "", "-#{$digit}-l")};
+      --color-#{$digit}: hsl(var(--h), var(--s), var(--#{$digit}-l));
+    }
+  }
+}
+
+@each $name, $shade in dv.$shades {
+  .#{iv.$helpers-prefix}color-#{$name},
+  .#{iv.$helpers-has-prefix}text-#{$name} {
+    color: $shade !important;
+  }
+
+  .#{iv.$helpers-prefix}background-#{$name},
+  .#{iv.$helpers-has-prefix}background-#{$name} {
+    background-color: $shade !important;
+  }
+}

data/app/assets/stylesheets/sass/helpers/flexbox.scss

@@ -0,0 +1,62 @@
+@use "../utilities/initial-variables" as iv;
+
+$flex-direction-values: row, row-reverse, column, column-reverse;
+
+@each $value in $flex-direction-values {
+  .#{iv.$helpers-prefix}flex-direction-#{$value} {
+    flex-direction: $value !important;
+  }
+}
+
+$flex-wrap-values: nowrap, wrap, wrap-reverse;
+
+@each $value in $flex-wrap-values {
+  .#{iv.$helpers-prefix}flex-wrap-#{$value} {
+    flex-wrap: $value !important;
+  }
+}
+
+$justify-content-values: flex-start, flex-end, center, space-between,
+  space-around, space-evenly, start, end, left, right;
+
+@each $value in $justify-content-values {
+  .#{iv.$helpers-prefix}justify-content-#{$value} {
+    justify-content: $value !important;
+  }
+}
+
+$align-content-values: flex-start, flex-end, center, space-between, space-around,
+  space-evenly, stretch, start, end, baseline;
+
+@each $value in $align-content-values {
+  .#{iv.$helpers-prefix}align-content-#{$value} {
+    align-content: $value !important;
+  }
+}
+
+$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end,
+  self-start, self-end;
+
+@each $value in $align-items-values {
+  .#{iv.$helpers-prefix}align-items-#{$value} {
+    align-items: $value !important;
+  }
+}
+
+$align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
+
+@each $value in $align-self-values {
+  .#{iv.$helpers-prefix}align-self-#{$value} {
+    align-self: $value !important;
+  }
+}
+
+$flex-operators: grow, shrink;
+
+@each $operator in $flex-operators {
+  @for $i from 0 through 5 {
+    .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
+      flex-#{$operator}: $i !important;
+    }
+  }
+}

data/app/assets/stylesheets/sass/helpers/float.scss

@@ -0,0 +1,28 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$helpers-prefix}clearfix {
+  @include mx.clearfix;
+}
+
+.#{iv.$helpers-prefix}float-left,
+.#{iv.$helpers-prefix}pulled-left {
+  float: left !important;
+}
+
+.#{iv.$helpers-prefix}float-right,
+.#{iv.$helpers-prefix}pulled-right {
+  float: right !important;
+}
+
+.#{iv.$helpers-prefix}float-none {
+  float: none !important;
+}
+
+$clears: both left none right;
+
+@each $clear in $clears {
+  .#{iv.$helpers-prefix}clear-#{$clear} {
+    clear: $clear !important;
+  }
+}