@dnb/eufemia 10.0.0 → 10.2.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 +49 -0
- package/assets/icons/dnb/accounting.svg +1 -0
- package/assets/icons/dnb/accounting_medium.svg +1 -0
- package/assets/icons/dnb/candle_stick.svg +1 -0
- package/assets/icons/dnb/candle_stick_medium.svg +1 -0
- package/assets/icons/dnb/eufemia-icons-xml-categorized.tgz +0 -0
- package/assets/icons/dnb/eufemia-icons-xml.tgz +0 -0
- package/assets/icons/dnb/fortune_ball.svg +1 -0
- package/assets/icons/dnb/fortune_ball_medium.svg +1 -0
- package/assets/icons/dnb/scan.svg +1 -0
- package/assets/icons/dnb/scan_medium.svg +1 -0
- package/assets/icons/dnb/shield_lock.svg +1 -1
- package/assets/icons/dnb/shield_lock_medium.svg +1 -1
- package/cjs/components/anchor/Anchor.d.ts +3 -3
- package/cjs/components/anchor/style/deps.scss +9 -0
- package/cjs/components/anchor/style/themes/dnb-anchor-theme-sbanken.css +20 -10
- package/cjs/components/anchor/style/themes/dnb-anchor-theme-sbanken.min.css +1 -1
- package/cjs/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss +17 -14
- package/cjs/components/anchor/style/themes/dnb-anchor-theme-ui.scss +28 -14
- package/cjs/components/autocomplete/Autocomplete.js +5 -2
- package/cjs/components/avatar/Avatar.d.ts +1 -0
- package/cjs/components/button/style/dnb-button--tertiary.css +4 -0
- package/cjs/components/button/style/dnb-button--tertiary.min.css +1 -1
- package/cjs/components/button/style/dnb-button--tertiary.scss +3 -0
- package/cjs/components/button/style/themes/button-mixins.scss +3 -3
- package/cjs/components/button/style/themes/dnb-button-theme-eiendom.css +8 -4
- package/cjs/components/button/style/themes/dnb-button-theme-eiendom.min.css +1 -1
- package/cjs/components/button/style/themes/dnb-button-theme-sbanken.css +8 -18
- package/cjs/components/button/style/themes/dnb-button-theme-sbanken.min.css +1 -1
- package/cjs/components/button/style/themes/dnb-button-theme-sbanken.scss +6 -10
- package/cjs/components/button/style/themes/dnb-button-theme-ui.css +8 -4
- package/cjs/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
- package/cjs/components/button/style/themes/dnb-button-theme-ui.scss +5 -5
- package/cjs/components/checkbox/Checkbox.d.ts +1 -1
- package/cjs/components/date-picker/DatePicker.d.ts +1 -1
- package/cjs/components/drawer/Drawer.d.ts +2 -1
- package/cjs/components/dropdown/Dropdown.d.ts +1 -1
- package/cjs/components/form-label/FormLabel.d.ts +1 -1
- package/cjs/components/form-row/FormRow.d.ts +1 -1
- package/cjs/components/form-set/FormSet.d.ts +1 -1
- package/cjs/components/form-status/FormStatus.d.ts +1 -1
- package/cjs/components/global-error/GlobalError.d.ts +1 -1
- package/cjs/components/global-status/GlobalStatus.d.ts +4 -4
- package/cjs/components/heading/Heading.d.ts +89 -106
- package/cjs/components/heading/Heading.js +119 -184
- package/cjs/components/heading/HeadingContext.d.ts +12 -5
- package/cjs/components/heading/HeadingContext.js +2 -2
- package/cjs/components/heading/HeadingCounter.d.ts +38 -14
- package/cjs/components/heading/HeadingCounter.js +20 -17
- package/cjs/components/heading/HeadingHelpers.d.ts +45 -23
- package/cjs/components/heading/HeadingHelpers.js +29 -24
- package/cjs/components/heading/HeadingProvider.d.ts +9 -12
- package/cjs/components/heading/HeadingProvider.js +47 -90
- package/cjs/components/height-animation/HeightAnimation.d.ts +1 -1
- package/cjs/components/icon/Icon.d.ts +1 -1
- package/cjs/components/icon/Icon.js +1 -1
- package/cjs/components/icon-primary/IconPrimary.d.ts +1 -1
- package/cjs/components/info-card/style/dnb-info-card.css +1 -1
- package/cjs/components/info-card/style/dnb-info-card.min.css +1 -1
- package/cjs/components/info-card/style/dnb-info-card.scss +1 -1
- package/cjs/components/input/Input.d.ts +2 -2
- package/cjs/components/input/InputPassword.d.ts +1 -1
- package/cjs/components/input-masked/InputMasked.d.ts +2 -2
- package/cjs/components/input-masked/InputMasked.js +1 -1
- package/cjs/components/input-masked/InputMaskedHooks.js +17 -9
- package/cjs/components/input-masked/text-mask/createTextMaskInputElement.js +1 -3
- package/cjs/components/lib.d.ts +2 -2
- package/cjs/components/logo/Logo.d.ts +1 -1
- package/cjs/components/number-format/NumberFormat.js +2 -12
- package/cjs/components/number-format/NumberUtils.d.ts +12 -0
- package/cjs/components/pagination/Pagination.d.ts +1 -1
- package/cjs/components/radio/Radio.d.ts +1 -1
- package/cjs/components/radio/RadioGroup.d.ts +1 -1
- package/cjs/components/section/Section.d.ts +1 -1
- package/cjs/components/skeleton/Skeleton.d.ts +1 -1
- package/cjs/components/space/Space.d.ts +1 -1
- package/cjs/components/step-indicator/StepIndicator.d.ts +1 -1
- package/cjs/components/step-indicator/StepIndicatorItem.d.ts +1 -1
- package/cjs/components/step-indicator/StepIndicatorSidebar.d.ts +7 -5
- package/cjs/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
- package/cjs/components/switch/Switch.d.ts +1 -1
- package/cjs/components/tabs/Tabs.d.ts +1 -1
- package/cjs/components/textarea/Textarea.d.ts +1 -1
- package/cjs/components/toggle-button/ToggleButton.d.ts +1 -1
- package/cjs/core/jest/jestSetupScreenshots.css +1 -0
- package/cjs/elements/Element.d.ts +3 -3
- package/cjs/elements/Link.d.ts +2 -2
- package/cjs/elements/img/style/dnb-img.scss +2 -24
- package/cjs/elements/img/style/img-mixins.scss +29 -0
- package/cjs/elements/img/style/themes/dnb-img-theme-ui.scss +17 -4
- package/cjs/elements/lib.d.ts +2 -2
- package/cjs/elements/typography/style/themes/dnb-typography-theme-ui.scss +18 -2
- package/cjs/icons/{document_csv.d.ts → accounting.d.ts} +1 -1
- package/cjs/icons/{document_pdf.js → accounting.js} +2 -2
- package/cjs/icons/{document_contract.d.ts → accounting_medium.d.ts} +1 -1
- package/cjs/icons/{document_contract.js → accounting_medium.js} +2 -2
- package/cjs/icons/{document_pdf.d.ts → candle_stick.d.ts} +1 -1
- package/cjs/icons/{document_add.js → candle_stick.js} +2 -2
- package/cjs/icons/{document_add_medium.d.ts → candle_stick_medium.d.ts} +1 -1
- package/cjs/icons/{document_add_medium.js → candle_stick_medium.js} +2 -2
- package/cjs/icons/dnb/{document_pdf.d.ts → accounting.d.ts} +2 -2
- package/cjs/icons/dnb/{document_rejected.js → accounting.js} +8 -8
- package/cjs/icons/dnb/accounting_medium.d.ts +4 -0
- package/cjs/icons/dnb/accounting_medium.js +31 -0
- package/cjs/icons/dnb/{document_add.d.ts → candle_stick.d.ts} +2 -2
- package/cjs/icons/dnb/{document.js → candle_stick.js} +7 -8
- package/cjs/icons/dnb/candle_stick_medium.d.ts +4 -0
- package/cjs/icons/dnb/{document_medium.js → candle_stick_medium.js} +7 -8
- package/cjs/icons/dnb/{document_csv.d.ts → fortune_ball.d.ts} +2 -2
- package/cjs/icons/dnb/fortune_ball.js +31 -0
- package/cjs/icons/dnb/fortune_ball_medium.d.ts +4 -0
- package/cjs/icons/dnb/fortune_ball_medium.js +31 -0
- package/cjs/icons/dnb/icons-svg.lock +1174 -1070
- package/cjs/icons/dnb/index.d.ts +9 -25
- package/cjs/icons/dnb/index.js +64 -192
- package/cjs/icons/dnb/{document.d.ts → scan.d.ts} +2 -2
- package/cjs/icons/dnb/scan.js +28 -0
- package/cjs/icons/dnb/scan_medium.d.ts +4 -0
- package/cjs/icons/dnb/scan_medium.js +35 -0
- package/cjs/icons/dnb/secondary_icons.d.ts +5 -1
- package/cjs/icons/dnb/secondary_icons.js +32 -0
- package/cjs/icons/dnb/secondary_icons_medium.d.ts +5 -1
- package/cjs/icons/dnb/secondary_icons_medium.js +32 -0
- package/cjs/icons/dnb/shield_lock.js +17 -2
- package/cjs/icons/dnb/shield_lock_medium.js +17 -2
- package/cjs/icons/{document_add.d.ts → fortune_ball.d.ts} +1 -1
- package/cjs/icons/{document_csv.js → fortune_ball.js} +2 -2
- package/cjs/icons/fortune_ball_medium.d.ts +3 -0
- package/cjs/icons/fortune_ball_medium.js +13 -0
- package/cjs/icons/icons-meta.json +3748 -0
- package/cjs/icons/index.d.ts +9 -25
- package/cjs/icons/index.js +64 -192
- package/{es/icons/document.d.ts → cjs/icons/scan.d.ts} +1 -1
- package/cjs/icons/{document.js → scan.js} +2 -2
- package/cjs/icons/scan_medium.d.ts +3 -0
- package/cjs/icons/scan_medium.js +13 -0
- package/cjs/shared/Eufemia.d.ts +1 -1
- package/cjs/shared/Eufemia.js +2 -2
- package/cjs/shared/index.d.ts +2 -1
- package/cjs/style/dnb-ui-components.css +1 -1
- package/cjs/style/dnb-ui-components.min.css +1 -1
- package/cjs/style/themes/theme-eiendom/eiendom-theme-basis.css +4 -4
- package/cjs/style/themes/theme-eiendom/eiendom-theme-components.css +17 -9
- package/cjs/style/themes/theme-eiendom/eiendom-theme-components.min.css +1 -1
- package/cjs/style/themes/theme-eiendom/eiendom-theme-elements.css +4 -4
- package/cjs/style/themes/theme-sbanken/sbanken-theme-components.css +29 -29
- package/cjs/style/themes/theme-sbanken/sbanken-theme-components.min.css +1 -1
- package/cjs/style/themes/theme-ui/ui-theme-basis.css +4 -4
- package/cjs/style/themes/theme-ui/ui-theme-components.css +9 -5
- package/cjs/style/themes/theme-ui/ui-theme-components.min.css +1 -1
- package/cjs/style/themes/theme-ui/ui-theme-elements.css +4 -4
- package/cjs/style/themes/theme-ui/ui-theme-tags.css +98 -1
- package/cjs/style/themes/theme-ui/ui-theme-tags.min.css +1 -1
- package/cjs/style/themes/theme-ui/ui-theme-tags.scss +15 -1
- package/components/anchor/Anchor.d.ts +3 -3
- package/components/anchor/style/deps.scss +9 -0
- package/components/anchor/style/themes/dnb-anchor-theme-sbanken.css +20 -10
- package/components/anchor/style/themes/dnb-anchor-theme-sbanken.min.css +1 -1
- package/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss +17 -14
- package/components/anchor/style/themes/dnb-anchor-theme-ui.scss +28 -14
- package/components/autocomplete/Autocomplete.js +5 -2
- package/components/avatar/Avatar.d.ts +1 -0
- package/components/button/style/dnb-button--tertiary.css +4 -0
- package/components/button/style/dnb-button--tertiary.min.css +1 -1
- package/components/button/style/dnb-button--tertiary.scss +3 -0
- package/components/button/style/themes/button-mixins.scss +3 -3
- package/components/button/style/themes/dnb-button-theme-eiendom.css +8 -4
- package/components/button/style/themes/dnb-button-theme-eiendom.min.css +1 -1
- package/components/button/style/themes/dnb-button-theme-sbanken.css +8 -18
- package/components/button/style/themes/dnb-button-theme-sbanken.min.css +1 -1
- package/components/button/style/themes/dnb-button-theme-sbanken.scss +6 -10
- package/components/button/style/themes/dnb-button-theme-ui.css +8 -4
- package/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
- package/components/button/style/themes/dnb-button-theme-ui.scss +5 -5
- package/components/checkbox/Checkbox.d.ts +1 -1
- package/components/date-picker/DatePicker.d.ts +1 -1
- package/components/drawer/Drawer.d.ts +2 -1
- package/components/dropdown/Dropdown.d.ts +1 -1
- package/components/form-label/FormLabel.d.ts +1 -1
- package/components/form-row/FormRow.d.ts +1 -1
- package/components/form-set/FormSet.d.ts +1 -1
- package/components/form-status/FormStatus.d.ts +1 -1
- package/components/global-error/GlobalError.d.ts +1 -1
- package/components/global-status/GlobalStatus.d.ts +4 -4
- package/components/heading/Heading.d.ts +89 -106
- package/components/heading/Heading.js +115 -183
- package/components/heading/HeadingContext.d.ts +12 -5
- package/components/heading/HeadingContext.js +2 -2
- package/components/heading/HeadingCounter.d.ts +38 -14
- package/components/heading/HeadingCounter.js +20 -17
- package/components/heading/HeadingHelpers.d.ts +45 -23
- package/components/heading/HeadingHelpers.js +27 -13
- package/components/heading/HeadingProvider.d.ts +9 -12
- package/components/heading/HeadingProvider.js +46 -90
- package/components/height-animation/HeightAnimation.d.ts +1 -1
- package/components/icon/Icon.d.ts +1 -1
- package/components/icon/Icon.js +1 -1
- package/components/icon-primary/IconPrimary.d.ts +1 -1
- package/components/info-card/style/dnb-info-card.css +1 -1
- package/components/info-card/style/dnb-info-card.min.css +1 -1
- package/components/info-card/style/dnb-info-card.scss +1 -1
- package/components/input/Input.d.ts +2 -2
- package/components/input/InputPassword.d.ts +1 -1
- package/components/input-masked/InputMasked.d.ts +2 -2
- package/components/input-masked/InputMasked.js +1 -1
- package/components/input-masked/InputMaskedHooks.js +16 -11
- package/components/input-masked/text-mask/createTextMaskInputElement.js +1 -3
- package/components/lib.d.ts +2 -2
- package/components/logo/Logo.d.ts +1 -1
- package/components/number-format/NumberFormat.js +2 -10
- package/components/number-format/NumberUtils.d.ts +12 -0
- package/components/pagination/Pagination.d.ts +1 -1
- package/components/radio/Radio.d.ts +1 -1
- package/components/radio/RadioGroup.d.ts +1 -1
- package/components/section/Section.d.ts +1 -1
- package/components/skeleton/Skeleton.d.ts +1 -1
- package/components/space/Space.d.ts +1 -1
- package/components/step-indicator/StepIndicator.d.ts +1 -1
- package/components/step-indicator/StepIndicatorItem.d.ts +1 -1
- package/components/step-indicator/StepIndicatorSidebar.d.ts +7 -5
- package/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
- package/components/switch/Switch.d.ts +1 -1
- package/components/tabs/Tabs.d.ts +1 -1
- package/components/textarea/Textarea.d.ts +1 -1
- package/components/toggle-button/ToggleButton.d.ts +1 -1
- package/core/jest/jestSetupScreenshots.css +1 -0
- package/elements/Element.d.ts +3 -3
- package/elements/Link.d.ts +2 -2
- package/elements/img/style/dnb-img.scss +2 -24
- package/elements/img/style/img-mixins.scss +29 -0
- package/elements/img/style/themes/dnb-img-theme-ui.scss +17 -4
- package/elements/lib.d.ts +2 -2
- package/elements/typography/style/themes/dnb-typography-theme-ui.scss +18 -2
- package/es/components/anchor/Anchor.d.ts +3 -3
- package/es/components/anchor/style/deps.scss +9 -0
- package/es/components/anchor/style/themes/dnb-anchor-theme-sbanken.css +20 -10
- package/es/components/anchor/style/themes/dnb-anchor-theme-sbanken.min.css +1 -1
- package/es/components/anchor/style/themes/dnb-anchor-theme-sbanken.scss +17 -14
- package/es/components/anchor/style/themes/dnb-anchor-theme-ui.scss +28 -14
- package/es/components/autocomplete/Autocomplete.js +5 -2
- package/es/components/avatar/Avatar.d.ts +1 -0
- package/es/components/button/style/dnb-button--tertiary.css +4 -0
- package/es/components/button/style/dnb-button--tertiary.min.css +1 -1
- package/es/components/button/style/dnb-button--tertiary.scss +3 -0
- package/es/components/button/style/themes/button-mixins.scss +3 -3
- package/es/components/button/style/themes/dnb-button-theme-eiendom.css +8 -4
- package/es/components/button/style/themes/dnb-button-theme-eiendom.min.css +1 -1
- package/es/components/button/style/themes/dnb-button-theme-sbanken.css +8 -18
- package/es/components/button/style/themes/dnb-button-theme-sbanken.min.css +1 -1
- package/es/components/button/style/themes/dnb-button-theme-sbanken.scss +6 -10
- package/es/components/button/style/themes/dnb-button-theme-ui.css +8 -4
- package/es/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
- package/es/components/button/style/themes/dnb-button-theme-ui.scss +5 -5
- package/es/components/checkbox/Checkbox.d.ts +1 -1
- package/es/components/date-picker/DatePicker.d.ts +1 -1
- package/es/components/drawer/Drawer.d.ts +2 -1
- package/es/components/dropdown/Dropdown.d.ts +1 -1
- package/es/components/form-label/FormLabel.d.ts +1 -1
- package/es/components/form-row/FormRow.d.ts +1 -1
- package/es/components/form-set/FormSet.d.ts +1 -1
- package/es/components/form-status/FormStatus.d.ts +1 -1
- package/es/components/global-error/GlobalError.d.ts +1 -1
- package/es/components/global-status/GlobalStatus.d.ts +4 -4
- package/es/components/heading/Heading.d.ts +89 -106
- package/es/components/heading/Heading.js +115 -183
- package/es/components/heading/HeadingContext.d.ts +12 -5
- package/es/components/heading/HeadingContext.js +2 -2
- package/es/components/heading/HeadingCounter.d.ts +38 -14
- package/es/components/heading/HeadingCounter.js +19 -18
- package/es/components/heading/HeadingHelpers.d.ts +45 -23
- package/es/components/heading/HeadingHelpers.js +27 -13
- package/es/components/heading/HeadingProvider.d.ts +9 -12
- package/es/components/heading/HeadingProvider.js +46 -90
- package/es/components/height-animation/HeightAnimation.d.ts +1 -1
- package/es/components/icon/Icon.d.ts +1 -1
- package/es/components/icon/Icon.js +1 -1
- package/es/components/icon-primary/IconPrimary.d.ts +1 -1
- package/es/components/info-card/style/dnb-info-card.css +1 -1
- package/es/components/info-card/style/dnb-info-card.min.css +1 -1
- package/es/components/info-card/style/dnb-info-card.scss +1 -1
- package/es/components/input/Input.d.ts +2 -2
- package/es/components/input/InputPassword.d.ts +1 -1
- package/es/components/input-masked/InputMasked.d.ts +2 -2
- package/es/components/input-masked/InputMasked.js +1 -1
- package/es/components/input-masked/InputMaskedHooks.js +10 -5
- package/es/components/input-masked/text-mask/createTextMaskInputElement.js +1 -3
- package/es/components/lib.d.ts +2 -2
- package/es/components/logo/Logo.d.ts +1 -1
- package/es/components/number-format/NumberFormat.js +2 -10
- package/es/components/number-format/NumberUtils.d.ts +12 -0
- package/es/components/pagination/Pagination.d.ts +1 -1
- package/es/components/radio/Radio.d.ts +1 -1
- package/es/components/radio/RadioGroup.d.ts +1 -1
- package/es/components/section/Section.d.ts +1 -1
- package/es/components/skeleton/Skeleton.d.ts +1 -1
- package/es/components/space/Space.d.ts +1 -1
- package/es/components/step-indicator/StepIndicator.d.ts +1 -1
- package/es/components/step-indicator/StepIndicatorItem.d.ts +1 -1
- package/es/components/step-indicator/StepIndicatorSidebar.d.ts +7 -5
- package/es/components/step-indicator/StepIndicatorTriggerButton.d.ts +1 -1
- package/es/components/switch/Switch.d.ts +1 -1
- package/es/components/tabs/Tabs.d.ts +1 -1
- package/es/components/textarea/Textarea.d.ts +1 -1
- package/es/components/toggle-button/ToggleButton.d.ts +1 -1
- package/es/core/jest/jestSetupScreenshots.css +1 -0
- package/es/elements/Element.d.ts +3 -3
- package/es/elements/Link.d.ts +2 -2
- package/es/elements/img/style/dnb-img.scss +2 -24
- package/es/elements/img/style/img-mixins.scss +29 -0
- package/es/elements/img/style/themes/dnb-img-theme-ui.scss +17 -4
- package/es/elements/lib.d.ts +2 -2
- package/es/elements/typography/style/themes/dnb-typography-theme-ui.scss +18 -2
- package/es/icons/accounting.d.ts +3 -0
- package/es/icons/accounting.js +2 -0
- package/es/icons/accounting_medium.d.ts +3 -0
- package/es/icons/accounting_medium.js +2 -0
- package/es/icons/candle_stick.d.ts +3 -0
- package/es/icons/candle_stick.js +2 -0
- package/es/icons/candle_stick_medium.d.ts +3 -0
- package/es/icons/candle_stick_medium.js +2 -0
- package/es/icons/dnb/accounting.d.ts +4 -0
- package/es/icons/dnb/accounting.js +21 -0
- package/es/icons/dnb/accounting_medium.d.ts +4 -0
- package/es/icons/dnb/accounting_medium.js +21 -0
- package/es/icons/dnb/candle_stick.d.ts +4 -0
- package/es/icons/dnb/candle_stick.js +20 -0
- package/es/icons/dnb/candle_stick_medium.d.ts +4 -0
- package/es/icons/dnb/candle_stick_medium.js +20 -0
- package/es/icons/dnb/fortune_ball.d.ts +4 -0
- package/es/icons/dnb/fortune_ball.js +21 -0
- package/es/icons/dnb/fortune_ball_medium.d.ts +4 -0
- package/es/icons/dnb/fortune_ball_medium.js +21 -0
- package/es/icons/dnb/icons-svg.lock +1174 -1070
- package/es/icons/dnb/index.d.ts +9 -25
- package/es/icons/dnb/index.js +9 -25
- package/es/icons/dnb/{document.d.ts → scan.d.ts} +2 -2
- package/es/icons/dnb/scan.js +18 -0
- package/es/icons/dnb/scan_medium.d.ts +4 -0
- package/es/icons/dnb/scan_medium.js +25 -0
- package/es/icons/dnb/secondary_icons.d.ts +5 -1
- package/es/icons/dnb/secondary_icons.js +5 -1
- package/es/icons/dnb/secondary_icons_medium.d.ts +5 -1
- package/es/icons/dnb/secondary_icons_medium.js +5 -1
- package/es/icons/dnb/shield_lock.js +17 -2
- package/es/icons/dnb/shield_lock_medium.js +17 -2
- package/es/icons/fortune_ball.d.ts +3 -0
- package/es/icons/fortune_ball.js +2 -0
- package/es/icons/fortune_ball_medium.d.ts +3 -0
- package/es/icons/fortune_ball_medium.js +2 -0
- package/es/icons/icons-meta.json +3748 -0
- package/es/icons/index.d.ts +9 -25
- package/es/icons/index.js +9 -25
- package/{cjs/icons/document.d.ts → es/icons/scan.d.ts} +1 -1
- package/es/icons/scan.js +2 -0
- package/es/icons/scan_medium.d.ts +3 -0
- package/es/icons/scan_medium.js +2 -0
- package/es/shared/Eufemia.d.ts +1 -1
- package/es/shared/Eufemia.js +2 -2
- package/es/shared/index.d.ts +2 -1
- package/es/style/dnb-ui-components.css +1 -1
- package/es/style/dnb-ui-components.min.css +1 -1
- package/es/style/themes/theme-eiendom/eiendom-theme-basis.css +4 -4
- package/es/style/themes/theme-eiendom/eiendom-theme-components.css +17 -9
- package/es/style/themes/theme-eiendom/eiendom-theme-components.min.css +1 -1
- package/es/style/themes/theme-eiendom/eiendom-theme-elements.css +4 -4
- package/es/style/themes/theme-sbanken/sbanken-theme-components.css +29 -29
- package/es/style/themes/theme-sbanken/sbanken-theme-components.min.css +1 -1
- package/es/style/themes/theme-ui/ui-theme-basis.css +4 -4
- package/es/style/themes/theme-ui/ui-theme-components.css +9 -5
- package/es/style/themes/theme-ui/ui-theme-components.min.css +1 -1
- package/es/style/themes/theme-ui/ui-theme-elements.css +4 -4
- package/es/style/themes/theme-ui/ui-theme-tags.css +98 -1
- package/es/style/themes/theme-ui/ui-theme-tags.min.css +1 -1
- package/es/style/themes/theme-ui/ui-theme-tags.scss +15 -1
- 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 +1 -1
- package/icons/accounting.d.ts +3 -0
- package/icons/accounting.js +2 -0
- package/icons/accounting_medium.d.ts +3 -0
- package/icons/accounting_medium.js +2 -0
- package/icons/candle_stick.d.ts +3 -0
- package/icons/candle_stick.js +2 -0
- package/icons/candle_stick_medium.d.ts +3 -0
- package/icons/candle_stick_medium.js +2 -0
- package/icons/dnb/accounting.d.ts +4 -0
- package/icons/dnb/accounting.js +21 -0
- package/icons/dnb/accounting_medium.d.ts +4 -0
- package/icons/dnb/accounting_medium.js +21 -0
- package/icons/dnb/candle_stick.d.ts +4 -0
- package/icons/dnb/candle_stick.js +20 -0
- package/icons/dnb/candle_stick_medium.d.ts +4 -0
- package/icons/dnb/candle_stick_medium.js +20 -0
- package/icons/dnb/fortune_ball.d.ts +4 -0
- package/icons/dnb/fortune_ball.js +21 -0
- package/icons/dnb/fortune_ball_medium.d.ts +4 -0
- package/icons/dnb/fortune_ball_medium.js +21 -0
- package/icons/dnb/icons-svg.lock +1174 -1070
- package/icons/dnb/index.d.ts +9 -25
- package/icons/dnb/index.js +9 -25
- package/icons/dnb/{document.d.ts → scan.d.ts} +2 -2
- package/icons/dnb/scan.js +18 -0
- package/icons/dnb/scan_medium.d.ts +4 -0
- package/icons/dnb/scan_medium.js +25 -0
- package/icons/dnb/secondary_icons.d.ts +5 -1
- package/icons/dnb/secondary_icons.js +5 -1
- package/icons/dnb/secondary_icons_medium.d.ts +5 -1
- package/icons/dnb/secondary_icons_medium.js +5 -1
- package/icons/dnb/shield_lock.js +17 -2
- package/icons/dnb/shield_lock_medium.js +17 -2
- package/icons/fortune_ball.d.ts +3 -0
- package/icons/fortune_ball.js +2 -0
- package/icons/fortune_ball_medium.d.ts +3 -0
- package/icons/fortune_ball_medium.js +2 -0
- package/icons/icons-meta.json +3748 -0
- package/icons/index.d.ts +9 -25
- package/icons/index.js +9 -25
- package/icons/{document.d.ts → scan.d.ts} +1 -1
- package/icons/scan.js +2 -0
- package/icons/scan_medium.d.ts +3 -0
- package/icons/scan_medium.js +2 -0
- package/package.json +1 -1
- package/shared/Eufemia.d.ts +1 -1
- package/shared/Eufemia.js +2 -2
- package/shared/index.d.ts +2 -1
- package/style/dnb-ui-components.css +1 -1
- package/style/dnb-ui-components.min.css +1 -1
- package/style/themes/theme-eiendom/eiendom-theme-basis.css +4 -4
- package/style/themes/theme-eiendom/eiendom-theme-components.css +17 -9
- package/style/themes/theme-eiendom/eiendom-theme-components.min.css +1 -1
- package/style/themes/theme-eiendom/eiendom-theme-elements.css +4 -4
- package/style/themes/theme-sbanken/sbanken-theme-components.css +29 -29
- package/style/themes/theme-sbanken/sbanken-theme-components.min.css +1 -1
- package/style/themes/theme-ui/ui-theme-basis.css +4 -4
- package/style/themes/theme-ui/ui-theme-components.css +9 -5
- package/style/themes/theme-ui/ui-theme-components.min.css +1 -1
- package/style/themes/theme-ui/ui-theme-elements.css +4 -4
- package/style/themes/theme-ui/ui-theme-tags.css +98 -1
- package/style/themes/theme-ui/ui-theme-tags.min.css +1 -1
- package/style/themes/theme-ui/ui-theme-tags.scss +15 -1
- 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 +1 -1
- package/assets/icons/dnb/document.svg +0 -3
- package/assets/icons/dnb/document_add.svg +0 -3
- package/assets/icons/dnb/document_add_medium.svg +0 -3
- package/assets/icons/dnb/document_contract.svg +0 -3
- package/assets/icons/dnb/document_contract_medium.svg +0 -3
- package/assets/icons/dnb/document_csv.svg +0 -6
- package/assets/icons/dnb/document_csv_medium.svg +0 -6
- package/assets/icons/dnb/document_loupe.svg +0 -3
- package/assets/icons/dnb/document_loupe_medium.svg +0 -3
- package/assets/icons/dnb/document_medium.svg +0 -3
- package/assets/icons/dnb/document_pdf.svg +0 -6
- package/assets/icons/dnb/document_pdf_medium.svg +0 -6
- package/assets/icons/dnb/document_rejected.svg +0 -3
- package/assets/icons/dnb/document_rejected_medium.svg +0 -3
- package/assets/icons/dnb/document_signing.svg +0 -3
- package/assets/icons/dnb/document_signing_medium.svg +0 -3
- package/assets/icons/dnb/document_txt.svg +0 -6
- package/assets/icons/dnb/document_txt_medium.svg +0 -6
- package/assets/icons/dnb/document_warning.svg +0 -4
- package/assets/icons/dnb/document_warning_medium.svg +0 -4
- package/assets/icons/dnb/document_word.svg +0 -6
- package/assets/icons/dnb/document_word_medium.svg +0 -6
- package/assets/icons/dnb/document_xls.svg +0 -6
- package/assets/icons/dnb/document_xls_medium.svg +0 -6
- package/cjs/icons/dnb/document_add.js +0 -28
- package/cjs/icons/dnb/document_add_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_add_medium.js +0 -28
- package/cjs/icons/dnb/document_contract.d.ts +0 -4
- package/cjs/icons/dnb/document_contract.js +0 -31
- package/cjs/icons/dnb/document_contract_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_contract_medium.js +0 -31
- package/cjs/icons/dnb/document_csv.js +0 -37
- package/cjs/icons/dnb/document_csv_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_csv_medium.js +0 -40
- package/cjs/icons/dnb/document_loupe.d.ts +0 -4
- package/cjs/icons/dnb/document_loupe.js +0 -28
- package/cjs/icons/dnb/document_loupe_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_loupe_medium.js +0 -28
- package/cjs/icons/dnb/document_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_pdf.js +0 -37
- package/cjs/icons/dnb/document_pdf_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_pdf_medium.js +0 -40
- package/cjs/icons/dnb/document_rejected.d.ts +0 -4
- package/cjs/icons/dnb/document_rejected_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_rejected_medium.js +0 -31
- package/cjs/icons/dnb/document_signing.d.ts +0 -4
- package/cjs/icons/dnb/document_signing.js +0 -28
- package/cjs/icons/dnb/document_signing_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_signing_medium.js +0 -28
- package/cjs/icons/dnb/document_txt.d.ts +0 -4
- package/cjs/icons/dnb/document_txt.js +0 -37
- package/cjs/icons/dnb/document_txt_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_txt_medium.js +0 -40
- package/cjs/icons/dnb/document_warning.d.ts +0 -4
- package/cjs/icons/dnb/document_warning.js +0 -34
- package/cjs/icons/dnb/document_warning_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_warning_medium.js +0 -34
- package/cjs/icons/dnb/document_word.d.ts +0 -4
- package/cjs/icons/dnb/document_word.js +0 -37
- package/cjs/icons/dnb/document_word_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_word_medium.js +0 -40
- package/cjs/icons/dnb/document_xls.d.ts +0 -4
- package/cjs/icons/dnb/document_xls.js +0 -37
- package/cjs/icons/dnb/document_xls_medium.d.ts +0 -4
- package/cjs/icons/dnb/document_xls_medium.js +0 -40
- package/cjs/icons/document_contract_medium.d.ts +0 -3
- package/cjs/icons/document_contract_medium.js +0 -13
- package/cjs/icons/document_csv_medium.d.ts +0 -3
- package/cjs/icons/document_csv_medium.js +0 -13
- package/cjs/icons/document_loupe.d.ts +0 -3
- package/cjs/icons/document_loupe.js +0 -13
- package/cjs/icons/document_loupe_medium.d.ts +0 -3
- package/cjs/icons/document_loupe_medium.js +0 -13
- package/cjs/icons/document_medium.d.ts +0 -3
- package/cjs/icons/document_medium.js +0 -13
- package/cjs/icons/document_pdf_medium.d.ts +0 -3
- package/cjs/icons/document_pdf_medium.js +0 -13
- package/cjs/icons/document_rejected.d.ts +0 -3
- package/cjs/icons/document_rejected.js +0 -13
- package/cjs/icons/document_rejected_medium.d.ts +0 -3
- package/cjs/icons/document_rejected_medium.js +0 -13
- package/cjs/icons/document_signing.d.ts +0 -3
- package/cjs/icons/document_signing.js +0 -13
- package/cjs/icons/document_signing_medium.d.ts +0 -3
- package/cjs/icons/document_signing_medium.js +0 -13
- package/cjs/icons/document_txt.d.ts +0 -3
- package/cjs/icons/document_txt.js +0 -13
- package/cjs/icons/document_txt_medium.d.ts +0 -3
- package/cjs/icons/document_txt_medium.js +0 -13
- package/cjs/icons/document_warning.d.ts +0 -3
- package/cjs/icons/document_warning.js +0 -13
- package/cjs/icons/document_warning_medium.d.ts +0 -3
- package/cjs/icons/document_warning_medium.js +0 -13
- package/cjs/icons/document_word.d.ts +0 -3
- package/cjs/icons/document_word.js +0 -13
- package/cjs/icons/document_word_medium.d.ts +0 -3
- package/cjs/icons/document_word_medium.js +0 -13
- package/cjs/icons/document_xls.d.ts +0 -3
- package/cjs/icons/document_xls.js +0 -13
- package/cjs/icons/document_xls_medium.d.ts +0 -3
- package/cjs/icons/document_xls_medium.js +0 -13
- package/es/icons/dnb/document.js +0 -21
- package/es/icons/dnb/document_add.d.ts +0 -4
- package/es/icons/dnb/document_add.js +0 -18
- package/es/icons/dnb/document_add_medium.d.ts +0 -4
- package/es/icons/dnb/document_add_medium.js +0 -18
- package/es/icons/dnb/document_contract.d.ts +0 -4
- package/es/icons/dnb/document_contract.js +0 -21
- package/es/icons/dnb/document_contract_medium.d.ts +0 -4
- package/es/icons/dnb/document_contract_medium.js +0 -21
- package/es/icons/dnb/document_csv.d.ts +0 -4
- package/es/icons/dnb/document_csv.js +0 -27
- package/es/icons/dnb/document_csv_medium.d.ts +0 -4
- package/es/icons/dnb/document_csv_medium.js +0 -30
- package/es/icons/dnb/document_loupe.d.ts +0 -4
- package/es/icons/dnb/document_loupe.js +0 -18
- package/es/icons/dnb/document_loupe_medium.d.ts +0 -4
- package/es/icons/dnb/document_loupe_medium.js +0 -18
- package/es/icons/dnb/document_medium.d.ts +0 -4
- package/es/icons/dnb/document_medium.js +0 -21
- package/es/icons/dnb/document_pdf.d.ts +0 -4
- package/es/icons/dnb/document_pdf.js +0 -27
- package/es/icons/dnb/document_pdf_medium.d.ts +0 -4
- package/es/icons/dnb/document_pdf_medium.js +0 -30
- package/es/icons/dnb/document_rejected.d.ts +0 -4
- package/es/icons/dnb/document_rejected.js +0 -21
- package/es/icons/dnb/document_rejected_medium.d.ts +0 -4
- package/es/icons/dnb/document_rejected_medium.js +0 -21
- package/es/icons/dnb/document_signing.d.ts +0 -4
- package/es/icons/dnb/document_signing.js +0 -18
- package/es/icons/dnb/document_signing_medium.d.ts +0 -4
- package/es/icons/dnb/document_signing_medium.js +0 -18
- package/es/icons/dnb/document_txt.d.ts +0 -4
- package/es/icons/dnb/document_txt.js +0 -27
- package/es/icons/dnb/document_txt_medium.d.ts +0 -4
- package/es/icons/dnb/document_txt_medium.js +0 -30
- package/es/icons/dnb/document_warning.d.ts +0 -4
- package/es/icons/dnb/document_warning.js +0 -24
- package/es/icons/dnb/document_warning_medium.d.ts +0 -4
- package/es/icons/dnb/document_warning_medium.js +0 -24
- package/es/icons/dnb/document_word.d.ts +0 -4
- package/es/icons/dnb/document_word.js +0 -27
- package/es/icons/dnb/document_word_medium.d.ts +0 -4
- package/es/icons/dnb/document_word_medium.js +0 -30
- package/es/icons/dnb/document_xls.d.ts +0 -4
- package/es/icons/dnb/document_xls.js +0 -27
- package/es/icons/dnb/document_xls_medium.d.ts +0 -4
- package/es/icons/dnb/document_xls_medium.js +0 -30
- package/es/icons/document.js +0 -2
- package/es/icons/document_add.d.ts +0 -3
- package/es/icons/document_add.js +0 -2
- package/es/icons/document_add_medium.d.ts +0 -3
- package/es/icons/document_add_medium.js +0 -2
- package/es/icons/document_contract.d.ts +0 -3
- package/es/icons/document_contract.js +0 -2
- package/es/icons/document_contract_medium.d.ts +0 -3
- package/es/icons/document_contract_medium.js +0 -2
- package/es/icons/document_csv.d.ts +0 -3
- package/es/icons/document_csv.js +0 -2
- package/es/icons/document_csv_medium.d.ts +0 -3
- package/es/icons/document_csv_medium.js +0 -2
- package/es/icons/document_loupe.d.ts +0 -3
- package/es/icons/document_loupe.js +0 -2
- package/es/icons/document_loupe_medium.d.ts +0 -3
- package/es/icons/document_loupe_medium.js +0 -2
- package/es/icons/document_medium.d.ts +0 -3
- package/es/icons/document_medium.js +0 -2
- package/es/icons/document_pdf.d.ts +0 -3
- package/es/icons/document_pdf.js +0 -2
- package/es/icons/document_pdf_medium.d.ts +0 -3
- package/es/icons/document_pdf_medium.js +0 -2
- package/es/icons/document_rejected.d.ts +0 -3
- package/es/icons/document_rejected.js +0 -2
- package/es/icons/document_rejected_medium.d.ts +0 -3
- package/es/icons/document_rejected_medium.js +0 -2
- package/es/icons/document_signing.d.ts +0 -3
- package/es/icons/document_signing.js +0 -2
- package/es/icons/document_signing_medium.d.ts +0 -3
- package/es/icons/document_signing_medium.js +0 -2
- package/es/icons/document_txt.d.ts +0 -3
- package/es/icons/document_txt.js +0 -2
- package/es/icons/document_txt_medium.d.ts +0 -3
- package/es/icons/document_txt_medium.js +0 -2
- package/es/icons/document_warning.d.ts +0 -3
- package/es/icons/document_warning.js +0 -2
- package/es/icons/document_warning_medium.d.ts +0 -3
- package/es/icons/document_warning_medium.js +0 -2
- package/es/icons/document_word.d.ts +0 -3
- package/es/icons/document_word.js +0 -2
- package/es/icons/document_word_medium.d.ts +0 -3
- package/es/icons/document_word_medium.js +0 -2
- package/es/icons/document_xls.d.ts +0 -3
- package/es/icons/document_xls.js +0 -2
- package/es/icons/document_xls_medium.d.ts +0 -3
- package/es/icons/document_xls_medium.js +0 -2
- package/icons/dnb/document.js +0 -21
- package/icons/dnb/document_add.d.ts +0 -4
- package/icons/dnb/document_add.js +0 -18
- package/icons/dnb/document_add_medium.d.ts +0 -4
- package/icons/dnb/document_add_medium.js +0 -18
- package/icons/dnb/document_contract.d.ts +0 -4
- package/icons/dnb/document_contract.js +0 -21
- package/icons/dnb/document_contract_medium.d.ts +0 -4
- package/icons/dnb/document_contract_medium.js +0 -21
- package/icons/dnb/document_csv.d.ts +0 -4
- package/icons/dnb/document_csv.js +0 -27
- package/icons/dnb/document_csv_medium.d.ts +0 -4
- package/icons/dnb/document_csv_medium.js +0 -30
- package/icons/dnb/document_loupe.d.ts +0 -4
- package/icons/dnb/document_loupe.js +0 -18
- package/icons/dnb/document_loupe_medium.d.ts +0 -4
- package/icons/dnb/document_loupe_medium.js +0 -18
- package/icons/dnb/document_medium.d.ts +0 -4
- package/icons/dnb/document_medium.js +0 -21
- package/icons/dnb/document_pdf.d.ts +0 -4
- package/icons/dnb/document_pdf.js +0 -27
- package/icons/dnb/document_pdf_medium.d.ts +0 -4
- package/icons/dnb/document_pdf_medium.js +0 -30
- package/icons/dnb/document_rejected.d.ts +0 -4
- package/icons/dnb/document_rejected.js +0 -21
- package/icons/dnb/document_rejected_medium.d.ts +0 -4
- package/icons/dnb/document_rejected_medium.js +0 -21
- package/icons/dnb/document_signing.d.ts +0 -4
- package/icons/dnb/document_signing.js +0 -18
- package/icons/dnb/document_signing_medium.d.ts +0 -4
- package/icons/dnb/document_signing_medium.js +0 -18
- package/icons/dnb/document_txt.d.ts +0 -4
- package/icons/dnb/document_txt.js +0 -27
- package/icons/dnb/document_txt_medium.d.ts +0 -4
- package/icons/dnb/document_txt_medium.js +0 -30
- package/icons/dnb/document_warning.d.ts +0 -4
- package/icons/dnb/document_warning.js +0 -24
- package/icons/dnb/document_warning_medium.d.ts +0 -4
- package/icons/dnb/document_warning_medium.js +0 -24
- package/icons/dnb/document_word.d.ts +0 -4
- package/icons/dnb/document_word.js +0 -27
- package/icons/dnb/document_word_medium.d.ts +0 -4
- package/icons/dnb/document_word_medium.js +0 -30
- package/icons/dnb/document_xls.d.ts +0 -4
- package/icons/dnb/document_xls.js +0 -27
- package/icons/dnb/document_xls_medium.d.ts +0 -4
- package/icons/dnb/document_xls_medium.js +0 -30
- package/icons/document.js +0 -2
- package/icons/document_add.d.ts +0 -3
- package/icons/document_add.js +0 -2
- package/icons/document_add_medium.d.ts +0 -3
- package/icons/document_add_medium.js +0 -2
- package/icons/document_contract.d.ts +0 -3
- package/icons/document_contract.js +0 -2
- package/icons/document_contract_medium.d.ts +0 -3
- package/icons/document_contract_medium.js +0 -2
- package/icons/document_csv.d.ts +0 -3
- package/icons/document_csv.js +0 -2
- package/icons/document_csv_medium.d.ts +0 -3
- package/icons/document_csv_medium.js +0 -2
- package/icons/document_loupe.d.ts +0 -3
- package/icons/document_loupe.js +0 -2
- package/icons/document_loupe_medium.d.ts +0 -3
- package/icons/document_loupe_medium.js +0 -2
- package/icons/document_medium.d.ts +0 -3
- package/icons/document_medium.js +0 -2
- package/icons/document_pdf.d.ts +0 -3
- package/icons/document_pdf.js +0 -2
- package/icons/document_pdf_medium.d.ts +0 -3
- package/icons/document_pdf_medium.js +0 -2
- package/icons/document_rejected.d.ts +0 -3
- package/icons/document_rejected.js +0 -2
- package/icons/document_rejected_medium.d.ts +0 -3
- package/icons/document_rejected_medium.js +0 -2
- package/icons/document_signing.d.ts +0 -3
- package/icons/document_signing.js +0 -2
- package/icons/document_signing_medium.d.ts +0 -3
- package/icons/document_signing_medium.js +0 -2
- package/icons/document_txt.d.ts +0 -3
- package/icons/document_txt.js +0 -2
- package/icons/document_txt_medium.d.ts +0 -3
- package/icons/document_txt_medium.js +0 -2
- package/icons/document_warning.d.ts +0 -3
- package/icons/document_warning.js +0 -2
- package/icons/document_warning_medium.d.ts +0 -3
- package/icons/document_warning_medium.js +0 -2
- package/icons/document_word.d.ts +0 -3
- package/icons/document_word.js +0 -2
- package/icons/document_word_medium.d.ts +0 -3
- package/icons/document_word_medium.js +0 -2
- package/icons/document_xls.d.ts +0 -3
- package/icons/document_xls.js +0 -2
- package/icons/document_xls_medium.d.ts +0 -3
- package/icons/document_xls_medium.js +0 -2
|
@@ -17,24 +17,25 @@
|
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
@mixin anchorFocus() {
|
|
20
|
+
color: var(--sb-color-blue-dark);
|
|
21
|
+
background-color: var(--sb-color-blue-light-3);
|
|
22
|
+
border-radius: 0.25rem;
|
|
23
|
+
|
|
20
24
|
&:not(:active) {
|
|
21
|
-
color: var(--sb-color-blue-dark);
|
|
22
25
|
background-color: var(--sb-color-blue-light-3);
|
|
26
|
+
}
|
|
23
27
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
28
|
+
&.dnb-anchor--icon-left {
|
|
29
|
+
margin-left: 0;
|
|
30
|
+
.dnb-icon {
|
|
27
31
|
margin-left: 0;
|
|
28
|
-
.dnb-icon {
|
|
29
|
-
margin-left: 0;
|
|
30
|
-
}
|
|
31
32
|
}
|
|
33
|
+
}
|
|
32
34
|
|
|
33
|
-
|
|
35
|
+
&.dnb-anchor--icon-right {
|
|
36
|
+
margin-right: 0;
|
|
37
|
+
.dnb-icon {
|
|
34
38
|
margin-right: 0;
|
|
35
|
-
.dnb-icon {
|
|
36
|
-
margin-right: 0;
|
|
37
|
-
}
|
|
38
39
|
}
|
|
39
40
|
}
|
|
40
41
|
}
|
|
@@ -59,9 +60,7 @@
|
|
|
59
60
|
}
|
|
60
61
|
|
|
61
62
|
&:focus {
|
|
62
|
-
@include
|
|
63
|
-
@include anchorFocus();
|
|
64
|
-
}
|
|
63
|
+
@include anchorFocus();
|
|
65
64
|
}
|
|
66
65
|
|
|
67
66
|
&.dnb-anchor--icon-left {
|
|
@@ -115,6 +114,10 @@
|
|
|
115
114
|
@include anchorFocus();
|
|
116
115
|
}
|
|
117
116
|
|
|
117
|
+
.dnb-anchor--no-radius {
|
|
118
|
+
@include anchor-mixins.resetBorderRadius();
|
|
119
|
+
}
|
|
120
|
+
|
|
118
121
|
// TODO: add correct contrast styling when designs are in place
|
|
119
122
|
.dnb-anchor--contrast {
|
|
120
123
|
@include anchor-mixins.useAnchorContrastStyle();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@use '../anchor-mixins.scss';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
@mixin anchorStyle() {
|
|
4
4
|
color: var(--color-sea-green);
|
|
5
5
|
|
|
6
6
|
&:hover,
|
|
@@ -21,22 +21,36 @@
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
.dnb-anchor--active {
|
|
30
|
-
color: var(--color-mint-green);
|
|
31
|
-
@include anchor-mixins.anchorBackground(var(--color-emerald-green));
|
|
32
|
-
}
|
|
24
|
+
$useClasses: true !default;
|
|
25
|
+
@if $useClasses {
|
|
26
|
+
.dnb-anchor {
|
|
27
|
+
@include anchorStyle();
|
|
28
|
+
}
|
|
33
29
|
|
|
34
|
-
.dnb-anchor--
|
|
35
|
-
&:not(:active) {
|
|
30
|
+
.dnb-anchor--hover {
|
|
36
31
|
color: var(--color-sea-green);
|
|
32
|
+
@include anchor-mixins.anchorBackground(var(--color-mint-green-50));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.dnb-anchor--active {
|
|
36
|
+
color: var(--color-mint-green);
|
|
37
|
+
@include anchor-mixins.anchorBackground(var(--color-emerald-green));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.dnb-anchor--focus {
|
|
41
|
+
&:not(:active) {
|
|
42
|
+
color: var(--color-sea-green);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.dnb-anchor--contrast {
|
|
47
|
+
@include anchor-mixins.useAnchorContrastStyle();
|
|
37
48
|
}
|
|
38
49
|
}
|
|
39
50
|
|
|
40
|
-
|
|
41
|
-
|
|
51
|
+
@mixin anchorThemeTag() {
|
|
52
|
+
a {
|
|
53
|
+
--theme-color-black-80: var(--color-sea-green);
|
|
54
|
+
@include anchorStyle();
|
|
55
|
+
}
|
|
42
56
|
}
|
|
@@ -1523,6 +1523,7 @@ class AutocompleteInstance extends React.PureComponent {
|
|
|
1523
1523
|
}
|
|
1524
1524
|
|
|
1525
1525
|
const suffixValue = (_getCurrentData = getCurrentData(selected_item, this.context.drawerList.original_data)) === null || _getCurrentData === void 0 ? void 0 : _getCurrentData.suffix_value;
|
|
1526
|
+
const innerId = suffixValue && showStatus ? `${id}-inner` : null;
|
|
1526
1527
|
validateDOMAttributes(null, mainParams);
|
|
1527
1528
|
validateDOMAttributes(null, shellParams);
|
|
1528
1529
|
return React.createElement("span", mainParams, label && React.createElement(FormLabel, {
|
|
@@ -1536,7 +1537,8 @@ class AutocompleteInstance extends React.PureComponent {
|
|
|
1536
1537
|
onClick: this.toggleVisible
|
|
1537
1538
|
}), React.createElement("span", {
|
|
1538
1539
|
className: "dnb-autocomplete__inner",
|
|
1539
|
-
ref: this._ref
|
|
1540
|
+
ref: this._ref,
|
|
1541
|
+
id: innerId
|
|
1540
1542
|
}, _AlignmentHelper || (_AlignmentHelper = React.createElement(AlignmentHelper, null)), React.createElement(FormStatus, _extends({
|
|
1541
1543
|
show: showStatus,
|
|
1542
1544
|
id: id + '-form-status',
|
|
@@ -1546,7 +1548,8 @@ class AutocompleteInstance extends React.PureComponent {
|
|
|
1546
1548
|
text: status,
|
|
1547
1549
|
state: status_state,
|
|
1548
1550
|
no_animation: status_no_animation,
|
|
1549
|
-
skeleton: skeleton
|
|
1551
|
+
skeleton: skeleton,
|
|
1552
|
+
width_selector: innerId
|
|
1550
1553
|
}, status_props)), React.createElement("span", {
|
|
1551
1554
|
className: "dnb-autocomplete__row"
|
|
1552
1555
|
}, React.createElement("span", shellParams, CustomInput ? React.createElement(CustomInput, inputParams) : React.createElement(Input, _extends({
|
|
@@ -5,6 +5,7 @@ import type { SkeletonShow } from '../skeleton/Skeleton';
|
|
|
5
5
|
import AvatarGroup from './AvatarGroup';
|
|
6
6
|
export declare type AvatarSizes = 'small' | 'medium' | 'large' | 'x-large';
|
|
7
7
|
export declare type AvatarVariants = 'primary' | 'secondary' | 'tertiary';
|
|
8
|
+
export declare type AvatarImgProps = ImgProps;
|
|
8
9
|
export interface AvatarProps {
|
|
9
10
|
/**
|
|
10
11
|
* Used in combination with `src` to provide an alt attribute for the `img` element.
|
|
@@ -86,6 +86,10 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
|
|
|
86
86
|
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 {
|
|
87
87
|
visibility: hidden;
|
|
88
88
|
}
|
|
89
|
+
.dnb-button--tertiary.dnb-button--has-text {
|
|
90
|
+
padding-left: 0;
|
|
91
|
+
padding-right: 0;
|
|
92
|
+
}
|
|
89
93
|
.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
|
|
90
94
|
align-self: flex-start;
|
|
91
95
|
margin-top: calc(var(--button-height) / 2 - 0.5rem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dnb-button--tertiary{--button-tertiary-focus-overflow:-1rem}.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:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.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: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]){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(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.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{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: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]){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{opacity:1;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--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;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--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{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:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.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{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;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:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:var(--button-tertiary-focus-overflow)}.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{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-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,.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.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:var(--button-tertiary-focus-overflow)}.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[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}
|
|
1
|
+
.dnb-button--tertiary{--button-tertiary-focus-overflow:-1rem}.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:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.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: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]){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(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.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{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: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]){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{opacity:1;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--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;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--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{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:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.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{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;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:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:var(--button-tertiary-focus-overflow)}.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{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-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,.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.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:var(--button-tertiary-focus-overflow)}.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[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
}
|
|
66
66
|
|
|
67
67
|
// Used in tertiary button variant
|
|
68
|
-
@mixin buttonFocusRing($whatinput: null, $
|
|
68
|
+
@mixin buttonFocusRing($whatinput: null, $inset: null) {
|
|
69
69
|
// Create focus-ring
|
|
70
70
|
&::before {
|
|
71
71
|
content: '';
|
|
@@ -73,9 +73,9 @@
|
|
|
73
73
|
z-index: 1; // to be visible in other absolute contexts
|
|
74
74
|
|
|
75
75
|
top: 0;
|
|
76
|
-
left:
|
|
76
|
+
left: -0.5rem;
|
|
77
77
|
bottom: 0;
|
|
78
|
-
right:
|
|
78
|
+
right: -0.5rem;
|
|
79
79
|
|
|
80
80
|
height: inherit;
|
|
81
81
|
border-radius: inherit;
|
|
@@ -101,6 +101,10 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
|
|
|
101
101
|
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 {
|
|
102
102
|
visibility: hidden;
|
|
103
103
|
}
|
|
104
|
+
.dnb-button--tertiary.dnb-button--has-text {
|
|
105
|
+
padding-left: 0;
|
|
106
|
+
padding-right: 0;
|
|
107
|
+
}
|
|
104
108
|
.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
|
|
105
109
|
align-self: flex-start;
|
|
106
110
|
margin-top: calc(var(--button-height) / 2 - 0.5rem);
|
|
@@ -376,10 +380,6 @@ html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):
|
|
|
376
380
|
color: var(--color-sea-green);
|
|
377
381
|
background-color: transparent;
|
|
378
382
|
}
|
|
379
|
-
.dnb-button--tertiary.dnb-button--has-text {
|
|
380
|
-
padding-left: 0;
|
|
381
|
-
padding-right: 0;
|
|
382
|
-
}
|
|
383
383
|
html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
|
|
384
384
|
cursor: not-allowed;
|
|
385
385
|
}
|
|
@@ -491,6 +491,10 @@ html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondar
|
|
|
491
491
|
html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled] {
|
|
492
492
|
color: var(--color-black-55);
|
|
493
493
|
background-color: var(--color-black-3);
|
|
494
|
+
--border-color: var(--color-black-55);
|
|
495
|
+
--border-width: var(--input-border-width);
|
|
496
|
+
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
|
|
497
|
+
border-color: transparent;
|
|
494
498
|
}
|
|
495
499
|
|
|
496
500
|
.dnb-button--primary {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dnb-button--tertiary{--button-tertiary-focus-overflow:-1rem}.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:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.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: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]){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(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.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:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){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]){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{opacity:1;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--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;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--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{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__alignment{height:0;order:3}.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{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;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:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:var(--button-tertiary-focus-overflow)}.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{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-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,.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.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:var(--button-tertiary-focus-overflow)}.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[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--primary{background-color:var(--color-sea-green);color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);color:var(--color-sea-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(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);background-color:var(--color-white);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.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(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.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(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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:var(--color-mint-green-50)}.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large{line-height:calc(var(--button-height--large) - .5rem);width:calc(var(--button-width--large) - .5rem)}.dnb-button--active{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green)}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}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:var(--color-emerald-green)}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}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:var(--color-emerald-green)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary[disabled]{color:var(--color-sea-green-30)}.dnb-button--signal{background-color:var(--color-accent-yellow);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);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}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);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color: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(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-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;--border-width:0.0625rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.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]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover{box-shadow:none;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus:after,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover:after{background-color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover{border-radius:0}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{box-shadow:none;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}.dnb-button--primary{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);--border-width:0.125rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.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;--border-width:0.0625rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-button--primary[disabled]{--border-color:var(--color-black-55);--border-width:0.0625rem;background-color:var(--color-black-8);color:var(--color-black-55)}.dnb-button--primary[disabled],.dnb-button--secondary{border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--secondary{--border-color:var(--color-emerald-green);--border-width:0.0625rem;color: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;--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary[disabled]{--border-color:var(--color-black-55);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color: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;--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--tertiary{color:var(--color-emerald-green)}.dnb-button--tertiary[disabled]{color:var(--color-black-55)}
|
|
1
|
+
.dnb-button--tertiary{--button-tertiary-focus-overflow:-1rem}.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:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.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: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]){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(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.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:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){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]){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{opacity:1;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--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;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--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{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__alignment{height:0;order:3}.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{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;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:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:var(--button-tertiary-focus-overflow)}.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{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-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,.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.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:var(--button-tertiary-focus-overflow)}.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[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--primary{background-color:var(--color-sea-green);color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);color:var(--color-sea-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(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);background-color:var(--color-white);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.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(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.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(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color: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:var(--color-mint-green-50)}.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large{line-height:calc(var(--button-height--large) - .5rem);width:calc(var(--button-width--large) - .5rem)}.dnb-button--active{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green)}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:var(--color-emerald-green)}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}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:var(--color-emerald-green)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary[disabled]{color:var(--color-sea-green-30)}.dnb-button--signal{background-color:var(--color-accent-yellow);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);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}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);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color: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(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-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;--border-width:0.0625rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.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]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover{box-shadow:none;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus:after,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover:after{background-color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover{border-radius:0}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{box-shadow:none;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{--border-color:var(--color-black-55);--border-width:var(--input-border-width);background-color:var(--color-black-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-black-55)}.dnb-button--primary{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);--border-width:0.125rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.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;--border-width:0.0625rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-button--primary[disabled]{--border-color:var(--color-black-55);--border-width:0.0625rem;background-color:var(--color-black-8);color:var(--color-black-55)}.dnb-button--primary[disabled],.dnb-button--secondary{border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--secondary{--border-color:var(--color-emerald-green);--border-width:0.0625rem;color: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;--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary[disabled]{--border-color:var(--color-black-55);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color: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;--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--tertiary{color:var(--color-emerald-green)}.dnb-button--tertiary[disabled]{color:var(--color-black-55)}
|
|
@@ -97,6 +97,10 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
|
|
|
97
97
|
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 {
|
|
98
98
|
visibility: hidden;
|
|
99
99
|
}
|
|
100
|
+
.dnb-button--tertiary.dnb-button--has-text {
|
|
101
|
+
padding-left: 0;
|
|
102
|
+
padding-right: 0;
|
|
103
|
+
}
|
|
100
104
|
.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
|
|
101
105
|
align-self: flex-start;
|
|
102
106
|
margin-top: calc(var(--button-height) / 2 - 0.5rem);
|
|
@@ -226,7 +230,7 @@ html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]), html
|
|
|
226
230
|
.dnb-button {
|
|
227
231
|
border: none;
|
|
228
232
|
}
|
|
229
|
-
.dnb-button.dnb-button--has-text.dnb-button--size-large {
|
|
233
|
+
.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--primary, .dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--secondary {
|
|
230
234
|
padding-left: 1.5rem;
|
|
231
235
|
padding-right: 1.5rem;
|
|
232
236
|
}
|
|
@@ -330,7 +334,7 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-but
|
|
|
330
334
|
border-color: transparent;
|
|
331
335
|
}
|
|
332
336
|
.dnb-button--tertiary {
|
|
333
|
-
--button-tertiary-focus-overflow: 0;
|
|
337
|
+
--button-tertiary-focus-overflow: -0.5rem;
|
|
334
338
|
color: var(--sb-color-violet);
|
|
335
339
|
background-color: transparent;
|
|
336
340
|
}
|
|
@@ -351,10 +355,6 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-but
|
|
|
351
355
|
.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text {
|
|
352
356
|
font-size: var(--font-size-small);
|
|
353
357
|
}
|
|
354
|
-
.dnb-button--tertiary.dnb-button--has-text {
|
|
355
|
-
padding-left: 0.5rem;
|
|
356
|
-
padding-right: 0.5rem;
|
|
357
|
-
}
|
|
358
358
|
.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text::after {
|
|
359
359
|
left: -1rem;
|
|
360
360
|
}
|
|
@@ -373,19 +373,9 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-but
|
|
|
373
373
|
left: -0.5rem;
|
|
374
374
|
right: -0.5rem;
|
|
375
375
|
}
|
|
376
|
-
.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large {
|
|
377
|
-
padding-left: 1.5rem;
|
|
378
|
-
padding-right: 1.5rem;
|
|
379
|
-
}
|
|
380
|
-
.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-left {
|
|
381
|
-
padding-left: 1rem;
|
|
382
|
-
}
|
|
383
376
|
.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text::after {
|
|
384
377
|
left: -1.5rem;
|
|
385
378
|
}
|
|
386
|
-
.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-right {
|
|
387
|
-
padding-right: 1rem;
|
|
388
|
-
}
|
|
389
379
|
.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-right .dnb-button__text::after {
|
|
390
380
|
right: -1.5rem;
|
|
391
381
|
}
|
|
@@ -410,9 +400,9 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-but
|
|
|
410
400
|
position: absolute;
|
|
411
401
|
z-index: 1;
|
|
412
402
|
top: 0;
|
|
413
|
-
left: 0;
|
|
403
|
+
left: -0.5rem;
|
|
414
404
|
bottom: 0;
|
|
415
|
-
right: 0;
|
|
405
|
+
right: -0.5rem;
|
|
416
406
|
height: inherit;
|
|
417
407
|
border-radius: inherit;
|
|
418
408
|
outline: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dnb-button--tertiary{--button-tertiary-focus-overflow:-1rem}.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:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){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]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{left:-.5rem;right:-.5rem}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{box-shadow:0 0 0 var(--border-width) var(--border-color)}.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:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){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]){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{opacity:1;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--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;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--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{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__alignment{height:0;order:3}.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{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;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:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:var(--button-tertiary-focus-overflow)}.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{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-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,.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.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:var(--button-tertiary-focus-overflow)}.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[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--primary:focus[disabled],.dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),.dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-blue-dark)}.dnb-button{border:none}.dnb-button.dnb-button--has-text.dnb-button--size-large{padding-left:1.5rem;padding-right:1.5rem}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--primary{background-color:var(--sb-color-purple-alternative);color:var(--sb-color-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]){background-color:var(--sb-color-purple);box-shadow:none;color:var(--sb-color-green);outline:initial}html[data-whatinput=""] html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){box-shadow:none}.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]){background-color:var(--sb-color-purple-alternative);color:var(--sb-color-green)}.dnb-button--primary[disabled]{background-color:var(--sb-color-gray-light);box-shadow:none;color:var(--sb-color-gray-dark-2);outline:initial}html[data-whatinput=""] .dnb-button--primary[disabled]{box-shadow:none}.dnb-button--primary:not([disabled]).dnb-button__status--error{background-color:var(--sb-color-red);color:var(--sb-color-white)}.dnb-button--secondary{--border-color:var(--sb-color-purple-alternative);--border-width:0.0625rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-purple-alternative)}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(--sb-color-purple-alternative);--border-width:0.0625rem;background-color:var(--sb-color-green-light-2);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-purple-alternative)}.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:var(--sb-color-purple-alternative);--border-width:0.0625rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-purple-alternative)}.dnb-button--secondary[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.0625rem;color:var(--sb-color-gray-dark)}.dnb-button--secondary:not([disabled]).dnb-button__status--error,.dnb-button--secondary[disabled]{background-color:var(--sb-color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-button--secondary:not([disabled]).dnb-button__status--error{--border-color:var(--sb-color-red);--border-width:0.0625rem;color:var(--sb-color-red)}html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-button__status--error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-button__status--error:hover:not([disabled]){--border-color:var(--sb-color-red);--border-width:0.0625rem;background-color:var(--sb-color-magenta-light-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-red)}.dnb-button--tertiary{--button-tertiary-focus-overflow:0;background-color:transparent;color:var(--sb-color-violet)}.dnb-button--tertiary .dnb-button__text:after{bottom:-.5rem;height:.0625rem;left:-.5rem;right:-.5rem}.dnb-button--tertiary.dnb-button--size-large .dnb-button__text:after{bottom:-.75rem;left:-1.5rem;right:-1.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--has-text{padding-left:.5rem;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text:after{left:-1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-right .dnb-button__text:after{right:-1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top{padding-left:.5rem;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{font-size:var(--button-font-size);margin-bottom:.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text:after{left:-.5rem;right:-.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-left{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text:after{left:-1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-right{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-right .dnb-button__text:after{right:-1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{font-size:var(--button-font-size);margin-bottom:.75rem;margin-top:.25rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text:after{left:-1.5rem;right:-1.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]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:0;outline:none;position:absolute;right:0;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(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}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:var(--sb-color-violet);transition:none}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-button--tertiary[disabled]{color:var(--sb-color-gray-dark)}
|
|
1
|
+
.dnb-button--tertiary{--button-tertiary-focus-overflow:-1rem}.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:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){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]){box-shadow: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{box-shadow:0 0 0 var(--border-width) var(--border-color)}.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:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){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]){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{opacity:1;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--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--medium{margin-top:calc(var(--button-height)/2 - .75rem)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon.dnb-icon--large{margin-top:calc(var(--button-height)/2 - 1rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;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--has-text .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{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__alignment{height:0;order:3}.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{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;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:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:var(--button-tertiary-focus-overflow)}.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{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-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,.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.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:var(--button-tertiary-focus-overflow)}.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[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--primary:focus[disabled],.dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),.dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--sb-color-blue-light-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-blue-dark)}.dnb-button{border:none}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--primary,.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--secondary{padding-left:1.5rem;padding-right:1.5rem}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--icon-position-right{padding-right:.5rem}.dnb-button.dnb-button--has-text.dnb-button--size-large.dnb-button--icon-position-left{padding-left:.5rem}.dnb-button--primary{background-color:var(--sb-color-purple-alternative);color:var(--sb-color-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]){background-color:var(--sb-color-purple);box-shadow:none;color:var(--sb-color-green);outline:initial}html[data-whatinput=""] html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){box-shadow:none}.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]){background-color:var(--sb-color-purple-alternative);color:var(--sb-color-green)}.dnb-button--primary[disabled]{background-color:var(--sb-color-gray-light);box-shadow:none;color:var(--sb-color-gray-dark-2);outline:initial}html[data-whatinput=""] .dnb-button--primary[disabled]{box-shadow:none}.dnb-button--primary:not([disabled]).dnb-button__status--error{background-color:var(--sb-color-red);color:var(--sb-color-white)}.dnb-button--secondary{--border-color:var(--sb-color-purple-alternative);--border-width:0.0625rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-purple-alternative)}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(--sb-color-purple-alternative);--border-width:0.0625rem;background-color:var(--sb-color-green-light-2);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-purple-alternative)}.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:var(--sb-color-purple-alternative);--border-width:0.0625rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-purple-alternative)}.dnb-button--secondary[disabled]{--border-color:var(--sb-color-gray-light);--border-width:0.0625rem;color:var(--sb-color-gray-dark)}.dnb-button--secondary:not([disabled]).dnb-button__status--error,.dnb-button--secondary[disabled]{background-color:var(--sb-color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}.dnb-button--secondary:not([disabled]).dnb-button__status--error{--border-color:var(--sb-color-red);--border-width:0.0625rem;color:var(--sb-color-red)}html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-button__status--error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not([disabled]).dnb-button__status--error:hover:not([disabled]){--border-color:var(--sb-color-red);--border-width:0.0625rem;background-color:var(--sb-color-magenta-light-3);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-red)}.dnb-button--tertiary{--button-tertiary-focus-overflow:-0.5rem;background-color:transparent;color:var(--sb-color-violet)}.dnb-button--tertiary .dnb-button__text:after{bottom:-.5rem;height:.0625rem;left:-.5rem;right:-.5rem}.dnb-button--tertiary.dnb-button--size-large .dnb-button__text:after{bottom:-.75rem;left:-1.5rem;right:-1.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text:after{left:-1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-right .dnb-button__text:after{right:-1rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top{padding-left:.5rem;padding-right:.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{font-size:var(--button-font-size);margin-bottom:.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text:after{left:-.5rem;right:-.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text:after{left:-1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-right .dnb-button__text:after{right:-1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top{padding-left:1.5rem;padding-right:1.5rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{font-size:var(--button-font-size);margin-bottom:.75rem;margin-top:.25rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--size-large.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text:after{left:-1.5rem;right:-1.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]):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(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color)}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:var(--sb-color-violet);transition:none}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:var(--sb-color-violet)}.dnb-button--tertiary[disabled]{color:var(--sb-color-gray-dark)}
|
|
@@ -21,8 +21,10 @@
|
|
|
21
21
|
border: none;
|
|
22
22
|
|
|
23
23
|
&#{&}--has-text#{&}--size-large {
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
&.dnb-button--primary, &.dnb-button--secondary {
|
|
25
|
+
padding-left: 1.5rem;
|
|
26
|
+
padding-right: 1.5rem;
|
|
27
|
+
}
|
|
26
28
|
&.dnb-button--icon-position-right {
|
|
27
29
|
padding-right: 0.5rem;
|
|
28
30
|
}
|
|
@@ -103,7 +105,7 @@
|
|
|
103
105
|
$tertiary-padding-large: 1.5rem;
|
|
104
106
|
$tertiary-icon-space: 0.5rem;
|
|
105
107
|
|
|
106
|
-
--button-tertiary-focus-overflow: 0;
|
|
108
|
+
--button-tertiary-focus-overflow: -0.5rem;
|
|
107
109
|
|
|
108
110
|
color: var(--sb-color-violet);
|
|
109
111
|
background-color: transparent;
|
|
@@ -135,8 +137,6 @@
|
|
|
135
137
|
}
|
|
136
138
|
|
|
137
139
|
&.dnb-button--has-text {
|
|
138
|
-
padding-left: $tertiary-padding;
|
|
139
|
-
padding-right: $tertiary-padding;
|
|
140
140
|
|
|
141
141
|
&.dnb-button--has-icon {
|
|
142
142
|
&.dnb-button--icon-position-left {
|
|
@@ -164,18 +164,14 @@
|
|
|
164
164
|
}
|
|
165
165
|
|
|
166
166
|
&.dnb-button--size-large {
|
|
167
|
-
padding-left: $tertiary-padding-large;
|
|
168
|
-
padding-right: $tertiary-padding-large;
|
|
169
167
|
|
|
170
168
|
&.dnb-button--has-icon {
|
|
171
169
|
&.dnb-button--icon-position-left {
|
|
172
|
-
padding-left: $tertiary-padding-large - $tertiary-icon-space;
|
|
173
170
|
.dnb-button__text::after {
|
|
174
171
|
left: -$tertiary-padding-large ;
|
|
175
172
|
}
|
|
176
173
|
}
|
|
177
174
|
&.dnb-button--icon-position-right {
|
|
178
|
-
padding-right: $tertiary-padding-large - $tertiary-icon-space;
|
|
179
175
|
.dnb-button__text::after {
|
|
180
176
|
right: -$tertiary-padding-large;
|
|
181
177
|
}
|
|
@@ -198,7 +194,7 @@
|
|
|
198
194
|
}
|
|
199
195
|
|
|
200
196
|
@include focus() {
|
|
201
|
-
@include buttonFocusRing(null,
|
|
197
|
+
@include buttonFocusRing(null, inset);
|
|
202
198
|
}
|
|
203
199
|
|
|
204
200
|
@include hover() {
|
|
@@ -97,6 +97,10 @@ html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-bu
|
|
|
97
97
|
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 {
|
|
98
98
|
visibility: hidden;
|
|
99
99
|
}
|
|
100
|
+
.dnb-button--tertiary.dnb-button--has-text {
|
|
101
|
+
padding-left: 0;
|
|
102
|
+
padding-right: 0;
|
|
103
|
+
}
|
|
100
104
|
.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
|
|
101
105
|
align-self: flex-start;
|
|
102
106
|
margin-top: calc(var(--button-height) / 2 - 0.5rem);
|
|
@@ -372,10 +376,6 @@ html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):
|
|
|
372
376
|
color: var(--color-sea-green);
|
|
373
377
|
background-color: transparent;
|
|
374
378
|
}
|
|
375
|
-
.dnb-button--tertiary.dnb-button--has-text {
|
|
376
|
-
padding-left: 0;
|
|
377
|
-
padding-right: 0;
|
|
378
|
-
}
|
|
379
379
|
html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
|
|
380
380
|
cursor: not-allowed;
|
|
381
381
|
}
|
|
@@ -487,4 +487,8 @@ html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondar
|
|
|
487
487
|
html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled] {
|
|
488
488
|
color: var(--color-black-55);
|
|
489
489
|
background-color: var(--color-black-3);
|
|
490
|
+
--border-color: var(--color-black-55);
|
|
491
|
+
--border-width: var(--input-border-width);
|
|
492
|
+
box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
|
|
493
|
+
border-color: transparent;
|
|
490
494
|
}
|