bullframe.css 5.0.1 → 6.0.0

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

@@ -1,396 +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 {
-  // 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,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;
-}

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;
-}