bullframe.css 5.1.0 → 6.1.0

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

@@ -1,415 +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 "../utilities/utility-global-dark-scrollbars" as bfUtilGlobalDarkScrollbars;
-@use "sass:color";
-
-@mixin bf-global-dark {
-  @media (prefers-color-scheme: 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], select[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], select[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], select[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], select[multiple]),
-  /* RTL*/
-  *[dir="rtl"] select:not([size], select[multiple]),
-  select[dir="rtl"]:not([size], select[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 {
-  @media (prefers-color-scheme: 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], select[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], select[multiple]),
-    textarea {
-      &:active,
-      &:focus {
-        box-shadow: 0 0 0 3px rgb(3 102 214 / 50%);
-      }
-    }
-
-    select:not([size], select[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], select[multiple]),
-  /* RTL*/
-  *[dir="rtl"] select:not([size], select[multiple]),
-  select[dir="rtl"]:not([size], select[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,80 +0,0 @@
-@mixin flex-container {
-  display: flex !important;
-  flex-wrap: wrap !important;
-}
-
-@mixin flex-100 {
-  flex: 0 0 100% !important;
-}
-
-@mixin flex-80 {
-  flex: 0 0 80% !important;
-}
-
-@mixin flex-75 {
-  flex: 0 0 75% !important;
-}
-
-@mixin flex-70 {
-  flex: 0 0 70% !important;
-}
-
-@mixin flex-66 {
-  flex: 0 0 66.6666% !important;
-}
-
-@mixin flex-65 {
-  flex: 0 0 65% !important;
-}
-
-@mixin flex-60 {
-  flex: 0 0 60% !important;
-}
-
-@mixin flex-55 {
-  flex: 0 0 55% !important;
-}
-
-@mixin flex-50 {
-  flex: 0 0 50% !important;
-}
-
-@mixin flex-45 {
-  flex: 0 0 45% !important;
-}
-
-@mixin flex-40 {
-  flex: 0 0 40% !important;
-}
-
-@mixin flex-33 {
-  flex: 0 0 33.3333% !important;
-}
-
-@mixin flex-30 {
-  flex: 0 0 30% !important;
-}
-
-@mixin flex-25 {
-  flex: 0 0 25% !important;
-}
-
-@mixin flex-20 {
-  flex: 0 0 20% !important;
-}
-
-@mixin flex-17 {
-  flex: 0 0 17% !important;
-}
-
-@mixin flex-16 {
-  flex: 0 0 16.6666% !important;
-}
-
-@mixin flex-15 {
-  flex: 0 0 15% !important;
-}
-
-@mixin flex-11 {
-  flex: 0 0 11% !important;
-}

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

@@ -1,42 +0,0 @@
-@mixin bf-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-@mixin bf-sr-only {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-
-@mixin bf-sr-only-focusable {
-  &:active,
-  &:focus {
-    @include bf-sr-only;
-    clip: auto !important;
-    height: auto !important;
-    margin: 0 !important;
-    overflow: visible !important;
-    position: static !important;
-    white-space: inherit !important;
-    width: auto !important;
-  }
-}
-
-@mixin bf-clearfix {
-  &::before,
-  &::after {
-    content: ' ';
-    display: table !important;
-  }
-
-  &::after {
-    clear: both !important;
-  }
-}

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

@@ -1,37 +0,0 @@
-@mixin bf-text-hide {
-  /* stylelint-disable-next-line */
-  font: 0/0 a !important;
-  color: transparent !important;
-  text-shadow: none !important;
-  background-color: transparent !important;
-  border: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-@mixin bf-text-truncate {
-  max-width: 100% !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-  word-wrap: normal !important;
-}
-
-// truncate a multiline text via line-clamp
-//
-// demo https://codepen.io/devam-soni/pen/PoqaKWm
-
-@mixin bf-text-truncate--multiline-2 {
-  overflow: hidden !important;
-  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,28 +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';
-
-blockquote {
-  margin-bottom: bf-v-space.$bf-spacing-xl-rem;
-  padding-left: 0;
-  font-style: italic;
-}
-
-blockquote p {
-  margin-bottom: 0;
-}
-
-blockquote small {
-  color: bf-v-color.$bf-gray;
-  display: block;
-}
-
-blockquote small::before {
-  content: '\2014 \00A0';
-}
-
-q {
-  quotes: '\201C' '\201D' '\2018' '\2019';
-}

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

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