cacao-css 3.17.0 → 3.18.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/base/base.css +16 -3
- package/src/css/components/button/button.css +24 -14
- package/src/css/components/navigation/small-screen-button.css +9 -3
- package/src/css/utils/content/content.css +11 -0
- package/src/css/utils/content/index.css +1 -0
- package/src/css/utils/index.css +1 -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.18.0",
|
|
5
5
|
"main": "gulfile.js",
|
|
6
6
|
"author": "Aptuitiv, Inc <hello@aptuitiv.com>",
|
|
7
7
|
"license": "MIT",
|
package/src/css/base/base.css
CHANGED
|
@@ -103,13 +103,16 @@ textarea {
|
|
|
103
103
|
/**
|
|
104
104
|
* Work around a Firefox/IE bug where the transparent `button` background
|
|
105
105
|
* results in a loss of the default `button` focus styles.
|
|
106
|
+
* Based on SUIT CSS: https://github.com/suitcss/base/blob/master/lib/base.css.
|
|
107
|
+
* Also see https://css-tricks.com/copy-the-browsers-native-focus-styles/ for "Highlight"
|
|
106
108
|
*/
|
|
107
|
-
|
|
108
|
-
button:focus {
|
|
109
|
+
button:focus-visible {
|
|
109
110
|
outline: 1px dotted;
|
|
110
111
|
/* stylelint-disable */
|
|
111
|
-
outline:
|
|
112
|
+
outline: 2px auto Highlight;
|
|
113
|
+
outline: 2px auto -webkit-focus-ring-color;
|
|
112
114
|
/* stylelint-enable */
|
|
115
|
+
outline-offset: 1px;
|
|
113
116
|
}
|
|
114
117
|
|
|
115
118
|
/**
|
|
@@ -130,3 +133,13 @@ button:focus {
|
|
|
130
133
|
*::after {
|
|
131
134
|
box-sizing: border-box;
|
|
132
135
|
}
|
|
136
|
+
|
|
137
|
+
/**
|
|
138
|
+
* Remove the focus outline for mouse uses but preserve for keyboard users with
|
|
139
|
+
* :focus-visible
|
|
140
|
+
* @link https://twitter.com/LeaVerou/status/1045768279753666562
|
|
141
|
+
* @link https://css-tricks.com/the-focus-visible-trick/
|
|
142
|
+
*/
|
|
143
|
+
:focus:not(:focus-visible) {
|
|
144
|
+
outline: none;
|
|
145
|
+
}
|
|
@@ -64,32 +64,37 @@
|
|
|
64
64
|
/**
|
|
65
65
|
* Work around a Firefox/IE bug where the transparent `button` background
|
|
66
66
|
* results in a loss of the default `button` focus styles.
|
|
67
|
+
* Based on SUIT CSS: https://github.com/suitcss/base/blob/master/lib/base.css.
|
|
68
|
+
* Also see https://css-tricks.com/copy-the-browsers-native-focus-styles/ for "Highlight"
|
|
67
69
|
*/
|
|
68
|
-
|
|
69
|
-
.Button:focus {
|
|
70
|
+
.Button:focus-visible {
|
|
70
71
|
outline: 1px dotted;
|
|
71
72
|
/* stylelint-disable */
|
|
72
|
-
outline:
|
|
73
|
+
outline: 2px auto Highlight;
|
|
74
|
+
outline: 2px auto -webkit-focus-ring-color;
|
|
73
75
|
/* stylelint-enable */
|
|
76
|
+
outline-offset: 1px;
|
|
74
77
|
}
|
|
75
78
|
|
|
76
79
|
/**
|
|
77
80
|
* UI States
|
|
78
81
|
*/
|
|
79
82
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
.Button:
|
|
83
|
+
/* Only show hover states if supported */
|
|
84
|
+
@media (hover: hover) and (pointer: fine) {
|
|
85
|
+
.Button:hover:not(:disabled) {
|
|
86
|
+
background: var(--Button-backgroundHover);
|
|
87
|
+
color: var(--Button-colorHover);
|
|
88
|
+
text-decoration: none;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.Button:focus-visible {
|
|
83
93
|
background: var(--Button-backgroundHover);
|
|
84
94
|
color: var(--Button-colorHover);
|
|
85
95
|
text-decoration: none;
|
|
86
96
|
}
|
|
87
97
|
|
|
88
|
-
.Button:focus,
|
|
89
|
-
.Button:active {
|
|
90
|
-
box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
|
|
91
|
-
}
|
|
92
|
-
|
|
93
98
|
.Button:disabled,
|
|
94
99
|
.Button.is-disabled {
|
|
95
100
|
cursor: default;
|
|
@@ -118,9 +123,14 @@
|
|
|
118
123
|
background: #555;
|
|
119
124
|
}
|
|
120
125
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
.Button--secondary:hover {
|
|
126
|
+
/* Only show hover states if supported */
|
|
127
|
+
@media (hover: hover) and (pointer: fine) {
|
|
128
|
+
.Button--secondary:hover {
|
|
129
|
+
background: #333;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.Button--secondary:focus-visible {
|
|
124
134
|
background: #333;
|
|
125
135
|
}
|
|
126
136
|
|
|
@@ -30,9 +30,15 @@
|
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
32
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
.SmScBtn:hover {
|
|
33
|
+
/* Only show hover states if supported */
|
|
34
|
+
@media (hover: hover) and (pointer: fine) {
|
|
35
|
+
.SmScBtn:hover {
|
|
36
|
+
color: #fff;
|
|
37
|
+
text-decoration: none;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.SmScBtn:focus-visible {
|
|
36
42
|
color: #fff;
|
|
37
43
|
text-decoration: none;
|
|
38
44
|
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/* =========================================================================== *\
|
|
2
|
+
Content Utilities
|
|
3
|
+
\* =========================================================================== */
|
|
4
|
+
|
|
5
|
+
/** @define utilities */
|
|
6
|
+
|
|
7
|
+
/* Ensures the last child inside the container has no bottom margin or padding */
|
|
8
|
+
.u-cleanContent > *:last-child {
|
|
9
|
+
margin-bottom: 0 !important;
|
|
10
|
+
padding-bottom: 0 !important;
|
|
11
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import './content';
|