bullframe.css 5.0.1 → 6.0.0

package/src/scss/bullframe-classless-dark-prefers.scss

@@ -1,2 +0,0 @@
-@use 'bullframe-classless' as bullframecssClassless;
-@use 'utilities/utility-global-dark-prefers-classless' as bfUtilGlobalDarkPrefersClassless;

package/src/scss/bullframe-classless-dark.scss

@@ -1,2 +0,0 @@
-@use 'bullframe-classless' as bullframecssClassless;
-@use 'utilities/utility-global-dark-classless' as bfUtilGlobalDarkClassless;

package/src/scss/bullframe-classless-system-default.scss

@@ -1,2 +0,0 @@
-@use 'bullframe-classless' as bullframecssClassless;
-@use 'utilities/utility-global-dark-prefers-classless' as bfUtilGlobalDarkPrefersClassless;

package/src/scss/bullframe-classless.scss

@@ -1,49 +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 "mixins/mixin-layout" as bfMixinLayout;
-// @use "mixins/mixin-texts" as bfMixinTexts;
-// @use "mixins/mixin-grid-flex" as bfMixinGridFlex;
-
-@use 'miscellaneous/misc-layout' as bfMiscLayout;
-
-@use 'typography/typography-html-body' as bfTypographyHtmlBody;
-@use 'typography/typography-headings' as bfTypographyHeadings;
-@use 'typography/typography-blockquotes' as bfTypographyBlockquotes;
-@use 'typography/typography-monospaced-elements' as bfTypographyMonospacedElements;
-@use 'typography/typography-misc' as bfTypographyMisc;
-
-@use 'miscellaneous/misc-anchors' as bfMiscAnchors;
-@use 'miscellaneous/misc-focus' as bfMiscFocus;
-@use 'miscellaneous/misc-lists' as bfMiscLists;
-@use 'miscellaneous/misc-embedded-content' as bfMiscEmbeddedContent;
-@use 'miscellaneous/misc-interactive' as bfMiscInteractive;
-@use 'miscellaneous/misc-scrolling' as bfMiscScrolling;
-@use 'miscellaneous/misc-tables' as bfMiscTables;
-@use 'miscellaneous/misc-accessibility' as bfMiscAccessibility;
-
-@use 'forms/forms-normalization' as bfFormsNormalization;
-@use 'forms/forms-styling' as bfFormsStyling;
-@use 'forms/forms-styling-select' as bfFormsStylingSelect;
-@use 'forms/forms-styling-radio-checkbox' as bfFormsStylingRadioCheckbox;
-@use 'forms/forms-styling-range' as bfFormsStylingRange;
-
-// @use "utilities/utility-grid-system" as bfUtilityGridSystem;
-// @use "utilities/utility-layout" as bfUtilityLayout;
-// @use "utilities/utility-z-index" as bfUtilityZIndex;
-// @use "utilities/utility-spacing" as bfUtilitySpacing;
-// @use "utilities/utility-texts" as bfUtilityTexts;
-// @use "utilities/utility-buttons" as bfUtilityButtons;
-// @use "utilities/utility-form-states" as bfUtilityFormStates;
-// @use "utilities/utility-lists" as bfUtilityLists;
-// @use "utilities/utility-embeds" as bfUtilityEmbeds;
-// @use "utilities/utility-tables" as bfUtilityTables;
-// @use "utilities/utility-print" as bfUtilityPrint;
-// @use "utilities/utility-reduced-motion" as bfUtilityReducedMotion;
-
-@use 'custom/author-styles' as bfCustomAuthorStyles;
-@use 'miscellaneous/misc-shame' as bfMiscShame;
-
-@use 'utilities/utility-debugging' as bfUtilityDebugging;

package/src/scss/bullframe-dark-prefers.scss

@@ -1,2 +0,0 @@
-@use 'bullframe' as bullframecss;
-@use 'utilities/utility-global-dark-prefers' as bfUtilGlobalDarkPrefers;

package/src/scss/bullframe-dark.scss

@@ -1,2 +0,0 @@
-@use 'bullframe' as bullframecss;
-@use 'utilities/utility-global-dark' as bfUtilGlobalDark;

package/src/scss/bullframe-system-default.scss

@@ -1,2 +0,0 @@
-@use 'bullframe' as bullframecss;
-@use 'utilities/utility-global-system-default' as bfUtilGlobalSystemDefault;

package/src/scss/bullframe-utilities.scss

@@ -1,21 +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 'mixins/mixin-layout' as bfMixinLayout;
-@use 'mixins/mixin-texts' as bfMixinTexts;
-@use 'mixins/mixin-grid-flex' as bfMixinGridFlex;
-
-@use 'utilities/utility-grid-system' as bfUtilityGridSystem;
-@use 'utilities/utility-layout' as bfUtilityLayout;
-@use 'utilities/utility-z-index' as bfUtilityZIndex;
-@use 'utilities/utility-spacing' as bfUtilitySpacing;
-@use 'utilities/utility-texts' as bfUtilityTexts;
-@use 'utilities/utility-buttons' as bfUtilityButtons;
-@use 'utilities/utility-form-states' as bfUtilityFormStates;
-@use 'utilities/utility-lists' as bfUtilityLists;
-@use 'utilities/utility-embeds' as bfUtilityEmbeds;
-@use 'utilities/utility-tables' as bfUtilityTables;
-@use 'utilities/utility-print' as bfUtilityPrint;
-@use 'utilities/utility-reduced-motion' as bfUtilityReducedMotion;

package/src/scss/bullframe.scss

@@ -1,49 +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 'mixins/mixin-layout' as bfMixinLayout;
-@use 'mixins/mixin-texts' as bfMixinTexts;
-@use 'mixins/mixin-grid-flex' as bfMixinGridFlex;
-
-@use 'miscellaneous/misc-layout' as bfMiscLayout;
-
-@use 'typography/typography-html-body' as bfTypographyHtmlBody;
-@use 'typography/typography-headings' as bfTypographyHeadings;
-@use 'typography/typography-blockquotes' as bfTypographyBlockquotes;
-@use 'typography/typography-monospaced-elements' as bfTypographyMonospacedElements;
-@use 'typography/typography-misc' as bfTypographyMisc;
-
-@use 'miscellaneous/misc-anchors' as bfMiscAnchors;
-@use 'miscellaneous/misc-focus' as bfMiscFocus;
-@use 'miscellaneous/misc-lists' as bfMiscLists;
-@use 'miscellaneous/misc-embedded-content' as bfMiscEmbeddedContent;
-@use 'miscellaneous/misc-interactive' as bfMiscInteractive;
-@use 'miscellaneous/misc-scrolling' as bfMiscScrolling;
-@use 'miscellaneous/misc-tables' as bfMiscTables;
-@use 'miscellaneous/misc-accessibility' as bfMiscAccessibility;
-
-@use 'forms/forms-normalization' as bfFormsNormalization;
-@use 'forms/forms-styling' as bfFormsStyling;
-@use 'forms/forms-styling-select' as bfFormsStylingSelect;
-@use 'forms/forms-styling-radio-checkbox' as bfFormsStylingRadioCheckbox;
-@use 'forms/forms-styling-range' as bfFormsStylingRange;
-
-@use 'utilities/utility-grid-system' as bfUtilityGridSystem;
-@use 'utilities/utility-layout' as bfUtilityLayout;
-@use 'utilities/utility-z-index' as bfUtilityZIndex;
-@use 'utilities/utility-spacing' as bfUtilitySpacing;
-@use 'utilities/utility-texts' as bfUtilityTexts;
-@use 'utilities/utility-buttons' as bfUtilityButtons;
-@use 'utilities/utility-form-states' as bfUtilityFormStates;
-@use 'utilities/utility-lists' as bfUtilityLists;
-@use 'utilities/utility-embeds' as bfUtilityEmbeds;
-@use 'utilities/utility-tables' as bfUtilityTables;
-@use 'utilities/utility-print' as bfUtilityPrint;
-@use 'utilities/utility-reduced-motion' as bfUtilityReducedMotion;
-
-@use 'custom/author-styles' as bfCustomAuthorStyles;
-@use 'miscellaneous/misc-shame' as bfMiscShame;
-
-@use 'utilities/utility-debugging' as bfUtilityDebugging;

package/src/scss/custom/_author-styles.scss

@@ -1,5 +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';

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

@@ -1,316 +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";
-
-// normalization, enhancement and responsiveness
-
-html input,
-button,
-select,
-optgroup,
-textarea {
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-html input,
-button,
-[type="radio"],
-[type="checkbox"],
-select,
-optgroup,
-textarea {
-  margin: 0;
-}
-
-html input,
-select,
-textarea,
-legend {
-  width: 100%;
-}
-
-// re-set width auto where needed
-html label,
-button,
-[type="image"],
-[type="submit"],
-[type="reset"],
-html [type="button"],
-[type="radio"],
-[type="checkbox"] {
-  width: auto;
-}
-
-// inline-block display gives the best cross-browser combination
-// and allow several properties
-html input,
-label,
-select,
-textarea,
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"],
-output {
-  display: inline-block;
-}
-
-[type="file"] {
-  display: block;
-  background-color: transparent;
-}
-
-button,
-html input,
-select,
-textarea {
-  background-image: none; // FF mobile
-}
-
-input,
-select,
-textarea {
-  vertical-align: baseline;
-}
-
-form {
-  margin: 0;
-}
-
-// 1. Remove intrinsic min-width of fieldset
-// https://github.com/necolas/normalize.css/pull/269
-fieldset {
-  border: 0;
-  padding: 0;
-  margin: 0;
-  min-width: 0; // 1.
-}
-
-legend {
-  display: table; // Correct the text wrapping in Edge and IE.
-  max-width: 100%;
-  white-space: normal; // enable line-wrapping in FF4/5
-  border: 0;
-  padding: 0;
-  font-weight: 400;
-  margin-bottom: bf-v-space.$bf-spacing-md-px;
-  margin-bottom: bf-v-space.$bf-spacing-md-rem;
-  font-size: inherit;
-  line-height: 1.375;
-  color: inherit;
-}
-
-label {
-  font-weight: 400;
-  font-size: 90%;
-  line-height: 1.375;
-  margin-bottom: bf-v-space.$bf-spacing-md-px;
-  margin-bottom: bf-v-space.$bf-spacing-md-rem;
-}
-
-label input,
-label select,
-label textarea {
-  font-size: 110%;
-}
-
-::-webkit-inner-spin-button {
-  height: auto;
-}
-
-::-webkit-datetime-edit-fields-wrapper,
-::-webkit-datetime-edit-text,
-::-webkit-datetime-edit-minute,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-year-field {
-  padding: 0;
-}
-
-::-webkit-color-swatch-wrapper {
-  padding: 0;
-}
-
-[type="search"] {
-  outline-offset: calc(-1 * bf-v-space.$bf-spacing-sm-rem);
-}
-
-output {
-  vertical-align: middle;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-select {
-  word-wrap: normal;
-}
-
-// Taken from Bootstrap Reboot v5.2
-// https://unpkg.com/browse/bootstrap@5.2.0/dist/css/bootstrap-reboot.css
-[list]:not(
-    [type="date"],
-    [type="datetime-local"],
-    [type="month"],
-    [type="week"],
-    [type="time"]
-  )::-webkit-calendar-picker-indicator {
-  display: none !important;
-}
-
-optgroup {
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit; // fallback for font families without 600 */
-  font-weight: 600;
-}
-
-// remove -webkit-appearance listing every single elements that needed it
-button,
-// avoid destroying native android audio/video players
-html [type="button"],
-[type="reset"],
-[type="submit"],
-
-[type="email"],
-[type="number"],
-[type="text"],
-[type="tel"],
-[type="date"],
-[type="datetime-local"],
-[type="month"],
-[type="week"],
-[type="url"],
-[type="image"],
-[type="password"],
-[type="search"],
-[type="search"]::-webkit-search-decoration,
-[type="search"]::-webkit-search-cancel-button,
-input[list],
-textarea {
-  appearance: none;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-  appearance: auto;
-}
-
-::file-selector-button {
-  font: inherit;
-  appearance: auto;
-}
-
-button,
-input,
-select,
-textarea {
-  border-radius: bf-v-space.$bf-spacing-sm-rem;
-}
-
-[type="radio"] {
-  border-radius: 50%;
-}
-
-[type="checkbox"] {
-  border-radius: bf-v-space.$bf-spacing-md-rem;
-}
-
-[type="radio"],
-[type="checkbox"] {
-  padding: 0;
-  background-color: bf-v-color.$bf-white;
-}
-
-[type="range" i] {
-  background-color: transparent; // FF and Chrome mobile
-}
-
-select[size],
-select[multiple] {
-  height: auto;
-}
-
-select[multiple] {
-  background-image: none; // FF mobile
-}
-
-textarea {
-  height: auto;
-  min-height: 60px;
-  min-height: 6rem;
-  overflow: auto;
-  vertical-align: top;
-  resize: vertical;
-}
-
-// Remove the inner border and padding of focus outlines in Firefox
-::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  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: 0;
-  background-image: none; // FF mobile
-
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
-    color: bf-v-color.$bf-dark;
-  }
-}
-
-button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="reset"]:not(:disabled),
-[type="submit"]:not(:disabled) {
-  cursor: pointer;
-}
-
-// FF placeholder bug
-// Issue: If one change the text color of input fields, FF will change
-// the default color of placeholders too!
-// Fix: Use '!important' https://github.com/necolas/normalize.css/issues/150
-input::placeholder,
-textarea::placeholder {
-  color: bf-v-color.$bf-gray-dark;
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-// remove ':invalid' styles in FF
-// https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid
-//
-// for form validation in JavaScript
-// use '.bf-invalid' class in /utilities/_utility-form-states.scss' instead
-// documentation https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
-:-moz-ui-invalid {
-  box-shadow: none;
-}

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

@@ -1,82 +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';
-
-// heavily inspired by '2020 toggles' by Aaron Iker
-// https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
-// https://codepen.io/aaroniker/pen/ZEYoxEY?editors=0100
-
-[type='checkbox'],
-[type='radio'] {
-  appearance: none;
-
-  height: 1.8rem;
-  width: 1.8rem;
-
-  vertical-align: top;
-  position: relative;
-
-  border: 1px solid / bf-v-color.$bf-gray;
-
-  + label {
-    line-height: 1.8rem;
-    vertical-align: top;
-    margin-left: bf-v-space.$bf-spacing-md-px;
-    margin-left: bf-v-space.$bf-spacing-md-rem;
-  }
-
-  // add support for RTL languages
-  // Read more
-  // 1. http://bootstrap.rtlcss.com
-  // 2. https://rtlstyling.com/
-  *[dir='rtl'] & + label,
-  &[dir='rtl'] + label {
-    margin-left: 0;
-    margin-right: bf-v-space.$bf-spacing-md-px;
-    margin-right: bf-v-space.$bf-spacing-md-rem;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-  }
-
-  &:checked {
-    background-color: bf-v-color.$bf-blue;
-    border-color: bf-v-color.$bf-black;
-  }
-}
-
-[type='radio'] {
-  &::after {
-    width: 1.8rem;
-    height: 1.8rem;
-
-    left: -0.05rem;
-    top: -0.05rem;
-
-    border-radius: 50%;
-    background: bf-v-color.$bf-white;
-
-    transform: scale(0.35);
-  }
-}
-
-[type='checkbox'] {
-  &::after {
-    width: 0.6rem;
-    height: 0.8rem;
-
-    border: 2px solid / bf-v-color.$bf-white;
-    border-top: 0;
-    border-left: 0;
-
-    left: 35%;
-    top: 20%;
-
-    transform: rotate(43deg);
-  }
-}

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

@@ -1,113 +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';
-
-// styling input range in modern browsers safely using the @supports CSS-at-rule
-// https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
-//
-// standalone CodePen demo https://codepen.io/marcop135/pen/JjGrNMx
-
-[type='range'] {
-  appearance: none;
-  width: 100%;
-  height: 1.4rem;
-}
-
-[type='range']::-webkit-slider-thumb {
-  border: 0;
-  appearance: none;
-
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-top: -0.25rem;
-  background-color: bf-v-color.$bf-blue;
-  border-radius: 1.5rem;
-  transition:
-    background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-
-  &:active {
-    background-color: bf-v-color.$bf-blue;
-  }
-}
-
-[type='range']::-moz-range-thumb {
-  border: 0;
-  appearance: none;
-
-  width: 1.5rem;
-  height: 1.5rem;
-  background-color: bf-v-color.$bf-blue;
-  border-radius: 1.5rem;
-  transition:
-    background-color 0.15s ease-in-out,
-    border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
-
-  &:active {
-    background-color: bf-v-color.$bf-blue;
-  }
-}
-
-[type='range']::-webkit-slider-runnable-track {
-  color: transparent;
-  border-color: transparent;
-
-  width: 100%;
-  height: 0.65rem;
-  cursor: pointer;
-  background-color: bf-v-color.$bf-gray-light-extra;
-}
-
-[type='range']::-moz-range-track {
-  color: transparent;
-  border-color: transparent;
-
-  width: 100%;
-  height: 0.65rem;
-  cursor: pointer;
-  background-color: bf-v-color.$bf-gray-light-extra;
-}
-
-[type='range']:focus {
-  outline: none;
-
-  &::-webkit-slider-thumb {
-    box-shadow:
-      0 0 0 0.1rem / bf-v-color.$bf-white,
-      0 0 0 0.2rem rgb(0 123 255 / 25%);
-  }
-
-  &::-moz-slider-thumb {
-    box-shadow:
-      0 0 0 0.1rem / bf-v-color.$bf-white,
-      0 0 0 0.2rem rgb(0 123 255 / 25%);
-  }
-}
-
-[type='range']::-moz-focus-outer {
-  border: 0;
-}
-
-[type='range']:focus::-moz-range-thumb {
-  box-shadow:
-    0 0 0 0.1rem / bf-v-color.$bf-white,
-    0 0 0 0.2rem rgb(0 123 255 / 25%);
-}
-
-// disabled
-
-[type='range']:disabled {
-  pointer-events: none;
-
-  &::-webkit-slider-thumb {
-    background-color: bf-v-color.$bf-gray-light;
-  }
-
-  &::-moz-slider-thumb {
-    background-color: bf-v-color.$bf-gray-light;
-  }
-}