1.3.8

- _total-reset.scss updates for inputs
- added additional test cases
- updated documentation

.gulp/styles.js

@@ -72,7 +72,6 @@ const scss = () =>
     .pipe(dest(cfg.dest.scss))
     .pipe(dest(cfg.dest.css));
 
-
 /**
  * Styles Reload
  *

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+# [1.3.8]
+
+- _total-reset.scss updates for inputs
+- added additional test cases
+- updated documentation
+
 # [1.3.4]
 
 - _total-reset.scss updates for svg. Added @namespace

README.md

@@ -13,38 +13,44 @@ Demo: https://andreymatin.github.io/scss-reset/test/index.html
 - Based on [Meyer's CSS Reset](https://meyerweb.com/eric/tools/css/reset/)
 - Modernized [modern-css-reset](https://github.com/hankchizljaw/modern-css-reset)
 - Useful parts from [normalize.css](https://necolas.github.io/normalize.css/)
-- Typography by SCSS variables (REM, BEM(int)) and mobile friendly definitions
-- Expandable by prebuilded mixins (Accessability, HTML components)
-- Optimization for JavaScript Applications and Web Components
+- Optional typography and mobile friendly definitions by SCSS variables (REM, BEM(int))
+- Expandable by prebuilded mixins and ports (Accessability, HTML and Web compoents, etc.)
 
 ## Why
 
 For instantly fix some persistent CSS issues and add missing parts for popular CSS resets.
 It is also compatible with other HTML/CSS frameworks like Twitter Bootstrap, Tailwind CSS, etc.
 You can extend styles reset by mixin collection and easily improve it.
 
-
 ## Install
 
-
 [![NPM](https://nodei.co/npm/scss-reset.png?compact=true)](https://nodei.co/npm/scss-reset/)
 
-
-```
-yarn add scss-reset;
+```shell
+npm i scss-reset --save-dev
 ```
 
-or
+### by yarn
 
+```shell
+yarn add scss-reset --dev
 ```
-npm i scss-reset;
-```
 
+### by pnpm
+
+```shell
+pnpm i scss-reset --dev
+```
 
 ## Usage
 
 Please include into top of the main.scss:
 
+```scss
+@import 'scss-reset/reset';
+```
+
+or depends of your workspace configuration will works too:
 
 ```scss
 @import '../node_modules/scss-reset/src/scss/_reset.scss';
@@ -62,15 +68,6 @@ or shorter:
 @import 'scss-reset/_reset.scss';
 ```
 
-or shorter x2:
-
-```scss
-@import 'scss-reset/reset';
-```
-
-
-depends of your workspace configuration.
-
 ## CDN
 
 Optimized and compressed CSS version for _reset.scss
@@ -84,7 +81,7 @@ Optimized and compressed CSS version for _reset.scss
 - _variables.scss
 - _typography.scss
 
-_variables.scss and _typography.scss are optional.
+⚠️ _variables.scss and _typography.scss are optional.
 
 You can copy them from to development folder for additional custom modifications
 
@@ -93,9 +90,6 @@ You can copy them from to development folder for additional custom modifications
 'node_modules/scss-reset/src/scss/_typography.scss';
 ```
 
-for additional modifications.
-
-
 ### Usage with Shopify Dawn theme
 
 - Please, copy reset-shopify-down.css from '/res' npm folder to '/assets' theme folder
@@ -108,28 +102,14 @@ for additional modifications.
 ## Total Reset for Web Components
 
 Please, use _total-reset.scss for Web Components or for modern JavaScript Apps
-where need to deep reset all properties of the Shadow DOM elements without reset Document styles.
+where need to ❗deep reset all properties of the ❗Shadow DOM elements without reset Document styles.
 
 ### Imoprt Total Reset SCSS file
 
-```scss
-@import 'scss-reset/_total-reset.scss';
-```
-
-or
-
 ```scss
 @import 'scss-reset/total-reset';
 ```
 
-### Total Reset Data URI
-
-HTML snippet for Web Component integration
-
-```html
-<style>@import url("data:text/css;base64,QG5hbWVzcGFjZSBzdmcgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIjs6d2hlcmUoOm5vdCh0YWJsZSx0aGVhZCx0Ym9keSx0cix0aCx0ZCxzdmd8Kikpe2FsbDp1bnNldDtib3gtc2l6aW5nOmJvcmRlci1ib3h9OndoZXJlKDpub3QodGFibGUsdGhlYWQsdGJvZHksdHIsdGgsdGQsc3ZnfCopKTo6YWZ0ZXIsOndoZXJlKDpub3QodGFibGUsdGhlYWQsdGJvZHksdHIsdGgsdGQsc3ZnfCopKTo6YmVmb3Jle2FsbDp1bnNldDtib3gtc2l6aW5nOmJvcmRlci1ib3h9YSxhYmJyLGFjcm9ueW0sYWRkcmVzcyxhcnRpY2xlLGFzaWRlLGF1ZGlvLGIsYmlnLGJsb2NrcXVvdGUsYnV0dG9uLGNhbnZhcyxjYXB0aW9uLGNlbnRlcixjaXRlLGNvZGUsZGQsZGVsLGRldGFpbHMsZGZuLGRpdixkbCxkdCxlbSxlbWJlZCxmaWVsZHNldCxmaWdjYXB0aW9uLGZpZ3VyZSxmb290ZXIsZm9ybSxoMSxoMixoMyxoNCxoNSxoNixoZWFkZXIsaGdyb3VwLGksaWZyYW1lLGltZyxpbnMsa2JkLGxhYmVsLGxlZ2VuZCxsaSxtYWluLG1hcmssbWVudSxuYXYsb2wsb3V0cHV0LHAscHJlLHEscnVieSxzLHNhbXAsc2VjdGlvbixzbWFsbCxzcGFuLHN0cmlrZSxzdHJvbmcsc3ViLHN1bW1hcnksc3VwLHRhYmxlLHRib2R5LHRkLHRmb290LHRoLHRoZWFkLHRpbWUsdHIsdHQsdSx1bCx2YXIsdmlkZW97Zm9udC1zaXplOjEwMCV9YXJ0aWNsZSxhc2lkZSxibG9ja3F1b3RlLGRldGFpbHMsZGl2LGZpZ2NhcHRpb24sZmlndXJlLGZvb3Rlcixmb3JtLGgxLGgyLGgzLGg0LGg1LGg2LGhlYWRlcixoZ3JvdXAsbWFpbixtZW51LG5hdixwLHByZSxzZWN0aW9ue2Rpc3BsYXk6YmxvY2t9YXVkaW8sY2FudmFzLGltZyxwaWN0dXJlLHN2Zyx2aWRlb3tkaXNwbGF5OmlubGluZS1ibG9jazttYXgtd2lkdGg6MTAwJTt2ZXJ0aWNhbC1hbGlnbjptaWRkbGV9W2hpZGRlbl17ZGlzcGxheTpub25lfWhlYWQsbGluayxtZXRhLHNjcmlwdCxzdHlsZSx0ZW1wbGF0ZSx0aXRsZXtkaXNwbGF5Om5vbmV9YVtocmVmXSxidXR0b24sbGFiZWxbZm9yXSxzZWxlY3R7Y3Vyc29yOnBvaW50ZXJ9dGFibGV7Ym9yZGVyLWNvbGxhcHNlOmNvbGxhcHNlO2JvcmRlci1zcGFjaW5nOjA7dGV4dC1pbmRlbnQ6MH10YWJsZSx0Ym9keSx0ZCx0aCx0aGVhZCx0cntmb250LXNpemU6MTAwJTtmb250OmluaGVyaXQ7bWFyZ2luOjA7cGFkZGluZzowO2JvcmRlcjowO3ZlcnRpY2FsLWFsaWduOmJhc2VsaW5lfQ==");</style>
-```
-
 
 ## Mixins
 
@@ -141,21 +121,12 @@ HTML snippet for Web Component integration
 | acModeContrast     | @include acModeContrast;     | Contrast Mode with Inverted colors                |
 | meterReset         | @include meterReset;         | Styles reset for ```<meter>```                    |
 | progressReset      | @include progressReset;      | Styles reset for ```<progress>```                 |
+| inputColorReset    | @include inputColorReset;    | Rest for input type:color                         |
 
 ## Technical Files
 
 - Compressed CSS version: /build/reset.css
-- Test Page: /test/index.html
-
-## Related Projects
-
-I created this and some additional services for [html-base](https://www.npmjs.com/package/html-base) to improve quality of frontend output. Here is the list:
-
-- [scss-mixins-npm](https://www.npmjs.com/package/scss-mixins-npm)
-- [html-test](https://www.npmjs.com/package/html-test)
-- [mobile-friendly-test-npm](https://www.npmjs.com/package/mobile-friendly-test-npm)
-- [html-speed](https://www.npmjs.com/package/html-speed)
-- [css-test-npm](https://www.npmjs.com/package/css-test-npm)
+- Test Pages List: /test/index.html
 
 ## Contributing
 

_total-reset.scss

@@ -98,6 +98,7 @@ main,
 article,
 aside,
 details,
+fieldset,
 figcaption,
 figure,
 footer,
@@ -173,3 +174,64 @@ td {
   border: 0;
   vertical-align: baseline;
 }
+
+/**
+ * Forms
+ */
+input {
+  appearance: none;
+  display: inline-block;
+}
+
+input[type="color"] {
+  width: 15px;
+  height: 15px;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+}
+
+input:required,
+input {
+  box-shadow: none;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px white inset;
+}
+
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+input[type=search] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+}
+
+input {
+  &:focus {
+    outline: none;
+  }
+}