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.
@@ -1 +1,2 @@
1
1
  @import './flex';
2
+ @import './flex-responsive.css';
@@ -7,3 +7,15 @@
7
7
  @import './marg-top-lg';
8
8
  @import './marg-top-md';
9
9
  @import './marg-top-sm';
10
+ @import './marg-right';
11
+ @import './marg-right-lg';
12
+ @import './marg-right-md';
13
+ @import './marg-right-sm';
14
+ @import './marg-left';
15
+ @import './marg-left-lg';
16
+ @import './marg-left-md';
17
+ @import './marg-left-sm';
18
+ @import './spaced';
19
+ @import './spaced-lg';
20
+ @import './spaced-md';
21
+ @import './spaced-sm';
@@ -0,0 +1,35 @@
1
+ /* ==========================================================================
2
+ Left margin utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-lg-left: 10px;
9
+ }
10
+
11
+ @media (--c-bp-lg) {
12
+ .u-lg-margLeft0 {
13
+ margin-left: 0 !important;
14
+ }
15
+
16
+ .u-lg-margLeft1 {
17
+ margin-left: var(--utils-margin-lg-left) !important;
18
+ }
19
+
20
+ .u-lg-margLeft2 {
21
+ margin-left: calc(var(--utils-margin-lg-left) * 2) !important;
22
+ }
23
+
24
+ .u-lg-margLeft3 {
25
+ margin-left: calc(var(--utils-margin-lg-left) * 3) !important;
26
+ }
27
+
28
+ .u-lg-margLeft4 {
29
+ margin-left: calc(var(--utils-margin-lg-left) * 4) !important;
30
+ }
31
+
32
+ .u-lg-margLeft5 {
33
+ margin-left: calc(var(--utils-margin-lg-left) * 5) !important;
34
+ }
35
+ }
@@ -0,0 +1,35 @@
1
+ /* ==========================================================================
2
+ Left margin utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-md-left: 10px;
9
+ }
10
+
11
+ @media (--c-bp-md) {
12
+ .u-md-margLeft0 {
13
+ margin-left: 0 !important;
14
+ }
15
+
16
+ .u-md-margLeft1 {
17
+ margin-left: var(--utils-margin-md-left) !important;
18
+ }
19
+
20
+ .u-md-margLeft2 {
21
+ margin-left: calc(var(--utils-margin-md-left) * 2) !important;
22
+ }
23
+
24
+ .u-md-margLeft3 {
25
+ margin-left: calc(var(--utils-margin-md-left) * 3) !important;
26
+ }
27
+
28
+ .u-md-margLeft4 {
29
+ margin-left: calc(var(--utils-margin-md-left) * 4) !important;
30
+ }
31
+
32
+ .u-md-margLeft5 {
33
+ margin-left: calc(var(--utils-margin-md-left) * 5) !important;
34
+ }
35
+ }
@@ -0,0 +1,35 @@
1
+ /* ==========================================================================
2
+ Left margin utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-sm-left: 10px;
9
+ }
10
+
11
+ @media (--c-bp-sm) {
12
+ .u-sm-margLeft0 {
13
+ margin-left: 0 !important;
14
+ }
15
+
16
+ .u-sm-margLeft1 {
17
+ margin-left: var(--utils-margin-sm-left) !important;
18
+ }
19
+
20
+ .u-sm-margLeft2 {
21
+ margin-left: calc(var(--utils-margin-sm-left) * 2) !important;
22
+ }
23
+
24
+ .u-sm-margLeft3 {
25
+ margin-left: calc(var(--utils-margin-sm-left) * 3) !important;
26
+ }
27
+
28
+ .u-sm-margLeft4 {
29
+ margin-left: calc(var(--utils-margin-sm-left) * 4) !important;
30
+ }
31
+
32
+ .u-sm-margLeft5 {
33
+ margin-left: calc(var(--utils-margin-sm-left) * 5) !important;
34
+ }
35
+ }
@@ -0,0 +1,34 @@
1
+ /* ==========================================================================
2
+ Left margin utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-left: 10px;
9
+ }
10
+
11
+ .u-margLeft0 {
12
+ margin-left: 0 !important;
13
+ }
14
+
15
+ .u-margLeft1 {
16
+ margin-left: var(--utils-margin-left) !important;
17
+ }
18
+
19
+ .u-margLeft2 {
20
+ margin-left: calc(var(--utils-margin-left) * 2) !important;
21
+ }
22
+
23
+ .u-margLeft3 {
24
+ margin-left: calc(var(--utils-margin-left) * 3) !important;
25
+ }
26
+
27
+ .u-margLeft4 {
28
+ margin-left: calc(var(--utils-margin-left) * 4) !important;
29
+ }
30
+
31
+ .u-margLeft5 {
32
+ margin-left: calc(var(--utils-margin-left) * 5) !important;
33
+ }
34
+
@@ -0,0 +1,35 @@
1
+ /* ==========================================================================
2
+ Right margin utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-lg-right: 10px;
9
+ }
10
+
11
+ @media (--c-bp-lg) {
12
+ .u-lg-margRight0 {
13
+ margin-right: 0 !important;
14
+ }
15
+
16
+ .u-lg-margRight1 {
17
+ margin-right: var(--utils-margin-lg-right) !important;
18
+ }
19
+
20
+ .u-lg-margRight2 {
21
+ margin-right: calc(var(--utils-margin-lg-right) * 2) !important;
22
+ }
23
+
24
+ .u-lg-margRight3 {
25
+ margin-right: calc(var(--utils-margin-lg-right) * 3) !important;
26
+ }
27
+
28
+ .u-lg-margRight4 {
29
+ margin-right: calc(var(--utils-margin-lg-right) * 4) !important;
30
+ }
31
+
32
+ .u-lg-margRight5 {
33
+ margin-right: calc(var(--utils-margin-lg-right) * 5) !important;
34
+ }
35
+ }
@@ -0,0 +1,35 @@
1
+ /* ==========================================================================
2
+ Right margin utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-md-right: 10px;
9
+ }
10
+
11
+ @media (--c-bp-md) {
12
+ .u-md-margRight0 {
13
+ margin-right: 0 !important;
14
+ }
15
+
16
+ .u-md-margRight1 {
17
+ margin-right: var(--utils-margin-md-right) !important;
18
+ }
19
+
20
+ .u-md-margRight2 {
21
+ margin-right: calc(var(--utils-margin-md-right) * 2) !important;
22
+ }
23
+
24
+ .u-md-margRight3 {
25
+ margin-right: calc(var(--utils-margin-md-right) * 3) !important;
26
+ }
27
+
28
+ .u-md-margRight4 {
29
+ margin-right: calc(var(--utils-margin-md-right) * 4) !important;
30
+ }
31
+
32
+ .u-md-margRight5 {
33
+ margin-right: calc(var(--utils-margin-md-right) * 5) !important;
34
+ }
35
+ }
@@ -0,0 +1,35 @@
1
+ /* ==========================================================================
2
+ Right margin utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-sm-right: 10px;
9
+ }
10
+
11
+ @media (--c-bp-sm) {
12
+ .u-sm-margRight0 {
13
+ margin-right: 0 !important;
14
+ }
15
+
16
+ .u-sm-margRight1 {
17
+ margin-right: var(--utils-margin-sm-right) !important;
18
+ }
19
+
20
+ .u-sm-margRight2 {
21
+ margin-right: calc(var(--utils-margin-sm-right) * 2) !important;
22
+ }
23
+
24
+ .u-sm-margRight3 {
25
+ margin-right: calc(var(--utils-margin-sm-right) * 3) !important;
26
+ }
27
+
28
+ .u-sm-margRight4 {
29
+ margin-right: calc(var(--utils-margin-sm-right) * 4) !important;
30
+ }
31
+
32
+ .u-sm-margRight5 {
33
+ margin-right: calc(var(--utils-margin-sm-right) * 5) !important;
34
+ }
35
+ }
@@ -0,0 +1,34 @@
1
+ /* ==========================================================================
2
+ Right margin utilities
3
+ ========================================================================== */
4
+
5
+ /** @define utilities */
6
+
7
+ :root {
8
+ --utils-margin-right: 10px;
9
+ }
10
+
11
+ .u-margRight0 {
12
+ margin-right: 0 !important;
13
+ }
14
+
15
+ .u-margRight1 {
16
+ margin-right: var(--utils-margin-right) !important;
17
+ }
18
+
19
+ .u-margRight2 {
20
+ margin-right: calc(var(--utils-margin-right) * 2) !important;
21
+ }
22
+
23
+ .u-margRight3 {
24
+ margin-right: calc(var(--utils-margin-right) * 3) !important;
25
+ }
26
+
27
+ .u-margRight4 {
28
+ margin-right: calc(var(--utils-margin-right) * 4) !important;
29
+ }
30
+
31
+ .u-margRight5 {
32
+ margin-right: calc(var(--utils-margin-right) * 5) !important;
33
+ }
34
+
@@ -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
+ }
@@ -194,7 +194,7 @@
194
194
  */
195
195
 
196
196
  .u-textBreak {
197
- word-wrap: break-word !important;
197
+ overflow-wrap: break-word !important;
198
198
  }
199
199
 
200
200
  /**