bulma-rails 0.9.0 → 1.0.0

data/app/assets/stylesheets/sass/elements/table.scss

@@ -0,0 +1,261 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$table-color: cv.getVar("text-strong") !default;
+$table-background-color: cv.getVar("scheme-main") !default;
+
+$table-cell-border-color: cv.getVar("border") !default;
+$table-cell-border-style: solid !default;
+$table-cell-border-width: 0 0 1px !default;
+$table-cell-padding: 0.5em 0.75em !default;
+$table-cell-heading-color: cv.getVar("text-strong") !default;
+$table-cell-text-align: left !default;
+
+$table-head-cell-border-width: 0 0 2px !default;
+$table-head-cell-color: cv.getVar("text-strong") !default;
+$table-foot-cell-border-width: 2px 0 0 !default;
+$table-foot-cell-color: cv.getVar("text-strong") !default;
+
+$table-head-background-color: transparent !default;
+$table-body-background-color: transparent !default;
+$table-foot-background-color: transparent !default;
+
+$table-row-hover-background-color: cv.getVar("scheme-main-bis") !default;
+
+$table-row-active-background-color: cv.getVar("primary") !default;
+$table-row-active-color: cv.getVar("primary-invert") !default;
+
+$table-striped-row-even-background-color: cv.getVar("scheme-main-bis") !default;
+$table-striped-row-even-hover-background-color: cv.getVar(
+  "scheme-main-ter"
+) !default;
+
+$table-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}table {
+  @include cv.register-vars(
+    (
+      "table-color": #{$table-color},
+      "table-background-color": #{$table-background-color},
+      "table-cell-border-color": #{$table-cell-border-color},
+      "table-cell-border-style": #{$table-cell-border-style},
+      "table-cell-border-width": #{$table-cell-border-width},
+      "table-cell-padding": #{$table-cell-padding},
+      "table-cell-heading-color": #{$table-cell-heading-color},
+      "table-cell-text-align": #{$table-cell-text-align},
+      "table-head-cell-border-width": #{$table-head-cell-border-width},
+      "table-head-cell-color": #{$table-head-cell-color},
+      "table-foot-cell-border-width": #{$table-foot-cell-border-width},
+      "table-foot-cell-color": #{$table-foot-cell-color},
+      "table-head-background-color": #{$table-head-background-color},
+      "table-body-background-color": #{$table-body-background-color},
+      "table-foot-background-color": #{$table-foot-background-color},
+      "table-row-hover-background-color": #{$table-row-hover-background-color},
+      "table-row-active-background-color": #{$table-row-active-background-color},
+      "table-row-active-color": #{$table-row-active-color},
+      "table-striped-row-even-background-color": #{$table-striped-row-even-background-color},
+      "table-striped-row-even-hover-background-color": #{$table-striped-row-even-hover-background-color},
+    )
+  );
+}
+
+.#{iv.$class-prefix}table {
+  @extend %block;
+
+  background-color: cv.getVar("table-background-color");
+  color: cv.getVar("table-color");
+
+  td,
+  th {
+    background-color: cv.getVar("table-cell-background-color");
+    border-color: cv.getVar("table-cell-border-color");
+    border-style: cv.getVar("table-cell-border-style");
+    border-width: cv.getVar("table-cell-border-width");
+    color: cv.getVar("table-color");
+    padding: cv.getVar("table-cell-padding");
+    vertical-align: top;
+
+    // Colors
+    @each $name, $pair in $table-colors {
+      &.#{iv.$class-prefix}is-#{$name} {
+        @include cv.register-vars(
+          (
+            "table-color": #{cv.getVar($name, "", "-invert")},
+            "table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
+            "table-cell-background-color": #{cv.getVar($name)},
+            "table-cell-border-color": #{cv.getVar($name)},
+          )
+        );
+      }
+    }
+
+    // Modifiers
+    &.#{iv.$class-prefix}is-narrow {
+      white-space: nowrap;
+      width: 1%;
+    }
+
+    &.#{iv.$class-prefix}is-selected {
+      background-color: cv.getVar("table-row-active-background-color");
+      color: cv.getVar("table-row-active-color");
+
+      a,
+      strong {
+        color: currentColor;
+      }
+    }
+
+    &.#{iv.$class-prefix}is-vcentered {
+      vertical-align: middle;
+    }
+  }
+
+  th {
+    color: cv.getVar("table-cell-heading-color");
+
+    &:not([align]) {
+      text-align: cv.getVar("table-cell-text-align");
+    }
+  }
+
+  tr {
+    &.#{iv.$class-prefix}is-selected {
+      background-color: cv.getVar("table-row-active-background-color");
+      color: cv.getVar("table-row-active-color");
+
+      a,
+      strong {
+        color: currentColor;
+      }
+
+      td,
+      th {
+        border-color: cv.getVar("table-row-active-color");
+        color: currentColor;
+      }
+    }
+
+    @each $name, $pair in $table-colors {
+      &.#{iv.$class-prefix}is-#{$name} {
+        @include cv.register-vars(
+          (
+            "table-color": #{cv.getVar($name, "", "-invert")},
+            "table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
+            "table-cell-background-color": #{cv.getVar($name)},
+            "table-cell-border-color": #{cv.getVar($name)},
+          )
+        );
+      }
+    }
+  }
+
+  thead {
+    background-color: cv.getVar("table-head-background-color");
+
+    td,
+    th {
+      border-width: cv.getVar("table-head-cell-border-width");
+      color: cv.getVar("table-head-cell-color");
+    }
+  }
+
+  tfoot {
+    background-color: cv.getVar("table-foot-background-color");
+
+    td,
+    th {
+      border-width: cv.getVar("table-foot-cell-border-width");
+      color: cv.getVar("table-foot-cell-color");
+    }
+  }
+
+  tbody {
+    background-color: cv.getVar("table-body-background-color");
+
+    tr {
+      &:last-child {
+        td,
+        th {
+          border-bottom-width: 0;
+        }
+      }
+    }
+  }
+
+  // Modifiers
+  &.#{iv.$class-prefix}is-bordered {
+    td,
+    th {
+      border-width: 1px;
+    }
+
+    tr {
+      &:last-child {
+        td,
+        th {
+          border-bottom-width: 1px;
+        }
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-fullwidth {
+    width: 100%;
+  }
+
+  &.#{iv.$class-prefix}is-hoverable {
+    tbody {
+      tr:not(.#{iv.$class-prefix}is-selected) {
+        &:hover {
+          background-color: cv.getVar("table-row-hover-background-color");
+        }
+      }
+    }
+
+    &.#{iv.$class-prefix}is-striped {
+      tbody {
+        tr:not(.#{iv.$class-prefix}is-selected) {
+          &:hover {
+            background-color: cv.getVar("table-row-hover-background-color");
+
+            &:nth-child(even) {
+              background-color: cv.getVar(
+                "table-striped-row-even-hover-background-color"
+              );
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-narrow {
+    td,
+    th {
+      padding: 0.25em 0.5em;
+    }
+  }
+
+  &.#{iv.$class-prefix}is-striped {
+    tbody {
+      tr:not(.#{iv.$class-prefix}is-selected) {
+        &:nth-child(even) {
+          background-color: cv.getVar(
+            "table-striped-row-even-background-color"
+          );
+        }
+      }
+    }
+  }
+}
+
+.#{iv.$class-prefix}table-container {
+  @extend %block;
+  @include mx.overflow-touch;
+  overflow: auto;
+  overflow-y: hidden;
+  max-width: 100%;
+}

data/app/assets/stylesheets/sass/elements/tag.scss

@@ -0,0 +1,219 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$tag-h: cv.getVar("scheme-h");
+$tag-s: cv.getVar("scheme-s");
+$tag-background-l: cv.getVar("background-l");
+$tag-background-l-delta: 0%;
+$tag-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$tag-active-background-l-delta: cv.getVar("active-background-l-delta");
+$tag-color-l: cv.getVar("text-l");
+$tag-radius: cv.getVar("radius") !default;
+$tag-delete-margin: 1px !default;
+
+$tag-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}tags {
+  @extend %block;
+
+  align-items: center;
+  color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: flex-start;
+
+  // Sizes
+  &.#{iv.$class-prefix}are-medium {
+    .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
+        .#{iv.$class-prefix}is-large
+      ) {
+      font-size: cv.getVar("size-normal");
+    }
+  }
+
+  &.#{iv.$class-prefix}are-large {
+    .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
+        .#{iv.$class-prefix}is-medium
+      ) {
+      font-size: cv.getVar("size-medium");
+    }
+  }
+
+  &.#{iv.$class-prefix}is-centered {
+    gap: 0.25rem;
+    justify-content: center;
+  }
+
+  &.#{iv.$class-prefix}is-right {
+    justify-content: flex-end;
+  }
+
+  &.#{iv.$class-prefix}has-addons {
+    gap: 0;
+
+    .#{iv.$class-prefix}tag {
+      &:not(:first-child) {
+        border-start-start-radius: 0; // Top left
+        border-end-start-radius: 0; // Top right
+      }
+
+      &:not(:last-child) {
+        border-start-end-radius: 0; // Bottom left
+        border-end-end-radius: 0; // Bottom right
+      }
+    }
+  }
+}
+
+.#{iv.$class-prefix}tag {
+  @include cv.register-vars(
+    (
+      "tag-h": #{$tag-h},
+      "tag-s": #{$tag-s},
+      "tag-background-l": #{$tag-background-l},
+      "tag-background-l-delta": #{$tag-background-l-delta},
+      "tag-hover-background-l-delta": #{$tag-hover-background-l-delta},
+      "tag-active-background-l-delta": #{$tag-active-background-l-delta},
+      "tag-color-l": #{$tag-color-l},
+      "tag-radius": #{$tag-radius},
+      "tag-delete-margin": #{$tag-delete-margin},
+    )
+  );
+
+  align-items: center;
+  background-color: hsl(
+    cv.getVar("tag-h"),
+    cv.getVar("tag-s"),
+    calc(
+      #{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")}
+    )
+  );
+  border-radius: $tag-radius;
+  color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
+  display: inline-flex;
+  font-size: cv.getVar("size-small");
+  height: 2em;
+  justify-content: center;
+  line-height: 1.5;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
+  white-space: nowrap;
+
+  .#{iv.$class-prefix}delete {
+    margin-inline-start: 0.25rem;
+    margin-inline-end: -0.375rem;
+  }
+
+  // Colors
+  @each $name, $pair in $tag-colors {
+    &.#{iv.$class-prefix}is-#{$name} {
+      @include cv.register-vars(
+        (
+          "tag-h": #{cv.getVar($name, "", "-h")},
+          "tag-s": #{cv.getVar($name, "", "-s")},
+          "tag-background-l": #{cv.getVar($name, "", "-l")},
+          "tag-color-l": #{cv.getVar($name, "", "-invert-l")},
+        )
+      );
+
+      &.#{iv.$class-prefix}is-light {
+        @include cv.register-vars(
+          (
+            "tag-background-l": #{cv.getVar("light-l")},
+            "tag-color-l": #{cv.getVar($name, "", "-light-invert-l")},
+          )
+        );
+      }
+    }
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-normal {
+    font-size: cv.getVar("size-small");
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    font-size: cv.getVar("size-normal");
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    font-size: cv.getVar("size-medium");
+  }
+
+  .#{iv.$class-prefix}icon {
+    &:first-child:not(:last-child) {
+      margin-inline-start: -0.375em;
+      margin-inline-end: 0.1875em;
+    }
+
+    &:last-child:not(:first-child) {
+      margin-inline-start: 0.1875em;
+      margin-inline-end: -0.375em;
+    }
+
+    &:first-child:last-child {
+      margin-inline-start: -0.375em;
+      margin-inline-end: -0.375em;
+    }
+  }
+
+  // Modifiers
+  &.#{iv.$class-prefix}is-delete {
+    margin-inline-start: cv.getVar("tag-delete-margin");
+    padding: 0;
+    position: relative;
+    width: 2em;
+
+    &::before,
+    &::after {
+      background-color: currentColor;
+      content: "";
+      display: block;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translateX(-50%) translateY(-50%) rotate(45deg);
+      transform-origin: center center;
+    }
+
+    &::before {
+      height: 1px;
+      width: 50%;
+    }
+
+    &::after {
+      height: 50%;
+      width: 1px;
+    }
+  }
+
+  &.#{iv.$class-prefix}is-rounded {
+    border-radius: cv.getVar("radius-rounded");
+  }
+}
+
+a.#{iv.$class-prefix}tag,
+button.#{iv.$class-prefix}tag,
+.#{iv.$class-prefix}tag.is-hoverable {
+  cursor: pointer;
+
+  &:hover {
+    @include cv.register-vars(
+      (
+        "tag-background-l-delta": #{cv.getVar("tag-hover-background-l-delta")},
+      )
+    );
+  }
+
+  &:active {
+    @include cv.register-vars(
+      (
+        "tag-background-l-delta": #{cv.getVar("tag-active-background-l-delta")},
+      )
+    );
+  }
+}

data/app/assets/stylesheets/sass/elements/title.scss

@@ -0,0 +1,128 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$title-color: cv.getVar("text-strong") !default;
+$title-family: false !default;
+$title-size: cv.getVar("size-3") !default;
+$title-weight: cv.getVar("weight-extrabold") !default;
+$title-line-height: 1.125 !default;
+$title-strong-color: inherit !default;
+$title-strong-weight: inherit !default;
+$title-sub-size: 0.75em !default;
+$title-sup-size: 0.75em !default;
+
+$subtitle-color: cv.getVar("text") !default;
+$subtitle-family: false !default;
+$subtitle-size: cv.getVar("size-5") !default;
+$subtitle-weight: cv.getVar("weight-normal") !default;
+$subtitle-line-height: 1.25 !default;
+$subtitle-strong-color: cv.getVar("text-strong") !default;
+$subtitle-strong-weight: cv.getVar("weight-semibold") !default;
+
+.#{iv.$class-prefix}title,
+.#{iv.$class-prefix}subtitle {
+  @include cv.register-vars(
+    (
+      "title-color": #{$title-color},
+      "title-family": #{$title-family},
+      "title-size": #{$title-size},
+      "title-weight": #{$title-weight},
+      "title-line-height": #{$title-line-height},
+      "title-strong-color": #{$title-strong-color},
+      "title-strong-weight": #{$title-strong-weight},
+      "title-sub-size": #{$title-sub-size},
+      "title-sup-size": #{$title-sup-size},
+      "subtitle-color": #{$subtitle-color},
+      "subtitle-family": #{$subtitle-family},
+      "subtitle-size": #{$subtitle-size},
+      "subtitle-weight": #{$subtitle-weight},
+      "subtitle-line-height": #{$subtitle-line-height},
+      "subtitle-strong-color": #{$subtitle-strong-color},
+      "subtitle-strong-weight": #{$subtitle-strong-weight},
+    )
+  );
+}
+
+.#{iv.$class-prefix}title,
+.#{iv.$class-prefix}subtitle {
+  @extend %block;
+  word-break: break-word;
+
+  em,
+  span {
+    font-weight: inherit;
+  }
+
+  sub {
+    font-size: cv.getVar("title-sub-size");
+  }
+
+  sup {
+    font-size: cv.getVar("title-sup-size");
+  }
+
+  .#{iv.$class-prefix}tag {
+    vertical-align: middle;
+  }
+}
+
+.#{iv.$class-prefix}title {
+  color: cv.getVar("title-color");
+  font-size: cv.getVar("title-size");
+  font-weight: cv.getVar("title-weight");
+  line-height: cv.getVar("title-line-height");
+
+  @if $title-family {
+    font-family: cv.getVar("title-family");
+  }
+
+  strong {
+    color: cv.getVar("title-strong-color");
+    font-weight: cv.getVar("title-strong-weight");
+  }
+
+  &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}subtitle) {
+    margin-bottom: 0;
+  }
+
+  // Sizes
+  @each $size in dv.$sizes {
+    $i: index(dv.$sizes, $size);
+
+    &.#{iv.$class-prefix}is-#{$i} {
+      font-size: $size;
+    }
+  }
+}
+
+.#{iv.$class-prefix}subtitle {
+  color: cv.getVar("subtitle-color");
+  font-size: cv.getVar("subtitle-size");
+  font-weight: cv.getVar("subtitle-weight");
+  line-height: cv.getVar("subtitle-line-height");
+
+  @if $subtitle-family {
+    font-family: cv.getVar("subtitle-family");
+  }
+
+  strong {
+    color: cv.getVar("subtitle-strong-color");
+    font-weight: cv.getVar("subtitle-strong-weight");
+  }
+
+  &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}title) {
+    margin-bottom: 0;
+  }
+
+  // Sizes
+  @each $size in dv.$sizes {
+    $i: index(dv.$sizes, $size);
+
+    &.#{iv.$class-prefix}is-#{$i} {
+      font-size: $size;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+/* Bulma Form */
+@charset "utf-8";
+
+@forward "shared";
+@forward "input-textarea";
+@forward "checkbox-radio";
+@forward "select";
+@forward "file";
+@forward "tools";

data/app/assets/stylesheets/sass/form/checkbox-radio.scss

@@ -0,0 +1,32 @@
+@use "shared";
+@use "../utilities/initial-variables" as iv;
+
+%checkbox-radio {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1.25;
+  position: relative;
+
+  input {
+    cursor: pointer;
+  }
+
+  &[disabled],
+  fieldset[disabled] &,
+  input[disabled] {
+    color: shared.$input-disabled-color;
+    cursor: not-allowed;
+  }
+}
+
+.#{iv.$class-prefix}checkbox {
+  @extend %checkbox-radio;
+}
+
+.#{iv.$class-prefix}radio {
+  @extend %checkbox-radio;
+
+  & + .#{iv.$class-prefix}radio {
+    margin-inline-start: 0.5em;
+  }
+}