@transferwise/neptune-css 12.5.3 → 12.5.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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-css",
3
3
  "description": "Neptune CSS library",
4
- "version": "12.5.3",
4
+ "version": "12.5.4",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
@@ -56,5 +56,5 @@
56
56
  "bin": {
57
57
  "neptune-css-upgrade-util": "scripts/neptune-css-upgrader.js"
58
58
  },
59
- "gitHead": "995241764a39ef3426c103d759ac5c4cda227a9e"
59
+ "gitHead": "51f8346c28b4c13536c708c4d2e9d11a9ef16254"
60
60
  }
@@ -28,10 +28,10 @@
28
28
 
29
29
  user-select: none;
30
30
 
31
- &:not(.disabled, :disabled):active,
32
- &:not(.disabled, :disabled).active,
33
- &:not(.disabled, :disabled):focus,
34
- &:not(.disabled, :disabled).focus {
31
+ &:not(.disabled, :disabled, .np-dropdown-toggle):active,
32
+ &:not(.disabled, :disabled, .np-dropdown-toggle).active,
33
+ &:not(.disabled, :disabled, .np-dropdown-toggle):focus,
34
+ &:not(.disabled, :disabled, .np-dropdown-toggle).focus {
35
35
  .tab-focus();
36
36
 
37
37
  outline-offset: -2px;
@@ -157,10 +157,6 @@ output {
157
157
  // Remove iOS drop shadow
158
158
  background-clip: padding-box;
159
159
 
160
- &:not(.disabled, :disabled):hover {
161
- border-color: var(--color-interactive-secondary-hover);
162
- }
163
-
164
160
  // Customize the `:focus` state to imitate native WebKit styles.
165
161
  .form-control-focus();
166
162
 
@@ -873,7 +869,7 @@ input[type='checkbox'] {
873
869
  transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
874
870
 
875
871
  &:not(.disabled, :disabled):hover {
876
- border-color: var(--color-interactive-accent-hover);
872
+ border-color: var(--color-interactive-secondary-hover);
877
873
  }
878
874
 
879
875
  &:not(.disabled, :disabled).focus,
@@ -44,7 +44,7 @@
44
44
  &:not(.disabled, :disabled):hover,
45
45
  input[type="checkbox"]:hover + &,
46
46
  .checkbox:hover & {
47
- border-color: var(--color-interactive-secondary);
47
+ border-color: var(--color-interactive-secondary-hover);
48
48
  }
49
49
 
50
50
  &:not(.disabled, :disabled):focus,
@@ -49,15 +49,6 @@
49
49
  }
50
50
 
51
51
  border-color: var(--color-interactive-secondary);
52
-
53
- :not(.disabled, :disabled):hover& {
54
- border-color: var(--color-interactive-secondary-hover);
55
- }
56
-
57
- &:not(.disabled, :disabled):active,
58
- &:not(.disabled, :disabled):focus {
59
- border-color: var(--color-interactive-accent-active);
60
- }
61
52
  }
62
53
 
63
54
  .input-group-addon + .form-control {
@@ -67,17 +58,6 @@
67
58
  .form-control + .input-group-addon {
68
59
  .padding(left, 0);
69
60
  }
70
-
71
- &:active,
72
- &:focus,
73
- .focus & {
74
- .input-group-addon,
75
- .form-control,
76
- .btn-input,
77
- .bootstrap-select .btn-default {
78
- border-color: var(--color-interactive-accent-active);
79
- }
80
- }
81
61
  }
82
62
 
83
63
  // Sizing options
@@ -248,20 +228,33 @@
248
228
  }
249
229
  }
250
230
 
251
- // TODO deprecate
252
- .focus .input-group,
253
- .has-focus .input-group,
254
- .input-group:focus-within {
231
+ // inputs focus and hover states (not disabled)
232
+ .input-group:hover:not(.disabled,:disabled) {
255
233
  .form-control,
256
- .input-group-addon {
257
- border-color: var(--color-interactive-accent);
234
+ .input-group-addon,
235
+ .btn-input,
236
+ .bootstrap-select .btn-default {
237
+ border-color: var(--color-interactive-secondary-hover);
238
+ }
239
+ }
258
240
 
259
- &:hover {
260
- border-color: var(--color-interactive-accent-hover);
261
- }
241
+ .form-control:hover:not(.disabled,:disabled) {
242
+ border-color: var(--color-interactive-secondary-hover);
243
+ }
244
+
245
+ .input-group:focus-within:not(.disabled,:disabled) {
246
+ .form-control,
247
+ .input-group-addon,
248
+ .btn-input,
249
+ .bootstrap-select .btn-default {
250
+ border-color: var(--color-interactive-accent);
262
251
  }
263
252
  }
264
253
 
254
+ .form-control:focus-within:not(.disabled,:disabled) {
255
+ border-color: var(--color-interactive-accent);
256
+ }
257
+
265
258
  .has-error .input-group {
266
259
  .form-control,
267
260
  .input-group-addon {