bullframe.css 4.2.1 → 5.0.0

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

@@ -0,0 +1,396 @@
+@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 "../utilities/utility-global-dark-scrollbars" as bfUtilGlobalDarkScrollbars;
+@use "sass:color";
+
+@mixin bf-global-dark {
+  // these are global styles tha that ovveride all the "light" styles
+
+  // the basics: background and texts
+  html {
+    color: bf-v-color.$bf-light;
+  }
+
+  body {
+    background-color: color.adjust(bf-v-color.$bf-dark-extra, $lightness: 7.5%);
+  }
+
+  // anchors
+  a {
+    color: color.adjust(bf-v-color.$bf-blue, $lightness: 20%);
+
+    &:hover,
+    &:focus {
+      color: color.adjust(bf-v-color.$bf-blue-light, $lightness: 20%);
+    }
+  }
+
+  // typography elements that need tiny adjustments
+  mark {
+    background-color: color.adjust(bf-v-color.$bf-yellow, $lightness: -10%);
+  }
+
+  ins {
+    background-color: color.adjust(
+      bf-v-color.$bf-yellow-light,
+      $lightness: 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], [multiple]),
+  textarea {
+    background-color: bf-v-color.$bf-dark-extra;
+    border-color: bf-v-color.$bf-black;
+    color: bf-v-color.$bf-gray-light;
+
+    &:active,
+    &:focus {
+      background-color: bf-v-color.$bf-dark-extra;
+      border-color: color.adjust(bf-v-color.$bf-blue, $lightness: 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], [multiple]),
+  textarea {
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 3px rgb(3 102 214 / 50%);
+    }
+  }
+
+  .bf-focused {
+    border-color: color.adjust(bf-v-color.$bf-blue, $lightness: 10%);
+    box-shadow: 0 0 0 3px rgb(3 102 214 / 50%) !important;
+  }
+
+  .bf-invalid,
+  .bf-invalid:focus {
+    color: color.adjust(bf-v-color.$bf-red, $lightness: 7.5%) !important;
+    border-color: color.adjust(bf-v-color.$bf-red, $lightness: 7.5%) !important;
+  }
+
+  select:not([size], [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]),
+  /* RTL*/
+  *[dir="rtl"] select:not([size], [multiple]),
+  select[dir="rtl"]:not([size], [multiple]) {
+      background-image: none;
+    }
+  }
+
+  // range
+
+  // 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-v-color.$bf-dark-extra;
+  }
+
+  [type="range"]::-moz-range-track {
+    background-color: bf-v-color.$bf-dark-extra;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: bf-v-color.$bf-gray;
+  }
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"],
+  .bf-btn,
+  button.bf-disabled,
+  [type="button"].bf-disabled,
+  [type="reset"].bf-disabled,
+  [type="submit"].bf-disabled,
+  .bf-btn.bf-disabled {
+    background: bf-v-color.$bf-gray-light;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: color.adjust(bf-v-color.$bf-gray-light, $lightness: -10%);
+    }
+
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 3px rgb(255 255 255 / 45%);
+    }
+  }
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"],
+  .bf-btn {
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 3px rgb(255 255 255 / 45%);
+    }
+  }
+
+  .bf-btn--primary.bf-disabled,
+  .bf-btn.bf-btn--primary {
+    background: bf-v-color.$bf-blue;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: color.adjust(bf-v-color.$bf-blue, $lightness: -5%);
+    }
+
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 3px rgb(0 86 179 / 75%);
+    }
+  }
+
+  // focus
+  a:focus,
+  input:focus {
+    outline-color: color.adjust(orange, $lightness: -15%);
+  }
+
+  :focus-visible {
+    outline-color: color.adjust(orange, $lightness: -15%);
+  }
+
+  // tables
+
+  .bf-table th,
+  .bf-table td {
+    border-color: bf-v-color.$bf-gray-dark;
+  }
+
+  .bf-table--zebra tbody tr:nth-child(odd),
+  .bf-table-responsive--zebra tbody tr:nth-child(odd) {
+    background-color: bf-v-color.$bf-gray-dark-extra;
+  }
+
+  dialog {
+    color: bf-v-color.$bf-light;
+    // match body background color
+    background-color: color.adjust(bf-v-color.$bf-dark-extra, $lightness: 7.5%);
+  }
+}
+
+@mixin bf-global-dark-classless {
+  // these are global styles tha that ovveride all the "light" styles
+
+  // the basics: background and texts
+  html {
+    color: bf-v-color.$bf-light;
+  }
+
+  body {
+    background-color: color.adjust(bf-v-color.$bf-dark-extra, $lightness: 7.5%);
+  }
+
+  // anchors
+  a {
+    color: color.adjust(bf-v-color.$bf-blue, $lightness: 20%);
+
+    &:hover,
+    &:focus {
+      color: color.adjust(bf-v-color.$bf-blue-light, $lightness: 20%);
+    }
+  }
+
+  // typography elements that need tiny adjustments
+  mark {
+    background-color: color.adjust(bf-v-color.$bf-yellow, $lightness: -10%);
+  }
+
+  ins {
+    background-color: color.adjust(
+      bf-v-color.$bf-yellow-light,
+      $lightness: 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], [multiple]),
+  textarea {
+    background-color: bf-v-color.$bf-dark-extra;
+    border-color: bf-v-color.$bf-black;
+    color: bf-v-color.$bf-gray-light;
+
+    &:active,
+    &:focus {
+      background-color: bf-v-color.$bf-dark-extra;
+      border-color: color.adjust(bf-v-color.$bf-blue, $lightness: 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], [multiple]),
+  textarea {
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 3px rgb(3 102 214 / 50%);
+    }
+  }
+
+  select:not([size], [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]),
+  /* RTL*/
+  *[dir="rtl"] select:not([size], [multiple]),
+  select[dir="rtl"]:not([size], [multiple]) {
+      background-image: none;
+    }
+  }
+
+  // range
+
+  // 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-v-color.$bf-dark-extra;
+  }
+
+  [type="range"]::-moz-range-track {
+    background-color: bf-v-color.$bf-dark-extra;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: bf-v-color.$bf-gray;
+  }
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    background: bf-v-color.$bf-gray-light;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: color.adjust(bf-v-color.$bf-gray-light, $lightness: -10%);
+    }
+
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 3px rgb(255 255 255 / 45%);
+    }
+  }
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    &:active,
+    &:focus {
+      box-shadow: 0 0 0 3px rgb(255 255 255 / 45%);
+    }
+  }
+
+  // focus
+  a:focus,
+  input:focus {
+    outline-color: color.adjust(orange, $lightness: -15%);
+  }
+
+  :focus-visible {
+    outline-color: color.adjust(orange, $lightness: -15%);
+  }
+
+  dialog {
+    color: bf-v-color.$bf-light;
+    // match body background color
+    background-color: color.adjust(bf-v-color.$bf-dark-extra, $lightness: 7.5%);
+  }
+}

package/src/scss/mixins/_mixin-grid-flex.scss

@@ -1,6 +1,3 @@
-// This is IE10+ 
-// https://caniuse.com/flexbox
-
 @mixin flex-container {
   display: flex !important;
   flex-wrap: wrap !important;

package/src/scss/mixins/_mixin-layout.scss

@@ -18,7 +18,7 @@
 @mixin bf-sr-only-focusable {
   &:active,
   &:focus {
-    @include bf-sr-only();
+    @include bf-sr-only;
     clip: auto !important;
     height: auto !important;
     margin: 0 !important;

package/src/scss/mixins/_mixin-texts.scss

@@ -19,9 +19,6 @@
 
 // truncate a multiline text via line-clamp
 //
-// no IE support
-// https://caniuse.com/css-line-clamp
-//
 // demo https://codepen.io/devam-soni/pen/PoqaKWm
 
 @mixin bf-text-truncate--multiline-2 {
@@ -29,10 +26,12 @@
   text-overflow: ellipsis !important;
   display: -webkit-box !important;
   -webkit-line-clamp: 2 !important;
+  line-clamp: 3 !important;
   -webkit-box-orient: vertical !important;
 }
 
 @mixin bf-text-truncate--multiline-3 {
   @include bf-text-truncate--multiline-2;
   -webkit-line-clamp: 3 !important;
+  line-clamp: 3 !important;
 }

package/src/scss/typography/_typography-blockquotes.scss

@@ -1,6 +1,11 @@
+@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';
+
 blockquote {
-  margin: 0 0 $bf-spacing-xl-px 0;
-  margin-bottom: $bf-spacing-xl-rem;
+  margin-bottom: bf-v-space.$bf-spacing-xl-rem;
   padding-left: 0;
   font-style: italic;
 }
@@ -10,14 +15,14 @@ blockquote p {
 }
 
 blockquote small {
-  color: $bf-gray;
+  color: bf-v-color.$bf-gray;
   display: block;
 }
 
-blockquote small:before {
+blockquote small::before {
   content: '\2014 \00A0';
 }
 
 q {
-  quotes: '\201C''\201D''\2018''\2019';
+  quotes: '\201C' '\201D' '\2018' '\2019';
 }

package/src/scss/typography/_typography-headings.scss

@@ -1,20 +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';
+
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  margin-top: 0;
-
-  font-weight: 700; // fallback
+  margin-top: 0; // fallback
   font-weight: 600;
   font-family: inherit;
   color: inherit;
   line-height: 1.25;
-  margin-bottom: $bf-spacing-lg-px;
-  margin-bottom: $bf-spacing-lg-rem;
-
-
+  margin-bottom: bf-v-space.$bf-spacing-lg-rem;
 }
 
 h1 {
@@ -41,4 +42,4 @@ h5,
 h6 {
   font-size: 16px;
   font-size: 1.6rem;
-}
+}

package/src/scss/typography/_typography-html-body.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';
+
 html {
   text-size-adjust: 100%;
 
@@ -5,25 +11,21 @@ html {
   // https://snook.ca/archives/html_and_css/font-size-with-rem
   font-size: 62.5%;
 
-  color: #222;
+  color: bf-v-color.$bf-dark;
 
   // set a default font-family and line-height
   font-family: sans-serif;
   line-height: 1.15;
 
-  // ! this is not a standard feature, is webkit only
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
-
   // remove a tap background when a link or interactive element is focused
   // if is touch
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
 }
 
 body {
   margin: 0;
-  font-size: $bf-body-font-size-px; // '16px' by default
-  font-size: $bf-body-font-size-rem; // '1.6rem' by default
-  line-height: $bf-body-line-height; // '1.5' by default
+  font-size: bf-v-text.$bf-body-font-size-rem; // '1.6rem' by default
+  line-height: bf-v-text.$bf-body-line-height; // '1.5' by default
 
   // this is useful to inherit values for some elements (e.g. forms)
   font-weight: 400;
@@ -34,7 +36,7 @@ body {
   // a web apps looks like a native app (e.g. Android = Roboto font)
   // Read more:
   // https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
-  font-family: 
+  font-family:
 
 		// Safari for OS X and iOS (San Francisco) -apple-system,
     // Chrome < 56 for OS X (San Francisco)
@@ -52,14 +54,15 @@ body {
     // macOS 1.10 and below
     'Helvetica Neue',
     Helvetica,
-
     // Basic web fallback
     Arial,
-    'Noto Sans', sans-serif,
-
+    'Noto Sans',
+    sans-serif,
     // emoji fonts
     'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
 
   // this enable font ligatures
   text-rendering: optimizeLegibility;
@@ -68,5 +71,5 @@ body {
   // e.g. big <h1> or <h2> headlines
   word-wrap: break-word;
 
-  background-color: $bf-white;
+  background-color: bf-v-color.$bf-white;
 }

package/src/scss/typography/_typography-misc.scss

@@ -1,6 +1,11 @@
+@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";
+
 p {
-  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;
 }
 
 // Abbreviations (taken from Bootstrap 4)
@@ -17,13 +22,13 @@ abbr[data-original-title] {
 }
 
 mark {
-  background-color: $bf-yellow;
-  color: $bf-black;
+  background-color: bf-v-color.$bf-yellow;
+  color: bf-v-color.$bf-black;
 }
 
 ins {
-  background-color: $bf-yellow-light;
-  color: $bf-black;
+  background-color: bf-v-color.$bf-yellow-light;
+  color: bf-v-color.$bf-black;
   text-decoration: none;
 }
 
@@ -35,9 +40,9 @@ strong {
 }
 
 // Add the correct font weight in Chrome, Edge, and Safari
-/* stylelint-disable-next-line */
 b,
 strong {
+  /* stylelint-disable-next-line */
   font-weight: bolder;
 }
 
@@ -67,6 +72,11 @@ small {
   font-size: 80%;
 }
 
+// Reduce line-height for <small> elements inside <p>
+p:has(small) {
+  line-height: 1.25;
+}
+
 hr {
   box-sizing: content-box;
   display: block;
@@ -74,20 +84,7 @@ hr {
   border-style: solid;
   border-width: 1px 0 0;
   color: inherit;
-  margin: $bf-spacing-xl-px 0;
-  margin: $bf-spacing-xl-rem 0;
+  margin: bf-v-space.$bf-spacing-xl-rem 0;
   padding: 0;
-  overflow: visible; // Show the overflow in Edge and IE
-}
-
-address {
-  font-style: normal;
-  margin-bottom: $bf-spacing-lg-px;
-  margin-bottom: $bf-spacing-lg-rem;
-  line-height: inherit;
-}
-
-summary {
-  display: list-item;
-  cursor: pointer;
+  overflow: visible; // Show the overflow in Edge
 }

package/src/scss/typography/_typography-monospaced-elements.scss

@@ -1,6 +1,11 @@
+@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';
+
 pre {
-  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;
 
   display: block;
   overflow: auto;
@@ -9,9 +14,6 @@ pre {
   white-space: pre;
   hyphens: none;
 
-  // this is a not standard CSS property, so it's for IE only
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style
-  //
   // Disable auto-hiding scrollbar in legacy Edge
   // https://github.com/twbs/bootstrap/pull/30685
   -ms-overflow-style: auto;
@@ -21,13 +23,20 @@ pre,
 code,
 kbd,
 samp {
-  font-family: 
-
-  /* macOS 1.10+ */ 'Menlo', /* Windows 6+ */ 'Consolas',
-    /* Android 4+ */ 'Roboto Mono', /* Ubuntu 1.10+ */ 'Ubuntu Monospace',
-    /* KDE Plasma 5+ */ 'Noto Mono', /* KDE Plasma 4+ */ 'Oxygen Mono',
-    /* Linux/OpenOffice fallback */ 'Liberation Mono', /* fallback */ monospace,
-    /* emoji fonts */ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+  font-family:
+
+  /* macOS 1.10+ */
+    Menlo,
+     Consolas,
+     'Roboto Mono',
+     'Ubuntu Monospace',
+     'Noto Mono',
+     'Oxygen Mono',
+     'Liberation Mono',
+     monospace,
+     'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
     'Noto Color Emoji';
 
   // a monospaced text font should looks bigger, so a smaller font-size