bullframe.css 3.8.1 → 4.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bullframe.css",
-  "version": "3.8.1",
-  "description": "Solid, fluid, IE-friendly Sass (SCSS) framework",
+  "version": "4.0.1",
+  "description": "Solid, fluid, cross-browser Sass (SCSS) framework.",
   "jsdelivr": "dist/css/bullframe.css",
   "unpkg": "dist/css/bullframe.css",
   "main": "dist/css/bullframe.css",
@@ -20,9 +20,6 @@
     "css-framework",
     "internet-explorer",
     "cross-browser",
-    "ie8",
-    "ie9",
-    "ie10",
     "ie11",
     "responsive-web-design",
     "fluid",
@@ -44,14 +41,20 @@
   },
   "homepage": "https://marcop135.github.io/bullframe.css/",
   "devDependencies": {
-    "browser-sync": "^2.26.12",
-    "cssnano": "^4.1.11",
+    "browser-sync": "^2.27.10",
+    "cssnano": "^5.1.12",
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^7.0.1",
-    "gulp-postcss": "^8.0.0",
+    "gulp-autoprefixer": "^8.0.0",
+    "gulp-postcss": "^9.0.1",
     "gulp-rename": "2.0.0",
     "gulp-replace": "^1.1.3",
-    "gulp-sass": "^4.0.2"
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.54.4",
+    "stylelint": "^14.10.0",
+    "stylelint-config-recommended": "^9.0.0",
+    "stylelint-config-sass-guidelines": "^9.0.1"
   },
-  "dependencies": {}
+  "dependencies": {
+    "stylelint-scss": "^4.3.0"
+  }
 }

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

@@ -1,5 +1,5 @@
-/*! custom build: bullframe-classless-dark-prefers */
-// https://css-tricks.com/no-class-css-frameworks/
-
-@import 'bullframe-classless';
-@import 'utilities/utility-global-dark-prefers-classless';
+/*! custom build: bullframe-classless-dark-prefers */
+// https://css-tricks.com/no-class-css-frameworks/
+
+@import 'bullframe-classless';
+@import 'utilities/utility-global-dark-prefers-classless';

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

@@ -1,5 +1,5 @@
-/*! custom build: bullframe-classless-dark */
-// https://css-tricks.com/no-class-css-frameworks/
-
-@import 'bullframe-classless';
-@import 'utilities/utility-global-dark-classless';
+/*! custom build: bullframe-classless-dark */
+// https://css-tricks.com/no-class-css-frameworks/
+
+@import 'bullframe-classless';
+@import 'utilities/utility-global-dark-classless';

package/src/scss/bullframe-classless.scss

@@ -30,21 +30,13 @@
 // all about form elements
 @import 'forms/forms-normalization';
 @import 'forms/forms-styling';
-@import 'forms/forms-styling-ie-hacks';
 @import 'forms/forms-styling-select';
-@import 'forms/forms-styling-select-ie-hacks';
 @import 'forms/forms-styling-radio-checkbox';
+@import 'forms/forms-styling-range';
 
 // <table> and his elements
 @import 'miscellaneous/misc-tables';
 
-// improve several ARIA roles appearance
-@import 'miscellaneous/misc-accessibility';
-
-// shamy quick fixes...
-// https://csswizardry.com/2013/04/shame-css/
-@import 'miscellaneous/misc-shame';
-
 // this is just quick way to customise your styles
 // below these styles, you shouldn't override nothing but remove them
 // commented by default

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

@@ -1,4 +1,4 @@
-/*! custom build: bullframe-dark-prefers */
-
-@import 'bullframe';
-@import 'utilities/utility-global-dark-prefers';
+/*! custom build: bullframe-dark-prefers */
+
+@import 'bullframe';
+@import 'utilities/utility-global-dark-prefers';

package/src/scss/bullframe-dark.scss

@@ -1,4 +1,4 @@
-/*! custom build: bullframe-dark */
-
-@import 'bullframe';
-@import 'utilities/utility-global-dark';
+/*! custom build: bullframe-dark */
+
+@import 'bullframe';
+@import 'utilities/utility-global-dark';

package/src/scss/bullframe-utilities.scss

@@ -1,4 +1,4 @@
-/*! bullframe.css v3.8.0 | MIT License | https://github.com/marcop135/bullframe.css */
+/*! bullframe.css v4.0.1 | MIT License | https://github.com/marcop135/bullframe.css */
 /* custom build: bullframe-utilities */
 
 // colors, spacing and breakpoint variables

package/src/scss/bullframe.scss

@@ -30,9 +30,7 @@
 // all about form elements
 @import 'forms/forms-normalization';
 @import 'forms/forms-styling';
-@import 'forms/forms-styling-ie-hacks';
 @import 'forms/forms-styling-select';
-@import 'forms/forms-styling-select-ie-hacks';
 @import 'forms/forms-styling-radio-checkbox';
 @import 'forms/forms-styling-range';
 
@@ -61,11 +59,6 @@
 // clearfix, sr-only, float, inline/block/flex, and more
 @import 'utilities/utility-layout';
 
-// CSS filters 
-// https://developer.mozilla.org/en-US/docs/Web/CSS/filter
-// https://caniuse.com/css-filters
-@import 'utilities/utility-filters';
-
 @import 'utilities/utility-z-index';
 
 // reset margins and paddings adding a class

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

@@ -150,8 +150,10 @@ select {
   word-wrap: normal;
 }
 
-[list]::-webkit-calendar-picker-indicator {
-  display: none;
+// Taken from Bootstrap Reboot v5.2
+// https://unpkg.com/browse/bootstrap@5.2.0/dist/css/bootstrap-reboot.css
+[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not([type='time'])::-webkit-calendar-picker-indicator {
+  display: none !important;
 }
 
 optgroup {

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

@@ -1,85 +1,84 @@
-// 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
-//
-// currently (June 2020), a few modern browsers support the "@supports" media rules
-// https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
-// https://caniuse.com/#feat=mdn-css_at-rules_supports_selector
-//
-// Anyway are safe and future-friendly because more browser compatibility
-// will come
-
-@supports (appearance: none) {
-  [type='checkbox'],
-  [type='radio'] {
-    appearance: none;
-
-    height: 1.8rem;
-    width: 1.8rem;
-
-    vertical-align: top;
-    position: relative;
-
-    border: 1px solid $bf-gray;
-
-    + label {
-      line-height: 1.8rem;
-      vertical-align: top;
-      margin-left: $bf-spacing-md-px;
-      margin-left: $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-spacing-md-px;
-      margin-right: $bf-spacing-md-rem;
-    }
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-    }
-
-    &:checked {
-      background-color: $bf-blue;
-      border-color: $bf-black;
-    }
-  }
-
-  [type='radio'] {
-    &:after {
-      width: 1.8rem;
-      height: 1.8rem;
-
-      left: -.05rem;
-      top: -.05rem;
-
-      border-radius: 50%;
-      background: $bf-white;
-
-      transform: scale(.35);
-    }
-  }
-
-  [type='checkbox'] {
-    &:after {
-      width: .6rem;
-      height: .8rem;
-
-      border: 2px solid $bf-white;
-      border-top: 0;
-      border-left: 0;
-
-      left: 35%;
-      top: 20%;
-
-      transform: rotate(43deg);
-    }
-  }
-}
+// 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
+//
+// https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
+// https://caniuse.com/#feat=mdn-css_at-rules_supports_selector
+//
+// Anyway are safe and future-friendly because more browser compatibility
+// will come
+
+@supports (appearance: none) {
+  [type='checkbox'],
+  [type='radio'] {
+    appearance: none;
+
+    height: 1.8rem;
+    width: 1.8rem;
+
+    vertical-align: top;
+    position: relative;
+
+    border: 1px solid $bf-gray;
+
+    + label {
+      line-height: 1.8rem;
+      vertical-align: top;
+      margin-left: $bf-spacing-md-px;
+      margin-left: $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-spacing-md-px;
+      margin-right: $bf-spacing-md-rem;
+    }
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+    }
+
+    &:checked {
+      background-color: $bf-blue;
+      border-color: $bf-black;
+    }
+  }
+
+  [type='radio'] {
+    &:after {
+      width: 1.8rem;
+      height: 1.8rem;
+
+      left: -0.05rem;
+      top: -0.05rem;
+
+      border-radius: 50%;
+      background: $bf-white;
+
+      transform: scale(0.35);
+    }
+  }
+
+  [type='checkbox'] {
+    &:after {
+      width: 0.6rem;
+      height: 0.8rem;
+
+      border: 2px solid $bf-white;
+      border-top: 0;
+      border-left: 0;
+
+      left: 35%;
+      top: 20%;
+
+      transform: rotate(43deg);
+    }
+  }
+}

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

@@ -1,103 +1,99 @@
-// 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
-
-@supports (appearance: none) {
-  [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: -.25rem;
-    background-color: $bf-blue;
-    border-radius: 1.5rem;
-    transition: background-color .15s ease-in-out,
-      border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-    &:active {
-      background-color: $bf-blue;
-    }
-  }
-
-  [type='range']::-moz-range-thumb {
-    border: 0;
-    appearance: none;
-
-    width: 1.5rem;
-    height: 1.5rem;
-    background-color: $bf-blue;
-    border-radius: 1.5rem;
-    transition: background-color .15s ease-in-out,
-      border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-    &:active {
-      background-color: $bf-blue;
-    }
-  }
-
-  [type='range']::-webkit-slider-runnable-track {
-    color: transparent;
-    border-color: transparent;
-
-    width: 100%;
-    height: .65rem;
-    cursor: pointer;
-    background-color: $bf-gray-light-extra;
-  }
-
-  [type='range']::-moz-range-track {
-    color: transparent;
-    border-color: transparent;
-
-    width: 100%;
-    height: .65rem;
-    cursor: pointer;
-    background-color: $bf-gray-light-extra;
-  }
-
-  [type='range']:focus {
-    outline: none;
-
-    &::-webkit-slider-thumb {
-      box-shadow: 0 0 0 .1rem $bf-white, 0 0 0 .2rem rgba(0, 123, 255, .25);
-    }
-
-    &::-moz-slider-thumb {
-      box-shadow: 0 0 0 .1rem $bf-white, 0 0 0 .2rem rgba(0, 123, 255, .25);
-    }
-  }
-
-  [type='range']::-moz-focus-outer {
-    border: 0;
-  }
-
-  [type='range']:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 .1rem $bf-white, 0 0 0 .2rem rgba(0, 123, 255, .25);
-  }
-
-  [type='range']:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 .1rem $bf-white, 0 0 0 .2rem rgba(0, 123, 255, .25);
-  }
-
-  // disabled
-
-  [type='range']:disabled {
-    pointer-events: none;
-
-    &::-webkit-slider-thumb {
-      background-color: $bf-gray-light;
-    }
-
-    &::-moz-slider-thumb {
-      background-color: $bf-gray-light;
-    }
-  }
-}
+// 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
+
+@supports (appearance: none) {
+  [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-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-blue;
+    }
+  }
+
+  [type='range']::-moz-range-thumb {
+    border: 0;
+    appearance: none;
+
+    width: 1.5rem;
+    height: 1.5rem;
+    background-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-blue;
+    }
+  }
+
+  [type='range']::-webkit-slider-runnable-track {
+    color: transparent;
+    border-color: transparent;
+
+    width: 100%;
+    height: 0.65rem;
+    cursor: pointer;
+    background-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-gray-light-extra;
+  }
+
+  [type='range']:focus {
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 0.1rem $bf-white, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+    }
+
+    &::-moz-slider-thumb {
+      box-shadow: 0 0 0 0.1rem $bf-white, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+    }
+  }
+
+  [type='range']::-moz-focus-outer {
+    border: 0;
+  }
+
+  [type='range']:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 0.1rem $bf-white, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  }
+
+  // disabled
+
+  [type='range']:disabled {
+    pointer-events: none;
+
+    &::-webkit-slider-thumb {
+      background-color: $bf-gray-light;
+    }
+
+    &::-moz-slider-thumb {
+      background-color: $bf-gray-light;
+    }
+  }
+}

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