@anydigital/breakout-css 1.0.0-alpha.2 → 1.0.0-alpha.4
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 +20 -2
- package/dist/breakout.css +14 -6
- package/package.json +5 -8
- package/src/breakout.css +19 -19
package/README.md
CHANGED
|
@@ -40,15 +40,18 @@ The breakout effect automatically applies to:
|
|
|
40
40
|
- `img`, `figure`, `picture`
|
|
41
41
|
- `video`, `audio`
|
|
42
42
|
- `iframe`, `object`, `embed`, `canvas`
|
|
43
|
-
-
|
|
43
|
+
- `table`, `pre`
|
|
44
|
+
- Elements with `.breakout-item` or `.breakout-item-max` class
|
|
44
45
|
|
|
45
46
|
### Manual Breakout
|
|
46
47
|
|
|
48
|
+
For elements that don't automatically break out, use the `.breakout-item` class:
|
|
49
|
+
|
|
47
50
|
```html
|
|
48
51
|
<div class="breakout">
|
|
49
52
|
<p>Regular content...</p>
|
|
50
53
|
|
|
51
|
-
<div class="breakout-
|
|
54
|
+
<div class="breakout-item">
|
|
52
55
|
<iframe src="https://example.com/embed"></iframe>
|
|
53
56
|
</div>
|
|
54
57
|
|
|
@@ -56,6 +59,21 @@ The breakout effect automatically applies to:
|
|
|
56
59
|
</div>
|
|
57
60
|
```
|
|
58
61
|
|
|
62
|
+
### Force Maximum Width
|
|
63
|
+
|
|
64
|
+
By default, breakout elements auto-size between 100% and 125% width. To force an element to always use the full 125% breakout width, use `.breakout-item-max`:
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<div class="breakout">
|
|
68
|
+
<p>Regular content...</p>
|
|
69
|
+
|
|
70
|
+
<!-- This will always be 125% width, never smaller -->
|
|
71
|
+
<img src="wide-image.jpg" class="breakout-item-max" alt="Wide image">
|
|
72
|
+
|
|
73
|
+
<p>More content...</p>
|
|
74
|
+
</div>
|
|
75
|
+
```
|
|
76
|
+
|
|
59
77
|
## How It Works
|
|
60
78
|
|
|
61
79
|
The breakout effect is achieved by:
|
package/dist/breakout.css
CHANGED
|
@@ -4,20 +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
|
-
.breakout > img:not(does-not-exist):not(.does-not-exist),.breakout >
|
|
12
|
-
|
|
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%;
|
|
13
14
|
max-width: 125%;
|
|
14
15
|
transform: translateX(-50%);
|
|
15
16
|
margin-left: 50%;
|
|
17
|
+
}
|
|
16
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;
|
|
17
23
|
}
|
|
18
24
|
|
|
19
|
-
|
|
20
|
-
|
|
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% !important; /* @TODO: !important for cases like figure.breakout-item-max */
|
|
21
29
|
}
|
|
22
30
|
|
|
23
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.4",
|
|
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
|
-
"style": "dist/breakout.css",
|
|
15
14
|
"files": [
|
|
16
15
|
"dist",
|
|
17
16
|
"src"
|
|
18
17
|
],
|
|
19
18
|
"exports": {
|
|
20
|
-
".":
|
|
21
|
-
|
|
22
|
-
"import": "./src/breakout.css"
|
|
23
|
-
}
|
|
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,38 +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
10
|
&:is(
|
|
11
|
-
/*
|
|
12
|
-
img,
|
|
13
|
-
|
|
14
|
-
picture,
|
|
15
|
-
video,
|
|
16
|
-
audio,
|
|
17
|
-
iframe,
|
|
18
|
-
object,
|
|
19
|
-
embed,
|
|
20
|
-
canvas,
|
|
11
|
+
/* Inline blocks */
|
|
12
|
+
img, picture, figure, canvas, audio,
|
|
13
|
+
/* Larger blocks */
|
|
21
14
|
table,
|
|
15
|
+
pre,
|
|
16
|
+
iframe, object, embed, video,
|
|
22
17
|
/* Custom utility class for other tags that need to be broken out */
|
|
23
|
-
.breakout-
|
|
18
|
+
.breakout-item,
|
|
19
|
+
.breakout-item-max
|
|
24
20
|
) {
|
|
25
|
-
|
|
21
|
+
display: inline-block;
|
|
22
|
+
width: auto;
|
|
23
|
+
min-width: 100%;
|
|
26
24
|
max-width: 125%;
|
|
27
25
|
transform: translateX(-50%);
|
|
28
26
|
margin-left: 50%;
|
|
27
|
+
}
|
|
29
28
|
|
|
29
|
+
/* Let inline blocks shrink to fit their content */
|
|
30
|
+
&:is(img, picture, figure, canvas, audio) {
|
|
31
|
+
min-width: auto;
|
|
30
32
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
width: 125% !important;
|
|
33
|
+
|
|
34
|
+
/* Max out the width of the element */
|
|
35
|
+
&.breakout-item-max {
|
|
36
|
+
width: 125% !important; /* @TODO: !important for cases like figure.breakout-item-max */
|
|
36
37
|
}
|
|
37
38
|
}
|
|
38
|
-
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
/* @TODO: Allow non-direct children. */
|