@transferwise/neptune-css 0.0.0-experimental-28eac06 → 0.0.0-experimental-e9dbb78

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 +20 -14
  2. package/dist/css/neptune.css +24 -16
  3. package/package.json +1 -1
  4. package/src/less/alerts.less +22 -19
package/dist/css/alerts.css CHANGED
@@ -23,18 +23,19 @@
23
23
  flex-direction: column;
24
24
  justify-content: center;
25
25
  }
26
- .np-theme-personal .alert .alert__message .alert__action {
27
- margin-top: 16px;
28
- margin-top: var(--size-16);
29
- }
30
26
  .alert .alert__icon {
31
- width: 32px;
32
- width: var(--size-32);
33
- height: 32px;
34
- height: var(--size-32);
27
+ width: 48px;
28
+ width: var(--size-48);
29
+ height: 48px;
30
+ height: var(--size-48);
35
31
  border-radius: 50%;
36
32
  flex: none;
37
33
  }
34
+ .alert .alert__message {
35
+ padding-left: 16px;
36
+ padding-left: var(--padding-small);
37
+ margin-top: 2px;
38
+ }
38
39
  .alert .close {
39
40
  margin-top: 4px;
40
41
  margin-top: var(--size-4);
@@ -522,13 +523,23 @@ input:focus ~ .alert-focus,
522
523
  .np-theme-personal .alert {
523
524
  padding: 24px;
524
525
  padding: var(--size-24);
526
+ }
527
+ .np-theme-personal .alert .desktop {
525
528
  flex-direction: row;
526
529
  }
527
- .np-theme-personal .alert .alert__message {
530
+ .np-theme-personal .alert .desktop .alert__message {
528
531
  padding-left: 16px;
529
532
  padding-left: var(--padding-small);
530
533
  padding-top: 0;
531
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);
542
+ }
532
543
  .np-theme-personal .alert-success,
533
544
  .np-theme-personal .alert-positive,
534
545
  .np-theme-personal .alert-info,
@@ -746,8 +757,3 @@ input:focus ~ .alert-focus,
746
757
  .np-theme-personal .alert-negative .np-link:focus {
747
758
  color: var(--color-content-link-hover);
748
759
  }
749
- [dir="rtl"] .alert .alert__message {
750
- padding-left: 0;
751
- padding-right: 16px;
752
- padding-right: var(--padding-small);
753
- }
package/dist/css/neptune.css CHANGED
@@ -6009,20 +6009,21 @@ tbody.collapse.in {
6009
6009
  justify-content: center;
6010
6010
  }
6011
6011
 
6012
- .np-theme-personal .alert .alert__message .alert__action {
6013
- margin-top: 16px;
6014
- margin-top: var(--size-16);
6015
- }
6016
-
6017
6012
  .alert .alert__icon {
6018
- width: 32px;
6019
- width: var(--size-32);
6020
- height: 32px;
6021
- height: var(--size-32);
6013
+ width: 48px;
6014
+ width: var(--size-48);
6015
+ height: 48px;
6016
+ height: var(--size-48);
6022
6017
  border-radius: 50%;
6023
6018
  flex: none;
6024
6019
  }
6025
6020
 
6021
+ .alert .alert__message {
6022
+ padding-left: 16px;
6023
+ padding-left: var(--padding-small);
6024
+ margin-top: 2px;
6025
+ }
6026
+
6026
6027
  .alert .close {
6027
6028
  margin-top: 4px;
6028
6029
  margin-top: var(--size-4);
@@ -6574,15 +6575,28 @@ input:focus ~ .alert-focus,
6574
6575
  .np-theme-personal .alert {
6575
6576
  padding: 24px;
6576
6577
  padding: var(--size-24);
6578
+ }
6579
+
6580
+ .np-theme-personal .alert .desktop {
6577
6581
  flex-direction: row;
6578
6582
  }
6579
6583
 
6580
- .np-theme-personal .alert .alert__message {
6584
+ .np-theme-personal .alert .desktop .alert__message {
6581
6585
  padding-left: 16px;
6582
6586
  padding-left: var(--padding-small);
6583
6587
  padding-top: 0;
6584
6588
  }
6585
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);
6598
+ }
6599
+
6586
6600
  .np-theme-personal .alert-success,
6587
6601
  .np-theme-personal .alert-positive,
6588
6602
  .np-theme-personal .alert-info,
@@ -6805,12 +6819,6 @@ input:focus ~ .alert-focus,
6805
6819
  color: var(--color-content-link-hover);
6806
6820
  }
6807
6821
 
6808
- [dir="rtl"] .alert .alert__message {
6809
- padding-left: 0;
6810
- padding-right: 16px;
6811
- padding-right: var(--padding-small);
6812
- }
6813
-
6814
6822
  .bg {
6815
6823
  background-repeat: no-repeat;
6816
6824
  background-attachment: fixed;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-css",
3
3
  "description": "Neptune CSS library",
4
- "version": "0.0.0-experimental-28eac06",
4
+ "version": "0.0.0-experimental-e9dbb78",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
package/src/less/alerts.less CHANGED
@@ -20,20 +20,21 @@
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-16);
26
- }
27
23
  }
28
24
  }
29
25
 
30
26
  .alert__icon {
31
- width: var(--size-32);
32
- height: var(--size-32);
27
+ width: var(--size-48);
28
+ height: var(--size-48);
33
29
  border-radius: 50%;
34
30
  flex: none;
35
31
  }
36
32
 
33
+ .alert__message {
34
+ padding-left: var(--padding-small);
35
+ margin-top: 2px;
36
+ }
37
+
37
38
  .close {
38
39
  margin-top: var(--size-4);
39
40
 
@@ -211,11 +212,22 @@ input:focus ~ .alert-focus,
211
212
  .alert {
212
213
  padding: var(--size-24);
213
214
 
214
- flex-direction: row;
215
+ .desktop {
216
+ flex-direction: row;
215
217
 
216
- .alert__message {
217
- padding-left: var(--padding-small);
218
- padding-top: 0;
218
+ .alert__message {
219
+ padding-left: var(--padding-small);
220
+ padding-top: 0;
221
+ }
222
+ }
223
+
224
+ .mobile {
225
+ flex-direction: column;
226
+
227
+ .alert__message {
228
+ padding-left: 0;
229
+ padding-top: var(--padding-small);
230
+ }
219
231
  }
220
232
  }
221
233
 
@@ -246,12 +258,3 @@ input:focus ~ .alert-focus,
246
258
  }
247
259
  }
248
260
  }
249
-
250
- :dir(rtl) {
251
- .alert {
252
- .alert__message {
253
- padding-left: 0;
254
- padding-right: var(--padding-small);
255
- }
256
- }
257
- }