@transferwise/neptune-css 0.0.0-experimental-e9dbb78 → 0.0.0-experimental-ddebf30

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 +14 -20
  2. package/dist/css/neptune.css +16 -24
  3. package/package.json +1 -1
  4. package/src/less/alerts.less +19 -22
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: 16px;
28
+ margin-top: var(--size-16);
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);
@@ -523,23 +522,13 @@ input:focus ~ .alert-focus,
523
522
  .np-theme-personal .alert {
524
523
  padding: 24px;
525
524
  padding: var(--size-24);
526
- }
527
- .np-theme-personal .alert .desktop {
528
525
  flex-direction: row;
529
526
  }
530
- .np-theme-personal .alert .desktop .alert__message {
527
+ .np-theme-personal .alert .alert__message {
531
528
  padding-left: 16px;
532
529
  padding-left: var(--padding-small);
533
530
  padding-top: 0;
534
531
  }
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
- }
543
532
  .np-theme-personal .alert-success,
544
533
  .np-theme-personal .alert-positive,
545
534
  .np-theme-personal .alert-info,
@@ -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: 16px;
6014
+ margin-top: var(--size-16);
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);
@@ -6575,28 +6574,15 @@ input:focus ~ .alert-focus,
6575
6574
  .np-theme-personal .alert {
6576
6575
  padding: 24px;
6577
6576
  padding: var(--size-24);
6578
- }
6579
-
6580
- .np-theme-personal .alert .desktop {
6581
6577
  flex-direction: row;
6582
6578
  }
6583
6579
 
6584
- .np-theme-personal .alert .desktop .alert__message {
6580
+ .np-theme-personal .alert .alert__message {
6585
6581
  padding-left: 16px;
6586
6582
  padding-left: var(--padding-small);
6587
6583
  padding-top: 0;
6588
6584
  }
6589
6585
 
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
-
6600
6586
  .np-theme-personal .alert-success,
6601
6587
  .np-theme-personal .alert-positive,
6602
6588
  .np-theme-personal .alert-info,
@@ -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-e9dbb78",
4
+ "version": "0.0.0-experimental-ddebf30",
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-16);
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
 
@@ -212,22 +211,11 @@ input:focus ~ .alert-focus,
212
211
  .alert {
213
212
  padding: var(--size-24);
214
213
 
215
- .desktop {
216
- flex-direction: row;
217
-
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-left: var(--padding-small);
218
+ padding-top: 0;
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
+ }