bulma-rails 0.9.4 → 1.0.1

data/app/assets/stylesheets/sass/utilities/mixins.scss

@@ -0,0 +1,460 @@
+@use "initial-variables" as iv;
+@use "css-variables" as cv;
+
+@mixin arrow($color: #{cv.getVar("arrow-color")}) {
+  border: 0.125em solid $color;
+  border-right: 0;
+  border-top: 0;
+  content: " ";
+  display: block;
+  height: 0.625em;
+  margin-top: -0.4375em;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: rotate(-45deg);
+  transform-origin: center;
+  transition-duration: cv.getVar("duration");
+  transition-property: border-color;
+  width: 0.625em;
+}
+
+@mixin block($spacing: cv.getVar("block-spacing")) {
+  &:not(:last-child) {
+    margin-bottom: $spacing;
+  }
+}
+
+@mixin center($width, $height: 0) {
+  position: absolute;
+  @if $height != 0 {
+    left: calc(50% - (#{$width} * 0.5));
+    top: calc(50% - (#{$height} * 0.5));
+  } @else {
+    left: calc(50% - (#{$width} * 0.5));
+    top: calc(50% - (#{$width} * 0.5));
+  }
+}
+
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: " ";
+    display: table;
+  }
+}
+
+@mixin delete {
+  @include cv.register-vars(
+    (
+      "delete-dimensions": 1.25rem,
+      "delete-background-l": 0%,
+      "delete-background-alpha": 0.5,
+      "delete-color": #{cv.getVar("white")},
+    )
+  );
+
+  appearance: none;
+  background-color: hsla(
+    #{cv.getVar("scheme-h")},
+    #{cv.getVar("scheme-s")},
+    #{cv.getVar("delete-background-l")},
+    #{cv.getVar("delete-background-alpha")}
+  );
+  border: none;
+  border-radius: cv.getVar("radius-rounded");
+  cursor: pointer;
+  pointer-events: auto;
+  display: inline-flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  font-size: 1em;
+  height: cv.getVar("delete-dimensions");
+  max-height: cv.getVar("delete-dimensions");
+  max-width: cv.getVar("delete-dimensions");
+  min-height: cv.getVar("delete-dimensions");
+  min-width: cv.getVar("delete-dimensions");
+  outline: none;
+  position: relative;
+  vertical-align: top;
+  width: cv.getVar("delete-dimensions");
+
+  &::before,
+  &::after {
+    background-color: cv.getVar("delete-color");
+    content: "";
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%) rotate(45deg);
+    transform-origin: center center;
+  }
+
+  &::before {
+    height: 2px;
+    width: 50%;
+  }
+
+  &::after {
+    height: 50%;
+    width: 2px;
+  }
+
+  &:hover,
+  &:focus {
+    @include cv.register-var("delete-background-alpha", 0.4);
+  }
+
+  &:active {
+    @include cv.register-var("delete-background-alpha", 0.5);
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    @include cv.register-var("delete-dimensions", 1rem);
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    @include cv.register-var("delete-dimensions", 1.5rem);
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    @include cv.register-var("delete-dimensions", 2rem);
+  }
+}
+
+@mixin fa($size, $dimensions) {
+  display: inline-block;
+  font-size: $size;
+  height: $dimensions;
+  line-height: $dimensions;
+  text-align: center;
+  vertical-align: top;
+  width: $dimensions;
+}
+
+@mixin burger($dimensions) {
+  align-items: center;
+  appearance: none;
+  background: none;
+  border: none;
+  border-radius: cv.getVar("burger-border-radius");
+  color: hsl(
+    cv.getVar("burger-h"),
+    cv.getVar("burger-s"),
+    cv.getVar("burger-l")
+  );
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: $dimensions;
+  justify-content: center;
+  position: relative;
+  vertical-align: top;
+  width: $dimensions;
+
+  span {
+    background-color: currentColor;
+    display: block;
+    height: cv.getVar("burger-item-height");
+    left: calc(50% - calc(#{cv.getVar("burger-item-width")}) / 2);
+    position: absolute;
+    transform-origin: center;
+    transition-duration: cv.getVar("duration");
+    transition-property: background-color, color, opacity, transform;
+    transition-timing-function: cv.getVar("easing");
+    width: cv.getVar("burger-item-width");
+
+    &:nth-child(1),
+    &:nth-child(2) {
+      top: calc(50% - calc(#{cv.getVar("burger-item-height")}) / 2);
+    }
+
+    &:nth-child(3) {
+      bottom: calc(50% + #{cv.getVar("burger-gap")});
+    }
+
+    &:nth-child(4) {
+      top: calc(50% + #{cv.getVar("burger-gap")});
+    }
+  }
+
+  &:hover {
+    background-color: hsla(
+      cv.getVar("burger-h"),
+      cv.getVar("burger-s"),
+      cv.getVar("burger-l"),
+      0.1
+    );
+  }
+
+  &:active {
+    background-color: hsla(
+      cv.getVar("burger-h"),
+      cv.getVar("burger-s"),
+      cv.getVar("burger-l"),
+      0.2
+    );
+  }
+
+  // Modifers
+  &.#{iv.$class-prefix}is-active {
+    span {
+      &:nth-child(1) {
+        transform: rotate(-45deg);
+      }
+
+      &:nth-child(2) {
+        transform: rotate(45deg);
+      }
+
+      &:nth-child(3),
+      &:nth-child(4) {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+@mixin overflow-touch {
+  -webkit-overflow-scrolling: touch;
+}
+
+@mixin placeholder {
+  $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
+
+  @each $placeholder in $placeholders {
+    &:#{$placeholder}-placeholder {
+      @content;
+    }
+  }
+}
+
+@mixin reset {
+  appearance: none;
+  background: none;
+  border: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+}
+
+@mixin selection($current-selector: false) {
+  @if $current-selector {
+    &::-moz-selection {
+      @content;
+    }
+    &::selection {
+      @content;
+    }
+  } @else {
+    ::-moz-selection {
+      @content;
+    }
+    ::selection {
+      @content;
+    }
+  }
+}
+
+// Responsiveness
+
+@mixin from($device) {
+  @media screen and (min-width: $device) {
+    @content;
+  }
+}
+
+@mixin until($device) {
+  @media screen and (max-width: ($device - 1px)) {
+    @content;
+  }
+}
+
+@mixin between($from, $until) {
+  @media screen and (min-width: $from) and (max-width: ($until - 1px)) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media screen and (max-width: (iv.$tablet - 1px)) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media screen and (min-width: iv.$tablet), print {
+    @content;
+  }
+}
+
+@mixin tablet-only {
+  @media screen and (min-width: iv.$tablet) and (max-width: (iv.$desktop - 1px)) {
+    @content;
+  }
+}
+
+@mixin touch {
+  @media screen and (max-width: (iv.$desktop - 1px)) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media screen and (min-width: iv.$desktop) {
+    @content;
+  }
+}
+
+@mixin desktop-only {
+  @if iv.$widescreen-enabled {
+    @media screen and (min-width: iv.$desktop) and (max-width: (iv.$widescreen - 1px)) {
+      @content;
+    }
+  }
+}
+
+@mixin until-widescreen {
+  @if iv.$widescreen-enabled {
+    @media screen and (max-width: (iv.$widescreen - 1px)) {
+      @content;
+    }
+  }
+}
+
+@mixin widescreen {
+  @if iv.$widescreen-enabled {
+    @media screen and (min-width: iv.$widescreen) {
+      @content;
+    }
+  }
+}
+
+@mixin widescreen-only {
+  @if iv.$widescreen-enabled and iv.$fullhd-enabled {
+    @media screen and (min-width: iv.$widescreen) and (max-width: (iv.$fullhd - 1px)) {
+      @content;
+    }
+  }
+}
+
+@mixin until-fullhd {
+  @if iv.$fullhd-enabled {
+    @media screen and (max-width: (iv.$fullhd - 1px)) {
+      @content;
+    }
+  }
+}
+
+@mixin fullhd {
+  @if iv.$fullhd-enabled {
+    @media screen and (min-width: iv.$fullhd) {
+      @content;
+    }
+  }
+}
+
+@mixin breakpoint($name) {
+  $breakpoint: map-get(iv.$breakpoints, $name);
+
+  @if $breakpoint {
+    $from: map-get($breakpoint, "from");
+    $until: map-get($breakpoint, "until");
+
+    @if $from and $until {
+      @include between($from, $until) {
+        @content;
+      }
+    } @else if $from {
+      @include from($from) {
+        @content;
+      }
+    } @else if $until {
+      @include until($until) {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin container-from($name, $width) {
+  @container #{$name} (min-width: #{$width}) {
+    @content;
+  }
+}
+
+@mixin container-until($name, $width) {
+  @container #{$name} (max-width: #{$width - 1px}) {
+    @content;
+  }
+}
+
+@mixin ltr {
+  @if not iv.$rtl {
+    @content;
+  }
+}
+
+@mixin rtl {
+  @if iv.$rtl {
+    @content;
+  }
+}
+
+@mixin ltr-property($property, $spacing, $right: true) {
+  $normal: if($right, "right", "left");
+  $opposite: if($right, "left", "right");
+
+  @if iv.$rtl {
+    #{$property}-#{$opposite}: $spacing;
+  } @else {
+    #{$property}-#{$normal}: $spacing;
+  }
+}
+
+@mixin ltr-position($spacing, $right: true) {
+  $normal: if($right, "right", "left");
+  $opposite: if($right, "left", "right");
+
+  @if iv.$rtl {
+    #{$opposite}: $spacing;
+  } @else {
+    #{$normal}: $spacing;
+  }
+}
+
+// Placeholders
+
+@mixin unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@mixin loader {
+  animation: spinAround 500ms infinite linear;
+  border: 2px solid cv.getVar("loading-color");
+  border-radius: cv.getVar("radius-rounded");
+  border-right-color: transparent;
+  border-top-color: transparent;
+  content: "";
+  display: block;
+  height: 1em;
+  position: relative;
+  width: 1em;
+}
+
+@mixin overlay($offset: 0) {
+  bottom: $offset;
+  left: $offset;
+  position: absolute;
+  right: $offset;
+  top: $offset;
+}

data/bulma-rails.gemspec

@@ -1,8 +1,6 @@
-# -*- encoding: utf-8 -*-
-
 Gem::Specification.new do |gem|
-  gem.name          = 'bulma-rails'
-  gem.version       = '0.9.4'
+  gem.name          = "bulma-rails"
+  gem.version       = "1.0.1"
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]
   gem.description   = %q{A modern CSS framework based on Flexbox}
@@ -11,7 +9,7 @@ Gem::Specification.new do |gem|
 
   gem.files         = `git ls-files`.split($\)
   gem.require_paths = ["lib"]
-  gem.license       = 'MIT'
+  gem.license       = "MIT"
 
-  gem.add_runtime_dependency 'sassc', '~> 2.0'
+  gem.add_runtime_dependency "dartsass-rails", "~> 0.5.0"
 end

metadata

@@ -1,29 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 0.9.4
+  version: 1.0.1
 platform: ruby
 authors:
 - Joshua Jansen
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-10-17 00:00:00.000000000 Z
+date: 2024-05-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: sassc
+  name: dartsass-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: 0.5.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.0'
+        version: 0.5.0
 description: A modern CSS framework based on Flexbox
 email:
 - joshuajansen88@gmail.com
@@ -33,78 +33,88 @@ extra_rdoc_files: []
 files:
 - ".gitignore"
 - README.md
-- app/assets/stylesheets/bulma.sass
-- app/assets/stylesheets/sass/base/_all.sass
-- app/assets/stylesheets/sass/base/animations.sass
-- app/assets/stylesheets/sass/base/generic.sass
-- app/assets/stylesheets/sass/base/helpers.sass
-- app/assets/stylesheets/sass/base/minireset.sass
-- app/assets/stylesheets/sass/components/_all.sass
-- app/assets/stylesheets/sass/components/breadcrumb.sass
-- app/assets/stylesheets/sass/components/card.sass
-- app/assets/stylesheets/sass/components/dropdown.sass
-- app/assets/stylesheets/sass/components/level.sass
-- app/assets/stylesheets/sass/components/media.sass
-- app/assets/stylesheets/sass/components/menu.sass
-- app/assets/stylesheets/sass/components/message.sass
-- app/assets/stylesheets/sass/components/modal.sass
-- app/assets/stylesheets/sass/components/navbar.sass
-- app/assets/stylesheets/sass/components/pagination.sass
-- app/assets/stylesheets/sass/components/panel.sass
-- app/assets/stylesheets/sass/components/tabs.sass
-- app/assets/stylesheets/sass/elements/_all.sass
-- app/assets/stylesheets/sass/elements/box.sass
-- app/assets/stylesheets/sass/elements/button.sass
-- app/assets/stylesheets/sass/elements/container.sass
-- app/assets/stylesheets/sass/elements/content.sass
-- app/assets/stylesheets/sass/elements/form.sass
-- app/assets/stylesheets/sass/elements/icon.sass
-- app/assets/stylesheets/sass/elements/image.sass
-- app/assets/stylesheets/sass/elements/notification.sass
-- app/assets/stylesheets/sass/elements/other.sass
-- app/assets/stylesheets/sass/elements/progress.sass
-- app/assets/stylesheets/sass/elements/table.sass
-- app/assets/stylesheets/sass/elements/tag.sass
-- app/assets/stylesheets/sass/elements/title.sass
-- app/assets/stylesheets/sass/form/_all.sass
-- app/assets/stylesheets/sass/form/checkbox-radio.sass
-- app/assets/stylesheets/sass/form/file.sass
-- app/assets/stylesheets/sass/form/input-textarea.sass
-- app/assets/stylesheets/sass/form/select.sass
-- app/assets/stylesheets/sass/form/shared.sass
-- app/assets/stylesheets/sass/form/tools.sass
-- app/assets/stylesheets/sass/grid/_all.sass
-- app/assets/stylesheets/sass/grid/columns.sass
-- app/assets/stylesheets/sass/grid/tiles.sass
-- app/assets/stylesheets/sass/helpers/_all.sass
-- app/assets/stylesheets/sass/helpers/color.sass
-- app/assets/stylesheets/sass/helpers/flexbox.sass
-- app/assets/stylesheets/sass/helpers/float.sass
-- app/assets/stylesheets/sass/helpers/other.sass
-- app/assets/stylesheets/sass/helpers/overflow.sass
-- app/assets/stylesheets/sass/helpers/position.sass
-- app/assets/stylesheets/sass/helpers/spacing.sass
-- app/assets/stylesheets/sass/helpers/typography.sass
-- app/assets/stylesheets/sass/helpers/visibility.sass
-- app/assets/stylesheets/sass/layout/_all.sass
-- app/assets/stylesheets/sass/layout/footer.sass
-- app/assets/stylesheets/sass/layout/hero.sass
-- app/assets/stylesheets/sass/layout/section.sass
-- app/assets/stylesheets/sass/utilities/_all.sass
-- app/assets/stylesheets/sass/utilities/animations.sass
-- app/assets/stylesheets/sass/utilities/controls.sass
-- app/assets/stylesheets/sass/utilities/derived-variables.sass
-- app/assets/stylesheets/sass/utilities/extends.sass
-- app/assets/stylesheets/sass/utilities/functions.sass
-- app/assets/stylesheets/sass/utilities/initial-variables.sass
-- app/assets/stylesheets/sass/utilities/mixins.sass
+- app/assets/stylesheets/bulma.scss
+- app/assets/stylesheets/sass/_index.scss
+- app/assets/stylesheets/sass/base/_index.scss
+- app/assets/stylesheets/sass/base/animations.scss
+- app/assets/stylesheets/sass/base/generic.scss
+- app/assets/stylesheets/sass/base/minireset.scss
+- app/assets/stylesheets/sass/base/skeleton.scss
+- app/assets/stylesheets/sass/components/_index.scss
+- app/assets/stylesheets/sass/components/breadcrumb.scss
+- app/assets/stylesheets/sass/components/card.scss
+- app/assets/stylesheets/sass/components/dropdown.scss
+- app/assets/stylesheets/sass/components/menu.scss
+- app/assets/stylesheets/sass/components/message.scss
+- app/assets/stylesheets/sass/components/modal.scss
+- app/assets/stylesheets/sass/components/navbar.scss
+- app/assets/stylesheets/sass/components/pagination.scss
+- app/assets/stylesheets/sass/components/panel.scss
+- app/assets/stylesheets/sass/components/tabs.scss
+- app/assets/stylesheets/sass/elements/_index.scss
+- app/assets/stylesheets/sass/elements/block.scss
+- app/assets/stylesheets/sass/elements/box.scss
+- app/assets/stylesheets/sass/elements/button.scss
+- app/assets/stylesheets/sass/elements/content.scss
+- app/assets/stylesheets/sass/elements/delete.scss
+- app/assets/stylesheets/sass/elements/icon.scss
+- app/assets/stylesheets/sass/elements/image.scss
+- app/assets/stylesheets/sass/elements/loader.scss
+- app/assets/stylesheets/sass/elements/notification.scss
+- app/assets/stylesheets/sass/elements/progress.scss
+- app/assets/stylesheets/sass/elements/table.scss
+- app/assets/stylesheets/sass/elements/tag.scss
+- app/assets/stylesheets/sass/elements/title.scss
+- app/assets/stylesheets/sass/form/_index.scss
+- app/assets/stylesheets/sass/form/checkbox-radio.scss
+- app/assets/stylesheets/sass/form/file.scss
+- app/assets/stylesheets/sass/form/input-textarea.scss
+- app/assets/stylesheets/sass/form/select.scss
+- app/assets/stylesheets/sass/form/shared.scss
+- app/assets/stylesheets/sass/form/tools.scss
+- app/assets/stylesheets/sass/grid/_index.scss
+- app/assets/stylesheets/sass/grid/columns-v2.scss
+- app/assets/stylesheets/sass/grid/columns.scss
+- app/assets/stylesheets/sass/grid/grid.scss
+- app/assets/stylesheets/sass/helpers/_index.scss
+- app/assets/stylesheets/sass/helpers/aspect-ratio.scss
+- app/assets/stylesheets/sass/helpers/border.scss
+- app/assets/stylesheets/sass/helpers/color.scss
+- app/assets/stylesheets/sass/helpers/flexbox.scss
+- app/assets/stylesheets/sass/helpers/float.scss
+- app/assets/stylesheets/sass/helpers/gap.scss
+- app/assets/stylesheets/sass/helpers/other.scss
+- app/assets/stylesheets/sass/helpers/overflow.scss
+- app/assets/stylesheets/sass/helpers/position.scss
+- app/assets/stylesheets/sass/helpers/spacing.scss
+- app/assets/stylesheets/sass/helpers/typography.scss
+- app/assets/stylesheets/sass/helpers/visibility.scss
+- app/assets/stylesheets/sass/layout/_index.scss
+- app/assets/stylesheets/sass/layout/container.scss
+- app/assets/stylesheets/sass/layout/footer.scss
+- app/assets/stylesheets/sass/layout/hero.scss
+- app/assets/stylesheets/sass/layout/level.scss
+- app/assets/stylesheets/sass/layout/media.scss
+- app/assets/stylesheets/sass/layout/section.scss
+- app/assets/stylesheets/sass/themes/_index.scss
+- app/assets/stylesheets/sass/themes/dark.scss
+- app/assets/stylesheets/sass/themes/light.scss
+- app/assets/stylesheets/sass/themes/setup.scss
+- app/assets/stylesheets/sass/utilities/_index.scss
+- app/assets/stylesheets/sass/utilities/controls.scss
+- app/assets/stylesheets/sass/utilities/css-variables.scss
+- app/assets/stylesheets/sass/utilities/derived-variables.scss
+- app/assets/stylesheets/sass/utilities/extends.scss
+- app/assets/stylesheets/sass/utilities/functions.scss
+- app/assets/stylesheets/sass/utilities/initial-variables.scss
+- app/assets/stylesheets/sass/utilities/mixins.scss
 - bulma-rails.gemspec
 - lib/bulma-rails.rb
 homepage: https://github.com/joshuajansen/bulma-rails
 licenses:
 - MIT
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -119,8 +129,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.3
-signing_key:
+rubygems_version: 3.3.5
+signing_key: 
 specification_version: 4
 summary: This gem adds the bulma.io assets to your asset pipeline so you can import
   them in your Rails project.

data/app/assets/stylesheets/bulma.sass

@@ -1,10 +0,0 @@
-@charset "utf-8"
-/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
-@import "sass/utilities/_all"
-@import "sass/base/_all"
-@import "sass/elements/_all"
-@import "sass/form/_all"
-@import "sass/components/_all"
-@import "sass/grid/_all"
-@import "sass/helpers/_all"
-@import "sass/layout/_all"