@citizenplane/pimp 18.9.3 → 18.9.4
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/dist/components/CpButton.vue.d.ts.map +1 -1
- package/dist/components/CpButtonToggle.vue.d.ts.map +1 -1
- package/dist/components/CpSelectableButton.vue.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/CpButton.vue +11 -9
- package/src/components/CpButtonToggle.vue +2 -3
- package/src/components/CpSelectableButton.vue +1 -2
package/package.json
CHANGED
|
@@ -115,10 +115,12 @@ const handleClick = (event: MouseEvent) => {
|
|
|
115
115
|
background-color: $hoverBackgroundColor;
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
&:focus,
|
|
119
118
|
&:focus-visible,
|
|
120
119
|
&:active {
|
|
121
120
|
background-color: $hoverBackgroundColor;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&:focus-visible {
|
|
122
124
|
outline: fn.px-to-rem(2) solid $hoverBackgroundColor;
|
|
123
125
|
}
|
|
124
126
|
}
|
|
@@ -141,10 +143,12 @@ const handleClick = (event: MouseEvent) => {
|
|
|
141
143
|
0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
|
|
142
144
|
}
|
|
143
145
|
|
|
144
|
-
&:focus,
|
|
145
146
|
&:focus-visible,
|
|
146
147
|
&:active {
|
|
147
148
|
background-color: var(--cp-background-primary-hover);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&:focus-visible {
|
|
148
152
|
outline: fn.px-to-rem(2) solid var(--cp-background-primary-hover);
|
|
149
153
|
}
|
|
150
154
|
}
|
|
@@ -162,10 +166,12 @@ const handleClick = (event: MouseEvent) => {
|
|
|
162
166
|
color: $hoverColor;
|
|
163
167
|
}
|
|
164
168
|
|
|
165
|
-
&:focus,
|
|
166
169
|
&:focus-visible,
|
|
167
170
|
&:active {
|
|
168
171
|
color: $hoverColor;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
&:focus-visible {
|
|
169
175
|
outline: fn.px-to-rem(2) solid $color;
|
|
170
176
|
}
|
|
171
177
|
}
|
|
@@ -180,7 +186,7 @@ const handleClick = (event: MouseEvent) => {
|
|
|
180
186
|
line-height: var(--cp-line-height-md);
|
|
181
187
|
outline-offset: fn.px-to-rem(2);
|
|
182
188
|
text-decoration: none;
|
|
183
|
-
transition-duration:
|
|
189
|
+
transition-duration: 250ms;
|
|
184
190
|
transition-property: box-shadow, background-color, transform, width;
|
|
185
191
|
transition-timing-function: ease;
|
|
186
192
|
|
|
@@ -196,12 +202,8 @@ const handleClick = (event: MouseEvent) => {
|
|
|
196
202
|
color: var(--cp-text-primary);
|
|
197
203
|
}
|
|
198
204
|
|
|
199
|
-
&:hover {
|
|
200
|
-
transform: translateY(fn.px-to-rem(-1));
|
|
201
|
-
}
|
|
202
|
-
|
|
203
205
|
&:active {
|
|
204
|
-
transform:
|
|
206
|
+
transform: scale3d(0.97, 0.97, 1);
|
|
205
207
|
}
|
|
206
208
|
|
|
207
209
|
// Primary appearance
|
|
@@ -88,18 +88,17 @@ const handleClick = (event: MouseEvent) => {
|
|
|
88
88
|
color: var(--cp-text-disabled);
|
|
89
89
|
cursor: not-allowed;
|
|
90
90
|
}
|
|
91
|
-
|
|
91
|
+
|
|
92
92
|
&:hover:not(:disabled) {
|
|
93
93
|
background-color: var(--cp-background-primary-hover);
|
|
94
94
|
box-shadow:
|
|
95
95
|
var(--cp-shadows-3xs-inset),
|
|
96
96
|
0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
|
|
97
97
|
color: var(--cp-text-secondary-hover);
|
|
98
|
-
transform: translateY(fn.px-to-rem(-1));
|
|
99
98
|
}
|
|
100
99
|
|
|
101
100
|
&:active:not(:disabled) {
|
|
102
|
-
transform:
|
|
101
|
+
transform: scale3d(0.97, 0.97, 1);
|
|
103
102
|
}
|
|
104
103
|
|
|
105
104
|
&__leading {
|
|
@@ -135,7 +135,6 @@ const dynamicClasses = computed(() => {
|
|
|
135
135
|
var(--cp-selectable-box-shadow),
|
|
136
136
|
0 0 0 var(--cp-dimensions-0_25) var(--cp-selectable-border-color-hover);
|
|
137
137
|
color: var(--cp-selectable-text-color-hover);
|
|
138
|
-
transform: translateY(var(--cp-dimensions-minus-0_25));
|
|
139
138
|
|
|
140
139
|
& > .cpSelectableButton__body {
|
|
141
140
|
background-color: var(--cp-selectable-body-background-color-hover);
|
|
@@ -143,7 +142,7 @@ const dynamicClasses = computed(() => {
|
|
|
143
142
|
}
|
|
144
143
|
|
|
145
144
|
&:active:not(.cpSelectableButton--isDisabled) {
|
|
146
|
-
transform:
|
|
145
|
+
transform: scale3d(0.97, 0.97, 1);
|
|
147
146
|
}
|
|
148
147
|
|
|
149
148
|
&__icon i,
|