bullframe.css 3.8.0 → 4.0.0

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

@@ -1,34 +1,34 @@
-// 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;
-  }
-}
+// 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,24 +1,24 @@
-// No IE and Opera Mini support
-// https://caniuse.com/css-filters
-
-// 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(.3rem) !important;
-}
-
-.bf-filter-none {
-  filter: none !important;
-}
+// No IE and Opera Mini support
+// https://caniuse.com/css-filters
+
+// 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,80 +1,80 @@
-.bf-focused {
-  transition: border .2s, background-color .2s, box-shadow .2s !important;
-  border-color: $bf-blue !important;
-  box-shadow: 0 0 0 3px rgba(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: .5 !important;
-
-  background-color: $bf-white;
-  border-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: .5;
-
-  color: $bf-dark;
-  background: $bf-gray-light;
-
-  &:hover,
-  &:active,
-  &:focus {
-    box-shadow: none;
-    color: $bf-dark;
-    background: $bf-gray-light;
-  }
-}
-
-.bf-btn--primary.bf-disabled {
-  cursor: default;
-  cursor: not-allowed;
-  pointer-events: none;
-  user-select: none;
-  box-shadow: none;
-  opacity: .5;
-
-  color: $bf-white;
-  background: $bf-blue;
-
-  &:hover,
-  &:active,
-  &:focus {
-    box-shadow: none;
-    color: $bf-white;
-    background: $bf-blue;
-  }
-}
-
-.bf-invalid,
-.bf-invalid:focus {
-  color: $bf-red !important;
-  border-color: $bf-red !important;
-  box-shadow: 0 0 0 3px rgba(255, 0, 0, .25) !important;
-}
+.bf-focused {
+  transition: border .2s, background-color .2s, box-shadow .2s !important;
+  border-color: $bf-blue !important;
+  box-shadow: 0 0 0 3px rgba(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: .5 !important;
+
+  background-color: $bf-white;
+  border-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: .5;
+
+  color: $bf-dark;
+  background: $bf-gray-light;
+
+  &:hover,
+  &:active,
+  &:focus {
+    box-shadow: none;
+    color: $bf-dark;
+    background: $bf-gray-light;
+  }
+}
+
+.bf-btn--primary.bf-disabled {
+  cursor: default;
+  cursor: not-allowed;
+  pointer-events: none;
+  user-select: none;
+  box-shadow: none;
+  opacity: .5;
+
+  color: $bf-white;
+  background: $bf-blue;
+
+  &:hover,
+  &:active,
+  &:focus {
+    box-shadow: none;
+    color: $bf-white;
+    background: $bf-blue;
+  }
+}
+
+.bf-invalid,
+.bf-invalid:focus {
+  color: $bf-red !important;
+  border-color: $bf-red !important;
+  box-shadow: 0 0 0 3px rgba(255, 0, 0, .25) !important;
+}

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

@@ -1,169 +1,157 @@
-// these are global stylest tha that ovveride all the "light" styles
-
-// import dark scrollbars utility module
-@import 'utility-global-dark-scrollbars';
-
-// the basics: background and texts
-html {
-  color: $bf-light;
-}
-
-body {
-  background-color: lighten($bf-dark-extra, 7.5%);
-}
-
-// anchors
-a {
-  color: lighten($bf-blue, 20%);
-
-  &:hover,
-  &:focus {
-    color: lighten($bf-blue-light, 20%);
-  }
-}
-
-// typography elements that need tiny adjustments
-mark {
-  background-color: darken($bf-yellow, 10%);
-}
-
-ins {
-  background-color: darken($bf-yellow-light, 45%);
-}
-
-// forms
-
-[type='email'],
-[type='number'],
-[type='password'],
-[type='tel'],
-[type='search'],
-[type='text'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='time'],
-[type='week'],
-[type='time'],
-[type='url'],
-[type='range'],
-input[list],
-select,
-select:not([size]):not([multiple]),
-textarea {
-  background-color: $bf-dark-extra;
-  border-color: $bf-black;
-  color: $bf-gray-light;
-
-  &:active,
-  &:focus {
-    background-color: $bf-dark-extra;
-    border-color: lighten($bf-blue, 10%);
-  }
-}
-
-[type='email'],
-[type='number'],
-[type='password'],
-[type='tel'],
-[type='search'],
-[type='text'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='time'],
-[type='week'],
-[type='time'],
-[type='url'],
-input[list],
-select,
-select:not([size]):not([multiple]),
-textarea {
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(3, 102, 214, .5);
-  }
-}
-
-select:not([size]):not([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");
-}
-
-// IE9 only hack
-// https://gist.github.com/marcop135/cf5163ab23d1cb208248b955c990b2ea#ie-9-only
-@media screen and (min-width: 0\0) and (min-resolution: .001dpcm) {
-  // hide custom arrow
-  select:not([size]):not([multiple]),
-  // RTL
-  *[dir="rtl"] select:not([size]):not([multiple]),
-  select[dir="rtl"]:not([size]):not([multiple]) {
-    background-image: none;
-  }
-}
-
-// range
-
-// all modern browsers but not IE
-@supports (appearance: none) {
-  // 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-dark-extra;
-  }
-
-  [type='range']::-moz-range-track {
-    background-color: $bf-dark-extra;
-  }
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: $bf-gray;
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  background: $bf-gray-light;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: darken($bf-gray-light, 10%);
-  }
-
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
-  }
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
-  }
-}
-
-// focus
-a:focus,
-input:focus {
-  outline-color: darken(orange, 15%);
-}
-
-:focus-visible {
-  outline-color: darken(orange, 15%);
-}
+// these are global stylest tha that ovveride all the "light" styles
+
+// import dark scrollbars utility module
+@import 'utility-global-dark-scrollbars';
+
+// the basics: background and texts
+html {
+  color: $bf-light;
+}
+
+body {
+  background-color: lighten($bf-dark-extra, 7.5%);
+}
+
+// anchors
+a {
+  color: lighten($bf-blue, 20%);
+
+  &:hover,
+  &:focus {
+    color: lighten($bf-blue-light, 20%);
+  }
+}
+
+// typography elements that need tiny adjustments
+mark {
+  background-color: darken($bf-yellow, 10%);
+}
+
+ins {
+  background-color: darken($bf-yellow-light, 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]):not([multiple]),
+textarea {
+  background-color: $bf-dark-extra;
+  border-color: $bf-black;
+  color: $bf-gray-light;
+
+  &:active,
+  &:focus {
+    background-color: $bf-dark-extra;
+    border-color: lighten($bf-blue, 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]):not([multiple]),
+textarea {
+  &:active,
+  &:focus {
+    box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.5);
+  }
+}
+
+select:not([size]):not([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");
+}
+
+// IE9 only hack
+// https://gist.github.com/marcop135/cf5163ab23d1cb208248b955c990b2ea#ie-9-only
+@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) {
+  // hide custom arrow
+  select:not([size]):not([multiple]),
+  // RTL
+  *[dir="rtl"] select:not([size]):not([multiple]),
+  select[dir="rtl"]:not([size]):not([multiple]) {
+    background-image: none;
+  }
+}
+
+// range
+
+// all modern browsers but not IE
+@supports (appearance: none) {
+  // 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-dark-extra;
+  }
+
+  [type='range']::-moz-range-track {
+    background-color: $bf-dark-extra;
+  }
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: $bf-gray;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  background: $bf-gray-light;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: darken($bf-gray-light, 10%);
+  }
+
+  &:active,
+  &:focus {
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
+  }
+}
+
+// focus
+a:focus,
+input:focus {
+  outline-color: darken(orange, 15%);
+}
+
+:focus-visible {
+  outline-color: darken(orange, 15%);
+}

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

@@ -1,3 +1,3 @@
-@media (prefers-color-scheme: dark) {
-  @import 'utilities/utility-global-dark-classless';
-}
+@media (prefers-color-scheme: dark) {
+  @import 'utilities/utility-global-dark-classless';
+}

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

@@ -1,3 +1,3 @@
-@media (prefers-color-scheme: dark) {
-  @import 'utilities/utility-global-dark';
-}
+@media (prefers-color-scheme: dark) {
+  @import 'utilities/utility-global-dark';
+}

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

@@ -1,29 +1,29 @@
-// standard property
-// 'scrollbar-color'
-// https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
-// currently (June 2020) Firefox only
-// https://caniuse.com/#feat=mdn-css_properties_scrollbar-color
-html {
-  scrollbar-color: darken($bf-gray-dark, 5%) $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-thumb {
-  background-color: darken($bf-gray-dark, 5%);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: lighten($bf-gray-dark, 10%);
-}
-
-::-webkit-scrollbar-track {
-  background-color: $bf-dark-extra;
-}
+// standard property
+// 'scrollbar-color'
+// https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
+// currently (June 2020) Firefox only
+// https://caniuse.com/#feat=mdn-css_properties_scrollbar-color
+html {
+  scrollbar-color: darken($bf-gray-dark, 5%) $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-dark-extra;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: darken($bf-gray-dark, 5%);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: lighten($bf-gray-dark, 10%);
+}