sass-direction - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

LICENSE.md

package.json

		{
		"name": "sass-direction",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "Sass mixins and functions to help creating bi-directional stylesheets.",
		@@ -11,2 +11,13 @@ "keywords": [
		],
		"ignore": [
		"*/.",
		"sache.json",
		"bower.json"
		],
		"files": [
		"_direction.scss",
		"LICENSE.md",
		"README.md"
		],
		"main": "_direction.scss",
		"homepage": "https://github.com/pierreburel/sass-direction",
		@@ -13,0 +24,0 @@ "bugs": {

README.md

		@@ -29,4 +29,82 @@ # Direction

		Coming soon!
		### `app.scss`

		```scss
		@import "direction";

		h1 {
		text-align: direction(left);
		margin-#{direction(right)}: 1em;
		padding: direction-sides(1em 2em 3em 4em);
		border: direction-corners(1em 2em 3em 4em);
		font-size: direction-if(ltr, 1em, 2em);
		line-height: direction-if(rtl, 2);

		@include direction-if(ltr) {
		&::before {
		content: "left to right";
		}
		}

		@include direction-if(rtl) {
		&::after {
		content: "right to left";
		}
		}
		}
		```

		### `app-rtl.scss`

		```scss
		$direction: rtl;
		@import "app";
		```

		---

		## Result

		### `app.css`

		```css
		h1 {
		text-align: left;
		margin-right: 1em;
		padding: 1em 2em 3em 4em;
		border: 1em 2em 3em 4em;
		font-size: 1em;
		}

		h1::before {
		content: "left to right";
		}
		```

		### `app-rtl.css`

		```css
		h1 {
		text-align: right;
		margin-left: 1em;
		padding: 1em 4em 3em 2em;
		border: 2em 1em 4em 3em;
		font-size: 2em;
		line-height: 2;
		}

		h1::after {
		content: "right to left";
		}
		```

		---

		## Aliases

		- Function `direction-ltr($if, $else)`: `direction-if(ltr, $if, $else)`
		- Function `direction-rtl($if, $else)`: `direction-if(rtl, $if, $else)`
		- Mixin `direction-ltr`: `direction-if(ltr)`
		- Mixin `direction-rtl`: `direction-if(rtl)`

		---
		@@ -33,0 +111,0 @@

bower.json

sache.json

New alerts