bulma-rails 0.9.0 → 1.0.0

data/app/assets/stylesheets/sass/components/pagination.scss

@@ -0,0 +1,379 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$pagination-margin: -0.25rem !default;
+$pagination-min-width: cv.getVar("control-height") !default;
+
+$pagination-item-h: cv.getVar("scheme-h");
+$pagination-item-s: cv.getVar("scheme-s");
+$pagination-item-l: cv.getVar("scheme-main-l");
+$pagination-item-background-l-delta: 0%;
+$pagination-item-hover-background-l-delta: cv.getVar(
+  "hover-background-l-delta"
+);
+$pagination-item-active-background-l-delta: cv.getVar(
+  "active-background-l-delta"
+);
+$pagination-item-border-l: cv.getVar("border-l");
+$pagination-item-border-l-delta: 0%;
+$pagination-item-border-style: solid !default;
+$pagination-item-border-width: cv.getVar("control-border-width") !default;
+$pagination-item-hover-border-l-delta: cv.getVar("hover-border-l-delta");
+$pagination-item-active-border-l-delta: cv.getVar("active-border-l-delta");
+$pagination-item-focus-border-l-delta: cv.getVar("focus-border-l-delta");
+$pagination-item-color-l: cv.getVar("text-strong-l");
+$pagination-item-font-size: 1em !default;
+$pagination-item-margin: 0.25rem !default;
+$pagination-item-padding-left: 0.5em !default;
+$pagination-item-padding-right: 0.5em !default;
+$pagination-item-outer-shadow-h: 0;
+$pagination-item-outer-shadow-s: 0%;
+$pagination-item-outer-shadow-l: 20%;
+$pagination-item-outer-shadow-a: 0.05;
+
+$pagination-selected-item-h: cv.getVar("link-h");
+$pagination-selected-item-s: cv.getVar("link-s");
+$pagination-selected-item-l: cv.getVar("link-l");
+$pagination-selected-item-background-l: cv.getVar("link-l");
+$pagination-selected-item-border-l: cv.getVar("link-l");
+$pagination-selected-item-color-l: cv.getVar("link-invert-l");
+
+$pagination-nav-padding-left: 0.75em !default;
+$pagination-nav-padding-right: 0.75em !default;
+
+$pagination-disabled-color: cv.getVar("text-weak") !default;
+$pagination-disabled-background-color: cv.getVar("border") !default;
+$pagination-disabled-border-color: cv.getVar("border") !default;
+
+$pagination-current-color: cv.getVar("link-invert") !default;
+$pagination-current-background-color: cv.getVar("link") !default;
+$pagination-current-border-color: cv.getVar("link") !default;
+
+$pagination-ellipsis-color: cv.getVar("text-weak") !default;
+
+$pagination-shadow-inset: inset 0 0.0625em 0.125em
+  hsla(
+    #{cv.getVar("scheme-h")},
+    #{cv.getVar("scheme-s")},
+    #{cv.getVar("scheme-invert-l")},
+    0.2
+  ) !default;
+
+.#{iv.$class-prefix}pagination {
+  @include cv.register-vars(
+    (
+      "pagination-margin": #{$pagination-margin},
+      "pagination-min-width": #{$pagination-min-width},
+      "pagination-item-h": #{$pagination-item-h},
+      "pagination-item-s": #{$pagination-item-s},
+      "pagination-item-l": #{$pagination-item-l},
+      "pagination-item-background-l-delta": #{$pagination-item-background-l-delta},
+      "pagination-item-hover-background-l-delta": #{$pagination-item-hover-background-l-delta},
+      "pagination-item-active-background-l-delta": #{$pagination-item-active-background-l-delta},
+      "pagination-item-border-style": #{$pagination-item-border-style},
+      "pagination-item-border-width": #{$pagination-item-border-width},
+      "pagination-item-border-l": #{$pagination-item-border-l},
+      "pagination-item-border-l-delta": #{$pagination-item-border-l-delta},
+      "pagination-item-hover-border-l-delta": #{$pagination-item-hover-border-l-delta},
+      "pagination-item-active-border-l-delta": #{$pagination-item-active-border-l-delta},
+      "pagination-item-focus-border-l-delta": #{$pagination-item-focus-border-l-delta},
+      "pagination-item-color-l": #{$pagination-item-color-l},
+      "pagination-item-font-size": #{$pagination-item-font-size},
+      "pagination-item-margin": #{$pagination-item-margin},
+      "pagination-item-padding-left": #{$pagination-item-padding-left},
+      "pagination-item-padding-right": #{$pagination-item-padding-right},
+      "pagination-item-outer-shadow-h": #{$pagination-item-outer-shadow-h},
+      "pagination-item-outer-shadow-s": #{$pagination-item-outer-shadow-s},
+      "pagination-item-outer-shadow-l": #{$pagination-item-outer-shadow-l},
+      "pagination-item-outer-shadow-a": #{$pagination-item-outer-shadow-a},
+      "pagination-nav-padding-left": #{$pagination-nav-padding-left},
+      "pagination-nav-padding-right": #{$pagination-nav-padding-right},
+      "pagination-disabled-color": #{$pagination-disabled-color},
+      "pagination-disabled-background-color": #{$pagination-disabled-background-color},
+      "pagination-disabled-border-color": #{$pagination-disabled-border-color},
+      "pagination-current-color": #{$pagination-current-color},
+      "pagination-current-background-color": #{$pagination-current-background-color},
+      "pagination-current-border-color": #{$pagination-current-border-color},
+      "pagination-ellipsis-color": #{$pagination-ellipsis-color},
+      "pagination-shadow-inset": #{$pagination-shadow-inset},
+      "pagination-selected-item-h": #{$pagination-selected-item-h},
+      "pagination-selected-item-s": #{$pagination-selected-item-s},
+      "pagination-selected-item-l": #{$pagination-selected-item-l},
+      "pagination-selected-item-background-l": #{$pagination-selected-item-background-l},
+      "pagination-selected-item-border-l": #{$pagination-selected-item-border-l},
+      "pagination-selected-item-color-l": #{$pagination-selected-item-color-l},
+    )
+  );
+}
+
+.#{iv.$class-prefix}pagination {
+  @extend %block;
+
+  font-size: cv.getVar("size-normal");
+  margin: cv.getVar("pagination-margin");
+
+  // 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}is-rounded {
+    .#{iv.$class-prefix}pagination-previous,
+    .#{iv.$class-prefix}pagination-next {
+      padding-left: 1em;
+      padding-right: 1em;
+      border-radius: cv.getVar("radius-rounded");
+    }
+
+    .#{iv.$class-prefix}pagination-link {
+      border-radius: cv.getVar("radius-rounded");
+    }
+  }
+}
+
+.#{iv.$class-prefix}pagination,
+.#{iv.$class-prefix}pagination-list {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+.#{iv.$class-prefix}pagination-previous,
+.#{iv.$class-prefix}pagination-next,
+.#{iv.$class-prefix}pagination-link,
+.#{iv.$class-prefix}pagination-ellipsis {
+  @extend %control;
+  @extend %unselectable;
+  color: hsl(
+    #{cv.getVar("pagination-item-h")},
+    #{cv.getVar("pagination-item-s")},
+    #{cv.getVar("pagination-item-color-l")}
+  );
+  font-size: cv.getVar("pagination-item-font-size");
+  justify-content: center;
+  margin: cv.getVar("pagination-item-margin");
+  padding-left: cv.getVar("pagination-item-padding-left");
+  padding-right: cv.getVar("pagination-item-padding-right");
+  text-align: center;
+}
+
+.#{iv.$class-prefix}pagination-previous,
+.#{iv.$class-prefix}pagination-next,
+.#{iv.$class-prefix}pagination-link {
+  background-color: hsl(
+    #{cv.getVar("pagination-item-h")},
+    #{cv.getVar("pagination-item-s")},
+    calc(
+      #{cv.getVar("pagination-item-background-l")} + #{cv.getVar(
+          "pagination-item-background-l-delta"
+        )}
+    )
+  );
+  border-color: hsl(
+    #{cv.getVar("pagination-item-h")},
+    #{cv.getVar("pagination-item-s")},
+    calc(
+      #{cv.getVar("pagination-item-border-l")} + #{cv.getVar(
+          "pagination-item-border-l-delta"
+        )}
+    )
+  );
+  border-style: cv.getVar("pagination-item-border-style");
+  border-width: cv.getVar("pagination-item-border-width");
+  box-shadow:
+    0px 0.0625em 0.125em
+      hsla(
+        cv.getVar("pagination-item-outer-shadow-h"),
+        cv.getVar("pagination-item-outer-shadow-s"),
+        cv.getVar("pagination-item-outer-shadow-l"),
+        cv.getVar("pagination-item-outer-shadow-a")
+      ),
+    0px 0.125em 0.25em
+      hsla(
+        cv.getVar("pagination-item-outer-shadow-h"),
+        cv.getVar("pagination-item-outer-shadow-s"),
+        cv.getVar("pagination-item-outer-shadow-l"),
+        cv.getVar("pagination-item-outer-shadow-a")
+      );
+  color: hsl(
+    #{cv.getVar("pagination-item-h")},
+    #{cv.getVar("pagination-item-s")},
+    #{cv.getVar("pagination-item-color-l")}
+  );
+  min-width: cv.getVar("pagination-min-width");
+  transition-duration: cv.getVar("duration");
+  transition-property: background-color, border-color, box-shadow, color;
+
+  &:hover {
+    @include cv.register-vars(
+      (
+        "pagination-item-background-l-delta": #{cv.getVar(
+            "pagination-item-hover-background-l-delta"
+          )},
+        "pagination-item-border-l-delta": #{cv.getVar(
+            "pagination-item-hover-border-l-delta"
+          )},
+      )
+    );
+  }
+
+  &:focus {
+    @include cv.register-vars(
+      (
+        "pagination-item-background-l-delta": #{cv.getVar(
+            "pagination-item-hover-background-l-delta"
+          )},
+        "pagination-item-border-l-delta": #{cv.getVar(
+            "pagination-item-hover-border-l-delta"
+          )},
+      )
+    );
+  }
+
+  &:active {
+    box-shadow: cv.getVar("pagination-shadow-inset");
+  }
+
+  &[disabled],
+  &.#{iv.$class-prefix}is-disabled {
+    background-color: cv.getVar("pagination-disabled-background-color");
+    border-color: cv.getVar("pagination-disabled-border-color");
+    box-shadow: none;
+    color: cv.getVar("pagination-disabled-color");
+    opacity: 0.5;
+  }
+}
+
+.#{iv.$class-prefix}pagination-previous,
+.#{iv.$class-prefix}pagination-next {
+  padding-left: cv.getVar("pagination-nav-padding-left");
+  padding-right: cv.getVar("pagination-nav-padding-right");
+  white-space: nowrap;
+}
+
+.#{iv.$class-prefix}pagination-link {
+  &.#{iv.$class-prefix}is-current,
+  &.#{iv.$class-prefix}is-selected {
+    @include cv.register-vars(
+      (
+        "pagination-item-h": #{cv.getVar("pagination-selected-item-h")},
+        "pagination-item-s": #{cv.getVar("pagination-selected-item-s")},
+        "pagination-item-l": #{cv.getVar("pagination-selected-item-l")},
+        "pagination-item-background-l": #{cv.getVar(
+            "pagination-selected-item-background-l"
+          )},
+        "pagination-item-border-l": #{cv.getVar(
+            "pagination-selected-item-border-l"
+          )},
+        "pagination-item-color-l": #{cv.getVar(
+            "pagination-selected-item-color-l"
+          )},
+      )
+    );
+  }
+}
+
+.#{iv.$class-prefix}pagination-ellipsis {
+  color: cv.getVar("pagination-ellipsis-color");
+  pointer-events: none;
+}
+
+.#{iv.$class-prefix}pagination-list {
+  flex-wrap: wrap;
+
+  li {
+    list-style: none;
+  }
+}
+
+@include mx.mobile {
+  .#{iv.$class-prefix}pagination {
+    flex-wrap: wrap;
+  }
+
+  .#{iv.$class-prefix}pagination-previous,
+  .#{iv.$class-prefix}pagination-next {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .#{iv.$class-prefix}pagination-list {
+    li {
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+}
+
+@include mx.tablet {
+  .#{iv.$class-prefix}pagination-list {
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: flex-start;
+    order: 1;
+  }
+
+  .#{iv.$class-prefix}pagination-previous,
+  .#{iv.$class-prefix}pagination-next,
+  .#{iv.$class-prefix}pagination-link,
+  .#{iv.$class-prefix}pagination-ellipsis {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+
+  .#{iv.$class-prefix}pagination-previous {
+    order: 2;
+  }
+
+  .#{iv.$class-prefix}pagination-next {
+    order: 3;
+  }
+
+  .#{iv.$class-prefix}pagination {
+    justify-content: space-between;
+    margin-bottom: 0;
+    margin-top: 0;
+
+    &.#{iv.$class-prefix}is-centered {
+      .#{iv.$class-prefix}pagination-previous {
+        order: 1;
+      }
+
+      .#{iv.$class-prefix}pagination-list {
+        justify-content: center;
+        order: 2;
+      }
+
+      .#{iv.$class-prefix}pagination-next {
+        order: 3;
+      }
+    }
+
+    &.#{iv.$class-prefix}is-right {
+      .#{iv.$class-prefix}pagination-previous {
+        order: 1;
+      }
+
+      .#{iv.$class-prefix}pagination-next {
+        order: 2;
+      }
+
+      .#{iv.$class-prefix}pagination-list {
+        justify-content: flex-end;
+        order: 3;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/sass/components/panel.scss

@@ -0,0 +1,218 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$panel-margin: cv.getVar("block-spacing") !default;
+$panel-item-border: 1px solid cv.getVar("border-weak") !default;
+$panel-radius: cv.getVar("radius-large") !default;
+$panel-shadow: cv.getVar("shadow") !default;
+
+$panel-heading-line-height: 1.25 !default;
+$panel-heading-padding: 1em 1.25em !default;
+$panel-heading-radius: cv.getVar("radius") !default;
+$panel-heading-size: 1.25em !default;
+$panel-heading-weight: cv.getVar("weight-bold") !default;
+
+$panel-tabs-font-size: 1em !default;
+$panel-tab-border-bottom-color: cv.getVar("border") !default;
+$panel-tab-border-bottom-style: solid !default;
+$panel-tab-border-bottom-width: 1px !default;
+$panel-tab-active-color: cv.getVar("link-active") !default;
+
+$panel-list-item-color: cv.getVar("text") !default;
+$panel-list-item-hover-color: cv.getVar("link") !default;
+
+$panel-block-color: cv.getVar("text-strong") !default;
+$panel-block-hover-background-color: cv.getVar("background") !default;
+$panel-block-active-border-left-color: cv.getVar("link") !default;
+$panel-block-active-color: cv.getVar("link-active") !default;
+$panel-block-active-icon-color: cv.getVar("link") !default;
+
+$panel-icon-color: cv.getVar("text-weak") !default;
+$panel-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}panel {
+  @include cv.register-vars(
+    (
+      "panel-margin": #{$panel-margin},
+      "panel-item-border": #{$panel-item-border},
+      "panel-radius": #{$panel-radius},
+      "panel-shadow": #{$panel-shadow},
+      "panel-heading-line-height": #{$panel-heading-line-height},
+      "panel-heading-padding": #{$panel-heading-padding},
+      "panel-heading-radius": #{$panel-heading-radius},
+      "panel-heading-size": #{$panel-heading-size},
+      "panel-heading-weight": #{$panel-heading-weight},
+      "panel-tabs-font-size": #{$panel-tabs-font-size},
+      "panel-tab-border-bottom-color": #{$panel-tab-border-bottom-color},
+      "panel-tab-border-bottom-style": #{$panel-tab-border-bottom-style},
+      "panel-tab-border-bottom-width": #{$panel-tab-border-bottom-width},
+      "panel-tab-active-color": #{$panel-tab-active-color},
+      "panel-list-item-color": #{$panel-list-item-color},
+      "panel-list-item-hover-color": #{$panel-list-item-hover-color},
+      "panel-block-color": #{$panel-block-color},
+      "panel-block-hover-background-color": #{$panel-block-hover-background-color},
+      "panel-block-active-border-left-color": #{$panel-block-active-border-left-color},
+      "panel-block-active-color": #{$panel-block-active-color},
+      "panel-block-active-icon-color": #{$panel-block-active-icon-color},
+      "panel-icon-color": #{$panel-icon-color},
+    )
+  );
+}
+
+.#{iv.$class-prefix}panel {
+  @include cv.register-vars(
+    (
+      "panel-h": #{cv.getVar("scheme-h")},
+      "panel-s": #{cv.getVar("scheme-s")},
+      "panel-color-l": #{cv.getVar("text-l")},
+      "panel-heading-background-l": #{cv.getVar("text-l")},
+      "panel-heading-color-l": #{cv.getVar("text-invert-l")},
+    )
+  );
+
+  border-radius: cv.getVar("panel-radius");
+  box-shadow: cv.getVar("panel-shadow");
+  font-size: cv.getVar("size-normal");
+
+  &:not(:last-child) {
+    margin-bottom: cv.getVar("panel-margin");
+  }
+
+  // Colors
+  @each $name, $components in $panel-colors {
+    &.#{iv.$class-prefix}is-#{$name} {
+      @include cv.register-vars(
+        (
+          "panel-h": #{cv.getVar($name, "", "-h")},
+          "panel-s": #{cv.getVar($name, "", "-s")},
+          "panel-color-l": #{cv.getVar($name, "", "-l")},
+          "panel-heading-background-l": #{cv.getVar($name, "", "-l")},
+          "panel-heading-color-l": #{cv.getVar($name, "", "-invert-l")},
+        )
+      );
+    }
+  }
+}
+
+.#{iv.$class-prefix}panel-tabs,
+.#{iv.$class-prefix}panel-block {
+  &:not(:last-child) {
+    border-bottom: cv.getVar("panel-item-border");
+  }
+}
+
+.#{iv.$class-prefix}panel-heading {
+  background-color: hsl(
+    cv.getVar("panel-h"),
+    cv.getVar("panel-s"),
+    cv.getVar("panel-heading-background-l")
+  );
+  border-radius: cv.getVar("panel-radius") cv.getVar("panel-radius") 0 0;
+  color: hsl(
+    cv.getVar("panel-h"),
+    cv.getVar("panel-s"),
+    cv.getVar("panel-heading-color-l")
+  );
+  font-size: cv.getVar("panel-heading-size");
+  font-weight: cv.getVar("panel-heading-weight");
+  line-height: cv.getVar("panel-heading-line-height");
+  padding: cv.getVar("panel-heading-padding");
+}
+
+.#{iv.$class-prefix}panel-tabs {
+  align-items: flex-end;
+  display: flex;
+  font-size: cv.getVar("panel-tabs-font-size");
+  justify-content: center;
+
+  a {
+    border-bottom-color: cv.getVar("panel-tab-border-bottom-color");
+    border-bottom-style: cv.getVar("panel-tab-border-bottom-style");
+    border-bottom-width: cv.getVar("panel-tab-border-bottom-width");
+    margin-bottom: calc(-1 * #{$panel-tab-border-bottom-width});
+    padding: 0.75em;
+
+    // Modifiers
+    &.#{iv.$class-prefix}is-active {
+      border-bottom-color: hsl(
+        cv.getVar("panel-h"),
+        cv.getVar("panel-s"),
+        cv.getVar("panel-color-l")
+      );
+      color: cv.getVar("panel-tab-active-color");
+    }
+  }
+}
+
+.#{iv.$class-prefix}panel-list {
+  a {
+    color: cv.getVar("panel-list-item-color");
+
+    &:hover {
+      color: cv.getVar("panel-list-item-hover-color");
+    }
+  }
+}
+
+.#{iv.$class-prefix}panel-block {
+  align-items: center;
+  color: cv.getVar("panel-block-color");
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.75em 1em;
+
+  input[type="checkbox"] {
+    margin-inline-end: 0.75em;
+  }
+
+  & > .#{iv.$class-prefix}control {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+  }
+
+  &.#{iv.$class-prefix}is-wrapped {
+    flex-wrap: wrap;
+  }
+
+  &.#{iv.$class-prefix}is-active {
+    border-left-color: cv.getVar("panel-block-active-border-left-color");
+    color: cv.getVar("panel-block-active-color");
+
+    .#{iv.$class-prefix}panel-icon {
+      color: hsl(
+        cv.getVar("panel-h"),
+        cv.getVar("panel-s"),
+        cv.getVar("panel-color-l")
+      );
+    }
+  }
+
+  &:last-child {
+    border-bottom-left-radius: cv.getVar("panel-radius");
+    border-bottom-right-radius: cv.getVar("panel-radius");
+  }
+}
+
+a.#{iv.$class-prefix}panel-block,
+label.#{iv.$class-prefix}panel-block {
+  cursor: pointer;
+
+  &:hover {
+    background-color: cv.getVar("panel-block-hover-background-color");
+  }
+}
+
+.#{iv.$class-prefix}panel-icon {
+  @include mx.fa(1em, 1em);
+  color: cv.getVar("panel-icon-color");
+  margin-inline-end: 0.75em;
+
+  .#{iv.$class-prefix}fa {
+    font-size: inherit;
+    line-height: inherit;
+  }
+}