cacao-css 3.13.0 → 3.16.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 (24) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/package.json +1 -1
  3. package/src/css/base/base.css +11 -0
  4. package/src/css/base/typography.css +0 -10
  5. package/src/css/components/arrange/arrange.css +4 -8
  6. package/src/css/components/button/button.css +1 -4
  7. package/src/css/components/constrain/constrain.css +44 -2
  8. package/src/css/components/constrain/image.css +29 -0
  9. package/src/css/components/constrain/index.css +1 -0
  10. package/src/css/components/container/container.css +0 -3
  11. package/src/css/components/form/selectmenu.css +0 -2
  12. package/src/css/components/form/textinput.css +0 -1
  13. package/src/css/components/grid/grid.css +0 -2
  14. package/src/css/components/image/image.css +4 -1
  15. package/src/css/components/image/wrapper.css +0 -1
  16. package/src/css/components/media/media.css +0 -1
  17. package/src/css/components/navigation/dropdown.css +0 -3
  18. package/src/css/components/navigation/footer.css +0 -3
  19. package/src/css/components/navigation/mainnav.css +0 -3
  20. package/src/css/utils/size/size-lg.css +0 -5
  21. package/src/css/utils/size/size-md.css +0 -5
  22. package/src/css/utils/size/size-sm.css +0 -5
  23. package/src/css/utils/size/size-xs.css +0 -5
  24. package/src/css/utils/size/size.css +0 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.16.0 (July 21, 2022)
4
+
5
+ - Added `Image--fullWidth` class to make an image expand to full width.
6
+
7
+ ## 3.15.0 (May 12, 2022)
8
+
9
+ - Added global box sizing style. Removed `box-sizing` from individual components.
10
+ - Added ImageConstrain class to add size constraints to images.
11
+ - Added portrait size options to the `Constrain` classes.
12
+
13
+ ## 3.14.0 (May 12, 2022)
14
+
15
+ - Removed the small screen font styles that cause the font to be smaller on small screens. This is no longer necessary with high resolution mobile phones.
16
+
17
+ ## 3.13.0 (December 17, 2021)
18
+
19
+ - Added smooth scrolling on the `<html>` tag by default.
20
+
21
+ ## 3.12.0 (December 3, 2021)
22
+
23
+ - Added vertical margin spacing utilities.
24
+ - Added full width/height utilities.
25
+
3
26
  ## 3.11.0 (Sept 21, 2021)
4
27
 
5
28
  - Updated .Button class to use `display: inline-flexbox` instead of `display: inline`
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.13.0",
4
+ "version": "3.16.0",
5
5
  "main": "gulfile.js",
6
6
  "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
7
7
  "license": "MIT",
package/src/css/base/base.css CHANGED
@@ -119,3 +119,14 @@ button:focus {
119
119
  [hidden] {
120
120
  display: none !important;
121
121
  }
122
+
123
+ /**
124
+ * Use a more intuitive box-sizing model
125
+ * See: https://www.joshwcomeau.com/css/custom-css-reset
126
+ */
127
+
128
+ *,
129
+ *::before,
130
+ *::after {
131
+ box-sizing: border-box;
132
+ }
package/src/css/base/typography.css CHANGED
@@ -74,16 +74,6 @@ html {
74
74
  font-size: 62.5%;
75
75
  }
76
76
 
77
- /**
78
- * Scale down text on small screens
79
- */
80
-
81
- @media (--c-bp-sm) {
82
- html {
83
- font-size: 56.25%;
84
- }
85
- }
86
-
87
77
  /**
88
78
  * Set body defaults for other elements to inherit
89
79
  */
package/src/css/components/arrange/arrange.css CHANGED
@@ -18,17 +18,13 @@
18
18
  }
19
19
 
20
20
  /**
21
- * 1. Protect against the component expanding beyond the confines of its
22
- * container if properties affecting the box-model are applied to the
23
- * component. Mainly necessary because of (5).
24
- * 2. Rely on table layout.
25
- * 3. Zero out the default spacing that might be on an element (e.g., `ul`).
26
- * 4. Make sure the component fills at least the full width of its parent.
27
- * 5. Reset the table-layout algorithm in case a component is nested.
21
+ * 1. Rely on table layout.
22
+ * 2. Zero out the default spacing that might be on an element (e.g., `ul`).
23
+ * 3. Make sure the component fills at least the full width of its parent.
24
+ * 4. Reset the table-layout algorithm in case a component is nested.
28
25
  */
29
26
 
30
27
  .Arrange {
31
- box-sizing: border-box; /* 1 */
32
28
  display: table; /* 2 */
33
29
  margin: 0; /* 3 */
34
30
  min-width: 100%; /* 4 */
package/src/css/components/button/button.css CHANGED
@@ -30,9 +30,7 @@
30
30
  }
31
31
 
32
32
  /**
33
- * 1. Normalize `box-sizing` across all elements that this component could be
34
- * applied to.
35
- * 2. Prevent button text from being selectable.
33
+ * 1. Prevent button text from being selectable.
36
34
  */
37
35
 
38
36
  .Button {
@@ -40,7 +38,6 @@
40
38
  background: var(--Button-background);
41
39
  border: var(--Button-border);
42
40
  border-radius: var(--Button-border-radius);
43
- box-sizing: border-box; /* 1 */
44
41
  color: var(--Button-color);
45
42
  cursor: pointer;
46
43
  display: inline-flex;
package/src/css/components/constrain/constrain.css CHANGED
@@ -25,7 +25,6 @@
25
25
  background-position: center;
26
26
  background-repeat: no-repeat;
27
27
  background-size: cover;
28
- box-sizing: border-box;
29
28
  display: block;
30
29
  padding-bottom: 100%;
31
30
  width: 100%;
@@ -39,7 +38,14 @@
39
38
  background-size: contain;
40
39
  }
41
40
 
42
- /* Constrain ratios
41
+ /* Square constrain ratio
42
+ ========================================================================== */
43
+
44
+ .Constrain--1by1 {
45
+ padding-bottom: 100%;
46
+ }
47
+
48
+ /* Landscape constrain ratios
43
49
  ========================================================================== */
44
50
 
45
51
  .Constrain--5by4 {
@@ -75,6 +81,42 @@
75
81
  padding-bottom: 33.333333%;
76
82
  }
77
83
 
84
+ /* Portrait constrain ratios
85
+ ========================================================================== */
86
+
87
+ .Constrain--4by5 {
88
+ padding-bottom: 125%;
89
+ }
90
+
91
+ .Constrain--3by4 {
92
+ padding-bottom: 133.333333%;
93
+ }
94
+
95
+ .Constrain--2by3 {
96
+ padding-bottom: 150%;
97
+ }
98
+
99
+ .Constrain--5by8,
100
+ .Constrain--10by16 {
101
+ padding-bottom: 160%;
102
+ }
103
+
104
+ .Constrain--3by5 {
105
+ padding-bottom: 166.666666%;
106
+ }
107
+
108
+ .Constrain--9by16 {
109
+ padding-bottom: 177.777777%;
110
+ }
111
+
112
+ .Constrain--1by2 {
113
+ padding-bottom: 200%;
114
+ }
115
+
116
+ .Constrain--1by3 {
117
+ padding-bottom: 300%;
118
+ }
119
+
78
120
  /* Crop gravities
79
121
  ========================================================================== */
80
122
 
package/src/css/components/constrain/image.css ADDED
@@ -0,0 +1,29 @@
1
+ /* =========================================================================== *\
2
+ Image constrain
3
+ \* =========================================================================== */
4
+
5
+ /**
6
+ * Constrains an image of unknown size to the specified aspect ratio.
7
+ *
8
+ * Used in combination with .Constrain classes. An example would be:
9
+ * <div class="ImageConstrain Constrain--16by9"><img src="/my/image/here"></div>
10
+ */
11
+
12
+ /** @define ImageConstrain */
13
+
14
+ .ImageConstrain {
15
+ display: block;
16
+ position: relative;
17
+ width: 100%;
18
+ }
19
+
20
+ /* postcss-bem-linter: ignore */
21
+ .ImageConstrain img {
22
+ height: 100%;
23
+ image-orientation: none;
24
+ left: 0;
25
+ object-fit: cover;
26
+ position: absolute;
27
+ top: 0;
28
+ width: 100%;
29
+ }
package/src/css/components/constrain/index.css CHANGED
@@ -1 +1,2 @@
1
1
  @import './constrain';
2
+ @import './image';
package/src/css/components/container/container.css CHANGED
@@ -15,12 +15,9 @@
15
15
 
16
16
  /**
17
17
  * Fluid and centered by default.
18
- *
19
- * 1. Ensure that the container width includes margins & padding.
20
18
  */
21
19
 
22
20
  .Container {
23
- box-sizing: border-box; /* 1 */
24
21
  margin-left: auto;
25
22
  margin-right: auto;
26
23
  max-width: var(--Container-width);
package/src/css/components/form/selectmenu.css CHANGED
@@ -24,7 +24,6 @@
24
24
  .SelectInput {
25
25
  background: var(--SelectInput-background);
26
26
  border: var(--SelectInput-border);
27
- box-sizing: border-box;
28
27
  color: var(--SelectInput-color);
29
28
  display: inline-block;
30
29
  outline: none;
@@ -58,7 +57,6 @@
58
57
  appearance: none; /* 1 */
59
58
  background: transparent; /* 1 */
60
59
  border: 0; /* 1 */
61
- box-sizing: border-box;
62
60
  display: block;
63
61
  font-family: inherit;
64
62
  margin: 0; /* 1 */
package/src/css/components/form/textinput.css CHANGED
@@ -21,7 +21,6 @@
21
21
  background: var(--TextInput-background);
22
22
  border: var(--TextInput-border);
23
23
  border-radius: 0;
24
- box-sizing: border-box;
25
24
  color: var(--TextInput-color);
26
25
  outline: none;
27
26
  padding: var(--TextInput-padding);
package/src/css/components/grid/grid.css CHANGED
@@ -29,7 +29,6 @@
29
29
  */
30
30
 
31
31
  .Grid {
32
- box-sizing: border-box;
33
32
  display: flex; /* 1 */
34
33
  flex-flow: row wrap;
35
34
  list-style: none; /* 1 */
@@ -135,7 +134,6 @@
135
134
  */
136
135
 
137
136
  .Grid-cell {
138
- box-sizing: inherit;
139
137
  flex: 0 0 100%; /* 1 */
140
138
  margin: 0;
141
139
  padding: 0;
package/src/css/components/image/image.css CHANGED
@@ -17,7 +17,6 @@
17
17
  */
18
18
 
19
19
  .Image {
20
- box-sizing: border-box;
21
20
  height: auto;
22
21
  margin-bottom: var(--Image-spacing);
23
22
  max-width: 100%;
@@ -44,6 +43,10 @@
44
43
  margin-left: 1em;
45
44
  }
46
45
 
46
+ .Image--fullWidth {
47
+ width: 100%;
48
+ }
49
+
47
50
  @media (--c-bp-sm) {
48
51
  .Image--left,
49
52
  .Image--right {
package/src/css/components/image/wrapper.css CHANGED
@@ -6,7 +6,6 @@
6
6
  /* @define ImageWrapper */
7
7
 
8
8
  .ImageWrapper {
9
- box-sizing: border-box;
10
9
  margin-bottom: var(--Image-spacing);
11
10
  }
12
11
 
package/src/css/components/media/media.css CHANGED
@@ -22,7 +22,6 @@
22
22
  ========================================================================== */
23
23
 
24
24
  .Media {
25
- box-sizing: border-box;
26
25
  display: flex;
27
26
  }
28
27
 
package/src/css/components/navigation/dropdown.css CHANGED
@@ -28,7 +28,6 @@
28
28
  .Dropdown-menu {
29
29
  background: var(--Dropdown-background);
30
30
  box-shadow: 0 22px 35px 0 rgba(0, 0, 0, .1);
31
- box-sizing: border-box;
32
31
  display: none;
33
32
  left: 0;
34
33
  list-style: none;
@@ -54,7 +53,6 @@
54
53
  ========================================================================== */
55
54
 
56
55
  .Dropdown-item {
57
- box-sizing: border-box;
58
56
  position: relative;
59
57
  }
60
58
 
@@ -74,7 +72,6 @@
74
72
  ========================================================================== */
75
73
 
76
74
  .Dropdown-link {
77
- box-sizing: border-box;
78
75
  color: var(--Dropdown-link-color);
79
76
  display: block;
80
77
  font-size: var(--Dropdown-fontSize);
package/src/css/components/navigation/footer.css CHANGED
@@ -18,7 +18,6 @@
18
18
  */
19
19
 
20
20
  .FooterNav {
21
- box-sizing: border-box;
22
21
  display: inline-block;
23
22
  font-size: var(--FooterNav-fontSize);
24
23
  line-height: var(--FooterNav-lineHeight);
@@ -33,7 +32,6 @@
33
32
 
34
33
  .FooterNav-item {
35
34
  border-left: 1px solid var(--FooterNav-link-color);
36
- box-sizing: border-box;
37
35
  display: inline-block;
38
36
  padding: 0 20px;
39
37
  }
@@ -48,7 +46,6 @@
48
46
  */
49
47
 
50
48
  .FooterNav-link {
51
- box-sizing: border-box;
52
49
  color: var(--FooterNav-link-color);
53
50
  display: block;
54
51
  text-decoration: none;
package/src/css/components/navigation/mainnav.css CHANGED
@@ -19,7 +19,6 @@
19
19
  */
20
20
 
21
21
  .MainNav {
22
- box-sizing: border-box;
23
22
  display: inline-block;
24
23
  font-family: var(--MainNav-fontFamily);
25
24
  font-size: var(--MainNav-fontSize);
@@ -34,7 +33,6 @@
34
33
  */
35
34
 
36
35
  .MainNav-item {
37
- box-sizing: border-box;
38
36
  display: inline-block;
39
37
  margin-left: 1em;
40
38
  }
@@ -57,7 +55,6 @@
57
55
 
58
56
  .MainNav-link {
59
57
  background: var(--MainNav-link-background);
60
- box-sizing: border-box;
61
58
  color: var(--MainNav-link-color);
62
59
  display: block;
63
60
  padding: .5em 1.5rem;
package/src/css/utils/size/size-lg.css CHANGED
@@ -13,9 +13,6 @@
13
13
  * Specify the proportional width of an object.
14
14
  * Intentional redundancy build into each set of unit classes.
15
15
  * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
16
- *
17
- * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
18
- * http://git.io/vllMD
19
16
  */
20
17
 
21
18
  /* postcss-bem-linter: ignore */
@@ -169,7 +166,6 @@
169
166
 
170
167
  .u-lg-size12of12,
171
168
  .u-lg-sizeFull {
172
- box-sizing: border-box !important;
173
169
  display: block !important;
174
170
  width: 100% !important;
175
171
  }
@@ -180,7 +176,6 @@
180
176
  */
181
177
 
182
178
  .u-lg-sizeAuto {
183
- box-sizing: border-box !important;
184
179
  height: auto !important;
185
180
  width: auto !important;
186
181
  }
package/src/css/utils/size/size-md.css CHANGED
@@ -13,9 +13,6 @@
13
13
  * Specify the proportional width of an object.
14
14
  * Intentional redundancy build into each set of unit classes.
15
15
  * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
16
- *
17
- * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
18
- * http://git.io/vllMD
19
16
  */
20
17
 
21
18
  /* postcss-bem-linter: ignore */
@@ -169,7 +166,6 @@
169
166
 
170
167
  .u-md-size12of12,
171
168
  .u-md-sizeFull {
172
- box-sizing: border-box !important;
173
169
  display: block !important;
174
170
  width: 100% !important;
175
171
  }
@@ -180,7 +176,6 @@
180
176
  */
181
177
 
182
178
  .u-md-sizeAuto {
183
- box-sizing: border-box !important;
184
179
  height: auto !important;
185
180
  width: auto !important;
186
181
  }
package/src/css/utils/size/size-sm.css CHANGED
@@ -13,9 +13,6 @@
13
13
  * Specify the proportional width of an object.
14
14
  * Intentional redundancy build into each set of unit classes.
15
15
  * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
16
- *
17
- * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
18
- * http://git.io/vllMD
19
16
  */
20
17
 
21
18
  /* postcss-bem-linter: ignore */
@@ -169,7 +166,6 @@
169
166
 
170
167
  .u-sm-size12of12,
171
168
  .u-sm-sizeFull {
172
- box-sizing: border-box !important;
173
169
  display: block !important;
174
170
  width: 100% !important;
175
171
  }
@@ -180,7 +176,6 @@
180
176
  */
181
177
 
182
178
  .u-sm-sizeAuto {
183
- box-sizing: border-box !important;
184
179
  height: auto !important;
185
180
  width: auto !important;
186
181
  }
package/src/css/utils/size/size-xs.css CHANGED
@@ -13,9 +13,6 @@
13
13
  * Specify the proportional width of an object.
14
14
  * Intentional redundancy build into each set of unit classes.
15
15
  * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
16
- *
17
- * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
18
- * http://git.io/vllMD
19
16
  */
20
17
 
21
18
  /* postcss-bem-linter: ignore */
@@ -169,7 +166,6 @@
169
166
 
170
167
  .u-xs-size12of12,
171
168
  .u-xs-sizeFull {
172
- box-sizing: border-box !important;
173
169
  display: block !important;
174
170
  width: 100% !important;
175
171
  }
@@ -180,7 +176,6 @@
180
176
  */
181
177
 
182
178
  .u-xs-sizeAuto {
183
- box-sizing: border-box !important;
184
179
  height: auto !important;
185
180
  width: auto !important;
186
181
  }
package/src/css/utils/size/size.css CHANGED
@@ -11,9 +11,6 @@
11
11
  * Specify the proportional width of an object.
12
12
  * Intentional redundancy build into each set of unit classes.
13
13
  * Supports: 2, 3, 4, 5, 6, 8, 10, 12 part
14
- *
15
- * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
16
- * http://git.io/vllMD
17
14
  */
18
15
 
19
16
  /* postcss-bem-linter: ignore */
@@ -165,7 +162,6 @@
165
162
 
166
163
  .u-size12of12,
167
164
  .u-sizeFull {
168
- box-sizing: border-box !important;
169
165
  display: block !important;
170
166
  width: 100% !important;
171
167
  }