@transferwise/neptune-css 14.21.0 → 14.21.1

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 (4) hide show
  1. package/dist/css/alerts.css +15 -26
  2. package/dist/css/neptune.css +16 -30
  3. package/package.json +1 -1
  4. package/src/less/alerts.less +12 -24
package/dist/css/alerts.css CHANGED
@@ -23,19 +23,18 @@
23
23
  flex-direction: column;
24
24
  justify-content: center;
25
25
  }
26
+ .np-theme-personal .alert .alert__message .alert__action {
27
+ margin-top: 8px;
28
+ margin-top: var(--size-8);
29
+ }
26
30
  .alert .alert__icon {
27
- width: 48px;
28
- width: var(--size-48);
29
- height: 48px;
30
- height: var(--size-48);
31
+ width: 32px;
32
+ width: var(--size-32);
33
+ height: 32px;
34
+ height: var(--size-32);
31
35
  border-radius: 50%;
32
36
  flex: none;
33
37
  }
34
- .alert .alert__message {
35
- padding-left: 16px;
36
- padding-left: var(--padding-small);
37
- margin-top: 2px;
38
- }
39
38
  .alert .close {
40
39
  margin-top: 4px;
41
40
  margin-top: var(--size-4);
@@ -43,8 +42,8 @@
43
42
  .np-theme-personal .alert .close {
44
43
  margin-top: calc(8px * -1);
45
44
  margin-top: calc(var(--size-8) * -1);
46
- margin-right: calc(8px * -1);
47
- margin-right: calc(var(--size-8) * -1);
45
+ margin-inline-end: calc(8px * -1);
46
+ margin-inline-end: calc(var(--size-8) * -1);
48
47
  }
49
48
  .alert p,
50
49
  .alert ul {
@@ -521,24 +520,14 @@ input:focus ~ .alert-focus,
521
520
  display: none !important;
522
521
  }
523
522
  .np-theme-personal .alert {
524
- padding: 24px;
525
- padding: var(--size-24);
526
- }
527
- .np-theme-personal .alert .desktop {
523
+ padding: 16px;
524
+ padding: var(--size-16);
528
525
  flex-direction: row;
529
526
  }
530
- .np-theme-personal .alert .desktop .alert__message {
531
- padding-left: 16px;
532
- padding-left: var(--padding-small);
527
+ .np-theme-personal .alert .alert__message {
533
528
  padding-top: 0;
534
- }
535
- .np-theme-personal .alert .mobile {
536
- flex-direction: column;
537
- }
538
- .np-theme-personal .alert .mobile .alert__message {
539
- padding-left: 0;
540
- padding-top: 16px;
541
- padding-top: var(--padding-small);
529
+ padding-inline-start: 16px;
530
+ padding-inline-start: var(--padding-small);
542
531
  }
543
532
  .np-theme-personal .alert-success,
544
533
  .np-theme-personal .alert-positive,
package/dist/css/neptune.css CHANGED
@@ -6009,21 +6009,20 @@ tbody.collapse.in {
6009
6009
  justify-content: center;
6010
6010
  }
6011
6011
 
6012
+ .np-theme-personal .alert .alert__message .alert__action {
6013
+ margin-top: 8px;
6014
+ margin-top: var(--size-8);
6015
+ }
6016
+
6012
6017
  .alert .alert__icon {
6013
- width: 48px;
6014
- width: var(--size-48);
6015
- height: 48px;
6016
- height: var(--size-48);
6018
+ width: 32px;
6019
+ width: var(--size-32);
6020
+ height: 32px;
6021
+ height: var(--size-32);
6017
6022
  border-radius: 50%;
6018
6023
  flex: none;
6019
6024
  }
6020
6025
 
6021
- .alert .alert__message {
6022
- padding-left: 16px;
6023
- padding-left: var(--padding-small);
6024
- margin-top: 2px;
6025
- }
6026
-
6027
6026
  .alert .close {
6028
6027
  margin-top: 4px;
6029
6028
  margin-top: var(--size-4);
@@ -6032,8 +6031,8 @@ tbody.collapse.in {
6032
6031
  .np-theme-personal .alert .close {
6033
6032
  margin-top: calc(8px * -1);
6034
6033
  margin-top: calc(var(--size-8) * -1);
6035
- margin-right: calc(8px * -1);
6036
- margin-right: calc(var(--size-8) * -1);
6034
+ margin-inline-end: calc(8px * -1);
6035
+ margin-inline-end: calc(var(--size-8) * -1);
6037
6036
  }
6038
6037
 
6039
6038
  .alert p,
@@ -6573,28 +6572,15 @@ input:focus ~ .alert-focus,
6573
6572
  }
6574
6573
 
6575
6574
  .np-theme-personal .alert {
6576
- padding: 24px;
6577
- padding: var(--size-24);
6578
- }
6579
-
6580
- .np-theme-personal .alert .desktop {
6575
+ padding: 16px;
6576
+ padding: var(--size-16);
6581
6577
  flex-direction: row;
6582
6578
  }
6583
6579
 
6584
- .np-theme-personal .alert .desktop .alert__message {
6585
- padding-left: 16px;
6586
- padding-left: var(--padding-small);
6580
+ .np-theme-personal .alert .alert__message {
6587
6581
  padding-top: 0;
6588
- }
6589
-
6590
- .np-theme-personal .alert .mobile {
6591
- flex-direction: column;
6592
- }
6593
-
6594
- .np-theme-personal .alert .mobile .alert__message {
6595
- padding-left: 0;
6596
- padding-top: 16px;
6597
- padding-top: var(--padding-small);
6582
+ padding-inline-start: 16px;
6583
+ padding-inline-start: var(--padding-small);
6598
6584
  }
6599
6585
 
6600
6586
  .np-theme-personal .alert-success,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-css",
3
3
  "description": "Neptune CSS library",
4
- "version": "14.21.0",
4
+ "version": "14.21.1",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
package/src/less/alerts.less CHANGED
@@ -20,27 +20,26 @@
20
20
  align-items: flex-start;
21
21
  flex-direction: column;
22
22
  justify-content: center;
23
+
24
+ .alert__action {
25
+ margin-top: var(--size-8);
26
+ }
23
27
  }
24
28
  }
25
29
 
26
30
  .alert__icon {
27
- width: var(--size-48);
28
- height: var(--size-48);
31
+ width: var(--size-32);
32
+ height: var(--size-32);
29
33
  border-radius: 50%;
30
34
  flex: none;
31
35
  }
32
36
 
33
- .alert__message {
34
- padding-left: var(--padding-small);
35
- margin-top: 2px;
36
- }
37
-
38
37
  .close {
39
38
  margin-top: var(--size-4);
40
39
 
41
40
  .np-theme-personal & {
42
41
  margin-top: calc(var(--size-8) * -1);
43
- margin-right: calc(var(--size-8) * -1);
42
+ margin-inline-end: calc(var(--size-8) * -1);
44
43
  }
45
44
  }
46
45
 
@@ -210,24 +209,13 @@ input:focus ~ .alert-focus,
210
209
 
211
210
  .np-theme-personal {
212
211
  .alert {
213
- padding: var(--size-24);
214
-
215
- .desktop {
216
- flex-direction: row;
217
-
218
- .alert__message {
219
- padding-left: var(--padding-small);
220
- padding-top: 0;
221
- }
222
- }
212
+ padding: var(--size-16);
223
213
 
224
- .mobile {
225
- flex-direction: column;
214
+ flex-direction: row;
226
215
 
227
- .alert__message {
228
- padding-left: 0;
229
- padding-top: var(--padding-small);
230
- }
216
+ .alert__message {
217
+ padding-top: 0;
218
+ padding-inline-start: var(--padding-small);
231
219
  }
232
220
  }
233
221