@transferwise/neptune-css 0.0.0-experimental-8dfa1d0 → 0.0.0-experimental-056d8e7

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 +23 -17
  2. package/dist/css/neptune.css +27 -19
  3. package/package.json +1 -1
  4. package/src/less/alerts.less +23 -20
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: 8px;
28
- margin-top: var(--size-8);
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);
@@ -520,14 +521,24 @@ input:focus ~ .alert-focus,
520
521
  display: none !important;
521
522
  }
522
523
  .np-theme-personal .alert {
523
- padding: 16px;
524
- padding: var(--size-16);
524
+ padding: 24px;
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 {
528
- padding-top: 0;
530
+ .np-theme-personal .alert .desktop .alert__message {
529
531
  padding-left: 16px;
530
532
  padding-left: var(--padding-small);
533
+ 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);
531
542
  }
532
543
  .np-theme-personal .alert-success,
533
544
  .np-theme-personal .alert-positive,
@@ -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: 8px;
6014
- margin-top: var(--size-8);
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);
@@ -6572,15 +6573,28 @@ input:focus ~ .alert-focus,
6572
6573
  }
6573
6574
 
6574
6575
  .np-theme-personal .alert {
6575
- padding: 16px;
6576
- padding: var(--size-16);
6576
+ padding: 24px;
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 {
6581
- padding-top: 0;
6584
+ .np-theme-personal .alert .desktop .alert__message {
6582
6585
  padding-left: 16px;
6583
6586
  padding-left: var(--padding-small);
6587
+ 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);
6584
6598
  }
6585
6599
 
6586
6600
  .np-theme-personal .alert-success,
@@ -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-8dfa1d0",
4
+ "version": "0.0.0-experimental-056d8e7",
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-8);
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
 
@@ -209,13 +210,24 @@ input:focus ~ .alert-focus,
209
210
 
210
211
  .np-theme-personal {
211
212
  .alert {
212
- padding: var(--size-16);
213
+ padding: var(--size-24);
213
214
 
214
- flex-direction: row;
215
+ .desktop {
216
+ flex-direction: row;
215
217
 
216
- .alert__message {
217
- padding-top: 0;
218
- padding-left: var(--padding-small);
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
- }