@transferwise/neptune-css 0.0.0-experimental-5a9ce14 → 0.0.0-experimental-8dfa1d0

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 +17 -23
  2. package/dist/css/neptune.css +19 -27
  3. package/package.json +1 -1
  4. package/src/less/alerts.less +20 -23
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);
@@ -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 {
527
+ .np-theme-personal .alert .alert__message {
528
+ padding-top: 0;
531
529
  padding-left: 16px;
532
530
  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);
542
531
  }
543
532
  .np-theme-personal .alert-success,
544
533
  .np-theme-personal .alert-positive,
@@ -757,3 +746,8 @@ input:focus ~ .alert-focus,
757
746
  .np-theme-personal .alert-negative .np-link:focus {
758
747
  color: var(--color-content-link-hover);
759
748
  }
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,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);
@@ -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 {
6580
+ .np-theme-personal .alert .alert__message {
6581
+ padding-top: 0;
6585
6582
  padding-left: 16px;
6586
6583
  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);
6598
6584
  }
6599
6585
 
6600
6586
  .np-theme-personal .alert-success,
@@ -6819,6 +6805,12 @@ input:focus ~ .alert-focus,
6819
6805
  color: var(--color-content-link-hover);
6820
6806
  }
6821
6807
 
6808
+ [dir="rtl"] .alert .alert__message {
6809
+ padding-left: 0;
6810
+ padding-right: 16px;
6811
+ padding-right: var(--padding-small);
6812
+ }
6813
+
6822
6814
  .bg {
6823
6815
  background-repeat: no-repeat;
6824
6816
  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-5a9ce14",
4
+ "version": "0.0.0-experimental-8dfa1d0",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
package/src/less/alerts.less CHANGED
@@ -20,21 +20,20 @@
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
 
@@ -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;
212
+ padding: var(--size-16);
217
213
 
218
- .alert__message {
219
- padding-left: var(--padding-small);
220
- padding-top: 0;
221
- }
222
- }
223
-
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-left: var(--padding-small);
231
219
  }
232
220
  }
233
221
 
@@ -258,3 +246,12 @@ input:focus ~ .alert-focus,
258
246
  }
259
247
  }
260
248
  }
249
+
250
+ :dir(rtl) {
251
+ .alert {
252
+ .alert__message {
253
+ padding-left: 0;
254
+ padding-right: var(--padding-small);
255
+ }
256
+ }
257
+ }