@anydigital/breakout-css 1.0.0-alpha → 1.0.0-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -15
- package/dist/breakout.css +14 -8
- package/package.json +5 -8
- package/src/breakout.css +23 -7
package/README.md
CHANGED
|
@@ -10,25 +10,13 @@ Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or ot
|
|
|
10
10
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anydigital/breakout-css@1/dist/breakout.min.css">
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
###
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm install @anydigital/breakout-css
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
Import the compiled CSS file directly into your project:
|
|
13
|
+
### From Source
|
|
20
14
|
|
|
21
15
|
```css
|
|
22
|
-
@import '@anydigital/breakout-css
|
|
16
|
+
@import '@anydigital/breakout-css';
|
|
23
17
|
```
|
|
24
18
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
Tailwind v4 supports native CSS nesting, so you can import the source file directly:
|
|
28
|
-
|
|
29
|
-
```css
|
|
30
|
-
@import '@anydigital/breakout-css/src/breakout.css';
|
|
31
|
-
```
|
|
19
|
+
^ This is supported by Tailwind v4!
|
|
32
20
|
|
|
33
21
|
## Usage
|
|
34
22
|
|
package/dist/breakout.css
CHANGED
|
@@ -4,22 +4,28 @@
|
|
|
4
4
|
padding-left: 10%;
|
|
5
5
|
padding-right: 10%;
|
|
6
6
|
|
|
7
|
-
/* Direct children,
|
|
8
|
-
|
|
7
|
+
/* Direct children, or wrapped in <p> for Markdown support */
|
|
9
8
|
}
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
width:
|
|
10
|
+
.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > pre:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-item:not(does-not-exist),.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist),.breakout > p > table:not(.does-not-exist),.breakout > p > pre:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > .breakout-item,.breakout > p > .breakout-item-max {
|
|
11
|
+
display: inline-block;
|
|
12
|
+
width: auto;
|
|
13
|
+
min-width: 100%;
|
|
15
14
|
max-width: 125%;
|
|
16
15
|
transform: translateX(-50%);
|
|
17
16
|
margin-left: 50%;
|
|
17
|
+
}
|
|
18
18
|
|
|
19
|
+
/* Let inline blocks shrink to fit their content */
|
|
20
|
+
|
|
21
|
+
.breakout > img:not(does-not-exist),.breakout > picture:not(does-not-exist),.breakout > figure:not(does-not-exist),.breakout > canvas:not(does-not-exist),.breakout > audio:not(does-not-exist),.breakout > p > img,.breakout > p > picture,.breakout > p > figure,.breakout > p > canvas,.breakout > p > audio {
|
|
22
|
+
min-width: auto;
|
|
19
23
|
}
|
|
20
24
|
|
|
21
|
-
|
|
22
|
-
|
|
25
|
+
/* Max out the width of the element */
|
|
26
|
+
|
|
27
|
+
.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
|
|
28
|
+
width: 125%;
|
|
23
29
|
}
|
|
24
30
|
|
|
25
31
|
/* @TODO: Allow non-direct children. */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/breakout-css",
|
|
3
|
-
"version": "1.0.0-alpha",
|
|
3
|
+
"version": "1.0.0-alpha.3",
|
|
4
4
|
"description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or other figures from their parent container",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -11,19 +11,16 @@
|
|
|
11
11
|
"tailwind-plugin",
|
|
12
12
|
"utilities"
|
|
13
13
|
],
|
|
14
|
-
"main": "dist/breakout.css",
|
|
15
|
-
"style": "dist/breakout.css",
|
|
16
14
|
"files": [
|
|
17
15
|
"dist",
|
|
18
16
|
"src"
|
|
19
17
|
],
|
|
20
18
|
"exports": {
|
|
21
|
-
".": "./
|
|
22
|
-
"./
|
|
23
|
-
"./src": "./src/breakout.css"
|
|
19
|
+
".": "./src/breakout.css",
|
|
20
|
+
"./dist": "./dist/breakout.css"
|
|
24
21
|
},
|
|
25
22
|
"scripts": {
|
|
26
|
-
"build": "
|
|
23
|
+
"build": "postcss src/breakout.css -o dist/breakout.css",
|
|
27
24
|
"prepublishOnly": "npm run build"
|
|
28
25
|
},
|
|
29
26
|
"repository": {
|
|
@@ -38,7 +35,7 @@
|
|
|
38
35
|
"devDependencies": {
|
|
39
36
|
"fs-extra": "^11.2.0",
|
|
40
37
|
"postcss": "^8.4.0",
|
|
41
|
-
"postcss-
|
|
38
|
+
"postcss-cli": "^11.0.0",
|
|
42
39
|
"postcss-preset-env": "^10.6.0"
|
|
43
40
|
}
|
|
44
41
|
}
|
package/src/breakout.css
CHANGED
|
@@ -4,22 +4,38 @@
|
|
|
4
4
|
padding-left: 10%;
|
|
5
5
|
padding-right: 10%;
|
|
6
6
|
|
|
7
|
-
/* Direct children,
|
|
7
|
+
/* Direct children, or wrapped in <p> for Markdown support */
|
|
8
8
|
& > *,
|
|
9
9
|
& > p > * {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
&:is(
|
|
11
|
+
/* Inline blocks */
|
|
12
|
+
img, picture, figure, canvas, audio,
|
|
13
|
+
/* Larger blocks */
|
|
14
|
+
table,
|
|
15
|
+
pre,
|
|
16
|
+
iframe, object, embed, video,
|
|
17
|
+
/* Custom utility class for other tags that need to be broken out */
|
|
18
|
+
.breakout-item,
|
|
19
|
+
.breakout-item-max
|
|
20
|
+
) {
|
|
21
|
+
display: inline-block;
|
|
22
|
+
width: auto;
|
|
23
|
+
min-width: 100%;
|
|
13
24
|
max-width: 125%;
|
|
14
25
|
transform: translateX(-50%);
|
|
15
26
|
margin-left: 50%;
|
|
27
|
+
}
|
|
16
28
|
|
|
29
|
+
/* Let inline blocks shrink to fit their content */
|
|
30
|
+
&:is(img, picture, figure, canvas, audio) {
|
|
31
|
+
min-width: auto;
|
|
17
32
|
}
|
|
18
|
-
|
|
19
|
-
|
|
33
|
+
|
|
34
|
+
/* Max out the width of the element */
|
|
35
|
+
&:is(.breakout-item-max) {
|
|
36
|
+
width: 125%;
|
|
20
37
|
}
|
|
21
38
|
}
|
|
22
|
-
|
|
23
39
|
}
|
|
24
40
|
|
|
25
41
|
/* @TODO: Allow non-direct children. */
|