source: trip-planner-front/node_modules/postcss-logical/README.md

Last change on this file was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 6.1 KB
Line 
1# PostCSS Logical Properties and Values [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
2
3[![NPM Version][npm-img]][npm-url]
4[![CSS Standard Status][css-img]][css-url]
5[![Build Status][cli-img]][cli-url]
6[![Support Chat][git-img]][git-url]
7
8[PostCSS Logical Properties and Values] lets you use logical, rather than
9physical, direction and dimension mappings in CSS, following the
10[CSS Logical Properties and Values] specification.
11
12```pcss
13.banner {
14 color: #222222;
15 inset: logical 0 5px 10px;
16 padding-inline: 20px 40px;
17 resize: block;
18 transition: color 200ms;
19}
20
21/* becomes */
22
23.banner:dir(ltr) {
24 padding-left: 20px; padding-right: 40px;
25}
26
27.banner:dir(rtl) {
28 padding-right: 20px; padding-left: 40px;
29}
30
31.banner {
32 resize: vertical;
33 transition: color 200ms;
34}
35
36/* or, when used with { dir: 'ltr' } */
37
38.banner {
39 color: #222222;
40 top: 0; left: 5px; bottom: 10px; right: 5px;
41 padding-left: 20px; padding-right: 40px;
42 resize: vertical;
43 transition: color 200ms;
44}
45
46/* or, when used with { preserve: true } */
47
48.banner:dir(ltr) {
49 padding-left: 20px; padding-right: 40px;
50}
51
52.banner:dir(rtl) {
53 padding-right: 20px; padding-left: 40px;
54}
55
56.banner {
57 color: #222222;
58 top: 0; left: 5px; bottom: 10px; right: 5px;
59 inset: logical 0 5px 10px;
60 padding-inline: 20px 40px;
61 resize: block;
62 resize: vertical;
63 transition: color 200ms;
64}
65```
66
67These shorthand properties set values for physical properties by default.
68Specifying the `logical` keyboard at the beginning of the property value will
69transform the flow-relative values afterward into both physical LTR and RTL
70properties:
71
72#### Logical Borders
73
74- `border`, `border-block`, `border-block-start`, `border-block-end`,
75 `border-inline`, `border-inline-start`, `border-inline-end`, `border-start`,
76 `border-end`, `border-color`, `border-block-color`,
77 `border-block-start-color`, `border-block-end-color`, `border-inline-color`,
78 `border-inline-start-color`, `border-inline-end-color`, `border-start-color`,
79 `border-end-color`, `border-style`, `border-block-style`,
80 `border-block-start-style`, `border-block-end-style`, `border-inline-style`,
81 `border-inline-start-style`, `border-inline-end-style`, `border-start-style`,
82 `border-end-style`, `border-width`, `border-block-width`,
83 `border-block-start-width`, `border-block-end-width`, `border-inline-width`,
84 `border-inline-start-width`, `border-inline-end-width`, `border-start-width`,
85 `border-end-width`
86
87#### Logical Offsets
88
89- `inset`, `inset-block`, `inset-block-start`, `inset-block-end`,
90 `inset-inline`, `inset-inline-start`, `inset-inline-end`, `inset-start`,
91 `inset-end`
92
93#### Logical Margins
94
95- `margin`, `margin-block`, `margin-block-start`, `margin-block-end`,
96 `margin-inline`, `margin-inline-start`, `margin-inline-end`, `margin-start`,
97 `margin-end`
98
99#### Logical Paddings
100
101- `padding`, `padding-block`, `padding-block-start`, `padding-block-end`,
102 `padding-inline`, `padding-inline-start`, `padding-inline-end`,
103 `padding-start`, `padding-end`
104
105#### Logical Sizes
106
107- `block-size`, `inline-size`
108
109#### Flow-Relative Values
110
111- `clear: inline-start`, `clear: inline-end`, `float: inline-start`,
112 `float: inline-end`, `text-align: start`, `text-align: end`
113
114---
115
116By default, [PostCSS Logical Properties and Values] creates fallback selectors
117which require at least one `[dir]` attribute in your HTML. If you don’t have
118any `[dir]` attributes, consider using the following JavaScript:
119
120```js
121// force at least one dir attribute (this can run at any time)
122document.documentElement.dir=document.documentElement.dir||'ltr';
123```
124
125Otherwise, consider using the `dir` option to transform all logical properties
126and values to a specific direction.
127
128```js
129require('postcss-logical')({
130 dir: 'ltr'
131});
132```
133
134## Usage
135
136Add [PostCSS Logical Properties and Values] to your project:
137
138```bash
139npm install postcss-logical --save-dev
140```
141
142Use [PostCSS Logical Properties and Values] to process your CSS:
143
144```js
145const postcssLogical = require('postcss-logical');
146
147postcssLogical.process(YOUR_CSS /*, processOptions, pluginOptions */);
148```
149
150Or use it as a [PostCSS] plugin:
151
152```js
153const postcss = require('postcss');
154const postcssLogical = require('postcss-logical');
155
156postcss([
157 postcssLogical(/* pluginOptions */)
158]).process(YOUR_CSS /*, processOptions */);
159```
160
161[PostCSS Logical Properties and Values] runs in all Node environments, with
162special instructions for:
163
164| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
165| --- | --- | --- | --- | --- | --- |
166
167## Options
168
169### dir
170
171The `dir` option determines how directional fallbacks should be added to CSS.
172By default, fallbacks replace the logical declaration with nested `:dir`
173pseudo-classes. If `dir` is defined as `ltr` or `rtl` then only the left or
174right directional fallbacks will replace the logical declarations. If
175`preserve` is defined as `true`, then the `dir` option will be ignored.
176
177### preserve
178
179The `preserve` option determines whether directional fallbacks should be added
180before logical declarations without replacing them. By default, directional
181fallbacks replace logical declaration. If `preserve` is defined as `true`, then
182the `dir` option will be ignored.
183
184[css-img]: https://cssdb.org/badge/logical-properties-and-values.svg
185[css-url]: https://cssdb.org/#logical-properties-and-values
186[cli-img]: https://img.shields.io/travis/jonathantneal/postcss-logical.svg
187[cli-url]: https://travis-ci.org/jonathantneal/postcss-logical
188[git-img]: https://img.shields.io/badge/support-chat-blue.svg
189[git-url]: https://gitter.im/postcss/postcss
190[npm-img]: https://img.shields.io/npm/v/postcss-logical.svg
191[npm-url]: https://www.npmjs.com/package/postcss-logical
192
193[CSS Logical Properties and Values]: https://drafts.csswg.org/css-logical/
194[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
195[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
196[PostCSS]: https://github.com/postcss/postcss
197[PostCSS Loader]: https://github.com/postcss/postcss-loader
198[PostCSS Logical Properties and Values]: https://github.com/jonathantneal/postcss-logical
Note: See TracBrowser for help on using the repository browser.