cacao-css 3.7.1 → 3.12.0

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 (27) hide show
  1. package/CHANGELOG.md +113 -90
  2. package/README.md +69 -68
  3. package/package.json +1 -1
  4. package/src/css/components/button/button.css +2 -1
  5. package/src/css/components/form/textinput.css +19 -0
  6. package/src/css/components/grid/README.md +3 -12
  7. package/src/css/components/grid/grid.css +1 -81
  8. package/src/css/components/list/columns.css +1 -0
  9. package/src/css/utils/flex/flex-responsive.css +759 -0
  10. package/src/css/utils/flex/index.css +1 -0
  11. package/src/css/utils/margin/index.css +12 -0
  12. package/src/css/utils/margin/marg-left-lg.css +35 -0
  13. package/src/css/utils/margin/marg-left-md.css +35 -0
  14. package/src/css/utils/margin/marg-left-sm.css +35 -0
  15. package/src/css/utils/margin/marg-left.css +34 -0
  16. package/src/css/utils/margin/marg-right-lg.css +35 -0
  17. package/src/css/utils/margin/marg-right-md.css +35 -0
  18. package/src/css/utils/margin/marg-right-sm.css +35 -0
  19. package/src/css/utils/margin/marg-right.css +34 -0
  20. package/src/css/utils/margin/spaced-lg.css +41 -0
  21. package/src/css/utils/margin/spaced-md.css +41 -0
  22. package/src/css/utils/margin/spaced-sm.css +41 -0
  23. package/src/css/utils/margin/spaced.css +40 -0
  24. package/src/css/utils/size/height.css +25 -0
  25. package/src/css/utils/size/index.css +2 -0
  26. package/src/css/utils/size/width.css +25 -0
  27. package/src/css/utils/typography/typography.css +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "cacao-css",
3
3
  "description": "A set of composable CSS modules that provide a solid foundation for starting a new project.",
4
- "version": "3.7.1",
4
+ "version": "3.12.0",
5
5
  "main": "gulfile.js",
6
6
  "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
7
7
  "license": "MIT",
package/src/css/components/button/button.css CHANGED
@@ -36,13 +36,14 @@
36
36
  */
37
37
 
38
38
  .Button {
39
+ align-items: center;
39
40
  background: var(--Button-background);
40
41
  border: var(--Button-border);
41
42
  border-radius: var(--Button-border-radius);
42
43
  box-sizing: border-box; /* 1 */
43
44
  color: var(--Button-color);
44
45
  cursor: pointer;
45
- display: inline-block;
46
+ display: inline-flex;
46
47
  font-family: var(--Button-fontFamily);
47
48
  font-size: var(--Button-fontSize);
48
49
  letter-spacing: var(--Button-letterSpacing);
package/src/css/components/form/textinput.css CHANGED
@@ -40,3 +40,22 @@
40
40
  color: var(--TextInput-successColor);
41
41
  outline: 1px solid var(--TextInput-successColor);
42
42
  }
43
+
44
+ /**
45
+ * Sizes
46
+ */
47
+
48
+ /* postcss-bem-linter: ignore */
49
+ .TextInput.small {
50
+ width: 40%;
51
+ }
52
+
53
+ /* postcss-bem-linter: ignore */
54
+ .TextInput.medium {
55
+ width: 60%;
56
+ }
57
+
58
+ /* postcss-bem-linter: ignore */
59
+ .TextInput.large {
60
+ width: 100%;
61
+ }
package/src/css/components/grid/README.md CHANGED
@@ -1,14 +1,11 @@
1
1
  # Grid
2
2
 
3
3
  A CSS grid component. The grid makes use of `flexbox` to provide features that
4
- float-based layouts cannot. Utilizes an inline-block fallback for browsers that
5
- lack `flexbox` or `flex-wrap` support.
4
+ float-based layouts cannot.
6
5
 
7
- Fallbacks are applied by giving the `<html>` tag a class of `no-flexbox`
8
- or `no-flexwrap`.
9
6
 
10
- Basic visual tests are in [`test/modules/grid.html`](http://aptuitiv.github.io/cacao/test/modules/grid.html)
11
- and fallback layout tests are found in [`test/modules/grid-noflex.html`](http://aptuitiv.github.io/cacao/test/modules/grid-noflex.html).
7
+
8
+ Basic visual tests are in [`test/modules/grid.html`](http://aptuitiv.github.io/cacao/test/modules/grid.html).
12
9
 
13
10
  **Note**: This component relies on particular dimensions being applied to cells in
14
11
  the grid via other classes. For example,
@@ -25,7 +22,6 @@ the grid via other classes. For example,
25
22
  * Custom vertical alignment of cells (top, bottom, or middle).
26
23
  * Cell width is controlled independently of grid gutter.
27
24
  * Infinite nesting.
28
- * Inline-block fallbacks for browsers without flexbox support.
29
25
 
30
26
 
31
27
  ## Available classes
@@ -43,17 +39,12 @@ the grid via other classes. For example,
43
39
  * `Grid-cell`: a child cell of `Grid` that wraps grid content
44
40
  * `Grid-cell--center`: center an individual `Grid-cell`
45
41
 
46
- **Note**: `Grid--fit` and `Grid--equalHeight` will not work in browsers
47
- without flexbox support.
48
42
 
49
43
 
50
44
  ## Configurable variables
51
45
 
52
46
  * `--Grid-cell-gutter`: the width of the gutter applied by the
53
47
  `Grid--withGutter` modifier class.
54
- * `--Grid-fontSize`: Used by the inline-block fallback grid to reset font size
55
- changes made to the grid wrapper. Only required if you wish to use the
56
- inline-block fallback layout.
57
48
 
58
49
 
59
50
  ## Use
package/src/css/components/grid/grid.css CHANGED
@@ -5,7 +5,7 @@
5
5
  /** @define Grid */
6
6
 
7
7
  /**
8
- * Flex-box grid component with inline-block fallback.
8
+ * Flex-box grid component
9
9
  *
10
10
  * Note: Relies on particular dimensions being applied to cells via
11
11
  * other classes. For example, `size` utilities.
@@ -16,7 +16,6 @@
16
16
 
17
17
  :root {
18
18
  --Grid-cell-gutter: 20px;
19
- --Grid-fontSize: 15px;
20
19
  }
21
20
 
22
21
  /* Grid container
@@ -151,82 +150,3 @@
151
150
  .Grid-cell--center {
152
151
  margin: 0 auto;
153
152
  }
154
-
155
- /* ==========================================================================
156
- Inline-block grid fallback
157
- ========================================================================== */
158
-
159
- /**
160
- * Fallbacks for browsers that don't support flexbox or don't support flex
161
- * item wrapping.
162
- */
163
-
164
- /* Grid container
165
- ========================================================================== */
166
-
167
- /**
168
- * 1. Account for browser defaults of elements that might be the root node of
169
- * the component.
170
- * 2. Remove inter-cell whitespace that appears between `inline-block` child
171
- * elements.
172
- * 3. Ensure consistent default alignment.
173
- */
174
-
175
- /* postcss-bem-linter: ignore */
176
- .no-flexwrap .Grid,
177
- .no-flexbox .Grid {
178
- display: block; /* 1 */
179
- font-size: 0; /* 2 */
180
- text-align: left; /* 3 */
181
- }
182
-
183
- /* postcss-bem-linter: ignore */
184
- .no-flexwrap .Grid--alignCenter,
185
- .no-flexbox .Grid--alignCenter {
186
- text-align: center;
187
- }
188
-
189
- /* postcss-bem-linter: ignore */
190
- .no-flexwrap .Grid--alignRight,
191
- .no-flexbox .Grid--alignRight {
192
- text-align: right;
193
- }
194
-
195
- /* postcss-bem-linter: ignore */
196
- .no-flexwrap .Grid--alignMiddle > .Grid-cell,
197
- .no-flexbox .Grid--alignMiddle > .Grid-cell {
198
- vertical-align: middle;
199
- }
200
-
201
- /* postcss-bem-linter: ignore */
202
- .no-flexwrap .Grid--alignBottom > .Grid-cell,
203
- .no-flexbox .Grid--alignBottom > .Grid-cell {
204
- vertical-align: bottom;
205
- }
206
-
207
- /* Grid cell
208
- ========================================================================== */
209
-
210
- /**
211
- * 1. Fundamentals of the non-float grid layout.
212
- * 2. Reset font changes made in `Grid`.
213
- * 3. Keeps content correctly aligned with the grid direction.
214
- * 4. Controls vertical positioning of units.
215
- * 5. Make cells full-width by default.
216
- */
217
-
218
- /* postcss-bem-linter: ignore */
219
- .no-flexwrap .Grid-cell,
220
- .no-flexbox .Grid-cell {
221
- display: inline-block; /* 1 */
222
- font-size: var(--Grid-fontSize); /* 2 */
223
- text-align: left; /* 3 */
224
- vertical-align: top; /* 4 */
225
- width: 100%; /* 5 */
226
- }
227
-
228
- /* postcss-bem-linter: ignore */
229
- .no-flexwrap .Grid-cell--center,
230
- .no-flexbox .Grid-cell--center {
231
- display: block;
232
- }
package/src/css/components/list/columns.css CHANGED
@@ -12,6 +12,7 @@
12
12
 
13
13
  .ColumnList--noStyle {
14
14
  list-style: none;
15
+ padding-left: 0;
15
16
  }
16
17
 
17
18
  .ColumnList--2column {