shadow-scss - npm Package Compare versions

		@@ -0,2 +1,146 @@
		[npm-image]: https://img.shields.io/npm/v/shadow-scss.svg
		[npm-url]: https://npmjs.org/package/shadow-scss
		[license-image]: https://img.shields.io/github/license/n3r4zzurr0/range-slider-input.svg
		[license-url]: https://github.com/n3r4zzurr0/range-slider-input/blob/main/LICENSE

		# shadow-scss

		[![npm][npm-image]][npm-url] [![license][license-image]][license-url]

		A set of two Sass functions (`box-shadow()` and `text-shadow()`) to write multiple shadows.

		[Examples](https://n3r4zzurr0.in/shadow-scss/)

		## Installation

		With npm,
		```
		npm install shadow-scss
		```
		or just copy the content of the [`_shadow.scss`](https://raw.githubusercontent.com/n3r4zzurr0/shadow-scss/main/_shadow.scss) file into your Sass directory.

		## Usage

		With npm,
		```
		@import "shadow-scss";
		```
		or just `@import` the `_shadow.scss` partial into your Sass project.

		`box-shadow()`

		```scss
		box-shadow: box-shadow(
		$color: #000,
		$step: 2px,
		$count: 10
		)
		```

		`text-shadow()`

		```scss
		text-shadow: text-shadow(
		$color: #ccc,
		$stepX: -.5px,
		$stepY: .5px,
		$count: 50
		)
		```

		## Options

		For `$x`, `$y`, `$blur-radius`, `$spread-radius`, `$color`, `$step`, `$stepX` and `$stepY`, custom functions can also be passed through, when writing multiple shadows. These functions are called with 2 parameters (`$i` and `$count`) and can be defined as,

		```scss
		@function func-name($i, $count) {
		@return calc($i / $count) * 5px;
		}
		```

		where `$i` denotes the nth shadow and `$count` is the total number of shadows which was initially defined.

		<table>
		<tr>
		<th>Parameter</th>
		<th><code>box-shadow()</code></th>
		<th><code>text-shadow()</code></th>
		<th>Default Value</th>
		<th>Description</th>
		</tr>
		<tr>
		<td><code>$inset</code></td>
		<td>☑</td>
		<td>☒</td>
		<td><code>false</code></td>
		<td>Boolean value that specifies if the <code>inset</code> keyword is to be included or not.</td>
		</tr>
		<tr>
		<td><code>$x</code></td>
		<td>☑</td>
		<td>☑</td>
		<td><code>0</code></td>
		<td>Number or Function that specifies the horizontal distance. </td>
		</tr>
		<tr>
		<td><code>$y</code></td>
		<td>☑</td>
		<td>☑</td>
		<td><code>0</code></td>
		<td>Number or Function that specifies the vertical distance. </td>
		</tr>
		<tr>
		<td><code>$blur-radius</code></td>
		<td>☑</td>
		<td>☑</td>
		<td><code>0</code></td>
		<td>Number or Function that specifies the blur amount.</td>
		</tr>
		<tr>
		<td><code>$spread-radius</code></td>
		<td>☑</td>
		<td>☒</td>
		<td><code>0</code></td>
		<td>Number or Function that specifies the spread amount.</td>
		</tr>
		<tr>
		<td><code>$color</code></td>
		<td>☑</td>
		<td>☑</td>
		<td><code>#000</code></td>
		<td>Color or Function that specifies the color.</td>
		</tr>
		<tr>
		<td><code>$step</code></td>
		<td>☑</td>
		<td>☑</td>
		<td><code>0</code></td>
		<td>Number or Function that specifies the horizontal and the vertical difference between the distances of the shadows.</td>
		</tr>
		<tr>
		<td><code>$stepX</code></td>
		<td>☑</td>
		<td>☑</td>
		<td><code>null</code></td>
		<td>Number or Function that specifies the horizontal difference between the distances of the shadows.<br/><br/>If its value is <code>null</code> (default), the value of <code>$step</code> is used.</td>
		</tr>
		<tr>
		<td><code>$stepY</code></td>
		<td>☑</td>
		<td>☑</td>
		<td><code>null</code></td>
		<td>Number or Function that specifies the vertical difference between the distances of the shadows.<br/><br/>If its value is <code>null</code> (default), the value of <code>$step</code> is used.</td>
		</tr>
		<tr>
		<td><code>$count</code></td>
		<td>☑</td>
		<td>☑</td>
		<td><code>1</code></td>
		<td>Number that specifies the number of shadows to be written.</td>
		</tr>
		</table>

		Refer to the MDN Web Docs for [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#values) and [`text-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow#values) for a better understanding of the native parameters.

		## License

		MIT © [Utkarsh Verma](https://github.com/n3r4zzurr0)

_shadow.scss

Sorry, the diff of this file is not supported yet

Improved metrics