@anydigital/breakout-css 1.0.0-alpha.8 → 1.0.0-alpha.9

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.
Files changed (4) hide show
  1. package/README.md +3 -3
  2. package/dist/breakout.css +18 -0
  3. package/package.json +1 -1
  4. package/src/breakout.css +16 -0
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # breakout-css
2
2
 
3
- Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or other "figures" from their parent container.
3
+ Modern CSS utilities to easily break-out / hang / pop-out / bleed images, tables, iframes, and other figures from their parent container.
4
4
 
5
5
  ## Installation
6
6
 
@@ -47,7 +47,7 @@ The breakout effect automatically applies to direct children or elements wrapped
47
47
 
48
48
  **Larger blocks:**
49
49
 
50
- - `table`, `pre`
50
+ - `table` (responsive with horizontal scroll support), `pre`
51
51
  - `iframe`, `object`, `embed`, `video`
52
52
 
53
53
  **Custom utility classes:**
@@ -116,7 +116,7 @@ The `.breakout` container applies `padding-inline: 10%` to create space for brea
116
116
 
117
117
  The breakout effect on elements is achieved by:
118
118
 
119
- 1. Setting `width: fit-content` with `min-width: 100%` and `max-width: 125%` (inline blocks like `img`, `picture`, `figure`, `canvas`, and `audio` use `min-width: auto` instead)
119
+ 1. Setting `width: fit-content` with `min-width: 100%` and `max-width: 125%` (inline blocks like `img`, `picture`, `figure`, `canvas`, and `audio` use `min-width: auto` instead). Tables have special handling for responsiveness (full-bleed and horizontal scroll).
120
120
  2. Using `margin-left: 50%` to position from the center of the container
121
121
  3. Using `transform: translateX(-50%)` to shift it left by half its width
122
122
 
package/dist/breakout.css CHANGED
@@ -21,6 +21,24 @@
21
21
  min-width: auto;
22
22
  }
23
23
 
24
+ /* Tables are so special :( */
25
+
26
+ .breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
27
+ /* .does-not-exist is here to avoid !important below @TODO */
28
+
29
+ /* Let them full-bleed */
30
+ width: -moz-max-content;
31
+ width: max-content;
32
+ min-width: auto;
33
+ max-width: 100vw;
34
+ padding-inline: 1.5rem;
35
+
36
+ /* Let them scroll */
37
+ display: block;
38
+ overflow-x: auto;
39
+ -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
40
+ }
41
+
24
42
  /* Max out the width of the element */
25
43
 
26
44
  .breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anydigital/breakout-css",
3
- "version": "1.0.0-alpha.8",
3
+ "version": "1.0.0-alpha.9",
4
4
  "description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes, and other figures from their parent container",
5
5
  "keywords": [
6
6
  "css",
package/src/breakout.css CHANGED
@@ -29,6 +29,22 @@
29
29
  min-width: auto;
30
30
  }
31
31
 
32
+ /* Tables are so special :( */
33
+ &:is(table):not(.does-not-exist) {
34
+ /* .does-not-exist is here to avoid !important below @TODO */
35
+
36
+ /* Let them full-bleed */
37
+ width: max-content;
38
+ min-width: auto;
39
+ max-width: 100vw;
40
+ padding-inline: 1.5rem;
41
+
42
+ /* Let them scroll */
43
+ display: block;
44
+ overflow-x: auto;
45
+ -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
46
+ }
47
+
32
48
  /* Max out the width of the element */
33
49
  &.breakout-item-max {
34
50
  width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */