cacao-css 3.11.0 → 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.
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.11.0",
4
+ "version": "3.12.0",
5
5
  "main": "gulfile.js",
6
6
  "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
7
7
  "license": "MIT",
@@ -15,3 +15,7 @@
15
15
  @import './marg-left-lg';
16
16
  @import './marg-left-md';
17
17
  @import './marg-left-sm';
18
+ @import './spaced';
19
+ @import './spaced-lg';
20
+ @import './spaced-md';
21
+ @import './spaced-sm';
@@ -0,0 +1,41 @@
1
+ /* ==========================================================================
2
+ Vertical spacing utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-space-lg: 5px;
9
+ }
10
+
11
+ @media (--c-bp-lg) {
12
+ .u-lg-spacedMarg0 {
13
+ margin-bottom: 0 !important;
14
+ margin-top: 0 !important;
15
+ }
16
+
17
+ .u-lg-spacedMarg1 {
18
+ margin-bottom: var(--utils-margin-space-lg) !important;
19
+ margin-top: var(--utils-margin-space-lg) !important;
20
+ }
21
+
22
+ .u-lg-spacedMarg2 {
23
+ margin-bottom: calc(var(--utils-margin-space-lg) * 2) !important;
24
+ margin-top: calc(var(--utils-margin-space-lg) * 2) !important;
25
+ }
26
+
27
+ .u-lg-spacedMarg3 {
28
+ margin-bottom: calc(var(--utils-margin-space-lg) * 3) !important;
29
+ margin-top: calc(var(--utils-margin-space-lg) * 3) !important;
30
+ }
31
+
32
+ .u-lg-spacedMarg4 {
33
+ margin-bottom: calc(var(--utils-margin-space-lg) * 4) !important;
34
+ margin-top: calc(var(--utils-margin-space-lg) * 4) !important;
35
+ }
36
+
37
+ .u-lg-spacedMarg5 {
38
+ margin-bottom: calc(var(--utils-margin-space-lg) * 5) !important;
39
+ margin-top: calc(var(--utils-margin-space-lg) * 5) !important;
40
+ }
41
+ }
@@ -0,0 +1,41 @@
1
+ /* ==========================================================================
2
+ Vertical spacing utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-space-md: 5px;
9
+ }
10
+
11
+ @media (--c-bp-md) {
12
+ .u-md-spacedMarg0 {
13
+ margin-bottom: 0 !important;
14
+ margin-top: 0 !important;
15
+ }
16
+
17
+ .u-md-spacedMarg1 {
18
+ margin-bottom: var(--utils-margin-space-md) !important;
19
+ margin-top: var(--utils-margin-space-md) !important;
20
+ }
21
+
22
+ .u-md-spacedMarg2 {
23
+ margin-bottom: calc(var(--utils-margin-space-md) * 2) !important;
24
+ margin-top: calc(var(--utils-margin-space-md) * 2) !important;
25
+ }
26
+
27
+ .u-md-spacedMarg3 {
28
+ margin-bottom: calc(var(--utils-margin-space-md) * 3) !important;
29
+ margin-top: calc(var(--utils-margin-space-md) * 3) !important;
30
+ }
31
+
32
+ .u-md-spacedMarg4 {
33
+ margin-bottom: calc(var(--utils-margin-space-md) * 4) !important;
34
+ margin-top: calc(var(--utils-margin-space-md) * 4) !important;
35
+ }
36
+
37
+ .u-md-spacedMarg5 {
38
+ margin-bottom: calc(var(--utils-margin-space-md) * 5) !important;
39
+ margin-top: calc(var(--utils-margin-space-md) * 5) !important;
40
+ }
41
+ }
@@ -0,0 +1,41 @@
1
+ /* ==========================================================================
2
+ Vertical spacing utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-space-sm: 5px;
9
+ }
10
+
11
+ @media (--c-bp-sm) {
12
+ .u-sm-spacedMarg0 {
13
+ margin-bottom: 0 !important;
14
+ margin-top: 0 !important;
15
+ }
16
+
17
+ .u-sm-spacedMarg1 {
18
+ margin-bottom: var(--utils-margin-space-sm) !important;
19
+ margin-top: var(--utils-margin-space-sm) !important;
20
+ }
21
+
22
+ .u-sm-spacedMarg2 {
23
+ margin-bottom: calc(var(--utils-margin-space-sm) * 2) !important;
24
+ margin-top: calc(var(--utils-margin-space-sm) * 2) !important;
25
+ }
26
+
27
+ .u-sm-spacedMarg3 {
28
+ margin-bottom: calc(var(--utils-margin-space-sm) * 3) !important;
29
+ margin-top: calc(var(--utils-margin-space-sm) * 3) !important;
30
+ }
31
+
32
+ .u-sm-spacedMarg4 {
33
+ margin-bottom: calc(var(--utils-margin-space-sm) * 4) !important;
34
+ margin-top: calc(var(--utils-margin-space-sm) * 4) !important;
35
+ }
36
+
37
+ .u-sm-spacedMarg5 {
38
+ margin-bottom: calc(var(--utils-margin-space-sm) * 5) !important;
39
+ margin-top: calc(var(--utils-margin-space-sm) * 5) !important;
40
+ }
41
+ }
@@ -0,0 +1,40 @@
1
+ /* ==========================================================================
2
+ Vertical spacing utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-space: 5px;
9
+ }
10
+
11
+ .u-spacedMarg0 {
12
+ margin-bottom: 0 !important;
13
+ margin-top: 0 !important;
14
+ }
15
+
16
+ .u-spacedMarg1 {
17
+ margin-bottom: var(--utils-margin-space) !important;
18
+ margin-top: var(--utils-margin-space) !important;
19
+ }
20
+
21
+ .u-spacedMarg2 {
22
+ margin-bottom: calc(var(--utils-margin-space) * 2) !important;
23
+ margin-top: calc(var(--utils-margin-space) * 2) !important;
24
+ }
25
+
26
+ .u-spacedMarg3 {
27
+ margin-bottom: calc(var(--utils-margin-space) * 3) !important;
28
+ margin-top: calc(var(--utils-margin-space) * 3) !important;
29
+ }
30
+
31
+ .u-spacedMarg4 {
32
+ margin-bottom: calc(var(--utils-margin-space) * 4) !important;
33
+ margin-top: calc(var(--utils-margin-space) * 4) !important;
34
+ }
35
+
36
+ .u-spacedMarg5 {
37
+ margin-bottom: calc(var(--utils-margin-space) * 5) !important;
38
+ margin-top: calc(var(--utils-margin-space) * 5) !important;
39
+ }
40
+
@@ -0,0 +1,25 @@
1
+ /* =========================================================================== *\
2
+ Height utilities
3
+ \* =========================================================================== */
4
+
5
+ .u-heightFull {
6
+ height: 100% !important;
7
+ }
8
+
9
+ @media (--c-bp-lg) {
10
+ .u-lg-heightFull {
11
+ height: 100% !important;
12
+ }
13
+ }
14
+
15
+ @media (--c-bp-md) {
16
+ .u-md-heightFull {
17
+ height: 100% !important;
18
+ }
19
+ }
20
+
21
+ @media (--c-bp-sm) {
22
+ .u-sm-heightFull {
23
+ height: 100% !important;
24
+ }
25
+ }
@@ -1,4 +1,6 @@
1
+ @import './height';
1
2
  @import './size';
2
3
  @import './size-lg';
3
4
  @import './size-md';
4
5
  @import './size-sm';
6
+ @import './width';
@@ -0,0 +1,25 @@
1
+ /* =========================================================================== *\
2
+ Width utilities
3
+ \* =========================================================================== */
4
+
5
+ .u-widthFull {
6
+ width: 100% !important;
7
+ }
8
+
9
+ @media (--c-bp-lg) {
10
+ .u-lg-widthFull {
11
+ width: 100% !important;
12
+ }
13
+ }
14
+
15
+ @media (--c-bp-md) {
16
+ .u-md-widthFull {
17
+ width: 100% !important;
18
+ }
19
+ }
20
+
21
+ @media (--c-bp-sm) {
22
+ .u-sm-widthFull {
23
+ width: 100% !important;
24
+ }
25
+ }