@bodynarf/react.components 1.14.0 → 1.14.2

package/components/primitives/slider/component/style.scss

@@ -1,3 +1,34 @@
+@use "sass:list";
+
+// Bulma variables - compatible with v0.9.x and v1.x
+// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
+// v1.x: CSS variables (--bulma-*) will be used if defined
+// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)
+
+// Colors
+$primary: var(--bulma-primary, #00d1b2);
+$white: var(--bulma-white, #fff);
+$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
+$grey-light: var(--bulma-grey-light, #b5b5b5);
+$grey: var(--bulma-grey, #7a7a7a);
+$radius: var(--bulma-radius, 4px);
+
+// Sizes - Sass variables for calculations
+$size-small: 0.75rem;
+$size-normal: 1rem;
+$size-medium: 1.25rem;
+$size-large: 1.5rem;
+
+// Color map for variations
+$colors: (
+    "primary": ($primary, $white),
+    "link": (var(--bulma-link, #485fc7), $white),
+    "info": (var(--bulma-info, #3e8ed0), $white),
+    "success": (var(--bulma-success, #48c78e), $white),
+    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
+    "danger": (var(--bulma-danger, #f14668), $white)
+);
+
 $slider-radius: $radius !default;
 $slider-track-background: $grey-lighter !default;
 $slider-track-radius: $radius !default;
@@ -246,7 +277,7 @@ input[type="range"].slider.bbr-slider {
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
+        $color: list.nth($pair, 1);
 
         &.is-#{$name} {
             &::-webkit-slider-runnable-track {
@@ -303,7 +334,7 @@ input[type="range"].slider.bbr-slider {
         }
 
         @each $name, $pair in $colors {
-            $color: nth($pair, 1);
+            $color: list.nth($pair, 1);
 
             &.is-#{$name} {
                 &::-webkit-slider-runnable-track {

package/components/primitives/switch/component/style.css

@@ -0,0 +1,430 @@
+.switch[type=checkbox].bbr-switch {
+  outline: 0;
+  user-select: none;
+  display: inline-block;
+  position: absolute;
+  opacity: 0;
+}
+.switch[type=checkbox].bbr-switch:focus + label::before {
+  outline: 1px dotted var(--bulma-grey-light, #b5b5b5);
+}
+.switch[type=checkbox].bbr-switch[disabled] {
+  cursor: not-allowed;
+}
+.switch[type=checkbox].bbr-switch[disabled] + label {
+  opacity: 0.5;
+}
+.switch[type=checkbox].bbr-switch[disabled] + label::before {
+  opacity: 0.5;
+}
+.switch[type=checkbox].bbr-switch[disabled] + label::after {
+  opacity: 0.5;
+}
+.switch[type=checkbox].bbr-switch[disabled] + label:hover {
+  cursor: not-allowed;
+}
+.switch[type=checkbox].bbr-switch:checked + label::before {
+  background: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch + label {
+  position: relative;
+  display: initial;
+  font-size: 1rem;
+  line-height: initial;
+  padding-left: 3.5rem;
+  padding-top: 0.2rem;
+  cursor: pointer;
+}
+.switch[type=checkbox].bbr-switch + label::before {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 3rem;
+  height: 1.5rem;
+  border: 0.1rem solid transparent;
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-grey-light, #b5b5b5);
+  content: "";
+}
+.switch[type=checkbox].bbr-switch + label::after {
+  display: block;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+  transform: translate3d(0, 0, 0);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-white, #fff);
+  transition: all 0.25s ease-out;
+  content: "";
+}
+.switch[type=checkbox].bbr-switch + label.is-empty {
+  padding-left: 3rem;
+  margin: 0 !important;
+}
+.switch[type=checkbox].bbr-switch.is-rtl + label {
+  padding-left: 0;
+  padding-right: 3.5rem;
+}
+.switch[type=checkbox].bbr-switch.is-rtl + label::before {
+  left: auto;
+  right: 0;
+}
+.switch[type=checkbox].bbr-switch.is-rtl + label::after {
+  left: auto;
+  right: 1.625rem;
+}
+.switch[type=checkbox].bbr-switch:checked + label::after {
+  left: 1.625rem;
+}
+.switch[type=checkbox].bbr-switch.is-rtl:checked + label::after {
+  left: auto;
+  right: 0.25rem;
+}
+.switch[type=checkbox].bbr-switch.is-outlined + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-grey-light, #b5b5b5);
+}
+.switch[type=checkbox].bbr-switch.is-outlined + label::after {
+  background: var(--bulma-grey-light, #b5b5b5);
+}
+.switch[type=checkbox].bbr-switch.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-outlined:checked + label::after {
+  background: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-thin + label::before {
+  top: 0.375rem;
+  height: 0.75rem;
+}
+.switch[type=checkbox].bbr-switch.is-rounded + label::before {
+  border-radius: 0.75rem;
+}
+.switch[type=checkbox].bbr-switch.is-rounded + label::after {
+  border-radius: 50%;
+}
+.switch[type=checkbox].bbr-switch.is-small + label {
+  position: relative;
+  display: initial;
+  font-size: 0.75rem;
+  line-height: initial;
+  padding-left: 2.75rem;
+  padding-top: 0.2rem;
+  cursor: pointer;
+}
+.switch[type=checkbox].bbr-switch.is-small + label::before {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 2.25rem;
+  height: 1.125rem;
+  border: 0.1rem solid transparent;
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-grey-light, #b5b5b5);
+  content: "";
+}
+.switch[type=checkbox].bbr-switch.is-small + label::after {
+  display: block;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  width: 0.625rem;
+  height: 0.625rem;
+  transform: translate3d(0, 0, 0);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-white, #fff);
+  transition: all 0.25s ease-out;
+  content: "";
+}
+.switch[type=checkbox].bbr-switch.is-small + label.is-empty {
+  padding-left: 2.25rem;
+  margin: 0 !important;
+}
+.switch[type=checkbox].bbr-switch.is-small.is-rtl + label {
+  padding-left: 0;
+  padding-right: 2.75rem;
+}
+.switch[type=checkbox].bbr-switch.is-small.is-rtl + label::before {
+  left: auto;
+  right: 0;
+}
+.switch[type=checkbox].bbr-switch.is-small.is-rtl + label::after {
+  left: auto;
+  right: 1.25rem;
+}
+.switch[type=checkbox].bbr-switch.is-small:checked + label::after {
+  left: 1.25rem;
+}
+.switch[type=checkbox].bbr-switch.is-small.is-rtl:checked + label::after {
+  left: auto;
+  right: 0.25rem;
+}
+.switch[type=checkbox].bbr-switch.is-small.is-outlined + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-grey-light, #b5b5b5);
+}
+.switch[type=checkbox].bbr-switch.is-small.is-outlined + label::after {
+  background: var(--bulma-grey-light, #b5b5b5);
+}
+.switch[type=checkbox].bbr-switch.is-small.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-small.is-outlined:checked + label::after {
+  background: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-small.is-thin + label::before {
+  top: 0.28125rem;
+  height: 0.5625rem;
+}
+.switch[type=checkbox].bbr-switch.is-small.is-rounded + label::before {
+  border-radius: 0.5625rem;
+}
+.switch[type=checkbox].bbr-switch.is-small.is-rounded + label::after {
+  border-radius: 50%;
+}
+.switch[type=checkbox].bbr-switch.is-medium + label {
+  position: relative;
+  display: initial;
+  font-size: 1.25rem;
+  line-height: initial;
+  padding-left: 4.25rem;
+  padding-top: 0.2rem;
+  cursor: pointer;
+}
+.switch[type=checkbox].bbr-switch.is-medium + label::before {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 3.75rem;
+  height: 1.875rem;
+  border: 0.1rem solid transparent;
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-grey-light, #b5b5b5);
+  content: "";
+}
+.switch[type=checkbox].bbr-switch.is-medium + label::after {
+  display: block;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  width: 1.375rem;
+  height: 1.375rem;
+  transform: translate3d(0, 0, 0);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-white, #fff);
+  transition: all 0.25s ease-out;
+  content: "";
+}
+.switch[type=checkbox].bbr-switch.is-medium + label.is-empty {
+  padding-left: 3.75rem;
+  margin: 0 !important;
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-rtl + label {
+  padding-left: 0;
+  padding-right: 4.25rem;
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-rtl + label::before {
+  left: auto;
+  right: 0;
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-rtl + label::after {
+  left: auto;
+  right: 2rem;
+}
+.switch[type=checkbox].bbr-switch.is-medium:checked + label::after {
+  left: 2rem;
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-rtl:checked + label::after {
+  left: auto;
+  right: 0.25rem;
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-outlined + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-grey-light, #b5b5b5);
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-outlined + label::after {
+  background: var(--bulma-grey-light, #b5b5b5);
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-outlined:checked + label::after {
+  background: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-thin + label::before {
+  top: 0.46875rem;
+  height: 0.9375rem;
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-rounded + label::before {
+  border-radius: 0.9375rem;
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-rounded + label::after {
+  border-radius: 50%;
+}
+.switch[type=checkbox].bbr-switch.is-large + label {
+  position: relative;
+  display: initial;
+  font-size: 1.5rem;
+  line-height: initial;
+  padding-left: 5rem;
+  padding-top: 0.2rem;
+  cursor: pointer;
+}
+.switch[type=checkbox].bbr-switch.is-large + label::before {
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 4.5rem;
+  height: 2.25rem;
+  border: 0.1rem solid transparent;
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-grey-light, #b5b5b5);
+  content: "";
+}
+.switch[type=checkbox].bbr-switch.is-large + label::after {
+  display: block;
+  position: absolute;
+  top: 0.25rem;
+  left: 0.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  transform: translate3d(0, 0, 0);
+  border-radius: var(--bulma-radius, 4px);
+  background: var(--bulma-white, #fff);
+  transition: all 0.25s ease-out;
+  content: "";
+}
+.switch[type=checkbox].bbr-switch.is-large + label.is-empty {
+  padding-left: 4.5rem;
+  margin: 0 !important;
+}
+.switch[type=checkbox].bbr-switch.is-large.is-rtl + label {
+  padding-left: 0;
+  padding-right: 5rem;
+}
+.switch[type=checkbox].bbr-switch.is-large.is-rtl + label::before {
+  left: auto;
+  right: 0;
+}
+.switch[type=checkbox].bbr-switch.is-large.is-rtl + label::after {
+  left: auto;
+  right: 2.375rem;
+}
+.switch[type=checkbox].bbr-switch.is-large:checked + label::after {
+  left: 2.375rem;
+}
+.switch[type=checkbox].bbr-switch.is-large.is-rtl:checked + label::after {
+  left: auto;
+  right: 0.25rem;
+}
+.switch[type=checkbox].bbr-switch.is-large.is-outlined + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-grey-light, #b5b5b5);
+}
+.switch[type=checkbox].bbr-switch.is-large.is-outlined + label::after {
+  background: var(--bulma-grey-light, #b5b5b5);
+}
+.switch[type=checkbox].bbr-switch.is-large.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-large.is-outlined:checked + label::after {
+  background: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-large.is-thin + label::before {
+  top: 0.5625rem;
+  height: 1.125rem;
+}
+.switch[type=checkbox].bbr-switch.is-large.is-rounded + label::before {
+  border-radius: 1.125rem;
+}
+.switch[type=checkbox].bbr-switch.is-large.is-rounded + label::after {
+  border-radius: 50%;
+}
+.switch[type=checkbox].bbr-switch.is-primary:checked + label::before {
+  background: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-primary.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-primary, #00d1b2) !important;
+}
+.switch[type=checkbox].bbr-switch.is-primary.is-outlined:checked + label::after {
+  background: var(--bulma-primary, #00d1b2);
+}
+.switch[type=checkbox].bbr-switch.is-primary.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}
+.switch[type=checkbox].bbr-switch.is-link:checked + label::before {
+  background: var(--bulma-link, #485fc7);
+}
+.switch[type=checkbox].bbr-switch.is-link.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-link, #485fc7) !important;
+}
+.switch[type=checkbox].bbr-switch.is-link.is-outlined:checked + label::after {
+  background: var(--bulma-link, #485fc7);
+}
+.switch[type=checkbox].bbr-switch.is-link.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}
+.switch[type=checkbox].bbr-switch.is-info:checked + label::before {
+  background: var(--bulma-info, #3e8ed0);
+}
+.switch[type=checkbox].bbr-switch.is-info.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-info, #3e8ed0) !important;
+}
+.switch[type=checkbox].bbr-switch.is-info.is-outlined:checked + label::after {
+  background: var(--bulma-info, #3e8ed0);
+}
+.switch[type=checkbox].bbr-switch.is-info.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}
+.switch[type=checkbox].bbr-switch.is-success:checked + label::before {
+  background: var(--bulma-success, #48c78e);
+}
+.switch[type=checkbox].bbr-switch.is-success.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-success, #48c78e) !important;
+}
+.switch[type=checkbox].bbr-switch.is-success.is-outlined:checked + label::after {
+  background: var(--bulma-success, #48c78e);
+}
+.switch[type=checkbox].bbr-switch.is-success.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}
+.switch[type=checkbox].bbr-switch.is-warning:checked + label::before {
+  background: var(--bulma-warning, #ffe08a);
+}
+.switch[type=checkbox].bbr-switch.is-warning.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-warning, #ffe08a) !important;
+}
+.switch[type=checkbox].bbr-switch.is-warning.is-outlined:checked + label::after {
+  background: var(--bulma-warning, #ffe08a);
+}
+.switch[type=checkbox].bbr-switch.is-warning.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}
+.switch[type=checkbox].bbr-switch.is-danger:checked + label::before {
+  background: var(--bulma-danger, #f14668);
+}
+.switch[type=checkbox].bbr-switch.is-danger.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: var(--bulma-danger, #f14668) !important;
+}
+.switch[type=checkbox].bbr-switch.is-danger.is-outlined:checked + label::after {
+  background: var(--bulma-danger, #f14668);
+}
+.switch[type=checkbox].bbr-switch.is-danger.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}

package/components/primitives/switch/component/style.scss

@@ -1,3 +1,34 @@
+@use "sass:list";
+
+// Bulma variables - compatible with v0.9.x and v1.x
+// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
+// v1.x: CSS variables (--bulma-*) will be used if defined
+// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)
+
+// Colors
+$primary: var(--bulma-primary, #00d1b2);
+$white: var(--bulma-white, #fff);
+$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
+$grey-light: var(--bulma-grey-light, #b5b5b5);
+$grey: var(--bulma-grey, #7a7a7a);
+$radius: var(--bulma-radius, 4px);
+
+// Sizes - Sass variables for calculations
+$size-small: 0.75rem;
+$size-normal: 1rem;
+$size-medium: 1.25rem;
+$size-large: 1.5rem;
+
+// Color map for variations
+$colors: (
+    "primary": ($primary, $white),
+    "link": (var(--bulma-link, #485fc7), $white),
+    "info": (var(--bulma-info, #3e8ed0), $white),
+    "success": (var(--bulma-success, #48c78e), $white),
+    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
+    "danger": (var(--bulma-danger, #f14668), $white)
+);
+
 $switch-background: $grey-light !default;
 $switch-border: 0.1rem solid transparent !default;
 $switch-background-active: $primary !default;
@@ -179,8 +210,8 @@ $switch-focus: 1px dotted $grey-light !default;
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
-        $color-invert: nth($pair, 2);
+        $color: list.nth($pair, 1);
+        $color-invert: list.nth($pair, 2);
 
         &.is-#{$name} {
             &:checked + label::before {

package/components/primitives/timePicker/component/style.css

@@ -0,0 +1,21 @@
+.control.is-loading input[type=time]::-webkit-calendar-picker-indicator {
+  display: none;
+}
+
+.control input[type=time] {
+  padding-right: 2.5rem;
+}
+.control input[type=time]::-webkit-calendar-picker-indicator {
+  position: absolute;
+  right: 0.75rem;
+  cursor: pointer;
+}
+.control input[type=time].is-small {
+  padding-right: 2rem;
+}
+.control input[type=time].is-medium {
+  padding-right: 3rem;
+}
+.control input[type=time].is-large {
+  padding-right: 3.5rem;
+}

package/components/progress/component/style.css

@@ -0,0 +1,167 @@
+.bbr-progress {
+  width: 100%;
+  appearance: none;
+  height: 1rem;
+  border: none;
+  border-radius: var(--bulma-radius, 4px);
+  background-color: var(--bulma-background, #f5f5f5);
+  overflow: hidden;
+}
+.bbr-progress.bbr-progress--animated {
+  position: relative;
+  background-color: var(--bulma-background, #f5f5f5);
+}
+.bbr-progress.bbr-progress--animated .bbr-progress-fill {
+  height: 100%;
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
+  transition: width var(--bulma-speed, 0.25s);
+  animation: bbr-progress-animated 1s linear infinite;
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-size: 1rem 1rem;
+}
+.bbr-progress.bbr-progress--animated.is-primary .bbr-progress-fill {
+  background-color: var(--bulma-primary, #00d1b2);
+}
+.bbr-progress.bbr-progress--animated.is-link .bbr-progress-fill {
+  background-color: var(--bulma-link, #485fc7);
+}
+.bbr-progress.bbr-progress--animated.is-info .bbr-progress-fill {
+  background-color: var(--bulma-info, #3e8ed0);
+}
+.bbr-progress.bbr-progress--animated.is-success .bbr-progress-fill {
+  background-color: var(--bulma-success, #48c78e);
+}
+.bbr-progress.bbr-progress--animated.is-warning .bbr-progress-fill {
+  background-color: var(--bulma-warning, #ffe08a);
+}
+.bbr-progress.bbr-progress--animated.is-danger .bbr-progress-fill {
+  background-color: var(--bulma-danger, #f14668);
+}
+.bbr-progress::-webkit-progress-bar {
+  background-color: var(--bulma-background, #f5f5f5);
+  border-radius: var(--bulma-radius, 4px);
+}
+.bbr-progress::-webkit-progress-value {
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
+  transition: width var(--bulma-speed, 0.25s);
+}
+.bbr-progress::-moz-progress-bar {
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
+}
+.bbr-progress-value {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--bulma-text, #4a4a4a);
+  text-align: center;
+}
+.bbr-progress.is-small {
+  height: 0.75rem;
+}
+.bbr-progress.is-normal {
+  height: 1rem;
+}
+.bbr-progress.is-medium {
+  height: 1.25rem;
+}
+.bbr-progress.is-large {
+  height: 1.5rem;
+}
+.bbr-progress.is-primary::-webkit-progress-value {
+  background-color: var(--bulma-primary, #00d1b2);
+}
+.bbr-progress.is-primary::-moz-progress-bar {
+  background-color: var(--bulma-primary, #00d1b2);
+}
+.bbr-progress.is-link::-webkit-progress-value {
+  background-color: var(--bulma-link, #485fc7);
+}
+.bbr-progress.is-link::-moz-progress-bar {
+  background-color: var(--bulma-link, #485fc7);
+}
+.bbr-progress.is-info::-webkit-progress-value {
+  background-color: var(--bulma-info, #3e8ed0);
+}
+.bbr-progress.is-info::-moz-progress-bar {
+  background-color: var(--bulma-info, #3e8ed0);
+}
+.bbr-progress.is-success::-webkit-progress-value {
+  background-color: var(--bulma-success, #48c78e);
+}
+.bbr-progress.is-success::-moz-progress-bar {
+  background-color: var(--bulma-success, #48c78e);
+}
+.bbr-progress.is-warning::-webkit-progress-value {
+  background-color: var(--bulma-warning, #ffe08a);
+}
+.bbr-progress.is-warning::-moz-progress-bar {
+  background-color: var(--bulma-warning, #ffe08a);
+}
+.bbr-progress.is-danger::-webkit-progress-value {
+  background-color: var(--bulma-danger, #f14668);
+}
+.bbr-progress.is-danger::-moz-progress-bar {
+  background-color: var(--bulma-danger, #f14668);
+}
+.bbr-progress--animated::-webkit-progress-value {
+  animation: bbr-progress-animated 2s linear infinite;
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-size: 1rem 1rem;
+}
+.bbr-progress--animated::-moz-progress-bar {
+  animation: bbr-progress-animated 2s linear infinite;
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
+  background-size: 1rem 1rem;
+}
+.bbr-progress--indeterminate {
+  position: relative;
+  background-color: var(--bulma-background, #f5f5f5);
+}
+.bbr-progress--indeterminate::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 50%;
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
+  animation: bbr-progress-indeterminate 1.5s ease-in-out infinite;
+}
+.bbr-progress--indeterminate.is-primary::after {
+  background-color: var(--bulma-primary, #00d1b2);
+}
+.bbr-progress--indeterminate.is-link::after {
+  background-color: var(--bulma-link, #485fc7);
+}
+.bbr-progress--indeterminate.is-info::after {
+  background-color: var(--bulma-info, #3e8ed0);
+}
+.bbr-progress--indeterminate.is-success::after {
+  background-color: var(--bulma-success, #48c78e);
+}
+.bbr-progress--indeterminate.is-warning::after {
+  background-color: var(--bulma-warning, #ffe08a);
+}
+.bbr-progress--indeterminate.is-danger::after {
+  background-color: var(--bulma-danger, #f14668);
+}
+
+@keyframes bbr-progress-animated {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 1rem 0;
+  }
+}
+@keyframes bbr-progress-indeterminate {
+  0% {
+    left: -50%;
+  }
+  100% {
+    left: 100%;
+  }
+}