bulma-rails 0.9.3 → 1.0.0

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

@@ -0,0 +1,283 @@
+@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;
+
+$content-heading-color: #{cv.getVar("text-strong")} !default;
+$content-heading-weight: #{cv.getVar("weight-extrabold")} !default;
+$content-heading-line-height: 1.125 !default;
+
+$content-block-margin-bottom: 1em !default;
+
+$content-blockquote-background-color: #{cv.getVar("background")} !default;
+$content-blockquote-border-left: 5px solid #{cv.getVar("border")} !default;
+$content-blockquote-padding: 1.25em 1.5em !default;
+
+$content-pre-padding: 1.25em 1.5em !default;
+
+$content-table-cell-border: 1px solid #{cv.getVar("border")} !default;
+$content-table-cell-border-width: 0 0 1px !default;
+$content-table-cell-padding: 0.5em 0.75em !default;
+$content-table-cell-heading-color: #{cv.getVar("text-strong")} !default;
+$content-table-head-cell-border-width: 0 0 2px !default;
+$content-table-head-cell-color: #{cv.getVar("text-strong")} !default;
+$content-table-body-last-row-cell-border-bottom-width: 0 !default;
+$content-table-foot-cell-border-width: 2px 0 0 !default;
+$content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
+
+.#{iv.$class-prefix}content {
+  @include cv.register-vars(
+    (
+      "content-heading-color": #{$content-heading-color},
+      "content-heading-weight": #{$content-heading-weight},
+      "content-heading-line-height": #{$content-heading-line-height},
+      "content-block-margin-bottom": #{$content-block-margin-bottom},
+      "content-blockquote-background-color": #{$content-blockquote-background-color},
+      "content-blockquote-border-left": #{$content-blockquote-border-left},
+      "content-blockquote-padding": #{$content-blockquote-padding},
+      "content-pre-padding": #{$content-pre-padding},
+      "content-table-cell-border": #{$content-table-cell-border},
+      "content-table-cell-border-width": #{$content-table-cell-border-width},
+      "content-table-cell-padding": #{$content-table-cell-padding},
+      "content-table-cell-heading-color": #{$content-table-cell-heading-color},
+      "content-table-head-cell-border-width": #{$content-table-head-cell-border-width},
+      "content-table-head-cell-color": #{$content-table-head-cell-color},
+      "content-table-body-last-row-cell-border-bottom-width": #{$content-table-body-last-row-cell-border-bottom-width},
+      "content-table-foot-cell-border-width": #{$content-table-foot-cell-border-width},
+      "content-table-foot-cell-color": #{$content-table-foot-cell-color},
+    )
+  );
+}
+
+.#{iv.$class-prefix}content {
+  @extend %block;
+
+  // Inline
+  li + li {
+    margin-top: 0.25em;
+  }
+
+  // Block
+  p,
+  dl,
+  ol,
+  ul,
+  blockquote,
+  pre,
+  table {
+    &:not(:last-child) {
+      margin-bottom: cv.getVar("content-block-margin-bottom");
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: cv.getVar("content-heading-color");
+    font-weight: cv.getVar("content-heading-weight");
+    line-height: cv.getVar("content-heading-line-height");
+  }
+
+  h1 {
+    font-size: 2em;
+    margin-bottom: 0.5em;
+
+    &:not(:first-child) {
+      margin-top: 1em;
+    }
+  }
+
+  h2 {
+    font-size: 1.75em;
+    margin-bottom: 0.5714em;
+
+    &:not(:first-child) {
+      margin-top: 1.1428em;
+    }
+  }
+
+  h3 {
+    font-size: 1.5em;
+    margin-bottom: 0.6666em;
+
+    &:not(:first-child) {
+      margin-top: 1.3333em;
+    }
+  }
+
+  h4 {
+    font-size: 1.25em;
+    margin-bottom: 0.8em;
+  }
+
+  h5 {
+    font-size: 1.125em;
+    margin-bottom: 0.8888em;
+  }
+
+  h6 {
+    font-size: 1em;
+    margin-bottom: 1em;
+  }
+
+  blockquote {
+    background-color: cv.getVar("content-blockquote-background-color");
+    border-inline-start: cv.getVar("content-blockquote-border-left");
+    padding: cv.getVar("content-blockquote-padding");
+  }
+
+  ol {
+    list-style-position: outside;
+    margin-inline-start: 2em;
+    margin-top: 1em;
+
+    &:not([type]) {
+      list-style-type: decimal;
+
+      &.#{iv.$class-prefix}is-lower-alpha {
+        list-style-type: lower-alpha;
+      }
+
+      &.#{iv.$class-prefix}is-lower-roman {
+        list-style-type: lower-roman;
+      }
+
+      &.#{iv.$class-prefix}is-upper-alpha {
+        list-style-type: upper-alpha;
+      }
+
+      &.#{iv.$class-prefix}is-upper-roman {
+        list-style-type: upper-roman;
+      }
+    }
+  }
+
+  ul {
+    list-style: disc outside;
+    margin-inline-start: 2em;
+    margin-top: 1em;
+
+    ul {
+      list-style-type: circle;
+      margin-bottom: 0.25em;
+      margin-top: 0.25em;
+
+      ul {
+        list-style-type: square;
+      }
+    }
+  }
+
+  dd {
+    margin-inline-start: 2em;
+  }
+
+  figure:not([class]) {
+    margin-left: 2em;
+    margin-right: 2em;
+    text-align: center;
+
+    &:not(:first-child) {
+      margin-top: 2em;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 2em;
+    }
+
+    img {
+      display: inline-block;
+    }
+
+    figcaption {
+      font-style: italic;
+    }
+  }
+
+  pre {
+    @include mx.overflow-touch;
+    overflow-x: auto;
+    padding: cv.getVar("content-pre-padding");
+    white-space: pre;
+    word-wrap: normal;
+  }
+
+  sup,
+  sub {
+    font-size: 75%;
+  }
+
+  table {
+    td,
+    th {
+      border: cv.getVar("content-table-cell-border");
+      border-width: cv.getVar("content-table-cell-border-width");
+      padding: cv.getVar("content-table-cell-padding");
+      vertical-align: top;
+    }
+
+    th {
+      color: cv.getVar("content-table-cell-heading-color");
+
+      &:not([align]) {
+        text-align: inherit;
+      }
+    }
+
+    thead {
+      td,
+      th {
+        border-width: cv.getVar("content-table-head-cell-border-width");
+        color: cv.getVar("content-table-head-cell-color");
+      }
+    }
+
+    tfoot {
+      td,
+      th {
+        border-width: cv.getVar("content-table-foot-cell-border-width");
+        color: cv.getVar("content-table-foot-cell-color");
+      }
+    }
+
+    tbody {
+      tr {
+        &:last-child {
+          td,
+          th {
+            border-bottom-width: cv.getVar(
+              "content-table-body-last-row-cell-border-bottom-width"
+            );
+          }
+        }
+      }
+    }
+  }
+
+  .#{iv.$class-prefix}tabs {
+    li + li {
+      margin-top: 0;
+    }
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    font-size: cv.getVar("size-small");
+  }
+
+  &.#{iv.$class-prefix}is-normal {
+    font-size: cv.getVar("size-normal");
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    font-size: cv.getVar("size-medium");
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    font-size: cv.getVar("size-large");
+  }
+}

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

@@ -0,0 +1,6 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/mixins" as mx;
+
+.#{iv.$class-prefix}delete {
+  @include mx.delete;
+}

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

@@ -0,0 +1,67 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+$icon-dimensions: 1.5rem !default;
+$icon-dimensions-small: 1rem !default;
+$icon-dimensions-medium: 2rem !default;
+$icon-dimensions-large: 3rem !default;
+$icon-text-spacing: 0.25em !default;
+
+.#{iv.$class-prefix}icon,
+.#{iv.$class-prefix}icon-text {
+  @include cv.register-vars(
+    (
+      "icon-dimensions": #{$icon-dimensions},
+      "icon-dimensions-small": #{$icon-dimensions-small},
+      "icon-dimensions-medium": #{$icon-dimensions-medium},
+      "icon-dimensions-large": #{$icon-dimensions-large},
+      "icon-text-spacing": #{$icon-text-spacing},
+    )
+  );
+}
+
+.#{iv.$class-prefix}icon {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  height: cv.getVar("icon-dimensions");
+  transition-duration: cv.getVar("duration");
+  transition-property: color;
+  width: cv.getVar("icon-dimensions");
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    height: cv.getVar("icon-dimensions-small");
+    width: cv.getVar("icon-dimensions-small");
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    height: cv.getVar("icon-dimensions-medium");
+    width: cv.getVar("icon-dimensions-medium");
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    height: cv.getVar("icon-dimensions-large");
+    width: cv.getVar("icon-dimensions-large");
+  }
+}
+
+.#{iv.$class-prefix}icon-text {
+  align-items: flex-start;
+  color: inherit;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: cv.getVar("icon-text-spacing");
+  line-height: cv.getVar("icon-dimensions");
+  vertical-align: top;
+
+  .#{iv.$class-prefix}icon {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+
+div.#{iv.$class-prefix}icon-text {
+  display: flex;
+}

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

@@ -0,0 +1,62 @@
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/css-variables" as cv;
+@use "../utilities/mixins" as mx;
+
+$dimensions: 16 24 32 48 64 96 128 !default;
+
+.#{iv.$class-prefix}image {
+  display: block;
+  position: relative;
+
+  img {
+    display: block;
+    height: auto;
+    width: 100%;
+
+    &.#{iv.$class-prefix}is-rounded {
+      border-radius: cv.getVar("radius-rounded");
+    }
+  }
+
+  &.#{iv.$class-prefix}is-fullwidth {
+    width: 100%;
+  }
+
+  // Ratio
+  &.#{iv.$class-prefix}is-square {
+    img,
+    .#{iv.$class-prefix}has-ratio {
+      @include mx.overlay;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &.#{iv.$class-prefix}is-square {
+    aspect-ratio: 1;
+  }
+
+  @each $pair in iv.$aspect-ratios {
+    $w: nth($pair, 1);
+    $h: nth($pair, 2);
+
+    &.#{iv.$class-prefix}is-#{$w}by#{$h} {
+      aspect-ratio: #{$w} / #{$h};
+
+      img,
+      .#{iv.$class-prefix}has-ratio {
+        @include mx.overlay;
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  // Sizes
+  @each $dimension in $dimensions {
+    &.#{iv.$class-prefix}is-#{$dimension}x#{$dimension} {
+      height: $dimension * 1px;
+      width: $dimension * 1px;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+
+.#{iv.$class-prefix}loader {
+  animation: spinAround 500ms infinite linear;
+  border: 2px solid cv.getVar("border");
+  border-radius: cv.getVar("radius-rounded");
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  display: block;
+  height: 1em;
+  position: relative;
+  width: 1em;
+}

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

@@ -0,0 +1,105 @@
+@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;
+
+$notification-code-background-color: cv.getVar("scheme-main") !default;
+$notification-radius: cv.getVar("radius") !default;
+$notification-padding: 1.375em 1.5em !default;
+
+$notification-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}notification {
+  @include cv.register-vars(
+    (
+      "notification-h": #{cv.getVar("scheme-h")},
+      "notification-s": #{cv.getVar("scheme-s")},
+      "notification-background-l": #{cv.getVar("background-l")},
+      "notification-color-l": #{cv.getVar("text-strong-l")},
+      "notification-code-background-color": #{$notification-code-background-color},
+      "notification-radius": #{$notification-radius},
+      "notification-padding": #{$notification-padding},
+    )
+  );
+}
+
+.#{iv.$class-prefix}notification {
+  @extend %block;
+
+  background-color: hsl(
+    cv.getVar("notification-h"),
+    cv.getVar("notification-s"),
+    cv.getVar("notification-background-l")
+  );
+  border-radius: cv.getVar("notification-radius");
+  color: hsl(
+    cv.getVar("notification-h"),
+    cv.getVar("notification-s"),
+    cv.getVar("notification-color-l")
+  );
+  padding: cv.getVar("notification-padding");
+  position: relative;
+
+  a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}dropdown-item) {
+    color: currentColor;
+    text-decoration: underline;
+  }
+
+  strong {
+    color: currentColor;
+  }
+
+  code,
+  pre {
+    background: cv.getVar("notification-code-background-color");
+  }
+
+  pre code {
+    background: transparent;
+  }
+
+  & > .#{iv.$class-prefix}delete {
+    position: absolute;
+    inset-inline-end: 1rem;
+    top: 1rem;
+  }
+
+  .#{iv.$class-prefix}title,
+  .#{iv.$class-prefix}subtitle,
+  .#{iv.$class-prefix}content {
+    color: currentColor;
+  }
+
+  // Colors
+  @each $name, $pair in $notification-colors {
+    &.#{iv.$class-prefix}is-#{$name} {
+      @include cv.register-vars(
+        (
+          "notification-h": #{cv.getVar($name, "", "-h")},
+          "notification-s": #{cv.getVar($name, "", "-s")},
+          "notification-background-l": #{cv.getVar($name, "", "-l")},
+          "notification-color-l": #{cv.getVar($name, "", "-invert-l")},
+        )
+      );
+
+      &.#{iv.$class-prefix}is-light {
+        @include cv.register-vars(
+          (
+            "notification-background-l": 90%,
+            "notification-color-l": #{cv.getVar($name, "", "-light-invert-l")},
+          )
+        );
+      }
+
+      &.#{iv.$class-prefix}is-dark {
+        @include cv.register-vars(
+          (
+            "notification-background-l": 20%,
+            "notification-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
+          )
+        );
+      }
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+@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;
+
+$progress-bar-background-color: cv.getVar("border-weak") !default;
+$progress-value-background-color: cv.getVar("text") !default;
+$progress-border-radius: cv.getVar("radius-rounded") !default;
+
+$progress-indeterminate-duration: 1.5s !default;
+
+$progress-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}progress {
+  @include cv.register-vars(
+    (
+      "progress-border-radius": #{$progress-border-radius},
+      "progress-bar-background-color": #{$progress-bar-background-color},
+      "progress-value-background-color": #{$progress-value-background-color},
+      "progress-indeterminate-duration": #{$progress-indeterminate-duration},
+    )
+  );
+}
+
+.#{iv.$class-prefix}progress {
+  @extend %block;
+
+  appearance: none;
+  border: none;
+  border-radius: cv.getVar("progress-border-radius");
+  display: block;
+  height: cv.getVar("size-normal");
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background-color: cv.getVar("progress-bar-background-color");
+  }
+
+  &::-webkit-progress-value {
+    background-color: cv.getVar("progress-value-background-color");
+  }
+
+  &::-moz-progress-bar {
+    background-color: cv.getVar("progress-value-background-color");
+  }
+
+  &::-ms-fill {
+    background-color: cv.getVar("progress-value-background-color");
+    border: none;
+  }
+
+  // Colors
+  @each $name, $pair in $progress-colors {
+    &.#{iv.$class-prefix}is-#{$name} {
+      @include cv.register-var(
+        "progress-value-background-color",
+        #{cv.getVar($name)}
+      );
+    }
+  }
+
+  &:indeterminate {
+    animation-duration: cv.getVar("progress-indeterminate-duration");
+    animation-iteration-count: infinite;
+    animation-name: moveIndeterminate;
+    animation-timing-function: linear;
+    background-color: cv.getVar("progress-bar-background-color");
+    background-image: linear-gradient(
+      to right,
+      cv.getVar("progress-value-background-color") 30%,
+      cv.getVar("progress-bar-background-color") 30%
+    );
+    background-position: top left;
+    background-repeat: no-repeat;
+    background-size: 150% 150%;
+
+    &::-webkit-progress-bar {
+      background-color: transparent;
+    }
+
+    &::-moz-progress-bar {
+      background-color: transparent;
+    }
+
+    &::-ms-fill {
+      animation-name: none;
+    }
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    height: cv.getVar("size-small");
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    height: cv.getVar("size-medium");
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    height: cv.getVar("size-large");
+  }
+}
+
+@keyframes moveIndeterminate {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: (-200%) 0;
+  }
+}