bullframe.css 5.0.0 → 5.1.0

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

@@ -1,73 +1,64 @@
-@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";
 
-[type='email'],
-[type='number'],
-[type='password'],
-[type='tel'],
-[type='search'],
-[type='text'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='week'],
-[type='time'],
-[type='url'],
-input[list],
-select,
-textarea {
+:where(
+    [type="email"],
+    [type="number"],
+    [type="password"],
+    [type="tel"],
+    [type="search"],
+    [type="text"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="month"],
+    [type="week"],
+    [type="time"],
+    [type="url"],
+    input[list],
+    select,
+    textarea
+  ) {
   background-color: bf-v-color.$bf-white;
-  border: 1px solid / bf-v-color.$bf-gray;
-  padding: bf-v-space.$bf-spacing-md-px (bf-v-space.$bf-spacing-lg-px * 0.75);
+  border: 1px solid bf-v-color.$bf-gray;
   padding: bf-v-space.$bf-spacing-md-rem (bf-v-space.$bf-spacing-lg-rem * 0.75);
 }
 
-// Old browsers and Opera Mini don't fully support all type of inputs
-// e.g. [type="range"]
-// so, let's try to add styles carefully and selective
-[type='email'],
-[type='number'],
-[type='password'],
-[type='tel'],
-[type='search'],
-[type='text'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='week'],
-[type='time'],
-[type='url'],
-input[list],
-select,
-textarea,
-[type='radio'],
-[type='checkbox'] {
+:where(
+    [type="email"],
+    [type="number"],
+    [type="password"],
+    [type="tel"],
+    [type="search"],
+    [type="text"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="month"],
+    [type="week"],
+    [type="time"],
+    [type="url"],
+    input[list],
+    select,
+    textarea,
+    [type="radio"],
+    [type="checkbox"]
+  ) {
   &:active,
   &:focus {
-    transition:
-      border 0.2s,
-      background-color 0.2s,
-      box-shadow 0.2s;
+    transition: border 0.2s, background-color 0.2s, box-shadow 0.2s;
     border-color: bf-v-color.$bf-blue;
     box-shadow: 0 0 0 3px rgb(0 86 179 / 25%);
   }
 }
 
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+:where(button, [type="button"], [type="reset"], [type="submit"]) {
   color: bf-v-color.$bf-dark;
-  padding: calc(bf-v-space.$bf-spacing-xl-px / 3) (calc(bf-v-space.$bf-spacing-xl-px / 3) * 2); // 8px 16px
-  padding: calc(bf-v-space.$bf-spacing-xl-rem / 3) (calc(bf-v-space.$bf-spacing-xl-rem / 3) * 2);
+  padding: calc(bf-v-space.$bf-spacing-xl-rem / 3)
+    (calc(bf-v-space.$bf-spacing-xl-rem / 3) * 2);
   background: bf-v-color.$bf-gray-light;
-  transition:
-    color 0.2s,
-    background 0.2s,
-    box-shadow 0.2s;
+  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
 
   &:hover,
   &:active,
@@ -84,44 +75,40 @@ button,
 }
 
 // disabled groups
-fieldset[disabled] button,
-fieldset[disabled] input,
-fieldset[disabled] input::after,
-fieldset[disabled] input::before,
-fieldset[disabled] input:checked,
-fieldset[disabled] select,
-fieldset[disabled] textarea,
-fieldset[disabled] label,
-
-/* disabled singles*/
-button[disabled],
-input[disabled],
-input[disabled]::after,
-input[disabled]::before,
-input[disabled]:checked,
-select[disabled],
-textarea[disabled],
-label[disabled],
-
-/* pseudo class*/
-button:disabled,
-input:disabled,
-input:disabled::after,
-input:disabled::before,
-input:disabled:checked,
-select:disabled,
-textarea:disabled,
-label:disabled,
-
-/* aria*/
-button[aria-disabled="true"],
-input[aria-disabled="true"],
-input[aria-disabled="true"]::after,
-input[aria-disabled="true"]::before,
-input[aria-disabled="true"]:checked,
-select[aria-disabled="true"],
-textarea[aria-disabled="true"],
-label[aria-disabled="true"] {
+:where(
+    fieldset[disabled] button,
+    fieldset[disabled] input,
+    fieldset[disabled] input::after,
+    fieldset[disabled] input::before,
+    fieldset[disabled] input:checked,
+    fieldset[disabled] select,
+    fieldset[disabled] textarea,
+    fieldset[disabled] label,
+    button[disabled],
+    input[disabled],
+    input[disabled]::after,
+    input[disabled]::before,
+    input[disabled]:checked,
+    select[disabled],
+    textarea[disabled],
+    label[disabled],
+    button:disabled,
+    input:disabled,
+    input:disabled::after,
+    input:disabled::before,
+    input:disabled:checked,
+    select:disabled,
+    textarea:disabled,
+    label:disabled,
+    button[aria-disabled="true"],
+    input[aria-disabled="true"],
+    input[aria-disabled="true"]::after,
+    input[aria-disabled="true"]::before,
+    input[aria-disabled="true"]:checked,
+    select[aria-disabled="true"],
+    textarea[aria-disabled="true"],
+    label[aria-disabled="true"]
+  ) {
   cursor: default !important; // fallback
   cursor: not-allowed !important;
   pointer-events: none !important;

package/src/scss/miscellaneous/_misc-focus.scss

@@ -1,6 +1,6 @@
 // remove focus if is not keyboard
 // and if these elements are not focused globally
-:focus:not(:focus-visible) {
+:where(:focus:not(:focus-visible)) {
   outline: none;
 }
 
@@ -16,7 +16,7 @@
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
 
-//     http://www.apache.org/licenses/LICENSE-2.0
+// http://www.apache.org/licenses/LICENSE-2.0
 
 // Unless required by applicable law or agreed to in writing, software
 // distributed under the License is distributed on an "AS IS" BASIS,
@@ -24,17 +24,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-[tabindex='-1']:focus:not(:focus-visible) {
+:where([tabindex="-1"]:focus:not(:focus-visible)) {
   outline: 0 !important;
 }
 
-a:focus,
-input:focus {
+:where(a:focus, input:focus) {
   outline: 2px solid orange;
 }
 
 // style it again (must be separated)
-:focus-visible {
+:where(:focus-visible) {
   outline: 2px solid orange;
 }
 
@@ -46,30 +45,32 @@ input:focus {
 // [type="color"]
 // [type="range"]
 // [type="file"]
-// because usually are replaced with a custom verion
+// because usually are replaced with a custom version
 // with JS or extra <div>s
 // https://getbootstrap.com/docs/4.4/components/input-group/#custom-file-input
-button,
-[type='button'],
-[type='reset'],
-[type='submit'],
-[type='email'],
-[type='number'],
-[type='password'],
-[type='tel'],
-[type='search'],
-[type='text'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='time'],
-[type='week'],
-[type='url'],
-[type='radio'],
-[type='checkbox'],
-input[list],
-select,
-textarea {
+:where(
+    button,
+    [type="button"],
+    [type="reset"],
+    [type="submit"],
+    [type="email"],
+    [type="number"],
+    [type="password"],
+    [type="tel"],
+    [type="search"],
+    [type="text"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="month"],
+    [type="time"],
+    [type="week"],
+    [type="url"],
+    [type="radio"],
+    [type="checkbox"],
+    input[list],
+    select,
+    textarea
+  ) {
   &:focus {
     outline: 0;
   }

package/src/scss/mixins/_mixin-dark-prefers.scss

@@ -43,7 +43,6 @@
     }
 
     // forms
-
     [type="email"],
     [type="number"],
     [type="password"],
@@ -59,7 +58,7 @@
     [type="range"],
     input[list],
     select,
-    select:not([size], [multiple]),
+    select:not([size], select[multiple]),
     textarea {
       background-color: bf-v-color.$bf-dark-extra;
       border-color: bf-v-color.$bf-black;
@@ -86,7 +85,7 @@
     [type="url"],
     input[list],
     select,
-    select:not([size], [multiple]),
+    select:not([size], select[multiple]),
     textarea {
       &:active,
       &:focus {
@@ -108,17 +107,17 @@
       ) !important;
     }
 
-    select:not([size], [multiple]) {
+    select:not([size], select[multiple]) {
       background-image: 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='%23f0f0f0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
     }
 
     /* stylelint-disable-next-line */
     @media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
       // hide custom arrow
-      select:not([size], [multiple]),
+      select:not([size], select[multiple]),
   /* RTL*/
-  *[dir="rtl"] select:not([size], [multiple]),
-  select[dir="rtl"]:not([size], [multiple]) {
+  *[dir="rtl"] select:not([size], select[multiple]),
+  select[dir="rtl"]:not([size], select[multiple]) {
         background-image: none;
       }
     }
@@ -272,7 +271,6 @@
     }
 
     // forms
-
     [type="email"],
     [type="number"],
     [type="password"],
@@ -288,7 +286,7 @@
     [type="range"],
     input[list],
     select,
-    select:not([size], [multiple]),
+    select:not([size], select[multiple]),
     textarea {
       background-color: bf-v-color.$bf-dark-extra;
       border-color: bf-v-color.$bf-black;
@@ -315,7 +313,7 @@
     [type="url"],
     input[list],
     select,
-    select:not([size], [multiple]),
+    select:not([size], select[multiple]),
     textarea {
       &:active,
       &:focus {
@@ -323,17 +321,17 @@
       }
     }
 
-    select:not([size], [multiple]) {
+    select:not([size], select[multiple]) {
       background-image: 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='%23f0f0f0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
     }
 
     /* stylelint-disable-next-line */
     @media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
       // hide custom arrow
-      select:not([size], [multiple]),
+      select:not([size], select[multiple]),
   /* RTL*/
-  *[dir="rtl"] select:not([size], [multiple]),
-  select[dir="rtl"]:not([size], [multiple]) {
+  *[dir="rtl"] select:not([size], select[multiple]),
+  select[dir="rtl"]:not([size], select[multiple]) {
         background-image: none;
       }
     }
@@ -385,7 +383,8 @@
     button,
     [type="button"],
     [type="reset"],
-    [type="submit"] {
+    [type="submit"],
+    .bf-btn {
       &:active,
       &:focus {
         box-shadow: 0 0 0 3px rgb(255 255 255 / 45%);