cacao-css 3.18.0 → 3.20.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 (9) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/package.json +1 -1
  3. package/src/css/base/typography.css +13 -7
  4. package/src/css/components/navigation/footer.css +5 -3
  5. package/src/css/components/navigation/responsive-overlay.css +26 -9
  6. package/src/css/components/navigation/responsive-pushdown.css +26 -9
  7. package/src/css/components/navigation/sidebar.css +8 -3
  8. package/src/css/components/pagination/pagination.css +9 -3
  9. package/src/css/utils/link/link.css +26 -11
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # Changelog
2
2
 
3
+ ## 3.20.0 (April 28, 2023)
4
+
5
+ - Take 3.... Updated more hover states to only be applied if hover is supported by the device.
6
+
7
+ ## 3.19.0 (April 28, 2023)
8
+
9
+ - Take 2.... Updated more hover states to only be applied if hover is supported by the device.
10
+
11
+ ## 3.18.0 (April 28, 2023)
12
+
13
+ - Updated hover states to only be applied if hover is supported by the device.
14
+
3
15
  ## 3.17.0 (July 28, 2022)
4
16
 
5
17
  - 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.20.0",
5
5
  "main": "gulfile.js",
6
6
  "author": "Aptuitiv, Inc <hello@aptuitiv.com>",
7
7
  "license": "MIT",
package/src/css/base/typography.css CHANGED
@@ -130,22 +130,28 @@ a {
130
130
  text-decoration: var(--base-typography-link-decoration);
131
131
  }
132
132
 
133
- a:hover {
134
- color: var(--base-typography-link-colorHover);
135
- text-decoration: var(--base-typography-link-decorationHover);
133
+ @media (hover: hover) and (pointer: fine) {
134
+ a:hover {
135
+ color: var(--base-typography-link-colorHover);
136
+ text-decoration: var(--base-typography-link-decorationHover);
137
+ }
136
138
  }
137
139
 
138
140
  /**
139
141
  * Default styling for telephone links to not look like links
140
142
  */
141
- a[href^=tel],
142
- a[href^=tel]:active,
143
- a[href^=tel]:focus,
144
- a[href^=tel]:hover {
143
+ a[href^=tel] {
145
144
  color: inherit;
146
145
  text-decoration: none;
147
146
  }
148
147
 
148
+ @media (hover: hover) and (pointer: fine) {
149
+ a[href^=tel]:hover {
150
+ color: inherit;
151
+ text-decoration: none;
152
+ }
153
+ }
154
+
149
155
  /**
150
156
  * Lists
151
157
  */
package/src/css/components/navigation/footer.css CHANGED
@@ -51,7 +51,9 @@
51
51
  text-decoration: none;
52
52
  }
53
53
 
54
- .FooterNav-link:hover {
55
- color: var(--FooterNav-link-colorHover);
56
- text-decoration: underline;
54
+ @media (hover: hover) and (pointer: fine) {
55
+ .FooterNav-link:hover {
56
+ color: var(--FooterNav-link-colorHover);
57
+ text-decoration: underline;
58
+ }
57
59
  }
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
  }
@@ -47,8 +52,10 @@
47
52
  text-decoration: none !important;
48
53
  }
49
54
 
50
- .u-linkSubtle:hover {
51
- text-decoration: underline !important;
55
+ @media (hover: hover) and (pointer: fine) {
56
+ .u-linkSubtle:hover {
57
+ text-decoration: underline !important;
58
+ }
52
59
  }
53
60
 
54
61
  /**
@@ -66,15 +73,23 @@
66
73
  * </a>
67
74
  */
68
75
 
76
+ @media (hover: hover) and (pointer: fine) {
77
+ .u-linkComplex:hover {
78
+ text-decoration: none !important;
79
+ }
80
+ }
81
+
69
82
  .u-linkComplex,
70
- .u-linkComplex:hover,
71
- .u-linkComplex:focus,
72
- .u-linkComplex:active {
83
+ .u-linkComplex:focus-visible {
73
84
  text-decoration: none !important;
74
85
  }
75
86
 
76
- .u-linkComplex:hover .u-linkComplexTarget,
77
- .u-linkComplex:focus .u-linkComplexTarget,
78
- .u-linkComplex:active .u-linkComplexTarget {
87
+ @media (hover: hover) and (pointer: fine) {
88
+ .u-linkComplex:hover .u-linkComplexTarget {
89
+ text-decoration: underline !important;
90
+ }
91
+ }
92
+
93
+ .u-linkComplex:focus-visible .u-linkComplexTarget {
79
94
  text-decoration: underline !important;
80
95
  }