@transferwise/components 0.0.0-experimental-442b3cf → 0.0.0-experimental-a74996e

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 (7) hide show
  1. package/build/main.css +1 -1
  2. package/build/styles/circularButton/CircularButton.css +1 -1
  3. package/build/styles/main.css +1 -1
  4. package/package.json +3 -3
  5. package/src/circularButton/CircularButton.css +1 -1
  6. package/src/circularButton/CircularButton.less +6 -0
  7. package/src/main.css +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-442b3cf",
3
+ "version": "0.0.0-experimental-a74996e",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -78,12 +78,12 @@
78
78
  "rollup": "^3.28.1",
79
79
  "storybook": "^7.4.5",
80
80
  "@transferwise/less-config": "3.0.6",
81
- "@transferwise/neptune-css": "0.0.0-experimental-442b3cf",
81
+ "@transferwise/neptune-css": "0.0.0-experimental-a74996e",
82
82
  "@wise/components-theming": "0.8.4"
83
83
  },
84
84
  "peerDependencies": {
85
85
  "@transferwise/icons": "^3.7.0",
86
- "@transferwise/neptune-css": "0.0.0-experimental-442b3cf",
86
+ "@transferwise/neptune-css": "0.0.0-experimental-a74996e",
87
87
  "@wise/art": "^2.7.0",
88
88
  "@wise/components-theming": "^0.8.4",
89
89
  "currency-flags": "^4.0.2",
package/src/circularButton/CircularButton.css CHANGED
@@ -1 +1 @@
1
- .np-circular-btn{align-items:center;cursor:pointer;display:inline-flex;flex-direction:column;position:relative;text-align:center}.np-circular-btn input[type=button]{border-radius:50%;height:40px;height:var(--size-40);margin-bottom:8px;margin-bottom:var(--size-8);min-height:40px;min-height:var(--size-40);padding:0;width:40px;width:var(--size-40)}.np-theme-personal .np-circular-btn input[type=button]{height:56px;height:var(--size-56);min-height:56px;min-height:var(--size-56);width:56px;width:var(--size-56)}.np-circular-btn .tw-icon{color:#fff;left:0;pointer-events:none;position:absolute;top:16px;top:var(--size-16);transition:color .15s ease-in-out;width:100%}[dir=rtl] .np-circular-btn .tw-icon{left:auto;right:0}@media (max-width:385px){.np-circular-btn .tw-icon{top:8px;top:var(--size-8)}}.np-circular-btn .tw-icon>svg{margin:0 auto}.np-theme-personal .np-circular-btn .tw-icon,.np-theme-personal .np-circular-btn .tw-icon:active,.np-theme-personal .np-circular-btn .tw-icon:hover{color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.negative .tw-icon,.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled):active .tw-icon,.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled):hover .tw-icon{color:var(--color-contrast)!important}.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled) .tw-icon{color:var(--color-sentiment-negative)!important}.np-circular-btn__label{font-size:.875rem;font-size:var(--font-size-14);font-weight:600;font-weight:var(--font-weight-semi-bold);transition:color .15s ease-in-out}.np-circular-btn.accent .np-circular-btn__label{color:#00a2dd;color:var(--color-interactive-accent)}.np-circular-btn.accent:not(.disabled,:disabled):hover .np-circular-btn__label{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-circular-btn.accent input[type=button]:active~.np-circular-btn__label,.np-circular-btn.accent:active .np-circular-btn__label{color:#0081ba;color:var(--color-interactive-accent-active)}.np-circular-btn.accent.secondary .tw-icon{color:#00a2dd;color:var(--color-interactive-accent)}.np-circular-btn.accent.secondary input[type=button]:active+.tw-icon,.np-circular-btn.accent.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff}.np-circular-btn.positive .np-circular-btn__label{color:#2ead4b;color:var(--color-interactive-positive)}.np-circular-btn.positive:not(.disabled,:disabled):hover .np-circular-btn__label{color:#069939;color:var(--color-interactive-positive-hover)}.np-circular-btn.positive input[type=button]:active~.np-circular-btn__label,.np-circular-btn.positive:active .np-circular-btn__label{color:#008b2b;color:var(--color-interactive-positive-active)}.np-circular-btn.positive.secondary .tw-icon{color:#2ead4b;color:var(--color-interactive-positive)}.np-circular-btn.positive.secondary input[type=button]:active+.tw-icon,.np-circular-btn.positive.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff}.np-circular-btn.negative .np-circular-btn__label{color:#e74848;color:var(--color-interactive-negative)}.np-circular-btn.negative:not(.disabled,:disabled):hover .np-circular-btn__label{color:#d03238;color:var(--color-interactive-negative-hover)}.np-circular-btn.negative input[type=button]:active~.np-circular-btn__label,.np-circular-btn.negative:active .np-circular-btn__label{color:#bf1e2c;color:var(--color-interactive-negative-active)}.np-circular-btn.negative.secondary .tw-icon{color:#e74848;color:var(--color-interactive-negative)}.np-circular-btn.negative.secondary input[type=button]:active+.tw-icon,.np-circular-btn.negative.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff}.np-theme-personal .np-circular-btn.accent .np-circular-btn__label{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.accent:not(.disabled,:disabled):hover .np-circular-btn__label{color:var(--color-interactive-primary-hover)}.np-theme-personal .np-circular-btn.accent input[type=button]:active~.np-circular-btn__label,.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label{color:var(--color-interactive-primary-active)}.np-theme-personal .np-circular-btn.accent.secondary .tw-icon{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.accent.secondary input[type=button]:active+.tw-icon,.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff;color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.accent.secondary:active input[type=button]+.tw-icon{color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.positive .np-circular-btn__label{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.positive:not(.disabled,:disabled):hover .np-circular-btn__label{color:var(--color-interactive-primary-hover)}.np-theme-personal .np-circular-btn.positive input[type=button]:active~.np-circular-btn__label,.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label{color:var(--color-interactive-primary-active)}.np-theme-personal .np-circular-btn.positive.secondary .tw-icon{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.positive.secondary input[type=button]:active+.tw-icon,.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff;color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.positive.secondary:active input[type=button]+.tw-icon{color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.negative .np-circular-btn__label{color:var(--color-sentiment-negative)}.np-theme-personal .np-circular-btn.negative:not(.disabled,:disabled):hover .np-circular-btn__label{color:var(--color-sentiment-negative-hover)}.np-theme-personal .np-circular-btn.negative input[type=button]:active~.np-circular-btn__label,.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label{color:var(--color-sentiment-negative-active)}.np-theme-personal .np-circular-btn.negative.secondary .tw-icon{color:var(--color-sentiment-negative)}.np-theme-personal .np-circular-btn.negative.secondary input[type=button]:active+.tw-icon,.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff;color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.negative.secondary:active input[type=button]+.tw-icon{color:var(--color-interactive-control)}
1
+ .np-circular-btn{align-items:center;cursor:pointer;display:inline-flex;flex-direction:column;position:relative;text-align:center}.np-circular-btn input[type=button]{border-radius:50%;height:40px;height:var(--size-40);margin-bottom:8px;margin-bottom:var(--size-8);min-height:40px;min-height:var(--size-40);padding:0;width:40px;width:var(--size-40)}.np-theme-personal .np-circular-btn input[type=button]{height:56px;height:var(--size-56);min-height:56px;min-height:var(--size-56);width:56px;width:var(--size-56)}@media (max-width:385px){.np-theme-personal .np-circular-btn input[type=button]{height:64px;height:var(--size-64);min-height:64px;min-height:var(--size-64);width:64px;width:var(--size-64)}}.np-circular-btn .tw-icon{color:#fff;left:0;pointer-events:none;position:absolute;top:16px;top:var(--size-16);transition:color .15s ease-in-out;width:100%}[dir=rtl] .np-circular-btn .tw-icon{left:auto;right:0}@media (max-width:385px){.np-circular-btn .tw-icon{top:8px;top:var(--size-8)}}.np-circular-btn .tw-icon>svg{margin:0 auto}.np-theme-personal .np-circular-btn .tw-icon,.np-theme-personal .np-circular-btn .tw-icon:active,.np-theme-personal .np-circular-btn .tw-icon:hover{color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.negative .tw-icon,.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled):active .tw-icon,.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled):hover .tw-icon{color:var(--color-contrast)!important}.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled) .tw-icon{color:var(--color-sentiment-negative)!important}.np-circular-btn__label{font-size:.875rem;font-size:var(--font-size-14);font-weight:600;font-weight:var(--font-weight-semi-bold);transition:color .15s ease-in-out}.np-circular-btn.accent .np-circular-btn__label{color:#00a2dd;color:var(--color-interactive-accent)}.np-circular-btn.accent:not(.disabled,:disabled):hover .np-circular-btn__label{color:#008fc9;color:var(--color-interactive-accent-hover)}.np-circular-btn.accent input[type=button]:active~.np-circular-btn__label,.np-circular-btn.accent:active .np-circular-btn__label{color:#0081ba;color:var(--color-interactive-accent-active)}.np-circular-btn.accent.secondary .tw-icon{color:#00a2dd;color:var(--color-interactive-accent)}.np-circular-btn.accent.secondary input[type=button]:active+.tw-icon,.np-circular-btn.accent.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff}.np-circular-btn.positive .np-circular-btn__label{color:#2ead4b;color:var(--color-interactive-positive)}.np-circular-btn.positive:not(.disabled,:disabled):hover .np-circular-btn__label{color:#069939;color:var(--color-interactive-positive-hover)}.np-circular-btn.positive input[type=button]:active~.np-circular-btn__label,.np-circular-btn.positive:active .np-circular-btn__label{color:#008b2b;color:var(--color-interactive-positive-active)}.np-circular-btn.positive.secondary .tw-icon{color:#2ead4b;color:var(--color-interactive-positive)}.np-circular-btn.positive.secondary input[type=button]:active+.tw-icon,.np-circular-btn.positive.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff}.np-circular-btn.negative .np-circular-btn__label{color:#e74848;color:var(--color-interactive-negative)}.np-circular-btn.negative:not(.disabled,:disabled):hover .np-circular-btn__label{color:#d03238;color:var(--color-interactive-negative-hover)}.np-circular-btn.negative input[type=button]:active~.np-circular-btn__label,.np-circular-btn.negative:active .np-circular-btn__label{color:#bf1e2c;color:var(--color-interactive-negative-active)}.np-circular-btn.negative.secondary .tw-icon{color:#e74848;color:var(--color-interactive-negative)}.np-circular-btn.negative.secondary input[type=button]:active+.tw-icon,.np-circular-btn.negative.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff}.np-theme-personal .np-circular-btn.accent .np-circular-btn__label{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.accent:not(.disabled,:disabled):hover .np-circular-btn__label{color:var(--color-interactive-primary-hover)}.np-theme-personal .np-circular-btn.accent input[type=button]:active~.np-circular-btn__label,.np-theme-personal .np-circular-btn.accent:active .np-circular-btn__label{color:var(--color-interactive-primary-active)}.np-theme-personal .np-circular-btn.accent.secondary .tw-icon{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.accent.secondary input[type=button]:active+.tw-icon,.np-theme-personal .np-circular-btn.accent.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff;color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.accent.secondary:active input[type=button]+.tw-icon{color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.positive .np-circular-btn__label{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.positive:not(.disabled,:disabled):hover .np-circular-btn__label{color:var(--color-interactive-primary-hover)}.np-theme-personal .np-circular-btn.positive input[type=button]:active~.np-circular-btn__label,.np-theme-personal .np-circular-btn.positive:active .np-circular-btn__label{color:var(--color-interactive-primary-active)}.np-theme-personal .np-circular-btn.positive.secondary .tw-icon{color:var(--color-interactive-primary)}.np-theme-personal .np-circular-btn.positive.secondary input[type=button]:active+.tw-icon,.np-theme-personal .np-circular-btn.positive.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff;color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.positive.secondary:active input[type=button]+.tw-icon{color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.negative .np-circular-btn__label{color:var(--color-sentiment-negative)}.np-theme-personal .np-circular-btn.negative:not(.disabled,:disabled):hover .np-circular-btn__label{color:var(--color-sentiment-negative-hover)}.np-theme-personal .np-circular-btn.negative input[type=button]:active~.np-circular-btn__label,.np-theme-personal .np-circular-btn.negative:active .np-circular-btn__label{color:var(--color-sentiment-negative-active)}.np-theme-personal .np-circular-btn.negative.secondary .tw-icon{color:var(--color-sentiment-negative)}.np-theme-personal .np-circular-btn.negative.secondary input[type=button]:active+.tw-icon,.np-theme-personal .np-circular-btn.negative.secondary:not(.disabled,:disabled):hover .tw-icon{color:#fff;color:var(--color-interactive-control)}.np-theme-personal .np-circular-btn.negative.secondary:active input[type=button]+.tw-icon{color:var(--color-interactive-control)}
package/src/circularButton/CircularButton.less CHANGED
@@ -21,6 +21,12 @@
21
21
  min-height: var(--size-56);
22
22
  width: var(--size-56);
23
23
  height: var(--size-56);
24
+
25
+ @media (--screen-400-zoom) {
26
+ min-height: var(--size-64);
27
+ width: var(--size-64);
28
+ height: var(--size-64);
29
+ }
24
30
  }
25
31
  }
26
32