@anydigital/breakout-css 1.0.0-alpha.2 → 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/dist/breakout.css +14 -6
- package/package.json +5 -8
- package/src/breakout.css +19 -19
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%;
|
|
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.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
|
-
"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
|
+
&:is(.breakout-item-max) {
|
|
36
|
+
width: 125%;
|
|
36
37
|
}
|
|
37
38
|
}
|
|
38
|
-
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
/* @TODO: Allow non-direct children. */
|