bullframe.css 3.8.0 → 4.0.0

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

@@ -1,63 +1,63 @@
-// 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]):not([multiple]) {
-  appearance: none;
-}
-
-// IE10+
-// The '::-ms-expand' CSS pseudo-element is a Microsoft extension that represents
-// the button of a <select> menu control that opens or closes the drop-down
-// menu. Typically it is a triangle that points downward.
-// https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-expand
-select::-ms-expand {
-  display: none;
-}
-
-select:not([size]):not([multiple]) {
-  background: $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 .85rem center/8px 10px;
-
-  padding-right: $bf-spacing-lg-px + $bf-spacing-lg-px;
-  padding-right: $bf-spacing-lg-rem + $bf-spacing-lg-rem;
-}
-
-// 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]):not([multiple]),
-select[dir='rtl']:not([size]):not([multiple]) {
-  // move the arrow icon to the left
-  background-position: left .85rem top 50%;
-
-  // go back to default forms padding
-  padding-right: ($bf-spacing-lg-px * .75);
-  padding-right: ($bf-spacing-lg-rem * .75);
-
-  // add custom left padding, matching the custom LTR one
-  padding-left: $bf-spacing-lg-px + $bf-spacing-lg-px;
-  padding-left: $bf-spacing-lg-rem + $bf-spacing-lg-rem;
-}
+// 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]):not([multiple]) {
+  appearance: none;
+
+  // add a new svg arrow
+  background: $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-spacing-lg-px + $bf-spacing-lg-px;
+  padding-right: $bf-spacing-lg-rem + $bf-spacing-lg-rem;
+}
+
+// IE10+
+// The '::-ms-expand' CSS pseudo-element is a Microsoft extension that represents
+// the button of a <select> menu control that opens or closes the drop-down
+// menu. Typically it is a triangle that points downward.
+// https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-expand
+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]):not([multiple]),
+select[dir='rtl']:not([size]):not([multiple]) {
+  // move the arrow icon to the left
+  background-position: left 0.85rem top 50%;
+
+  // go back to default forms padding
+  padding-right: ($bf-spacing-lg-px * 0.75);
+  padding-right: ($bf-spacing-lg-rem * 0.75);
+
+  // add custom left padding, matching the custom LTR one
+  padding-left: $bf-spacing-lg-px + $bf-spacing-lg-px;
+  padding-left: $bf-spacing-lg-rem + $bf-spacing-lg-rem;
+}

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

@@ -1,121 +1,119 @@
-[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,
-textarea {
-  background-color: $bf-white;
-  border: 1px solid $bf-gray;
-  padding: $bf-spacing-md-px ($bf-spacing-lg-px * .75);
-  padding: $bf-spacing-md-rem ($bf-spacing-lg-rem * .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='time'],
-[type='week'],
-[type='time'],
-[type='url'],
-input[list],
-select,
-textarea,
-[type='radio'],
-[type='checkbox'] {
-  &:active,
-  &:focus {
-    transition: border .2s, background-color .2s, box-shadow .2s;
-    border-color: $bf-blue;
-    box-shadow: 0 0 0 3px rgba(0, 86, 179, .25);
-  }
-}
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  color: $bf-dark;
-  padding: ($bf-spacing-xl-px / 3) (($bf-spacing-xl-px / 3) * 2); // 8px 16px
-  padding: ($bf-spacing-xl-rem / 3) (($bf-spacing-xl-rem / 3) * 2);
-  background: $bf-gray-light;
-  transition: color .2s, background .2s, box-shadow .2s;
-
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: none;
-    color: $bf-dark;
-    background: darken($bf-gray-light, 10%);
-  }
-
-  &:active,
-  &:focus {
-    box-shadow: 0 0 0 3px rgba(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: .5 !important;
-}
+[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-white;
+  border: 1px solid $bf-gray;
+  padding: $bf-spacing-md-px ($bf-spacing-lg-px * 0.75);
+  padding: $bf-spacing-md-rem ($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-blue;
+    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25);
+  }
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  color: $bf-dark;
+  padding: calc($bf-spacing-xl-px / 3) (calc($bf-spacing-xl-px / 3) * 2); // 8px 16px
+  padding: calc($bf-spacing-xl-rem / 3) (calc($bf-spacing-xl-rem / 3) * 2);
+  background: $bf-gray-light;
+  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
+
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+    color: $bf-dark;
+    background: darken($bf-gray-light, 10%);
+  }
+
+  &:active,
+  &:focus {
+    box-shadow: 0 0 0 3px rgba(0, 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-focus.scss

@@ -85,7 +85,6 @@ button,
 [type='month'],
 [type='time'],
 [type='week'],
-[type='time'],
 [type='url'],
 [type='radio'],
 [type='checkbox'],

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

@@ -1,18 +1,3 @@
-// stretch the body background and help with centering elements
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  min-height: 100%;
-}
-
-
-// known issues in IE8 and IE9 with box-sizing
-// https://css-tricks.com/box-sizing/#article-header-id-5
-
 *,
 *::before,
 *::after {
@@ -39,27 +24,7 @@ template {
   display: none;
 }
 
-// Remove the tapping delay in IE 10
-a,
-area,
-button,
-input,
-label,
-select,
-summary,
-textarea,
-[tabindex] {
-  -ms-touch-action: manipulation;
-}
-
-// Always hide an element with the `hidden` HTML attribute (from PureCSS).
-// Needed for proper display in IE 10-. */
+// Always hide an element with the `hidden` HTML attribute
 [hidden] {
   display: none !important;
 }
-
-// Fix IE 10 on Windows Phone 8 Viewport only
-// https://getbootstrap.com/docs/3.3/getting-started/#support-ie10-width
-@-ms-viewport {
-  width: device-width;
-}

package/src/scss/mixins/_mixin-grid-flex.scss

@@ -1,83 +1,83 @@
-// This is IE10+ 
-// https://caniuse.com/flexbox
-
-@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;
-}
+// This is IE10+ 
+// https://caniuse.com/flexbox
+
+@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 +1,42 @@
-@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;
-  }
-}
+@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;
+  }
+}