mirror of
https://github.com/gtbu/Typesetter-5.3-p8.git
synced 2024-11-21 21:59:12 +01:00
update css-crush 4.13 for php8.2
This commit is contained in:
parent
09589e3646
commit
0755591d8d
40 changed files with 3195 additions and 8 deletions
29
include/thirdparty/css-crush/.github/workflows/php.yml
vendored
Normal file
29
include/thirdparty/css-crush/.github/workflows/php.yml
vendored
Normal file
|
@ -0,0 +1,29 @@
|
|||
name: CI
|
||||
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
|
||||
- name: Validate composer.json and composer.lock
|
||||
run: composer validate --strict
|
||||
|
||||
- name: Cache Composer packages
|
||||
id: composer-cache
|
||||
uses: actions/cache@v2
|
||||
with:
|
||||
path: vendor
|
||||
key: ${{ runner.os }}-php-${{ hashFiles('**/composer.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-php-
|
||||
|
||||
- name: Install dependencies
|
||||
run: composer install --prefer-dist --no-progress
|
||||
|
||||
- name: Run test suite
|
||||
run: composer run-script test
|
36
include/thirdparty/css-crush/composer.json
vendored
Normal file
36
include/thirdparty/css-crush/composer.json
vendored
Normal file
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "css-crush/css-crush",
|
||||
"type": "library",
|
||||
"description": "CSS preprocessor",
|
||||
"keywords": ["css", "preprocessor"],
|
||||
"homepage": "http://the-echoplex.net/csscrush",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"test": "vendor/bin/phpunit tests"
|
||||
},
|
||||
"authors": [
|
||||
{
|
||||
"name": "Pete Boere",
|
||||
"email": "pete@the-echoplex.net"
|
||||
},
|
||||
{
|
||||
"name": "GitHub contributors",
|
||||
"homepage": "https://github.com/peteboere/css-crush/contributors"
|
||||
}
|
||||
],
|
||||
"require": {
|
||||
"php": ">=7.1"
|
||||
},
|
||||
"require-dev": {
|
||||
"phpunit/phpunit": "8.*",
|
||||
"psr/log": "1.0.*@dev",
|
||||
"twig/twig": "1.*"
|
||||
},
|
||||
"bin": [
|
||||
"bin/csscrush"
|
||||
],
|
||||
"autoload": {
|
||||
"psr-0": { "CssCrush": "lib/" },
|
||||
"files": [ "lib/functions.php" ]
|
||||
}
|
||||
}
|
3
include/thirdparty/css-crush/docs/README.md
vendored
Normal file
3
include/thirdparty/css-crush/docs/README.md
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
# CSS-Crush Documentation
|
||||
|
||||
Rendered online at http://the-echoplex.net/csscrush
|
84
include/thirdparty/css-crush/docs/api/functions.md
vendored
Normal file
84
include/thirdparty/css-crush/docs/api/functions.md
vendored
Normal file
|
@ -0,0 +1,84 @@
|
|||
<!--{
|
||||
|
||||
"title": "API functions"
|
||||
|
||||
}-->
|
||||
|
||||
## csscrush_file()
|
||||
|
||||
Process CSS file and return the compiled file URL.
|
||||
|
||||
<code>csscrush_file( string $file [, array [$options](#api--options) ] )</code>
|
||||
|
||||
|
||||
***************
|
||||
|
||||
## csscrush_tag()
|
||||
|
||||
Process CSS file and return an html `link` tag with populated href.
|
||||
|
||||
<code>csscrush_tag( string $file [, array [$options](#api--options) [, array $tag\_attributes ]] )</code>
|
||||
|
||||
|
||||
***************
|
||||
|
||||
## csscrush_inline()
|
||||
|
||||
Process CSS file and return CSS as text wrapped in html `style` tags.
|
||||
|
||||
<code>csscrush_inline( string $file [, array [$options](#api--options) [, array $tag\_attributes ]] )</code>
|
||||
|
||||
|
||||
***************
|
||||
|
||||
## csscrush_string()
|
||||
|
||||
Compile a raw string of CSS string and return it.
|
||||
|
||||
<code>csscrush_string( string $string [, array [$options](#api--options) ] )</code>
|
||||
|
||||
|
||||
***************
|
||||
|
||||
## csscrush_get()
|
||||
|
||||
Retrieve a config setting or option default.
|
||||
|
||||
`csscrush_get( string $object_name, string $property )`
|
||||
|
||||
### Parameters
|
||||
|
||||
* `$object_name` Name of object you want to inspect: 'config' or 'options'.
|
||||
* `$property`
|
||||
|
||||
|
||||
***************
|
||||
|
||||
## csscrush_set()
|
||||
|
||||
Set a config setting or option default.
|
||||
|
||||
`csscrush_set( string $object_name, mixed $settings )`
|
||||
|
||||
### Parameters
|
||||
|
||||
* `$object_name` Name of object you want to modify: 'config' or 'options'.
|
||||
* `$settings` Associative array of keys and values to set, or callable which argument is the object specified in `$object_name`.
|
||||
|
||||
|
||||
***************
|
||||
|
||||
## csscrush_plugin()
|
||||
|
||||
Register a plugin.
|
||||
|
||||
`csscrush_plugin( string $name, callable $callback )`
|
||||
|
||||
|
||||
***************
|
||||
|
||||
## csscrush_stat()
|
||||
|
||||
Get compilation stats from the most recent compiled file.
|
||||
|
||||
`csscrush_stat()`
|
103
include/thirdparty/css-crush/docs/api/options.md
vendored
Normal file
103
include/thirdparty/css-crush/docs/api/options.md
vendored
Normal file
|
@ -0,0 +1,103 @@
|
|||
<!--{
|
||||
|
||||
"title": "Options"
|
||||
|
||||
}-->
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th class="option">Option
|
||||
<th class="values">Values (default in bold)
|
||||
<th>Description
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">minify
|
||||
<td class="values"><b>true</b> | false | Array
|
||||
<td>Enable or disable minification. Optionally specify an array of advanced minification parameters. Currently the only advanced option is 'colors', which will compress all color values in any notation.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">formatter
|
||||
<td class="values"><b>block</b> | single-line | padded
|
||||
<td>Set the formatting mode. Overrides minify option if both are set.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">newlines
|
||||
<td class="values"><b>use-platform</b> | windows/win | unix
|
||||
<td>Set the output style of newlines
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">boilerplate
|
||||
<td class="values"><b>true</b> | false | Path
|
||||
<td>Prepend a boilerplate to the output file
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">versioning
|
||||
<td class="values"><b>true</b> | false
|
||||
<td>Append a timestamped querystring to the output filename
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">vars
|
||||
<td class="values">Array
|
||||
<td>An associative array of CSS variables to be applied at runtime. These will override variables declared globally or in the CSS.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">cache
|
||||
<td class="values"><b>true</b> | false
|
||||
<td>Turn caching on or off.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">output_dir
|
||||
<td class="values">Path
|
||||
<td>Specify an output directory for compiled files. Defaults to the same directory as the host file.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">output_file
|
||||
<td class="values">Output filename
|
||||
<td>Specify an output filename (suffix is added).
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">asset_dir
|
||||
<td class="values">Path
|
||||
<td>Directory for SVG and image files generated by plugins (defaults to the main file output directory).
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">stat_dump
|
||||
<td class="values"><b>false</b> | true | Path
|
||||
<td>Save compile stats and variables to a file in json format.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">vendor_target
|
||||
<td class="values"><b>"all"</b> | "moz", "webkit", ... | Array
|
||||
<td>Limit aliasing to a specific vendor, or an array of vendors.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">rewrite_import_urls
|
||||
<td class="values"><b>true</b> | false | "absolute"
|
||||
<td>Rewrite relative URLs inside inlined imported files.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">import_paths
|
||||
<td class="values">Array
|
||||
<td>Additional paths to search when resolving relative import URLs.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">plugins
|
||||
<td class="values">Array
|
||||
<td>An array of plugin names to enable.
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">source_map
|
||||
<td class="values">true | <b>false</b>
|
||||
<td>Output a source map (compliant with the Source Map v3 proposal).
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">context
|
||||
<td class="values">Path
|
||||
<td>Context for importing resources from relative urls (Only applies to `csscrush_string()` and command line utility).
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="option">doc_root
|
||||
<td class="values">Path
|
||||
<td>Specify an alternative server document root for situations where the CSS is being served behind an alias or url rewritten path.
|
||||
</tr>
|
||||
</table>
|
44
include/thirdparty/css-crush/docs/core/abstract.md
vendored
Normal file
44
include/thirdparty/css-crush/docs/core/abstract.md
vendored
Normal file
|
@ -0,0 +1,44 @@
|
|||
<!--{
|
||||
|
||||
"title": "Abstract rules"
|
||||
|
||||
}-->
|
||||
|
||||
Abstract rules are generic rules that can be [extended](#core--inheritance) with the `@extend` directive or mixed in (without arguments) like regular [mixins](#core--mixins) with the `@include` directive.
|
||||
|
||||
```crush
|
||||
@abstract ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@abstract heading {
|
||||
font: bold 1rem serif;
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
|
||||
.foo {
|
||||
@extend ellipsis;
|
||||
display: block;
|
||||
}
|
||||
.bar {
|
||||
@extend ellipsis;
|
||||
@include heading;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.foo,
|
||||
.bar {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.foo {
|
||||
display: block;
|
||||
}
|
||||
.bar {
|
||||
font: bold 1rem serif;
|
||||
letter-spacing: .1em;
|
||||
}
|
||||
```
|
39
include/thirdparty/css-crush/docs/core/auto-prefixing.md
vendored
Normal file
39
include/thirdparty/css-crush/docs/core/auto-prefixing.md
vendored
Normal file
|
@ -0,0 +1,39 @@
|
|||
<!--{
|
||||
|
||||
"title": "Auto prefixing"
|
||||
|
||||
}-->
|
||||
|
||||
Vendor prefixes for properties, functions, @-rules and declarations are **automatically generated** – based on [trusted](http://caniuse.com) [sources](http://developer.mozilla.org/en-US/docs/CSS/CSS_Reference) – so you can maintain cross-browser support while keeping your source code clean and easy to maintain.
|
||||
|
||||
|
||||
```crush
|
||||
.foo {
|
||||
background: linear-gradient(to right, red, white);
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.foo {
|
||||
background: -webkit-linear-gradient(to right, red, white);
|
||||
background: linear-gradient(to right, red, white);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
```crush
|
||||
@keyframes bounce {
|
||||
50% { transform: scale(1.4); }
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
@-webkit-keyframes bounce {
|
||||
50% {-webkit-transform: scale(1.4);
|
||||
transform: scale(1.4);}
|
||||
}
|
||||
@keyframes bounce {
|
||||
50% {-webkit-transform: scale(1.4);
|
||||
transform: scale(1.4);}
|
||||
}
|
||||
```
|
25
include/thirdparty/css-crush/docs/core/direct-import.md
vendored
Normal file
25
include/thirdparty/css-crush/docs/core/direct-import.md
vendored
Normal file
|
@ -0,0 +1,25 @@
|
|||
<!--{
|
||||
|
||||
"title": "Direct @import"
|
||||
|
||||
}-->
|
||||
|
||||
Files referenced with the `@import` directive are inlined directly to save on http requests. Relative URL paths in the CSS are also updated if necessary.
|
||||
|
||||
If you specify a media designation following the import URL — as per the CSS standard — the imported file content is wrapped in a `@media` block.
|
||||
|
||||
|
||||
```crush
|
||||
/* Standard CSS @import statements */
|
||||
@import "print.css" print;
|
||||
@import url( "small-screen.css" ) screen and ( max-width: 500px );
|
||||
```
|
||||
|
||||
```css
|
||||
@media print {
|
||||
/* Contents of print.css */
|
||||
}
|
||||
@media screen and ( max-width: 500px ) {
|
||||
/* Contents of small-screen.css */
|
||||
}
|
||||
```
|
25
include/thirdparty/css-crush/docs/core/fragments.md
vendored
Normal file
25
include/thirdparty/css-crush/docs/core/fragments.md
vendored
Normal file
|
@ -0,0 +1,25 @@
|
|||
<!--{
|
||||
|
||||
"title": "Fragments"
|
||||
|
||||
}-->
|
||||
|
||||
Fragments – defined and invoked with the <code>@fragment</code> directive – work in a similar way to [mixins](#core--mixins), except that they work at block level:
|
||||
|
||||
```crush
|
||||
@fragment input-placeholder {
|
||||
#(1)::-webkit-input-placeholder { color: #(0); }
|
||||
#(1):-moz-placeholder { color: #(0); }
|
||||
#(1)::placeholder { color: #(0); }
|
||||
#(1).placeholder-state { color: #(0); }
|
||||
}
|
||||
|
||||
@fragment input-placeholder(#777, textarea);
|
||||
```
|
||||
|
||||
```css
|
||||
textarea::-webkit-input-placeholder { color: #777; }
|
||||
textarea:-moz-placeholder { color: #777; }
|
||||
textarea::placeholder { color: #777; }
|
||||
textarea.placeholder-state { color: #777; }
|
||||
```
|
26
include/thirdparty/css-crush/docs/core/functions/a-adjust.md
vendored
Normal file
26
include/thirdparty/css-crush/docs/core/functions/a-adjust.md
vendored
Normal file
|
@ -0,0 +1,26 @@
|
|||
<!--{
|
||||
|
||||
"title": "a-adjust()"
|
||||
|
||||
}-->
|
||||
|
||||
Manipulate the opacity (alpha channel) of a color value.
|
||||
|
||||
<code>a-adjust( *color*, *offset* )</code>
|
||||
|
||||
## Parameters
|
||||
|
||||
* *`color`* Any valid CSS color value
|
||||
* *`offset`* The percentage to offset the color opacity
|
||||
|
||||
## Returns
|
||||
|
||||
The modified color value
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
```css
|
||||
/* Reduce color opacity by 10% */
|
||||
color: a-adjust( rgb(50,50,0) -10 );
|
||||
```
|
33
include/thirdparty/css-crush/docs/core/functions/data-uri.md
vendored
Normal file
33
include/thirdparty/css-crush/docs/core/functions/data-uri.md
vendored
Normal file
|
@ -0,0 +1,33 @@
|
|||
<!--{
|
||||
|
||||
"title": "data-uri()"
|
||||
|
||||
}-->
|
||||
|
||||
Create a data-uri.
|
||||
|
||||
<code>data-uri( *url* )</code>
|
||||
|
||||
## Parameters
|
||||
|
||||
* *`url`* URL of an asset
|
||||
|
||||
`url` cannot be external, and must not be written with an http protocol prefix.
|
||||
|
||||
The following file extensions are supported: jpg, jpeg, gif, png, svg, svgz, ttf, woff
|
||||
|
||||
|
||||
## Returns
|
||||
|
||||
The created data-uri as a string inside a CSS url().
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
```crush
|
||||
background: silver data-uri(../images/stripe.png);
|
||||
```
|
||||
|
||||
```css
|
||||
background: silver url(data:<img-data>);
|
||||
```
|
24
include/thirdparty/css-crush/docs/core/functions/h-adjust.md
vendored
Normal file
24
include/thirdparty/css-crush/docs/core/functions/h-adjust.md
vendored
Normal file
|
@ -0,0 +1,24 @@
|
|||
<!--{
|
||||
|
||||
"title": "h-adjust()"
|
||||
|
||||
}-->
|
||||
|
||||
Adjust the hue of a color value.
|
||||
|
||||
<code>h-adjust( *color*, *offset* )</code>
|
||||
|
||||
## Parameters
|
||||
|
||||
* *`color`* Any valid CSS color value
|
||||
* *`offset`* The percentage to offset the color hue (percent mark optional)
|
||||
|
||||
## Returns
|
||||
|
||||
The modified color value.
|
||||
|
||||
## Examples
|
||||
|
||||
```css
|
||||
color: h-adjust( deepskyblue -10 );
|
||||
```
|
27
include/thirdparty/css-crush/docs/core/functions/hsl-adjust.md
vendored
Normal file
27
include/thirdparty/css-crush/docs/core/functions/hsl-adjust.md
vendored
Normal file
|
@ -0,0 +1,27 @@
|
|||
<!--{
|
||||
|
||||
"title": "hsl-adjust()"
|
||||
|
||||
}-->
|
||||
|
||||
Manipulate the hue, saturation and lightness of a color value
|
||||
|
||||
<code>hsl-adjust( *color*, *hue-offset*, *saturation-offset*, *lightness-offset* )</code>
|
||||
|
||||
## Parameters
|
||||
|
||||
* *`color`* Any valid CSS color value
|
||||
* *`hue-offset`* The percentage to offset the color hue
|
||||
* *`saturation-offset`* The percentage to offset the color saturation
|
||||
* *`lightness-offset`* The percentage to offset the color lightness
|
||||
|
||||
## Returns
|
||||
|
||||
The modified color value
|
||||
|
||||
## Examples
|
||||
|
||||
```css
|
||||
/* Lighten and increase saturation */
|
||||
color: hsl-adjust( red 0 5 5 );
|
||||
```
|
27
include/thirdparty/css-crush/docs/core/functions/hsla-adjust.md
vendored
Normal file
27
include/thirdparty/css-crush/docs/core/functions/hsla-adjust.md
vendored
Normal file
|
@ -0,0 +1,27 @@
|
|||
<!--{
|
||||
|
||||
"title": "hsla-adjust()"
|
||||
|
||||
}-->
|
||||
|
||||
Manipulate the hue, saturation, lightness and opacity of a color value.
|
||||
|
||||
<code>hsla-adjust( *color*, *hue-offset*, *saturation-offset*, *lightness-offset*, *alpha-offset* )</code>
|
||||
|
||||
## Parameters
|
||||
|
||||
* *`color`* Any valid CSS color value
|
||||
* *`hue-offset`* The percentage to offset the color hue
|
||||
* *`saturation-offset`* The percentage to offset the color saturation
|
||||
* *`lightness-offset`* The percentage to offset the color lightness
|
||||
* *`alpha-offset`* The percentage to offset the color opacity
|
||||
|
||||
## Returns
|
||||
|
||||
The modified color value.
|
||||
|
||||
## Examples
|
||||
|
||||
```css
|
||||
color: hsla-adjust( #f00 0 5 5 -10 );
|
||||
```
|
24
include/thirdparty/css-crush/docs/core/functions/l-adjust.md
vendored
Normal file
24
include/thirdparty/css-crush/docs/core/functions/l-adjust.md
vendored
Normal file
|
@ -0,0 +1,24 @@
|
|||
<!--{
|
||||
|
||||
"title": "l-adjust()"
|
||||
|
||||
}-->
|
||||
|
||||
Adjust the lightness of a color value.
|
||||
|
||||
<code>l-adjust( *color*, *offset* )</code>
|
||||
|
||||
## Parameters
|
||||
|
||||
* *`color`* Any valid CSS color value
|
||||
* *`offset`* The percentage to offset the color hue (percent mark optional)
|
||||
|
||||
## Returns
|
||||
|
||||
The modified color value.
|
||||
|
||||
## Examples
|
||||
|
||||
```css
|
||||
color: l-adjust( deepskyblue 10 );
|
||||
```
|
19
include/thirdparty/css-crush/docs/core/functions/math.md
vendored
Normal file
19
include/thirdparty/css-crush/docs/core/functions/math.md
vendored
Normal file
|
@ -0,0 +1,19 @@
|
|||
<!--{
|
||||
|
||||
"title": "math()"
|
||||
|
||||
}-->
|
||||
|
||||
Evaluate a raw mathematical expression.
|
||||
|
||||
<code>math( *expression* [, *unit*] )</code>
|
||||
|
||||
## Examples
|
||||
|
||||
```crush
|
||||
font-size: math( 12 / 16, em );
|
||||
```
|
||||
|
||||
```css
|
||||
font-size: 0.75em;
|
||||
```
|
54
include/thirdparty/css-crush/docs/core/functions/query.md
vendored
Normal file
54
include/thirdparty/css-crush/docs/core/functions/query.md
vendored
Normal file
|
@ -0,0 +1,54 @@
|
|||
<!--{
|
||||
|
||||
"title": "query()"
|
||||
|
||||
}-->
|
||||
|
||||
Copy a value from another rule.
|
||||
|
||||
<code>query( *target* [, *property-name* = default] [, *fallback*] )</code>
|
||||
|
||||
## Parameters
|
||||
|
||||
* *`target`* A rule selector, an abstract rule name or context keyword: `previous`, `next` (also `parent` and `top` within nested structures)
|
||||
* *`property-name`* The CSS property name to copy, or just `default` to pass over. Defaults to the calling property
|
||||
* *`fallback`* A CSS value to use if the target property does not exist
|
||||
|
||||
|
||||
## Returns
|
||||
|
||||
The referenced property value, or the fallback if it has not been set.
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
```css
|
||||
.foo {
|
||||
width: 40em;
|
||||
height: 100em;
|
||||
}
|
||||
|
||||
.bar {
|
||||
width: query( .foo ); /* 40em */
|
||||
margin-top: query( .foo, height ); /* 100em */
|
||||
margin-bottom: query( .foo, default, 3em ); /* 3em */
|
||||
}
|
||||
```
|
||||
|
||||
Using context keywords:
|
||||
|
||||
```css
|
||||
.foo {
|
||||
width: 40em;
|
||||
.bar {
|
||||
width: 30em;
|
||||
.baz: {
|
||||
width: query( parent ); /* 30em */
|
||||
.qux {
|
||||
width: query( top ); /* 40em */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
25
include/thirdparty/css-crush/docs/core/functions/s-adjust.md
vendored
Normal file
25
include/thirdparty/css-crush/docs/core/functions/s-adjust.md
vendored
Normal file
|
@ -0,0 +1,25 @@
|
|||
<!--{
|
||||
|
||||
"title": "s-adjust()"
|
||||
|
||||
}-->
|
||||
|
||||
Adjust the saturation of a color value.
|
||||
|
||||
<code>s-adjust( *color*, *offset* )</code>
|
||||
|
||||
## Parameters
|
||||
|
||||
* *`color`* Any valid CSS color value
|
||||
* *`offset`* The percentage to offset the color hue (percent mark optional)
|
||||
|
||||
## Returns
|
||||
|
||||
The modified color value.
|
||||
|
||||
## Examples
|
||||
|
||||
```css
|
||||
/* Desaturate */
|
||||
color: s-adjust( deepskyblue -100 );
|
||||
```
|
39
include/thirdparty/css-crush/docs/core/functions/this.md
vendored
Normal file
39
include/thirdparty/css-crush/docs/core/functions/this.md
vendored
Normal file
|
@ -0,0 +1,39 @@
|
|||
<!--{
|
||||
|
||||
"title": "this()"
|
||||
|
||||
}-->
|
||||
|
||||
Reference another property value from the same containing block.
|
||||
|
||||
Restricted to referencing properties that don't already reference other properties.
|
||||
|
||||
<code>this( *property-name*, *fallback* )</code>
|
||||
|
||||
## Parameters
|
||||
|
||||
* *`property-name`* Property name
|
||||
* *`fallback`* A CSS value
|
||||
|
||||
## Returns
|
||||
|
||||
The referenced property value, or the fallback if it has not been set.
|
||||
|
||||
## Examples
|
||||
|
||||
```css
|
||||
.foo {
|
||||
width: this( height );
|
||||
height: 100em;
|
||||
}
|
||||
```
|
||||
|
||||
********
|
||||
|
||||
```css
|
||||
/* The following both fail because they create circular references. */
|
||||
.bar {
|
||||
height: this( width );
|
||||
width: this( height );
|
||||
}
|
||||
```
|
127
include/thirdparty/css-crush/docs/core/inheritance.md
vendored
Normal file
127
include/thirdparty/css-crush/docs/core/inheritance.md
vendored
Normal file
|
@ -0,0 +1,127 @@
|
|||
<!--{
|
||||
|
||||
"title": "Rule inheritance"
|
||||
|
||||
}-->
|
||||
|
||||
By using the `@extend` directive and passing it a named ruleset or selector from any other rule you can share styles more effectively across a stylesheet.
|
||||
|
||||
[Abstract rules](#core--abstract) can be used if you just need to extend a generic set of declarations.
|
||||
|
||||
```crush
|
||||
.negative-text {
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.sidebar-headline {
|
||||
@extend .negative-text;
|
||||
background: url( headline.png ) no-repeat;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.negative-text,
|
||||
.sidebar-headline {
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
.sidebar-headline {
|
||||
background: url( headline.png ) no-repeat;
|
||||
}
|
||||
```
|
||||
|
||||
Inheritance is recursive:
|
||||
|
||||
```crush
|
||||
.one { color: pink; }
|
||||
.two { @extend .one; }
|
||||
.three { @extend .two; }
|
||||
.four { @extend .three; }
|
||||
```
|
||||
|
||||
```css
|
||||
.one, .two, .three, .four { color: pink; }
|
||||
```
|
||||
|
||||
## Referencing by name
|
||||
|
||||
If you want to reference a rule without being concerned about later changes to the identifying selector use the `@name` directive:
|
||||
|
||||
```crush
|
||||
.foo123 {
|
||||
@name foo;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bar {
|
||||
@include foo;
|
||||
}
|
||||
.baz {
|
||||
@extend foo;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Extending with pseudo classes/elements
|
||||
|
||||
`@extend` arguments can adopt pseudo classes/elements by appending an exclamation mark:
|
||||
|
||||
```crush
|
||||
.link-base {
|
||||
color: #bada55;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.link-base:hover,
|
||||
.link-base:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-footer {
|
||||
@extend .link-base, .link-base:hover!, .link-base:focus!;
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.link-base,
|
||||
.link-footer {
|
||||
color: #bada55;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link-base:hover,
|
||||
.link-base:focus,
|
||||
.link-footer:hover,
|
||||
.link-footer:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-footer {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
The same outcome can also be achieved with an [Abstract rule](#core--abstract) wrapper to simplify repeated use:
|
||||
|
||||
```crush
|
||||
.link-base {
|
||||
color: #bada55;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.link-base:hover,
|
||||
.link-base:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@abstract link-base {
|
||||
@extend .link-base, .link-base:hover!, .link-base:focus!;
|
||||
}
|
||||
|
||||
.link-footer {
|
||||
@extend link-base;
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
41
include/thirdparty/css-crush/docs/core/loop.md
vendored
Normal file
41
include/thirdparty/css-crush/docs/core/loop.md
vendored
Normal file
|
@ -0,0 +1,41 @@
|
|||
<!--{
|
||||
|
||||
"title": "Loops"
|
||||
|
||||
}-->
|
||||
|
||||
For...in loops with lists and generator functions.
|
||||
|
||||
```crush
|
||||
@for fruit in apple, orange, pear {
|
||||
.#(fruit) {
|
||||
background-image: url("images/#(fruit).jpg");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.apple { background-image: url(images/apple.jpg); }
|
||||
.orange { background-image: url(images/orange.jpg); }
|
||||
.pear { background-image: url(images/pear.jpg); }
|
||||
```
|
||||
|
||||
```crush
|
||||
@for base in range(2, 24) {
|
||||
@for i in range(1, #(base)) {
|
||||
.grid-#(i)-of-#(base) {
|
||||
width: math(#(i) / #(base) * 100, %);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.grid-1-of-2 { width: 50%; }
|
||||
.grid-2-of-2 { width: 100%; }
|
||||
/*
|
||||
Intermediate steps ommited.
|
||||
*/
|
||||
.grid-23-of-24 { width: 95.83333%; }
|
||||
.grid-24-of-24 { width: 100%; }
|
||||
```
|
95
include/thirdparty/css-crush/docs/core/mixins.md
vendored
Normal file
95
include/thirdparty/css-crush/docs/core/mixins.md
vendored
Normal file
|
@ -0,0 +1,95 @@
|
|||
<!--{
|
||||
|
||||
"title": "Mixins"
|
||||
|
||||
}-->
|
||||
|
||||
Mixins make reusing small snippets of CSS much simpler. You define them with the `@mixin` directive.
|
||||
|
||||
Positional arguments via the argument function `#()` extend the capability of mixins for repurposing in different contexts.
|
||||
|
||||
```crush
|
||||
@mixin display-font {
|
||||
font-family: "Arial Black", sans-serif;
|
||||
font-size: #(0);
|
||||
letter-spacing: #(1);
|
||||
}
|
||||
|
||||
/* Another mixin with default arguments */
|
||||
@mixin blue-theme {
|
||||
color: #(0 navy);
|
||||
background-image: url("images/#(1 cross-hatch).png");
|
||||
}
|
||||
|
||||
/* Applying the mixins */
|
||||
.foo {
|
||||
@include display-font(100%, .1em), blue-theme;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.foo {
|
||||
font-family: "Arial Black", sans-serif;
|
||||
font-size: 100%;
|
||||
letter-spacing: .1em;
|
||||
color: navy;
|
||||
background-image: url("images/cross-hatch.png");
|
||||
}
|
||||
```
|
||||
|
||||
## Skipping arguments
|
||||
|
||||
Mixin arguments can be skipped by using the **default** keyword:
|
||||
|
||||
```crush
|
||||
@mixin display-font {
|
||||
font-size: #(0 100%);
|
||||
letter-spacing: #(1);
|
||||
}
|
||||
|
||||
/* Applying the mixin skipping the first argument so the
|
||||
default value is used instead */
|
||||
#foo {
|
||||
@include display-font(default, .3em);
|
||||
}
|
||||
```
|
||||
|
||||
Sometimes you may need to use the same positional argument more than once. In this case the default value only needs to be specified once:
|
||||
|
||||
```crush
|
||||
@mixin square {
|
||||
width: #(0 10px);
|
||||
height: #(0);
|
||||
}
|
||||
|
||||
.foo {
|
||||
@include square;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
#foo {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Mixing-in from other sources
|
||||
|
||||
Normal rules and [abstract rules](#core--abstract) can also be used as static mixins without arguments:
|
||||
|
||||
```crush
|
||||
@abstract negative-text {
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#main-content .theme-border {
|
||||
border: 1px solid maroon;
|
||||
}
|
||||
|
||||
.foo {
|
||||
@include negative-text, #main-content .theme-border;
|
||||
}
|
||||
```
|
49
include/thirdparty/css-crush/docs/core/nesting.md
vendored
Normal file
49
include/thirdparty/css-crush/docs/core/nesting.md
vendored
Normal file
|
@ -0,0 +1,49 @@
|
|||
<!--{
|
||||
|
||||
"title": "Nesting"
|
||||
|
||||
}-->
|
||||
|
||||
Rules can be nested to avoid repetitive typing when scoping to a common parent selector.
|
||||
|
||||
```crush
|
||||
.homepage {
|
||||
color: #333;
|
||||
background: white;
|
||||
.content {
|
||||
p {
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.homepage {
|
||||
color: #333;
|
||||
background: white;
|
||||
}
|
||||
.homepage .content p {
|
||||
font-size: 110%;
|
||||
}
|
||||
```
|
||||
|
||||
## Parent referencing
|
||||
|
||||
You can use the parent reference symbol `&` for placing the parent selector explicitly.
|
||||
|
||||
```crush
|
||||
.homepage {
|
||||
.no-js & {
|
||||
p {
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.no-js .homepage p {
|
||||
font-size: 110%;
|
||||
}
|
||||
```
|
80
include/thirdparty/css-crush/docs/core/selector-aliases.md
vendored
Normal file
80
include/thirdparty/css-crush/docs/core/selector-aliases.md
vendored
Normal file
|
@ -0,0 +1,80 @@
|
|||
<!--{
|
||||
|
||||
"title": "Selector aliases"
|
||||
|
||||
}-->
|
||||
|
||||
Selector aliases can be useful for grouping together common selector chains for reuse.
|
||||
|
||||
They're defined with the `@selector` directive, and can be used anywhere you might use a pseudo class.
|
||||
|
||||
|
||||
```crush
|
||||
@selector heading :any(h1, h2, h3, h4, h5, h6);
|
||||
@selector radio input[type="radio"];
|
||||
@selector hocus :any(:hover, :focus);
|
||||
|
||||
/* Selector aliases with arguments */
|
||||
@selector class-prefix :any([class^="#(0)"], [class*=" #(0)"]);
|
||||
@selector col :class-prefix(-col);
|
||||
|
||||
.sidebar :heading {
|
||||
color: honeydew;
|
||||
}
|
||||
|
||||
:radio {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
:col {
|
||||
float: left;
|
||||
}
|
||||
|
||||
p a:hocus {
|
||||
text-decoration: none;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.sidebar h1, .sidebar h2,
|
||||
.sidebar h3, .sidebar h4,
|
||||
.sidebar h5, .sidebar h6 {
|
||||
color: honeydew;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
[class^="col-"],
|
||||
[class*=" col-"] {
|
||||
border: 1px solid rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
p a:hover,
|
||||
p a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
```
|
||||
|
||||
## Selector splatting
|
||||
|
||||
Selector splats are a special kind of selector alias that expand using passed arguments.
|
||||
|
||||
```crush
|
||||
@selector-splat input input[type="#(text)"];
|
||||
|
||||
form :input(time, text, url, email, number) {
|
||||
border: 1px solid;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
form input[type="time"],
|
||||
form input[type="text"],
|
||||
form input[type="url"],
|
||||
form input[type="email"],
|
||||
form input[type="number"] {
|
||||
border: 1px solid;
|
||||
}
|
||||
```
|
22
include/thirdparty/css-crush/docs/core/selector-grouping.md
vendored
Normal file
22
include/thirdparty/css-crush/docs/core/selector-grouping.md
vendored
Normal file
|
@ -0,0 +1,22 @@
|
|||
<!--{
|
||||
|
||||
"title": "Selector grouping"
|
||||
|
||||
}-->
|
||||
|
||||
Selector grouping with the `:any` pseudo class (modelled after CSS4 :matches) simplifies the creation of complex selector chains.
|
||||
|
||||
```crush
|
||||
:any( .sidebar, .block ) a:any( :hover, :focus ) {
|
||||
color: lemonchiffon;
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.block a:hover,
|
||||
.block a:focus,
|
||||
.sidebar a:hover,
|
||||
.sidebar a:focus {
|
||||
color: lemonchiffon;
|
||||
}
|
||||
```
|
62
include/thirdparty/css-crush/docs/core/variables.md
vendored
Normal file
62
include/thirdparty/css-crush/docs/core/variables.md
vendored
Normal file
|
@ -0,0 +1,62 @@
|
|||
<!--{
|
||||
|
||||
"title": "Variables"
|
||||
|
||||
}-->
|
||||
|
||||
Declare variables in your CSS with a `@set` directive and use them with the `$()` function.
|
||||
|
||||
Variables can also be injected at runtime with the [vars option](#api--options).
|
||||
|
||||
|
||||
```crush
|
||||
/* Defining variables */
|
||||
@set {
|
||||
dark: #333;
|
||||
light: #F4F2E2;
|
||||
smaller-screen: screen and (max-width: 800px);
|
||||
}
|
||||
|
||||
/* Using variables */
|
||||
@media $(smaller-screen) {
|
||||
ul, p {
|
||||
color: $(dark);
|
||||
/* Using a fallback value with an undefined variable */
|
||||
background-color: $(accent-color, #ff0);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
*******
|
||||
|
||||
```css
|
||||
/* Interpolation */
|
||||
.username::before {
|
||||
content: "$(greeting)";
|
||||
}
|
||||
```
|
||||
|
||||
## Conditionals
|
||||
|
||||
Sections of CSS can be included and excluded on the basis of variable existence with the `@ifset` directive:
|
||||
|
||||
```crush
|
||||
@set foo #f00;
|
||||
@set bar true;
|
||||
|
||||
@ifset foo {
|
||||
p {
|
||||
color: $(foo);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
@ifset not foo {
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ifset bar(true) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
```
|
26
include/thirdparty/css-crush/docs/getting-started/js.md
vendored
Normal file
26
include/thirdparty/css-crush/docs/getting-started/js.md
vendored
Normal file
|
@ -0,0 +1,26 @@
|
|||
<!--{
|
||||
|
||||
"title": "JavaScript"
|
||||
|
||||
}-->
|
||||
|
||||
This preprocessor is written in PHP, so as prerequisite you will need to have PHP installed on your system to use the JS api.
|
||||
|
||||
```shell
|
||||
npm install csscrush
|
||||
```
|
||||
|
||||
All methods can take the standard options (camelCase) as the second argument.
|
||||
|
||||
```php
|
||||
const csscrush = require('csscrush');
|
||||
|
||||
// Compile. Returns promise.
|
||||
csscrush.file('./styles.css', {sourceMap: true});
|
||||
|
||||
// Compile string of CSS. Returns promise.
|
||||
csscrush.string('* {box-sizing: border-box;}');
|
||||
|
||||
// Compile and watch file. Returns event emitter (triggers 'data' on compile).
|
||||
csscrush.watch('./styles.css');
|
||||
```
|
17
include/thirdparty/css-crush/docs/getting-started/php.md
vendored
Normal file
17
include/thirdparty/css-crush/docs/getting-started/php.md
vendored
Normal file
|
@ -0,0 +1,17 @@
|
|||
<!--{
|
||||
|
||||
"title": "PHP"
|
||||
|
||||
}-->
|
||||
|
||||
If you're using [Composer](http://getcomposer.org) you can use Crush in your project with the following line in your terminal:
|
||||
|
||||
```shell
|
||||
composer require css-crush/css-crush
|
||||
```
|
||||
|
||||
If you're not using Composer yet just download the library ([zip](http://github.com/peteboere/css-crush/zipball/master) or [tar](http://github.com/peteboere/css-crush/tarball/master)) into a convenient location and require the bootstrap file:
|
||||
|
||||
```php
|
||||
<?php require_once 'path/to/CssCrush.php'; ?>
|
||||
```
|
21
include/thirdparty/css-crush/docs/plugins/aria.md
vendored
Normal file
21
include/thirdparty/css-crush/docs/plugins/aria.md
vendored
Normal file
|
@ -0,0 +1,21 @@
|
|||
|
||||
Pseudo classes for working with ARIA roles, states and properties.
|
||||
|
||||
* [ARIA roles spec](http://www.w3.org/TR/wai-aria/roles)
|
||||
* [ARIA states and properties spec](http://www.w3.org/TR/wai-aria/states_and_properties)
|
||||
|
||||
````crush
|
||||
:role(tablist) {...}
|
||||
:aria-expanded {...}
|
||||
:aria-expanded(false) {...}
|
||||
:aria-label {...}
|
||||
:aria-label(foobarbaz) {...}
|
||||
````
|
||||
|
||||
````css
|
||||
[role="tablist"] {...}
|
||||
[aria-expanded="true"] {...}
|
||||
[aria-expanded="false"] {...}
|
||||
[aria-label] {...}
|
||||
[aria-label="foobarbaz"] {...}
|
||||
````
|
55
include/thirdparty/css-crush/docs/plugins/canvas.md
vendored
Normal file
55
include/thirdparty/css-crush/docs/plugins/canvas.md
vendored
Normal file
|
@ -0,0 +1,55 @@
|
|||
|
||||
Bitmap image generator.
|
||||
|
||||
Requires the GD image library bundled with PHP.
|
||||
|
||||
```crush
|
||||
/* Create square semi-opaque png. */
|
||||
@canvas foo {
|
||||
width: 50;
|
||||
height: 50;
|
||||
fill: rgba(255, 0, 0, .5);
|
||||
}
|
||||
|
||||
body {
|
||||
background: white canvas(foo);
|
||||
}
|
||||
```
|
||||
|
||||
*****
|
||||
|
||||
```crush
|
||||
/* White to transparent east facing gradient with 10px
|
||||
margin and background fill. */
|
||||
@canvas horz-gradient {
|
||||
width: #(0);
|
||||
height: 150;
|
||||
fill: canvas-linear-gradient(to right, #(1 white), #(2 rgba(255,255,255,0)));
|
||||
background-fill: powderblue;
|
||||
margin: 10;
|
||||
}
|
||||
|
||||
/* Rectangle 300x150. */
|
||||
body {
|
||||
background: canvas(horz-gradient, 300);
|
||||
}
|
||||
/* Flipped gradient, using canvas-data() to generate a data URI. */
|
||||
.bar {
|
||||
background: canvas-data(horz-gradient, 100, rgba(255,255,255,0), white);
|
||||
}
|
||||
```
|
||||
|
||||
*****
|
||||
|
||||
```crush
|
||||
/* Google logo resized to 400px width and given a sepia effect. */
|
||||
@canvas sepia {
|
||||
src: url(http://www.google.com/images/logo.png);
|
||||
width: 400;
|
||||
canvas-filter: greyscale() colorize(45, 45, 0);
|
||||
}
|
||||
|
||||
.bar {
|
||||
background: canvas(sepia);
|
||||
}
|
||||
```
|
37
include/thirdparty/css-crush/docs/plugins/ease.md
vendored
Normal file
37
include/thirdparty/css-crush/docs/plugins/ease.md
vendored
Normal file
|
@ -0,0 +1,37 @@
|
|||
|
||||
Expanded easing keywords for transitions.
|
||||
|
||||
* ease-in-out-back
|
||||
* ease-in-out-circ
|
||||
* ease-in-out-expo
|
||||
* ease-in-out-sine
|
||||
* ease-in-out-quint
|
||||
* ease-in-out-quart
|
||||
* ease-in-out-cubic
|
||||
* ease-in-out-quad
|
||||
* ease-out-back
|
||||
* ease-out-circ
|
||||
* ease-out-expo
|
||||
* ease-out-sine
|
||||
* ease-out-quint
|
||||
* ease-out-quart
|
||||
* ease-out-cubic
|
||||
* ease-out-quad
|
||||
* ease-in-back
|
||||
* ease-in-circ
|
||||
* ease-in-expo
|
||||
* ease-in-sine
|
||||
* ease-in-quint
|
||||
* ease-in-quart
|
||||
* ease-in-cubic
|
||||
* ease-in-quad
|
||||
|
||||
See [easing demos](http://easings.net) for live examples.
|
||||
|
||||
```crush
|
||||
transition: .2s ease-in-quad;
|
||||
```
|
||||
|
||||
```css
|
||||
transition: .2s cubic-bezier(.550,.085,.680,.530);
|
||||
```
|
16
include/thirdparty/css-crush/docs/plugins/forms.md
vendored
Normal file
16
include/thirdparty/css-crush/docs/plugins/forms.md
vendored
Normal file
|
@ -0,0 +1,16 @@
|
|||
|
||||
Pseudo classes for working with forms.
|
||||
|
||||
```crush
|
||||
:input(date, search, email) {...}
|
||||
:checkbox {...}
|
||||
:radio {...}
|
||||
:text {...}
|
||||
```
|
||||
|
||||
```css
|
||||
input[type="date"], input[type="search"], input[type="email"] {...}
|
||||
input[type="checkbox"] {...}
|
||||
input[type="radio"] {...}
|
||||
input[type="text"] {...}
|
||||
```
|
12
include/thirdparty/css-crush/docs/plugins/hocus-pocus.md
vendored
Normal file
12
include/thirdparty/css-crush/docs/plugins/hocus-pocus.md
vendored
Normal file
|
@ -0,0 +1,12 @@
|
|||
|
||||
Composite :hover/:focus/:active pseudo classes.
|
||||
|
||||
```crush
|
||||
a:hocus { color: red; }
|
||||
a:pocus { color: red; }
|
||||
```
|
||||
|
||||
```css
|
||||
a:hover, a:focus { color: red; }
|
||||
a:hover, a:focus, a:active { color: red; }
|
||||
```
|
21
include/thirdparty/css-crush/docs/plugins/property-sorter.md
vendored
Normal file
21
include/thirdparty/css-crush/docs/plugins/property-sorter.md
vendored
Normal file
|
@ -0,0 +1,21 @@
|
|||
|
||||
Property sorting.
|
||||
|
||||
Examples use the predefined property sorting table. To define a custom sorting order pass an array to `csscrush_set_property_sort_order()`
|
||||
|
||||
|
||||
```crush
|
||||
color: red;
|
||||
background: #000;
|
||||
opacity: .5;
|
||||
display: block;
|
||||
position: absolute;
|
||||
```
|
||||
|
||||
```css
|
||||
position: absolute;
|
||||
display: block;
|
||||
opacity: .5;
|
||||
color: red;
|
||||
background: #000;
|
||||
```
|
48
include/thirdparty/css-crush/docs/plugins/svg-gradients.md
vendored
Normal file
48
include/thirdparty/css-crush/docs/plugins/svg-gradients.md
vendored
Normal file
|
@ -0,0 +1,48 @@
|
|||
|
||||
Functions for creating SVG gradients with a CSS gradient like syntax.
|
||||
|
||||
Primarily useful for supporting Internet Explorer 9.
|
||||
|
||||
## svg-linear-gradent()
|
||||
|
||||
Syntax is the same as [linear-gradient()](http://dev.w3.org/csswg/css3-images/#linear-gradient)
|
||||
|
||||
```syntax
|
||||
svg-linear-gradent( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
|
||||
```
|
||||
|
||||
### Returns
|
||||
|
||||
A base64 encoded svg data-uri.
|
||||
|
||||
### Known issues
|
||||
|
||||
Color stops can only take percentage value offsets.
|
||||
|
||||
```css
|
||||
background-image: svg-linear-gradient( to top left, #fff, rgba(255,255,255,0) 80% );
|
||||
background-image: svg-linear-gradient( 35deg, red, gold 20%, powderblue );
|
||||
```
|
||||
|
||||
|
||||
## svg-radial-gradent()
|
||||
|
||||
Syntax is similar to but more limited than [radial-gradient()](http://dev.w3.org/csswg/css3-images/#radial-gradient)
|
||||
|
||||
```syntax
|
||||
svg-radial-gradent( [ <origin> | at <position> ,]? <color-stop> [, <color-stop>]+ )
|
||||
```
|
||||
|
||||
### Returns
|
||||
|
||||
A base64 encoded svg data-uri.
|
||||
|
||||
### Known issues
|
||||
|
||||
Color stops can only take percentage value offsets.
|
||||
No control over shape - only circular gradients - however, the generated image can be stretched with background-size.
|
||||
|
||||
```css
|
||||
background-image: svg-radial-gradient( at center, red, blue 50%, yellow );
|
||||
background-image: svg-radial-gradient( 100% 50%, rgba(255,255,255,.5), rgba(255,255,255,0) );
|
||||
```
|
74
include/thirdparty/css-crush/docs/plugins/svg.md
vendored
Normal file
74
include/thirdparty/css-crush/docs/plugins/svg.md
vendored
Normal file
|
@ -0,0 +1,74 @@
|
|||
|
||||
Define and embed simple SVG elements, paths and effects inside CSS
|
||||
|
||||
|
||||
```crush
|
||||
@svg foo {
|
||||
type: star;
|
||||
star-points: #(0 5);
|
||||
radius: 100 50;
|
||||
margin: 20;
|
||||
stroke: black;
|
||||
fill: red;
|
||||
fill-opacity: .5;
|
||||
}
|
||||
|
||||
/* Embed SVG with svg() function (generates an svg file). */
|
||||
body {
|
||||
background: svg(foo);
|
||||
}
|
||||
/* As above but a 3 point star creating a data URI instead of a file. */
|
||||
body {
|
||||
background: svg-data(foo, 3);
|
||||
}
|
||||
```
|
||||
|
||||
*******
|
||||
|
||||
```crush
|
||||
/* Using path data and stroke styles to create a plus sign. */
|
||||
@svg plus {
|
||||
d: "M0,5 h10 M5,0 v10";
|
||||
width: 10;
|
||||
height: 10;
|
||||
stroke: white;
|
||||
stroke-linecap: round;
|
||||
stroke-width: 2;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
*******
|
||||
|
||||
```crush
|
||||
/* Skewed circle with radial gradient fill and drop shadow. */
|
||||
@svg circle {
|
||||
type: circle;
|
||||
transform: skewX(30);
|
||||
diameter: 60;
|
||||
margin: 20;
|
||||
fill: svg-radial-gradient(at top right, gold 50%, red);
|
||||
drop-shadow: 2 2 0 rgba(0,0,0,1);
|
||||
}
|
||||
```
|
||||
|
||||
*******
|
||||
|
||||
```crush
|
||||
/* 8-sided polygon with an image fill.
|
||||
Note: images usually have to be converted to data URIs, see known issues below. */
|
||||
@svg pattern {
|
||||
type: polygon;
|
||||
sides: 8;
|
||||
diameter: 180;
|
||||
margin: 20;
|
||||
fill: pattern(data-uri(kitten.jpg), scale(1) translate(-100 0));
|
||||
fill-opacity: .8;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Known issues
|
||||
|
||||
Firefox [does not allow linked images](https://bugzilla.mozilla.org/show_bug.cgi?id=628747#c0) (or other svg) when svg is in "svg as image" mode.
|
||||
|
8
include/thirdparty/css-crush/index.js
vendored
8
include/thirdparty/css-crush/index.js
vendored
|
@ -160,7 +160,7 @@ export default {
|
|||
};
|
||||
|
||||
export function watch(file, options={}) {
|
||||
({file: options.input, context: options.context} = resolveFile(file));
|
||||
({file: options.input, context: options.context} = resolveFile(file, {watch: true}));
|
||||
return (new Process()).watch(options);
|
||||
}
|
||||
|
||||
|
@ -174,7 +174,7 @@ export function string(string, options={}) {
|
|||
return (new Process()).exec(options);
|
||||
}
|
||||
|
||||
const resolveFile = input => {
|
||||
const resolveFile = (input, {watch}={}) => {
|
||||
|
||||
if (Array.isArray(input)) {
|
||||
|
||||
|
@ -197,7 +197,9 @@ const resolveFile = input => {
|
|||
initial ||= result;
|
||||
previous = result;
|
||||
|
||||
setTimeout(poller, 2000);
|
||||
if (watch) {
|
||||
setTimeout(poller, 2000);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
*
|
||||
*/
|
||||
namespace CssCrush;
|
||||
|
||||
#[\AllowDynamicProperties]
|
||||
class Process
|
||||
{
|
||||
use EventEmitter;
|
||||
|
@ -630,8 +630,8 @@ class Process
|
|||
|
||||
preg_match($rulePatt, $this->string->raw, $ruleMatch, PREG_UNMATCHED_AS_NULL, $traceOffset);
|
||||
|
||||
$selector = trim($ruleMatch['selector']);
|
||||
$block = trim($ruleMatch['block_content']);
|
||||
$selector = trim($ruleMatch['selector'] ?? null);
|
||||
$block = trim($ruleMatch['block_content'] ?? null);
|
||||
$replace = '';
|
||||
|
||||
// If rules are nested inside we set their parent property.
|
||||
|
@ -651,12 +651,12 @@ class Process
|
|||
}
|
||||
}
|
||||
else {
|
||||
$rule = new Rule($selector, $block, $ruleMatch['trace_token']);
|
||||
$rule = new Rule($selector, $block, $ruleMatch['trace_token'] ?? null);
|
||||
}
|
||||
|
||||
$replace = $tokens->add($rule, 'r', $rule->label) . $replace;
|
||||
|
||||
$this->string->splice($replace, $traceOffset, strlen($ruleMatch[0]));
|
||||
$this->string->splice($replace, $traceOffset, strlen($ruleMatch[0]) ?? null);
|
||||
}
|
||||
|
||||
// Flip, since we just captured rules in reverse order.
|
||||
|
|
1664
include/thirdparty/css-crush/package-lock.json
generated
vendored
Normal file
1664
include/thirdparty/css-crush/package-lock.json
generated
vendored
Normal file
File diff suppressed because it is too large
Load diff
32
include/thirdparty/css-crush/package.json
vendored
Normal file
32
include/thirdparty/css-crush/package.json
vendored
Normal file
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "csscrush",
|
||||
"version": "4.1.3",
|
||||
"description": "CSS-Crush, CSS preprocessor",
|
||||
"main": "./index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/peteboere/css-crush.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/peteboere/css-crush/issues"
|
||||
},
|
||||
"bin": {
|
||||
"csscrush": "./bin/csscrush"
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint --fix index.js"
|
||||
},
|
||||
"homepage": "http://the-echoplex.net/csscrush",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"eslint": "~8.16.0",
|
||||
"normalize.css": "7.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"glob": "~8.0.3"
|
||||
},
|
||||
"type": "module",
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue