bullframe.css 4.2.1 → 5.0.0

package/src/scss/utilities/_utility-buttons.scss

@@ -1,39 +1,40 @@
+@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';
+
 .bf-btn {
   display: inline-block;
   cursor: pointer;
-  color: $bf-dark;
-  padding: calc($bf-spacing-xl-px / 3) (calc($bf-spacing-xl-px / 3) * 2); // 8px 16px
-  padding: calc($bf-spacing-xl-rem / 3) (calc($bf-spacing-xl-rem / 3) * 2);
+  color: bf-v-color.$bf-dark;
+  padding: calc(bf-v-space.$bf-spacing-xl-rem / 3) (calc(bf-v-space.$bf-spacing-xl-rem / 3) * 2); // 8px 16px
   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;
-
-  // ! IE9+
-  // https://caniuse.com/#feat=border-radius
-  border-radius: $bf-spacing-sm-px;
-  border-radius: $bf-spacing-sm-rem;
+  border-radius: bf-v-space.$bf-spacing-sm-rem;
 
   border: 0;
   background-image: none; // FF mobile
-  background-color: $bf-gray-light;
+  background-color: bf-v-color.$bf-gray-light;
   transition: all 0.2s;
 
   &:hover,
   &:active,
   &:focus {
     text-decoration: none;
-    color: $bf-dark;
-    background: darken($bf-gray-light, 10%);
+    color: bf-v-color.$bf-dark;
+    background: color.adjust(bf-v-color.$bf-gray-light, $lightness: -10%);
   }
 
   &:active,
   &:focus {
-    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 0 3px rgb(0 0 0 / 15%);
   }
 
   &:focus {
@@ -41,19 +42,19 @@
   }
 
   &.bf-btn--primary {
-    color: $bf-white;
-    background: $bf-blue;
+    color: bf-v-color.$bf-white;
+    background: bf-v-color.$bf-blue;
 
     &:hover,
     &:active,
     &:focus {
-      color: $bf-white;
-      background: darken($bf-blue, 10%);
+      color: bf-v-color.$bf-white;
+      background: color.adjust(bf-v-color.$bf-blue, $lightness: -10%);
     }
 
     &:active,
     &:focus {
-      box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);
+      box-shadow: 0 0 0 3px rgb(0 86 179 / 25%);
     }
   }
 }
@@ -68,4 +69,5 @@ fieldset[disabled] .bf-btn,
   user-select: none !important;
   box-shadow: none !important;
   opacity: 0.5 !important;
+  background-color: bf-v-color.$bf-gray-light;
 }

package/src/scss/utilities/_utility-debugging.scss

@@ -4,19 +4,16 @@ $debug: false;
 
 // visualizing layout internals
 * {
-  @if ($debug) {
+  @if $debug {
     outline: 1px solid hotpink !important;
   }
 }
 
 // ...or something more powerful
-// 
+//
 // Debug CSS
 // https://gist.github.com/zaydek-old/6b2e55258734deabbd2b4a284321d6f6
 //
-// ! :not is IE9+
-// https://caniuse.com/#feat=mdn-css_selectors_not
-//
 // :not(g):not(path) {
 //   @if ($debug) {
 //     color: hsla(210, 100%, 100%, 0.9) !important;
@@ -28,89 +25,6 @@ $debug: false;
 //   }
 // }
 
-
-
-// -----------------------------------------------------------------------------
-
-// // CSS used to highlight potential performance issues
-// // https://gist.github.com/tkadlec/683b26344cde774170b94c0fcf0088b4
-
-// :root {
-//   --violation-color: red; /* used for clear issues */
-//   --warning-color: orange; /* used for potential issues we should look into */
-// }
-
-// /* IMAGES */
-
-// /*
-//   * Lazy-Loaded Images Check
-//   * ====
-//   * Highlight any lazy loaded images so we can see if any are inside the viewport
-//   *
-//   * Uses an outline so it can pair with Unsized Images and Legacy Format checks
-//   * Credit: https://twitter.com/csswizardry/status/1346477682544951296
-//   */
-// img[loading='lazy'] {
-//   outline: 10px solid var(--warning-color) !important;
-// }
-
-// /*
-//   * Unsized Images Check
-//   * ====
-//   * Highlight images that don't have a height or width attribute set
-//   *
-//   * Uses a border so it can pair with Lazy-Loaded and Legacy Format checks
-//   */
-// img:not([height]),
-// img:not([width]) {
-//   border: 10px solid var(--violation-color) !important;
-// }
-
-// /*
-//   * Legacy Format Check
-//   * ====
-//   * Highlight tiff's and bmp's because we can do better
-//   * Also JPG's because maybe we can use something like webp or avif instead
-//   *
-//   * Use opacity so we don't conflict with Lazy-Loaded and Unsized Images checks
-//   */
-// img[src*='.jpg'],
-// img[src*='.tiff'],
-// img[src*='.bmp'] {
-//   opacity: .5 !important;
-// }
-
-// /* SCRIPTS */
-
-// /* Synchronous Scripts Check
-//  * ====
-//  * Display any blocking synchronous scripts
-//  *
-//  * Credit: https://twitter.com/csswizardry/status/1336007323337285633
-//  */
-// head,
-// script[src] {
-//   display: block;
-//   border: 10px solid var(--violation-color);
-// }
-// /*
-//  * Display the URL/filepath of external scripts
-//  */
-// script[src]::before {
-//   content: attr(src);
-//   font-size: 1rem;
-// }
-
-// /*
-//  * Hide other head content and non-blocking scripts
-//  */
-// head *,
-// script[src][async],
-// script[src][defer],
-// script[src][type='module'] {
-//   display: none;
-// }
-
 // Read more
 //
 // a interesting guide about CSS debugging from Ben Frain

package/src/scss/utilities/_utility-embeds.scss

@@ -10,7 +10,7 @@
 
   &::before {
     display: block;
-    content: '';
+    content: "";
     padding-top: 56.25%; // 16:9 by default
   }
 

package/src/scss/utilities/_utility-filters.scss

@@ -1,6 +1,3 @@
-// No IE and Opera Mini support
-// https://caniuse.com/css-filters
-
 // useful if dark mode
 .bf-filter-invert {
   filter: invert(100%) !important;

package/src/scss/utilities/_utility-form-states.scss

@@ -1,15 +1,24 @@
+@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';
+
 .bf-focused {
-  transition: border .2s, background-color .2s, box-shadow .2s !important;
-  border-color: $bf-blue !important;
-  box-shadow: 0 0 0 3px rgba(0, 86, 179, .25) !important;
+  transition:
+    border 0.2s,
+    background-color 0.2s,
+    box-shadow 0.2s !important;
+  border-color: bf-v-color.$bf-blue !important;
+  box-shadow: 0 0 0 3px rgb(0 86 179 / 25%) !important;
 }
 
 .bf-disabled,
 .bf-disabled:hover,
 .bf-disabled:active,
 .bf-disabled:focus,
-.bf-disabled:after,
-.bf-disabled:before,
+.bf-disabled::after,
+.bf-disabled::before,
 .bf-disabled:invalid,
 .bf-disabled:checked {
   cursor: default !important; // IE8-10 fallback
@@ -17,10 +26,10 @@
   pointer-events: none !important;
   user-select: none !important;
   box-shadow: none !important;
-  opacity: .5 !important;
+  opacity: 0.5 !important;
 
-  background-color: $bf-white;
-  border-color: $bf-gray;
+  background-color: bf-v-color.$bf-white;
+  border-color: bf-v-color.$bf-gray;
 }
 
 label.bf-disabled {
@@ -38,17 +47,17 @@ button.bf-disabled,
   pointer-events: none;
   user-select: none;
   box-shadow: none;
-  opacity: .5;
+  opacity: 0.5;
 
-  color: $bf-dark;
-  background: $bf-gray-light;
+  color: bf-v-color.$bf-dark;
+  background: bf-v-color.$bf-gray-light;
 
   &:hover,
   &:active,
   &:focus {
     box-shadow: none;
-    color: $bf-dark;
-    background: $bf-gray-light;
+    color: bf-v-color.$bf-dark;
+    background: bf-v-color.$bf-gray-light;
   }
 }
 
@@ -58,23 +67,23 @@ button.bf-disabled,
   pointer-events: none;
   user-select: none;
   box-shadow: none;
-  opacity: .5;
+  opacity: 0.5;
 
-  color: $bf-white;
-  background: $bf-blue;
+  color: bf-v-color.$bf-white;
+  background: bf-v-color.$bf-blue;
 
   &:hover,
   &:active,
   &:focus {
     box-shadow: none;
-    color: $bf-white;
-    background: $bf-blue;
+    color: bf-v-color.$bf-white;
+    background: bf-v-color.$bf-blue;
   }
 }
 
 .bf-invalid,
 .bf-invalid:focus {
-  color: $bf-red !important;
-  border-color: $bf-red !important;
-  box-shadow: 0 0 0 3px rgba(255, 0, 0, .25) !important;
+  color: bf-v-color.$bf-red !important;
+  border-color: bf-v-color.$bf-red !important;
+  box-shadow: 0 0 0 3px rgb(255 0 0 / 25%) !important;
 }

package/src/scss/utilities/_utility-global-dark-classless.scss

@@ -1,157 +1,3 @@
-// these are global stylest tha that ovveride all the "light" styles
-
-// import dark scrollbars utility module
-@import 'utility-global-dark-scrollbars';
-
-// the basics: background and texts
-html {
-  color: $bf-light;
-}
-
-body {
-  background-color: lighten($bf-dark-extra, 7.5%);
-}
-
-// anchors
-a {
-  color: lighten($bf-blue, 20%);
-
-  &:hover,
-  &:focus {
-    color: lighten($bf-blue-light, 20%);
-  }
-}
-
-// typography elements that need tiny adjustments
-mark {
-  background-color: darken($bf-yellow, 10%);
-}
-
-ins {
-  background-color: darken($bf-yellow-light, 45%);
-}
-
-// forms
-
-[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'],
-[type='range'],
-input[list],
-select,
-select:not([size]):not([multiple]),
-textarea {
-  background-color: $bf-dark-extra;
-  border-color: $bf-black;
-  color: $bf-gray-light;
-
-  &:active,
-  &:focus {
-    background-color: $bf-dark-extra;
-    border-color: lighten($bf-blue, 10%);
-  }
-}
-
-[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,
-select:not([size]):not([multiple]),
-textarea {
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.5);
-  }
-}
-
-select:not([size]):not([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");
-}
-
-// IE9 only hack
-// https://gist.github.com/marcop135/cf5163ab23d1cb208248b955c990b2ea#ie-9-only
-@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
-  // hide custom arrow
-  select:not([size]):not([multiple]),
-  // RTL
-  *[dir="rtl"] select:not([size]):not([multiple]),
-  select[dir="rtl"]:not([size]):not([multiple]) {
-    background-image: none;
-  }
-}
-
-// range
-
-// all modern browsers but not IE
-@supports (appearance: none) {
-  // override above declaration
-  [type='range'] {
-    background-color: transparent;
-
-    &:focus {
-      background-color: transparent;
-    }
-  }
-
-  // darker background
-  // the rulesets must be separated
-  [type='range']::-webkit-slider-runnable-track {
-    background-color: $bf-dark-extra;
-  }
-
-  [type='range']::-moz-range-track {
-    background-color: $bf-dark-extra;
-  }
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: $bf-gray;
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  background: $bf-gray-light;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: darken($bf-gray-light, 10%);
-  }
-
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
-  }
-}
-
-// focus
-a:focus,
-input:focus {
-  outline-color: darken(orange, 15%);
-}
-
-:focus-visible {
-  outline-color: darken(orange, 15%);
-}
+@use '../mixins/mixin-dark' as bf-mix-dark;
+@use 'utility-global-dark-scrollbars' as bfUtilGlobalDarkScrollbars;
+@include bf-mix-dark.bf-global-dark-classless;

package/src/scss/utilities/_utility-global-dark-prefers-classless.scss

@@ -1,3 +1,3 @@
-@media (prefers-color-scheme: dark) {
-  @import 'utilities/utility-global-dark-classless';
-}
+@use "../variables/variables-colors" as bf-v-color;
+@use "../mixins/mixin-dark-prefers" as bf-mix-dark-prefers;
+@include bf-mix-dark-prefers.bf-global-dark-classless-prefers;

package/src/scss/utilities/_utility-global-dark-prefers.scss

@@ -1,3 +1,3 @@
-@media (prefers-color-scheme: dark) {
-  @import 'utilities/utility-global-dark';
-}
+@use "../variables/variables-colors" as bf-v-color;
+@use "../mixins/mixin-dark-prefers" as bf-mix-dark-prefers;
+@include bf-mix-dark-prefers.bf-global-dark-classless-prefers;

package/src/scss/utilities/_utility-global-dark-scrollbars.scss

@@ -1,10 +1,15 @@
+@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';
+
 // standard property
 // 'scrollbar-color'
 // https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
-// currently (June 2020) Firefox only
-// https://caniuse.com/#feat=mdn-css_properties_scrollbar-color
 html {
-  scrollbar-color: darken($bf-gray-dark, 5%) $bf-dark-extra;
+  scrollbar-color: color.adjust(bf-v-color.$bf-gray-dark, $lightness: -5%)
+    bf-v-color.$bf-dark-extra;
 }
 
 // these features are not standard, and blink and webkit only
@@ -17,13 +22,13 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: $bf-dark-extra;
+  background-color: bf-v-color.$bf-dark-extra;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: darken($bf-gray-dark, 5%);
+  background-color: color.adjust(bf-v-color.$bf-gray-dark, $lightness: -5%);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: lighten($bf-gray-dark, 10%);
+  background-color: color.adjust(bf-v-color.$bf-gray-dark, $lightness: 10%);
 }