@transferwise/neptune-css 0.0.0-experimental-c34c4a1 → 0.0.0-experimental-e142d2b

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 -1
  2. package/dist/css/neptune.css +24 -1
  3. package/package.json +1 -1
  4. package/src/less/alerts.less +22 -6
package/dist/css/alerts.css CHANGED
@@ -24,9 +24,18 @@
24
24
  justify-content: center;
25
25
  }
26
26
  .alert .alert__icon {
27
+ width: 48px;
28
+ width: var(--size-48);
29
+ height: 48px;
30
+ height: var(--size-48);
27
31
  border-radius: 50%;
28
32
  flex: none;
29
33
  }
34
+ .alert .alert__message {
35
+ padding-left: 16px;
36
+ padding-left: var(--padding-small);
37
+ margin-top: 2px;
38
+ }
30
39
  .alert .close {
31
40
  margin-top: 4px;
32
41
  margin-top: var(--size-4);
@@ -514,13 +523,23 @@ input:focus ~ .alert-focus,
514
523
  .np-theme-personal .alert {
515
524
  padding: 24px;
516
525
  padding: var(--size-24);
526
+ }
527
+ .np-theme-personal .alert .desktop {
517
528
  flex-direction: row;
518
529
  }
519
- .np-theme-personal .alert .alert__message {
530
+ .np-theme-personal .alert .desktop .alert__message {
520
531
  padding-left: 16px;
521
532
  padding-left: var(--padding-small);
522
533
  padding-top: 0;
523
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
+ }
524
543
  .np-theme-personal .alert-success,
525
544
  .np-theme-personal .alert-positive,
526
545
  .np-theme-personal .alert-info,
package/dist/css/neptune.css CHANGED
@@ -6010,10 +6010,20 @@ tbody.collapse.in {
6010
6010
  }
6011
6011
 
6012
6012
  .alert .alert__icon {
6013
+ width: 48px;
6014
+ width: var(--size-48);
6015
+ height: 48px;
6016
+ height: var(--size-48);
6013
6017
  border-radius: 50%;
6014
6018
  flex: none;
6015
6019
  }
6016
6020
 
6021
+ .alert .alert__message {
6022
+ padding-left: 16px;
6023
+ padding-left: var(--padding-small);
6024
+ margin-top: 2px;
6025
+ }
6026
+
6017
6027
  .alert .close {
6018
6028
  margin-top: 4px;
6019
6029
  margin-top: var(--size-4);
@@ -6565,15 +6575,28 @@ input:focus ~ .alert-focus,
6565
6575
  .np-theme-personal .alert {
6566
6576
  padding: 24px;
6567
6577
  padding: var(--size-24);
6578
+ }
6579
+
6580
+ .np-theme-personal .alert .desktop {
6568
6581
  flex-direction: row;
6569
6582
  }
6570
6583
 
6571
- .np-theme-personal .alert .alert__message {
6584
+ .np-theme-personal .alert .desktop .alert__message {
6572
6585
  padding-left: 16px;
6573
6586
  padding-left: var(--padding-small);
6574
6587
  padding-top: 0;
6575
6588
  }
6576
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
+
6577
6600
  .np-theme-personal .alert-success,
6578
6601
  .np-theme-personal .alert-positive,
6579
6602
  .np-theme-personal .alert-info,
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-c34c4a1",
4
+ "version": "0.0.0-experimental-e142d2b",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
package/src/less/alerts.less CHANGED
@@ -24,12 +24,17 @@
24
24
  }
25
25
 
26
26
  .alert__icon {
27
- // width: var(--size-48);
28
- // height: var(--size-48);
27
+ width: var(--size-48);
28
+ height: var(--size-48);
29
29
  border-radius: 50%;
30
30
  flex: none;
31
31
  }
32
32
 
33
+ .alert__message {
34
+ padding-left: var(--padding-small);
35
+ margin-top: 2px;
36
+ }
37
+
33
38
  .close {
34
39
  margin-top: var(--size-4);
35
40
 
@@ -207,11 +212,22 @@ input:focus ~ .alert-focus,
207
212
  .alert {
208
213
  padding: var(--size-24);
209
214
 
210
- flex-direction: row;
215
+ .desktop {
216
+ flex-direction: row;
211
217
 
212
- .alert__message {
213
- padding-left: var(--padding-small);
214
- 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
+ }
215
231
  }
216
232
  }
217
233