@bodynarf/react.components 1.13.8 → 1.14.1

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

@@ -0,0 +1,482 @@
+.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 hsl(0, 0%, 71%);
+}
+.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: hsl(171, 100%, 41%);
+}
+.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: 4px;
+  background: hsl(0, 0%, 71%);
+  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: 4px;
+  background: hsl(0, 0%, 100%);
+  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: hsl(0, 0%, 71%);
+}
+.switch[type=checkbox].bbr-switch.is-outlined + label::after {
+  background: hsl(0, 0%, 71%);
+}
+.switch[type=checkbox].bbr-switch.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(171, 100%, 41%);
+}
+.switch[type=checkbox].bbr-switch.is-outlined:checked + label::after {
+  background: hsl(171, 100%, 41%);
+}
+.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: 4px;
+  background: hsl(0, 0%, 71%);
+  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: 4px;
+  background: hsl(0, 0%, 100%);
+  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: hsl(0, 0%, 71%);
+}
+.switch[type=checkbox].bbr-switch.is-small.is-outlined + label::after {
+  background: hsl(0, 0%, 71%);
+}
+.switch[type=checkbox].bbr-switch.is-small.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(171, 100%, 41%);
+}
+.switch[type=checkbox].bbr-switch.is-small.is-outlined:checked + label::after {
+  background: hsl(171, 100%, 41%);
+}
+.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: 4px;
+  background: hsl(0, 0%, 71%);
+  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: 4px;
+  background: hsl(0, 0%, 100%);
+  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: hsl(0, 0%, 71%);
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-outlined + label::after {
+  background: hsl(0, 0%, 71%);
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(171, 100%, 41%);
+}
+.switch[type=checkbox].bbr-switch.is-medium.is-outlined:checked + label::after {
+  background: hsl(171, 100%, 41%);
+}
+.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: 4px;
+  background: hsl(0, 0%, 71%);
+  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: 4px;
+  background: hsl(0, 0%, 100%);
+  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: hsl(0, 0%, 71%);
+}
+.switch[type=checkbox].bbr-switch.is-large.is-outlined + label::after {
+  background: hsl(0, 0%, 71%);
+}
+.switch[type=checkbox].bbr-switch.is-large.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(171, 100%, 41%);
+}
+.switch[type=checkbox].bbr-switch.is-large.is-outlined:checked + label::after {
+  background: hsl(171, 100%, 41%);
+}
+.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-white:checked + label::before {
+  background: hsl(0, 0%, 100%);
+}
+.switch[type=checkbox].bbr-switch.is-white.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(0, 0%, 100%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-white.is-outlined:checked + label::after {
+  background: hsl(0, 0%, 100%);
+}
+.switch[type=checkbox].bbr-switch.is-white.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}
+.switch[type=checkbox].bbr-switch.is-black:checked + label::before {
+  background: hsl(0, 0%, 4%);
+}
+.switch[type=checkbox].bbr-switch.is-black.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(0, 0%, 4%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-black.is-outlined:checked + label::after {
+  background: hsl(0, 0%, 4%);
+}
+.switch[type=checkbox].bbr-switch.is-black.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}
+.switch[type=checkbox].bbr-switch.is-light:checked + label::before {
+  background: hsl(0, 0%, 96%);
+}
+.switch[type=checkbox].bbr-switch.is-light.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(0, 0%, 96%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-light.is-outlined:checked + label::after {
+  background: hsl(0, 0%, 96%);
+}
+.switch[type=checkbox].bbr-switch.is-light.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}
+.switch[type=checkbox].bbr-switch.is-dark:checked + label::before {
+  background: hsl(0, 0%, 21%);
+}
+.switch[type=checkbox].bbr-switch.is-dark.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(0, 0%, 21%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-dark.is-outlined:checked + label::after {
+  background: hsl(0, 0%, 21%);
+}
+.switch[type=checkbox].bbr-switch.is-dark.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}
+.switch[type=checkbox].bbr-switch.is-primary:checked + label::before {
+  background: hsl(171, 100%, 41%);
+}
+.switch[type=checkbox].bbr-switch.is-primary.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(171, 100%, 41%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-primary.is-outlined:checked + label::after {
+  background: hsl(171, 100%, 41%);
+}
+.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: hsl(229, 53%, 53%);
+}
+.switch[type=checkbox].bbr-switch.is-link.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(229, 53%, 53%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-link.is-outlined:checked + label::after {
+  background: hsl(229, 53%, 53%);
+}
+.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: hsl(207, 61%, 53%);
+}
+.switch[type=checkbox].bbr-switch.is-info.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(207, 61%, 53%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-info.is-outlined:checked + label::after {
+  background: hsl(207, 61%, 53%);
+}
+.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: hsl(153, 53%, 53%);
+}
+.switch[type=checkbox].bbr-switch.is-success.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(153, 53%, 53%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-success.is-outlined:checked + label::after {
+  background: hsl(153, 53%, 53%);
+}
+.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: hsl(44, 100%, 77%);
+}
+.switch[type=checkbox].bbr-switch.is-warning.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(44, 100%, 77%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-warning.is-outlined:checked + label::after {
+  background: hsl(44, 100%, 77%);
+}
+.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: hsl(348, 86%, 61%);
+}
+.switch[type=checkbox].bbr-switch.is-danger.is-outlined:checked + label::before {
+  background-color: transparent;
+  border-color: hsl(348, 86%, 61%) !important;
+}
+.switch[type=checkbox].bbr-switch.is-danger.is-outlined:checked + label::after {
+  background: hsl(348, 86%, 61%);
+}
+.switch[type=checkbox].bbr-switch.is-danger.is-thin.is-outlined:checked + label::after {
+  box-shadow: none;
+}

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

@@ -0,0 +1,216 @@
+@import "bulma/sass/utilities/derived-variables";
+
+$switch-background: $grey-light !default;
+$switch-border: 0.1rem solid transparent !default;
+$switch-background-active: $primary !default;
+$switch-radius: $radius !default;
+$switch-paddle-background: $white !default;
+$switch-paddle-background-active: $primary !default;
+$switch-paddle-offset: 0.25rem !default;
+$switch-paddle-transition: all 0.25s ease-out !default;
+$switch-focus: 1px dotted $grey-light !default;
+
+@mixin switch-size($size) {
+    $switch-height: $size * 1.5;
+    $switch-width: $switch-height * 2;
+    $paddle-height: $switch-height - ($switch-paddle-offset * 2);
+    $paddle-width: $switch-height - ($switch-paddle-offset * 2);
+    $paddle-active-offest: $switch-width - $paddle-width - ($switch-paddle-offset * 1.5);
+
+    + label {
+        position: relative;
+        display: initial;
+        font-size: $size;
+        line-height: initial;
+        padding-left: $switch-width + 0.5;
+        padding-top: 0.2rem;
+        cursor: pointer;
+
+        &::before {
+            position: absolute;
+            display: block;
+            top: 0;
+            left: 0;
+            width: $switch-width;
+            height: $switch-height;
+            border: $switch-border;
+            border-radius: $switch-radius;
+            background: $switch-background;
+            content: "";
+        }
+
+        &::after {
+            display: block;
+            position: absolute;
+            top: ($switch-height * 0.5) - ($paddle-height * 0.5);
+            left: $switch-paddle-offset;
+            width: $paddle-width;
+            height: $paddle-height;
+            transform: translate3d(0, 0, 0);
+            border-radius: $switch-radius;
+            background: $switch-paddle-background;
+            transition: $switch-paddle-transition;
+            content: "";
+        }
+
+        &.is-empty {
+            padding-left: $switch-width;
+            margin: 0 !important;
+        }
+    }
+
+    &.is-rtl + label {
+        padding-left: 0;
+        padding-right: $switch-width + 0.5;
+
+        &::before {
+            left: auto;
+            right: 0;
+        }
+
+        &::after {
+            left: auto;
+            right: $paddle-active-offest;
+        }
+    }
+
+    &:checked + label::after {
+        left: $paddle-active-offest;
+    }
+
+    &.is-rtl:checked + label::after {
+        left: auto;
+        right: $switch-paddle-offset;
+    }
+
+    &.is-outlined {
+        + label {
+            &::before {
+                background-color: transparent;
+                border-color: $switch-background;
+            }
+
+            &::after {
+                background: $switch-background;
+            }
+        }
+
+        &:checked + label {
+            &::before {
+                background-color: transparent;
+                border-color: $switch-background-active;
+            }
+
+            &::after {
+                background: $switch-paddle-background-active;
+            }
+        }
+    }
+
+    &.is-thin {
+        + label {
+            &::before {
+                top: $switch-height * 0.25;
+                height: $switch-height * 0.5;
+            }
+        }
+    }
+
+    &.is-rounded {
+        + label {
+            &::before {
+                border-radius: $switch-height * 0.5;
+            }
+
+            &::after {
+                border-radius: 50%;
+            }
+        }
+    }
+}
+
+.switch[type="checkbox"].bbr-switch {
+    outline: 0;
+    user-select: none;
+    display: inline-block;
+    position: absolute;
+    opacity: 0;
+
+    &:focus + label::before {
+        outline: $switch-focus;
+    }
+
+    &[disabled] {
+        cursor: not-allowed;
+
+        + label {
+            opacity: 0.5;
+
+            &::before {
+                opacity: 0.5;
+            }
+
+            &::after {
+                opacity: 0.5;
+            }
+
+            &:hover {
+                cursor: not-allowed;
+            }
+        }
+    }
+
+    &:checked + label::before {
+        background: $switch-background-active;
+    }
+
+    // Size variations
+    @include switch-size($size-normal);
+
+    &.is-small {
+        @include switch-size($size-small);
+    }
+
+    &.is-medium {
+        @include switch-size($size-medium);
+    }
+
+    &.is-large {
+        @include switch-size($size-large);
+    }
+
+    // Color variations
+    @each $name, $pair in $colors {
+        $color: nth($pair, 1);
+        $color-invert: nth($pair, 2);
+
+        &.is-#{$name} {
+            &:checked + label::before {
+                background: $color;
+            }
+
+            &.is-outlined {
+                &:checked + label {
+                    &::before {
+                        background-color: transparent;
+                        border-color: $color !important;
+                    }
+
+                    &::after {
+                        background: $color;
+                    }
+                }
+            }
+
+            &.is-thin {
+                &.is-outlined {
+                    &:checked + label {
+                        &::after {
+                            box-shadow: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/components/primitives/switch/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./component";
+export * from "./types";
+//# sourceMappingURL=index.d.ts.map

package/components/primitives/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,cAAc,SAAS,CAAC"}

package/components/primitives/switch/index.js

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";