bullframe.css 4.2.1 → 5.0.0

package/src/scss/forms/_forms-styling.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';
+
 [type='email'],
 [type='number'],
 [type='password'],
@@ -13,10 +19,10 @@
 input[list],
 select,
 textarea {
-  background-color: $bf-white;
-  border: 1px solid $bf-gray;
-  padding: $bf-spacing-md-px ($bf-spacing-lg-px * 0.75);
-  padding: $bf-spacing-md-rem ($bf-spacing-lg-rem * 0.75);
+  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);
+  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
@@ -41,9 +47,12 @@ textarea,
 [type='checkbox'] {
   &:active,
   &:focus {
-    transition: border 0.2s, background-color 0.2s, box-shadow 0.2s;
-    border-color: $bf-blue;
-    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);
+    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%);
   }
 }
 
@@ -51,61 +60,64 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
-  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);
-  background: $bf-gray-light;
-  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
+  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);
+  background: bf-v-color.$bf-gray-light;
+  transition:
+    color 0.2s,
+    background 0.2s,
+    box-shadow 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%);
   }
 }
 
 // disabled groups
 fieldset[disabled] button,
 fieldset[disabled] input,
-fieldset[disabled] input:after,
-fieldset[disabled] input:before,
+fieldset[disabled] input::after,
+fieldset[disabled] input::before,
 fieldset[disabled] input:checked,
 fieldset[disabled] select,
 fieldset[disabled] textarea,
 fieldset[disabled] label,
 
-// disabled singles
+/* disabled singles*/
 button[disabled],
 input[disabled],
-input[disabled]:after,
-input[disabled]:before,
+input[disabled]::after,
+input[disabled]::before,
 input[disabled]:checked,
 select[disabled],
 textarea[disabled],
 label[disabled],
 
-// pseudo class
+/* pseudo class*/
 button:disabled,
 input:disabled,
-input:disabled:after,
-input:disabled:before,
+input:disabled::after,
+input:disabled::before,
 input:disabled:checked,
 select:disabled,
 textarea:disabled,
 label:disabled,
 
-// aria 
+/* aria*/
 button[aria-disabled="true"],
 input[aria-disabled="true"],
-input[aria-disabled="true"]:after,
-input[aria-disabled="true"]:before,
+input[aria-disabled="true"]::after,
+input[aria-disabled="true"]::before,
 input[aria-disabled="true"]:checked,
 select[aria-disabled="true"],
 textarea[aria-disabled="true"],

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

@@ -1,29 +1,23 @@
-// taken from sanitize.css
-// https://github.com/csstools/sanitize.css/blob/12.0.1/sanitize.css
+// Taken from sanitize.css
+// https://github.com/csstools/sanitize.css/blob/v13.0.0/sanitize.css
+
+/* Accessibility
+ * ========================================================================== */
 
 /**
  * Change the cursor on busy elements in all browsers (opinionated).
  */
 
- [aria-busy="true"] {
+:where([aria-busy='true' i]) {
   cursor: progress;
 }
 
-/*
- * Change the cursor on control elements in all browsers (opinionated).
- */
-
-[aria-controls] {
-  cursor: pointer;
-}
-
 /*
  * Change the cursor on disabled, not-editable, or otherwise
  * inoperable elements in all browsers (opinionated).
  */
 
-[aria-disabled="true"],
-[disabled] {
+:where([aria-disabled='true' i], [disabled]) {
   cursor: not-allowed;
 }
 
@@ -32,11 +26,11 @@
  * in all browsers (opinionated).
  */
 
-[aria-hidden="false"][hidden] {
+:where([aria-hidden='false' i][hidden]) {
   display: initial;
 }
 
-[aria-hidden="false"][hidden]:not(:focus) {
+:where([aria-hidden='false' i][hidden]:not(:focus)) {
   clip: rect(0, 0, 0, 0);
   position: absolute;
-}
+}

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

@@ -1,35 +1,37 @@
+@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';
+
 a {
-  color: $bf-blue; // bootstrap blue
+  color: bf-v-color.$bf-blue; // bootstrap blue
   text-decoration: none;
 
-  // IE10+: Remove grey background on active links
+  // Edge Legacy: Remove grey background on active links
   background-color: transparent;
-  
+
   &:hover,
   &:focus {
     text-decoration: underline;
-    color: $bf-blue-light;
+    color: bf-v-color.$bf-blue-light;
   }
 }
 
 // this is taken from Bootstrap's reboot
 // https://getbootstrap.com/docs/4.4/content/reboot/
-//
-// ':not' is IE9+
-// https://caniuse.com/#feat=mdn-css_selectors_not
-a:not([href]):not([tabindex]) {
+
+a:not([href], [tabindex]) {
   color: inherit;
   text-decoration: none;
 }
 
-a:not([href]):not([tabindex]):hover,
-a:not([href]):not([tabindex]):focus,
-a:not([href]):not([class]),
-a:not([href]):not([class]):hover {
+a:not([href], [class]),
+a:not([href], [class]):hover {
   color: inherit;
   text-decoration: none;
 }
 
-a:not([href]):not([tabindex]):focus {
+a:not([href], [tabindex]):focus {
   outline: 0;
 }

package/src/scss/miscellaneous/_misc-embedded-content.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';
+
 audio,
 canvas,
 progress,
@@ -28,13 +34,6 @@ img {
   border-style: none;
 }
 
-// useful for CMS generated images
-// but causes layout breaking
-// img[width],
-// img[height] {
-// 	max-width: none;
-// }
-
 figure {
   margin: 0;
 }
@@ -89,21 +88,18 @@ progress[value] {
   height: 2rem;
 
   // progress bar background color
-  background: $bf-gray-light;
+  background: bf-v-color.$bf-gray-light;
 
   // progress value background color in IE10+
-  color: $bf-blue;
+  color: bf-v-color.$bf-blue;
 }
 
-// ! this is not a standard feature, is webkit only
-// https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-webkit-progress-bar
-//
 // progress value background color in webkit
 progress[value]::-webkit-progress-bar {
-  background: $bf-gray-light;
+  background: bf-v-color.$bf-gray-light;
 }
 progress[value]::-webkit-progress-value {
-  background: $bf-blue;
+  background: bf-v-color.$bf-blue;
 }
 
 // remove default border in old browsers
@@ -112,13 +108,10 @@ progress[value]::-webkit-progress-value {
 //
 // e.g.
 // <iframe
-//  width="560"
-//  height="315"
-//  src="https://www.youtube-nocookie.com/embed/Z-4v4I7Gzk0"
-//  frameborder="0"
-//  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-//  allowfullscreen>
-// </iframe>
+//  width=" 560 "
+//  height=" 315 "
+//  src=" https:
+// www.youtube-nocookie.com/embed/Z-4v4I7Gzk0"
 iframe {
   border-style: none;
 }

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

@@ -1,17 +1,3 @@
-// ! ':not' is IE9+
-// https://caniuse.com/#feat=mdn-css_selectors_not
-//
-// ! and ':focus-visible'
-// https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
-//
-// don't have some much browser support now (May 2020)
-// https://caniuse.com/#feat=css-focus-visible
-//
-// but is good in a progressive enhancement future view
-//
-// and you could polyfill it for a wide cross-browser support right now
-// https://github.com/WICG/focus-visible
-//
 // remove focus if is not keyboard
 // and if these elements are not focused globally
 :focus:not(:focus-visible) {
@@ -42,13 +28,6 @@
   outline: 0 !important;
 }
 
-// style the ':focus' outline on anchors and inputs
-// this is for consistency
-// e.g.
-// in webkit (Chrome, Safari) the outline is blue with a subtle box-shadow
-// in trident (IE) is just pointed black
-// in gecko (FF) is pointed black, but it's a thiner
-// ...
 a:focus,
 input:focus {
   outline: 2px solid orange;

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

@@ -0,0 +1,48 @@
+@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";
+
+address {
+  font-style: normal;
+  margin-bottom: bf-v-space.$bf-spacing-lg-px;
+  margin-bottom: bf-v-space.$bf-spacing-lg-rem;
+  line-height: inherit;
+}
+
+details > summary:first-of-type {
+  display: list-item;
+}
+
+summary {
+  cursor: pointer;
+  font-weight: 700;
+  word-break: break-all;
+}
+
+dialog {
+  // match body background color
+  background-color: bf-v-color.$bf-white;
+  color: bf-v-color.$bf-dark;
+  border: none;
+  border-radius: bf-v-space.$bf-spacing-sm-rem;
+  padding: bf-v-space.$bf-spacing-xl-px;
+  padding: bf-v-space.$bf-spacing-xl-rem;
+  height: fit-content;
+  min-width: 25rem;
+  max-width: calc(100vw - (bf-v-space.$bf-spacing-grid-gutter-rem * 2));
+  @media (min-width: bf-v-bp.$bf-breakpoint-md) {
+    max-width: 50rem;
+  }
+}
+
+// Overrides 'hidden' attribute
+// <dialog id="myDialog" hidden>...</dialog>
+dialog[open] {
+  display: block !important;
+}
+
+dialog::backdrop {
+  background: rgb(0 0 0 / 40%);
+}

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

@@ -1,9 +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';
+
 menu,
 ol,
 ul,
 dl {
-  margin: 0 0 $bf-spacing-xl-px 0;
-  margin: 0 0 $bf-spacing-xl-rem 0;
+  margin: 0 0 bf-v-space.$bf-spacing-xl-rem 0;
   padding: 0;
 }
 
@@ -19,8 +24,7 @@ dd {
 
 ul,
 ol {
-  margin-left: $bf-spacing-xl-px;
-  margin-left: $bf-spacing-xl-rem;
+  margin-left: bf-v-space.$bf-spacing-xl-rem;
 }
 
 nav ol,
@@ -43,7 +47,7 @@ dd {
 // 1. Add zero-width-space to prevent VoiceOver disable
 // 2. Absolute position ensures no extra space
 // See: https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/
-nav li:before {
+nav li::before {
   content: '\200B';
   position: absolute;
 }

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

@@ -0,0 +1,5 @@
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}

package/src/scss/miscellaneous/_misc-shame.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';
+
 // shamy quick fixes...
 //
 // Credits: https://csswizardry.com/2013/04/shame-css/

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

@@ -1,6 +1,19 @@
+@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';
+
 table {
+  caption-side: bottom;
   max-width: 100%;
   border-collapse: collapse;
+  // Correct table border color inheritance in Chrome and Safari
+  // https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016
+  border-color: currentcolor;
+  // Remove text indentation from table contents in Chrome and Safari
+  // https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297
+  text-indent: 0;
 }
 
 thead,
@@ -25,15 +38,14 @@ td {
 
 th {
   text-align: inherit;
+  text-align: -webkit-match-parent;
   font-weight: 700;
 }
 
 caption {
-  padding-top: $bf-spacing-md-px;
-  padding-top: $bf-spacing-md-rem;
-  padding-bottom: $bf-spacing-md-px;
-  padding-bottom: $bf-spacing-md-rem;
-  color: $bf-gray;
+  padding-top: bf-v-space.$bf-spacing-md-rem;
+  padding-bottom: bf-v-space.$bf-spacing-md-rem;
+  color: bf-v-color.$bf-gray;
   text-align: left;
   caption-side: bottom;
   line-height: 1.375;