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 +1 -1
- package/src/css/utils/margin/index.css +4 -0
- package/src/css/utils/margin/spaced-lg.css +41 -0
- package/src/css/utils/margin/spaced-md.css +41 -0
- package/src/css/utils/margin/spaced-sm.css +41 -0
- package/src/css/utils/margin/spaced.css +40 -0
- package/src/css/utils/size/height.css +25 -0
- package/src/css/utils/size/index.css +2 -0
- package/src/css/utils/size/width.css +25 -0
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.
|
|
4
|
+
"version": "3.12.0",
|
|
5
5
|
"main": "gulfile.js",
|
|
6
6
|
"author": "Aptuitiv, Inc <hello@aptuitiv.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -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
|
+
}
|
|
@@ -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
|
+
}
|