@dnb/eufemia 9.29.0 → 9.30.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.
- package/CHANGELOG.md +16 -0
- package/cjs/components/button/style/themes/dnb-button-theme-eiendom.css +20 -0
- package/cjs/components/button/style/themes/dnb-button-theme-eiendom.min.css +2 -2
- package/cjs/components/button/style/themes/dnb-button-theme-eiendom.scss +8 -0
- package/cjs/components/slider/Slider.d.ts +2 -2
- package/cjs/components/slider/Slider.js +21 -0
- package/cjs/components/slider/SliderHelpers.d.ts +2 -2
- package/cjs/components/slider/SliderHelpers.js +10 -4
- package/cjs/components/slider/SliderInstance.js +1 -1
- package/cjs/components/slider/SliderProvider.js +50 -13
- package/cjs/components/slider/SliderThumb.js +5 -0
- package/cjs/components/slider/SliderTrack.js +3 -2
- package/cjs/components/slider/hooks/useSliderEvents.js +5 -5
- package/cjs/components/slider/hooks/useSliderProps.d.ts +1 -1
- package/cjs/components/slider/style/_slider.scss +1 -7
- package/cjs/components/slider/style/dnb-slider.css +1 -7
- package/cjs/components/slider/style/dnb-slider.min.css +1 -1
- package/cjs/components/slider/types.d.ts +28 -3
- package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +148 -0
- package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -0
- package/cjs/components/tabs/style/themes/dnb-tabs-theme-eiendom.scss +14 -0
- package/cjs/shared/Eufemia.js +1 -1
- package/cjs/shared/helpers/withCamelCaseProps.js +7 -0
- package/cjs/style/dnb-ui-components.css +1 -7
- package/cjs/style/dnb-ui-components.min.css +1 -1
- package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.css +169 -0
- package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +3 -3
- package/cjs/style/themes/theme-eiendom/dnb-theme-eiendom.scss +1 -0
- package/components/button/style/themes/dnb-button-theme-eiendom.css +20 -0
- package/components/button/style/themes/dnb-button-theme-eiendom.min.css +2 -2
- package/components/button/style/themes/dnb-button-theme-eiendom.scss +8 -0
- package/components/slider/Slider.d.ts +2 -2
- package/components/slider/Slider.js +1 -0
- package/components/slider/SliderHelpers.d.ts +2 -2
- package/components/slider/SliderHelpers.js +10 -4
- package/components/slider/SliderInstance.js +1 -1
- package/components/slider/SliderProvider.js +50 -13
- package/components/slider/SliderThumb.js +5 -0
- package/components/slider/SliderTrack.js +3 -2
- package/components/slider/hooks/useSliderEvents.js +5 -5
- package/components/slider/hooks/useSliderProps.d.ts +1 -1
- package/components/slider/style/_slider.scss +1 -7
- package/components/slider/style/dnb-slider.css +1 -7
- package/components/slider/style/dnb-slider.min.css +1 -1
- package/components/slider/types.d.ts +28 -3
- package/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +148 -0
- package/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -0
- package/components/tabs/style/themes/dnb-tabs-theme-eiendom.scss +14 -0
- package/es/components/button/style/themes/dnb-button-theme-eiendom.css +20 -0
- package/es/components/button/style/themes/dnb-button-theme-eiendom.min.css +2 -2
- package/es/components/button/style/themes/dnb-button-theme-eiendom.scss +8 -0
- package/es/components/slider/Slider.d.ts +2 -2
- package/es/components/slider/Slider.js +1 -0
- package/es/components/slider/SliderHelpers.d.ts +2 -2
- package/es/components/slider/SliderHelpers.js +10 -4
- package/es/components/slider/SliderInstance.js +1 -1
- package/es/components/slider/SliderProvider.js +49 -13
- package/es/components/slider/SliderThumb.js +7 -1
- package/es/components/slider/SliderTrack.js +3 -2
- package/es/components/slider/hooks/useSliderEvents.js +5 -5
- package/es/components/slider/hooks/useSliderProps.d.ts +1 -1
- package/es/components/slider/style/_slider.scss +1 -7
- package/es/components/slider/style/dnb-slider.css +1 -7
- package/es/components/slider/style/dnb-slider.min.css +1 -1
- package/es/components/slider/types.d.ts +28 -3
- package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.css +148 -0
- package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.min.css +1 -0
- package/es/components/tabs/style/themes/dnb-tabs-theme-eiendom.scss +14 -0
- package/es/shared/Eufemia.js +1 -1
- package/es/shared/helpers/withCamelCaseProps.js +7 -0
- package/es/style/dnb-ui-components.css +1 -7
- package/es/style/dnb-ui-components.min.css +1 -1
- package/es/style/themes/theme-eiendom/dnb-theme-eiendom.css +169 -0
- package/es/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +3 -3
- package/es/style/themes/theme-eiendom/dnb-theme-eiendom.scss +1 -0
- package/esm/dnb-ui-basis.min.mjs +1 -1
- package/esm/dnb-ui-components.min.mjs +1 -1
- package/esm/dnb-ui-elements.min.mjs +1 -1
- package/esm/dnb-ui-extensions.min.mjs +1 -1
- package/esm/dnb-ui-lib.min.mjs +2 -2
- package/esm/dnb-ui-web-components.min.mjs +2 -2
- package/package.json +1 -1
- package/shared/Eufemia.js +1 -1
- package/shared/helpers/withCamelCaseProps.js +7 -0
- package/style/dnb-ui-components.css +1 -7
- package/style/dnb-ui-components.min.css +1 -1
- package/style/themes/theme-eiendom/dnb-theme-eiendom.css +169 -0
- package/style/themes/theme-eiendom/dnb-theme-eiendom.min.css +3 -3
- package/style/themes/theme-eiendom/dnb-theme-eiendom.scss +1 -0
- package/umd/dnb-ui-basis.min.js +1 -1
- package/umd/dnb-ui-components.min.js +1 -1
- package/umd/dnb-ui-elements.min.js +1 -1
- package/umd/dnb-ui-extensions.min.js +1 -1
- package/umd/dnb-ui-lib.min.js +2 -2
- package/umd/dnb-ui-web-components.min.js +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,22 @@
|
|
|
3
3
|
All notable changes to @dnb/eufemia will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [9.30.0](https://github.com/dnbexperience/eufemia/compare/v9.29.0...v9.30.0) (2022-08-29)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **Slider:** fix reverse with min and max defiend ([#1533](https://github.com/dnbexperience/eufemia/issues/1533)) ([6c169b4](https://github.com/dnbexperience/eufemia/commit/6c169b4c557ace9662f634eef8c5d3259dfae9fe))
|
|
12
|
+
* **Slider:** prevent onChange being called with same value ([#1528](https://github.com/dnbexperience/eufemia/issues/1528)) ([115b056](https://github.com/dnbexperience/eufemia/commit/115b056e0564b526edeaf879d98a936b5eb20e58))
|
|
13
|
+
* **Slider:** use numbers instead of css reverse when reversing slider ([#1532](https://github.com/dnbexperience/eufemia/issues/1532)) ([e2e83a0](https://github.com/dnbexperience/eufemia/commit/e2e83a03ba4b99defd45b017ba7480b1f1dd647d))
|
|
14
|
+
* **Theme:** correct DNB Eiendom state colors mint-green-50 to pistachio ([#1527](https://github.com/dnbexperience/eufemia/issues/1527)) ([b7f532e](https://github.com/dnbexperience/eufemia/commit/b7f532e29a5a0a333024d466ea4a6dd9714b4d5e))
|
|
15
|
+
* **withCamelCaseProps:** make exception for className ([#1534](https://github.com/dnbexperience/eufemia/issues/1534)) ([a0a0082](https://github.com/dnbexperience/eufemia/commit/a0a0082d2ed32b3436baefdc7e4f2e3b967cbca8))
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
* **Slider:** add multiThumbBehavior property ([#1526](https://github.com/dnbexperience/eufemia/issues/1526)) ([f835651](https://github.com/dnbexperience/eufemia/commit/f8356511cade71f0944a36dc13e24f67fb8ba154))
|
|
21
|
+
|
|
6
22
|
# [9.29.0](https://github.com/dnbexperience/eufemia/compare/v9.28.0...v9.29.0) (2022-08-24)
|
|
7
23
|
|
|
8
24
|
|
|
@@ -842,6 +842,26 @@
|
|
|
842
842
|
-webkit-box-shadow: 0 0 0 0.0625rem var(--color-black-55);
|
|
843
843
|
box-shadow: 0 0 0 0.0625rem var(--color-black-55); } }
|
|
844
844
|
|
|
845
|
+
.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],
|
|
846
|
+
html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled] {
|
|
847
|
+
cursor: not-allowed; }
|
|
848
|
+
|
|
849
|
+
.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
|
|
850
|
+
html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
|
|
851
|
+
color: #14555a;
|
|
852
|
+
color: var(--color-emerald-green);
|
|
853
|
+
background-color: #f2f4ec;
|
|
854
|
+
background-color: var(--color-pistachio);
|
|
855
|
+
--border-color: transparent;
|
|
856
|
+
-webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
|
|
857
|
+
box-shadow: 0 0 0 0.0625rem var(--border-color);
|
|
858
|
+
border-color: transparent; }
|
|
859
|
+
@media screen and (-ms-high-contrast: none) {
|
|
860
|
+
.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),
|
|
861
|
+
html:not([data-whatintent='touch']) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]) {
|
|
862
|
+
-webkit-box-shadow: 0 0 0 0.0625rem transparent;
|
|
863
|
+
box-shadow: 0 0 0 0.0625rem transparent; } }
|
|
864
|
+
|
|
845
865
|
.dnb-button--tertiary {
|
|
846
866
|
color: #14555a;
|
|
847
867
|
color: var(--color-emerald-green); }
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.dnb-button{border:none;-webkit-box-shadow:none;box-shadow:none;text-align:left}.dnb-button--primary{background-color:#007272;background-color:var(--color-sea-green);color:#fff;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--primary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50);color:#007272;color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:#b3dada;background-color:var(--color-sea-green-30);color:#fff;color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:#dc2a2a;background-color:var(--color-fire-red);color:#fff;color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);background-color:#fff;background-color:var(--color-white);-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button--secondary{-webkit-box-shadow:inset 0 0 0 1px #007272;box-shadow:inset 0 0 0 1px #007272;-webkit-box-shadow:inset 0 0 0 1px var(--color-sea-green);box-shadow:inset 0 0 0 1px var(--color-sea-green)}}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green);opacity:1}}.dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50);color:#007272;color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#b3dada;color:var(--color-sea-green-30)}@supports (-webkit-touch-callout:none){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:inset 0 0 0 1px #b3dada;box-shadow:inset 0 0 0 1px #b3dada;-webkit-box-shadow:inset 0 0 0 1px var(--color-sea-green-30);box-shadow:inset 0 0 0 1px var(--color-sea-green-30)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#dc2a2a;color:var(--color-fire-red)}@supports (-webkit-touch-callout:none){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:inset 0 0 0 1px #dc2a2a;box-shadow:inset 0 0 0 1px #dc2a2a;-webkit-box-shadow:inset 0 0 0 1px var(--color-fire-red);box-shadow:inset 0 0 0 1px var(--color-fire-red)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green);opacity:1}}.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){--border-color:transparent;background-color:#d2f0e9;background-color:var(--color-mint-green-50);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--active{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-button--active{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--tertiary{background-color:transparent;color:#007272;color:var(--color-sea-green);position:relative}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentColor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:#007272;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;-webkit-transition:color .25s ease-in-out;transition:color .25s ease-in-out;width:auto;z-index:1}@media screen and (-ms-high-contrast:none){.dnb-button--tertiary .dnb-button__text:after{border-radius:.5px;height:1px}}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{-webkit-transition:none;transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary.dnb-button--has-text{padding-left:.5rem;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text:after{left:-.5rem;right:-.5rem}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:medium none invert;outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){-webkit-box-shadow:none;box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:medium none invert;outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){-webkit-box-shadow:none;box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);opacity:1;-webkit-transition:none;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{-ms-flex-item-align:start;align-self:flex-start;margin-top:.75rem;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:1rem;margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:.5rem;margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:.25rem;margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:.5rem;-ms-flex-direction:column;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{-ms-flex-item-align:center;align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:.875rem;font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:1rem;font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{-webkit-box-ordinal-group:4;-ms-flex-order:3;height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left{padding-left:0;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right{padding-left:.5rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #007272;box-shadow:0 0 0 .0625rem #007272;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green);box-shadow:0 0 0 .0625rem var(--color-sea-green)}}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]){--border-color:var(--color-sea-green-30);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #b3dada;box-shadow:0 0 0 .0625rem #b3dada;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green-30);box-shadow:0 0 0 .0625rem var(--color-sea-green-30)}}html[data-whatinput=keyboard]
|
|
1
|
+
.dnb-button{border:none;-webkit-box-shadow:none;box-shadow:none;text-align:left}.dnb-button--primary{background-color:#007272;background-color:var(--color-sea-green);color:#fff;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--primary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50);color:#007272;color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:#b3dada;background-color:var(--color-sea-green-30);color:#fff;color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:#dc2a2a;background-color:var(--color-fire-red);color:#fff;color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);background-color:#fff;background-color:var(--color-white);-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button--secondary{-webkit-box-shadow:inset 0 0 0 1px #007272;box-shadow:inset 0 0 0 1px #007272;-webkit-box-shadow:inset 0 0 0 1px var(--color-sea-green);box-shadow:inset 0 0 0 1px var(--color-sea-green)}}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green);opacity:1}}.dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#007272;color:var(--color-sea-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50);color:#007272;color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#b3dada;color:var(--color-sea-green-30)}@supports (-webkit-touch-callout:none){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{-webkit-box-shadow:inset 0 0 0 1px #b3dada;box-shadow:inset 0 0 0 1px #b3dada;-webkit-box-shadow:inset 0 0 0 1px var(--color-sea-green-30);box-shadow:inset 0 0 0 1px var(--color-sea-green-30)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .0625rem var(--border-color);box-shadow:inset 0 0 0 .0625rem var(--border-color);color:#dc2a2a;color:var(--color-fire-red)}@supports (-webkit-touch-callout:none){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{-webkit-box-shadow:inset 0 0 0 1px #dc2a2a;box-shadow:inset 0 0 0 1px #dc2a2a;-webkit-box-shadow:inset 0 0 0 1px var(--color-fire-red);box-shadow:inset 0 0 0 1px var(--color-fire-red)}}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green);opacity:1}}.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){background-color:#d2f0e9;background-color:var(--color-mint-green-50)}.dnb-button--active{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-button--active{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--tertiary{background-color:transparent;color:#007272;color:var(--color-sea-green);position:relative}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentColor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:#007272;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;-webkit-transition:color .25s ease-in-out;transition:color .25s ease-in-out;width:auto;z-index:1}@media screen and (-ms-high-contrast:none){.dnb-button--tertiary .dnb-button__text:after{border-radius:.5px;height:1px}}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{-webkit-transition:none;transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary.dnb-button--has-text{padding-left:.5rem;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text:after{left:-.5rem;right:-.5rem}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:medium none invert;outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){-webkit-box-shadow:none;box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{-webkit-box-shadow:0 0 0 .125rem #14555a;box-shadow:0 0 0 .125rem #14555a;-webkit-box-shadow:0 0 0 .125rem var(--color-emerald-green);box-shadow:0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:medium none invert;outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){-webkit-box-shadow:none;box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:#14555a;color:var(--color-emerald-green);opacity:1;-webkit-transition:none;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{-ms-flex-item-align:start;align-self:flex-start;margin-top:.75rem;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:1rem;margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:.5rem;margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:.25rem;margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:.5rem;-ms-flex-direction:column;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{-ms-flex-item-align:center;align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:.875rem;font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:1rem;font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{-webkit-box-ordinal-group:4;-ms-flex-order:3;height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left{padding-left:0;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right{padding-left:.5rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #007272;box-shadow:0 0 0 .0625rem #007272;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green);box-shadow:0 0 0 .0625rem var(--color-sea-green)}}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]){--border-color:var(--color-sea-green-30);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color)}@media screen and (-ms-high-contrast:none){.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem #b3dada;box-shadow:0 0 0 .0625rem #b3dada;-webkit-box-shadow:0 0 0 .0625rem var(--color-sea-green-30);box-shadow:0 0 0 .0625rem var(--color-sea-green-30)}}html[data-whatinput=keyboard]
|
|
2
2
|
.dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary[disabled]{color:#b3dada;color:var(--color-sea-green-30)}.dnb-button--signal{background-color:#fdbb31;background-color:var(--color-accent-yellow);color:#00343e;color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){--border-color:var(--color-ocean-green);background-color:#fdbb31;background-color:var(--color-accent-yellow);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#00343e;color:var(--color-ocean-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #00343e;box-shadow:0 0 0 .125rem #00343e;-webkit-box-shadow:0 0 0 .125rem var(--color-ocean-green);box-shadow:0 0 0 .125rem var(--color-ocean-green);opacity:1}}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){--border-color:var(--color-ocean-green);background-color:#fdbb31;background-color:var(--color-accent-yellow);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#00343e;color:var(--color-ocean-green)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #00343e;box-shadow:0 0 0 .125rem #00343e;-webkit-box-shadow:0 0 0 .125rem var(--color-ocean-green);box-shadow:0 0 0 .125rem var(--color-ocean-green)}}.dnb-button--signal:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled]{cursor:not-allowed}.dnb-button--signal:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){--border-color:var(--color-emerald-green);background-color:#fdbb31;background-color:var(--color-accent-yellow);border-color:transparent;-webkit-box-shadow:inset 0 0 0 .125rem var(--border-color);box-shadow:inset 0 0 0 .125rem var(--border-color);color:#00343e;color:var(--color-ocean-green)}@supports (-webkit-touch-callout:none){html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent) and (not (-webkit-overflow-scrolling:touch)){html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color)}}}@media screen and (-ms-high-contrast:none){html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){-webkit-box-shadow:inset 0 0 0 .125rem #14555a;box-shadow:inset 0 0 0 .125rem #14555a;-webkit-box-shadow:inset 0 0 0 .125rem var(--color-emerald-green);box-shadow:inset 0 0 0 .125rem var(--color-emerald-green)}}.dnb-button--signal:active[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled]{cursor:not-allowed}.dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]){--border-color:transparent;background-color:#fdbb31;background-color:var(--color-accent-yellow);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#00343e;color:var(--color-ocean-green)}@media screen and (-ms-high-contrast:none){.dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--signal[disabled]{background-color:#feebc1;background-color:var(--color-accent-yellow-30);color:#ccc;color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text),.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):after,.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):after{background-color:currentColor;bottom:0;content:"";left:0;position:absolute;top:0;width:.0625rem}html:not([data-whatintent=touch])
|
|
3
3
|
.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch])
|
|
4
4
|
.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover{-webkit-box-shadow:none;box-shadow:none;color:#fff;color:var(--color-white)}html:not([data-whatintent=touch])
|
|
@@ -10,4 +10,4 @@
|
|
|
10
10
|
.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{-webkit-box-shadow:none;box-shadow:none;color:#007272;color:var(--color-sea-green)}html:not([data-whatintent=touch])
|
|
11
11
|
.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch])
|
|
12
12
|
.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{background-color:#d2f0e9;background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch])
|
|
13
|
-
.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:#f8f8f8;background-color:var(--color-black-3);color:#737373;color:var(--color-black-55)}.dnb-button--primary{background-color:#14555a;background-color:var(--color-emerald-green)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-sea-green);background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #007272;box-shadow:0 0 0 .125rem #007272;-webkit-box-shadow:0 0 0 .125rem var(--color-sea-green);box-shadow:0 0 0 .125rem var(--color-sea-green);opacity:1}}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){--border-color:transparent;background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--primary[disabled]{--border-color:var(--color-black-55);background-color:#ebebeb;background-color:var(--color-black-8);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@media screen and (-ms-high-contrast:none){.dnb-button--primary[disabled]{-webkit-box-shadow:0 0 0 .0625rem #737373;box-shadow:0 0 0 .0625rem #737373;-webkit-box-shadow:0 0 0 .0625rem var(--color-black-55);box-shadow:0 0 0 .0625rem var(--color-black-55)}}.dnb-button--secondary{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem #14555a;box-shadow:0 0 0 .0625rem #14555a;-webkit-box-shadow:0 0 0 .0625rem var(--color-emerald-green);box-shadow:0 0 0 .0625rem var(--color-emerald-green)}}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--border-color:transparent;background-color:#f2f4ec;background-color:var(--color-pistachio);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--secondary[disabled]{--border-color:var(--color-black-55);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary[disabled]{-webkit-box-shadow:0 0 0 .0625rem #737373;box-shadow:0 0 0 .0625rem #737373;-webkit-box-shadow:0 0 0 .0625rem var(--color-black-55);box-shadow:0 0 0 .0625rem var(--color-black-55)}}.dnb-button--tertiary{color:#14555a;color:var(--color-emerald-green)}.dnb-button--tertiary[disabled]{color:#737373;color:var(--color-black-55)}
|
|
13
|
+
.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:#f8f8f8;background-color:var(--color-black-3);color:#737373;color:var(--color-black-55)}.dnb-button--primary{background-color:#14555a;background-color:var(--color-emerald-green)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-sea-green);background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .125rem var(--border-color);box-shadow:0 0 0 .125rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){-webkit-box-shadow:0 0 0 .125rem #007272;box-shadow:0 0 0 .125rem #007272;-webkit-box-shadow:0 0 0 .125rem var(--color-sea-green);box-shadow:0 0 0 .125rem var(--color-sea-green);opacity:1}}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){--border-color:transparent;background-color:#007272;background-color:var(--color-sea-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#fff;color:var(--color-white)}@media screen and (-ms-high-contrast:none){.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--primary[disabled]{--border-color:var(--color-black-55);background-color:#ebebeb;background-color:var(--color-black-8);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@media screen and (-ms-high-contrast:none){.dnb-button--primary[disabled]{-webkit-box-shadow:0 0 0 .0625rem #737373;box-shadow:0 0 0 .0625rem #737373;-webkit-box-shadow:0 0 0 .0625rem var(--color-black-55);box-shadow:0 0 0 .0625rem var(--color-black-55)}}.dnb-button--secondary{--border-color:var(--color-emerald-green);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary{-webkit-box-shadow:0 0 0 .0625rem #14555a;box-shadow:0 0 0 .0625rem #14555a;-webkit-box-shadow:0 0 0 .0625rem var(--color-emerald-green);box-shadow:0 0 0 .0625rem var(--color-emerald-green)}}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--border-color:transparent;background-color:#f2f4ec;background-color:var(--color-pistachio);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--secondary[disabled]{--border-color:var(--color-black-55);background-color:#fff;background-color:var(--color-white);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#737373;color:var(--color-black-55)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary[disabled]{-webkit-box-shadow:0 0 0 .0625rem #737373;box-shadow:0 0 0 .0625rem #737373;-webkit-box-shadow:0 0 0 .0625rem var(--color-black-55);box-shadow:0 0 0 .0625rem var(--color-black-55)}}.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){--border-color:transparent;background-color:#f2f4ec;background-color:var(--color-pistachio);border-color:transparent;-webkit-box-shadow:0 0 0 .0625rem var(--border-color);box-shadow:0 0 0 .0625rem var(--border-color);color:#14555a;color:var(--color-emerald-green)}@media screen and (-ms-high-contrast:none){.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){-webkit-box-shadow:0 0 0 .0625rem transparent;box-shadow:0 0 0 .0625rem transparent}}.dnb-button--tertiary{color:#14555a;color:var(--color-emerald-green)}.dnb-button--tertiary[disabled]{color:#737373;color:var(--color-black-55)}
|
|
@@ -61,6 +61,14 @@
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
// Icon button
|
|
65
|
+
.dnb-button--secondary:not(.dnb-button--has-text) {
|
|
66
|
+
@include buttonActive(
|
|
67
|
+
var(--color-emerald-green),
|
|
68
|
+
var(--color-pistachio)
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
|
|
64
72
|
.dnb-button--tertiary {
|
|
65
73
|
color: var(--color-emerald-green);
|
|
66
74
|
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
*
|
|
4
4
|
*/
|
|
5
5
|
/// <reference types="react" />
|
|
6
|
-
import type { SliderProps, ValueTypes } from './types';
|
|
7
6
|
import { ISpacingProps } from '../../shared/interfaces';
|
|
8
|
-
|
|
7
|
+
import type { SliderProps } from './types';
|
|
8
|
+
export * from './types';
|
|
9
9
|
declare function Slider(localProps: SliderProps & ISpacingProps): JSX.Element;
|
|
10
10
|
export default Slider;
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
require("core-js/modules/es.object.to-string.js");
|
|
4
|
+
|
|
5
|
+
require("core-js/modules/web.dom-collections.for-each.js");
|
|
6
|
+
|
|
7
|
+
require("core-js/modules/es.object.keys.js");
|
|
8
|
+
|
|
3
9
|
Object.defineProperty(exports, "__esModule", {
|
|
4
10
|
value: true
|
|
5
11
|
});
|
|
12
|
+
var _exportNames = {};
|
|
6
13
|
exports.default = void 0;
|
|
7
14
|
|
|
8
15
|
var _react = _interopRequireDefault(require("react"));
|
|
@@ -11,6 +18,20 @@ var _SliderProvider = require("./SliderProvider");
|
|
|
11
18
|
|
|
12
19
|
var _SliderInstance2 = require("./SliderInstance");
|
|
13
20
|
|
|
21
|
+
var _types = require("./types");
|
|
22
|
+
|
|
23
|
+
Object.keys(_types).forEach(function (key) {
|
|
24
|
+
if (key === "default" || key === "__esModule") return;
|
|
25
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
26
|
+
if (key in exports && exports[key] === _types[key]) return;
|
|
27
|
+
Object.defineProperty(exports, key, {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function get() {
|
|
30
|
+
return _types[key];
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
|
|
14
35
|
var _SliderInstance;
|
|
15
36
|
|
|
16
37
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { formatOptionParams, formatValue, formatReturnType } from '../number-format/NumberUtils';
|
|
2
2
|
import type { ValueTypes } from './types';
|
|
3
|
-
export declare const percentToValue: (percent: number, min: number, max: number) => number;
|
|
3
|
+
export declare const percentToValue: (percent: number, min: number, max: number, isReverse: boolean) => number;
|
|
4
4
|
export declare const roundToStep: (number: number, step: number) => number;
|
|
5
5
|
export declare const getOffset: (node: HTMLElement) => {
|
|
6
6
|
top: number;
|
|
@@ -10,7 +10,7 @@ export declare const getMousePosition: (event: MouseEvent & TouchEvent) => {
|
|
|
10
10
|
x: number;
|
|
11
11
|
y: number;
|
|
12
12
|
};
|
|
13
|
-
export declare const calculatePercent: (node: HTMLElement, event: MouseEvent | TouchEvent, isVertical: boolean
|
|
13
|
+
export declare const calculatePercent: (node: HTMLElement, event: MouseEvent | TouchEvent, isVertical: boolean) => number;
|
|
14
14
|
export declare const clamp: (value: number, min?: number, max?: number) => number;
|
|
15
15
|
export declare const roundValue: (value: number, step: number) => number;
|
|
16
16
|
export declare const createMockDiv: ({ width, height }: {
|
|
@@ -71,7 +71,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
71
71
|
|
|
72
72
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
73
73
|
|
|
74
|
-
var percentToValue = function percentToValue(percent, min, max) {
|
|
74
|
+
var percentToValue = function percentToValue(percent, min, max, isReverse) {
|
|
75
75
|
if (typeof min === 'string') {
|
|
76
76
|
min = parseFloat(min);
|
|
77
77
|
}
|
|
@@ -80,7 +80,13 @@ var percentToValue = function percentToValue(percent, min, max) {
|
|
|
80
80
|
max = parseFloat(max);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
var num = (max - min) * percent / 100 + min;
|
|
84
|
+
|
|
85
|
+
if (isReverse) {
|
|
86
|
+
num = max + min - num;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
return num;
|
|
84
90
|
};
|
|
85
91
|
|
|
86
92
|
exports.percentToValue = percentToValue;
|
|
@@ -127,7 +133,7 @@ var getMousePosition = function getMousePosition(event) {
|
|
|
127
133
|
|
|
128
134
|
exports.getMousePosition = getMousePosition;
|
|
129
135
|
|
|
130
|
-
var calculatePercent = function calculatePercent(node, event, isVertical
|
|
136
|
+
var calculatePercent = function calculatePercent(node, event, isVertical) {
|
|
131
137
|
var _node$getBoundingClie2 = node.getBoundingClientRect(),
|
|
132
138
|
width = _node$getBoundingClie2.width,
|
|
133
139
|
height = _node$getBoundingClie2.height;
|
|
@@ -142,7 +148,7 @@ var calculatePercent = function calculatePercent(node, event, isVertical, isReve
|
|
|
142
148
|
|
|
143
149
|
var value = isVertical ? y - top : x - left;
|
|
144
150
|
var onePercent = (isVertical ? height : width) / 100;
|
|
145
|
-
return Math.abs(
|
|
151
|
+
return Math.abs(clamp(value / onePercent));
|
|
146
152
|
};
|
|
147
153
|
|
|
148
154
|
exports.calculatePercent = calculatePercent;
|
|
@@ -71,7 +71,7 @@ function SliderInstance() {
|
|
|
71
71
|
disabled = allProps.disabled,
|
|
72
72
|
className = allProps.className;
|
|
73
73
|
var mainParams = {
|
|
74
|
-
className: (0, _classnames.default)("dnb-slider dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(allProps), className,
|
|
74
|
+
className: (0, _classnames.default)("dnb-slider dnb-form-component", (0, _SkeletonHelper.createSkeletonClass)(null, skeleton), (0, _SpacingHelper.createSpacingClasses)(allProps), className, isVertical && 'dnb-slider--vertical', disabled && 'dnb-slider__state--disabled', !showButtons && 'dnb-slider--no-buttons', (0, _componentHelper.isTrue)(stretch) && 'dnb-slider--stretch', label && labelDirection && "dnb-slider__label--".concat(labelDirection), showStatus && 'dnb-slider__form-status', status && "dnb-slider__status--".concat(statusState))
|
|
75
75
|
};
|
|
76
76
|
var subtractButton = showButtons ? _SubtractButton || (_SubtractButton = _react.default.createElement(SubtractButton, null)) : null;
|
|
77
77
|
var addButton = showButtons ? _AddButton || (_AddButton = _react.default.createElement(AddButton, null)) : null;
|
|
@@ -48,7 +48,7 @@ var _SliderHelpers = require("./SliderHelpers");
|
|
|
48
48
|
|
|
49
49
|
var _withSnakeCaseProps = require("../../shared/helpers/withSnakeCaseProps");
|
|
50
50
|
|
|
51
|
-
var _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "numberFormat", "skeleton", "max", "min", "disabled", "className", "id", "onInit", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
|
|
51
|
+
var _excluded = ["step", "label", "labelDirection", "labelSrOnly", "status", "statusState", "statusProps", "statusNoAnimation", "globalStatusId", "stretch", "suffix", "thumbTitle", "subtractTitle", "addTitle", "hideButtons", "multiThumbBehavior", "numberFormat", "skeleton", "max", "min", "disabled", "className", "id", "onInit", "onChange", "onDragStart", "onDragEnd", "vertical", "reverse", "value", "children"];
|
|
52
52
|
|
|
53
53
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
54
54
|
|
|
@@ -74,7 +74,8 @@ var defaultProps = {
|
|
|
74
74
|
subtractTitle: '−',
|
|
75
75
|
min: 0,
|
|
76
76
|
max: 100,
|
|
77
|
-
value: -1
|
|
77
|
+
value: -1,
|
|
78
|
+
multiThumbBehavior: 'swap'
|
|
78
79
|
};
|
|
79
80
|
|
|
80
81
|
var SliderContext = _react.default.createContext(null);
|
|
@@ -113,6 +114,7 @@ function SliderProvider(localProps) {
|
|
|
113
114
|
subtractTitle = allProps.subtractTitle,
|
|
114
115
|
addTitle = allProps.addTitle,
|
|
115
116
|
hideButtons = allProps.hideButtons,
|
|
117
|
+
multiThumbBehavior = allProps.multiThumbBehavior,
|
|
116
118
|
numberFormat = allProps.numberFormat,
|
|
117
119
|
skeleton = allProps.skeleton,
|
|
118
120
|
max = allProps.max,
|
|
@@ -135,6 +137,8 @@ function SliderProvider(localProps) {
|
|
|
135
137
|
value = _React$useState4[0],
|
|
136
138
|
setValue = _React$useState4[1];
|
|
137
139
|
|
|
140
|
+
var realtimeValue = _react.default.useRef(_value);
|
|
141
|
+
|
|
138
142
|
var _React$useState5 = _react.default.useState('initial'),
|
|
139
143
|
_React$useState6 = _slicedToArray(_React$useState5, 2),
|
|
140
144
|
thumbState = _React$useState6[0],
|
|
@@ -175,24 +179,57 @@ function SliderProvider(localProps) {
|
|
|
175
179
|
return currentIndex;
|
|
176
180
|
};
|
|
177
181
|
|
|
182
|
+
var updateValue = function updateValue(value) {
|
|
183
|
+
setValue(value);
|
|
184
|
+
realtimeValue.current = value;
|
|
185
|
+
};
|
|
186
|
+
|
|
178
187
|
var emitChange = function emitChange(event, rawValue) {
|
|
179
188
|
if (disabled || (0, _componentHelper.isTrue)(skeleton)) {
|
|
180
189
|
return;
|
|
181
190
|
}
|
|
182
191
|
|
|
183
|
-
var
|
|
184
|
-
|
|
185
|
-
if (currentValue > -1 && rawValue !== value) {
|
|
186
|
-
var newValue = currentValue;
|
|
192
|
+
var numberValue = (0, _SliderHelpers.roundValue)(rawValue, step);
|
|
193
|
+
var multiValues = numberValue;
|
|
187
194
|
|
|
195
|
+
if (numberValue > -1) {
|
|
188
196
|
if (isMulti) {
|
|
189
|
-
var currentIndex = getAndUpdateCurrentIndex(
|
|
190
|
-
|
|
197
|
+
var currentIndex = getAndUpdateCurrentIndex(numberValue);
|
|
198
|
+
var lower = realtimeValue.current[currentIndex - 1];
|
|
199
|
+
var upper = realtimeValue.current[currentIndex + 1];
|
|
200
|
+
|
|
201
|
+
if (multiThumbBehavior === 'omit') {
|
|
202
|
+
if (numberValue < lower) {
|
|
203
|
+
numberValue = lower;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
if (numberValue > upper) {
|
|
207
|
+
numberValue = upper;
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
multiValues = (0, _SliderHelpers.getUpdatedValues)(multiThumbBehavior === 'push' ? realtimeValue.current : value, currentIndex, numberValue);
|
|
212
|
+
|
|
213
|
+
if (multiThumbBehavior === 'push') {
|
|
214
|
+
if (typeof lower !== 'undefined' && numberValue < lower) {
|
|
215
|
+
multiValues[currentIndex - 1] = numberValue;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
if (typeof upper !== 'undefined' && numberValue >= upper) {
|
|
219
|
+
multiValues[currentIndex + 1] = numberValue;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
if (numberValue === realtimeValue.current[currentIndex]) {
|
|
224
|
+
return;
|
|
225
|
+
}
|
|
226
|
+
} else if (numberValue === realtimeValue.current) {
|
|
227
|
+
return;
|
|
191
228
|
}
|
|
192
229
|
|
|
193
230
|
if (typeof onChange === 'function') {
|
|
194
231
|
var obj = {
|
|
195
|
-
value:
|
|
232
|
+
value: multiValues,
|
|
196
233
|
rawValue: rawValue,
|
|
197
234
|
raw_value: rawValue,
|
|
198
235
|
event: event,
|
|
@@ -200,13 +237,13 @@ function SliderProvider(localProps) {
|
|
|
200
237
|
};
|
|
201
238
|
|
|
202
239
|
if (numberFormat) {
|
|
203
|
-
obj.number = (0, _SliderHelpers.formatNumber)(
|
|
240
|
+
obj.number = (0, _SliderHelpers.formatNumber)(numberValue, numberFormat);
|
|
204
241
|
}
|
|
205
242
|
|
|
206
243
|
(0, _componentHelper.dispatchCustomElementEvent)(allProps, 'onChange', obj);
|
|
207
244
|
}
|
|
208
245
|
|
|
209
|
-
|
|
246
|
+
updateValue(multiValues);
|
|
210
247
|
}
|
|
211
248
|
};
|
|
212
249
|
|
|
@@ -217,10 +254,10 @@ function SliderProvider(localProps) {
|
|
|
217
254
|
});
|
|
218
255
|
|
|
219
256
|
if (hasChanged) {
|
|
220
|
-
|
|
257
|
+
updateValue(_value);
|
|
221
258
|
}
|
|
222
259
|
} else {
|
|
223
|
-
|
|
260
|
+
updateValue(_value);
|
|
224
261
|
}
|
|
225
262
|
}, [_value, isMulti]);
|
|
226
263
|
|
|
@@ -54,6 +54,7 @@ function SliderThumb() {
|
|
|
54
54
|
values = _useSliderProps.values,
|
|
55
55
|
thumbIndex = _useSliderProps.thumbIndex,
|
|
56
56
|
isVertical = _useSliderProps.isVertical,
|
|
57
|
+
isReverse = _useSliderProps.isReverse,
|
|
57
58
|
showStatus = _useSliderProps.showStatus,
|
|
58
59
|
attributes = _useSliderProps.attributes,
|
|
59
60
|
allProps = _useSliderProps.allProps;
|
|
@@ -97,6 +98,10 @@ function SliderThumb() {
|
|
|
97
98
|
var index = thumbIndex.current;
|
|
98
99
|
var percent = (0, _SliderHelpers.clamp)((value - min) * 100 / (max - min));
|
|
99
100
|
|
|
101
|
+
if (isReverse) {
|
|
102
|
+
percent = 100 - percent;
|
|
103
|
+
}
|
|
104
|
+
|
|
100
105
|
var style = _defineProperty({
|
|
101
106
|
zIndex: index === i ? 4 : 3
|
|
102
107
|
}, "".concat(isVertical ? 'top' : 'left'), "".concat(percent, "%"));
|
|
@@ -95,6 +95,7 @@ function SliderTrackBefore() {
|
|
|
95
95
|
var _useSliderProps2 = (0, _useSliderProps3.useSliderProps)(),
|
|
96
96
|
origValues = _useSliderProps2.values,
|
|
97
97
|
isVertical = _useSliderProps2.isVertical,
|
|
98
|
+
isReverse = _useSliderProps2.isReverse,
|
|
98
99
|
thumbIndex = _useSliderProps2.thumbIndex,
|
|
99
100
|
_useSliderProps2$allP = _useSliderProps2.allProps,
|
|
100
101
|
min = _useSliderProps2$allP.min,
|
|
@@ -116,8 +117,8 @@ function SliderTrackBefore() {
|
|
|
116
117
|
var lowerPercent = 100 - (0, _SliderHelpers.clamp)((lowerValue - min) * 100 / (max - min));
|
|
117
118
|
var units = [trackObj[isVertical ? 1 : 0][0], trackObj[isVertical ? 1 : 0][1]];
|
|
118
119
|
var style = {};
|
|
119
|
-
style[units[0]] = "".concat(lowerPercent, "%");
|
|
120
|
-
style[units[1]] = "".concat(upperPercent, "%");
|
|
120
|
+
style[units[isReverse ? 1 : 0]] = "".concat(lowerPercent, "%");
|
|
121
|
+
style[units[isReverse ? 0 : 1]] = "".concat(upperPercent, "%");
|
|
121
122
|
return _react.default.createElement("span", {
|
|
122
123
|
className: "dnb-slider__line dnb-slider__line__before",
|
|
123
124
|
style: style
|
|
@@ -19,10 +19,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
19
19
|
|
|
20
20
|
function useSliderEvents() {
|
|
21
21
|
var _React$useContext = _react.default.useContext(_SliderProvider.SliderContext),
|
|
22
|
+
isReverse = _React$useContext.isReverse,
|
|
22
23
|
emitChange = _React$useContext.emitChange,
|
|
23
24
|
trackRef = _React$useContext.trackRef,
|
|
24
25
|
isVertical = _React$useContext.isVertical,
|
|
25
|
-
isReverse = _React$useContext.isReverse,
|
|
26
26
|
setJumpedState = _React$useContext.setJumpedState,
|
|
27
27
|
setThumbState = _React$useContext.setThumbState,
|
|
28
28
|
setThumbIndex = _React$useContext.setThumbIndex,
|
|
@@ -34,8 +34,8 @@ function useSliderEvents() {
|
|
|
34
34
|
onDragEnd = allProps.onDragEnd;
|
|
35
35
|
|
|
36
36
|
var onTrackClickHandler = function onTrackClickHandler(event) {
|
|
37
|
-
var percent = (0, _SliderHelpers.calculatePercent)(trackRef.current, event, isVertical
|
|
38
|
-
emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max));
|
|
37
|
+
var percent = (0, _SliderHelpers.calculatePercent)(trackRef.current, event, isVertical);
|
|
38
|
+
emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max, isReverse));
|
|
39
39
|
setJumpedState();
|
|
40
40
|
};
|
|
41
41
|
|
|
@@ -110,8 +110,8 @@ function useSliderEvents() {
|
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
if (elem) {
|
|
113
|
-
var percent = (0, _SliderHelpers.calculatePercent)(elem, event, isVertical
|
|
114
|
-
emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max));
|
|
113
|
+
var percent = (0, _SliderHelpers.calculatePercent)(elem, event, isVertical);
|
|
114
|
+
emitChange(event, (0, _SliderHelpers.percentToValue)(percent, min, max, isReverse));
|
|
115
115
|
}
|
|
116
116
|
};
|
|
117
117
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useSliderProps(): import("
|
|
1
|
+
export declare function useSliderProps(): import("..").SliderContextTypes;
|
|
@@ -101,12 +101,6 @@
|
|
|
101
101
|
min-width: inherit;
|
|
102
102
|
min-height: inherit;
|
|
103
103
|
}
|
|
104
|
-
&--reverse &__track {
|
|
105
|
-
transform: scaleX(-1);
|
|
106
|
-
}
|
|
107
|
-
&--reverse#{&}--vertical &__track {
|
|
108
|
-
transform: scaleY(-1);
|
|
109
|
-
}
|
|
110
104
|
|
|
111
105
|
&__line {
|
|
112
106
|
position: absolute;
|
|
@@ -180,7 +174,7 @@
|
|
|
180
174
|
line-height: var(--slider-button-size);
|
|
181
175
|
transform: translateY(0.25rem);
|
|
182
176
|
|
|
183
|
-
z-index:
|
|
177
|
+
z-index: 2;
|
|
184
178
|
}
|
|
185
179
|
&--vertical &__button.dnb-button--size-small {
|
|
186
180
|
transform: translateX(0.25rem);
|
|
@@ -1217,12 +1217,6 @@ legend.dnb-form-label {
|
|
|
1217
1217
|
height: inherit;
|
|
1218
1218
|
min-width: inherit;
|
|
1219
1219
|
min-height: inherit; }
|
|
1220
|
-
.dnb-slider--reverse .dnb-slider__track {
|
|
1221
|
-
-webkit-transform: scaleX(-1);
|
|
1222
|
-
transform: scaleX(-1); }
|
|
1223
|
-
.dnb-slider--reverse.dnb-slider--vertical .dnb-slider__track {
|
|
1224
|
-
-webkit-transform: scaleY(-1);
|
|
1225
|
-
transform: scaleY(-1); }
|
|
1226
1220
|
.dnb-slider__line {
|
|
1227
1221
|
position: absolute;
|
|
1228
1222
|
left: 0;
|
|
@@ -1289,7 +1283,7 @@ legend.dnb-form-label {
|
|
|
1289
1283
|
line-height: var(--slider-button-size);
|
|
1290
1284
|
-webkit-transform: translateY(0.25rem);
|
|
1291
1285
|
transform: translateY(0.25rem);
|
|
1292
|
-
z-index:
|
|
1286
|
+
z-index: 2; }
|
|
1293
1287
|
.dnb-slider--vertical .dnb-slider__button.dnb-button--size-small {
|
|
1294
1288
|
-webkit-transform: translateX(0.25rem);
|
|
1295
1289
|
transform: translateX(0.25rem); }
|