bullframe.css 4.2.1 → 5.0.0

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

@@ -1,213 +1,4 @@
-// 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);
-  }
-}
-
-.bf-focused {
-  border-color: lighten($bf-blue, 10%);
-  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.5) !important;
-}
-
-.bf-invalid,
-.bf-invalid:focus {
-  color: lighten($bf-red, 7.5%) !important;
-  border-color: lighten($bf-red, 7.5%) !important;
-}
-
-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'],
-.bf-btn,
-button.bf-disabled,
-[type='button'].bf-disabled,
-[type='reset'].bf-disabled,
-[type='submit'].bf-disabled,
-.bf-btn.bf-disabled {
-  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);
-  }
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'],
-.bf-btn {
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
-  }
-}
-
-.bf-btn--primary.bf-disabled,
-.bf-btn.bf-btn--primary {
-  background: $bf-blue;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: darken($bf-blue, 5%);
-  }
-
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.75);
-  }
-}
-
-// focus
-a:focus,
-input:focus {
-  outline-color: darken(orange, 15%);
-}
-
-:focus-visible {
-  outline-color: darken(orange, 15%);
-}
-
-// tables
-
-.bf-table th,
-.bf-table td {
-  border-color: $bf-gray-dark;
-}
-
-.bf-table--zebra tbody tr:nth-child(odd),
-.bf-table-responsive--zebra tbody tr:nth-child(odd) {
-  background-color: $bf-gray-dark-extra;
-}
+@use '../variables/variables-colors' as bf-v-color;
+@use '../mixins/mixin-dark' as bf-mix-dark;
+@use 'utility-global-dark-scrollbars' as bfUtilGlobalDarkScrollbars;
+@include bf-mix-dark.bf-global-dark;

package/src/scss/utilities/_utility-global-system-default-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-system-default.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-prefers;

package/src/scss/utilities/_utility-grid-system.scss

@@ -1,154 +1,104 @@
+@use '../variables/variables-spacing' as bf-v-space;
+@use '../variables/variables-breakpoints' as bf-v-bp;
+
 .bf-container,
 .bf-container--fluid {
-  // avoid IE8 issue with 'box-sizing: border-box' in combination
-  // with max/min-width and max/min-height
-  // https://github.com/twbs/bootstrap/issues/10014
-  //
-  box-sizing: content-box;
-
-  // you could add these classes to an inline/inline-block element
-  // but it's not recommended
+  box-sizing: border-box;
   display: block;
-
-  // centering
   margin-right: auto;
   margin-left: auto;
-
-  // spacing
-  //
-  // match the default Bootstrap Grid gutter width
-  // https://getbootstrap.com/docs/3.4/css/#grid-options
-  padding-left: $bf-spacing-grid-gutter-px;
-  padding-left: $bf-spacing-grid-gutter-rem;
-  padding-right: $bf-spacing-grid-gutter-px;
-  padding-right: $bf-spacing-grid-gutter-rem;
-
-  // clearfix
-  &:before,
-  &:after {
-    display: table;
-    content: ' ';
-  }
-
-  &:after {
-    clear: both;
-  }
+  padding-left: bf-v-space.$bf-spacing-grid-gutter-rem;
+  padding-right: bf-v-space.$bf-spacing-grid-gutter-rem;
 }
 
 .bf-container {
-  max-width: 1140px; // 1140 + 15 + 15 = 1170
   max-width: 114rem;
 }
 
 .bf-row {
-  display: block;
-
-  margin-left: -$bf-spacing-grid-gutter-px;
-  margin-left: -$bf-spacing-grid-gutter-rem;
-  margin-right: -$bf-spacing-grid-gutter-px;
-  margin-right: -$bf-spacing-grid-gutter-rem;
-
-  // clearfix
-  &:before,
-  &:after {
-    content: ' ';
-    display: table;
-  }
-
-  &:after {
-    clear: both;
-  }
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(-1 * bf-v-space.$bf-spacing-grid-gutter-rem);
+  margin-right: calc(-1 * bf-v-space.$bf-spacing-grid-gutter-rem);
 }
 
 [class^='bf-col-'] {
-  // the block display is triggered by 'float: left'
-  // display: block;
-
-  float: left;
   position: relative;
   min-height: 1px;
-
-  padding-left: $bf-spacing-grid-gutter-px;
-  padding-left: $bf-spacing-grid-gutter-rem;
-  padding-right: $bf-spacing-grid-gutter-px;
-  padding-right: $bf-spacing-grid-gutter-rem;
+  padding-left: bf-v-space.$bf-spacing-grid-gutter-rem;
+  padding-right: bf-v-space.$bf-spacing-grid-gutter-rem;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .bf-no-gutters {
   margin-right: 0;
   margin-left: 0;
+  > [class^='bf-col'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }
 
-.bf-no-gutters > [class^='bf-col'] {
-  padding-right: 0;
-  padding-left: 0;
-}
-
+// Column widths
 .bf-col-12 {
-  width: 100%;
+  flex-basis: 100%;
+  max-width: 100%;
 }
-
 .bf-col-11 {
-  width: 91.66666666666666%;
+  flex-basis: 91.6667%;
+  max-width: 91.6667%;
 }
-
 .bf-col-10 {
-  width: 83.33333333333334%;
+  flex-basis: 83.3333%;
+  max-width: 83.3333%;
 }
-
 .bf-col-9 {
-  width: 75%;
+  flex-basis: 75%;
+  max-width: 75%;
 }
-
 .bf-col-8 {
-  width: 66.66666666666666%;
+  flex-basis: 66.6667%;
+  max-width: 66.6667%;
 }
-
 .bf-col-7 {
-  width: 58.333333333333336%;
+  flex-basis: 58.3333%;
+  max-width: 58.3333%;
 }
-
 .bf-col-6 {
-  width: 50%;
+  flex-basis: 50%;
+  max-width: 50%;
 }
-
 .bf-col-5 {
-  width: 41.66666666666667%;
+  flex-basis: 41.6667%;
+  max-width: 41.6667%;
 }
-
 .bf-col-4 {
-  width: 33.33333333333333%;
+  flex-basis: 33.3333%;
+  max-width: 33.3333%;
 }
-
 .bf-col-3 {
-  width: 25%;
+  flex-basis: 25%;
+  max-width: 25%;
 }
-
 .bf-col-2 {
-  width: 16.666666666666664%;
+  flex-basis: 16.6667%;
+  max-width: 16.6667%;
 }
-
 .bf-col-1 {
-  width: 8.3333%;
+  flex-basis: 8.3333%;
+  max-width: 8.3333%;
 }
 
-// ! this is IE9+
-// if you need CSS3 Media Queries support in IE8
-// you could use the respond.js polyfll https://github.com/scottjehl/Respond
-//
-// ! but there are some important caveats
-// https://github.com/scottjehl/Respond#support--caveats
-
-// 'break' the grid and make the columns full-width
+// Responsive breakpoints: stack columns
 @media (max-width: 575px) {
   .bf-container--break-xs .bf-row {
     margin-left: 0;
     margin-right: 0;
   }
-
   .bf-container--break-xs [class^='bf-col'] {
-    width: 100%;
-    float: none;
+    flex-basis: 100%;
+    max-width: 100%;
     margin-left: 0;
     padding-left: 0;
     padding-right: 0;
@@ -160,10 +110,9 @@
     margin-left: 0;
     margin-right: 0;
   }
-
   .bf-container--break-md [class^='bf-col'] {
-    width: 100%;
-    float: none;
+    flex-basis: 100%;
+    max-width: 100%;
     margin-left: 0;
     padding-left: 0;
     padding-right: 0;
@@ -175,30 +124,17 @@
     margin-left: 0;
     margin-right: 0;
   }
-
   .bf-container--break-lg [class^='bf-col'] {
-    width: 100%;
-    float: none;
+    flex-basis: 100%;
+    max-width: 100%;
     margin-left: 0;
     padding-left: 0;
     padding-right: 0;
   }
 }
 
-// fix missing table cell borders when using 'bf-col-' classes for column sizing
-// https://github.com/twbs/bootstrap/issues/11623
+// Table fix (not needed for flexbox, but kept for compatibility with Bullframe v4.x)
 table td[class^='bf-col'],
 table th[class^='bf-col'] {
   position: static;
 }
-
-// Need more?
-//
-// IE8+
-// Pure CSS grids (ex YUI library) https://purecss.io/grids/
-//
-// IE8+ (with JS polyfill)
-// Bootstrap v3 grid system https://getbootstrap.com/docs/3.4/css/#grid
-//
-// moder browsers only (partial IE11 support)
-// Bulma Flexbox grid system https://bulma.io/documentation/columns/

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

@@ -1,12 +1,12 @@
 // micro-clearfix
 // http://nicolasgallagher.com/micro-clearfix-hack/
-.bf-clearfix:before,
-.bf-clearfix:after {
-  content: ' ';
+.bf-clearfix::before,
+.bf-clearfix::after {
+  content: " ";
   display: table;
 }
 
-.bf-clearfix:after {
+.bf-clearfix::after {
   clear: both;
 }
 
@@ -33,7 +33,7 @@
 
 /*
 // taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
-// 
+//
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
@@ -55,7 +55,7 @@
 
 /*
 // taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
-// 
+//
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
@@ -98,9 +98,6 @@
   display: inline-block !important;
 }
 
-// IE10+
-// https://caniuse.com/#feat=flexbox
-
 .bf-display-flex {
   display: flex !important;
 }
@@ -136,9 +133,6 @@
 .bf-float-right {
   float: right !important;
 }
-
-// ≠ IE
-// https://caniuse.com/css-sticky
 .bf-position-fixed {
   position: fixed !important;
 }
@@ -149,8 +143,6 @@
 }
 
 // https://css-tricks.com/centering-css-complete-guide
-// Is the element of unknown width and height?
-// ! 'transform' is IE10 + https://caniuse.com/#feat=transforms2d
 .bf-align-center-unknown {
   position: relative !important;
 }
@@ -175,7 +167,7 @@
 }
 
 .bf-width-33 {
-  width: 33.33333333333333% !important;
+  width: 33.3333% !important;
 }
 
 .bf-width-50 {

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

@@ -22,20 +22,20 @@
   }
 
   a[href]::after {
-    content: ' (' attr(href) ')';
+    content: " (" attr(href) ")";
   }
 
   abbr[title]::after {
-    content: ' (' attr(title) ')';
+    content: " (" attr(title) ")";
   }
 
   /*
      * Don't show links that are fragment identifiers,
      * or use the `javascript:` pseudo protocol
      */
-  a[href^='#']::after,
-  a[href^='javascript:']::after {
-    content: '';
+  a[href^="#"]::after,
+  a[href^="javascript:"]::after {
+    content: "";
   }
 
   pre {