custom-checkbox-radio-scss - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

package.json

		{
		"name": "custom-checkbox-radio-scss",
		"version": "2.0.0",
		"version": "2.0.1",
		"description": "SCSS based custom checkboxes and radios; a no-JS solution.",
		@@ -5,0 +5,0 @@ "main": "index.scss",

README.md

		@@ -25,30 +25,45 @@ # Custom Checkbox Radio SCSS

		NOTE THIS IS WRONG AND NEEDS UPDATING.::::
		````scss
		@use 'custom-checkbox-radio-scss' as ccr;
		.checkbox {
		@include ccr.checkbox;
		}
		.radio {
		@include ccr.radio;
		}
		```

		```html
		<fieldset>
		<legend>Checkboxes</legend>
		<p class="checkbox">
		<input type="checkbox" name="lorem-1" id="lorem-1" />
		<label for="lorem-1">Lorem</label>
		</p>
		<p class="checkbox">
		<input type="checkbox" name="lorem-2" id="lorem-2" />
		<label for="lorem-2">Ipsum</label>
		</p>
		</fieldset>
		```jsx

		<fieldset>
		<legend>Radios</legend>
		<p class="radio">
		<input type="radio" name="ipsum" id="ipsum-1" checked />
		<label for="ipsum-1">Lorem</label>
		</p>
		<p class="radio">
		<input type="radio" name="ipsum" id="ipsum-2" />
		<label for="ipsum-2">Ipsum</label>
		</p>
		</fieldset>
		```
		import formControlStyles from "../formControl.module.scss";

		() => (
		<>
		<fieldset>
		<legend>Checkboxes</legend>
		<p className="{formControlStyles.checkbox}">
		<input type="checkbox" name="lorem-1" id="lorem-1" />
		<label htmlFor="lorem-1">Lorem</label>
		</p>
		<p className="{formControlStyles.checkbox}">
		<input type="checkbox" name="lorem-2" id="lorem-2" checked />
		<label htmlFor="lorem-2">Ipsum</label>
		</p>
		</fieldset>

		<fieldset>
		<legend>Radios</legend>
		<p className="{formControlStyles.radio}">
		<input type="radio" name="ipsum" id="ipsum-1" />
		<label htmlFor="ipsum-1">Lorem</label>
		</p>
		<p className="{formControlStyles.radio}">
		<input type="radio" name="ipsum" id="ipsum-2" checked />
		<label htmlFor="ipsum-2">Ipsum</label>
		</p>
		</fieldset>
		</>
		);
		````

		## Customise
		@@ -55,0 +70,0 @@

custom-checkbox-radio-scss - npm Package Compare versions

Improved metrics