bullframe.css 5.0.1 → 6.0.0

package/src/scss/forms/_forms-styling-select.scss

@@ -1,65 +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';
-
-// custom <select> arrow and appearance with a base64 embedded SVG icon
-// https://css-tricks.com/probably-dont-base64-svg/#article-header-id-2
-//
-// this is inspired from https://github.com/kognise/water.css
-// and from Bootstrap custom select
-// https://getbootstrap.com/docs/4.4/components/input-group/#custom-select
-
-// ! :not and calc() are IE9+
-// https://caniuse.com/#feat=mdn-css_selectors_not
-// https://caniuse.com/#feat=calc
-
-// ! 12px = the icon width/height, and must be in pixels because
-// calc() is just for values
-// https://css-tricks.com/a-complete-guide-to-calc-in-css/#0-calc-is-for-values
-//
-// a select with a [multiple] attribute doesn't show an arrow by default
-// a select with a [size] attribute gets and arrow on iOS (Webkit) for instance
-// but on Chrome and FF desktop
-// so, is not safe to style every kind of <select>
-//
-// remove the arrow and the appearance, especially on Webkit
-select:not([size], [multiple]) {
-  appearance: none;
-
-  // add a new svg arrow
-  background: bf-v-color.$bf-white
-    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='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
-    no-repeat right 0.85rem center/8px 10px;
-
-  // space the arrow
-  padding-right: bf-v-space.$bf-spacing-lg-px + bf-v-space.$bf-spacing-lg-px;
-  padding-right: bf-v-space.$bf-spacing-lg-rem + bf-v-space.$bf-spacing-lg-rem;
-}
-
-// Legacy Edge browser support
-select::-ms-expand {
-  display: none;
-}
-
-// add support for RTL languages
-// 'appearance: none' removes the default styling but introduces a bug
-// that occurs when a right to the left language (e.g. Arabic) is set
-//
-// Read more
-// 1. http://bootstrap.rtlcss.com
-// 2. https://rtlstyling.com/
-*[dir='rtl'] select:not([size], [multiple]),
-select[dir='rtl']:not([size], [multiple]) {
-  // move the arrow icon to the left
-  background-position: left 0.85rem top 50%;
-
-  // go back to default forms padding
-  padding-right: (bf-v-space.$bf-spacing-lg-px * 0.75);
-  padding-right: (bf-v-space.$bf-spacing-lg-rem * 0.75);
-
-  // add custom left padding, matching the custom LTR one
-  padding-left: bf-v-space.$bf-spacing-lg-px + bf-v-space.$bf-spacing-lg-px;
-  padding-left: bf-v-space.$bf-spacing-lg-rem + bf-v-space.$bf-spacing-lg-rem;
-}

package/src/scss/forms/_forms-styling.scss

@@ -1,131 +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';
-
-[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,
-textarea {
-  background-color: bf-v-color.$bf-white;
-  border: 1px solid / bf-v-color.$bf-gray;
-  padding: bf-v-space.$bf-spacing-md-px (bf-v-space.$bf-spacing-lg-px * 0.75);
-  padding: bf-v-space.$bf-spacing-md-rem (bf-v-space.$bf-spacing-lg-rem * 0.75);
-}
-
-// Old browsers and Opera Mini don't fully support all type of inputs
-// e.g. [type="range"]
-// so, let's try to add styles carefully and selective
-[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,
-textarea,
-[type='radio'],
-[type='checkbox'] {
-  &:active,
-  &:focus {
-    transition:
-      border 0.2s,
-      background-color 0.2s,
-      box-shadow 0.2s;
-    border-color: bf-v-color.$bf-blue;
-    box-shadow: 0 0 0 3px rgb(0 86 179 / 25%);
-  }
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  color: bf-v-color.$bf-dark;
-  padding: calc(bf-v-space.$bf-spacing-xl-px / 3) (calc(bf-v-space.$bf-spacing-xl-px / 3) * 2); // 8px 16px
-  padding: calc(bf-v-space.$bf-spacing-xl-rem / 3) (calc(bf-v-space.$bf-spacing-xl-rem / 3) * 2);
-  background: bf-v-color.$bf-gray-light;
-  transition:
-    color 0.2s,
-    background 0.2s,
-    box-shadow 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%);
-  }
-}
-
-// disabled groups
-fieldset[disabled] button,
-fieldset[disabled] input,
-fieldset[disabled] input::after,
-fieldset[disabled] input::before,
-fieldset[disabled] input:checked,
-fieldset[disabled] select,
-fieldset[disabled] textarea,
-fieldset[disabled] label,
-
-/* disabled singles*/
-button[disabled],
-input[disabled],
-input[disabled]::after,
-input[disabled]::before,
-input[disabled]:checked,
-select[disabled],
-textarea[disabled],
-label[disabled],
-
-/* pseudo class*/
-button:disabled,
-input:disabled,
-input:disabled::after,
-input:disabled::before,
-input:disabled:checked,
-select:disabled,
-textarea:disabled,
-label:disabled,
-
-/* aria*/
-button[aria-disabled="true"],
-input[aria-disabled="true"],
-input[aria-disabled="true"]::after,
-input[aria-disabled="true"]::before,
-input[aria-disabled="true"]:checked,
-select[aria-disabled="true"],
-textarea[aria-disabled="true"],
-label[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;
-}

package/src/scss/miscellaneous/_misc-accessibility.scss

@@ -1,36 +0,0 @@
-// Taken from sanitize.css
-// https://github.com/csstools/sanitize.css/blob/v13.0.0/sanitize.css
-
-/* Accessibility
- * ========================================================================== */
-
-/**
- * Change the cursor on busy elements in all browsers (opinionated).
- */
-
-:where([aria-busy='true' i]) {
-  cursor: progress;
-}
-
-/*
- * Change the cursor on disabled, not-editable, or otherwise
- * inoperable elements in all browsers (opinionated).
- */
-
-:where([aria-disabled='true' i], [disabled]) {
-  cursor: not-allowed;
-}
-
-/*
- * Change the display on visually hidden accessible elements
- * in all browsers (opinionated).
- */
-
-:where([aria-hidden='false' i][hidden]) {
-  display: initial;
-}
-
-:where([aria-hidden='false' i][hidden]:not(:focus)) {
-  clip: rect(0, 0, 0, 0);
-  position: absolute;
-}

package/src/scss/miscellaneous/_misc-anchors.scss

@@ -1,37 +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';
-
-a {
-  color: bf-v-color.$bf-blue; // bootstrap blue
-  text-decoration: none;
-
-  // Edge Legacy: Remove grey background on active links
-  background-color: transparent;
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-    color: bf-v-color.$bf-blue-light;
-  }
-}
-
-// this is taken from Bootstrap's reboot
-// https://getbootstrap.com/docs/4.4/content/reboot/
-
-a:not([href], [tabindex]) {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:not([href], [class]),
-a:not([href], [class]):hover {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:not([href], [tabindex]):focus {
-  outline: 0;
-}

package/src/scss/miscellaneous/_misc-embedded-content.scss

@@ -1,117 +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';
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-img,
-canvas,
-audio,
-video,
-iframe,
-object,
-embed {
-  max-width: 100%;
-}
-
-audio,
-video,
-canvas,
-img,
-svg {
-  vertical-align: middle;
-}
-
-img {
-  height: auto;
-  border-style: none;
-}
-
-figure {
-  margin: 0;
-}
-
-figure,
-figcaption {
-  display: block;
-}
-
-figcaption {
-  line-height: 1.375;
-  font-size: 90%;
-}
-
-video {
-  height: auto;
-}
-
-audio {
-  width: 100%;
-}
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-svg:not([fill]) {
-  fill: currentColor;
-}
-
-progress,
-meter {
-  display: inline-block;
-  vertical-align: baseline;
-  width: 100%;
-  max-width: 100%;
-}
-
-// <progress> normalization
-//
-// https://css-tricks.com/html5-progress-element/
-progress[value] {
-  appearance: none; // reset the default appearance
-  border: none; // Get rid of default border in Firefox
-
-  height: 20px;
-  height: 2rem;
-
-  // progress bar background color
-  background: bf-v-color.$bf-gray-light;
-
-  // progress value background color in IE10+
-  color: bf-v-color.$bf-blue;
-}
-
-// progress value background color in webkit
-progress[value]::-webkit-progress-bar {
-  background: bf-v-color.$bf-gray-light;
-}
-progress[value]::-webkit-progress-value {
-  background: bf-v-color.$bf-blue;
-}
-
-// remove default border in old browsers
-// and for embeds (e.g. youtube) that don't remove the border with the attribute
-// frameborder="0"
-//
-// e.g.
-// <iframe
-//  width=" 560 "
-//  height=" 315 "
-//  src=" https:
-// www.youtube-nocookie.com/embed/Z-4v4I7Gzk0"
-iframe {
-  border-style: none;
-}

package/src/scss/miscellaneous/_misc-focus.scss

@@ -1,79 +0,0 @@
-// remove focus if is not keyboard
-// and if these elements are not focused globally
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-// Suppress the focus outline on elements that cannot be accessed via keyboard.
-// This prevents an unwanted focus outline from appearing around elements that
-// might still respond to pointer events.
-//
-// Taken from SuitCSS https://github.com/suitcss/base
-//
-// Copyright 2020 Harry Roberts
-
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-
-//     http://www.apache.org/licenses/LICENSE-2.0
-
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-[tabindex='-1']:focus:not(:focus-visible) {
-  outline: 0 !important;
-}
-
-a:focus,
-input:focus {
-  outline: 2px solid orange;
-}
-
-// style it again (must be separated)
-:focus-visible {
-  outline: 2px solid orange;
-}
-
-// these form elements get some ':focus' styles that enhance and improve the focus
-// see '_form-elements.scss'
-// so, we can remove it safely
-//
-// ! but do not touch
-// [type="color"]
-// [type="range"]
-// [type="file"]
-// because usually are replaced with a custom verion
-// with JS or extra <div>s
-// https://getbootstrap.com/docs/4.4/components/input-group/#custom-file-input
-button,
-[type='button'],
-[type='reset'],
-[type='submit'],
-[type='email'],
-[type='number'],
-[type='password'],
-[type='tel'],
-[type='search'],
-[type='text'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='time'],
-[type='week'],
-[type='url'],
-[type='radio'],
-[type='checkbox'],
-input[list],
-select,
-textarea {
-  &:focus {
-    outline: 0;
-  }
-}
-
-// More resources to read on this matter
-// https://gist.github.com/chrisdemars/a74c5bd210dc739fa63e9b985c937bcb

package/src/scss/miscellaneous/_misc-interactive.scss

@@ -1,48 +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";
-
-address {
-  font-style: normal;
-  margin-bottom: bf-v-space.$bf-spacing-lg-px;
-  margin-bottom: bf-v-space.$bf-spacing-lg-rem;
-  line-height: inherit;
-}
-
-details > summary:first-of-type {
-  display: list-item;
-}
-
-summary {
-  cursor: pointer;
-  font-weight: 700;
-  word-break: break-all;
-}
-
-dialog {
-  // match body background color
-  background-color: bf-v-color.$bf-white;
-  color: bf-v-color.$bf-dark;
-  border: none;
-  border-radius: bf-v-space.$bf-spacing-sm-rem;
-  padding: bf-v-space.$bf-spacing-xl-px;
-  padding: bf-v-space.$bf-spacing-xl-rem;
-  height: fit-content;
-  min-width: 25rem;
-  max-width: calc(100vw - (bf-v-space.$bf-spacing-grid-gutter-rem * 2));
-  @media (min-width: bf-v-bp.$bf-breakpoint-md) {
-    max-width: 50rem;
-  }
-}
-
-// Overrides 'hidden' attribute
-// <dialog id="myDialog" hidden>...</dialog>
-dialog[open] {
-  display: block !important;
-}
-
-dialog::backdrop {
-  background: rgb(0 0 0 / 40%);
-}

package/src/scss/miscellaneous/_misc-layout.scss

@@ -1,30 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-article,
-aside,
-dialog,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-details {
-  display: block;
-}
-
-template {
-  display: none;
-}
-
-// Always hide an element with the `hidden` HTML attribute
-[hidden] {
-  display: none !important;
-}

package/src/scss/miscellaneous/_misc-lists.scss

@@ -1,53 +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';
-
-menu,
-ol,
-ul,
-dl {
-  margin: 0 0 bf-v-space.$bf-spacing-xl-rem 0;
-  padding: 0;
-}
-
-menu ul,
-menu ol,
-ul ul,
-ul ol,
-ol ol,
-ol ul,
-dd {
-  margin-bottom: 0;
-}
-
-ul,
-ol {
-  margin-left: bf-v-space.$bf-spacing-xl-rem;
-}
-
-nav ol,
-nav ul {
-  list-style: none;
-  list-style-image: none;
-  margin-left: 0;
-}
-
-dt {
-  font-weight: 700;
-}
-
-dd {
-  margin-left: 0;
-}
-
-// taken from https://github.com/jensimmons/cssremedy
-//
-// 1. Add zero-width-space to prevent VoiceOver disable
-// 2. Absolute position ensures no extra space
-// See: https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/
-nav li::before {
-  content: '\200B';
-  position: absolute;
-}

package/src/scss/miscellaneous/_misc-scrolling.scss

@@ -1,5 +0,0 @@
-@media (prefers-reduced-motion: no-preference) {
-  :root {
-    scroll-behavior: smooth;
-  }
-}

package/src/scss/miscellaneous/_misc-shame.scss

@@ -1,37 +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';
-
-// shamy quick fixes...
-//
-// Credits: https://csswizardry.com/2013/04/shame-css/
-//
-// The rules
-
-// Obviously you need some kind of rules and criteria:
-
-// If it’s a hack, it goes in shame.css.
-// Document all hacks fully:
-// What part of the codebase does it relate to?
-// Why was this needed?
-// How does this fix it?
-// How might you fix it properly, given more time?
-// Do not blame the developer; if they explained why they had to do it then their reasons are probably (hopefully) valid.
-// Try and clean shame.css up when you have some down time.
-// Even better, get a tech-debt story in which you can dedicate actual sprint time to it.
-
-// Example
-
-// /**
-//  * Nav specificity fix.
-//  *
-//  * Someone used an ID in the header code (`#header a {}`) which trumps the
-//  * nav selectors (`.site-nav a {}`). Use !important to override it until I
-//  * have time to refactor the header stuff.
-//  */
-// .site-nav a {
-//     color: #BADA55 !important;
-// }
-//

package/src/scss/miscellaneous/_misc-tables.scss

@@ -1,53 +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';
-
-table {
-  caption-side: bottom;
-  max-width: 100%;
-  border-collapse: collapse;
-  // Correct table border color inheritance in Chrome and Safari
-  // https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016
-  border-color: currentcolor;
-  // Remove text indentation from table contents in Chrome and Safari
-  // https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297
-  text-indent: 0;
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
-}
-
-thead th {
-  vertical-align: bottom;
-}
-
-th,
-td {
-  vertical-align: top;
-}
-
-th {
-  text-align: inherit;
-  text-align: -webkit-match-parent;
-  font-weight: 700;
-}
-
-caption {
-  padding-top: bf-v-space.$bf-spacing-md-rem;
-  padding-bottom: bf-v-space.$bf-spacing-md-rem;
-  color: bf-v-color.$bf-gray;
-  text-align: left;
-  caption-side: bottom;
-  line-height: 1.375;
-  font-size: 90%;
-}