bulma-rails 0.9.0 → 1.0.0

data/app/assets/stylesheets/sass/layout/hero.scss

@@ -0,0 +1,270 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/extends";
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+$hero-body-padding: 3rem 1.5rem !default;
+$hero-body-padding-tablet: 3rem 3rem !default;
+$hero-body-padding-small: 1.5rem !default;
+$hero-body-padding-medium: 9rem 4.5rem !default;
+$hero-body-padding-large: 18rem 6rem !default;
+
+$hero-gradient-h-offset: 5deg;
+$hero-gradient-s-offset: 10%;
+$hero-gradient-l-offset: 5%;
+
+$hero-colors: dv.$colors !default;
+
+// Main container
+.#{iv.$class-prefix}hero {
+  @include cv.register-vars(
+    (
+      "hero-body-padding": #{$hero-body-padding},
+      "hero-body-padding-tablet": #{$hero-body-padding-tablet},
+      "hero-body-padding-small": #{$hero-body-padding-small},
+      "hero-body-padding-medium": #{$hero-body-padding-medium},
+      "hero-body-padding-large": #{$hero-body-padding-large},
+    )
+  );
+}
+
+.#{iv.$class-prefix}hero {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .#{iv.$class-prefix}navbar {
+    background: none;
+  }
+
+  .#{iv.$class-prefix}tabs {
+    ul {
+      border-bottom: none;
+    }
+  }
+
+  // Colors
+  @each $name, $pair in $hero-colors {
+    &.#{iv.$class-prefix}is-#{$name} {
+      @include cv.register-vars(
+        (
+          "hero-h": #{cv.getVar($name, "", "-h")},
+          "hero-s": #{cv.getVar($name, "", "-s")},
+          "hero-background-l": #{cv.getVar($name, "", "-l")},
+          "hero-color-l": #{cv.getVar($name, "", "-invert-l")},
+        )
+      );
+
+      $background-color: hsl(
+        #{cv.getVar("hero-h")},
+        #{cv.getVar("hero-s")},
+        #{cv.getVar("hero-background-l")}
+      );
+      $color: hsl(
+        #{cv.getVar("hero-h")},
+        #{cv.getVar("hero-s")},
+        #{cv.getVar("hero-color-l")}
+      );
+
+      background-color: hsl(
+        #{cv.getVar("hero-h")},
+        #{cv.getVar("hero-s")},
+        #{cv.getVar("hero-background-l")}
+      );
+      color: $color;
+
+      .#{iv.$class-prefix}navbar {
+        @include cv.register-vars(
+          (
+            "navbar-item-color": $color,
+            "navbar-item-hover-background-color": $color,
+            "navbar-item-hover-color": $background-color,
+            "navbar-item-active-background-color": $color,
+            "navbar-item-active-color": $background-color,
+          )
+        );
+      }
+
+      .#{iv.$class-prefix}tabs {
+        @include cv.register-vars(
+          (
+            "tabs-link-color": $color,
+            "tabs-boxed-link-active-background-color": $color,
+            "tabs-boxed-link-active-border-color": $background-color,
+            "tabs-link-active-color": $background-color,
+          )
+        );
+      }
+
+      .#{iv.$class-prefix}subtitle {
+        @include cv.register-vars(
+          (
+            "subtitle-color": $color,
+            "subtitle-strong-color": $color,
+          )
+        );
+      }
+
+      .#{iv.$class-prefix}title {
+        @include cv.register-vars(
+          (
+            "title-color": $color,
+            "title-strong-color": $color,
+          )
+        );
+      }
+
+      // Modifiers
+      &.#{iv.$class-prefix}is-bold {
+        $gradient-top-left: hsl(
+          calc(#{cv.getVar("hero-h")} - $hero-gradient-h-offset),
+          calc(#{cv.getVar("hero-s")} + $hero-gradient-s-offset),
+          calc(#{cv.getVar("hero-background-l")} + $hero-gradient-l-offset)
+        );
+        $gradient-middle: hsl(
+          #{cv.getVar("hero-h")},
+          #{cv.getVar("hero-s")},
+          #{cv.getVar("hero-background-l")}
+        );
+        $gradient-bottom-right: hsl(
+          calc(#{cv.getVar("hero-h")} + $hero-gradient-h-offset),
+          calc(#{cv.getVar("hero-s")} - $hero-gradient-s-offset),
+          calc(#{cv.getVar("hero-background-l")} - $hero-gradient-l-offset)
+        );
+
+        background-image: linear-gradient(
+          141deg,
+          $gradient-top-left 0%,
+          $gradient-middle 71%,
+          $gradient-bottom-right 100%
+        );
+
+        @include mx.mobile {
+          .#{iv.$class-prefix}navbar-menu {
+            background-image: linear-gradient(
+              141deg,
+              $gradient-top-left 0%,
+              $color 71%,
+              $gradient-bottom-right 100%
+            );
+          }
+        }
+      }
+    }
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    .#{iv.$class-prefix}hero-body {
+      padding: cv.getVar("hero-body-padding-small");
+    }
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    @include mx.tablet {
+      .#{iv.$class-prefix}hero-body {
+        padding: cv.getVar("hero-body-padding-medium");
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    @include mx.tablet {
+      .#{iv.$class-prefix}hero-body {
+        padding: cv.getVar("hero-body-padding-large");
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-halfheight,
+  &.#{iv.$class-prefix}is-fullheight,
+  &.#{iv.$class-prefix}is-fullheight-with-navbar {
+    .#{iv.$class-prefix}hero-body {
+      align-items: center;
+      display: flex;
+
+      & > .#{iv.$class-prefix}container {
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+    }
+  }
+
+  &.#{iv.$class-prefix}is-halfheight {
+    min-height: 50vh;
+  }
+
+  &.#{iv.$class-prefix}is-fullheight {
+    min-height: 100vh;
+  }
+}
+
+// Components
+
+.#{iv.$class-prefix}hero-video {
+  @extend %overlay;
+  overflow: hidden;
+
+  video {
+    left: 50%;
+    min-height: 100%;
+    min-width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+  }
+
+  // Modifiers
+  &.#{iv.$class-prefix}is-transparent {
+    opacity: 0.3;
+  }
+
+  // Responsiveness
+  @include mx.mobile {
+    display: none;
+  }
+}
+
+.#{iv.$class-prefix}hero-buttons {
+  margin-top: 1.5rem;
+
+  // Responsiveness
+  @include mx.mobile {
+    .#{iv.$class-prefix}button {
+      display: flex;
+
+      &:not(:last-child) {
+        margin-bottom: 0.75rem;
+      }
+    }
+  }
+
+  @include mx.tablet {
+    display: flex;
+    justify-content: center;
+
+    .#{iv.$class-prefix}button:not(:last-child) {
+      margin-inline-end: 1.5rem;
+    }
+  }
+}
+
+// Containers
+
+.#{iv.$class-prefix}hero-head,
+.#{iv.$class-prefix}hero-foot {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.#{iv.$class-prefix}hero-body {
+  flex-grow: 1;
+  flex-shrink: 0;
+  padding: cv.getVar("hero-body-padding");
+
+  @include mx.tablet {
+    padding: cv.getVar("hero-body-padding-tablet");
+  }
+}

data/app/assets/stylesheets/sass/layout/level.scss

@@ -0,0 +1,107 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$level-item-spacing: calc(#{cv.getVar("block-spacing")} * 0.5) !default;
+
+.#{iv.$class-prefix}level {
+  @extend %block;
+  @include cv.register-var("level-item-spacing", #{$level-item-spacing});
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: cv.getVar("level-item-spacing");
+
+  code {
+    border-radius: cv.getVar("radius");
+  }
+
+  img {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  // Modifiers
+  &.#{iv.$class-prefix}is-mobile {
+    display: flex;
+    flex-direction: row;
+
+    .#{iv.$class-prefix}level-left,
+    .#{iv.$class-prefix}level-right {
+      display: flex;
+    }
+
+    .#{iv.$class-prefix}level-item {
+      &:not(.#{iv.$class-prefix}is-narrow) {
+        flex-grow: 1;
+      }
+    }
+  }
+
+  // Responsiveness
+  @include mx.tablet {
+    display: flex;
+    flex-direction: row;
+
+    & > .#{iv.$class-prefix}level-item {
+      &:not(.#{iv.$class-prefix}is-narrow) {
+        flex-grow: 1;
+      }
+    }
+  }
+}
+
+.#{iv.$class-prefix}level-item {
+  align-items: center;
+  display: flex;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: center;
+
+  .#{iv.$class-prefix}title,
+  .#{iv.$class-prefix}subtitle {
+    margin-bottom: 0;
+  }
+}
+
+.#{iv.$class-prefix}level-left,
+.#{iv.$class-prefix}level-right {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  gap: $level-item-spacing;
+
+  .#{iv.$class-prefix}level-item {
+    // Modifiers
+    &.#{iv.$class-prefix}is-flexible {
+      flex-grow: 1;
+    }
+  }
+}
+
+.#{iv.$class-prefix}level-left {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  // Responsiveness
+  @include mx.tablet {
+    flex-direction: row;
+  }
+}
+
+.#{iv.$class-prefix}level-right {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  // Responsiveness
+  @include mx.tablet {
+    flex-direction: row;
+  }
+}

data/app/assets/stylesheets/sass/layout/media.scss

@@ -0,0 +1,106 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$media-border-color: hsla(
+  #{cv.getVar("scheme-h")},
+  #{cv.getVar("scheme-s")},
+  #{cv.getVar("border-l")},
+  0.5
+) !default;
+$media-border-size: 1px !default;
+$media-spacing: 1rem !default;
+$media-spacing-large: 1.5rem !default;
+$media-content-spacing: 0.75rem !default;
+$media-level-1-spacing: 0.75rem !default;
+$media-level-1-content-spacing: 0.5rem !default;
+$media-level-2-spacing: 0.5rem !default;
+
+.#{iv.$class-prefix}media {
+  @extend %block;
+  @include cv.register-vars(
+    (
+      "media-border-color": #{$media-border-color},
+      "media-border-size": #{$media-border-size},
+      "media-spacing": #{$media-spacing},
+      "media-spacing-large": #{$media-spacing-large},
+      "media-content-spacing": #{$media-content-spacing},
+      "media-level-1-spacing": #{$media-level-1-spacing},
+      "media-level-1-content-spacing": #{$media-level-1-content-spacing},
+      "media-level-2-spacing": #{$media-level-2-spacing},
+    )
+  );
+  align-items: flex-start;
+  display: flex;
+  text-align: inherit;
+
+  .#{iv.$class-prefix}content:not(:last-child) {
+    margin-bottom: cv.getVar("media-content-spacing");
+  }
+
+  .#{iv.$class-prefix}media {
+    border-top-color: cv.getVar("media-border-color");
+    border-top-style: solid;
+    border-top-width: cv.getVar("media-border-size");
+    display: flex;
+    padding-top: cv.getVar("media-level-1-spacing");
+
+    .#{iv.$class-prefix}content:not(:last-child),
+    .#{iv.$class-prefix}control:not(:last-child) {
+      margin-bottom: cv.getVar("media-level-1-content-spacing");
+    }
+
+    .#{iv.$class-prefix}media {
+      padding-top: cv.getVar("media-level-2-spacing");
+
+      & + .#{iv.$class-prefix}media {
+        margin-top: cv.getVar("media-level-2-spacing");
+      }
+    }
+  }
+
+  & + .#{iv.$class-prefix}media {
+    border-top-color: cv.getVar("media-border-color");
+    border-top-style: solid;
+    border-top-width: cv.getVar("media-border-size");
+    margin-top: cv.getVar("media-spacing");
+    padding-top: cv.getVar("media-spacing");
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-large {
+    & + .#{iv.$class-prefix}media {
+      margin-top: cv.getVar("media-spacing-large");
+      padding-top: cv.getVar("media-spacing-large");
+    }
+  }
+}
+
+.#{iv.$class-prefix}media-left,
+.#{iv.$class-prefix}media-right {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.#{iv.$class-prefix}media-left {
+  margin-inline-end: cv.getVar("media-spacing");
+}
+
+.#{iv.$class-prefix}media-right {
+  margin-inline-start: cv.getVar("media-spacing");
+}
+
+.#{iv.$class-prefix}media-content {
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-align: inherit;
+}
+
+@include mx.mobile {
+  .#{iv.$class-prefix}media-content {
+    overflow-x: auto;
+  }
+}

data/app/assets/stylesheets/sass/layout/section.scss

@@ -0,0 +1,34 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+$section-padding: 3rem 1.5rem !default;
+$section-padding-desktop: 3rem 3rem !default;
+$section-padding-medium: 9rem 4.5rem !default;
+$section-padding-large: 18rem 6rem !default;
+
+.#{iv.$class-prefix}section {
+  @include cv.register-vars(
+    (
+      "section-padding": #{$section-padding},
+      "section-padding-desktop": #{$section-padding-desktop},
+      "section-padding-medium": #{$section-padding-medium},
+      "section-padding-large": #{$section-padding-large},
+    )
+  );
+  padding: cv.getVar("section-padding");
+
+  // Responsiveness
+  @include mx.desktop {
+    padding: cv.getVar("section-padding-desktop");
+
+    // Sizes
+    &.#{iv.$class-prefix}is-medium {
+      padding: cv.getVar("section-padding-medium");
+    }
+
+    &.#{iv.$class-prefix}is-large {
+      padding: cv.getVar("section-padding-large");
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+/* Bulma Themes */
+@charset "utf-8";
+
+@use "../utilities/css-variables" as cv;
+
+@use "light";
+@use "dark";
+@use "setup";
+
+:root {
+  @include light.light-theme;
+  @include setup.setup-theme;
+}
+
+// prefers-color-scheme: light
+@include cv.system-theme($name: "light") {
+  @include light.light-theme;
+}
+
+// prefers-color-scheme: dark
+@include cv.system-theme($name: "dark") {
+  @include dark.dark-theme;
+}
+
+// :root, [data-theme=light], .theme-light
+@include cv.bulma-theme($name: "light") {
+  @include light.light-theme;
+  @include setup.setup-theme;
+}
+
+// [data-theme=dark], .theme-dark
+@include cv.bulma-theme($name: "dark") {
+  @include dark.dark-theme;
+  @include setup.setup-theme;
+}

data/app/assets/stylesheets/sass/themes/dark.scss

@@ -0,0 +1,56 @@
+@use "sass:list";
+
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "setup";
+
+// The main lightness of this theme
+$scheme-main-l: 9%;
+$background-l: 14%;
+$text-l: 71%;
+
+// The main scheme color, used to make calculations
+$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
+$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l);
+$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
+
+@mixin dark-theme {
+  @each $name, $color in dv.$colors {
+    $base: $color;
+
+    @if type-of($color == "list") {
+      $base: list.nth($color, 1);
+    }
+
+    @include cv.generate-on-scheme-colors($name, $base, $scheme-main);
+  }
+
+  @include cv.register-vars(
+    (
+      "scheme-brightness": "dark",
+      "scheme-main-l": $scheme-main-l,
+      "scheme-main-bis-l": $scheme-main-l + 2%,
+      "scheme-main-ter-l": $scheme-main-l + 4%,
+      "soft-l": iv.$dark-l,
+      "bold-l": iv.$light-l,
+      "soft-invert-l": iv.$light-l,
+      "bold-invert-l": iv.$dark-l,
+      "background-l": $background-l,
+      "border-weak-l": 21%,
+      "border-l": 24%,
+      "text-weak-l": 53%,
+      "text-l": $text-l,
+      "text-strong-l": 93%,
+      "text-title-l": 100%,
+      "hover-background-l-delta": 5%,
+      "active-background-l-delta": 10%,
+      "hover-border-l-delta": 10%,
+      "active-border-l-delta": 20%,
+      "hover-color-l-delta": 5%,
+      "active-color-l-delta": 10%,
+    )
+  );
+
+  @include cv.register-hsl("shadow", white);
+}