bulma-rails 0.9.0 → 1.0.0

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

@@ -0,0 +1,24 @@
+@use "sass:math";
+@use "sass:string";
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}gapless {
+  gap: 0 !important;
+}
+
+$gaps: "gap", "column-gap", "row-gap";
+$gap-base: 0.5rem;
+
+@each $gap in $gaps {
+  @for $i from 0 through 8 {
+    .#{iv.$helpers-prefix}#{$gap}-#{$i} {
+      #{$gap}: ($gap-base * $i) !important;
+    }
+
+    @if $i < 8 {
+      .#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
+        #{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+@use "../utilities/extends";
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}radiusless {
+  border-radius: 0 !important;
+}
+
+.#{iv.$helpers-prefix}shadowless {
+  box-shadow: none !important;
+}
+
+.#{iv.$helpers-prefix}clickable {
+  cursor: pointer !important;
+  pointer-events: all !important;
+}
+
+.#{iv.$helpers-prefix}unselectable {
+  @extend %unselectable;
+}

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

@@ -0,0 +1,21 @@
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}clipped {
+  overflow: hidden !important;
+}
+
+$overflows: auto clip hidden scroll visible;
+
+@each $overflow in $overflows {
+  .#{iv.$helpers-prefix}overflow-#{$overflow} {
+    overflow: $overflow !important;
+  }
+
+  .#{iv.$helpers-prefix}overflow-x-#{$overflow} {
+    overflow-x: $overflow !important;
+  }
+
+  .#{iv.$helpers-prefix}overflow-y-#{$overflow} {
+    overflow-y: $overflow !important;
+  }
+}

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

@@ -0,0 +1,19 @@
+@use "../utilities/extends";
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$helpers-prefix}overlay,
+.#{iv.$helpers-prefix}overlay {
+  @extend %overlay;
+}
+
+.#{iv.$helpers-prefix}relative {
+  position: relative !important;
+}
+
+$positions: absolute fixed relative static sticky;
+
+@each $position in $positions {
+  .#{iv.$helpers-prefix}position-#{$position} {
+    position: $position !important;
+  }
+}

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

@@ -0,0 +1,64 @@
+@use "../utilities/initial-variables" as iv;
+
+.marginless {
+  margin: 0 !important;
+}
+
+.paddingless {
+  padding: 0 !important;
+}
+
+$spacing-shortcuts: (
+  "margin": "m",
+  "padding": "p",
+) !default;
+$spacing-directions: (
+  "top": "t",
+  "right": "r",
+  "bottom": "b",
+  "left": "l",
+) !default;
+$spacing-horizontal: "x" !default;
+$spacing-vertical: "y" !default;
+$spacing-values: (
+  "0": 0,
+  "1": 0.25rem,
+  "2": 0.5rem,
+  "3": 0.75rem,
+  "4": 1rem,
+  "5": 1.5rem,
+  "6": 3rem,
+  "auto": auto,
+) !default;
+
+@each $property, $shortcut in $spacing-shortcuts {
+  @each $name, $value in $spacing-values {
+    // All directions
+    .#{$shortcut}-#{$name} {
+      #{$property}: $value !important;
+    }
+
+    // Cardinal directions
+    @each $direction, $suffix in $spacing-directions {
+      .#{$shortcut}#{$suffix}-#{$name} {
+        #{$property}-#{$direction}: $value !important;
+      }
+    }
+
+    // Horizontal axis
+    @if $spacing-horizontal != null {
+      .#{$shortcut}#{$spacing-horizontal}-#{$name} {
+        #{$property}-left: $value !important;
+        #{$property}-right: $value !important;
+      }
+    }
+
+    // Vertical axis
+    @if $spacing-vertical != null {
+      .#{$shortcut}#{$spacing-vertical}-#{$name} {
+        #{$property}-top: $value !important;
+        #{$property}-bottom: $value !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,168 @@
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+@mixin typography-size($target: "") {
+  @each $size in dv.$sizes {
+    $i: index(dv.$sizes, $size);
+
+    .#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
+      font-size: $size !important;
+    }
+  }
+}
+
+@include typography-size;
+
+@include mx.mobile {
+  @include typography-size("mobile");
+}
+
+@include mx.tablet {
+  @include typography-size("tablet");
+}
+
+@include mx.touch {
+  @include typography-size("touch");
+}
+
+@include mx.desktop {
+  @include typography-size("desktop");
+}
+
+@include mx.widescreen {
+  @include typography-size("widescreen");
+}
+
+@include mx.fullhd {
+  @include typography-size("fullhd");
+}
+
+$alignments: (
+  "centered": "center",
+  "justified": "justify",
+  "left": "left",
+  "right": "right",
+);
+
+@each $alignment, $text-align in $alignments {
+  .#{iv.$helpers-has-prefix}text-#{$alignment} {
+    text-align: #{$text-align} !important;
+  }
+}
+
+@each $alignment, $text-align in $alignments {
+  @include mx.mobile {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.tablet {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.tablet-only {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.touch {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.desktop {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.desktop-only {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.widescreen {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.widescreen-only {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+  @include mx.fullhd {
+    .#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
+      text-align: #{$text-align} !important;
+    }
+  }
+}
+
+.#{iv.$helpers-prefix}capitalized {
+  text-transform: capitalize !important;
+}
+
+.#{iv.$helpers-prefix}lowercase {
+  text-transform: lowercase !important;
+}
+
+.#{iv.$helpers-prefix}uppercase {
+  text-transform: uppercase !important;
+}
+
+.#{iv.$helpers-prefix}italic {
+  font-style: italic !important;
+}
+
+.#{iv.$helpers-prefix}underlined {
+  text-decoration: underline !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-light {
+  font-weight: iv.$weight-light !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-normal {
+  font-weight: iv.$weight-normal !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-medium {
+  font-weight: iv.$weight-medium !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-semibold {
+  font-weight: iv.$weight-semibold !important;
+}
+
+.#{iv.$helpers-has-prefix}text-weight-bold {
+  font-weight: iv.$weight-bold !important;
+}
+
+.#{iv.$helpers-prefix}family-primary {
+  font-family: dv.$family-primary !important;
+}
+
+.#{iv.$helpers-prefix}family-secondary {
+  font-family: dv.$family-secondary !important;
+}
+
+.#{iv.$helpers-prefix}family-sans-serif {
+  font-family: iv.$family-sans-serif !important;
+}
+
+.#{iv.$helpers-prefix}family-monospace {
+  font-family: iv.$family-monospace !important;
+}
+
+.#{iv.$helpers-prefix}family-code {
+  font-family: dv.$family-code !important;
+}

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

@@ -0,0 +1,221 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$helpers-prefix}display-none,
+.#{iv.$helpers-prefix}hidden {
+  display: none !important;
+}
+
+$displays: block flex inline inline-block inline-flex grid;
+
+@each $display in $displays {
+  .#{iv.$helpers-prefix}display-#{$display},
+  .#{iv.$helpers-prefix}#{$display} {
+    display: $display !important;
+  }
+
+  @include mx.mobile {
+    .#{iv.$helpers-prefix}display-#{$display}-mobile,
+    .#{iv.$helpers-prefix}#{$display}-mobile {
+      display: $display !important;
+    }
+  }
+
+  @include mx.tablet {
+    .#{iv.$helpers-prefix}display-#{$display}-tablet,
+    .#{iv.$helpers-prefix}#{$display}-tablet {
+      display: $display !important;
+    }
+  }
+
+  @include mx.tablet-only {
+    .#{iv.$helpers-prefix}display-#{$display}-tablet-only,
+    .#{iv.$helpers-prefix}#{$display}-tablet-only {
+      display: $display !important;
+    }
+  }
+
+  @include mx.touch {
+    .#{iv.$helpers-prefix}display-#{$display}-touch,
+    .#{iv.$helpers-prefix}#{$display}-touch {
+      display: $display !important;
+    }
+  }
+
+  @include mx.desktop {
+    .#{iv.$helpers-prefix}display-#{$display}-desktop,
+    .#{iv.$helpers-prefix}#{$display}-desktop {
+      display: $display !important;
+    }
+  }
+
+  @include mx.desktop-only {
+    .#{iv.$helpers-prefix}display-#{$display}-desktop-only,
+    .#{iv.$helpers-prefix}#{$display}-desktop-only {
+      display: $display !important;
+    }
+  }
+
+  @include mx.widescreen {
+    .#{iv.$helpers-prefix}display-#{$display}-widescreen,
+    .#{iv.$helpers-prefix}#{$display}-widescreen {
+      display: $display !important;
+    }
+  }
+
+  @include mx.widescreen-only {
+    .#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
+    .#{iv.$helpers-prefix}#{$display}-widescreen-only {
+      display: $display !important;
+    }
+  }
+
+  @include mx.fullhd {
+    .#{iv.$helpers-prefix}display-#{$display}-fullhd,
+    .#{iv.$helpers-prefix}#{$display}-fullhd {
+      display: $display !important;
+    }
+  }
+}
+
+.#{iv.$helpers-prefix}sr-only {
+  border: none !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 0.01em !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 0.01em !important;
+}
+
+@include mx.mobile {
+  .#{iv.$helpers-prefix}display-none-mobile,
+  .#{iv.$helpers-prefix}hidden-mobile {
+    display: none !important;
+  }
+}
+
+@include mx.tablet {
+  .#{iv.$helpers-prefix}display-none-tablet,
+  .#{iv.$helpers-prefix}hidden-tablet {
+    display: none !important;
+  }
+}
+
+@include mx.tablet-only {
+  .#{iv.$helpers-prefix}display-none-tablet-only,
+  .#{iv.$helpers-prefix}hidden-tablet-only {
+    display: none !important;
+  }
+}
+
+@include mx.touch {
+  .#{iv.$helpers-prefix}display-none-touch,
+  .#{iv.$helpers-prefix}hidden-touch {
+    display: none !important;
+  }
+}
+
+@include mx.desktop {
+  .#{iv.$helpers-prefix}display-none-desktop,
+  .#{iv.$helpers-prefix}hidden-desktop {
+    display: none !important;
+  }
+}
+
+@include mx.desktop-only {
+  .#{iv.$helpers-prefix}display-none-desktop-only,
+  .#{iv.$helpers-prefix}hidden-desktop-only {
+    display: none !important;
+  }
+}
+
+@include mx.widescreen {
+  .#{iv.$helpers-prefix}display-none-widescreen,
+  .#{iv.$helpers-prefix}hidden-widescreen {
+    display: none !important;
+  }
+}
+
+@include mx.widescreen-only {
+  .#{iv.$helpers-prefix}display-none-widescreen-only,
+  .#{iv.$helpers-prefix}hidden-widescreen-only {
+    display: none !important;
+  }
+}
+
+@include mx.fullhd {
+  .#{iv.$helpers-prefix}display-none-fullhd,
+  .#{iv.$helpers-prefix}hidden-fullhd {
+    display: none !important;
+  }
+}
+
+.#{iv.$helpers-prefix}visibility-hidden,
+.#{iv.$helpers-prefix}invisible {
+  visibility: hidden !important;
+}
+
+@include mx.mobile {
+  .#{iv.$helpers-prefix}visibility-hidden-mobile,
+  .#{iv.$helpers-prefix}invisible-mobile {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.tablet {
+  .#{iv.$helpers-prefix}visibility-hidden-tablet,
+  .#{iv.$helpers-prefix}invisible-tablet {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.tablet-only {
+  .#{iv.$helpers-prefix}visibility-hidden-tablet-only,
+  .#{iv.$helpers-prefix}invisible-tablet-only {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.touch {
+  .#{iv.$helpers-prefix}visibility-hidden-touch,
+  .#{iv.$helpers-prefix}invisible-touch {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.desktop {
+  .#{iv.$helpers-prefix}visibility-hidden-desktop,
+  .#{iv.$helpers-prefix}invisible-desktop {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.desktop-only {
+  .#{iv.$helpers-prefix}visibility-hidden-desktop-only,
+  .#{iv.$helpers-prefix}invisible-desktop-only {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.widescreen {
+  .#{iv.$helpers-prefix}visibility-hidden-widescreen,
+  .#{iv.$helpers-prefix}invisible-widescreen {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.widescreen-only {
+  .#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
+  .#{iv.$helpers-prefix}invisible-widescreen-only {
+    visibility: hidden !important;
+  }
+}
+
+@include mx.fullhd {
+  .#{iv.$helpers-prefix}visibility-hidden-fullhd,
+  .#{iv.$helpers-prefix}invisible-fullhd {
+    visibility: hidden !important;
+  }
+}

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

@@ -0,0 +1,9 @@
+/* Bulma Components */
+@charset "utf-8";
+
+@forward "container";
+@forward "footer";
+@forward "hero";
+@forward "level";
+@forward "media";
+@forward "section";

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

@@ -0,0 +1,51 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+$container-offset: 2 * iv.$gap !default;
+$container-max-width: iv.$fullhd !default;
+
+.#{iv.$class-prefix}container {
+  flex-grow: 1;
+  margin: 0 auto;
+  position: relative;
+  width: 100%;
+
+  &.#{iv.$class-prefix}is-fluid {
+    max-width: none !important;
+    padding-left: iv.$gap;
+    padding-right: iv.$gap;
+    width: 100%;
+  }
+
+  @include mx.desktop {
+    max-width: iv.$desktop - $container-offset;
+  }
+
+  @include mx.until-widescreen {
+    &.#{iv.$class-prefix}is-widescreen:not(.#{iv.$class-prefix}is-max-desktop) {
+      max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
+    }
+  }
+
+  @include mx.until-fullhd {
+    &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-desktop):not(
+        .#{iv.$class-prefix}is-max-widescreen
+      ) {
+      max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
+    }
+  }
+
+  @include mx.widescreen {
+    &:not(.#{iv.$class-prefix}is-max-desktop) {
+      max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
+    }
+  }
+
+  @include mx.fullhd {
+    &:not(.#{iv.$class-prefix}is-max-desktop):not(
+        .#{iv.$class-prefix}is-max-widescreen
+      ) {
+      max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+$footer-background-color: cv.getVar("scheme-main-bis") !default;
+$footer-color: false !default;
+$footer-padding: 3rem 1.5rem 6rem !default;
+
+.#{iv.$class-prefix}footer {
+  @include cv.register-vars(
+    (
+      "footer-background-color": #{$footer-background-color},
+      "footer-color": #{$footer-color},
+      "footer-padding": #{$footer-padding},
+    )
+  );
+
+  background-color: cv.getVar("footer-background-color");
+  padding: cv.getVar("footer-padding");
+
+  @if $footer-color {
+    color: cv.getVar("footer-color");
+  }
+}