@transferwise/components 0.0.0-experimental-d07c802 → 0.0.0-experimental-efa0479

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 (148) hide show
  1. package/build/index.esm.js +1 -1
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +1 -1
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -5510
  6. package/build/styles/accordion/Accordion.css +1 -60
  7. package/build/styles/actionButton/ActionButton.css +1 -53
  8. package/build/styles/avatar/Avatar.css +1 -205
  9. package/build/styles/badge/Badge.css +1 -68
  10. package/build/styles/button/Button.css +1 -20
  11. package/build/styles/card/Card.css +1 -100
  12. package/build/styles/checkboxButton/CheckboxButton.css +1 -24
  13. package/build/styles/chips/Chip.css +1 -190
  14. package/build/styles/circularButton/CircularButton.css +1 -211
  15. package/build/styles/common/Option/Option.css +1 -100
  16. package/build/styles/common/RadioButton/RadioButton.css +1 -4
  17. package/build/styles/common/bottomSheet/BottomSheet.css +1 -53
  18. package/build/styles/common/card/Card.css +1 -53
  19. package/build/styles/common/closeButton/CloseButton.css +1 -79
  20. package/build/styles/common/panel/Panel.css +1 -73
  21. package/build/styles/criticalBanner/CriticalCommsBanner.css +1 -77
  22. package/build/styles/dateInput/DateInput.css +1 -3
  23. package/build/styles/dateLookup/DateLookup.css +1 -98
  24. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +1 -68
  25. package/build/styles/decision/Decision.css +1 -93
  26. package/build/styles/definitionList/DefinitionList.css +1 -53
  27. package/build/styles/dimmer/Dimmer.css +1 -70
  28. package/build/styles/drawer/Drawer.css +1 -100
  29. package/build/styles/dropFade/DropFade.css +1 -19
  30. package/build/styles/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +1 -5
  31. package/build/styles/emphasis/Emphasis.css +1 -31
  32. package/build/styles/flowNavigation/FlowNavigation.css +1 -72
  33. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +1 -21
  34. package/build/styles/flowNavigation/backButton/BackButton.css +1 -32
  35. package/build/styles/header/Header.css +1 -28
  36. package/build/styles/image/Image.css +1 -13
  37. package/build/styles/info/Info.css +1 -32
  38. package/build/styles/inputs/Input.css +1 -106
  39. package/build/styles/inputs/InputGroup.css +1 -62
  40. package/build/styles/inputs/SelectInput.css +1 -374
  41. package/build/styles/inputs/TextArea.css +1 -110
  42. package/build/styles/instructionsList/InstructionsList.css +1 -22
  43. package/build/styles/link/Link.css +1 -15
  44. package/build/styles/listItem/ListItem.css +1 -6
  45. package/build/styles/loader/Loader.css +1 -313
  46. package/build/styles/logo/Logo.css +1 -26
  47. package/build/styles/main.css +1 -5510
  48. package/build/styles/modal/Modal.css +1 -155
  49. package/build/styles/moneyInput/MoneyInput.css +1 -66
  50. package/build/styles/navigationOption/NavigationOption.css +1 -69
  51. package/build/styles/navigationOptionsList/NavigationOptionsList.css +1 -13
  52. package/build/styles/nudge/Nudge.css +1 -182
  53. package/build/styles/overlayHeader/OverlayHeader.css +1 -15
  54. package/build/styles/phoneNumberInput/PhoneNumberInput.css +1 -23
  55. package/build/styles/popover/Popover.css +1 -43
  56. package/build/styles/progress/Progress.css +1 -43
  57. package/build/styles/progressBar/ProgressBar.css +1 -14
  58. package/build/styles/promoCard/PromoCard.css +1 -186
  59. package/build/styles/section/Section.css +1 -10
  60. package/build/styles/select/Select.css +1 -314
  61. package/build/styles/slidingPanel/SlidingPanel.css +1 -105
  62. package/build/styles/snackbar/Snackbar.css +1 -93
  63. package/build/styles/statusIcon/StatusIcon.css +1 -78
  64. package/build/styles/stepper/Stepper.css +1 -108
  65. package/build/styles/summary/Summary.css +1 -81
  66. package/build/styles/switch/Switch.css +1 -68
  67. package/build/styles/tabs/Tabs.css +1 -121
  68. package/build/styles/tile/Tile.css +1 -55
  69. package/build/styles/tooltip/Tooltip.css +1 -50
  70. package/build/styles/typeahead/Typeahead.css +1 -183
  71. package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css +1 -9
  72. package/build/styles/upload/Upload.css +1 -15
  73. package/build/styles/uploadInput/UploadInput.css +1 -71
  74. package/build/styles/uploadInput/uploadButton/UploadButton.css +1 -49
  75. package/build/styles/uploadInput/uploadItem/UploadItem.css +1 -74
  76. package/build/types/typeahead/typeaheadOption/TypeaheadOption.d.ts.map +1 -1
  77. package/package.json +4 -4
  78. package/src/accordion/Accordion.css +1 -60
  79. package/src/actionButton/ActionButton.css +1 -53
  80. package/src/avatar/Avatar.css +1 -205
  81. package/src/badge/Badge.css +1 -68
  82. package/src/button/Button.css +1 -20
  83. package/src/card/Card.css +1 -100
  84. package/src/checkboxButton/CheckboxButton.css +1 -24
  85. package/src/chips/Chip.css +1 -190
  86. package/src/circularButton/CircularButton.css +1 -211
  87. package/src/common/Option/Option.css +1 -100
  88. package/src/common/RadioButton/RadioButton.css +1 -4
  89. package/src/common/bottomSheet/BottomSheet.css +1 -53
  90. package/src/common/card/Card.css +1 -53
  91. package/src/common/closeButton/CloseButton.css +1 -79
  92. package/src/common/panel/Panel.css +1 -73
  93. package/src/criticalBanner/CriticalCommsBanner.css +1 -77
  94. package/src/dateInput/DateInput.css +1 -3
  95. package/src/dateLookup/DateLookup.css +1 -98
  96. package/src/dateLookup/dateTrigger/DateTrigger.css +1 -68
  97. package/src/decision/Decision.css +1 -93
  98. package/src/definitionList/DefinitionList.css +1 -53
  99. package/src/dimmer/Dimmer.css +1 -70
  100. package/src/drawer/Drawer.css +1 -100
  101. package/src/dropFade/DropFade.css +1 -19
  102. package/src/dynamicFieldDefinitionList/FormattedValue/FormattedValue.css +1 -5
  103. package/src/emphasis/Emphasis.css +1 -31
  104. package/src/flowNavigation/FlowNavigation.css +1 -72
  105. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +1 -21
  106. package/src/flowNavigation/backButton/BackButton.css +1 -32
  107. package/src/header/Header.css +1 -28
  108. package/src/image/Image.css +1 -13
  109. package/src/info/Info.css +1 -32
  110. package/src/inputs/Input.css +1 -106
  111. package/src/inputs/InputGroup.css +1 -62
  112. package/src/inputs/SelectInput.css +1 -374
  113. package/src/inputs/TextArea.css +1 -110
  114. package/src/instructionsList/InstructionsList.css +1 -22
  115. package/src/link/Link.css +1 -15
  116. package/src/listItem/ListItem.css +1 -6
  117. package/src/loader/Loader.css +1 -313
  118. package/src/logo/Logo.css +1 -26
  119. package/src/main.css +1 -5510
  120. package/src/modal/Modal.css +1 -155
  121. package/src/moneyInput/MoneyInput.css +1 -66
  122. package/src/navigationOption/NavigationOption.css +1 -69
  123. package/src/navigationOptionsList/NavigationOptionsList.css +1 -13
  124. package/src/nudge/Nudge.css +1 -182
  125. package/src/overlayHeader/OverlayHeader.css +1 -15
  126. package/src/phoneNumberInput/PhoneNumberInput.css +1 -23
  127. package/src/popover/Popover.css +1 -43
  128. package/src/progress/Progress.css +1 -43
  129. package/src/progressBar/ProgressBar.css +1 -14
  130. package/src/promoCard/PromoCard.css +1 -186
  131. package/src/section/Section.css +1 -10
  132. package/src/select/Select.css +1 -314
  133. package/src/slidingPanel/SlidingPanel.css +1 -105
  134. package/src/snackbar/Snackbar.css +1 -93
  135. package/src/statusIcon/StatusIcon.css +1 -78
  136. package/src/stepper/Stepper.css +1 -108
  137. package/src/summary/Summary.css +1 -81
  138. package/src/switch/Switch.css +1 -68
  139. package/src/tabs/Tabs.css +1 -121
  140. package/src/tile/Tile.css +1 -55
  141. package/src/tooltip/Tooltip.css +1 -50
  142. package/src/typeahead/Typeahead.css +1 -183
  143. package/src/typeahead/typeaheadOption/TypeaheadOption.css +1 -9
  144. package/src/typeahead/typeaheadOption/TypeaheadOption.js +3 -1
  145. package/src/upload/Upload.css +1 -15
  146. package/src/uploadInput/UploadInput.css +1 -71
  147. package/src/uploadInput/uploadButton/UploadButton.css +1 -49
  148. package/src/uploadInput/uploadItem/UploadItem.css +1 -74
@@ -1,93 +1 @@
1
- .snackbar {
2
- text-align: center;
3
- position: fixed;
4
- bottom: 0;
5
- left: 0;
6
- right: 0;
7
- z-index: 1060;
8
- }
9
- [dir="rtl"] .snackbar {
10
- right: 0;
11
- left: auto;
12
- left: initial;
13
- }
14
- [dir="rtl"] .snackbar {
15
- left: 0;
16
- right: 0;
17
- }
18
- .snackbar__text {
19
- background: #37517e;
20
- color: #ffffff;
21
- display: inline-flex;
22
- border-radius: 2px;
23
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
24
- align-items: center;
25
- justify-content: space-between;
26
- text-align: left;
27
- font-size: 0.875rem;
28
- font-size: var(--font-size-14);
29
- margin: 0 16px;
30
- margin: 0 var(--size-16);
31
- padding: 8px 16px;
32
- padding: var(--size-8) var(--size-16);
33
- width: calc(100% - 32px);
34
- width: calc(100% - var(--size-32));
35
- transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
36
- }
37
- [dir="rtl"] .snackbar__text {
38
- text-align: right;
39
- }
40
- .np-theme-personal .snackbar__text {
41
- box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
42
- position: relative;
43
- background: var(--color-contrast-theme);
44
- border-radius: 10px;
45
- border-radius: var(--radius-small);
46
- color: var(--color-contrast-overlay);
47
- }
48
- .np-theme-personal .snackbar__text::after {
49
- display: block;
50
- border-radius: inherit;
51
- height: 100%;
52
- width: 100%;
53
- content: "";
54
- position: absolute;
55
- left: 0;
56
- top: 0;
57
- z-index: -1;
58
- background-color: rgba(134,167,189,0.10196);
59
- background-color: var(--color-background-neutral);
60
- }
61
- .np-theme-personal--dark .snackbar__text,
62
- .np-theme-personal--forest-green .snackbar__text {
63
- box-shadow: none;
64
- }
65
- @media (min-width: 576px) {
66
- .snackbar__text {
67
- width: auto;
68
- max-width: 600px;
69
- }
70
- }
71
- .snackbar__text__action {
72
- flex-shrink: 0;
73
- margin-left: 16px;
74
- margin-left: var(--size-16);
75
- }
76
- [dir="rtl"] .snackbar__text__action {
77
- margin-right: 16px;
78
- margin-right: var(--size-16);
79
- margin-left: 0;
80
- }
81
- .snackbar__text-container-enter,
82
- .snackbar__text-container-exit {
83
- transform: translateY(calc(100% + 10px));
84
- }
85
- .snackbar__text-container-enter-active {
86
- transform: translateY(-16px);
87
- transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
88
- }
89
- @media (min-width: 576px) {
90
- .snackbar__text-container-enter-active {
91
- transform: translateY(-24px);
92
- }
93
- }
1
+ .snackbar{bottom:0;left:0;position:fixed;right:0;text-align:center;z-index:1060}[dir=rtl] .snackbar{left:auto;left:0;right:0}.snackbar__text{align-items:center;background:#37517e;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.25);color:#fff;display:inline-flex;font-size:.875rem;font-size:var(--font-size-14);justify-content:space-between;margin:0 16px;margin:0 var(--size-16);padding:8px 16px;padding:var(--size-8) var(--size-16);text-align:left;transition:.4s cubic-bezier(.215,.61,.355,1);width:calc(100% - 32px);width:calc(100% - var(--size-32))}[dir=rtl] .snackbar__text{text-align:right}.np-theme-personal .snackbar__text{background:var(--color-contrast-theme);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 2px 4px 0 rgba(69,71,69,.35);color:var(--color-contrast-overlay);position:relative}.np-theme-personal .snackbar__text:after{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border-radius:inherit;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.np-theme-personal--dark .snackbar__text,.np-theme-personal--forest-green .snackbar__text{box-shadow:none}@media (min-width:576px){.snackbar__text{max-width:600px;width:auto}}.snackbar__text__action{flex-shrink:0;margin-left:16px;margin-left:var(--size-16)}[dir=rtl] .snackbar__text__action{margin-left:0;margin-right:16px;margin-right:var(--size-16)}.snackbar__text-container-enter,.snackbar__text-container-exit{transform:translateY(calc(100% + 10px))}.snackbar__text-container-enter-active{transform:translateY(-16px);transform:translateY(calc(-16px - env(safe-area-inset-bottom)))}@media (min-width:576px){.snackbar__text-container-enter-active{transform:translateY(-24px)}}
@@ -1,78 +1 @@
1
- .status-icon > svg {
2
- height: 32px;
3
- height: var(--size-32);
4
- width: 32px;
5
- width: var(--size-32);
6
- }
7
- .status-circle {
8
- border-radius: 50%;
9
- display: flex;
10
- align-items: center;
11
- justify-content: center;
12
- flex-shrink: 0;
13
- }
14
- .status-circle .light {
15
- color: var(--color-contrast);
16
- }
17
- .status-circle .dark {
18
- color: #37517e;
19
- color: var(--color-content-primary);
20
- }
21
- .status-circle.warning,
22
- .status-circle.pending {
23
- background-color: var(--color-sentiment-warning);
24
- }
25
- .np-theme-personal .status-circle.warning .status-icon,
26
- .np-theme-personal .status-circle.pending .status-icon {
27
- color: var(--color-dark);
28
- }
29
- .status-circle-lg {
30
- width: 48px;
31
- width: var(--size-48);
32
- height: 48px;
33
- height: var(--size-48);
34
- }
35
- .status-circle-md {
36
- width: 40px;
37
- width: var(--size-40);
38
- height: 40px;
39
- height: var(--size-40);
40
- }
41
- .status-circle-sm {
42
- width: 16px;
43
- width: var(--size-16);
44
- height: 16px;
45
- height: var(--size-16);
46
- }
47
- .status-circle-sm .status-icon > svg {
48
- height: 14px;
49
- height: var(--size-14);
50
- width: 14px;
51
- width: var(--size-14);
52
- }
53
- @media (max-width: 320px) {
54
- .status-circle-sm .status-icon > svg {
55
- width: 24px;
56
- width: var(--size-24);
57
- height: 24px;
58
- height: var(--size-24);
59
- }
60
- }
61
- @media (max-width: 320px) {
62
- .status-circle-sm {
63
- width: 32px;
64
- width: var(--size-32);
65
- height: 32px;
66
- height: var(--size-32);
67
- }
68
- }
69
- .status-circle.negative {
70
- background-color: var(--color-sentiment-negative);
71
- }
72
- .status-circle.neutral {
73
- background-color: #5d7079;
74
- background-color: var(--color-content-secondary);
75
- }
76
- .status-circle.positive {
77
- background-color: var(--color-sentiment-positive);
78
- }
1
+ .status-icon>svg{height:32px;height:var(--size-32);width:32px;width:var(--size-32)}.status-circle{align-items:center;border-radius:50%;display:flex;flex-shrink:0;justify-content:center}.status-circle .light{color:var(--color-contrast)}.status-circle .dark{color:#37517e;color:var(--color-content-primary)}.status-circle.pending,.status-circle.warning{background-color:var(--color-sentiment-warning)}.np-theme-personal .status-circle.pending .status-icon,.np-theme-personal .status-circle.warning .status-icon{color:var(--color-dark)}.status-circle-lg{height:48px;height:var(--size-48);width:48px;width:var(--size-48)}.status-circle-md{height:40px;height:var(--size-40);width:40px;width:var(--size-40)}.status-circle-sm{height:16px;height:var(--size-16);width:16px;width:var(--size-16)}.status-circle-sm .status-icon>svg{height:14px;height:var(--size-14);width:14px;width:var(--size-14)}@media (max-width:320px){.status-circle-sm .status-icon>svg{height:24px;height:var(--size-24);width:24px;width:var(--size-24)}.status-circle-sm{height:32px;height:var(--size-32);width:32px;width:var(--size-32)}}.status-circle.negative{background-color:var(--color-sentiment-negative)}.status-circle.neutral{background-color:#5d7079;background-color:var(--color-content-secondary)}.status-circle.positive{background-color:var(--color-sentiment-positive)}
@@ -1,108 +1 @@
1
- .tw-stepper {
2
- padding-bottom: 24px;
3
- width: 100%;
4
- }
5
- @media only screen and (max-width: 575px) {
6
- .tw-stepper {
7
- padding-bottom: 0;
8
- }
9
- }
10
- .tw-stepper__step {
11
- position: absolute;
12
- top: 0;
13
- list-style-type: none;
14
- }
15
- .tw-stepper__step--active .tw-stepper__step-label {
16
- cursor: default;
17
- color: #37517e;
18
- color: var(--color-content-primary);
19
- }
20
- .tw-stepper__step--clickable .tw-stepper__step-label {
21
- color: #0097c7;
22
- color: var(--color-content-accent);
23
- transition: color 0.15s ease-in-out;
24
- line-height: 0;
25
- border-radius: 2px;
26
- }
27
- .np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label {
28
- color: #5d7079;
29
- color: var(--color-content-secondary);
30
- top: 0;
31
- }
32
- .tw-stepper__step--has-tooltip {
33
- cursor: pointer;
34
- }
35
- @media screen and (min-width: 576px) and (max-width: 991px) {
36
- .tw-stepper__step:first-child .tooltip-inner {
37
- transform: translateX(calc(50% - 32px));
38
- }
39
- .tw-stepper__step:last-child .tooltip-inner {
40
- transform: translateX(calc(-50% + 32px));
41
- }
42
- }
43
- .tw-stepper__step-label {
44
- position: absolute;
45
- top: 0;
46
- color: #5d7079;
47
- color: var(--color-content-secondary);
48
- transition: color 0.6s ease-in-out;
49
- white-space: nowrap;
50
- transform: translateX(-50%) ;
51
- }
52
- [dir="rtl"] .tw-stepper__step-label {
53
- transform: translateX(50%) ;
54
- }
55
- .tw-stepper .tooltip {
56
- top: 24px !important;
57
- white-space: nowrap;
58
- }
59
- .tw-stepper .tooltip .tooltip-inner {
60
- max-width: 100%;
61
- }
62
- .tw-stepper .tw-tooltip-container {
63
- display: inline-block;
64
- }
65
- .tw-stepper-steps {
66
- position: relative;
67
- padding: 0 ;
68
- }
69
- [dir="rtl"] .tw-stepper-steps {
70
- padding: 0 ;
71
- }
72
- .progress-bar {
73
- float: left;
74
- -webkit-backface-visibility: hidden;
75
- height: 100%;
76
- background-color: var(--color-interactive-primary);
77
- border-top-left-radius: 1px;
78
- border-bottom-left-radius: 1px;
79
- transition: width 0.6s ease-in-out;
80
- will-change: width;
81
- }
82
- [dir="rtl"] .progress-bar {
83
- float: right;
84
- }
85
- .progress-bar::after {
86
- float: right;
87
- width: 8px;
88
- height: 8px;
89
- margin-top: -3px;
90
- margin-right: -4px;
91
- content: "";
92
- border-radius: 4px;
93
- }
94
- [dir="rtl"] .progress-bar::after {
95
- float: left;
96
- }
97
- [dir="rtl"] .progress-bar::after {
98
- margin-left: -4px;
99
- margin-right: 0;
100
- margin-right: initial;
101
- }
102
- .btn-unstyled {
103
- background: none;
104
- border: none;
105
- margin: 0;
106
- padding: 0;
107
- display: block;
108
- }
1
+ .tw-stepper{padding-bottom:24px;width:100%}@media only screen and (max-width:575px){.tw-stepper{padding-bottom:0}}.tw-stepper__step{list-style-type:none;position:absolute;top:0}.tw-stepper__step--active .tw-stepper__step-label{color:#37517e;color:var(--color-content-primary);cursor:default}.tw-stepper__step--clickable .tw-stepper__step-label{border-radius:2px;color:#0097c7;color:var(--color-content-accent);line-height:0;transition:color .15s ease-in-out}.np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);top:0}.tw-stepper__step--has-tooltip{cursor:pointer}@media screen and (min-width:576px) and (max-width:991px){.tw-stepper__step:first-child .tooltip-inner{transform:translateX(calc(50% - 32px))}.tw-stepper__step:last-child .tooltip-inner{transform:translateX(calc(-50% + 32px))}}.tw-stepper__step-label{color:#5d7079;color:var(--color-content-secondary);position:absolute;top:0;transform:translateX(-50%);transition:color .6s ease-in-out;white-space:nowrap}[dir=rtl] .tw-stepper__step-label{transform:translateX(50%)}.tw-stepper .tooltip{top:24px!important;white-space:nowrap}.tw-stepper .tooltip .tooltip-inner{max-width:100%}.tw-stepper .tw-tooltip-container{display:inline-block}.tw-stepper-steps{padding:0;position:relative}[dir=rtl] .tw-stepper-steps{padding:0}.progress-bar{-webkit-backface-visibility:hidden;background-color:var(--color-interactive-primary);border-bottom-left-radius:1px;border-top-left-radius:1px;float:left;height:100%;transition:width .6s ease-in-out;will-change:width}[dir=rtl] .progress-bar{float:right}.progress-bar:after{border-radius:4px;content:"";float:right;height:8px;margin-right:-4px;margin-top:-3px;width:8px}[dir=rtl] .progress-bar:after{float:left;margin-left:-4px;margin-right:0}.btn-unstyled{background:none;border:none;display:block;margin:0;padding:0}
@@ -1,81 +1 @@
1
- .np-summary {
2
- min-width: 280px;
3
- }
4
- .np-summary__body {
5
- flex: 1;
6
- }
7
- .np-summary__title {
8
- margin-top: 2px;
9
- line-height: calc(22 / 16);
10
- font-weight: 600;
11
- font-weight: var(--font-weight-semi-bold);
12
- justify-content: space-between;
13
- margin-top: 0;
14
- }
15
- .np-summary__title span {
16
- line-height: 1.375;
17
- margin-bottom: 0 !important;
18
- letter-spacing: normal;
19
- }
20
- .np-summary__title .np-info button {
21
- margin-top: 0;
22
- }
23
- .np-summary__title .np-info__small {
24
- margin-top: 0;
25
- }
26
- .np-summary__title .np-info .tw-icon {
27
- color: var(--color-interactive-primary);
28
- }
29
- .np-summary__icon {
30
- position: relative;
31
- color: #37517e;
32
- color: var(--color-content-primary);
33
- }
34
- .np-summary__icon .np-summary-icon__done {
35
- color: var(--color-sentiment-positive);
36
- }
37
- .np-summary__icon .np-summary-icon__pending {
38
- color: var(--color-sentiment-warning);
39
- }
40
- .np-summary__icon :nth-child(2) {
41
- background-color: transparent;
42
- border-radius: 50%;
43
- position: absolute;
44
- right: calc(8px * -1);
45
- right: calc(var(--size-8) * -1);
46
- bottom: -6px;
47
- }
48
- [dir="rtl"] .np-summary__icon :nth-child(2) {
49
- left: calc(8px * -1);
50
- left: calc(var(--size-8) * -1);
51
- right: auto;
52
- right: initial;
53
- }
54
- .np-summary__description {
55
- margin-top: 4px;
56
- margin-top: var(--size-4);
57
- font-size: 0.875rem;
58
- font-size: var(--font-size-14);
59
- line-height: calc(20 / 14);
60
- color: #5d7079;
61
- color: var(--color-content-secondary);
62
- padding-right: calc(24px + 8px);
63
- padding-right: calc(var(--size-24) + var(--size-8));
64
- }
65
- [dir="rtl"] .np-summary__description {
66
- padding-left: calc(24px + 8px);
67
- padding-left: calc(var(--size-24) + var(--size-8));
68
- padding-right: 0;
69
- }
70
- .np-summary__action {
71
- margin-top: 4px;
72
- margin-top: var(--size-4);
73
- font-size: 0.875rem;
74
- font-size: var(--font-size-14);
75
- font-weight: 600;
76
- font-weight: var(--font-weight-semi-bold);
77
- }
78
- .np-summary + .np-summary {
79
- margin-top: 24px;
80
- margin-top: var(--size-24);
81
- }
1
+ .np-summary{min-width:280px}.np-summary__body{flex:1}.np-summary__title{font-weight:600;font-weight:var(--font-weight-semi-bold);justify-content:space-between;line-height:1.375;margin-top:0}.np-summary__title span{letter-spacing:normal;line-height:1.375;margin-bottom:0!important}.np-summary__title .np-info button,.np-summary__title .np-info__small{margin-top:0}.np-summary__title .np-info .tw-icon{color:var(--color-interactive-primary)}.np-summary__icon{color:#37517e;color:var(--color-content-primary);position:relative}.np-summary__icon .np-summary-icon__done{color:var(--color-sentiment-positive)}.np-summary__icon .np-summary-icon__pending{color:var(--color-sentiment-warning)}.np-summary__icon :nth-child(2){background-color:transparent;border-radius:50%;bottom:-6px;position:absolute;right:-8px;right:calc(var(--size-8)*-1)}[dir=rtl] .np-summary__icon :nth-child(2){left:-8px;left:calc(var(--size-8)*-1);right:auto}.np-summary__description{color:#5d7079;color:var(--color-content-secondary);font-size:.875rem;font-size:var(--font-size-14);line-height:1.42857;margin-top:4px;margin-top:var(--size-4);padding-right:32px;padding-right:calc(var(--size-24) + var(--size-8))}[dir=rtl] .np-summary__description{padding-left:32px;padding-left:calc(var(--size-24) + var(--size-8));padding-right:0}.np-summary__action{font-size:.875rem;font-size:var(--font-size-14);font-weight:600;font-weight:var(--font-weight-semi-bold);margin-top:4px;margin-top:var(--size-4)}.np-summary+.np-summary{margin-top:24px;margin-top:var(--size-24)}
@@ -1,68 +1 @@
1
- .np-switch {
2
- display: inline-flex;
3
- overflow: hidden;
4
- width: 50px;
5
- padding: 2px;
6
- border-radius: 16px;
7
- }
8
- .np-switch:focus {
9
- outline: none;
10
- }
11
- .np-switch:focus-visible {
12
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
13
- outline-offset: var(--ring-outline-offset);
14
- }
15
- .np-switch--thumb {
16
- display: flex;
17
- transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
18
- }
19
- .np-switch--thumb .tw-icon {
20
- color: #fff;
21
- }
22
- .np-switch--unchecked {
23
- background: #c9cbce;
24
- background: var(--color-interactive-secondary);
25
- }
26
- .np-switch--unchecked .switch--thumb {
27
- transform: translateX(0);
28
- }
29
- .np-switch--checked {
30
- background: #00a2dd;
31
- background: var(--color-interactive-accent);
32
- }
33
- .np-switch--checked .np-switch--thumb {
34
- transform: translateX(20px) ;
35
- }
36
- [dir="rtl"] .np-switch--checked .np-switch--thumb {
37
- transform: translateX(-20px) ;
38
- }
39
- .np-switch input {
40
- position: absolute;
41
- left: -100%;
42
- display: none;
43
- width: 0;
44
- height: 0;
45
- opacity: 0;
46
- }
47
- [dir="rtl"] .np-switch input {
48
- right: -100%;
49
- left: auto;
50
- left: initial;
51
- }
52
- .np-switch:not([aria-disabled]) {
53
- cursor: pointer;
54
- }
55
- .np-theme-personal .np-switch {
56
- padding: 1px 2px;
57
- }
58
- .np-theme-personal .np-switch--checked {
59
- background: var(--color-interactive-primary);
60
- }
61
- .np-theme-personal .np-switch--thumb {
62
- width: 20px;
63
- height: 20px;
64
- margin: 3px;
65
- border-radius: 50%;
66
- background-color: #ffffff;
67
- background-color: var(--color-background-screen);
68
- }
1
+ .np-switch{border-radius:16px;display:inline-flex;overflow:hidden;padding:2px;width:50px}.np-switch:focus{outline:none}.np-switch:focus-visible{outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}.np-switch--thumb{display:flex;transition:transform .35s cubic-bezier(0,.94,.62,1)}.np-switch--thumb .tw-icon{color:#fff}.np-switch--unchecked{background:#c9cbce;background:var(--color-interactive-secondary)}.np-switch--unchecked .switch--thumb{transform:translateX(0)}.np-switch--checked{background:#00a2dd;background:var(--color-interactive-accent)}.np-switch--checked .np-switch--thumb{transform:translateX(20px)}[dir=rtl] .np-switch--checked .np-switch--thumb{transform:translateX(-20px)}.np-switch input{display:none;height:0;left:-100%;opacity:0;position:absolute;width:0}[dir=rtl] .np-switch input{left:auto;right:-100%}.np-switch:not([aria-disabled]){cursor:pointer}.np-theme-personal .np-switch{padding:1px 2px}.np-theme-personal .np-switch--checked{background:var(--color-interactive-primary)}.np-theme-personal .np-switch--thumb{background-color:#fff;background-color:var(--color-background-screen);border-radius:50%;height:20px;margin:3px;width:20px}
@@ -1,121 +1 @@
1
- .tabs {
2
- position: relative;
3
- }
4
- .tabs__tab {
5
- display: inline-block;
6
- outline: none;
7
- text-align: center;
8
- padding: 8px;
9
- padding: var(--size-8);
10
- margin-bottom: -2px;
11
- color: #37517e;
12
- color: var(--color-content-primary);
13
- font-weight: 600;
14
- font-weight: var(--font-weight-semi-bold);
15
- transition: color 0.15s ease-in-out;
16
- }
17
- .np-theme-personal .tabs__tab {
18
- color: #5d7079;
19
- color: var(--color-content-secondary);
20
- font-weight: 400;
21
- font-weight: var(--font-weight-regular);
22
- }
23
- .tabs__tab--selected {
24
- color: #0097c7;
25
- color: var(--color-content-accent);
26
- }
27
- .np-theme-personal .tabs__tab--selected {
28
- color: var(--color-interactive-primary);
29
- font-weight: 600;
30
- font-weight: var(--font-weight-semi-bold);
31
- }
32
- .tabs__tab__content {
33
- border-radius: 2px;
34
- }
35
- .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
36
- color: #0084b3;
37
- color: var(--color-content-accent-hover);
38
- }
39
- .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
40
- color: var(--color-interactive-primary-hover);
41
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
42
- outline-offset: var(--ring-outline-offset);
43
- }
44
- @media (min-width: 992px) {
45
- .tabs__tab:not(.disabled):not(:disabled):hover {
46
- color: #0084b3;
47
- color: var(--color-content-accent-hover);
48
- }
49
- .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
50
- color: var(--color-interactive-primary-hover);
51
- }
52
- }
53
- @media (hover: hover) {
54
- .tabs__tab:not(.disabled):not(:disabled):hover {
55
- color: #0084b3;
56
- color: var(--color-content-accent-hover);
57
- }
58
- .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
59
- color: var(--color-interactive-primary-hover);
60
- }
61
- }
62
- .tabs__tab-list {
63
- list-style: none;
64
- padding: 0;
65
- margin: 0;
66
- border-bottom: 1px solid rgba(0,0,0,0.10196);
67
- border-bottom: 1px solid var(--color-border-neutral);
68
- }
69
- .tabs__line {
70
- height: 2px;
71
- background-color: #00a2dd;
72
- background-color: var(--color-interactive-accent);
73
- transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
74
- position: relative;
75
- bottom: -1px;
76
- }
77
- .np-theme-personal .tabs__line {
78
- background-color: var(--color-interactive-primary);
79
- }
80
- .tabs__panel-container {
81
- width: 100%;
82
- }
83
- .tabs__slider {
84
- display: flex;
85
- }
86
- .tabs__panel--selected {
87
- padding: 8px;
88
- padding: var(--size-8);
89
- }
90
- .tabs__panel.enter {
91
- opacity: 0;
92
- }
93
- .tabs__panel.enter-active {
94
- opacity: 1;
95
- }
96
- .tabs__panel.exit {
97
- opacity: 0;
98
- }
99
- .tabs--inverse .tabs__tab-list {
100
- border-bottom-color: rgba(0,0,0,0.10196);
101
- border-bottom-color: var(--color-border-neutral);
102
- }
103
- .tabs--inverse .tabs__tab:not(.tabs__tab--selected) {
104
- color: #fff;
105
- }
106
- .tabs.tabs--auto-width .tabs__tab {
107
- display: inline-flex;
108
- min-height: 40px;
109
- min-height: var(--size-40);
110
- padding: 0 12px;
111
- padding: 0 var(--size-12);
112
- justify-content: center;
113
- align-items: center;
114
- vertical-align: middle;
115
- }
116
- @media (min-width: 576px) {
117
- .tabs.tabs--auto-width .tabs__tab {
118
- padding: 0 24px;
119
- padding: 0 var(--size-24);
120
- }
121
- }
1
+ .tabs{position:relative}.tabs__tab{color:#37517e;color:var(--color-content-primary);display:inline-block;font-weight:600;font-weight:var(--font-weight-semi-bold);margin-bottom:-2px;outline:none;padding:8px;padding:var(--size-8);text-align:center;transition:color .15s ease-in-out}.np-theme-personal .tabs__tab{color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular)}.tabs__tab--selected{color:#0097c7;color:var(--color-content-accent)}.np-theme-personal .tabs__tab--selected{color:var(--color-interactive-primary);font-weight:600;font-weight:var(--font-weight-semi-bold)}.tabs__tab__content{border-radius:2px}.tabs__tab:not(.disabled,:disabled):focus-visible .tabs__tab__content{color:#0084b3;color:var(--color-content-accent-hover)}.np-theme-personal .tabs__tab:not(.disabled,:disabled):focus-visible .tabs__tab__content{color:var(--color-interactive-primary-hover);outline:var(--ring-outline-color) solid var(--ring-outline-width);outline-offset:var(--ring-outline-offset)}@media (min-width:992px){.tabs__tab:not(.disabled,:disabled):hover{color:#0084b3;color:var(--color-content-accent-hover)}.np-theme-personal .tabs__tab:not(.disabled,:disabled):hover{color:var(--color-interactive-primary-hover)}}@media (hover:hover){.tabs__tab:not(.disabled,:disabled):hover{color:#0084b3;color:var(--color-content-accent-hover)}.np-theme-personal .tabs__tab:not(.disabled,:disabled):hover{color:var(--color-interactive-primary-hover)}}.tabs__tab-list{border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);list-style:none;margin:0;padding:0}.tabs__line{background-color:#00a2dd;background-color:var(--color-interactive-accent);bottom:-1px;height:2px;position:relative;transition:transform .35s cubic-bezier(0,.94,.62,1)}.np-theme-personal .tabs__line{background-color:var(--color-interactive-primary)}.tabs__panel-container{width:100%}.tabs__slider{display:flex}.tabs__panel--selected{padding:8px;padding:var(--size-8)}.tabs__panel.enter{opacity:0}.tabs__panel.enter-active{opacity:1}.tabs__panel.exit{opacity:0}.tabs--inverse .tabs__tab-list{border-bottom-color:#0000001a;border-bottom-color:var(--color-border-neutral)}.tabs--inverse .tabs__tab:not(.tabs__tab--selected){color:#fff}.tabs.tabs--auto-width .tabs__tab{align-items:center;display:inline-flex;justify-content:center;min-height:40px;min-height:var(--size-40);padding:0 12px;padding:0 var(--size-12);vertical-align:middle}@media (min-width:576px){.tabs.tabs--auto-width .tabs__tab{padding:0 24px;padding:0 var(--size-24)}}
@@ -1,55 +1 @@
1
- @media (min-width: 768px) {
2
- }@media (min-width: 768px) {
3
- }.np-tile {
4
- min-width: 120px;
5
- border-radius: 10px;
6
- border-radius: var(--radius-small);
7
- width: 100%;
8
- }.np-theme-personal .np-tile {
9
- background-color: rgba(134,167,189,0.10196);
10
- background-color: var(--color-background-neutral);
11
- }.np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
12
- background-color: var(--color-contrast);
13
- }.np-tile.decision {
14
- margin-top: 0;
15
- border: 1px solid rgba(0,0,0,0.10196);
16
- border: 1px solid var(--color-border-neutral);
17
- }.np-theme-personal .np-tile.decision {
18
- border: none;
19
- }.np-theme-personal .np-tile.decision:hover {
20
- background-color: var(--color-background-neutral-hover);
21
- }.np-theme-personal .np-tile.decision:active {
22
- background-color: var(--color-background-neutral-active);
23
- }.np-theme-personal .np-tile.decision .np-text-body-default {
24
- color: #5d7079;
25
- color: var(--color-content-secondary);
26
- }.np-tile.np-decision__tile--fixed-width {
27
- width: 300px;
28
- }.np-tile__media {
29
- width: 100%;
30
- }.np-tile__description {
31
- color: #5d7079;
32
- color: var(--color-content-secondary);
33
- margin-top: 12px;
34
- margin-top: var(--size-12);
35
- display: inline-block;
36
- }.np-tile--small.np-decision__tile--fixed-width {
37
- width: 260px;
38
- }.np-tile--small .np-tile__description {
39
- margin-top: 4px;
40
- margin-top: var(--size-4);
41
- }.np-tile:hover .tw-avatar {
42
- pointer-events: none;
43
- }.np-tile:hover .tw-avatar .tw-avatar__content {
44
- background-color: #ffffff;
45
- background-color: var(--color-background-screen);
46
- }.np-tile__description {
47
- color: #5d7079;
48
- color: var(--color-content-secondary);
49
- font-weight: 400;
50
- font-weight: var(--font-weight-regular);
51
- line-height: 1.5;
52
- line-height: var(--line-height-body);
53
- margin-top: 12px;
54
- margin-top: var(--size-12);
55
- }
1
+ .np-tile{border-radius:10px;border-radius:var(--radius-small);min-width:120px;width:100%}.np-theme-personal .np-tile{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.np-theme-personal .np-tile .tw-avatar .tw-avatar__content{background-color:var(--color-contrast)}.np-tile.decision{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);margin-top:0}.np-theme-personal .np-tile.decision{border:none}.np-theme-personal .np-tile.decision:hover{background-color:var(--color-background-neutral-hover)}.np-theme-personal .np-tile.decision:active{background-color:var(--color-background-neutral-active)}.np-theme-personal .np-tile.decision .np-text-body-default{color:#5d7079;color:var(--color-content-secondary)}.np-tile.np-decision__tile--fixed-width{width:300px}.np-tile__media{width:100%}.np-tile__description{display:inline-block}.np-tile--small.np-decision__tile--fixed-width{width:260px}.np-tile--small .np-tile__description{margin-top:4px;margin-top:var(--size-4)}.np-tile:hover .tw-avatar{pointer-events:none}.np-tile:hover .tw-avatar .tw-avatar__content{background-color:#fff;background-color:var(--color-background-screen)}.np-tile__description{color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular);line-height:1.5;line-height:var(--line-height-body);margin-top:12px;margin-top:var(--size-12)}
@@ -1,50 +1 @@
1
- .tw-tooltip-container {
2
- display: inline-block;
3
- /*
4
- What we do is we wait 0.15s so the fade out animation is seen
5
- and then we run our own animation to hide it with visibility.
6
- This isn't actually animating, but it just turns visibility to hidden with a delay.
7
- */
8
- }
9
- .tw-tooltip-container .tooltip {
10
- visibility: visible;
11
- -webkit-user-select: none;
12
- -moz-user-select: none;
13
- user-select: none;
14
- }
15
- .tw-tooltip-container .tooltip:not(.in) {
16
- pointer-events: none;
17
- animation: tw-tooltip-disappear;
18
- animation-duration: 0s;
19
- animation-delay: 0.15s;
20
- animation-fill-mode: both;
21
- }
22
- @keyframes tw-tooltip-disappear {
23
- from {
24
- visibility: visible;
25
- }
26
- to {
27
- visibility: hidden;
28
- }
29
- }
30
- .np-tooltip {
31
- z-index: 1070;
32
- visibility: hidden;
33
- }
34
- .np-tooltip .tooltip-inner {
35
- visibility: hidden;
36
- }
37
- .np-tooltip--open {
38
- visibility: visible;
39
- visibility: initial;
40
- }
41
- .np-tooltip--open .tooltip-inner {
42
- visibility: visible;
43
- visibility: initial;
44
- }
45
- .np-panel[data-popper-placement^="right"] > .np-panel__content.tooltip-inner .np-panel__arrow {
46
- left: -7px;
47
- }
48
- .np-panel[data-popper-placement^="left"] > .np-panel__content.tooltip-inner .np-panel__arrow {
49
- right: -7px;
50
- }
1
+ .tw-tooltip-container{display:inline-block}.tw-tooltip-container .tooltip{-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:visible}.tw-tooltip-container .tooltip:not(.in){animation:tw-tooltip-disappear;animation-delay:.15s;animation-duration:0s;animation-fill-mode:both;pointer-events:none}@keyframes tw-tooltip-disappear{0%{visibility:visible}to{visibility:hidden}}.np-tooltip{z-index:1070}.np-tooltip,.np-tooltip .tooltip-inner{visibility:hidden}.np-tooltip--open,.np-tooltip--open .tooltip-inner{visibility:initial}.np-panel[data-popper-placement^=right]>.np-panel__content.tooltip-inner .np-panel__arrow{left:-7px}.np-panel[data-popper-placement^=left]>.np-panel__content.tooltip-inner .np-panel__arrow{right:-7px}