@transferwise/neptune-css 0.0.0-experimental-2058986 → 0.0.0-experimental-11855a1

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 +21 -12
  2. package/dist/css/progress-bars.css +20 -12
  3. package/package.json +1 -1
  4. package/src/less/progress-bars.less +20 -16
package/dist/css/neptune.css CHANGED
@@ -22340,20 +22340,28 @@ button.popover-close {
22340
22340
  }
22341
22341
 
22342
22342
  .progress {
22343
+ --progress-bar-height: 8px;
22344
+ --progress-bar-border-width: 4px;
22345
+ --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
22343
22346
  height: 8px;
22347
+ height: var(--progress-bar-height);
22348
+ overflow: hidden;
22344
22349
  margin-top: calc((24px - 8px) / 2);
22345
- margin-top: calc((var(--size-24) - 8px) / 2);
22350
+ margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
22346
22351
  margin-bottom: calc((24px - 8px) / 2);
22347
- margin-bottom: calc((var(--size-24) - 8px) / 2);
22352
+ margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
22348
22353
  background-color: #c9cbce;
22349
22354
  background-color: var(--color-interactive-secondary);
22350
- border-radius: calc(8px / 2);
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,13 +22370,9 @@ button.popover-close {
22362
22370
  text-align: right;
22363
22371
  background-color: #0097c7;
22364
22372
  background-color: var(--color-content-accent);
22365
- border: calc(8px / 2) solid #ffffff;
22366
- border: calc(8px / 2) solid var(--color-background-screen);
22367
- box-sizing: content-box;
22368
- border-radius: 8px;
22369
- margin-top: calc(-1 * 8px / 2);
22370
- margin-left: calc(-1 * 8px / 2);
22371
- 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;
22372
22376
  }
22373
22377
 
22374
22378
  [dir="rtl"] .progress-bar {
@@ -22379,6 +22383,11 @@ button.popover-close {
22379
22383
  text-align: left;
22380
22384
  }
22381
22385
 
22386
+ [dir="rtl"] .progress-bar {
22387
+ right: calc(-1 * var(--progress-bar-start-shift));
22388
+ left: 0;
22389
+ }
22390
+
22382
22391
  .progress-bar-primary {
22383
22392
  background-color: #37517e;
22384
22393
  background-color: var(--color-content-primary);
package/dist/css/progress-bars.css CHANGED
@@ -1,17 +1,25 @@
1
1
  .progress {
2
+ --progress-bar-height: 8px;
3
+ --progress-bar-border-width: 4px;
4
+ --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
2
5
  height: 8px;
6
+ height: var(--progress-bar-height);
7
+ overflow: hidden;
3
8
  margin-top: calc((24px - 8px) / 2);
4
- margin-top: calc((var(--size-24) - 8px) / 2);
9
+ margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
5
10
  margin-bottom: calc((24px - 8px) / 2);
6
- margin-bottom: calc((var(--size-24) - 8px) / 2);
11
+ margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
7
12
  background-color: #c9cbce;
8
13
  background-color: var(--color-interactive-secondary);
9
- border-radius: calc(8px / 2);
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,13 +28,9 @@
20
28
  text-align: right;
21
29
  background-color: #0097c7;
22
30
  background-color: var(--color-content-accent);
23
- border: calc(8px / 2) solid #ffffff;
24
- border: calc(8px / 2) solid var(--color-background-screen);
25
- box-sizing: content-box;
26
- border-radius: 8px;
27
- margin-top: calc(-1 * 8px / 2);
28
- margin-left: calc(-1 * 8px / 2);
29
- 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;
30
34
  }
31
35
  [dir="rtl"] .progress-bar {
32
36
  float: right;
@@ -34,6 +38,10 @@
34
38
  [dir="rtl"] .progress-bar {
35
39
  text-align: left;
36
40
  }
41
+ [dir="rtl"] .progress-bar {
42
+ right: calc(-1 * var(--progress-bar-start-shift));
43
+ left: 0;
44
+ }
37
45
  .progress-bar-primary {
38
46
  background-color: #37517e;
39
47
  background-color: var(--color-content-primary);
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-2058986",
4
+ "version": "0.0.0-experimental-11855a1",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
package/src/less/progress-bars.less CHANGED
@@ -1,33 +1,37 @@
1
1
  @import (reference) "../variables/neptune-tokens.less";
2
2
  @import (reference) "./mixins/_logical-properties.less";
3
3
 
4
- @progress-height: 8px;
5
-
6
4
  .progress {
7
- height: @progress-height;
8
- margin-top: calc((var(--size-24) - @progress-height) / 2);
9
- margin-bottom: calc((var(--size-24) - @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);
10
13
  background-color: var(--color-interactive-secondary);
11
- border-radius: calc(@progress-height / 2);
14
+ border-radius: var(--progress-bar-height);
12
15
  }
13
16
 
14
17
  .progress-bar {
15
18
  .float(left);
16
-
17
- width: 0%;
18
- 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);
19
23
  font-size: var(--font-size-16);
20
24
  font-weight: var(--font-weight-bold);
21
25
  color: #fff;
22
26
  .text-align(right);
23
-
24
27
  background-color: var(--color-content-accent);
25
- border: calc(@progress-height / 2) solid var(--color-background-screen);
26
- box-sizing: content-box;
27
- border-radius: @progress-height;
28
- margin-top: calc(-1 * @progress-height / 2);
29
- margin-left: calc(-1 * @progress-height / 2);
30
- transition: width 0.6s ease;
28
+ border: var(--progress-bar-border-width) solid var(--color-background-screen);
29
+ border-radius: inherit;
30
+
31
+ [dir="rtl"] & {
32
+ right: calc(-1 * var(--progress-bar-start-shift));
33
+ left: 0;
34
+ }
31
35
  }
32
36
 
33
37
  .progress-bar-primary {