@anydigital/bricks 0.26.0-alpha → 0.26.0-alpha.2
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/_config.yml +1 -0
- package/_includes/bricks/html.liquid +1 -1
- package/assets/breakout.css +150 -0
- package/bricks.gemspec +1 -1
- package/package.json +3 -3
- /package/{dist → assets}/bricks.css +0 -0
package/_config.yml
CHANGED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/* Breakout CSS - Framework-agnostic utilities for breaking out images and figures */
|
|
2
|
+
|
|
3
|
+
.breakout {
|
|
4
|
+
/* Prepare the container for breakout elements */
|
|
5
|
+
padding-inline: 10%;
|
|
6
|
+
max-width: calc(10% + 65ch + 10%);
|
|
7
|
+
|
|
8
|
+
/* Direct children, or wrapped in <p> for Markdown support */
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.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 {
|
|
12
|
+
width: -moz-fit-content;
|
|
13
|
+
width: fit-content;
|
|
14
|
+
min-width: 100%;
|
|
15
|
+
max-width: 125%;
|
|
16
|
+
margin-left: 50%;
|
|
17
|
+
transform: translateX(-50%);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/*** .does-not-exist is used below to avoid !important-s @TODO ***/
|
|
21
|
+
|
|
22
|
+
/* Respect inline blocks' min-width */
|
|
23
|
+
|
|
24
|
+
.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 > 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) {
|
|
25
|
+
min-width: auto;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Tables are so special :( */
|
|
29
|
+
|
|
30
|
+
.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > p > table:not(.does-not-exist) {
|
|
31
|
+
/* Let them full-bleed */
|
|
32
|
+
width: -moz-max-content;
|
|
33
|
+
width: max-content;
|
|
34
|
+
min-width: auto;
|
|
35
|
+
max-width: 100vw;
|
|
36
|
+
padding-inline: 7.5%;
|
|
37
|
+
|
|
38
|
+
/* Let them scroll */
|
|
39
|
+
display: block;
|
|
40
|
+
overflow-x: auto;
|
|
41
|
+
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Max out the width of the element */
|
|
45
|
+
|
|
46
|
+
.breakout > .breakout-item-max:not(does-not-exist),.breakout > p > .breakout-item-max {
|
|
47
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.breakout-headings h2:not([class]),.breakout-headings h3:not([class]),.breakout-headings h4:not([class]),.breakout-headings hr {
|
|
51
|
+
position: relative;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.breakout-headings h2:not([class])::before {
|
|
55
|
+
content: "";
|
|
56
|
+
display: block;
|
|
57
|
+
position: absolute;
|
|
58
|
+
background-color: rgba(0, 0, 0, 5%);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.breakout-headings h3:not([class])::before {
|
|
62
|
+
content: "";
|
|
63
|
+
display: block;
|
|
64
|
+
position: absolute;
|
|
65
|
+
background-color: rgba(0, 0, 0, 5%);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.breakout-headings h4:not([class])::before {
|
|
69
|
+
content: "";
|
|
70
|
+
display: block;
|
|
71
|
+
position: absolute;
|
|
72
|
+
background-color: rgba(0, 0, 0, 5%);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.breakout-headings hr:not(.does-not-exist)::before {
|
|
76
|
+
content: "";
|
|
77
|
+
display: block;
|
|
78
|
+
position: absolute;
|
|
79
|
+
background-color: rgba(0, 0, 0, 5%);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.breakout-headings h2:not([class])::before {
|
|
83
|
+
width: 10em;
|
|
84
|
+
right: 100%;
|
|
85
|
+
margin-right: 1rem;
|
|
86
|
+
height: 0.3em;
|
|
87
|
+
top: 50%;
|
|
88
|
+
transform: translateY(-50%);
|
|
89
|
+
background: linear-gradient(
|
|
90
|
+
to left,
|
|
91
|
+
rgba(0, 0, 0, 10%),
|
|
92
|
+
rgba(0, 0, 0, 5%) 10%,
|
|
93
|
+
transparent
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.breakout-headings h3:not([class])::before {
|
|
98
|
+
width: 10em;
|
|
99
|
+
right: 100%;
|
|
100
|
+
margin-right: 1rem;
|
|
101
|
+
height: 0.3em;
|
|
102
|
+
top: 50%;
|
|
103
|
+
transform: translateY(-50%);
|
|
104
|
+
background: linear-gradient(
|
|
105
|
+
to left,
|
|
106
|
+
rgba(0, 0, 0, 10%),
|
|
107
|
+
rgba(0, 0, 0, 5%) 10%,
|
|
108
|
+
transparent
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.breakout-headings h4:not([class])::before {
|
|
113
|
+
width: 10em;
|
|
114
|
+
right: 100%;
|
|
115
|
+
margin-right: 1rem;
|
|
116
|
+
height: 0.3em;
|
|
117
|
+
top: 50%;
|
|
118
|
+
transform: translateY(-50%);
|
|
119
|
+
background: linear-gradient(
|
|
120
|
+
to left,
|
|
121
|
+
rgba(0, 0, 0, 10%),
|
|
122
|
+
rgba(0, 0, 0, 5%) 10%,
|
|
123
|
+
transparent
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.breakout-headings hr {
|
|
128
|
+
height: 0.75rem;
|
|
129
|
+
border: none;
|
|
130
|
+
overflow: visible;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.breakout-headings hr::before {
|
|
134
|
+
width: 100vw;
|
|
135
|
+
left: 50%;
|
|
136
|
+
height: 100%;
|
|
137
|
+
transform: translateX(-50%);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.breakout-headings hr + h2::before {
|
|
141
|
+
display: none !important;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.breakout-headings hr + h3::before {
|
|
145
|
+
display: none !important;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.breakout-headings hr + h4::before {
|
|
149
|
+
display: none !important;
|
|
150
|
+
}
|
package/bricks.gemspec
CHANGED
|
@@ -9,7 +9,7 @@ Gem::Specification.new do |spec|
|
|
|
9
9
|
spec.homepage = "https://github.com/anydigital/bricks"
|
|
10
10
|
spec.license = "MIT"
|
|
11
11
|
|
|
12
|
-
spec.files = Dir.glob("{_includes}/**/*")
|
|
12
|
+
spec.files = Dir.glob("{_includes,assets}/**/*")
|
|
13
13
|
# puts "spec.files: #{spec.files.inspect}"
|
|
14
14
|
|
|
15
15
|
spec.add_runtime_dependency "jekyll", ">= 3.5", "< 5.0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/bricks",
|
|
3
|
-
"version": "0.26.0-alpha",
|
|
3
|
+
"version": "0.26.0-alpha.2",
|
|
4
4
|
"description": "Framework-agnostic CSS utilities and single-file Liquid 'bricks' for modern web development.",
|
|
5
5
|
"style": "./src/bricks.css",
|
|
6
6
|
"exports": {
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
"./dist": "./dist/bricks.css"
|
|
9
9
|
},
|
|
10
10
|
"scripts": {
|
|
11
|
-
"postcss": "postcss src/bricks.css -o
|
|
12
|
-
"build": "npm run postcss -- --no-map",
|
|
11
|
+
"postcss": "postcss src/bricks.css -o assets/bricks.css",
|
|
12
|
+
"build": "npm run postcss -- --no-map && cp ./node_modules/@anydigital/breakout-css/dist/breakout.css ./assets/",
|
|
13
13
|
"start": "npm run postcss -- --watch",
|
|
14
14
|
"prepublishOnly": "npm run build"
|
|
15
15
|
},
|
|
File without changes
|