cacao-css 3.18.0 → 3.19.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 (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +1 -1
  3. package/src/css/components/navigation/responsive-overlay.css +26 -9
  4. package/src/css/components/navigation/responsive-pushdown.css +26 -9
  5. package/src/css/components/navigation/sidebar.css +8 -3
  6. package/src/css/components/pagination/pagination.css +9 -3
  7. package/src/css/utils/link/link.css +22 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.19.0 (April 28, 2023)
4
+
5
+ - Updated more hover states to only be applied if hover is supported by the device.
6
+
7
+ ## 3.18.0 (April 28, 2023)
8
+
9
+ - Updated hover states to only be applied if hover is supported by the device.
10
+
3
11
  ## 3.17.0 (July 28, 2022)
4
12
 
5
13
  - Added u-size1of1 as an alternate class to u-sizeFull.
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.18.0",
4
+ "version": "3.19.0",
5
5
  "main": "gulfile.js",
6
6
  "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
7
7
  "license": "MIT",
package/src/css/components/navigation/responsive-overlay.css CHANGED
@@ -54,10 +54,16 @@
54
54
  transform: translateY(-50%) rotate(90deg);
55
55
  }
56
56
 
57
+ @media (hover: hover) and (pointer: fine) {
58
+ .MainNav-link:hover {
59
+ background: rgba(0, 0, 0, .1);
60
+ color: inherit;
61
+ text-decoration: none;
62
+ }
63
+ }
64
+
57
65
  .MainNav-link.is-active,
58
- .MainNav-link:active,
59
- .MainNav-link:focus,
60
- .MainNav-link:hover {
66
+ .MainNav-link:focus-visible {
61
67
  background: rgba(0, 0, 0, .1);
62
68
  color: inherit;
63
69
  text-decoration: none;
@@ -88,17 +94,28 @@
88
94
  white-space: normal;
89
95
  }
90
96
 
91
- .Dropdown-link:active,
92
- .Dropdown-link:hover,
93
- .Dropdown-link:focus {
97
+ @media (hover: hover) and (pointer: fine) {
98
+ .Dropdown-link:hover {
99
+ color: var(--Dropdown-link-color);
100
+ text-decoration: none;
101
+ }
102
+ }
103
+
104
+ .Dropdown-link:focus-visible {
94
105
  color: var(--Dropdown-link-color);
95
106
  text-decoration: none;
96
107
  }
97
108
 
109
+ @media (hover: hover) and (pointer: fine) {
110
+ .Dropdown-link--parent:hover {
111
+ background: rgba(0, 0, 0, .1);
112
+ color: inherit;
113
+ text-decoration: none;
114
+ }
115
+ }
116
+
98
117
  .Dropdown-link--parent.is-active,
99
- .Dropdown-link--parent:active,
100
- .Dropdown-link--parent:focus,
101
- .Dropdown-link--parent:hover,
118
+ .Dropdown-link--parent:focus-visible,
102
119
  .Dropdown-link--parent.is-active + .Dropdown-menu {
103
120
  background: rgba(0, 0, 0, .1);
104
121
  color: inherit;
package/src/css/components/navigation/responsive-pushdown.css CHANGED
@@ -56,10 +56,16 @@
56
56
  transform: translateY(-50%) rotate(90deg);
57
57
  }
58
58
 
59
+ @media (hover: hover) and (pointer: fine) {
60
+ .MainNav-link:hover {
61
+ background: rgba(0, 0, 0, .1);
62
+ color: inherit;
63
+ text-decoration: none;
64
+ }
65
+ }
66
+
59
67
  .MainNav-link.is-active,
60
- .MainNav-link:active,
61
- .MainNav-link:focus,
62
- .MainNav-link:hover {
68
+ .MainNav-link:focus-visible {
63
69
  background: rgba(0, 0, 0, .1);
64
70
  color: inherit;
65
71
  text-decoration: none;
@@ -90,17 +96,28 @@
90
96
  white-space: normal;
91
97
  }
92
98
 
93
- .Dropdown-link:active,
94
- .Dropdown-link:hover,
95
- .Dropdown-link:focus {
99
+ @media (hover: hover) and (pointer: fine) {
100
+ .Dropdown-link:hover {
101
+ color: var(--Dropdown-link-color);
102
+ text-decoration: none;
103
+ }
104
+ }
105
+
106
+ .Dropdown-link:focus-visible {
96
107
  color: var(--Dropdown-link-color);
97
108
  text-decoration: none;
98
109
  }
99
110
 
111
+ @media (hover: hover) and (pointer: fine) {
112
+ .Dropdown-link--parent:hover {
113
+ background: rgba(0, 0, 0, .1);
114
+ color: inherit;
115
+ text-decoration: none;
116
+ }
117
+ }
118
+
100
119
  .Dropdown-link--parent.is-active,
101
- .Dropdown-link--parent:active,
102
- .Dropdown-link--parent:focus,
103
- .Dropdown-link--parent:hover,
120
+ .Dropdown-link--parent:focus-visible,
104
121
  .Dropdown-link--parent.is-active + .Dropdown-menu {
105
122
  background: rgba(0, 0, 0, .1);
106
123
  color: inherit;
package/src/css/components/navigation/sidebar.css CHANGED
@@ -25,9 +25,14 @@
25
25
  text-decoration: none;
26
26
  }
27
27
 
28
- .SidebarNav-link:active,
29
- .SidebarNav-link:focus,
30
- .SidebarNav-link:hover {
28
+ @media (hover: hover) and (pointer: fine) {
29
+ .SidebarNav-link:hover {
30
+ color: #333;
31
+ text-decoration: none;
32
+ }
33
+ }
34
+
35
+ .SidebarNav-link:focus-visible {
31
36
  color: #333;
32
37
  text-decoration: none;
33
38
  }
package/src/css/components/pagination/pagination.css CHANGED
@@ -17,9 +17,15 @@
17
17
  text-decoration: none;
18
18
  }
19
19
 
20
- .Pagination-item:active,
21
- .Pagination-item:focus,
22
- .Pagination-item:hover {
20
+ @media (hover: hover) and (pointer: fine) {
21
+ .Pagination-item:hover {
22
+ background: #666;
23
+ color: #fff;
24
+ text-decoration: none;
25
+ }
26
+ }
27
+
28
+ .Pagination-item:focus-visible {
23
29
  background: #666;
24
30
  color: #fff;
25
31
  text-decoration: none;
package/src/css/utils/link/link.css CHANGED
@@ -9,10 +9,15 @@
9
9
  * Reset all link styles
10
10
  */
11
11
 
12
+ @media (hover: hover) and (pointer: fine) {
13
+ .u-linkClean:hover {
14
+ color: inherit !important;
15
+ text-decoration: none !important;
16
+ }
17
+ }
18
+
12
19
  .u-linkClean,
13
- .u-linkClean:hover,
14
- .u-linkClean:focus,
15
- .u-linkClean:active {
20
+ .u-linkClean:focus-visible {
16
21
  color: inherit !important;
17
22
  text-decoration: none !important;
18
23
  }
@@ -66,15 +71,23 @@
66
71
  * </a>
67
72
  */
68
73
 
74
+ @media (hover: hover) and (pointer: fine) {
75
+ .u-linkComplex:hover {
76
+ text-decoration: none !important;
77
+ }
78
+ }
79
+
69
80
  .u-linkComplex,
70
- .u-linkComplex:hover,
71
- .u-linkComplex:focus,
72
- .u-linkComplex:active {
81
+ .u-linkComplex:focus-visible {
73
82
  text-decoration: none !important;
74
83
  }
75
84
 
76
- .u-linkComplex:hover .u-linkComplexTarget,
77
- .u-linkComplex:focus .u-linkComplexTarget,
78
- .u-linkComplex:active .u-linkComplexTarget {
85
+ @media (hover: hover) and (pointer: fine) {
86
+ .u-linkComplex:hover .u-linkComplexTarget {
87
+ text-decoration: underline !important;
88
+ }
89
+ }
90
+
91
+ .u-linkComplex:focus-visible .u-linkComplexTarget {
79
92
  text-decoration: underline !important;
80
93
  }