@transferwise/neptune-css 14.15.0 → 14.16.0

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/neptune.css +24 -40
  2. package/dist/css/progress-bars.css +24 -36
  3. package/package.json +1 -1
  4. package/src/less/progress-bars.less +19 -34
package/dist/css/neptune.css CHANGED
@@ -22340,20 +22340,28 @@ button.popover-close {
22340
22340
  }
22341
22341
 
22342
22342
  .progress {
22343
- height: 2px;
22344
- margin-top: calc((24px - 2px) / 2);
22345
- margin-top: calc((var(--size-24) - 2px) / 2);
22346
- margin-bottom: calc((24px - 2px) / 2);
22347
- margin-bottom: calc((var(--size-24) - 2px) / 2);
22348
- background-color: rgba(134,167,189,0.10196);
22349
- background-color: var(--color-background-neutral);
22350
- border-radius: calc(2px / 2);
22343
+ --progress-bar-height: 8px;
22344
+ --progress-bar-border-width: 4px;
22345
+ --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
22346
+ height: 8px;
22347
+ height: var(--progress-bar-height);
22348
+ overflow: hidden;
22349
+ margin-top: calc((24px - 8px) / 2);
22350
+ margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
22351
+ margin-bottom: calc((24px - 8px) / 2);
22352
+ margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
22353
+ background-color: #c9cbce;
22354
+ background-color: var(--color-interactive-secondary);
22355
+ border-radius: 8px;
22356
+ border-radius: var(--progress-bar-height);
22351
22357
  }
22352
22358
 
22353
22359
  .progress-bar {
22354
22360
  float: left;
22355
- width: 0%;
22356
- height: 100%;
22361
+ position: relative;
22362
+ top: calc(-1 * var(--progress-bar-border-width));
22363
+ left: calc(-1 * var(--progress-bar-start-shift));
22364
+ height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
22357
22365
  font-size: 1rem;
22358
22366
  font-size: var(--font-size-16);
22359
22367
  font-weight: 700;
@@ -22362,7 +22370,9 @@ button.popover-close {
22362
22370
  text-align: right;
22363
22371
  background-color: #0097c7;
22364
22372
  background-color: var(--color-content-accent);
22365
- transition: width 0.6s ease;
22373
+ border: var(--progress-bar-border-width) solid #ffffff;
22374
+ border: var(--progress-bar-border-width) solid var(--color-background-screen);
22375
+ border-radius: inherit;
22366
22376
  }
22367
22377
 
22368
22378
  [dir="rtl"] .progress-bar {
@@ -22373,35 +22383,9 @@ button.popover-close {
22373
22383
  text-align: left;
22374
22384
  }
22375
22385
 
22376
- .progress-bar::after {
22377
- content: "";
22378
- float: right;
22379
- margin-top: 8px / 2 + 1;
22380
- margin-right: 8px / 2;
22381
- width: 8px;
22382
- height: 8px;
22383
- background-color: inherit;
22384
- border-radius: 8px / 2;
22385
- }
22386
-
22387
- [dir="rtl"] .progress-bar::after {
22388
- float: left;
22389
- }
22390
-
22391
- [dir="rtl"] .progress-bar::after {
22392
- margin-left: 8px / 2;
22393
- margin-right: 0;
22394
- margin-right: initial;
22395
- }
22396
-
22397
- .progress-bar:first-child {
22398
- border-top-left-radius: 2px / 2;
22399
- border-bottom-left-radius: 2px / 2;
22400
- }
22401
-
22402
- .progress-bar:last-child {
22403
- border-top-right-radius: 2px / 2;
22404
- border-bottom-right-radius: 2px / 2;
22386
+ [dir="rtl"] .progress-bar {
22387
+ right: calc(-1 * var(--progress-bar-start-shift));
22388
+ left: 0;
22405
22389
  }
22406
22390
 
22407
22391
  .progress-bar-primary {
package/dist/css/progress-bars.css CHANGED
@@ -1,17 +1,25 @@
1
1
  .progress {
2
- height: 2px;
3
- margin-top: calc((24px - 2px) / 2);
4
- margin-top: calc((var(--size-24) - 2px) / 2);
5
- margin-bottom: calc((24px - 2px) / 2);
6
- margin-bottom: calc((var(--size-24) - 2px) / 2);
7
- background-color: rgba(134,167,189,0.10196);
8
- background-color: var(--color-background-neutral);
9
- border-radius: calc(2px / 2);
2
+ --progress-bar-height: 8px;
3
+ --progress-bar-border-width: 4px;
4
+ --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
5
+ height: 8px;
6
+ height: var(--progress-bar-height);
7
+ overflow: hidden;
8
+ margin-top: calc((24px - 8px) / 2);
9
+ margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
10
+ margin-bottom: calc((24px - 8px) / 2);
11
+ margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
12
+ background-color: #c9cbce;
13
+ background-color: var(--color-interactive-secondary);
14
+ border-radius: 8px;
15
+ border-radius: var(--progress-bar-height);
10
16
  }
11
17
  .progress-bar {
12
18
  float: left;
13
- width: 0%;
14
- height: 100%;
19
+ position: relative;
20
+ top: calc(-1 * var(--progress-bar-border-width));
21
+ left: calc(-1 * var(--progress-bar-start-shift));
22
+ height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
15
23
  font-size: 1rem;
16
24
  font-size: var(--font-size-16);
17
25
  font-weight: 700;
@@ -20,7 +28,9 @@
20
28
  text-align: right;
21
29
  background-color: #0097c7;
22
30
  background-color: var(--color-content-accent);
23
- transition: width 0.6s ease;
31
+ border: var(--progress-bar-border-width) solid #ffffff;
32
+ border: var(--progress-bar-border-width) solid var(--color-background-screen);
33
+ border-radius: inherit;
24
34
  }
25
35
  [dir="rtl"] .progress-bar {
26
36
  float: right;
@@ -28,31 +38,9 @@
28
38
  [dir="rtl"] .progress-bar {
29
39
  text-align: left;
30
40
  }
31
- .progress-bar::after {
32
- content: "";
33
- float: right;
34
- margin-top: 8px / 2 + 1;
35
- margin-right: 8px / 2;
36
- width: 8px;
37
- height: 8px;
38
- background-color: inherit;
39
- border-radius: 8px / 2;
40
- }
41
- [dir="rtl"] .progress-bar::after {
42
- float: left;
43
- }
44
- [dir="rtl"] .progress-bar::after {
45
- margin-left: 8px / 2;
46
- margin-right: 0;
47
- margin-right: initial;
48
- }
49
- .progress-bar:first-child {
50
- border-top-left-radius: 2px / 2;
51
- border-bottom-left-radius: 2px / 2;
52
- }
53
- .progress-bar:last-child {
54
- border-top-right-radius: 2px / 2;
55
- border-bottom-right-radius: 2px / 2;
41
+ [dir="rtl"] .progress-bar {
42
+ right: calc(-1 * var(--progress-bar-start-shift));
43
+ left: 0;
56
44
  }
57
45
  .progress-bar-primary {
58
46
  background-color: #37517e;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@transferwise/neptune-css",
3
3
  "description": "Neptune CSS library",
4
- "version": "14.15.0",
4
+ "version": "14.16.0",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
package/src/less/progress-bars.less CHANGED
@@ -1,51 +1,36 @@
1
1
  @import (reference) "../variables/neptune-tokens.less";
2
2
  @import (reference) "./mixins/_logical-properties.less";
3
3
 
4
- @progress-height: 2px;
5
- @progress-pip-size: 8px;
6
-
7
4
  .progress {
8
- height: @progress-height;
9
- margin-top: calc((var(--size-24) - @progress-height) / 2);
10
- margin-bottom: calc((var(--size-24) - @progress-height) / 2);
11
- background-color: var(--color-background-neutral);
12
- border-radius: calc(@progress-height / 2);
5
+ --progress-bar-height: 8px;
6
+ --progress-bar-border-width: 4px;
7
+ // Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders which are used for progress vertical delimiter.
8
+ --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
9
+ height: var(--progress-bar-height);
10
+ overflow: hidden;
11
+ margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
12
+ margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
13
+ background-color: var(--color-interactive-secondary);
14
+ border-radius: var(--progress-bar-height);
13
15
  }
14
16
 
15
17
  .progress-bar {
16
18
  .float(left);
17
-
18
- width: 0%;
19
- height: 100%;
19
+ position: relative;
20
+ top: calc(-1 * var(--progress-bar-border-width));
21
+ left: calc(-1 * var(--progress-bar-start-shift));
22
+ height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
20
23
  font-size: var(--font-size-16);
21
24
  font-weight: var(--font-weight-bold);
22
25
  color: #fff;
23
26
  .text-align(right);
24
-
25
27
  background-color: var(--color-content-accent);
26
- transition: width 0.6s ease;
27
-
28
- &::after {
29
- content: "";
30
- .float(right);
31
-
32
- margin-top: @progress-pip-size / 2 + 1;
33
- .margin(right, @progress-pip-size / 2);
34
-
35
- width: @progress-pip-size;
36
- height: @progress-pip-size;
37
- background-color: inherit;
38
- border-radius: @progress-pip-size / 2;
39
- }
40
-
41
- &:first-child {
42
- border-top-left-radius: @progress-height / 2;
43
- border-bottom-left-radius: @progress-height / 2;
44
- }
28
+ border: var(--progress-bar-border-width) solid var(--color-background-screen);
29
+ border-radius: inherit;
45
30
 
46
- &:last-child {
47
- border-top-right-radius: @progress-height / 2;
48
- border-bottom-right-radius: @progress-height / 2;
31
+ [dir="rtl"] & {
32
+ right: calc(-1 * var(--progress-bar-start-shift));
33
+ left: 0;
49
34
  }
50
35
  }
51
36