@transferwise/neptune-css 0.0.0-experimental-464eea9 → 0.0.0-experimental-2058986

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 +16 -41
  3. package/dist/css/progress-bars.css +14 -34
  4. package/package.json +1 -1
  5. package/src/less/forms/bootstrap-forms.less +1 -1
  6. package/src/less/progress-bars.less +7 -26
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,14 +22340,14 @@ 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
+ height: 8px;
22344
+ margin-top: calc((24px - 8px) / 2);
22345
+ margin-top: calc((var(--size-24) - 8px) / 2);
22346
+ margin-bottom: calc((24px - 8px) / 2);
22347
+ margin-bottom: calc((var(--size-24) - 8px) / 2);
22348
+ background-color: #c9cbce;
22349
+ background-color: var(--color-interactive-secondary);
22350
+ border-radius: calc(8px / 2);
22351
22351
  }
22352
22352
 
22353
22353
  .progress-bar {
@@ -22362,6 +22362,12 @@ button.popover-close {
22362
22362
  text-align: right;
22363
22363
  background-color: #0097c7;
22364
22364
  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);
22365
22371
  transition: width 0.6s ease;
22366
22372
  }
22367
22373
 
@@ -22373,37 +22379,6 @@ button.popover-close {
22373
22379
  text-align: left;
22374
22380
  }
22375
22381
 
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;
22405
- }
22406
-
22407
22382
  .progress-bar-primary {
22408
22383
  background-color: #37517e;
22409
22384
  background-color: var(--color-content-primary);
package/dist/css/progress-bars.css CHANGED
@@ -1,12 +1,12 @@
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
+ height: 8px;
3
+ margin-top: calc((24px - 8px) / 2);
4
+ margin-top: calc((var(--size-24) - 8px) / 2);
5
+ margin-bottom: calc((24px - 8px) / 2);
6
+ margin-bottom: calc((var(--size-24) - 8px) / 2);
7
+ background-color: #c9cbce;
8
+ background-color: var(--color-interactive-secondary);
9
+ border-radius: calc(8px / 2);
10
10
  }
11
11
  .progress-bar {
12
12
  float: left;
@@ -20,6 +20,12 @@
20
20
  text-align: right;
21
21
  background-color: #0097c7;
22
22
  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);
23
29
  transition: width 0.6s ease;
24
30
  }
25
31
  [dir="rtl"] .progress-bar {
@@ -28,32 +34,6 @@
28
34
  [dir="rtl"] .progress-bar {
29
35
  text-align: left;
30
36
  }
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;
56
- }
57
37
  .progress-bar-primary {
58
38
  background-color: #37517e;
59
39
  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-464eea9",
4
+ "version": "0.0.0-experimental-2058986",
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,14 +1,13 @@
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;
4
+ @progress-height: 8px;
6
5
 
7
6
  .progress {
8
7
  height: @progress-height;
9
8
  margin-top: calc((var(--size-24) - @progress-height) / 2);
10
9
  margin-bottom: calc((var(--size-24) - @progress-height) / 2);
11
- background-color: var(--color-background-neutral);
10
+ background-color: var(--color-interactive-secondary);
12
11
  border-radius: calc(@progress-height / 2);
13
12
  }
14
13
 
@@ -23,30 +22,12 @@
23
22
  .text-align(right);
24
23
 
25
24
  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);
26
30
  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
- }
45
-
46
- &:last-child {
47
- border-top-right-radius: @progress-height / 2;
48
- border-bottom-right-radius: @progress-height / 2;
49
- }
50
31
  }
51
32
 
52
33
  .progress-bar-primary {