bullframe.css 3.8.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bullframe.css",
-  "version": "3.8.0",
+  "version": "4.0.0",
   "description": "Solid, fluid, IE-friendly Sass (SCSS) framework",
   "jsdelivr": "dist/css/bullframe.css",
   "unpkg": "dist/css/bullframe.css",
@@ -44,13 +44,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.0.0",
-    "gulp-sass": "^4.0.2"
+    "gulp-replace": "^1.1.3",
+    "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": {
+    "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,12 +1,12 @@
-/*! bullframe.css v3.7.0 | MIT License | https://github.com/marcop135/bullframe.css */
+/*! bullframe.css v4.0.0 | MIT License | https://github.com/marcop135/bullframe.css */
 /* custom build: bullframe-utilities */
 
 // colors, spacing and breakpoint variables
 // this is for an easy customisation
-@import "variables/variables-colors";
-@import "variables/variables-texts";
-@import "variables/variables-spacing";
-@import "variables/variables-breakpoints";
+@import 'variables/variables-colors';
+@import 'variables/variables-texts';
+@import 'variables/variables-spacing';
+@import 'variables/variables-breakpoints';
 
 // a set of default opinionated utilities
 // always put this as far as possible from the rest of the styles
@@ -17,12 +17,12 @@
 // https://github.com/twbs/bootstrap/tree/v4.4.1/scss/utilities
 
 // the 12 columns IE8+ grid system
-@import "utilities/utility-grid-system";
+@import 'utilities/utility-grid-system';
 
 // clearfix, sr-only, float, inline/block/flex, and more
-@import "utilities/utility-layout";
+@import 'utilities/utility-layout';
 
-// CSS filters 
+// CSS filters
 // https://developer.mozilla.org/en-US/docs/Web/CSS/filter
 // https://caniuse.com/css-filters
 @import 'utilities/utility-filters';
@@ -30,32 +30,32 @@
 @import 'utilities/utility-z-index';
 
 // reset margins and paddings adding a class
-@import "utilities/utility-spacing";
+@import 'utilities/utility-spacing';
 
 // font families, text truncated, text alignment, and more
-@import "utilities/utility-texts";
+@import 'utilities/utility-texts';
 
 // '.btn' and '.btn--primary'
-@import "utilities/utility-buttons";
+@import 'utilities/utility-buttons';
 
 // '.placeholder', '.invalid', '.disabled'
-@import "utilities/utility-form-states";
+@import 'utilities/utility-form-states';
 
 // font families, text truncated, text alignment, and more
-@import "utilities/utility-lists";
+@import 'utilities/utility-lists';
 
 // embed without worries iframes, video or whatever needed
-@import "utilities/utility-embeds";
+@import 'utilities/utility-embeds';
 
 // use this and the tables won't break the layout horizontally anymore
-@import "utilities/utility-tables";
+@import 'utilities/utility-tables';
 
 // default print styles
 // taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css
-@import "utilities/utility-print";
+@import 'utilities/utility-print';
 
-@import "utilities/utility-reduced-motion";
+@import 'utilities/utility-reduced-motion';
 
 // this is useful for just for debugging purpouses
 // commented by default
-@import "utilities/utility-debugging";
+@import 'utilities/utility-debugging';

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