@bodynarf/react.components 1.14.0 → 1.14.2

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

@@ -0,0 +1,302 @@
+.bbr-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.bbr-radio-group.is-horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.bbr-radio-item {
+  display: flex;
+  align-items: center;
+}
+
+.is-checkradio.bbr-radio[type=radio] {
+  outline: 0;
+  user-select: none;
+  display: inline-block;
+  position: absolute;
+  opacity: 0;
+}
+.is-checkradio.bbr-radio[type=radio] + label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-left: 1.75rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1.25;
+  min-height: 1.5rem;
+}
+.is-checkradio.bbr-radio[type=radio] + label::before {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 0.1rem solid var(--bulma-grey-lighter, #dbdbdb);
+  border-radius: 50%;
+  background: transparent;
+  content: "";
+  transition: background 0.15s ease-out, border-color 0.15s ease-out;
+}
+.is-checkradio.bbr-radio[type=radio] + label::after {
+  position: absolute;
+  left: 0.3125rem;
+  top: 50%;
+  transform: translateY(-50%) scale(0);
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 50%;
+  background: var(--bulma-primary, #00d1b2);
+  content: "";
+  transition: transform 0.15s ease-out;
+}
+.is-checkradio.bbr-radio[type=radio]:checked + label::after {
+  transform: translateY(-50%) scale(1);
+}
+.is-checkradio.bbr-radio[type=radio]:checked + label::before {
+  border-color: var(--bulma-primary, #00d1b2);
+}
+.is-checkradio.bbr-radio[type=radio]:focus + label::before {
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
+}
+.is-checkradio.bbr-radio[type=radio]:hover:not(:disabled) + label::before {
+  border-color: var(--bulma-grey-light, #b5b5b5);
+}
+.is-checkradio.bbr-radio[type=radio]:disabled {
+  cursor: not-allowed;
+}
+.is-checkradio.bbr-radio[type=radio]:disabled + label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.is-checkradio.bbr-radio[type=radio].is-circle + label::before {
+  border-radius: 50%;
+}
+.is-checkradio.bbr-radio[type=radio].is-circle + label::after {
+  border-radius: 50%;
+}
+.is-checkradio.bbr-radio[type=radio].is-block + label {
+  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+  background: var(--bulma-white-bis, #fafafa);
+  border-radius: var(--bulma-radius, 4px);
+  width: 100%;
+}
+.is-checkradio.bbr-radio[type=radio].is-block + label::before {
+  left: 0.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-block + label::after {
+  left: 0.8125rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-block + label:hover {
+  background: var(--bulma-white-ter, #f5f5f5);
+}
+.is-checkradio.bbr-radio[type=radio].is-block:checked + label {
+  background: rgba(var(--bulma-primary, #00d1b2), 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].has-no-border + label::before {
+  border: none;
+  background: var(--bulma-grey-lighter, #dbdbdb);
+}
+.is-checkradio.bbr-radio[type=radio].has-no-border:checked + label::before {
+  background: rgba(var(--bulma-primary, #00d1b2), 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].has-background-color + label::before {
+  background: var(--bulma-white-ter, #f5f5f5);
+}
+.is-checkradio.bbr-radio[type=radio].has-background-color:checked + label::before {
+  background: rgba(var(--bulma-primary, #00d1b2), 0.15);
+  border-color: var(--bulma-primary, #00d1b2);
+}
+.is-checkradio.bbr-radio[type=radio].is-small + label {
+  font-size: 0.75rem;
+  padding-left: 1.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small + label::before {
+  width: 1rem;
+  height: 1rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small + label::after {
+  width: 0.5rem;
+  height: 0.5rem;
+  left: 0.25rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small.is-block + label {
+  padding-left: 2rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small.is-block + label::before {
+  left: 0.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-small.is-block + label::after {
+  left: 0.75rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium + label {
+  font-size: 1.25rem;
+  padding-left: 2rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium + label::before {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium + label::after {
+  width: 0.75rem;
+  height: 0.75rem;
+  left: 0.375rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium.is-block + label {
+  padding-left: 2.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium.is-block + label::before {
+  left: 0.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-medium.is-block + label::after {
+  left: 0.875rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large + label {
+  font-size: 1.5rem;
+  padding-left: 2.25rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large + label::before {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large + label::after {
+  width: 0.875rem;
+  height: 0.875rem;
+  left: 0.4375rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large.is-block + label {
+  padding-left: 2.75rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large.is-block + label::before {
+  left: 0.5rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-large.is-block + label::after {
+  left: 0.9375rem;
+}
+.is-checkradio.bbr-radio[type=radio].is-primary:checked + label::before {
+  border-color: var(--bulma-primary, #00d1b2);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary:checked + label::after {
+  background: var(--bulma-primary, #00d1b2);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary:focus + label::before {
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary.is-block:checked + label {
+  background: rgba(var(--bulma-primary, #00d1b2), 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary.has-background-color:checked + label::before {
+  background: rgba(var(--bulma-primary, #00d1b2), 0.15);
+  border-color: var(--bulma-primary, #00d1b2);
+}
+.is-checkradio.bbr-radio[type=radio].is-primary.has-no-border:checked + label::before {
+  background: rgba(var(--bulma-primary, #00d1b2), 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-link:checked + label::before {
+  border-color: var(--bulma-link, #485fc7);
+}
+.is-checkradio.bbr-radio[type=radio].is-link:checked + label::after {
+  background: var(--bulma-link, #485fc7);
+}
+.is-checkradio.bbr-radio[type=radio].is-link:focus + label::before {
+  border-color: var(--bulma-link, #485fc7);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-link, #485fc7), 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-link.is-block:checked + label {
+  background: rgba(var(--bulma-link, #485fc7), 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-link.has-background-color:checked + label::before {
+  background: rgba(var(--bulma-link, #485fc7), 0.15);
+  border-color: var(--bulma-link, #485fc7);
+}
+.is-checkradio.bbr-radio[type=radio].is-link.has-no-border:checked + label::before {
+  background: rgba(var(--bulma-link, #485fc7), 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-info:checked + label::before {
+  border-color: var(--bulma-info, #3e8ed0);
+}
+.is-checkradio.bbr-radio[type=radio].is-info:checked + label::after {
+  background: var(--bulma-info, #3e8ed0);
+}
+.is-checkradio.bbr-radio[type=radio].is-info:focus + label::before {
+  border-color: var(--bulma-info, #3e8ed0);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-info, #3e8ed0), 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-info.is-block:checked + label {
+  background: rgba(var(--bulma-info, #3e8ed0), 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-info.has-background-color:checked + label::before {
+  background: rgba(var(--bulma-info, #3e8ed0), 0.15);
+  border-color: var(--bulma-info, #3e8ed0);
+}
+.is-checkradio.bbr-radio[type=radio].is-info.has-no-border:checked + label::before {
+  background: rgba(var(--bulma-info, #3e8ed0), 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-success:checked + label::before {
+  border-color: var(--bulma-success, #48c78e);
+}
+.is-checkradio.bbr-radio[type=radio].is-success:checked + label::after {
+  background: var(--bulma-success, #48c78e);
+}
+.is-checkradio.bbr-radio[type=radio].is-success:focus + label::before {
+  border-color: var(--bulma-success, #48c78e);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-success, #48c78e), 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-success.is-block:checked + label {
+  background: rgba(var(--bulma-success, #48c78e), 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-success.has-background-color:checked + label::before {
+  background: rgba(var(--bulma-success, #48c78e), 0.15);
+  border-color: var(--bulma-success, #48c78e);
+}
+.is-checkradio.bbr-radio[type=radio].is-success.has-no-border:checked + label::before {
+  background: rgba(var(--bulma-success, #48c78e), 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning:checked + label::before {
+  border-color: var(--bulma-warning, #ffe08a);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning:checked + label::after {
+  background: var(--bulma-warning, #ffe08a);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning:focus + label::before {
+  border-color: var(--bulma-warning, #ffe08a);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-warning, #ffe08a), 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning.is-block:checked + label {
+  background: rgba(var(--bulma-warning, #ffe08a), 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning.has-background-color:checked + label::before {
+  background: rgba(var(--bulma-warning, #ffe08a), 0.15);
+  border-color: var(--bulma-warning, #ffe08a);
+}
+.is-checkradio.bbr-radio[type=radio].is-warning.has-no-border:checked + label::before {
+  background: rgba(var(--bulma-warning, #ffe08a), 0.2);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger:checked + label::before {
+  border-color: var(--bulma-danger, #f14668);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger:checked + label::after {
+  background: var(--bulma-danger, #f14668);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger:focus + label::before {
+  border-color: var(--bulma-danger, #f14668);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-danger, #f14668), 0.25);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger.is-block:checked + label {
+  background: rgba(var(--bulma-danger, #f14668), 0.1);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger.has-background-color:checked + label::before {
+  background: rgba(var(--bulma-danger, #f14668), 0.15);
+  border-color: var(--bulma-danger, #f14668);
+}
+.is-checkradio.bbr-radio[type=radio].is-danger.has-no-border:checked + label::before {
+  background: rgba(var(--bulma-danger, #f14668), 0.2);
+}

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

@@ -1,3 +1,36 @@
+@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);
+$white-bis: var(--bulma-white-bis, #fafafa);
+$white-ter: var(--bulma-white-ter, #f5f5f5);
+$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)
+);
+
 .bbr-radio-group {
     display: flex;
     flex-direction: column;
@@ -236,7 +269,7 @@
 
     // Color variations
     @each $name, $pair in $colors {
-        $color: nth($pair, 1);
+        $color: list.nth($pair, 1);
 
         &.is-#{$name} {
             &:checked + label::before {

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

@@ -0,0 +1,358 @@
+.bbr-slider-container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-top: 0.5rem;
+}
+.bbr-slider-container.is-vertical {
+  flex-direction: row;
+  width: auto;
+  height: 200px;
+  padding-top: 0;
+  padding-left: 0.5rem;
+}
+
+.bbr-slider-output {
+  position: absolute;
+  top: -1.5rem;
+  display: inline-block;
+  width: 3rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  text-align: center;
+  color: var(--bulma-white, #fff);
+  background-color: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
+  pointer-events: none;
+}
+.bbr-slider-output::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: var(--bulma-primary, #00d1b2) transparent transparent transparent;
+}
+
+.bbr-slider-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--bulma-grey, #7a7a7a);
+}
+
+input[type=range].slider.bbr-slider {
+  --progress-percent: 0%;
+  appearance: none;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+input[type=range].slider.bbr-slider::-webkit-slider-runnable-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5rem;
+  background: linear-gradient(to right, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+  border: 0px solid var(--bulma-grey, #7a7a7a);
+  border-radius: var(--bulma-radius, 4px);
+  box-shadow: 0px 0px 0px var(--bulma-grey, #7a7a7a);
+}
+input[type=range].slider.bbr-slider::-moz-range-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--bulma-grey-lighter, #dbdbdb);
+  border: 0px solid var(--bulma-grey, #7a7a7a);
+  border-radius: var(--bulma-radius, 4px);
+  box-shadow: 0px 0px 0px var(--bulma-grey, #7a7a7a);
+}
+input[type=range].slider.bbr-slider::-moz-range-progress {
+  height: 0.5rem;
+  background: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
+}
+input[type=range].slider.bbr-slider::-ms-track {
+  box-sizing: border-box;
+  width: 100%;
+  height: 0.5rem;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range].slider.bbr-slider::-ms-fill-lower {
+  background: var(--bulma-primary, #00d1b2);
+  border-radius: var(--bulma-radius, 4px);
+}
+input[type=range].slider.bbr-slider::-ms-fill-upper {
+  background: var(--bulma-grey-lighter, #dbdbdb);
+  border-radius: var(--bulma-radius, 4px);
+}
+input[type=range].slider.bbr-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.25rem;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-light, #b5b5b5);
+  border-radius: var(--bulma-radius, 4px);
+  box-shadow: none;
+  transition: transform 0.2s ease;
+}
+input[type=range].slider.bbr-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+}
+input[type=range].slider.bbr-slider::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-light, #b5b5b5);
+  border-radius: var(--bulma-radius, 4px);
+  box-shadow: none;
+  transition: transform 0.2s ease;
+}
+input[type=range].slider.bbr-slider::-moz-range-thumb:hover {
+  transform: scale(1.1);
+}
+input[type=range].slider.bbr-slider::-ms-thumb {
+  width: 1rem;
+  height: 1rem;
+  background: var(--bulma-white, #fff);
+  border: 1px solid var(--bulma-grey-light, #b5b5b5);
+  border-radius: var(--bulma-radius, 4px);
+  box-shadow: none;
+}
+input[type=range].slider.bbr-slider:focus {
+  outline: none;
+}
+input[type=range].slider.bbr-slider:focus::-webkit-slider-thumb {
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
+}
+input[type=range].slider.bbr-slider:focus::-moz-range-thumb {
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
+}
+input[type=range].slider.bbr-slider:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+input[type=range].slider.bbr-slider.is-circle::-webkit-slider-thumb {
+  border-radius: 50%;
+}
+input[type=range].slider.bbr-slider.is-circle::-moz-range-thumb {
+  border-radius: 50%;
+}
+input[type=range].slider.bbr-slider.is-circle::-ms-thumb {
+  border-radius: 50%;
+}
+input[type=range].slider.bbr-slider.is-small::-webkit-slider-runnable-track {
+  height: 0.375rem;
+}
+input[type=range].slider.bbr-slider.is-small::-moz-range-track {
+  height: 0.375rem;
+}
+input[type=range].slider.bbr-slider.is-small::-ms-track {
+  height: 0.375rem;
+}
+input[type=range].slider.bbr-slider.is-small::-webkit-slider-thumb {
+  height: 0.75rem;
+  width: 0.75rem;
+  margin-top: -0.1875rem;
+}
+input[type=range].slider.bbr-slider.is-small::-moz-range-thumb {
+  height: 0.75rem;
+  width: 0.75rem;
+}
+input[type=range].slider.bbr-slider.is-small::-ms-thumb {
+  height: 0.75rem;
+  width: 0.75rem;
+  margin-top: 0;
+}
+input[type=range].slider.bbr-slider.is-medium::-webkit-slider-runnable-track {
+  height: 0.625rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-moz-range-track {
+  height: 0.625rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-ms-track {
+  height: 0.625rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-webkit-slider-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-top: -0.3125rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-moz-range-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+input[type=range].slider.bbr-slider.is-medium::-ms-thumb {
+  height: 1.25rem;
+  width: 1.25rem;
+  margin-top: 0;
+}
+input[type=range].slider.bbr-slider.is-large::-webkit-slider-runnable-track {
+  height: 0.75rem;
+}
+input[type=range].slider.bbr-slider.is-large::-moz-range-track {
+  height: 0.75rem;
+}
+input[type=range].slider.bbr-slider.is-large::-ms-track {
+  height: 0.75rem;
+}
+input[type=range].slider.bbr-slider.is-large::-webkit-slider-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-top: -0.375rem;
+}
+input[type=range].slider.bbr-slider.is-large::-moz-range-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+input[type=range].slider.bbr-slider.is-large::-ms-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-top: 0;
+}
+input[type=range].slider.bbr-slider.is-primary::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-primary::-moz-range-progress {
+  background: var(--bulma-primary, #00d1b2);
+}
+input[type=range].slider.bbr-slider.is-primary::-ms-fill-lower {
+  background: var(--bulma-primary, #00d1b2);
+}
+input[type=range].slider.bbr-slider.is-primary:focus::-webkit-slider-thumb {
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
+}
+input[type=range].slider.bbr-slider.is-primary:focus::-moz-range-thumb {
+  border-color: var(--bulma-primary, #00d1b2);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-primary, #00d1b2), 0.25);
+}
+input[type=range].slider.bbr-slider.is-link::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--bulma-link, #485fc7) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-link::-moz-range-progress {
+  background: var(--bulma-link, #485fc7);
+}
+input[type=range].slider.bbr-slider.is-link::-ms-fill-lower {
+  background: var(--bulma-link, #485fc7);
+}
+input[type=range].slider.bbr-slider.is-link:focus::-webkit-slider-thumb {
+  border-color: var(--bulma-link, #485fc7);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-link, #485fc7), 0.25);
+}
+input[type=range].slider.bbr-slider.is-link:focus::-moz-range-thumb {
+  border-color: var(--bulma-link, #485fc7);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-link, #485fc7), 0.25);
+}
+input[type=range].slider.bbr-slider.is-info::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--bulma-info, #3e8ed0) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-info::-moz-range-progress {
+  background: var(--bulma-info, #3e8ed0);
+}
+input[type=range].slider.bbr-slider.is-info::-ms-fill-lower {
+  background: var(--bulma-info, #3e8ed0);
+}
+input[type=range].slider.bbr-slider.is-info:focus::-webkit-slider-thumb {
+  border-color: var(--bulma-info, #3e8ed0);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-info, #3e8ed0), 0.25);
+}
+input[type=range].slider.bbr-slider.is-info:focus::-moz-range-thumb {
+  border-color: var(--bulma-info, #3e8ed0);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-info, #3e8ed0), 0.25);
+}
+input[type=range].slider.bbr-slider.is-success::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--bulma-success, #48c78e) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-success::-moz-range-progress {
+  background: var(--bulma-success, #48c78e);
+}
+input[type=range].slider.bbr-slider.is-success::-ms-fill-lower {
+  background: var(--bulma-success, #48c78e);
+}
+input[type=range].slider.bbr-slider.is-success:focus::-webkit-slider-thumb {
+  border-color: var(--bulma-success, #48c78e);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-success, #48c78e), 0.25);
+}
+input[type=range].slider.bbr-slider.is-success:focus::-moz-range-thumb {
+  border-color: var(--bulma-success, #48c78e);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-success, #48c78e), 0.25);
+}
+input[type=range].slider.bbr-slider.is-warning::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--bulma-warning, #ffe08a) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-warning::-moz-range-progress {
+  background: var(--bulma-warning, #ffe08a);
+}
+input[type=range].slider.bbr-slider.is-warning::-ms-fill-lower {
+  background: var(--bulma-warning, #ffe08a);
+}
+input[type=range].slider.bbr-slider.is-warning:focus::-webkit-slider-thumb {
+  border-color: var(--bulma-warning, #ffe08a);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-warning, #ffe08a), 0.25);
+}
+input[type=range].slider.bbr-slider.is-warning:focus::-moz-range-thumb {
+  border-color: var(--bulma-warning, #ffe08a);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-warning, #ffe08a), 0.25);
+}
+input[type=range].slider.bbr-slider.is-danger::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--bulma-danger, #f14668) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-danger::-moz-range-progress {
+  background: var(--bulma-danger, #f14668);
+}
+input[type=range].slider.bbr-slider.is-danger::-ms-fill-lower {
+  background: var(--bulma-danger, #f14668);
+}
+input[type=range].slider.bbr-slider.is-danger:focus::-webkit-slider-thumb {
+  border-color: var(--bulma-danger, #f14668);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-danger, #f14668), 0.25);
+}
+input[type=range].slider.bbr-slider.is-danger:focus::-moz-range-thumb {
+  border-color: var(--bulma-danger, #f14668);
+  box-shadow: 0 0 0 0.125em rgba(var(--bulma-danger, #f14668), 0.25);
+}
+input[type=range].slider.bbr-slider.is-vertical {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  width: 0.5rem;
+  height: 100%;
+  min-height: 100px;
+}
+input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-runnable-track {
+  width: 0.5rem;
+  height: 100%;
+  background: linear-gradient(to top, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-thumb {
+  margin-top: 0;
+  margin-left: -0.25rem;
+}
+input[type=range].slider.bbr-slider.is-vertical.is-primary::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, var(--bulma-primary, #00d1b2) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-link::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, var(--bulma-link, #485fc7) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-info::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, var(--bulma-info, #3e8ed0) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-success::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, var(--bulma-success, #48c78e) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-warning::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, var(--bulma-warning, #ffe08a) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}
+input[type=range].slider.bbr-slider.is-vertical.is-danger::-webkit-slider-runnable-track {
+  background: linear-gradient(to top, var(--bulma-danger, #f14668) var(--progress-percent), var(--bulma-grey-lighter, #dbdbdb) var(--progress-percent));
+}