bullframe.css 4.2.1 → 5.0.0

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

@@ -1,3 +1,9 @@
+@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
 
 html input,
@@ -13,8 +19,8 @@ textarea {
 
 html input,
 button,
-[type='radio'],
-[type='checkbox'],
+[type="radio"],
+[type="checkbox"],
 select,
 optgroup,
 textarea {
@@ -31,12 +37,12 @@ legend {
 // re-set width auto where needed
 html label,
 button,
-[type='image'],
-[type='submit'],
-[type='reset'],
-html [type='button'],
-[type='radio'],
-[type='checkbox'] {
+[type="image"],
+[type="submit"],
+[type="reset"],
+html [type="button"],
+[type="radio"],
+[type="checkbox"] {
   width: auto;
 }
 
@@ -47,14 +53,14 @@ label,
 select,
 textarea,
 button,
-html [type='button'],
-[type='reset'],
-[type='submit'],
+html [type="button"],
+[type="reset"],
+[type="submit"],
 output {
   display: inline-block;
 }
 
-[type='file'] {
+[type="file"] {
   display: block;
   background-color: transparent;
 }
@@ -92,8 +98,8 @@ legend {
   border: 0;
   padding: 0;
   font-weight: 400;
-  margin-bottom: $bf-spacing-md-px;
-  margin-bottom: $bf-spacing-md-rem;
+  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;
@@ -103,8 +109,8 @@ label {
   font-weight: 400;
   font-size: 90%;
   line-height: 1.375;
-  margin-bottom: $bf-spacing-md-px;
-  margin-bottom: $bf-spacing-md-rem;
+  margin-bottom: bf-v-space.$bf-spacing-md-px;
+  margin-bottom: bf-v-space.$bf-spacing-md-rem;
 }
 
 label input,
@@ -113,8 +119,7 @@ label textarea {
   font-size: 110%;
 }
 
-[type='number']::-webkit-outer-spin-button,
-[type='number']::-webkit-inner-spin-button {
+::-webkit-inner-spin-button {
   height: auto;
 }
 
@@ -132,9 +137,8 @@ label textarea {
   padding: 0;
 }
 
-[type='search'] {
-  outline-offset: -$bf-spacing-sm-px;
-  outline-offset: -$bf-spacing-sm-rem;
+[type="search"] {
+  outline-offset: calc(-1 * bf-v-space.$bf-spacing-sm-rem);
 }
 
 output {
@@ -152,24 +156,27 @@ select {
 
 // Taken from Bootstrap Reboot v5.2
 // https://unpkg.com/browse/bootstrap@5.2.0/dist/css/bootstrap-reboot.css
-[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not(
-    [type='week']
-  ):not([type='time'])::-webkit-calendar-picker-indicator {
+[list]:not(
+    [type="date"],
+    [type="datetime-local"],
+    [type="month"],
+    [type="week"],
+    [type="time"]
+  )::-webkit-calendar-picker-indicator {
   display: none !important;
 }
 
 optgroup {
   font-family: inherit;
   font-size: inherit;
-  font-style: inherit;
-  font-weight: 700; // fallback for font families without 600 */
+  font-style: inherit; // fallback for font families without 600 */
   font-weight: 600;
 }
 
 // remove -webkit-appearance listing every single elements that needed it
 button,
 // avoid destroying native android audio/video players
-html [type="button"], 
+html [type="button"],
 [type="reset"],
 [type="submit"],
 
@@ -189,42 +196,41 @@ html [type="button"],
 [type="search"]::-webkit-search-cancel-button,
 input[list],
 textarea {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; // iOS and Safari
-  font: inherit; // Safari
+  font: inherit;
+  appearance: auto;
+}
+
+::file-selector-button {
+  font: inherit;
+  appearance: auto;
 }
 
-// ! IE9+
-// https://caniuse.com/#feat=border-radius
 button,
 input,
 select,
 textarea {
-  border-radius: $bf-spacing-sm-px;
-  border-radius: $bf-spacing-sm-rem;
+  border-radius: bf-v-space.$bf-spacing-sm-rem;
 }
 
-// ! IE9+
-// https://caniuse.com/#feat=border-radius
-[type='radio'] {
+[type="radio"] {
   border-radius: 50%;
 }
 
-[type='checkbox'] {
-  border-radius: $bf-spacing-md-px;
-  border-radius: $bf-spacing-md-rem;
+[type="checkbox"] {
+  border-radius: bf-v-space.$bf-spacing-md-rem;
 }
 
-[type='radio'],
-[type='checkbox'] {
+[type="radio"],
+[type="checkbox"] {
   padding: 0;
-  background-color: $bf-white;
+  background-color: bf-v-color.$bf-white;
 }
 
-[type='range'] {
+[type="range" i] {
   background-color: transparent; // FF and Chrome mobile
 }
 
@@ -253,16 +259,16 @@ textarea {
 }
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+[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: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
   user-select: none;
   border: 0;
   background-image: none; // FF mobile
@@ -271,18 +277,14 @@ button,
   &:active,
   &:focus {
     text-decoration: none;
-    color: $bf-dark;
+    color: bf-v-color.$bf-dark;
   }
 }
 
-button,
-select,
-input[type='submit'],
-input[type='button'],
-[type='checkbox'],
-[type='range'],
-[type='radio'],
-[role='button'] {
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled) {
   cursor: pointer;
 }
 
@@ -292,7 +294,15 @@ input[type='button'],
 // Fix: Use '!important' https://github.com/necolas/normalize.css/issues/150
 input::placeholder,
 textarea::placeholder {
-  color: $bf-gray-dark;
+  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

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

@@ -1,84 +1,82 @@
+@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
-//
-// https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
-// https://caniuse.com/#feat=mdn-css_at-rules_supports_selector
-//
-// Anyway are safe and future-friendly because more browser compatibility
-// will come
-
-@supports (appearance: none) {
-  [type='checkbox'],
-  [type='radio'] {
-    appearance: none;
 
-    height: 1.8rem;
-    width: 1.8rem;
+[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;
-    position: relative;
-
-    border: 1px solid $bf-gray;
-
-    + label {
-      line-height: 1.8rem;
-      vertical-align: top;
-      margin-left: $bf-spacing-md-px;
-      margin-left: $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-spacing-md-px;
-      margin-right: $bf-spacing-md-rem;
-    }
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-    }
-
-    &:checked {
-      background-color: $bf-blue;
-      border-color: $bf-black;
-    }
+    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;
   }
 
-  [type='radio'] {
-    &:after {
-      width: 1.8rem;
-      height: 1.8rem;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+  }
+
+  &:checked {
+    background-color: bf-v-color.$bf-blue;
+    border-color: bf-v-color.$bf-black;
+  }
+}
 
-      left: -0.05rem;
-      top: -0.05rem;
+[type='radio'] {
+  &::after {
+    width: 1.8rem;
+    height: 1.8rem;
 
-      border-radius: 50%;
-      background: $bf-white;
+    left: -0.05rem;
+    top: -0.05rem;
 
-      transform: scale(0.35);
-    }
+    border-radius: 50%;
+    background: bf-v-color.$bf-white;
+
+    transform: scale(0.35);
   }
+}
 
-  [type='checkbox'] {
-    &:after {
-      width: 0.6rem;
-      height: 0.8rem;
+[type='checkbox'] {
+  &::after {
+    width: 0.6rem;
+    height: 0.8rem;
 
-      border: 2px solid $bf-white;
-      border-top: 0;
-      border-left: 0;
+    border: 2px solid / bf-v-color.$bf-white;
+    border-top: 0;
+    border-left: 0;
 
-      left: 35%;
-      top: 20%;
+    left: 35%;
+    top: 20%;
 
-      transform: rotate(43deg);
-    }
+    transform: rotate(43deg);
   }
 }

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

@@ -1,99 +1,113 @@
+@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
 
-@supports (appearance: none) {
-  [type='range'] {
-    appearance: none;
-    width: 100%;
-    height: 1.4rem;
-  }
+[type='range'] {
+  appearance: none;
+  width: 100%;
+  height: 1.4rem;
+}
 
-  [type='range']::-webkit-slider-thumb {
-    border: 0;
-    appearance: none;
-
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-top: -0.25rem;
-    background-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-blue;
-    }
+[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;
   }
+}
 
-  [type='range']::-moz-range-thumb {
-    border: 0;
-    appearance: none;
-
-    width: 1.5rem;
-    height: 1.5rem;
-    background-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-blue;
-    }
+[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;
   }
+}
 
-  [type='range']::-webkit-slider-runnable-track {
-    color: transparent;
-    border-color: transparent;
-
-    width: 100%;
-    height: 0.65rem;
-    cursor: pointer;
-    background-color: $bf-gray-light-extra;
-  }
+[type='range']::-webkit-slider-runnable-track {
+  color: transparent;
+  border-color: transparent;
 
-  [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;
+}
 
-    width: 100%;
-    height: 0.65rem;
-    cursor: pointer;
-    background-color: $bf-gray-light-extra;
-  }
+[type='range']::-moz-range-track {
+  color: transparent;
+  border-color: transparent;
 
-  [type='range']:focus {
-    outline: none;
+  width: 100%;
+  height: 0.65rem;
+  cursor: pointer;
+  background-color: bf-v-color.$bf-gray-light-extra;
+}
 
-    &::-webkit-slider-thumb {
-      box-shadow: 0 0 0 0.1rem $bf-white, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-    }
+[type='range']:focus {
+  outline: none;
 
-    &::-moz-slider-thumb {
-      box-shadow: 0 0 0 0.1rem $bf-white, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-    }
+  &::-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%);
   }
 
-  [type='range']::-moz-focus-outer {
-    border: 0;
+  &::-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%);
   }
+}
 
-  [type='range']:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 0.1rem $bf-white, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-  }
+[type='range']::-moz-focus-outer {
+  border: 0;
+}
+
+[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
+// disabled
 
-  [type='range']:disabled {
-    pointer-events: none;
+[type='range']:disabled {
+  pointer-events: none;
 
-    &::-webkit-slider-thumb {
-      background-color: $bf-gray-light;
-    }
+  &::-webkit-slider-thumb {
+    background-color: bf-v-color.$bf-gray-light;
+  }
 
-    &::-moz-slider-thumb {
-      background-color: $bf-gray-light;
-    }
+  &::-moz-slider-thumb {
+    background-color: bf-v-color.$bf-gray-light;
   }
 }

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

@@ -1,3 +1,9 @@
+@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';
+
 // custom <select> arrow and appearance with a base64 embedded SVG icon
 // https://css-tricks.com/probably-dont-base64-svg/#article-header-id-2
 //
@@ -8,7 +14,7 @@
 // ! :not and calc() are IE9+
 // https://caniuse.com/#feat=mdn-css_selectors_not
 // https://caniuse.com/#feat=calc
-//
+
 // ! 12px = the icon width/height, and must be in pixels because
 // calc() is just for values
 // https://css-tricks.com/a-complete-guide-to-calc-in-css/#0-calc-is-for-values
@@ -19,24 +25,20 @@
 // so, is not safe to style every kind of <select>
 //
 // remove the arrow and the appearance, especially on Webkit
-select:not([size]):not([multiple]) {
+select:not([size], [multiple]) {
   appearance: none;
 
   // add a new svg arrow
-  background: $bf-white
+  background: bf-v-color.$bf-white
     url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
     no-repeat right 0.85rem center/8px 10px;
 
   // space the arrow
-  padding-right: $bf-spacing-lg-px + $bf-spacing-lg-px;
-  padding-right: $bf-spacing-lg-rem + $bf-spacing-lg-rem;
+  padding-right: bf-v-space.$bf-spacing-lg-px + bf-v-space.$bf-spacing-lg-px;
+  padding-right: bf-v-space.$bf-spacing-lg-rem + bf-v-space.$bf-spacing-lg-rem;
 }
 
-// IE10+
-// The '::-ms-expand' CSS pseudo-element is a Microsoft extension that represents
-// the button of a <select> menu control that opens or closes the drop-down
-// menu. Typically it is a triangle that points downward.
-// https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-expand
+// Legacy Edge browser support
 select::-ms-expand {
   display: none;
 }
@@ -48,16 +50,16 @@ select::-ms-expand {
 // Read more
 // 1. http://bootstrap.rtlcss.com
 // 2. https://rtlstyling.com/
-*[dir='rtl'] select:not([size]):not([multiple]),
-select[dir='rtl']:not([size]):not([multiple]) {
+*[dir='rtl'] select:not([size], [multiple]),
+select[dir='rtl']:not([size], [multiple]) {
   // move the arrow icon to the left
   background-position: left 0.85rem top 50%;
 
   // go back to default forms padding
-  padding-right: ($bf-spacing-lg-px * 0.75);
-  padding-right: ($bf-spacing-lg-rem * 0.75);
+  padding-right: (bf-v-space.$bf-spacing-lg-px * 0.75);
+  padding-right: (bf-v-space.$bf-spacing-lg-rem * 0.75);
 
   // add custom left padding, matching the custom LTR one
-  padding-left: $bf-spacing-lg-px + $bf-spacing-lg-px;
-  padding-left: $bf-spacing-lg-rem + $bf-spacing-lg-rem;
+  padding-left: bf-v-space.$bf-spacing-lg-px + bf-v-space.$bf-spacing-lg-px;
+  padding-left: bf-v-space.$bf-spacing-lg-rem + bf-v-space.$bf-spacing-lg-rem;
 }