bullframe.css 5.1.0 → 6.0.0

package/src/scss/typography/_typography-html-body.scss

@@ -1,75 +0,0 @@
-@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%;
-
-  // resize the base font-size and get an easy math for rem units
-  // https://snook.ca/archives/html_and_css/font-size-with-rem
-  font-size: 62.5%;
-
-  color: bf-v-color.$bf-dark;
-
-  // set a default font-family and line-height
-  font-family: sans-serif;
-  line-height: 1.15;
-
-  // remove a tap background when a link or interactive element is focused
-  // if is touch
-  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-}
-
-body {
-  margin: 0;
-  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;
-  text-align: left;
-
-  // native font stack for optimum text rendering on every device and OS
-  // this stack mimics the system font UI
-  // 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:
-
-		// Safari for OS X and iOS (San Francisco) -apple-system,
-    // Chrome < 56 for OS X (San Francisco)
-    BlinkMacSystemFont,
-    // Windows
-    'Segoe UI',
-    // Android
-    Roboto,
-    // Linux with KDE
-    Oxygen-Sans,
-    // Ubuntu (all variants)
-    Ubuntu,
-    // Linux with GNOME Shell
-    Cantarell,
-    // macOS 1.10 and below
-    'Helvetica Neue',
-    Helvetica,
-    // Basic web fallback
-    Arial,
-    'Noto Sans',
-    sans-serif,
-    // emoji fonts
-    'Apple Color Emoji',
-    'Segoe UI Emoji',
-    'Segoe UI Symbol',
-    'Noto Color Emoji';
-
-  // this enable font ligatures
-  text-rendering: optimizeLegibility;
-
-  // break very long texts by default, especially on old browsers
-  // e.g. big <h1> or <h2> headlines
-  word-wrap: break-word;
-
-  background-color: bf-v-color.$bf-white;
-}

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

@@ -1,90 +0,0 @@
-@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-v-space.$bf-spacing-xl-rem 0;
-}
-
-// Abbreviations (taken from Bootstrap 4)
-//
-// 1. Remove the bottom border in Firefox 39-.
-// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-// 3. Add explicit cursor to indicate changed behavior.
-abbr[title],
-abbr[data-original-title] {
-  cursor: help;
-  text-decoration: underline; // 2
-  text-decoration: underline dotted; // 2
-  border-bottom: 0; // 2
-}
-
-mark {
-  background-color: bf-v-color.$bf-yellow;
-  color: bf-v-color.$bf-black;
-}
-
-ins {
-  background-color: bf-v-color.$bf-yellow-light;
-  color: bf-v-color.$bf-black;
-  text-decoration: none;
-}
-
-// Prevent the duplicate application of `bolder` by the next rule
-// in Safari 6
-b,
-strong {
-  font-weight: inherit;
-}
-
-// Add the correct font weight in Chrome, Edge, and Safari
-b,
-strong {
-  /* stylelint-disable-next-line */
-  font-weight: bolder;
-}
-
-dfn {
-  font-style: italic;
-}
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -8px;
-  top: -0.8rem;
-}
-
-sub {
-  bottom: -4px;
-  bottom: -0.4rem;
-}
-
-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;
-  height: 0;
-  border-style: solid;
-  border-width: 1px 0 0;
-  color: inherit;
-  margin: bf-v-space.$bf-spacing-xl-rem 0;
-  padding: 0;
-  overflow: visible; // Show the overflow in Edge
-}

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

@@ -1,59 +0,0 @@
-@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-v-space.$bf-spacing-xl-rem 0;
-
-  display: block;
-  overflow: auto;
-  word-break: break-all; // webkit
-  word-wrap: break-word;
-  white-space: pre;
-  hyphens: none;
-
-  // Disable auto-hiding scrollbar in legacy Edge
-  // https://github.com/twbs/bootstrap/pull/30685
-  -ms-overflow-style: auto;
-}
-
-pre,
-code,
-kbd,
-samp {
-  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
-  // is preferred
-  font-size: 0.875em;
-}
-
-code {
-  word-wrap: break-word;
-}
-
-a > code {
-  color: inherit;
-}
-
-pre code {
-  font-size: inherit;
-  color: inherit;
-  word-break: normal;
-}

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

@@ -1,73 +0,0 @@
-@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-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: rgb(0 0 0 / 0%);
-  user-select: none;
-  border-radius: bf-v-space.$bf-spacing-sm-rem;
-
-  border: 0;
-  background-image: none; // FF mobile
-  background-color: bf-v-color.$bf-gray-light;
-  transition: all 0.2s;
-
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
-    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 rgb(0 0 0 / 15%);
-  }
-
-  &:focus {
-    outline: 0;
-  }
-
-  &.bf-btn--primary {
-    color: bf-v-color.$bf-white;
-    background: bf-v-color.$bf-blue;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: bf-v-color.$bf-white;
-      background: color.adjust(bf-v-color.$bf-blue, $lightness: -10%);
-    }
-
-    &:active,
-    &:focus {
-      box-shadow: 0 0 0 3px rgb(0 86 179 / 25%);
-    }
-  }
-}
-
-fieldset[disabled] .bf-btn,
-.bf-btn[disabled],
-.bf-btn:disabled,
-.bf-btn[aria-disabled='true'] {
-  cursor: default !important; // fallback
-  cursor: not-allowed !important;
-  pointer-events: none !important;
-  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

@@ -1,31 +0,0 @@
-// Toggle debugging tools setting '$debug' variable to true or false
-
-$debug: false;
-
-// visualizing layout internals
-* {
-  @if $debug {
-    outline: 1px solid hotpink !important;
-  }
-}
-
-// ...or something more powerful
-//
-// Debug CSS
-// https://gist.github.com/zaydek-old/6b2e55258734deabbd2b4a284321d6f6
-//
-// :not(g):not(path) {
-//   @if ($debug) {
-//     color: hsla(210, 100%, 100%, 0.9) !important;
-//     background: hsla(210, 100%, 50%, 0.5) !important;
-//     outline: solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;
-
-//     box-shadow: none !important;
-//     filter: none !important;
-//   }
-// }
-
-// Read more
-//
-// a interesting guide about CSS debugging from Ben Frain
-// https://benfrain.com/debugging-css/

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

@@ -1,34 +0,0 @@
-// taken from https://getbootstrap.com/docs/4.4/utilities/embed/
-// but lightened a bit
-
-.bf-embed-responsive {
-  position: relative;
-  display: block;
-  width: 100%;
-  padding: 0;
-  overflow: hidden;
-
-  &::before {
-    display: block;
-    content: "";
-    padding-top: 56.25%; // 16:9 by default
-  }
-
-  .bf-embed-responsive--4-3::before {
-    padding-top: 75%;
-  }
-
-  & .bf-embed-responsive--item,
-  & iframe,
-  & embed,
-  & object,
-  & video {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 0;
-  }
-}

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

@@ -1,21 +0,0 @@
-// useful if dark mode
-.bf-filter-invert {
-  filter: invert(100%) !important;
-}
-
-// useful to dim bright images if dark mode
-.bf-filter-dim-images {
-  filter: brightness(0.8) contrast(1.2);
-}
-
-.bf-filter-grayscale {
-  filter: grayscale(1) !important;
-}
-
-.bf-filter-blur {
-  filter: blur(0.3rem) !important;
-}
-
-.bf-filter-none {
-  filter: none !important;
-}

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

@@ -1,89 +0,0 @@
-@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 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:invalid,
-.bf-disabled:checked {
-  cursor: default !important; // IE8-10 fallback
-  cursor: not-allowed !important;
-  pointer-events: none !important;
-  user-select: none !important;
-  box-shadow: none !important;
-  opacity: 0.5 !important;
-
-  background-color: bf-v-color.$bf-white;
-  border-color: bf-v-color.$bf-gray;
-}
-
-label.bf-disabled {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-button.bf-disabled,
-[type='button'].bf-disabled,
-[type='reset'].bf-disabled,
-[type='submit'].bf-disabled,
-.bf-btn.bf-disabled {
-  cursor: default;
-  cursor: not-allowed;
-  pointer-events: none;
-  user-select: none;
-  box-shadow: none;
-  opacity: 0.5;
-
-  color: bf-v-color.$bf-dark;
-  background: bf-v-color.$bf-gray-light;
-
-  &:hover,
-  &:active,
-  &:focus {
-    box-shadow: none;
-    color: bf-v-color.$bf-dark;
-    background: bf-v-color.$bf-gray-light;
-  }
-}
-
-.bf-btn--primary.bf-disabled {
-  cursor: default;
-  cursor: not-allowed;
-  pointer-events: none;
-  user-select: none;
-  box-shadow: none;
-  opacity: 0.5;
-
-  color: bf-v-color.$bf-white;
-  background: bf-v-color.$bf-blue;
-
-  &:hover,
-  &:active,
-  &:focus {
-    box-shadow: none;
-    color: bf-v-color.$bf-white;
-    background: bf-v-color.$bf-blue;
-  }
-}
-
-.bf-invalid,
-.bf-invalid:focus {
-  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,3 +0,0 @@
-@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 +0,0 @@
-@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 +0,0 @@
-@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,34 +0,0 @@
-@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
-html {
-  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
-// '::-webkit-scrollbar'
-// https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
-
-::-webkit-scrollbar {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-::-webkit-scrollbar-track {
-  background-color: bf-v-color.$bf-dark-extra;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: color.adjust(bf-v-color.$bf-gray-dark, $lightness: -5%);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: color.adjust(bf-v-color.$bf-gray-dark, $lightness: 10%);
-}

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

@@ -1,4 +0,0 @@
-@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 +0,0 @@
-@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 +0,0 @@
-@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,140 +0,0 @@
-@use '../variables/variables-spacing' as bf-v-space;
-@use '../variables/variables-breakpoints' as bf-v-bp;
-
-.bf-container,
-.bf-container--fluid {
-  box-sizing: border-box;
-  display: block;
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: bf-v-space.$bf-spacing-grid-gutter-rem;
-  padding-right: bf-v-space.$bf-spacing-grid-gutter-rem;
-}
-
-.bf-container {
-  max-width: 114rem;
-}
-
-.bf-row {
-  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-'] {
-  position: relative;
-  min-height: 1px;
-  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;
-  }
-}
-
-// Column widths
-.bf-col-12 {
-  flex-basis: 100%;
-  max-width: 100%;
-}
-.bf-col-11 {
-  flex-basis: 91.6667%;
-  max-width: 91.6667%;
-}
-.bf-col-10 {
-  flex-basis: 83.3333%;
-  max-width: 83.3333%;
-}
-.bf-col-9 {
-  flex-basis: 75%;
-  max-width: 75%;
-}
-.bf-col-8 {
-  flex-basis: 66.6667%;
-  max-width: 66.6667%;
-}
-.bf-col-7 {
-  flex-basis: 58.3333%;
-  max-width: 58.3333%;
-}
-.bf-col-6 {
-  flex-basis: 50%;
-  max-width: 50%;
-}
-.bf-col-5 {
-  flex-basis: 41.6667%;
-  max-width: 41.6667%;
-}
-.bf-col-4 {
-  flex-basis: 33.3333%;
-  max-width: 33.3333%;
-}
-.bf-col-3 {
-  flex-basis: 25%;
-  max-width: 25%;
-}
-.bf-col-2 {
-  flex-basis: 16.6667%;
-  max-width: 16.6667%;
-}
-.bf-col-1 {
-  flex-basis: 8.3333%;
-  max-width: 8.3333%;
-}
-
-// 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'] {
-    flex-basis: 100%;
-    max-width: 100%;
-    margin-left: 0;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-@media (max-width: 767px) {
-  .bf-container--break-md .bf-row {
-    margin-left: 0;
-    margin-right: 0;
-  }
-  .bf-container--break-md [class^='bf-col'] {
-    flex-basis: 100%;
-    max-width: 100%;
-    margin-left: 0;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-@media (max-width: 991px) {
-  .bf-container--break-lg .bf-row {
-    margin-left: 0;
-    margin-right: 0;
-  }
-  .bf-container--break-lg [class^='bf-col'] {
-    flex-basis: 100%;
-    max-width: 100%;
-    margin-left: 0;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-// 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;
-}