@transferwise/components 0.0.0-experimental-9d119e3 → 0.0.0-experimental-e0e44ba

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 (10) hide show
  1. package/build/main.css +16 -13
  2. package/build/styles/main.css +16 -13
  3. package/build/styles/uploadInput/UploadInput.css +0 -1
  4. package/build/styles/uploadInput/uploadItem/UploadItem.css +16 -12
  5. package/package.json +1 -1
  6. package/src/main.css +16 -13
  7. package/src/uploadInput/UploadInput.css +0 -1
  8. package/src/uploadInput/UploadInput.less +0 -1
  9. package/src/uploadInput/uploadItem/UploadItem.css +16 -12
  10. package/src/uploadInput/uploadItem/UploadItem.less +19 -13
package/build/main.css CHANGED
@@ -5567,7 +5567,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5567
5567
  }
5568
5568
  .np-upload-input .np-upload-input__section {
5569
5569
  margin: 0;
5570
- overflow: hidden;
5571
5570
  }
5572
5571
  .np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
5573
5572
  border-radius: 10px;
@@ -5643,27 +5642,21 @@ html:not([dir="rtl"]) .np-navigation-option {
5643
5642
  }
5644
5643
  .np-upload-input__item .np-upload-input__item-action {
5645
5644
  --iconSize: var(--size-24);
5646
- --clickArea: 44px;
5645
+ --clickAreaSize: 44px;
5646
+ --buttonTopRightOffset: var(--size-16);
5647
+ --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
5647
5648
  position: absolute;
5648
5649
  right: 16px;
5649
- right: var(--size-16);
5650
+ right: var(--buttonTopRightOffset);
5650
5651
  top: 16px;
5651
- top: var(--size-16);
5652
+ top: var(--buttonTopRightOffset);
5652
5653
  }
5653
5654
  @media (max-width: 320px) {
5654
5655
  .np-upload-input__item .np-upload-input__item-action {
5655
5656
  --iconSize: var(--size-48);
5657
+ --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
5656
5658
  }
5657
5659
  }
5658
- .np-upload-input__item .np-upload-input__item-action :before {
5659
- content: '';
5660
- display: block;
5661
- width: var(--clickArea);
5662
- height: var(--clickArea);
5663
- border-radius: 50%;
5664
- position: absolute;
5665
- inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
5666
- }
5667
5660
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
5668
5661
  -webkit-appearance: none;
5669
5662
  -moz-appearance: none;
@@ -5683,6 +5676,16 @@ html:not([dir="rtl"]) .np-navigation-option {
5683
5676
  align-items: center;
5684
5677
  justify-content: center;
5685
5678
  }
5679
+ .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
5680
+ content: '';
5681
+ display: block;
5682
+ width: var(--clickAreaSize);
5683
+ height: var(--clickAreaSize);
5684
+ border-radius: 50%;
5685
+ position: absolute;
5686
+ top: var(--clickAreaTopRightOffset);
5687
+ right: var(--clickAreaTopRightOffset);
5688
+ }
5686
5689
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
5687
5690
  background-color: var(--color-sentiment-negative);
5688
5691
  color: var(--color-contrast-overlay) !important;
package/build/styles/main.css CHANGED
@@ -5567,7 +5567,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5567
5567
  }
5568
5568
  .np-upload-input .np-upload-input__section {
5569
5569
  margin: 0;
5570
- overflow: hidden;
5571
5570
  }
5572
5571
  .np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
5573
5572
  border-radius: 10px;
@@ -5643,27 +5642,21 @@ html:not([dir="rtl"]) .np-navigation-option {
5643
5642
  }
5644
5643
  .np-upload-input__item .np-upload-input__item-action {
5645
5644
  --iconSize: var(--size-24);
5646
- --clickArea: 44px;
5645
+ --clickAreaSize: 44px;
5646
+ --buttonTopRightOffset: var(--size-16);
5647
+ --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
5647
5648
  position: absolute;
5648
5649
  right: 16px;
5649
- right: var(--size-16);
5650
+ right: var(--buttonTopRightOffset);
5650
5651
  top: 16px;
5651
- top: var(--size-16);
5652
+ top: var(--buttonTopRightOffset);
5652
5653
  }
5653
5654
  @media (max-width: 320px) {
5654
5655
  .np-upload-input__item .np-upload-input__item-action {
5655
5656
  --iconSize: var(--size-48);
5657
+ --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
5656
5658
  }
5657
5659
  }
5658
- .np-upload-input__item .np-upload-input__item-action :before {
5659
- content: '';
5660
- display: block;
5661
- width: var(--clickArea);
5662
- height: var(--clickArea);
5663
- border-radius: 50%;
5664
- position: absolute;
5665
- inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
5666
- }
5667
5660
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
5668
5661
  -webkit-appearance: none;
5669
5662
  -moz-appearance: none;
@@ -5683,6 +5676,16 @@ html:not([dir="rtl"]) .np-navigation-option {
5683
5676
  align-items: center;
5684
5677
  justify-content: center;
5685
5678
  }
5679
+ .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
5680
+ content: '';
5681
+ display: block;
5682
+ width: var(--clickAreaSize);
5683
+ height: var(--clickAreaSize);
5684
+ border-radius: 50%;
5685
+ position: absolute;
5686
+ top: var(--clickAreaTopRightOffset);
5687
+ right: var(--clickAreaTopRightOffset);
5688
+ }
5686
5689
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
5687
5690
  background-color: var(--color-sentiment-negative);
5688
5691
  color: var(--color-contrast-overlay) !important;
package/build/styles/uploadInput/UploadInput.css CHANGED
@@ -5,7 +5,6 @@
5
5
  }
6
6
  .np-upload-input .np-upload-input__section {
7
7
  margin: 0;
8
- overflow: hidden;
9
8
  }
10
9
  .np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
11
10
  border-radius: 10px;
package/build/styles/uploadInput/uploadItem/UploadItem.css CHANGED
@@ -62,27 +62,21 @@
62
62
  }
63
63
  .np-upload-input__item .np-upload-input__item-action {
64
64
  --iconSize: var(--size-24);
65
- --clickArea: 44px;
65
+ --clickAreaSize: 44px;
66
+ --buttonTopRightOffset: var(--size-16);
67
+ --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
66
68
  position: absolute;
67
69
  right: 16px;
68
- right: var(--size-16);
70
+ right: var(--buttonTopRightOffset);
69
71
  top: 16px;
70
- top: var(--size-16);
72
+ top: var(--buttonTopRightOffset);
71
73
  }
72
74
  @media (max-width: 320px) {
73
75
  .np-upload-input__item .np-upload-input__item-action {
74
76
  --iconSize: var(--size-48);
77
+ --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
75
78
  }
76
79
  }
77
- .np-upload-input__item .np-upload-input__item-action :before {
78
- content: '';
79
- display: block;
80
- width: var(--clickArea);
81
- height: var(--clickArea);
82
- border-radius: 50%;
83
- position: absolute;
84
- inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
85
- }
86
80
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
87
81
  -webkit-appearance: none;
88
82
  -moz-appearance: none;
@@ -102,6 +96,16 @@
102
96
  align-items: center;
103
97
  justify-content: center;
104
98
  }
99
+ .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
100
+ content: '';
101
+ display: block;
102
+ width: var(--clickAreaSize);
103
+ height: var(--clickAreaSize);
104
+ border-radius: 50%;
105
+ position: absolute;
106
+ top: var(--clickAreaTopRightOffset);
107
+ right: var(--clickAreaTopRightOffset);
108
+ }
105
109
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
106
110
  background-color: var(--color-sentiment-negative);
107
111
  color: var(--color-contrast-overlay) !important;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-9d119e3",
3
+ "version": "0.0.0-experimental-e0e44ba",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/main.css CHANGED
@@ -5567,7 +5567,6 @@ html:not([dir="rtl"]) .np-navigation-option {
5567
5567
  }
5568
5568
  .np-upload-input .np-upload-input__section {
5569
5569
  margin: 0;
5570
- overflow: hidden;
5571
5570
  }
5572
5571
  .np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
5573
5572
  border-radius: 10px;
@@ -5643,27 +5642,21 @@ html:not([dir="rtl"]) .np-navigation-option {
5643
5642
  }
5644
5643
  .np-upload-input__item .np-upload-input__item-action {
5645
5644
  --iconSize: var(--size-24);
5646
- --clickArea: 44px;
5645
+ --clickAreaSize: 44px;
5646
+ --buttonTopRightOffset: var(--size-16);
5647
+ --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
5647
5648
  position: absolute;
5648
5649
  right: 16px;
5649
- right: var(--size-16);
5650
+ right: var(--buttonTopRightOffset);
5650
5651
  top: 16px;
5651
- top: var(--size-16);
5652
+ top: var(--buttonTopRightOffset);
5652
5653
  }
5653
5654
  @media (max-width: 320px) {
5654
5655
  .np-upload-input__item .np-upload-input__item-action {
5655
5656
  --iconSize: var(--size-48);
5657
+ --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
5656
5658
  }
5657
5659
  }
5658
- .np-upload-input__item .np-upload-input__item-action :before {
5659
- content: '';
5660
- display: block;
5661
- width: var(--clickArea);
5662
- height: var(--clickArea);
5663
- border-radius: 50%;
5664
- position: absolute;
5665
- inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
5666
- }
5667
5660
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
5668
5661
  -webkit-appearance: none;
5669
5662
  -moz-appearance: none;
@@ -5683,6 +5676,16 @@ html:not([dir="rtl"]) .np-navigation-option {
5683
5676
  align-items: center;
5684
5677
  justify-content: center;
5685
5678
  }
5679
+ .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
5680
+ content: '';
5681
+ display: block;
5682
+ width: var(--clickAreaSize);
5683
+ height: var(--clickAreaSize);
5684
+ border-radius: 50%;
5685
+ position: absolute;
5686
+ top: var(--clickAreaTopRightOffset);
5687
+ right: var(--clickAreaTopRightOffset);
5688
+ }
5686
5689
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
5687
5690
  background-color: var(--color-sentiment-negative);
5688
5691
  color: var(--color-contrast-overlay) !important;
package/src/uploadInput/UploadInput.css CHANGED
@@ -5,7 +5,6 @@
5
5
  }
6
6
  .np-upload-input .np-upload-input__section {
7
7
  margin: 0;
8
- overflow: hidden;
9
8
  }
10
9
  .np-upload-input .np-upload-input__section:only-child .np-upload-input__item {
11
10
  border-radius: 10px;
package/src/uploadInput/UploadInput.less CHANGED
@@ -8,7 +8,6 @@
8
8
 
9
9
  .np-upload-input__section {
10
10
  margin: 0;
11
- overflow: hidden;
12
11
 
13
12
  // only 1 file allowed and already uploaded (no UploadButton shown)
14
13
  &:only-child {
package/src/uploadInput/uploadItem/UploadItem.css CHANGED
@@ -62,27 +62,21 @@
62
62
  }
63
63
  .np-upload-input__item .np-upload-input__item-action {
64
64
  --iconSize: var(--size-24);
65
- --clickArea: 44px;
65
+ --clickAreaSize: 44px;
66
+ --buttonTopRightOffset: var(--size-16);
67
+ --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -0.5);
66
68
  position: absolute;
67
69
  right: 16px;
68
- right: var(--size-16);
70
+ right: var(--buttonTopRightOffset);
69
71
  top: 16px;
70
- top: var(--size-16);
72
+ top: var(--buttonTopRightOffset);
71
73
  }
72
74
  @media (max-width: 320px) {
73
75
  .np-upload-input__item .np-upload-input__item-action {
74
76
  --iconSize: var(--size-48);
77
+ --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
75
78
  }
76
79
  }
77
- .np-upload-input__item .np-upload-input__item-action :before {
78
- content: '';
79
- display: block;
80
- width: var(--clickArea);
81
- height: var(--clickArea);
82
- border-radius: 50%;
83
- position: absolute;
84
- inset: calc((var(--clickArea) - var(--iconSize)) * -0.5);
85
- }
86
80
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button {
87
81
  -webkit-appearance: none;
88
82
  -moz-appearance: none;
@@ -102,6 +96,16 @@
102
96
  align-items: center;
103
97
  justify-content: center;
104
98
  }
99
+ .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:before {
100
+ content: '';
101
+ display: block;
102
+ width: var(--clickAreaSize);
103
+ height: var(--clickAreaSize);
104
+ border-radius: 50%;
105
+ position: absolute;
106
+ top: var(--clickAreaTopRightOffset);
107
+ right: var(--clickAreaTopRightOffset);
108
+ }
105
109
  .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
106
110
  background-color: var(--color-sentiment-negative);
107
111
  color: var(--color-contrast-overlay) !important;
package/src/uploadInput/uploadItem/UploadItem.less CHANGED
@@ -60,24 +60,19 @@
60
60
 
61
61
  .np-upload-input__item-action {
62
62
  --iconSize: var(--size-24);
63
- --clickArea: 44px;
63
+ --clickAreaSize: 44px;
64
+ --buttonTopRightOffset: var(--size-16);
65
+ // Offset towards the parent's top-right edge
66
+ // ensuring no overflow on smaller screens
67
+ --clickAreaTopRightOffset: calc((var(--clickAreaSize) - var(--iconSize)) * -.5);
64
68
 
65
69
  position: absolute;
66
- right: var(--size-16);
67
- top: var(--size-16);
70
+ right: var(--buttonTopRightOffset);
71
+ top: var(--buttonTopRightOffset);
68
72
 
69
73
  @media (--screen-400-zoom) {
70
74
  --iconSize: var(--size-48);
71
- }
72
-
73
- :before {
74
- content: '';
75
- display: block;
76
- width: var(--clickArea);
77
- height: var(--clickArea);
78
- border-radius: 50%;
79
- position: absolute;
80
- inset: calc((var(--clickArea) - var(--iconSize)) * -.5)
75
+ --clickAreaTopRightOffset: calc(-1 * var(--buttonTopRightOffset));
81
76
  }
82
77
 
83
78
  .np-upload-input__item-button {
@@ -95,6 +90,17 @@
95
90
  align-items: center;
96
91
  justify-content: center;
97
92
 
93
+ &:before {
94
+ content: '';
95
+ display: block;
96
+ width: var(--clickAreaSize);
97
+ height: var(--clickAreaSize);
98
+ border-radius: 50%;
99
+ position: absolute;
100
+ top: var(--clickAreaTopRightOffset);
101
+ right: var(--clickAreaTopRightOffset);
102
+ }
103
+
98
104
  &:hover {
99
105
  background-color: var(--color-sentiment-negative);
100
106
  color: var(--color-contrast-overlay) !important;