1.4.1

- doc misspelling fixes and updates - replaced @import to @use
Frontend-Layers · May 12, 2023 · 1ee3584 · 1ee3584
1 parent 34e2958
commit 1ee3584
Show file tree

Hide file tree

Showing 27 changed files with 1,148 additions and 573 deletions.
diff --git a/.gulp/styles.js b/.gulp/styles.js
@@ -103,7 +103,7 @@ const stylesRenameReset = () =>
 const copyCSS = () =>
   src(cfg.dest.cssDist + '*').pipe(dest(cfg.dest.cssTest));
 
-const copyResetCSS = () => src('./src/scss/_reset.scss').pipe(dest('./'));
+const copyResetCSS = () => src('./src/scss/*.scss').pipe(dest('./'));
 
 const minifyResetCSS = () => src('./build/reset.css')
   .pipe(cleanCSS({ debug: true }, (details) => {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+# [1.4.1]
+
+- doc misspelling fixes and updates
+- replaced @import to @use
+
 # [1.4.0]
 
 - added mixins 'offx' - for classes and 'offxAll' - for global prevent overflow issues

diff --git a/README.md b/README.md
@@ -47,25 +47,25 @@ pnpm i scss-reset --dev
 Please include into top of the main.scss:
 
 ```scss
-@import 'scss-reset/reset';
+@use 'scss-reset/reset';
 ```
 
 or depends of your workspace configuration will works too:
 
 ```scss
-@import '../node_modules/scss-reset/src/scss/_reset.scss';
+@use '../node_modules/scss-reset/src/scss/_reset.scss';
 ```
 
 or:
 
 ```scss
-@import '../node_modules/scss-reset/_reset.scss';
+@use '../node_modules/scss-reset/_reset.scss';
 ```
 
 or shorter:
 
 ```scss
-@import 'scss-reset/_reset.scss';
+@use 'scss-reset/_reset.scss';
 ```
 
 ## CDN
@@ -109,12 +109,20 @@ where need to ❗deep reset all properties of the ❗Shadow DOM elements without
 ### Imoprt Total Reset SCSS file
 
 ```scss
-@import 'scss-reset/total-reset';
+@use 'scss-reset/total-reset';
 ```
 
 
 ## Mixins
 
+Please include into necessary module:
+
+```scss
+@use 'scss-reset/reset-mixins';
+```
+
+### Mixins List
+
 | Mixins             | Include                      | Description                                       |
 |--------------------|------------------------------|---------------------------------------------------|
 | disableAnimation   | @include disableAnimation;   | Disable CSS animation                             |
@@ -130,20 +138,18 @@ where need to ❗deep reset all properties of the ❗Shadow DOM elements without
 
 ### @mixin offxAll
 
-This mixin just added
+This mixin will add this snippet:
 
 ```css
 html, body {
   overflow-x: hidden
 }
 ```
 
-but
+Please be careful. You'll got scroll fix for whole page, but:
 
 - It isn't good for accessibility because it hides overflowed content permanently
-- CSS poperty ```position: sticky;``` doesn't work anymore because an ancestor element (```html, body```) has overflow property set
-
-just one profit - rought fix for whole page.
+- CSS poperty ```position: sticky;``` doesn't work because an ancestor element (```html, body```) has overflow property set.
 
 Please use ``` @include offx;``` for selected block elements instead to avoid CSS 'sticky' and UX issues.
 For example:

diff --git a/_reset-mixins.scss b/_reset-mixins.scss
@@ -0,0 +1,123 @@
+/**
+ * Reset Mixing
+ * ================================================== */
+
+/**
+ * Disable Animation
+ */
+ @mixin disableAnimation {
+  transform: none !important;
+
+  transition: none !important;
+  transition-property: none !important;
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+
+  animation: none !important;
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+  animation-iteration-count: 1 !important;
+
+  scroll-behavior: auto !important;
+}
+
+/**
+ * Disable animation depends on Browser or Operation System configuration
+ */
+@mixin acDisableAnimation {
+  @media (prefers-reduced-motion: reduce) {
+    @include disableAnimation;
+  }
+}
+
+/**
+ * Accessability. Black and White Mode
+ */
+@mixin acModeBW {
+  filter: grayscale(100%);
+}
+
+/**
+ * Accessability. Inverse Mode
+ */
+@mixin acModeContrast {
+  filter: invert(100%);
+  background-color: $white !important;
+}
+
+/**
+ * Meter reset
+ */
+@mixin meterReset {
+  meter {
+    background: none;
+    -webkit-appearance: none;
+  }
+
+  ::-moz-meter-bar {
+    -moz-appearance: none
+  }
+
+  :-moz-meter-optimum::-moz-meter-bar,
+  :-moz-meter-sub-optimum::-moz-meter-bar,
+  :-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: none
+  }
+
+
+  meter::-webkit-meter-bar,
+  meter::-webkit-meter-optimum-value,
+  meter::-webkit-meter-suboptimum-value,
+  meter::-webkit-meter-even-less-good-value,
+  meter::-webkit-meter-inner-element {
+    background: none;
+  }
+}
+
+@mixin progressReset {
+
+  /**
+   * Progress Bar Reset
+   *
+   */
+  progress,
+  progress[role] {
+    display: block;
+
+    overflow: hidden;
+
+    width: 100%;
+    height: 40px;
+    margin: 0;
+
+    /* Reset Defaults */
+    appearance: none;
+    border: none;
+
+    /* Needs to be in here for Safari polyfill so background images work as expected. */
+    background-size: auto;
+  }
+
+  /* Polyfill */
+  progress[role]:after {
+    background-image: none;
+    /* removes default background from polyfill */
+  }
+
+  /* Ensure fallback text doesn't appear in polyfill */
+  progress[role] strong {
+    display: none;
+  }
+}
+
+// Global Overflow-x hide
+@mixin offxAll {
+  html, body {
+    overflow-x: hidden;
+  }
+}
+
+// Overflow-x hide
+@mixin offx {
+  overflow-x: hidden;
+}
diff --git a/_reset.scss b/_reset.scss
@@ -1,130 +1,3 @@
-/**
- * Reset Mixing
- * ================================================== */
-
-/**
- * Disable Animation
- */
-@mixin disableAnimation {
-  transform: none !important;
-
-  transition: none !important;
-  transition-property: none !important;
-  transition-duration: 0s !important;
-  transition-delay: 0s !important;
-
-  animation: none !important;
-  animation-duration: 0s !important;
-  animation-delay: 0s !important;
-  animation-iteration-count: 1 !important;
-
-  scroll-behavior: auto !important;
-}
-
-/**
- * Disable animation depends on Browser or Operation System configuration
- */
-@mixin acDisableAnimation {
-  @media (prefers-reduced-motion: reduce) {
-    @include disableAnimation;
-  }
-}
-
-/**
- * Accessability. Black and White Mode
- */
-@mixin acModeBW {
-  filter: grayscale(100%);
-}
-
-/**
- * Accessability. Inverse Mode
- */
-@mixin acModeContrast {
-  filter: invert(100%);
-  background-color: $white !important;
-}
-
-/**
- * Meter reset
- */
-@mixin meterReset {
-  meter {
-    background: none;
-    -webkit-appearance: none;
-  }
-
-  ::-moz-meter-bar {
-    -moz-appearance: none
-  }
-
-  :-moz-meter-optimum::-moz-meter-bar,
-  :-moz-meter-sub-optimum::-moz-meter-bar,
-  :-moz-meter-sub-sub-optimum::-moz-meter-bar {
-    background: none
-  }
-
-
-  meter::-webkit-meter-bar,
-  meter::-webkit-meter-optimum-value,
-  meter::-webkit-meter-suboptimum-value,
-  meter::-webkit-meter-even-less-good-value,
-  meter::-webkit-meter-inner-element {
-    background: none;
-  }
-}
-
-@mixin progressReset {
-
-  /**
-   * Progress Bar Reset
-   *
-   */
-  progress,
-  progress[role] {
-    display: block;
-
-    overflow: hidden;
-
-    width: 100%;
-    height: 40px;
-    margin: 0;
-
-    /* Reset Defaults */
-    appearance: none;
-    border: none;
-
-    /* Needs to be in here for Safari polyfill so background images work as expected. */
-    background-size: auto;
-  }
-
-  /* Polyfill */
-  progress[role]:after {
-    background-image: none;
-    /* removes default background from polyfill */
-  }
-
-  /* Ensure fallback text doesn't appear in polyfill */
-  progress[role] strong {
-    display: none;
-  }
-}
-
-// Global Overflow-x hide
-@mixin offxAll {
-  html, body {
-    overflow-x: hidden;
-  }
-}
-
-// Overflow-x hide
-@mixin offx {
-  overflow-x: hidden;
-}
-
-
-
-
 /**
  * Modern CSS Reset Tweaks
  * ================================================== */