bulma-rails 0.9.4 → 1.0.1

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

@@ -0,0 +1,172 @@
+@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;
+
+$form-colors: dv.$colors !default;
+
+$input-h: #{cv.getVar("scheme-h")} !default;
+$input-s: #{cv.getVar("scheme-s")} !default;
+$input-l: #{cv.getVar("scheme-main-l")} !default;
+$input-border-l: cv.getVar("border-l") !default;
+$input-border-l-delta: 0% !default;
+$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
+$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
+$input-color-l: cv.getVar("text-strong-l") !default;
+$input-background-l: cv.getVar("scheme-main-l") !default;
+$input-background-l-delta: 0% !default;
+$input-height: cv.getVar("control-height") !default;
+$input-shadow: inset 0 0.0625em 0.125em
+  hsla(
+    #{cv.getVar("scheme-h")},
+    #{cv.getVar("scheme-s")},
+    #{cv.getVar("scheme-invert-l")},
+    0.05
+  ) !default;
+$input-placeholder-color: hsla(
+  #{cv.getVar("text-h")},
+  #{cv.getVar("text-s")},
+  #{cv.getVar("text-strong-l")},
+  0.3
+) !default;
+
+$input-focus-h: cv.getVar("focus-h") !default;
+$input-focus-s: cv.getVar("focus-s") !default;
+$input-focus-l: cv.getVar("focus-l") !default;
+$input-focus-shadow-size: cv.getVar("focus-shadow-size") !default;
+$input-focus-shadow-alpha: cv.getVar("focus-shadow-alpha") !default;
+
+$input-disabled-color: cv.getVar("text-weak") !default;
+$input-disabled-background-color: cv.getVar("background") !default;
+$input-disabled-border-color: cv.getVar("background") !default;
+$input-disabled-placeholder-color: hsla(
+  #{cv.getVar("text-h")},
+  #{cv.getVar("text-s")},
+  #{cv.getVar("text-weak-l")},
+  0.3
+) !default;
+
+$input-arrow: cv.getVar("link") !default;
+
+$input-icon-color: cv.getVar("text-light") !default;
+$input-icon-hover-color: cv.getVar("text-weak") !default;
+$input-icon-focus-color: cv.getVar("link") !default;
+
+$input-radius: cv.getVar("radius") !default;
+
+.#{iv.$class-prefix}control,
+.#{iv.$class-prefix}input,
+.#{iv.$class-prefix}textarea,
+.#{iv.$class-prefix}select {
+  @include cv.register-vars(
+    (
+      "input-h": #{$input-h},
+      "input-s": #{$input-s},
+      "input-l": #{$input-l},
+      "input-border-l": #{$input-border-l},
+      "input-border-l-delta": #{$input-border-l-delta},
+      "input-hover-border-l-delta": #{$input-hover-border-l-delta},
+      "input-active-border-l-delta": #{$input-active-border-l-delta},
+      "input-focus-h": #{$input-focus-h},
+      "input-focus-s": #{$input-focus-s},
+      "input-focus-l": #{$input-focus-l},
+      "input-focus-shadow-size": #{$input-focus-shadow-size},
+      "input-focus-shadow-alpha": #{$input-focus-shadow-alpha},
+      "input-color-l": #{$input-color-l},
+      "input-background-l": #{$input-background-l},
+      "input-background-l-delta": #{$input-background-l-delta},
+      "input-height": #{$input-height},
+      "input-shadow": #{$input-shadow},
+      "input-placeholder-color": #{$input-placeholder-color},
+      "input-disabled-color": #{$input-disabled-color},
+      "input-disabled-background-color": #{$input-disabled-background-color},
+      "input-disabled-border-color": #{$input-disabled-border-color},
+      "input-disabled-placeholder-color": #{$input-disabled-placeholder-color},
+      "input-arrow": #{$input-arrow},
+      "input-icon-color": #{$input-icon-color},
+      "input-icon-hover-color": #{$input-icon-hover-color},
+      "input-icon-focus-color": #{$input-icon-focus-color},
+      "input-radius": #{$input-radius},
+    )
+  );
+}
+
+@mixin input {
+  @extend %control;
+  background-color: hsl(
+    #{cv.getVar("input-h")},
+    #{cv.getVar("input-s")},
+    calc(
+      #{cv.getVar("input-background-l")} + #{cv.getVar(
+          "input-background-l-delta"
+        )}
+    )
+  );
+  border-color: hsl(
+    cv.getVar("input-h"),
+    cv.getVar("input-s"),
+    calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
+  );
+  border-radius: cv.getVar("input-radius");
+  color: hsl(
+    #{cv.getVar("input-h")},
+    #{cv.getVar("input-s")},
+    #{cv.getVar("input-color-l")}
+  );
+
+  @include mx.placeholder {
+    color: cv.getVar("input-placeholder-color");
+  }
+
+  &:hover,
+  &.#{iv.$class-prefix}is-hovered {
+    @include cv.register-vars(
+      (
+        "input-border-l-delta": #{cv.getVar("input-hover-border-l-delta")},
+      )
+    );
+  }
+
+  &:active,
+  &.#{iv.$class-prefix}is-active {
+    @include cv.register-vars(
+      (
+        "input-border-l-delta": #{cv.getVar("input-active-border-l-delta")},
+      )
+    );
+  }
+
+  &:focus,
+  &:focus-within,
+  &.#{iv.$class-prefix}is-focused {
+    border-color: hsl(
+      cv.getVar("input-focus-h"),
+      cv.getVar("input-focus-s"),
+      cv.getVar("input-focus-l")
+    );
+    box-shadow: cv.getVar("input-focus-shadow-size")
+      hsla(
+        cv.getVar("input-focus-h"),
+        cv.getVar("input-focus-s"),
+        cv.getVar("input-focus-l"),
+        cv.getVar("input-focus-shadow-alpha")
+      );
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: cv.getVar("input-disabled-background-color");
+    border-color: cv.getVar("input-disabled-border-color");
+    box-shadow: none;
+    color: cv.getVar("input-disabled-color");
+
+    @include mx.placeholder {
+      color: cv.getVar("input-disabled-placeholder-color");
+    }
+  }
+}
+
+%input {
+  @include input;
+}

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

@@ -0,0 +1,341 @@
+@use "shared";
+@use "../utilities/controls";
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$label-color: cv.getVar("text-strong") !default;
+$label-weight: cv.getVar("weight-semibold") !default;
+
+$help-size: cv.getVar("size-small") !default;
+
+$label-colors: shared.$form-colors !default;
+
+.#{iv.$class-prefix}label {
+  color: $label-color;
+  display: block;
+  font-size: cv.getVar("size-normal");
+  font-weight: $label-weight;
+
+  &:not(:last-child) {
+    margin-bottom: 0.5em;
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    font-size: cv.getVar("size-small");
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    font-size: cv.getVar("size-medium");
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    font-size: cv.getVar("size-large");
+  }
+}
+
+.#{iv.$class-prefix}help {
+  display: block;
+  font-size: $help-size;
+  margin-top: 0.25rem;
+
+  @each $name, $pair in $label-colors {
+    &.#{iv.$class-prefix}is-#{$name} {
+      color: hsl(
+        #{cv.getVar($name, "", "-h")},
+        #{cv.getVar($name, "", "-s")},
+        #{cv.getVar($name, "", "-on-scheme-l")}
+      );
+    }
+  }
+}
+
+// Containers
+
+.#{iv.$class-prefix}field {
+  @include cv.register-vars(
+    (
+      "block-spacing": 0.75rem,
+    )
+  );
+
+  @extend %block;
+
+  // Modifiers
+  &.#{iv.$class-prefix}has-addons {
+    display: flex;
+    justify-content: flex-start;
+
+    .#{iv.$class-prefix}control {
+      &:not(:last-child) {
+        margin-inline-end: -1px;
+      }
+
+      &:not(:first-child):not(:last-child) {
+        .#{iv.$class-prefix}button,
+        .#{iv.$class-prefix}input,
+        .#{iv.$class-prefix}select select {
+          border-radius: 0;
+        }
+      }
+
+      &:first-child:not(:only-child) {
+        .#{iv.$class-prefix}button,
+        .#{iv.$class-prefix}input,
+        .#{iv.$class-prefix}select select {
+          // @include ltr {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+          // }
+        }
+      }
+
+      &:last-child:not(:only-child) {
+        .#{iv.$class-prefix}button,
+        .#{iv.$class-prefix}input,
+        .#{iv.$class-prefix}select select {
+          // @include ltr {
+          border-bottom-left-radius: 0;
+          border-top-left-radius: 0;
+          // }
+        }
+      }
+
+      .#{iv.$class-prefix}button,
+      .#{iv.$class-prefix}input,
+      .#{iv.$class-prefix}select select {
+        &:not([disabled]) {
+          &:hover,
+          &.#{iv.$class-prefix}is-hovered {
+            z-index: 2;
+          }
+
+          &:focus,
+          &.#{iv.$class-prefix}is-focused,
+          &:active,
+          &.#{iv.$class-prefix}is-active {
+            z-index: 3;
+
+            &:hover {
+              z-index: 4;
+            }
+          }
+        }
+      }
+
+      &.#{iv.$class-prefix}is-expanded {
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+    }
+
+    &.#{iv.$class-prefix}has-addons-centered {
+      justify-content: center;
+    }
+
+    &.#{iv.$class-prefix}has-addons-right {
+      justify-content: flex-end;
+    }
+
+    &.#{iv.$class-prefix}has-addons-fullwidth {
+      .#{iv.$class-prefix}control {
+        flex-grow: 1;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-grouped {
+    display: flex;
+    gap: 0.75rem;
+    justify-content: flex-start;
+
+    & > .#{iv.$class-prefix}control {
+      flex-shrink: 0;
+
+      &.#{iv.$class-prefix}is-expanded {
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+    }
+
+    &.#{iv.$class-prefix}is-grouped-centered {
+      justify-content: center;
+    }
+
+    &.#{iv.$class-prefix}is-grouped-right {
+      justify-content: flex-end;
+    }
+
+    &.#{iv.$class-prefix}is-grouped-multiline {
+      flex-wrap: wrap;
+    }
+  }
+
+  &.#{iv.$class-prefix}is-horizontal {
+    @include mx.tablet {
+      display: flex;
+    }
+  }
+}
+
+.#{iv.$class-prefix}field-label {
+  .#{iv.$class-prefix}label {
+    font-size: inherit;
+  }
+
+  @include mx.mobile {
+    margin-bottom: 0.5rem;
+  }
+
+  @include mx.tablet {
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin-inline-end: 1.5rem;
+    text-align: right;
+
+    &.#{iv.$class-prefix}is-small {
+      font-size: cv.getVar("size-small");
+      padding-top: 0.375em;
+    }
+
+    &.#{iv.$class-prefix}is-normal {
+      padding-top: 0.375em;
+    }
+
+    &.#{iv.$class-prefix}is-medium {
+      font-size: cv.getVar("size-medium");
+      padding-top: 0.375em;
+    }
+
+    &.#{iv.$class-prefix}is-large {
+      font-size: cv.getVar("size-large");
+      padding-top: 0.375em;
+    }
+  }
+}
+
+.#{iv.$class-prefix}field-body {
+  .#{iv.$class-prefix}field .#{iv.$class-prefix}field {
+    margin-bottom: 0;
+  }
+
+  @include mx.tablet {
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 5;
+    flex-shrink: 1;
+
+    .#{iv.$class-prefix}field {
+      margin-bottom: 0;
+    }
+
+    & > .#{iv.$class-prefix}field {
+      flex-shrink: 1;
+
+      &:not(.#{iv.$class-prefix}is-narrow) {
+        flex-grow: 1;
+      }
+
+      &:not(:last-child) {
+        margin-inline-end: 0.75rem;
+      }
+    }
+  }
+}
+
+.#{iv.$class-prefix}control {
+  box-sizing: border-box;
+  clear: both;
+  font-size: cv.getVar("size-normal");
+  position: relative;
+  text-align: inherit;
+
+  // Modifiers
+  &.#{iv.$class-prefix}has-icons-left,
+  &.#{iv.$class-prefix}has-icons-right {
+    .#{iv.$class-prefix}input,
+    .#{iv.$class-prefix}select {
+      &:hover {
+        & ~ .#{iv.$class-prefix}icon {
+          color: cv.getVar("input-icon-hover-color");
+        }
+      }
+
+      &:focus {
+        & ~ .#{iv.$class-prefix}icon {
+          color: cv.getVar("input-icon-focus-color");
+        }
+      }
+
+      &.#{iv.$class-prefix}is-small ~ .#{iv.$class-prefix}icon {
+        font-size: cv.getVar("size-small");
+      }
+
+      &.#{iv.$class-prefix}is-medium ~ .#{iv.$class-prefix}icon {
+        font-size: cv.getVar("size-medium");
+      }
+
+      &.#{iv.$class-prefix}is-large ~ .#{iv.$class-prefix}icon {
+        font-size: cv.getVar("size-large");
+      }
+    }
+
+    .#{iv.$class-prefix}icon {
+      color: cv.getVar("input-icon-color");
+      height: cv.getVar("input-height");
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      width: cv.getVar("input-height");
+      z-index: 4;
+    }
+  }
+
+  &.#{iv.$class-prefix}has-icons-left {
+    .#{iv.$class-prefix}input,
+    .#{iv.$class-prefix}select select {
+      padding-left: cv.getVar("input-height");
+    }
+
+    .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left {
+      left: 0;
+    }
+  }
+
+  &.#{iv.$class-prefix}has-icons-right {
+    .#{iv.$class-prefix}input,
+    .#{iv.$class-prefix}select select {
+      padding-right: cv.getVar("input-height");
+    }
+
+    .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right {
+      right: 0;
+    }
+  }
+
+  &.#{iv.$class-prefix}is-loading {
+    &::after {
+      @extend %loader;
+      inset-inline-end: 0.75em;
+      position: absolute !important;
+      top: 0.75em;
+      z-index: 4;
+    }
+
+    &.#{iv.$class-prefix}is-small:after {
+      font-size: cv.getVar("size-small");
+    }
+
+    &.#{iv.$class-prefix}is-medium:after {
+      font-size: cv.getVar("size-medium");
+    }
+
+    &.#{iv.$class-prefix}is-large:after {
+      font-size: cv.getVar("size-large");
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+/* Bulma Grid */
+@charset "utf-8";
+
+@forward "columns";
+@forward "grid";