bullframe.css 5.1.0 → 6.0.0

package/dist/index.css

@@ -1 +0,0 @@
-.demo .bf-row{margin-bottom:2rem}.demo [class^=bf-col]{margin-bottom:1rem}.demo header{margin-bottom:1rem}.demo header h1{margin-top:1rem;margin-bottom:0;font-weight:700}.demo header h1 span{color:#f95c1f}@media (min-width: 600px){.demo header h1{font-size:5.5rem}}@media (min-width: 1000px){.demo header h1{font-size:7rem}}.demo header a{margin-right:1rem}@media (min-width: 600px){.demo .btn-github{font-size:115%}}.demo .description{max-width:80rem;margin-left:auto;margin-right:auto}.demo .h2--section{padding-bottom:2rem;text-transform:uppercase}@media (min-width: 600px){.demo .h2--section{font-size:4rem}}.demo legend{padding-bottom:1rem}.demo button,.demo .bf-btn,.demo .input-image,.demo input,.demo select,.demo textarea{margin-bottom:2rem}.demo dialog .bf-btn{margin-bottom:0}.demo [type=image],.demo [type=checkbox],.demo [type=radio]{margin-bottom:0}.demo .grid .col-wrapper{background-color:#888;height:6rem;line-height:6rem;overflow-y:hidden;color:#fff;font-size:80%;text-align:center;border-radius:3px;font-weight:700}.demo .grid .bf-row:nth-child(odd) .col-wrapper{background-color:#ccc;color:#000}@media (max-width: 767px){.demo .grid .bf-row{margin-bottom:0}.demo .grid [class*=bf-col-]{margin-bottom:2rem}}.demo .back-to-top{text-align:center;display:block;margin:6rem 0 12rem}.demo .back-to-top a i{vertical-align:middle;font-style:normal}@media (max-width: 575px){.demo header{margin-bottom:1rem}}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/prettier.config.js

@@ -1,26 +0,0 @@
-/** @type {import('prettier').Config} */
-export default {
-  semi: true,
-  singleQuote: true,
-  jsxSingleQuote: true,
-  tabWidth: 2,
-  useTabs: false,
-  printWidth: 98,
-  trailingComma: "es5",
-  bracketSpacing: true,
-  bracketSameLine: false,
-  arrowParens: "always",
-  proseWrap: "preserve",
-  htmlWhitespaceSensitivity: "css",
-  endOfLine: "lf",
-  overrides: [
-    {
-      files: "*.html",
-      options: { printWidth: 9999 },
-    },
-    {
-      files: "*.md",
-      options: { printWidth: 9999 },
-    },
-  ],
-};

package/src/scss/bullframe-classless-dark-prefers.scss

@@ -1,2 +0,0 @@
-@use 'bullframe-classless' as bullframecssClassless;
-@use 'utilities/utility-global-dark-prefers-classless' as bfUtilGlobalDarkPrefersClassless;

package/src/scss/bullframe-classless-dark.scss

@@ -1,2 +0,0 @@
-@use 'bullframe-classless' as bullframecssClassless;
-@use 'utilities/utility-global-dark-classless' as bfUtilGlobalDarkClassless;

package/src/scss/bullframe-classless-system-default.scss

@@ -1,2 +0,0 @@
-@use 'bullframe-classless' as bullframecssClassless;
-@use 'utilities/utility-global-dark-prefers-classless' as bfUtilGlobalDarkPrefersClassless;

package/src/scss/bullframe-classless.scss

@@ -1,49 +0,0 @@
-@use 'variables/variables-colors' as bf-v-color;
-@use 'variables/variables-texts' as bf-v-text;
-@use 'variables/variables-spacing' as bf-v-space;
-@use 'variables/variables-breakpoints' as bf-v-bp;
-
-// @use "mixins/mixin-layout" as bfMixinLayout;
-// @use "mixins/mixin-texts" as bfMixinTexts;
-// @use "mixins/mixin-grid-flex" as bfMixinGridFlex;
-
-@use 'miscellaneous/misc-layout' as bfMiscLayout;
-
-@use 'typography/typography-html-body' as bfTypographyHtmlBody;
-@use 'typography/typography-headings' as bfTypographyHeadings;
-@use 'typography/typography-blockquotes' as bfTypographyBlockquotes;
-@use 'typography/typography-monospaced-elements' as bfTypographyMonospacedElements;
-@use 'typography/typography-misc' as bfTypographyMisc;
-
-@use 'miscellaneous/misc-anchors' as bfMiscAnchors;
-@use 'miscellaneous/misc-focus' as bfMiscFocus;
-@use 'miscellaneous/misc-lists' as bfMiscLists;
-@use 'miscellaneous/misc-embedded-content' as bfMiscEmbeddedContent;
-@use 'miscellaneous/misc-interactive' as bfMiscInteractive;
-@use 'miscellaneous/misc-scrolling' as bfMiscScrolling;
-@use 'miscellaneous/misc-tables' as bfMiscTables;
-@use 'miscellaneous/misc-accessibility' as bfMiscAccessibility;
-
-@use 'forms/forms-normalization' as bfFormsNormalization;
-@use 'forms/forms-styling' as bfFormsStyling;
-@use 'forms/forms-styling-select' as bfFormsStylingSelect;
-@use 'forms/forms-styling-radio-checkbox' as bfFormsStylingRadioCheckbox;
-@use 'forms/forms-styling-range' as bfFormsStylingRange;
-
-// @use "utilities/utility-grid-system" as bfUtilityGridSystem;
-// @use "utilities/utility-layout" as bfUtilityLayout;
-// @use "utilities/utility-z-index" as bfUtilityZIndex;
-// @use "utilities/utility-spacing" as bfUtilitySpacing;
-// @use "utilities/utility-texts" as bfUtilityTexts;
-// @use "utilities/utility-buttons" as bfUtilityButtons;
-// @use "utilities/utility-form-states" as bfUtilityFormStates;
-// @use "utilities/utility-lists" as bfUtilityLists;
-// @use "utilities/utility-embeds" as bfUtilityEmbeds;
-// @use "utilities/utility-tables" as bfUtilityTables;
-// @use "utilities/utility-print" as bfUtilityPrint;
-// @use "utilities/utility-reduced-motion" as bfUtilityReducedMotion;
-
-@use 'custom/author-styles' as bfCustomAuthorStyles;
-@use 'miscellaneous/misc-shame' as bfMiscShame;
-
-@use 'utilities/utility-debugging' as bfUtilityDebugging;

package/src/scss/bullframe-dark-prefers.scss

@@ -1,2 +0,0 @@
-@use 'bullframe' as bullframecss;
-@use 'utilities/utility-global-dark-prefers' as bfUtilGlobalDarkPrefers;

package/src/scss/bullframe-dark.scss

@@ -1,2 +0,0 @@
-@use 'bullframe' as bullframecss;
-@use 'utilities/utility-global-dark' as bfUtilGlobalDark;

package/src/scss/bullframe-system-default.scss

@@ -1,2 +0,0 @@
-@use 'bullframe' as bullframecss;
-@use 'utilities/utility-global-system-default' as bfUtilGlobalSystemDefault;

package/src/scss/bullframe-utilities.scss

@@ -1,21 +0,0 @@
-@use 'variables/variables-colors' as bf-v-color;
-@use 'variables/variables-texts' as bf-v-text;
-@use 'variables/variables-spacing' as bf-v-space;
-@use 'variables/variables-breakpoints' as bf-v-bp;
-
-@use 'mixins/mixin-layout' as bfMixinLayout;
-@use 'mixins/mixin-texts' as bfMixinTexts;
-@use 'mixins/mixin-grid-flex' as bfMixinGridFlex;
-
-@use 'utilities/utility-grid-system' as bfUtilityGridSystem;
-@use 'utilities/utility-layout' as bfUtilityLayout;
-@use 'utilities/utility-z-index' as bfUtilityZIndex;
-@use 'utilities/utility-spacing' as bfUtilitySpacing;
-@use 'utilities/utility-texts' as bfUtilityTexts;
-@use 'utilities/utility-buttons' as bfUtilityButtons;
-@use 'utilities/utility-form-states' as bfUtilityFormStates;
-@use 'utilities/utility-lists' as bfUtilityLists;
-@use 'utilities/utility-embeds' as bfUtilityEmbeds;
-@use 'utilities/utility-tables' as bfUtilityTables;
-@use 'utilities/utility-print' as bfUtilityPrint;
-@use 'utilities/utility-reduced-motion' as bfUtilityReducedMotion;

package/src/scss/bullframe.scss

@@ -1,49 +0,0 @@
-@use 'variables/variables-colors' as bf-v-color;
-@use 'variables/variables-texts' as bf-v-text;
-@use 'variables/variables-spacing' as bf-v-space;
-@use 'variables/variables-breakpoints' as bf-v-bp;
-
-@use 'mixins/mixin-layout' as bfMixinLayout;
-@use 'mixins/mixin-texts' as bfMixinTexts;
-@use 'mixins/mixin-grid-flex' as bfMixinGridFlex;
-
-@use 'miscellaneous/misc-layout' as bfMiscLayout;
-
-@use 'typography/typography-html-body' as bfTypographyHtmlBody;
-@use 'typography/typography-headings' as bfTypographyHeadings;
-@use 'typography/typography-blockquotes' as bfTypographyBlockquotes;
-@use 'typography/typography-monospaced-elements' as bfTypographyMonospacedElements;
-@use 'typography/typography-misc' as bfTypographyMisc;
-
-@use 'miscellaneous/misc-anchors' as bfMiscAnchors;
-@use 'miscellaneous/misc-focus' as bfMiscFocus;
-@use 'miscellaneous/misc-lists' as bfMiscLists;
-@use 'miscellaneous/misc-embedded-content' as bfMiscEmbeddedContent;
-@use 'miscellaneous/misc-interactive' as bfMiscInteractive;
-@use 'miscellaneous/misc-scrolling' as bfMiscScrolling;
-@use 'miscellaneous/misc-tables' as bfMiscTables;
-@use 'miscellaneous/misc-accessibility' as bfMiscAccessibility;
-
-@use 'forms/forms-normalization' as bfFormsNormalization;
-@use 'forms/forms-styling' as bfFormsStyling;
-@use 'forms/forms-styling-select' as bfFormsStylingSelect;
-@use 'forms/forms-styling-radio-checkbox' as bfFormsStylingRadioCheckbox;
-@use 'forms/forms-styling-range' as bfFormsStylingRange;
-
-@use 'utilities/utility-grid-system' as bfUtilityGridSystem;
-@use 'utilities/utility-layout' as bfUtilityLayout;
-@use 'utilities/utility-z-index' as bfUtilityZIndex;
-@use 'utilities/utility-spacing' as bfUtilitySpacing;
-@use 'utilities/utility-texts' as bfUtilityTexts;
-@use 'utilities/utility-buttons' as bfUtilityButtons;
-@use 'utilities/utility-form-states' as bfUtilityFormStates;
-@use 'utilities/utility-lists' as bfUtilityLists;
-@use 'utilities/utility-embeds' as bfUtilityEmbeds;
-@use 'utilities/utility-tables' as bfUtilityTables;
-@use 'utilities/utility-print' as bfUtilityPrint;
-@use 'utilities/utility-reduced-motion' as bfUtilityReducedMotion;
-
-@use 'custom/author-styles' as bfCustomAuthorStyles;
-@use 'miscellaneous/misc-shame' as bfMiscShame;
-
-@use 'utilities/utility-debugging' as bfUtilityDebugging;

package/src/scss/custom/_author-styles.scss

@@ -1,5 +0,0 @@
-@use '../variables/variables-colors' as bf-v-color;
-@use '../variables/variables-texts' as bf-v-text;
-@use '../variables/variables-spacing' as bf-v-space;
-@use '../variables/variables-breakpoints' as bf-v-bp;
-@use 'sass:color';

package/src/scss/forms/_forms-normalization.scss

@@ -1,300 +0,0 @@
-@use "../variables/variables-colors" as bf-v-color;
-@use "../variables/variables-texts" as bf-v-text;
-@use "../variables/variables-spacing" as bf-v-space;
-@use "../variables/variables-breakpoints" as bf-v-bp;
-@use "sass:color";
-
-// normalization, enhancement and responsiveness
-
-:where(html input, button, select, optgroup, textarea) {
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-:where(
-    html input,
-    button,
-    [type="radio"],
-    [type="checkbox"],
-    select,
-    optgroup,
-    textarea
-  ) {
-  margin: 0;
-}
-
-:where(html input, select, textarea, legend) {
-  width: 100%;
-}
-
-// re-set width auto where needed
-:where(
-    html label,
-    button,
-    [type="image"],
-    [type="submit"],
-    [type="reset"],
-    html [type="button"],
-    [type="radio"],
-    [type="checkbox"]
-  ) {
-  width: auto;
-}
-
-// inline-block display gives the best cross-browser combination
-// and allow several properties
-:where(
-    html input,
-    label,
-    select,
-    textarea,
-    button,
-    html [type="button"],
-    [type="reset"],
-    [type="submit"],
-    output
-  ) {
-  display: inline-block;
-}
-
-:where([type="file"]) {
-  display: block;
-  background-color: transparent;
-}
-
-:where(button, html input, select, textarea) {
-  background-image: none; // FF mobile
-}
-
-:where(input, select, textarea) {
-  vertical-align: baseline;
-}
-
-:where(form) {
-  margin: 0;
-}
-
-// 1. Remove intrinsic min-width of fieldset
-// https://github.com/necolas/normalize.css/pull/269
-:where(fieldset) {
-  border: 0;
-  padding: 0;
-  margin: 0;
-  min-width: 0; // 1.
-}
-
-:where(legend) {
-  display: table; // Correct the text wrapping in Edge and IE.
-  max-width: 100%;
-  white-space: normal; // enable line-wrapping in FF4/5
-  border: 0;
-  padding: 0;
-  font-weight: 400;
-  margin-bottom: bf-v-space.$bf-spacing-md-px;
-  margin-bottom: bf-v-space.$bf-spacing-md-rem;
-  font-size: inherit;
-  line-height: 1.375;
-  color: inherit;
-}
-
-:where(label) {
-  font-weight: 400;
-  font-size: 90%;
-  line-height: 1.375;
-  margin-bottom: bf-v-space.$bf-spacing-md-px;
-  margin-bottom: bf-v-space.$bf-spacing-md-rem;
-}
-
-:where(label input, label select, label textarea) {
-  font-size: 110%;
-}
-
-::-webkit-inner-spin-button {
-  height: auto;
-}
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-  padding: 0;
-}
-
-::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-:where([type="search"]) {
-  outline-offset: calc(-1 * bf-v-space.$bf-spacing-sm-rem);
-}
-
-:where(output) {
-  vertical-align: middle;
-}
-
-:where(button, select) {
-  text-transform: none;
-}
-
-:where(select) {
-  word-wrap: normal;
-}
-
-// Taken from Bootstrap Reboot v5.2
-// https://unpkg.com/browse/bootstrap@5.2.0/dist/css/bootstrap-reboot.css
-:where([list]):not(
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="week"],
-    [type="time"]
-  )::-webkit-calendar-picker-indicator {
-  display: none !important;
-}
-
-:where(optgroup) {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit; // fallback for font families without 600 */
-  font-weight: 600;
-}
-
-// remove -webkit-appearance listing every single elements that needed it
-:where(
-    button,
-    html [type="button"],
-    [type="reset"],
-    [type="submit"],
-    [type="email"],
-    [type="number"],
-    [type="text"],
-    [type="tel"],
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="week"],
-    [type="url"],
-    [type="image"],
-    [type="password"],
-    [type="search"],
-    [type="search"]::-webkit-search-decoration,
-    [type="search"]::-webkit-search-cancel-button,
-    input[list],
-    textarea
-  ) {
-  appearance: none;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-  appearance: auto;
-}
-
-::file-selector-button {
-  font: inherit;
-  appearance: auto;
-}
-
-:where(button, input, select, textarea) {
-  border-radius: bf-v-space.$bf-spacing-sm-rem;
-}
-
-:where([type="radio"]) {
-  border-radius: 50%;
-}
-
-:where([type="checkbox"]) {
-  border-radius: bf-v-space.$bf-spacing-md-rem;
-}
-
-:where([type="radio"], [type="checkbox"]) {
-  padding: 0;
-  background-color: bf-v-color.$bf-white;
-}
-
-:where([type="range" i]) {
-  background-color: transparent; // FF and Chrome mobile
-}
-
-:where(select[size], select[multiple]) {
-  height: auto;
-}
-
-:where(select[multiple]) {
-  background-image: none; // FF mobile
-}
-
-:where(textarea) {
-  height: auto;
-  min-height: 60px;
-  min-height: 6rem;
-  overflow: auto;
-  vertical-align: top;
-  resize: vertical;
-}
-
-// Remove the inner border and padding of focus outlines in Firefox
-::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-:where(button, [type="button"], [type="reset"], [type="submit"]) {
-  line-height: normal;
-  text-align: center;
-  margin: 0;
-  background-clip: padding-box;
-  vertical-align: baseline;
-  overflow: visible;
-  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-  user-select: none;
-  border: 0;
-  background-image: none; // FF mobile
-
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
-    color: bf-v-color.$bf-dark;
-  }
-}
-
-:where(
-    button:not(:disabled),
-    [type="button"]:not(:disabled),
-    [type="reset"]:not(:disabled),
-    [type="submit"]:not(:disabled)
-  ) {
-  cursor: pointer;
-}
-
-// FF placeholder bug
-// Issue: If one change the text color of input fields, FF will change
-// the default color of placeholders too!
-// Fix: Use '!important' https://github.com/necolas/normalize.css/issues/150
-:where(input::placeholder, textarea::placeholder) {
-  color: bf-v-color.$bf-gray-dark;
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-// remove ':invalid' styles in FF
-// https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
-//
-// for form validation in JavaScript
-// use '.bf-invalid' class in /utilities/_utility-form-states.scss' instead
-// documentation https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
-:-moz-ui-invalid {
-  box-shadow: none;
-}

package/src/scss/forms/_forms-styling-radio-checkbox.scss

@@ -1,81 +0,0 @@
-@use "../variables/variables-colors" as bf-v-color;
-@use "../variables/variables-texts" as bf-v-text;
-@use "../variables/variables-spacing" as bf-v-space;
-@use "../variables/variables-breakpoints" as bf-v-bp;
-@use "sass:color";
-
-// heavily inspired by '2020 toggles' by Aaron Iker
-// https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
-// https://codepen.io/aaroniker/pen/ZEYoxEY?editors=0100
-
-:where([type="checkbox"], [type="radio"]) {
-  appearance: none;
-
-  height: 1.8rem;
-  width: 1.8rem;
-
-  vertical-align: top;
-  position: relative;
-
-  border: 1px solid / bf-v-color.$bf-gray;
-
-  + label {
-    line-height: 1.8rem;
-    vertical-align: top;
-    margin-left: bf-v-space.$bf-spacing-md-px;
-    margin-left: bf-v-space.$bf-spacing-md-rem;
-  }
-
-  // add support for RTL languages
-  // Read more
-  // 1. http://bootstrap.rtlcss.com
-  // 2. https://rtlstyling.com/
-  *[dir="rtl"] & + label,
-  &[dir="rtl"] + label {
-    margin-left: 0;
-    margin-right: bf-v-space.$bf-spacing-md-px;
-    margin-right: bf-v-space.$bf-spacing-md-rem;
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    position: absolute;
-  }
-
-  &:checked {
-    background-color: bf-v-color.$bf-blue;
-    border-color: bf-v-color.$bf-black;
-  }
-}
-
-:where([type="radio"]) {
-  &::after {
-    width: 1.8rem;
-    height: 1.8rem;
-
-    left: -0.05rem;
-    top: -0.05rem;
-
-    border-radius: 50%;
-    background: bf-v-color.$bf-white;
-
-    transform: scale(0.35);
-  }
-}
-
-:where([type="checkbox"]) {
-  &::after {
-    width: 0.6rem;
-    height: 0.8rem;
-
-    border: 2px solid / bf-v-color.$bf-white;
-    border-top: 0;
-    border-left: 0;
-
-    left: 35%;
-    top: 20%;
-
-    transform: rotate(43deg);
-  }
-}

package/src/scss/forms/_forms-styling-range.scss

@@ -1,106 +0,0 @@
-@use "../variables/variables-colors" as bf-v-color;
-@use "../variables/variables-texts" as bf-v-text;
-@use "../variables/variables-spacing" as bf-v-space;
-@use "../variables/variables-breakpoints" as bf-v-bp;
-@use "sass:color";
-
-// styling input range in modern browsers safely using the @supports CSS-at-rule
-// https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
-//
-// standalone CodePen demo https://codepen.io/marcop135/pen/JjGrNMx
-
-:where([type="range"]) {
-  appearance: none;
-  width: 100%;
-  height: 1.4rem;
-}
-
-:where([type="range"])::-webkit-slider-thumb {
-  border: 0;
-  appearance: none;
-
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-top: -0.25rem;
-  background-color: bf-v-color.$bf-blue;
-  border-radius: 1.5rem;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-
-  &:active {
-    background-color: bf-v-color.$bf-blue;
-  }
-}
-
-:where([type="range"])::-moz-range-thumb {
-  border: 0;
-  appearance: none;
-
-  width: 1.5rem;
-  height: 1.5rem;
-  background-color: bf-v-color.$bf-blue;
-  border-radius: 1.5rem;
-  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-
-  &:active {
-    background-color: bf-v-color.$bf-blue;
-  }
-}
-
-:where([type="range"])::-webkit-slider-runnable-track {
-  color: transparent;
-  border-color: transparent;
-
-  width: 100%;
-  height: 0.65rem;
-  cursor: pointer;
-  background-color: bf-v-color.$bf-gray-light-extra;
-}
-
-:where([type="range"])::-moz-range-track {
-  color: transparent;
-  border-color: transparent;
-
-  width: 100%;
-  height: 0.65rem;
-  cursor: pointer;
-  background-color: bf-v-color.$bf-gray-light-extra;
-}
-
-:where([type="range"]):focus {
-  outline: none;
-
-  &::-webkit-slider-thumb {
-    box-shadow: 0 0 0 0.1rem / bf-v-color.$bf-white,
-      0 0 0 0.2rem rgb(0 123 255 / 25%);
-  }
-
-  &::-moz-slider-thumb {
-    box-shadow: 0 0 0 0.1rem / bf-v-color.$bf-white,
-      0 0 0 0.2rem rgb(0 123 255 / 25%);
-  }
-}
-
-:where([type="range"])::-moz-focus-outer {
-  border: 0;
-}
-
-:where([type="range"]):focus::-moz-range-thumb {
-  box-shadow: 0 0 0 0.1rem / bf-v-color.$bf-white,
-    0 0 0 0.2rem rgb(0 123 255 / 25%);
-}
-
-// disabled
-
-:where([type="range"]):disabled {
-  pointer-events: none;
-
-  &::-webkit-slider-thumb {
-    background-color: bf-v-color.$bf-gray-light;
-  }
-
-  &::-moz-slider-thumb {
-    background-color: bf-v-color.$bf-gray-light;
-  }
-}