bullframe.css 5.0.1 → 5.1.0

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

@@ -6,92 +6,86 @@
 
 // normalization, enhancement and responsiveness
 
-html input,
-button,
-select,
-optgroup,
-textarea {
+:where(html input, button, select, optgroup, textarea) {
   color: inherit;
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
 }
 
-html input,
-button,
-[type="radio"],
-[type="checkbox"],
-select,
-optgroup,
-textarea {
+:where(
+    html input,
+    button,
+    [type="radio"],
+    [type="checkbox"],
+    select,
+    optgroup,
+    textarea
+  ) {
   margin: 0;
 }
 
-html input,
-select,
-textarea,
-legend {
+:where(html input, select, textarea, legend) {
   width: 100%;
 }
 
 // re-set width auto where needed
-html label,
-button,
-[type="image"],
-[type="submit"],
-[type="reset"],
-html [type="button"],
-[type="radio"],
-[type="checkbox"] {
+: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
-html input,
-label,
-select,
-textarea,
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"],
-output {
+:where(
+    html input,
+    label,
+    select,
+    textarea,
+    button,
+    html [type="button"],
+    [type="reset"],
+    [type="submit"],
+    output
+  ) {
   display: inline-block;
 }
 
-[type="file"] {
+:where([type="file"]) {
   display: block;
   background-color: transparent;
 }
 
-button,
-html input,
-select,
-textarea {
+:where(button, html input, select, textarea) {
   background-image: none; // FF mobile
 }
 
-input,
-select,
-textarea {
+:where(input, select, textarea) {
   vertical-align: baseline;
 }
 
-form {
+:where(form) {
   margin: 0;
 }
 
 // 1. Remove intrinsic min-width of fieldset
 // https://github.com/necolas/normalize.css/pull/269
-fieldset {
+:where(fieldset) {
   border: 0;
   padding: 0;
   margin: 0;
   min-width: 0; // 1.
 }
 
-legend {
+:where(legend) {
   display: table; // Correct the text wrapping in Edge and IE.
   max-width: 100%;
   white-space: normal; // enable line-wrapping in FF4/5
@@ -105,7 +99,7 @@ legend {
   color: inherit;
 }
 
-label {
+:where(label) {
   font-weight: 400;
   font-size: 90%;
   line-height: 1.375;
@@ -113,9 +107,7 @@ label {
   margin-bottom: bf-v-space.$bf-spacing-md-rem;
 }
 
-label input,
-label select,
-label textarea {
+:where(label input, label select, label textarea) {
   font-size: 110%;
 }
 
@@ -137,26 +129,25 @@ label textarea {
   padding: 0;
 }
 
-[type="search"] {
+:where([type="search"]) {
   outline-offset: calc(-1 * bf-v-space.$bf-spacing-sm-rem);
 }
 
-output {
+:where(output) {
   vertical-align: middle;
 }
 
-button,
-select {
+:where(button, select) {
   text-transform: none;
 }
 
-select {
+:where(select) {
   word-wrap: normal;
 }
 
 // Taken from Bootstrap Reboot v5.2
 // https://unpkg.com/browse/bootstrap@5.2.0/dist/css/bootstrap-reboot.css
-[list]:not(
+:where([list]):not(
     [type="date"],
     [type="datetime-local"],
     [type="month"],
@@ -166,7 +157,7 @@ select {
   display: none !important;
 }
 
-optgroup {
+:where(optgroup) {
   font-family: inherit;
   font-size: inherit;
   font-style: inherit; // fallback for font families without 600 */
@@ -174,28 +165,28 @@ optgroup {
 }
 
 // remove -webkit-appearance listing every single elements that needed it
-button,
-// avoid destroying native android audio/video players
-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 {
+: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;
 }
 
@@ -209,41 +200,36 @@ textarea {
   appearance: auto;
 }
 
-button,
-input,
-select,
-textarea {
+:where(button, input, select, textarea) {
   border-radius: bf-v-space.$bf-spacing-sm-rem;
 }
 
-[type="radio"] {
+:where([type="radio"]) {
   border-radius: 50%;
 }
 
-[type="checkbox"] {
+:where([type="checkbox"]) {
   border-radius: bf-v-space.$bf-spacing-md-rem;
 }
 
-[type="radio"],
-[type="checkbox"] {
+:where([type="radio"], [type="checkbox"]) {
   padding: 0;
   background-color: bf-v-color.$bf-white;
 }
 
-[type="range" i] {
+:where([type="range" i]) {
   background-color: transparent; // FF and Chrome mobile
 }
 
-select[size],
-select[multiple] {
+:where(select[size], select[multiple]) {
   height: auto;
 }
 
-select[multiple] {
+:where(select[multiple]) {
   background-image: none; // FF mobile
 }
 
-textarea {
+:where(textarea) {
   height: auto;
   min-height: 60px;
   min-height: 6rem;
@@ -258,10 +244,7 @@ textarea {
   border-style: none;
 }
 
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+:where(button, [type="button"], [type="reset"], [type="submit"]) {
   line-height: normal;
   text-align: center;
   margin: 0;
@@ -281,10 +264,12 @@ button,
   }
 }
 
-button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="reset"]:not(:disabled),
-[type="submit"]:not(:disabled) {
+:where(
+    button:not(:disabled),
+    [type="button"]:not(:disabled),
+    [type="reset"]:not(:disabled),
+    [type="submit"]:not(:disabled)
+  ) {
   cursor: pointer;
 }
 
@@ -292,8 +277,7 @@ button:not(:disabled),
 // 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
-input::placeholder,
-textarea::placeholder {
+:where(input::placeholder, textarea::placeholder) {
   color: bf-v-color.$bf-gray-dark;
 }
 

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

@@ -1,15 +1,14 @@
-@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';
+@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
 
-[type='checkbox'],
-[type='radio'] {
+:where([type="checkbox"], [type="radio"]) {
   appearance: none;
 
   height: 1.8rem;
@@ -31,15 +30,15 @@
   // Read more
   // 1. http://bootstrap.rtlcss.com
   // 2. https://rtlstyling.com/
-  *[dir='rtl'] & + label,
-  &[dir='rtl'] + label {
+  *[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: '';
+    content: "";
     display: block;
     position: absolute;
   }
@@ -50,7 +49,7 @@
   }
 }
 
-[type='radio'] {
+:where([type="radio"]) {
   &::after {
     width: 1.8rem;
     height: 1.8rem;
@@ -65,7 +64,7 @@
   }
 }
 
-[type='checkbox'] {
+:where([type="checkbox"]) {
   &::after {
     width: 0.6rem;
     height: 0.8rem;

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

@@ -1,21 +1,21 @@
-@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';
+@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
 
-[type='range'] {
+:where([type="range"]) {
   appearance: none;
   width: 100%;
   height: 1.4rem;
 }
 
-[type='range']::-webkit-slider-thumb {
+:where([type="range"])::-webkit-slider-thumb {
   border: 0;
   appearance: none;
 
@@ -24,9 +24,7 @@
   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,
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
 
   &:active {
@@ -34,7 +32,7 @@
   }
 }
 
-[type='range']::-moz-range-thumb {
+:where([type="range"])::-moz-range-thumb {
   border: 0;
   appearance: none;
 
@@ -42,9 +40,7 @@
   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,
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
     box-shadow 0.15s ease-in-out;
 
   &:active {
@@ -52,7 +48,7 @@
   }
 }
 
-[type='range']::-webkit-slider-runnable-track {
+:where([type="range"])::-webkit-slider-runnable-track {
   color: transparent;
   border-color: transparent;
 
@@ -62,7 +58,7 @@
   background-color: bf-v-color.$bf-gray-light-extra;
 }
 
-[type='range']::-moz-range-track {
+:where([type="range"])::-moz-range-track {
   color: transparent;
   border-color: transparent;
 
@@ -72,35 +68,32 @@
   background-color: bf-v-color.$bf-gray-light-extra;
 }
 
-[type='range']:focus {
+:where([type="range"]):focus {
   outline: none;
 
   &::-webkit-slider-thumb {
-    box-shadow:
-      0 0 0 0.1rem / bf-v-color.$bf-white,
+    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,
+    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 {
+:where([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,
+: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
 
-[type='range']:disabled {
+:where([type="range"]):disabled {
   pointer-events: none;
 
   &::-webkit-slider-thumb {

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

@@ -1,8 +1,8 @@
-@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';
+@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
@@ -11,10 +11,6 @@
 // and from Bootstrap custom select
 // https://getbootstrap.com/docs/4.4/components/input-group/#custom-select
 
-// ! :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
@@ -25,7 +21,7 @@
 // so, is not safe to style every kind of <select>
 //
 // remove the arrow and the appearance, especially on Webkit
-select:not([size], [multiple]) {
+:where(select):not([size], select[multiple]) {
   appearance: none;
 
   // add a new svg arrow
@@ -34,12 +30,11 @@ select:not([size], [multiple]) {
     no-repeat right 0.85rem center/8px 10px;
 
   // space the arrow
-  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;
 }
 
 // Legacy Edge browser support
-select::-ms-expand {
+:where(select)::-ms-expand {
   display: none;
 }
 
@@ -50,16 +45,14 @@ select::-ms-expand {
 // Read more
 // 1. http://bootstrap.rtlcss.com
 // 2. https://rtlstyling.com/
-*[dir='rtl'] select:not([size], [multiple]),
-select[dir='rtl']:not([size], [multiple]) {
+:where(*[dir="rtl"]) :where(select):not([size], select[multiple]),
+:where(select[dir="rtl"]):not([size], select[multiple]) {
   // move the arrow icon to the left
   background-position: left 0.85rem top 50%;
 
   // go back to default forms padding
-  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-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;
 }