@transferwise/neptune-css 14.14.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 (6) hide show
  1. package/dist/css/input-groups.css +2 -2
  2. package/dist/css/neptune.css +26 -42
  3. package/dist/css/progress-bars.css +24 -36
  4. package/package.json +1 -1
  5. package/src/less/forms/bootstrap-forms.less +1 -1
  6. package/src/less/progress-bars.less +19 -34
package/dist/css/input-groups.css CHANGED
@@ -274,8 +274,8 @@ fieldset[disabled] input[type='checkbox'] {
274
274
  input[type="password"]::-ms-reveal {
275
275
  display: none;
276
276
  }
277
- .radio.disabled label,
278
- .checkbox.disabled label,
277
+ .radio-disabled label,
278
+ .checkbox-disabled label,
279
279
  fieldset[disabled] .radio label,
280
280
  fieldset[disabled] .checkbox label {
281
281
  cursor: not-allowed;
package/dist/css/neptune.css CHANGED
@@ -9571,8 +9571,8 @@ input[type="password"]::-ms-reveal {
9571
9571
  display: none;
9572
9572
  }
9573
9573
 
9574
- .radio.disabled label,
9575
- .checkbox.disabled label,
9574
+ .radio-disabled label,
9575
+ .checkbox-disabled label,
9576
9576
  fieldset[disabled] .radio label,
9577
9577
  fieldset[disabled] .checkbox label {
9578
9578
  cursor: not-allowed;
@@ -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.14.0",
4
+ "version": "14.16.0",
5
5
  "license": "MIT",
6
6
  "repository": {
7
7
  "type": "git",
package/src/less/forms/bootstrap-forms.less CHANGED
@@ -333,7 +333,7 @@ input[type="password"] {
333
333
  // These classes are used on elements with <label> descendants
334
334
  .radio,
335
335
  .checkbox {
336
- &.disabled,
336
+ &-disabled,
337
337
  fieldset[disabled] & {
338
338
  label {
339
339
  cursor: @cursor-disabled;
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