diff --git a/.yarnrc.yml b/.yarnrc.yml index 826e3774a2f..ec634daa605 100644 --- a/.yarnrc.yml +++ b/.yarnrc.yml @@ -30,9 +30,6 @@ packageExtensions: jest-tobetype@*: dependencies: eslint-import-resolver-node: "*" - stylelint@*: - dependencies: - postcss-scss: "*" plugins: - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs diff --git a/packages/dnb-design-system-portal/.ncurc.json b/packages/dnb-design-system-portal/.ncurc.json index 2516b858470..9d3c274ec43 100644 --- a/packages/dnb-design-system-portal/.ncurc.json +++ b/packages/dnb-design-system-portal/.ncurc.json @@ -1,11 +1,3 @@ { - "reject": [ - "eslint", - "ora", - "stylelint", - "stylelint-config-prettier", - "stylelint-config-recommended", - "stylelint-config-standard", - "stylelint-scss" - ] + "reject": ["ora"] } diff --git a/packages/dnb-design-system-portal/.stylelintrc b/packages/dnb-design-system-portal/.stylelintrc index 9294faff876..0d2e57c7e82 100644 --- a/packages/dnb-design-system-portal/.stylelintrc +++ b/packages/dnb-design-system-portal/.stylelintrc @@ -1,19 +1,8 @@ { - "extends": [ - "stylelint-config-recommended", - "stylelint-config-standard", - "stylelint-config-prettier" - ], - "plugins": ["stylelint-scss"], + "extends": ["@dnb/eufemia/.stylelintrc"], "rules": { - "declaration-empty-line-before": null, - "at-rule-no-unknown": null, - "no-invalid-position-at-import-rule": null, - "selector-pseudo-class-no-unknown": [ - true, - { - "ignorePseudoClasses": ["global"] - } - ] + "selector-pseudo-class-no-unknown": null, + "scss/no-global-function-names": null, + "shorthand-property-no-redundant-values": null } } diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json index d89f1a5e195..86bd8c18ef7 100644 --- a/packages/dnb-design-system-portal/package.json +++ b/packages/dnb-design-system-portal/package.json @@ -23,8 +23,8 @@ "lint:ci": "NODE_ENV=test yarn lint:js && yarn lint:styles", "lint:js": "yarn lint --fix", "lint:js:staged": "eslint --quiet --fix", - "lint:styles": "stylelint './src/**/{Examples.*,*.scss}'", - "lint:styles:staged": "stylelint './src/**/{Examples.*,*.scss}'", + "lint:styles": "stylelint './src/**/*.scss'", + "lint:styles:staged": "stylelint './src/**/*.scss'", "reset": "yarn clean && rm -rf ./node_modules", "serve": "NODE_NO_WARNINGS=1 gatsby serve -p 8000", "start": "NODE_NO_WARNINGS=1 cross-env gatsby develop", @@ -110,11 +110,9 @@ "sass": "1.43.4", "start-server-and-test": "1.14.0", "storybook-utils": "workspace:*", - "stylelint": "13.13.1", - "stylelint-config-prettier": "8.0.2", - "stylelint-config-recommended": "5.0.0", - "stylelint-config-standard": "22.0.0", - "stylelint-scss": "3.21.0", + "stylelint": "15.1.0", + "stylelint-config-recommended": "10.0.1", + "stylelint-config-standard-scss": "7.0.1", "svg-react-loader": "0.4.6", "typescript": "4.5.5" }, diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/legacy-styling.module.scss b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/legacy-styling.module.scss index e20d08e59c5..d63b5b09ba3 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/legacy-styling.module.scss +++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/legacy-styling.module.scss @@ -3,6 +3,7 @@ :global { .dnb-dev-grid { z-index: 1; + @include gridStyle(rgb(220, 220, 220), 0.8); } } @@ -13,7 +14,7 @@ } color: var(--color-sky-blue); - background-color: rgba(164, 255, 255, 0.3); + background-color: rgb(164 255 255 / 30%); } .LegacyCodeExample { @@ -33,7 +34,7 @@ :global { .show-pixel-bounding { - background-color: rgba(255, 255, 255, 0.5); + background-color: rgb(255 255 255 / 50%); } } } @@ -44,7 +45,7 @@ :global { .show-pixel-bounding { - background-color: rgba(255, 255, 255, 0.5); + background-color: rgb(255 255 255 / 50%); } } } diff --git a/packages/dnb-design-system-portal/src/shared/menu/Card.module.scss b/packages/dnb-design-system-portal/src/shared/menu/Card.module.scss index b9f90e3637e..da1499d3de0 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/Card.module.scss +++ b/packages/dnb-design-system-portal/src/shared/menu/Card.module.scss @@ -8,15 +8,17 @@ margin: 0.5rem; padding: 0; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 2px 2px rgb(0 0 0 / 10%); &, a { border-radius: 0.5rem; } + &.is-selected a { background-color: var(--color-mint-green); } + a:focus, a:hover { background-color: var(--color-mint-green-50); @@ -39,9 +41,11 @@ opacity: 0; transform: scale3d(0.9, 0.9, 1) translate3d(0, -8%, 0); } + 40% { opacity: 1; } + 100% { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); @@ -53,6 +57,7 @@ opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } + 100% { opacity: 0; transform: scale3d(0.9, 0.9, 1) translate3d(0, -8%, 0); @@ -67,7 +72,7 @@ height: 100%; - color: rgba(0, 0, 0, 0.75); + color: rgb(0 0 0 / 75%); text-decoration: none; text-align: center; font-weight: var(--font-weight-basis); @@ -78,6 +83,7 @@ &:focus { outline: none; } + html[data-whatinput='keyboard'] &:focus { @include focusRing(); } diff --git a/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss b/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss index 4301b835032..81aba985af0 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss +++ b/packages/dnb-design-system-portal/src/shared/menu/SearchBar.module.scss @@ -3,6 +3,7 @@ .autocompleteStyle { :global { margin-right: 1rem; + @include allBelow(small) { margin-right: 0.5rem; } @@ -11,11 +12,13 @@ &, input { width: 40vw; + @include allBelow(small) { width: 50vw; } } } + .dnb-form-label { color: white; /* only for axe-core */ } diff --git a/packages/dnb-design-system-portal/src/shared/parts/Layout.module.scss b/packages/dnb-design-system-portal/src/shared/parts/Layout.module.scss index bf3685b19b8..5813a56b86a 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/Layout.module.scss +++ b/packages/dnb-design-system-portal/src/shared/parts/Layout.module.scss @@ -47,7 +47,7 @@ } .image-box { - @include gridStyle(rgb(40, 180, 130), 0.4); + @include gridStyle(rgb(40 180 130), 0.4); position: relative; @@ -56,7 +56,7 @@ text-align: center; - background-color: rgba(255, 255, 255, 0.6); + background-color: rgba(255 255 255 / 60%); figcaption { padding-top: 0.938rem; /* 15/16 because of the border */ diff --git a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss index a859b60f65d..5a71358334e 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss +++ b/packages/dnb-design-system-portal/src/shared/parts/PortalStyle.scss @@ -48,6 +48,7 @@ html[show-dev-grid] .dev-grid > .dnb-h--xx-large { position: relative; z-index: 2; } + html[show-dev-grid] .dev-grid { @include gridStyle(rgb(220, 220, 220), 0.8); @@ -62,9 +63,10 @@ html[show-dev-grid] .dev-grid { p > a, p > code, p > small { - background-color: rgba(255, 255, 122, 0.35); + background-color: rgb(255 255 122 / 35%); + :only-child { - background-color: rgba(0, 200, 200, 0.25); + background-color: rgb(0 200 200 / 25%); } } /* stylelint-enable */ @@ -78,18 +80,23 @@ html[show-dev-grid] .dev-grid { .lh-12 { line-height: calc(var(--line-height-basis) - 0.25rem); /* 0.75rem */ } + .lh-16 { line-height: var(--line-height-basis); /* 1rem */ } + .lh-20 { line-height: calc(var(--line-height-basis) + 0.25rem); /* 1.25rem */ } + .lh-24 { line-height: var(--line-height-basis); /* 1rem */ } + .lh-28 { line-height: calc(var(--line-height-basis) + 0.75rem); /* 1.75rem */ } + .lh-32 { line-height: calc(var(--line-height-basis) + 1rem); /* 2rem */ } diff --git a/packages/dnb-design-system-portal/src/shared/parts/icons/ListAllIcons.module.scss b/packages/dnb-design-system-portal/src/shared/parts/icons/ListAllIcons.module.scss index a3a6210973b..40a4bc7836a 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/icons/ListAllIcons.module.scss +++ b/packages/dnb-design-system-portal/src/shared/parts/icons/ListAllIcons.module.scss @@ -2,8 +2,7 @@ list-style: none; display: flex; - flex-wrap: wrap; - flex-direction: row; + flex-flow: row wrap; align-items: flex-end; padding: 0; @@ -15,7 +14,7 @@ margin: 0.5rem; border-radius: 0.25rem; - box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 4px rgb(0 0 0 / 20%); } .listItemInnerStyle { @@ -38,6 +37,7 @@ margin: 0; white-space: nowrap; } + .dnb-p, .dnb-spacing & .dnb-p { margin: 0; diff --git a/packages/dnb-design-system-portal/src/shared/tags/AutoLinkHeader.module.scss b/packages/dnb-design-system-portal/src/shared/tags/AutoLinkHeader.module.scss index 53ef3ca8305..36dead648bd 100644 --- a/packages/dnb-design-system-portal/src/shared/tags/AutoLinkHeader.module.scss +++ b/packages/dnb-design-system-portal/src/shared/tags/AutoLinkHeader.module.scss @@ -22,14 +22,19 @@ color: var(--color-sea-green); background-color: transparent; } + 35% { color: var(--color-white); background-color: var(--color-sea-green); } + + // stylelint-disable-next-line 0%, 80% { opacity: 1; } + + // stylelint-disable-next-line 100% { opacity: 0; } @@ -45,9 +50,10 @@ @keyframes parent-attention-focus { 0%, 100% { - color: currentColor; + color: currentcolor; background-color: transparent; } + 35% { color: var(--color-white); background-color: var(--color-sea-green); @@ -55,6 +61,7 @@ } animation: parent-attention-focus 2.2s ease-in-out 1 10ms; + * { animation: parent-attention-focus 3s ease-in-out 1 150ms; } diff --git a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss index 66cac91c2f6..8b59922e6eb 100644 --- a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss +++ b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.module.scss @@ -58,7 +58,7 @@ border-style: solid; border-width: 0 0.75rem 0.75rem; - border-color: transparent transparent #222 transparent; + border-color: transparent transparent #222; opacity: 1; transition: opacity 0.2s ease-out, border-width 0.2s ease-out; diff --git a/packages/dnb-design-system-portal/src/shared/tags/Tabbar.module.scss b/packages/dnb-design-system-portal/src/shared/tags/Tabbar.module.scss index f4c2865b42c..6903aa99398 100644 --- a/packages/dnb-design-system-portal/src/shared/tags/Tabbar.module.scss +++ b/packages/dnb-design-system-portal/src/shared/tags/Tabbar.module.scss @@ -5,15 +5,18 @@ .dnb-tabs__tabs { justify-content: space-between; } + .dnb-tabs__tabs .dnb-modal__close-button { position: relative; top: auto; /* to force the button to center */ right: auto; } + .dnb-tabs__tabs .dnb-button.dnb-modal__close-button, .dnb-tabs__tabs .dnb-button.fullscreen { margin-left: 1rem; } + .dnb-tabs__tabs .dnb-button--secondary { box-shadow: none; background-color: transparent; @@ -30,6 +33,7 @@ } */ } + .dnb-tabs__tabs .dnb-button.fullscreen { display: none; } diff --git a/packages/dnb-eufemia/.ncurc.json b/packages/dnb-eufemia/.ncurc.json index ea27ee8c90c..c5ed0f40692 100644 --- a/packages/dnb-eufemia/.ncurc.json +++ b/packages/dnb-eufemia/.ncurc.json @@ -1,13 +1,3 @@ { - "reject": [ - "globby", - "ora", - "react", - "react-dom", - "stylelint", - "stylelint-config-prettier", - "stylelint-config-recommended", - "stylelint-config-standard", - "stylelint-scss" - ] + "reject": ["globby", "ora", "react", "react-dom"] } diff --git a/packages/dnb-eufemia/.stylelintignore b/packages/dnb-eufemia/.stylelintignore index baa0722fc0b..53d7bb237f7 100644 --- a/packages/dnb-eufemia/.stylelintignore +++ b/packages/dnb-eufemia/.stylelintignore @@ -1,6 +1,8 @@ *__tests__* *not_in_use* -/src/components/slider/Slider.js /scripts /stories *.cjs +*.js +*.ts +*.tsx \ No newline at end of file diff --git a/packages/dnb-eufemia/.stylelintrc b/packages/dnb-eufemia/.stylelintrc index 232465ed2c9..5a20ab8c37a 100644 --- a/packages/dnb-eufemia/.stylelintrc +++ b/packages/dnb-eufemia/.stylelintrc @@ -1,15 +1,28 @@ { "extends": [ "stylelint-config-recommended", - "stylelint-config-standard", - "stylelint-config-prettier" - ], - "plugins": [ - "stylelint-scss" + "stylelint-config-standard-scss" ], + "plugins": ["stylelint-scss"], "rules": { + "scss/at-import-partial-extension": "always", + "scss/at-mixin-argumentless-call-parentheses": "always", + "scss/double-slash-comment-empty-line-before": null, + "scss/at-mixin-pattern": null, + "scss/operator-no-newline-after": null, + "scss/at-if-no-null": null, + "scss/dollar-variable-pattern": null, + "color-function-notation": "modern", "declaration-empty-line-before": null, + "at-rule-empty-line-before": null, + "rule-empty-line-before": null, "at-rule-no-unknown": null, + "selector-not-notation": null, + "keyframes-name-pattern": null, + "custom-property-pattern": null, + "selector-class-pattern": null, + "selector-id-pattern": null, + "number-max-precision": null, "no-invalid-position-at-import-rule": null } } diff --git a/packages/dnb-eufemia/package.json b/packages/dnb-eufemia/package.json index 3a87b6d6d70..ff26f35e4b4 100644 --- a/packages/dnb-eufemia/package.json +++ b/packages/dnb-eufemia/package.json @@ -241,11 +241,9 @@ "simple-git": "3.16.0", "storybook-utils": "workspace:*", "style-loader": "3.3.1", - "stylelint": "13.13.1", - "stylelint-config-prettier": "8.0.2", - "stylelint-config-recommended": "5.0.0", - "stylelint-config-standard": "22.0.0", - "stylelint-scss": "3.21.0", + "stylelint": "15.1.0", + "stylelint-config-recommended": "10.0.1", + "stylelint-config-standard-scss": "7.0.1", "svg2vectordrawable": "2.9.1", "svgo": "3.0.0", "tar": "6.1.11", diff --git a/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap b/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap index bebd9589f70..ef0cafa4d69 100644 --- a/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap +++ b/packages/dnb-eufemia/src/components/accordion/__tests__/__snapshots__/Accordion.test.js.snap @@ -349,7 +349,7 @@ exports[`Accordion scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -359,10 +359,10 @@ exports[`Accordion scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; diff --git a/packages/dnb-eufemia/src/components/accordion/style/deps.scss b/packages/dnb-eufemia/src/components/accordion/style/deps.scss index 75a59b8015f..0a9fd5e110f 100644 --- a/packages/dnb-eufemia/src/components/accordion/style/deps.scss +++ b/packages/dnb-eufemia/src/components/accordion/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../icon/style/deps.scss'; - @import './dnb-accordion.scss'; diff --git a/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss b/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss index 20bbf46bbed..dad3a450134 100644 --- a/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/accordion/style/themes/dnb-accordion-theme-ui.scss @@ -10,6 +10,7 @@ &__header { border: none; } + &__header__icon, &__header__container { color: var(--color-sea-green); @@ -32,9 +33,9 @@ background-color: var(--color-white); @include fakeBorder(var(--color-black-8), 0.0625rem, inset); - @include buttonFocus(var(--color-emerald-green), var(--color-white)); @include buttonHover(var(--color-emerald-green), var(--color-white)); + @include active() { color: var(--color-emerald-green); background-color: var(--color-pistachio); @@ -42,9 +43,12 @@ @include fakeBorder(var(--color-emerald-green), 0.0625rem); } } + &__variant--outlined > &__header[disabled] { background-color: var(--color-white); + @include fakeBorder(var(--color-sea-green-30), 0.0625rem); + * { color: var(--color-sea-green-30); } @@ -57,6 +61,7 @@ } &__variant--outlined#{&}--expanded > &__header[disabled] { background-color: var(--color-sea-green-30); + * { color: var(--color-white); } @@ -67,6 +72,7 @@ &__variant--outlined#{&}--expanded > &__header:not([disabled]):not(:active):not(:hover):focus { background-color: var(--color-mint-green); + * { color: var(--color-emerald-green); } @@ -82,9 +88,10 @@ color: var(--color-white); } } + // we have this hover variant, because of the default html focus/hover handling &__variant--outlined#{&}--expanded > &__header#{&}--hover:not(:active) { - @include hover { + @include hover () { color: var(--color-white); background-color: var(--color-sea-green); @@ -92,6 +99,7 @@ // @include fakeBorder(transparent); @include fakeBorder(var(--color-sea-green)); } + * { color: var(--color-white); } diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap index bca71797e35..4660c0a59b3 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap +++ b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap @@ -1575,7 +1575,7 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1585,10 +1585,10 @@ exports[`Autocomplete scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1876,6 +1876,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -2061,7 +2062,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -2110,7 +2113,7 @@ button.dnb-button::-moz-focus-inner { .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -2120,10 +2123,10 @@ button.dnb-button::-moz-focus-inner { height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -2323,7 +2326,6 @@ html[data-visual-test] .dnb-tooltip--hide { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -2476,7 +2478,6 @@ button .dnb-form-status__text { } .dnb-input__input[disabled] { user-select: none; - -webkit-user-select: none; opacity: 1; } .dnb-input__shell, .dnb-input__input { @@ -2804,7 +2805,7 @@ html[data-visual-test] .dnb-input__input { .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -2814,10 +2815,10 @@ html[data-visual-test] .dnb-input__input { height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -2893,7 +2894,7 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -2903,10 +2904,10 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -3194,6 +3195,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -3379,7 +3381,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -3434,7 +3438,6 @@ button.dnb-button::-moz-focus-inner { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -3597,7 +3600,6 @@ button .dnb-form-status__text { position: relative; z-index: 1; user-select: none; - -webkit-user-select: none; width: 100%; } .dnb-dropdown__trigger.dnb-button { diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/deps.scss b/packages/dnb-eufemia/src/components/autocomplete/style/deps.scss index a4c8c180b3c..c6e7fcdd44c 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/style/deps.scss +++ b/packages/dnb-eufemia/src/components/autocomplete/style/deps.scss @@ -4,9 +4,7 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../input/style/deps.scss'; @import '../../dropdown/style/deps.scss'; @import '../../progress-indicator/style/deps.scss'; - @import './dnb-autocomplete.scss'; diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss b/packages/dnb-eufemia/src/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss index 4d5cec7d268..919bc26d5db 100644 --- a/packages/dnb-eufemia/src/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss @@ -14,6 +14,7 @@ .dnb-input__shell { @include fakeBorder(var(--color-sea-green), 0.125rem); } + .dnb-input__submit-button__button { border-radius: 0; color: var(--color-white); @@ -25,6 +26,7 @@ &--show-indicator &__input .dnb-input__icon { color: transparent; } + &__shell, &__input { border-radius: var(--autocomplete-border-radius); @@ -44,18 +46,22 @@ &__item:nth-of-type(1) { font-weight: var(--font-weight-basis); } + &__item:nth-of-type(n + 2) { color: var(--color-black-55); } + &__item--highlight { font-weight: var(--font-weight-bold); } } + .dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-drawer-list__option__item:nth-of-type(n + 2) { color: var(--color-white); } + .dnb-autocomplete__root .dnb-drawer-list__option--selected .dnb-anchor { color: var(--color-white); } diff --git a/packages/dnb-eufemia/src/components/avatar/style/deps.scss b/packages/dnb-eufemia/src/components/avatar/style/deps.scss index 792cb3058f7..163a9b17611 100644 --- a/packages/dnb-eufemia/src/components/avatar/style/deps.scss +++ b/packages/dnb-eufemia/src/components/avatar/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-avatar.scss'; diff --git a/packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss b/packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss index 6ae29f4afde..fc16da6e52d 100644 --- a/packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss +++ b/packages/dnb-eufemia/src/components/avatar/style/dnb-avatar.scss @@ -49,6 +49,7 @@ width: var(--avatar-width--small); height: var(--avatar-height--small); font-size: var(--avatar-font-size--small); + // Safari needs a correct CSS specificity &, .dnb-core-style & { @@ -60,6 +61,7 @@ width: var(--avatar-width--medium); height: var(--avatar-height--medium); font-size: var(--avatar-font-size--medium); + // Safari needs a correct CSS specificity &, .dnb-core-style & { @@ -71,6 +73,7 @@ width: var(--avatar-width--large); height: var(--avatar-height--large); font-size: var(--avatar-font-size--large); + // Safari needs a correct CSS specificity &, .dnb-core-style & { @@ -82,6 +85,7 @@ width: var(--avatar-width--x-large); height: var(--avatar-height--x-large); font-size: var(--avatar-font-size--x-large); + // Safari needs a correct CSS specificity &, .dnb-core-style & { diff --git a/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-ui.scss b/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-ui.scss index 3fb498fc749..472f7fc0012 100644 --- a/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/avatar/style/themes/dnb-avatar-theme-ui.scss @@ -11,9 +11,11 @@ &--primary { background-color: var(--color-emerald-green); } + &--secondary { background-color: var(--color-sea-green); } + &--tertiary { background-color: var(--color-mint-green); color: var(--color-emerald-green); diff --git a/packages/dnb-eufemia/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap b/packages/dnb-eufemia/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap index ea7c3b55b0c..3d5c92e29d1 100644 --- a/packages/dnb-eufemia/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/badge/__tests__/__snapshots__/Badge.test.tsx.snap @@ -46,9 +46,8 @@ exports[`Badge scss have to match snapshot 1`] = ` .dnb-badge { display: inline-flex; font-weight: var(--font-weight-medium); - flex-direction: row; + flex-flow: row wrap; white-space: nowrap; - flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; diff --git a/packages/dnb-eufemia/src/components/badge/style/deps.scss b/packages/dnb-eufemia/src/components/badge/style/deps.scss index 121a6a74418..31d024189fb 100644 --- a/packages/dnb-eufemia/src/components/badge/style/deps.scss +++ b/packages/dnb-eufemia/src/components/badge/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-badge.scss'; diff --git a/packages/dnb-eufemia/src/components/badge/style/dnb-badge.scss b/packages/dnb-eufemia/src/components/badge/style/dnb-badge.scss index 9b0c6b7dc02..3db851596f2 100644 --- a/packages/dnb-eufemia/src/components/badge/style/dnb-badge.scss +++ b/packages/dnb-eufemia/src/components/badge/style/dnb-badge.scss @@ -23,9 +23,8 @@ display: inline-flex; font-weight: var(--font-weight-medium); - flex-direction: row; + flex-flow: row wrap; white-space: nowrap; - flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; @@ -39,6 +38,7 @@ display: inline-flex; vertical-align: middle; flex-shrink: 0; + .dnb-badge { display: flex; overflow: hidden; diff --git a/packages/dnb-eufemia/src/components/badge/style/themes/dnb-badge-theme-ui.scss b/packages/dnb-eufemia/src/components/badge/style/themes/dnb-badge-theme-ui.scss index 118ac2b9cea..c835167bb9c 100644 --- a/packages/dnb-eufemia/src/components/badge/style/themes/dnb-badge-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/badge/style/themes/dnb-badge-theme-ui.scss @@ -11,6 +11,7 @@ &--variant-information { background-color: var(--color-emerald-green); } + &--variant-notification { background-color: var(--color-fire-red); } diff --git a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap index 62c5ac19807..3066a66e03b 100644 --- a/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap @@ -42,7 +42,7 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -52,10 +52,10 @@ exports[`Breadcrumb scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -343,6 +343,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -528,7 +529,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -577,8 +580,8 @@ button.dnb-button::-moz-focus-inner { width: 100vw; height: 100%; color: var(--color-mint-green-12); - background-color: currentColor; - box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor; + background-color: currentcolor; + box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor; } .dnb-section .dnb-section::after { z-index: -14; @@ -644,8 +647,7 @@ button.dnb-button::-moz-focus-inner { margin: 0; padding: 0; list-style: none; - flex-wrap: wrap; - flex-direction: row; + flex-flow: row wrap; align-items: center; } .dnb-breadcrumb__item__span { diff --git a/packages/dnb-eufemia/src/components/breadcrumb/style/deps.scss b/packages/dnb-eufemia/src/components/breadcrumb/style/deps.scss index b4d6fdc68d2..7689c0a35a5 100644 --- a/packages/dnb-eufemia/src/components/breadcrumb/style/deps.scss +++ b/packages/dnb-eufemia/src/components/breadcrumb/style/deps.scss @@ -3,8 +3,6 @@ * */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; @import '../../section/style/deps.scss'; - @import './dnb-breadcrumb.scss'; diff --git a/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss b/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss index b9107bb3cff..7f459d0c288 100644 --- a/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss +++ b/packages/dnb-eufemia/src/components/breadcrumb/style/dnb-breadcrumb.scss @@ -23,8 +23,7 @@ list-style: none; - flex-wrap: wrap; - flex-direction: row; + flex-flow: row wrap; align-items: center; } @@ -55,11 +54,13 @@ transition: height 400ms var(--easing-default); } + &__animation &__item { transition: transform 400ms var(--easing-default) calc(var(--delay) * 50ms); transform: translateX(-1rem); } + &__animation.dnb-height-animation--parallax &__item { transform: translateX(0); } @@ -68,6 +69,7 @@ display: flex; flex-direction: column; } + &__collapse &__list.dnb-section { flex-direction: column; align-items: flex-start; diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap index b78517edb54..4156e479eab 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap +++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.js.snap @@ -1106,7 +1106,7 @@ html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text): height: 0.095rem; border-radius: 0.0475rem; color: var(--color-sea-green); - background-color: currentColor; + background-color: currentcolor; bottom: -0.0625rem; color: transparent; transition: color 250ms ease-in-out; @@ -1378,7 +1378,7 @@ html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]), html[da bottom: 0; left: 0; width: 0.0625rem; - background-color: currentColor; + background-color: currentcolor; } 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 { color: var(--color-white); @@ -1438,7 +1438,7 @@ exports[`Button scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1448,10 +1448,10 @@ exports[`Button scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1739,6 +1739,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -1924,7 +1925,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { diff --git a/packages/dnb-eufemia/src/components/button/style/deps.scss b/packages/dnb-eufemia/src/components/button/style/deps.scss index f907573b9c2..8b4f35095d4 100644 --- a/packages/dnb-eufemia/src/components/button/style/deps.scss +++ b/packages/dnb-eufemia/src/components/button/style/deps.scss @@ -4,9 +4,7 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../icon/style/deps.scss'; @import '../../tooltip/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-button.scss'; diff --git a/packages/dnb-eufemia/src/components/button/style/dnb-button.scss b/packages/dnb-eufemia/src/components/button/style/dnb-button.scss index 4c5d8011ecc..b37c85d0915 100644 --- a/packages/dnb-eufemia/src/components/button/style/dnb-button.scss +++ b/packages/dnb-eufemia/src/components/button/style/dnb-button.scss @@ -29,6 +29,8 @@ position: relative; user-select: none; + + /* stylelint-disable-next-line */ -webkit-user-select: none; // Safari / Touch fix cursor: pointer; @@ -41,8 +43,8 @@ // we use flex, even if they don't has effect in safari and webkit display: inline-flex; - align-items: center; //centering icons - justify-content: center; //centering icons + align-items: center; // centering icons + justify-content: center; // centering icons width: var(--button-width); height: auto; @@ -267,7 +269,11 @@ &[type='reset'], &[type='submit'] { appearance: none; + + /* stylelint-disable-next-line */ -moz-appearance: none; + + /* stylelint-disable-next-line */ -webkit-appearance: none; } diff --git a/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss b/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss index 129969ee6f1..f38d2f38a32 100644 --- a/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss +++ b/packages/dnb-eufemia/src/components/button/style/themes/button-mixins.scss @@ -100,7 +100,7 @@ border-radius: calc(0.095rem / 2); color: var(--color-sea-green); // border color - background-color: currentColor; + background-color: currentcolor; // using box-shadow works well to get 1.5px // but not for the transition to opacity diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-eiendom.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-eiendom.scss index 648c6520dac..3d7ecea4c64 100644 --- a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-eiendom.scss +++ b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-eiendom.scss @@ -34,6 +34,7 @@ .dnb-button--secondary { color: var(--color-emerald-green); + @include fakeBorder(var(--color-emerald-green)); // // This is just not good – it gives the feeling that its not clickable, as the change is almost not noticeable diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss index 1a7ebaa601c..353d8214f7d 100644 --- a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-ui.scss @@ -354,7 +354,7 @@ left: 0; width: 0.0625rem; - background-color: currentColor; + background-color: currentcolor; } } html:not([data-whatintent='touch']) diff --git a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap index 80804f6ef96..8354751eac7 100644 --- a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +++ b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap @@ -313,7 +313,6 @@ exports[`Checkbox scss have to match snapshot 1`] = ` } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -443,7 +442,6 @@ button .dnb-form-status__text { } .dnb-checkbox__shell { user-select: none; - -webkit-user-select: none; position: relative; display: flex; align-items: center; @@ -487,7 +485,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus { left: auto; width: calc(var(--checkbox-width--medium) - 0.5rem); height: calc(var(--checkbox-height--medium) - 0.5rem); - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; } .dnb-checkbox--large { line-height: var(--checkbox-height--large); diff --git a/packages/dnb-eufemia/src/components/checkbox/style/deps.scss b/packages/dnb-eufemia/src/components/checkbox/style/deps.scss index b46b231ed65..0c1e7437f3d 100644 --- a/packages/dnb-eufemia/src/components/checkbox/style/deps.scss +++ b/packages/dnb-eufemia/src/components/checkbox/style/deps.scss @@ -4,8 +4,6 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../form-label/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-checkbox.scss'; diff --git a/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss b/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss index 0ed8b9d1839..0ce2d3269e1 100644 --- a/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss +++ b/packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss @@ -27,8 +27,7 @@ } &__shell { - user-select: none; - -webkit-user-select: none; // Safari / Touch fix + user-select: none; // Safari / Touch fix position: relative; display: flex; @@ -38,6 +37,7 @@ width: var(--checkbox-width--medium); height: var(--checkbox-height--medium); } + &--large &__shell { width: var(--checkbox-width--large); height: var(--checkbox-height--large); @@ -48,10 +48,13 @@ border: var(--checkbox-border-width) solid transparent; } + &__focus { display: none; + @include fakeFocus(); } + &__focus, &__button { position: relative; @@ -69,6 +72,7 @@ border-radius: 0.25rem; } } + &__gfx { position: absolute; z-index: 5; @@ -82,11 +86,13 @@ height: calc(var(--checkbox-height--medium) - 0.5rem); // fill: currentColor; // old svg fix - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; } + &--large { line-height: var(--checkbox-height--large); } + &--large &__gfx { // width: var(--checkbox-width--large); // old svg size // height: var(--checkbox-height--large); // old svg size @@ -110,6 +116,7 @@ border: 0; } + &--large &__input { width: var(--checkbox-width--large); height: var(--checkbox-height--large); @@ -138,10 +145,12 @@ .dnb-checkbox__inner { order: 2; } + .dnb-form-label { order: 1; padding-right: 0.5rem; } + .dnb-form-status { order: 3; margin-top: 0.5rem; @@ -152,12 +161,15 @@ .dnb-checkbox__inner { order: 1; } + .dnb-form-label { order: 2; padding-left: 0.5rem; } + & + .dnb-form-status { order: 3; + // in case the status did not wrap, we want to have the status on the same line vertical-align: top; diff --git a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index f631cb713f4..906e7580d6e 100644 --- a/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -1859,7 +1859,7 @@ exports[`DatePicker scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1869,10 +1869,10 @@ exports[`DatePicker scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -2160,6 +2160,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -2345,7 +2346,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -2394,7 +2397,7 @@ button.dnb-button::-moz-focus-inner { .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -2404,10 +2407,10 @@ button.dnb-button::-moz-focus-inner { height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -2607,7 +2610,6 @@ html[data-visual-test] .dnb-tooltip--hide { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -2760,7 +2762,6 @@ button .dnb-form-status__text { } .dnb-input__input[disabled] { user-select: none; - -webkit-user-select: none; opacity: 1; } .dnb-input__shell, .dnb-input__input { @@ -3088,7 +3089,7 @@ html[data-visual-test] .dnb-input__input { .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -3098,10 +3099,10 @@ html[data-visual-test] .dnb-input__input { height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -3389,6 +3390,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -3574,7 +3576,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -3636,7 +3640,6 @@ button.dnb-button::-moz-focus-inner { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -3681,7 +3684,7 @@ legend.dnb-form-label { .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -3691,10 +3694,10 @@ legend.dnb-form-label { height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -3982,6 +3985,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -4167,7 +4171,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -4229,7 +4235,6 @@ button.dnb-button::-moz-focus-inner { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -4359,7 +4364,6 @@ button .dnb-form-status__text { } .dnb-checkbox__shell { user-select: none; - -webkit-user-select: none; position: relative; display: flex; align-items: center; @@ -4403,7 +4407,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus { left: auto; width: calc(var(--checkbox-width--medium) - 0.5rem); height: calc(var(--checkbox-height--medium) - 0.5rem); - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; } .dnb-checkbox--large { line-height: var(--checkbox-height--large); @@ -4513,7 +4517,6 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -4646,7 +4649,6 @@ button .dnb-form-status__text { .dnb-radio__shell { position: relative; user-select: none; - -webkit-user-select: none; display: flex; align-items: center; justify-content: center; @@ -4920,7 +4922,6 @@ button .dnb-form-status__text { position: relative; left: 0; user-select: none; - -webkit-user-select: none; } .dnb-toggle-button--vertical { flex-direction: column; @@ -4972,7 +4973,7 @@ button .dnb-form-status__text { width: calc(var(--radio-width--medium) - 1rem); height: calc(var(--radio-height--medium) - 1rem); } -.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary:hover { +.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled], :active).dnb-button--secondary, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled], :active).dnb-button--secondary:hover { background-color: var(--color-emerald-green); color: var(--color-mint-green); } @@ -5069,7 +5070,6 @@ button .dnb-form-status__text { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -5355,6 +5355,7 @@ html[data-visual-test] .dnb-date-picker:not(.dnb-date-picker--opened) .dnb-date- .dnb-date-picker__views { display: flex; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; } @media screen and (max-width: 60em) { diff --git a/packages/dnb-eufemia/src/components/date-picker/style/deps.scss b/packages/dnb-eufemia/src/components/date-picker/style/deps.scss index fb845fa7f63..c25000d793d 100644 --- a/packages/dnb-eufemia/src/components/date-picker/style/deps.scss +++ b/packages/dnb-eufemia/src/components/date-picker/style/deps.scss @@ -4,11 +4,9 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../input/style/deps.scss'; // used in DatePickerInput @import '../../button/style/deps.scss'; // used in DatePickerCalendar @import '../../toggle-button/style/deps.scss'; // used in DatePickerAddon @import '../../form-label/style/deps.scss'; // used in DatePicker @import '../../form-status/style/deps.scss'; // used in DatePicker - @import './dnb-date-picker.scss'; diff --git a/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss b/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss index 1fd7a785f6f..d758cb83374 100644 --- a/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss +++ b/packages/dnb-eufemia/src/components/date-picker/style/dnb-date-picker.scss @@ -134,24 +134,24 @@ white-space: nowrap; // Chrome fix - @include IS_CHROME { + @include IS_CHROME() { margin: 0 -4px; } // Edge fix - @include IS_EDGE { + @include IS_EDGE() { margin: 0 -5px; } // Safari Mobile fix - @include IS_SAFARI_MOBILE { + @include IS_SAFARI_MOBILE() { &:not(*:root) { margin: 0; } } // Safari Desktop fix - @include IS_SAFARI_DESKTOP { + @include IS_SAFARI_DESKTOP() { &:not(*:root) { margin: 0 -4px; } @@ -220,6 +220,8 @@ &__views { display: flex; user-select: none; + + /* stylelint-disable-next-line */ -webkit-user-select: none; // Safari / Touch fix // Wrap already on "medium", because "small" is too narrow in range mode diff --git a/packages/dnb-eufemia/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss b/packages/dnb-eufemia/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss index 85c6ff36bb4..52b0a0ed5e5 100644 --- a/packages/dnb-eufemia/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss @@ -8,6 +8,7 @@ .dnb-date-picker { &:not(#{&}__status--error) &__input { color: var(--color-black-55); + & ~ .dnb-date-picker--separator { color: var(--color-black-55); } @@ -25,6 +26,7 @@ &__input[value*='9'] { &:not([data-input-state='disabled']) { color: var(--color-black); + & ~ .dnb-date-picker--separator { color: var(--color-black); } @@ -55,6 +57,7 @@ &__nav .dnb-button { box-shadow: none; } + &__title { text-transform: capitalize; text-align: center; @@ -100,6 +103,7 @@ &::after { background-color: var(--color-mint-green-50); } + .dnb-button { color: var(--color-mint-green-25); background-color: var(--color-emerald-green); @@ -152,6 +156,7 @@ .dnb-input__shell { @include fakeBorder(var(--color-sea-green), 0.125rem); } + .dnb-input__submit-button__button.dnb-button--secondary { color: var(--color-white); background-color: var(--color-sea-green); @@ -165,6 +170,7 @@ &__triangle::before { border: none; background-color: var(--color-white); + @include defaultDropShadow(); } diff --git a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap index 7c7488cea0a..df048101469 100644 --- a/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -1380,7 +1380,7 @@ exports[`Dialog scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1390,10 +1390,10 @@ exports[`Dialog scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1681,6 +1681,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -1866,7 +1867,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -1994,6 +1997,7 @@ button.dnb-button::-moz-focus-inner { html[data-dnb-modal-active] { user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; } @@ -2018,6 +2022,7 @@ html[data-dnb-modal-active] { width: 100%; height: 100%; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; } @media screen and (max-width: 40em) { @@ -2198,7 +2203,6 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { border-radius: 0.5rem; box-shadow: var(--shadow-default); user-select: text; - -webkit-user-select: text; border: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); max-height: 100vh; diff --git a/packages/dnb-eufemia/src/components/dialog/style/deps.scss b/packages/dnb-eufemia/src/components/dialog/style/deps.scss index 85cd3f9c717..e886af874f9 100644 --- a/packages/dnb-eufemia/src/components/dialog/style/deps.scss +++ b/packages/dnb-eufemia/src/components/dialog/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../modal/style/deps.scss'; - @import './dnb-dialog.scss'; diff --git a/packages/dnb-eufemia/src/components/dialog/style/dnb-dialog.scss b/packages/dnb-eufemia/src/components/dialog/style/dnb-dialog.scss index a0de3542374..7e57281a2ba 100644 --- a/packages/dnb-eufemia/src/components/dialog/style/dnb-dialog.scss +++ b/packages/dnb-eufemia/src/components/dialog/style/dnb-dialog.scss @@ -19,15 +19,15 @@ .dnb-dialog { position: relative; border-radius: 0.5rem; - @include defaultDropShadow(); - user-select: text; - -webkit-user-select: text; // Safari / Touch fix + @include defaultDropShadow(); + user-select: text; // Safari / Touch fix border: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: rgb(0 0 0 / 0%); max-height: 100vh; overflow: hidden; + .dnb-scroll-view { max-height: 90vh; // make it scrollable } @@ -59,6 +59,7 @@ margin: auto 0; } } + &--fullscreen { @include modalFullscreen(); margin: auto 0; @@ -120,6 +121,7 @@ margin-right: 1rem; } } + &--information &__actions { justify-content: left; } @@ -143,6 +145,7 @@ font-size: var(--font-size-large) !important; line-height: var(--line-height-medium) !important; } + @include allBelow(small) { font-size: var(--font-size-medium) !important; line-height: calc(var(--line-height-medium) - 0.25rem) !important; @@ -167,6 +170,7 @@ html:not([data-visual-test]) & { animation: show-modal var(--modal-animation-duration) ease-out; } + // Animation out html:not([data-visual-test]) &--hide { animation: hide-modal 220ms ease-in-out forwards; @@ -175,6 +179,7 @@ &--no-animation { animation-duration: 0ms !important; } + @include allBelow(small) { &--no-animation-on-mobile { animation-delay: 0ms !important; @@ -197,9 +202,11 @@ &__header [class*='dnb-h--'], &__header .dnb-modal__title { padding: 0; + &:not([class*='__top']) { margin-top: 0; } + &:not([class*='__bottom']) { margin-bottom: 0; } @@ -214,6 +221,7 @@ &__icon { display: flex; } + &__icon ~ &__header { margin-top: 1.5rem; } diff --git a/packages/dnb-eufemia/src/components/dialog/style/themes/dnb-dialog-theme-ui.scss b/packages/dnb-eufemia/src/components/dialog/style/themes/dnb-dialog-theme-ui.scss index a2f266942c7..719b90398aa 100644 --- a/packages/dnb-eufemia/src/components/dialog/style/themes/dnb-dialog-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/dialog/style/themes/dnb-dialog-theme-ui.scss @@ -17,7 +17,7 @@ bottom: -50%; border: none; - background-color: currentColor; + background-color: currentcolor; opacity: 0.1; } diff --git a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index 70c24f92ca6..a165abd761b 100644 --- a/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -1397,7 +1397,7 @@ exports[`Drawer scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1407,10 +1407,10 @@ exports[`Drawer scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1698,6 +1698,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -1883,7 +1884,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -2011,6 +2014,7 @@ button.dnb-button::-moz-focus-inner { html[data-dnb-modal-active] { user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; } @@ -2035,6 +2039,7 @@ html[data-dnb-modal-active] { width: 100%; height: 100%; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; } @media screen and (max-width: 40em) { @@ -2223,7 +2228,6 @@ html[data-visual-test] .dnb-modal__overlay, .dnb-modal__overlay--no-animation { max-width: var(--drawer-max-width); box-shadow: var(--shadow-default); user-select: text; - -webkit-user-select: text; border: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } diff --git a/packages/dnb-eufemia/src/components/drawer/style/deps.scss b/packages/dnb-eufemia/src/components/drawer/style/deps.scss index 537de865749..8a5eab374eb 100644 --- a/packages/dnb-eufemia/src/components/drawer/style/deps.scss +++ b/packages/dnb-eufemia/src/components/drawer/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../modal/style/deps.scss'; - @import './dnb-drawer.scss'; diff --git a/packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss b/packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss index a69f23a919f..00a9ba60113 100644 --- a/packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss +++ b/packages/dnb-eufemia/src/components/drawer/style/dnb-drawer.scss @@ -20,9 +20,11 @@ @include allAbove(x-large) { padding: 0 calc(var(--drawer-spacing) * 1.75); // 3.5rem (56px) } + @include allBelow(medium) { padding: 0 calc(var(--drawer-spacing) / 1.333333); // 2rem (32px) } + @include allBelow(small) { padding: 0 calc(var(--drawer-spacing) / 2); // 1rem (16px) } @@ -44,10 +46,9 @@ } @include defaultDropShadow(); - user-select: text; - -webkit-user-select: text; // Safari / Touch fix + user-select: text; // Safari / Touch fix border: none; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-tap-highlight-color: rgb(0 0 0 / 0%); &--auto-fullscreen { @include allBelow(small) { @@ -83,13 +84,16 @@ position: relative; z-index: 1; } + &--spacing &__content { @include drawerSpacing(); } + &__align--center &__content { align-items: center; text-align: center; } + &__align--right &__content { align-items: flex-end; text-align: right; @@ -118,19 +122,24 @@ animation: show-drawer var(--modal-animation-duration) ease-out forwards; } + // Animations in html:not([data-visual-test]) &--left { transform: translate3d(-20rem, 0, 0); } + html:not([data-visual-test]) &--right { transform: translate3d(20rem, 0, 0); } + html:not([data-visual-test]) &--top { transform: translate3d(0, -20rem, 0); } + html:not([data-visual-test]) &--bottom { transform: translate3d(0, 20rem, 0); } + // Animations out html:not([data-visual-test]) &--hide#{&}--left { animation: hide-drawer-left var(--modal-animation-duration) ease-in-out @@ -148,9 +157,11 @@ animation: hide-drawer-bottom var(--modal-animation-duration) ease-in-out forwards; } + &--no-animation { animation-duration: 0ms !important; } + @include allBelow(small) { &--no-animation-on-mobile { animation-duration: 0ms !important; @@ -176,13 +187,16 @@ & &__header [class*='dnb-h--'], & &__header &__title { padding: 0; + &:not([class*='__top']) { margin-top: 0; } + &:not([class*='__bottom']) { margin-bottom: 0; } } + & &__header { &::after { top: -500%; @@ -192,6 +206,7 @@ &--spacing &__header { @include drawerSpacing(); + .dnb-tabs { margin-top: var(--drawer-spacing); } @@ -201,7 +216,7 @@ padding-bottom: calc(var(--drawer-spacing) * 2); margin-bottom: calc(var(--drawer-spacing-minus) * 2); - @include IS_SAFARI_MOBILE { + @include IS_SAFARI_MOBILE () { padding-bottom: calc(var(--drawer-spacing-minus) * 8); } } @@ -220,6 +235,7 @@ // on large screens margin: var(--drawer-spacing) 0; + @include drawerSpacing(); } &--spacing &__navigation.dnb-section#{&}__navigation--sticky { @@ -240,6 +256,7 @@ @include defaultDropShadow(); } } + // is this correct? & &__navigation:not(#{&}__navigation--sticky) { &::after { diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap index 4da6d6ea487..5837273c1e3 100644 --- a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap +++ b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap @@ -1410,7 +1410,7 @@ exports[`Dropdown scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1420,10 +1420,10 @@ exports[`Dropdown scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1499,7 +1499,7 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1509,10 +1509,10 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1800,6 +1800,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -1985,7 +1986,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -2040,7 +2043,6 @@ button.dnb-button::-moz-focus-inner { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -2203,7 +2205,6 @@ button .dnb-form-status__text { position: relative; z-index: 1; user-select: none; - -webkit-user-select: none; width: 100%; } .dnb-dropdown__trigger.dnb-button { diff --git a/packages/dnb-eufemia/src/components/dropdown/style/deps.scss b/packages/dnb-eufemia/src/components/dropdown/style/deps.scss index 33b6fe07690..0e55c8f94c6 100644 --- a/packages/dnb-eufemia/src/components/dropdown/style/deps.scss +++ b/packages/dnb-eufemia/src/components/dropdown/style/deps.scss @@ -4,10 +4,8 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../icon/style/deps.scss'; @import '../../button/style/deps.scss'; @import '../../form-label/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-dropdown.scss'; diff --git a/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss b/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss index b36c7093330..dfeb039d478 100644 --- a/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss +++ b/packages/dnb-eufemia/src/components/dropdown/style/dnb-dropdown.scss @@ -83,9 +83,7 @@ &__trigger { position: relative; z-index: 1; - - user-select: none; - -webkit-user-select: none; // Safari / Touch fix + user-select: none; // Safari / Touch fix width: 100%; @@ -94,6 +92,7 @@ border-radius: var(--dropdown-border-radius); } } + &--is-popup &__trigger.dnb-button { padding: 0; border-radius: 50%; @@ -122,14 +121,17 @@ text-overflow: inherit; } } + &--icon-position-left &__text { order: 2; padding-right: 0; padding-left: var(--dropdown-text-padding); } + &--icon-position-left &__icon { order: 1; } + &--icon-position-right &__text { padding-right: var(--dropdown-text-padding); } @@ -137,6 +139,7 @@ &--independent-width &__shell { width: auto; } + @media screen and (max-width: 40em) { &--action-menu &__trigger.dnb-button { padding-left: 0.5rem; @@ -145,11 +148,13 @@ border-radius: 50%; } } + @include allAbove(small) { &--action-menu &__shell &__text { padding: 0 0.5rem; } } + @media screen and (max-width: 40em) { &--action-menu &__shell &__text { width: 0; @@ -162,24 +167,30 @@ ~ .dnb-drawer-list__root--portal { left: -0.5rem; } + &--icon-position-right .dnb-button--tertiary ~ .dnb-drawer-list__root--portal { left: 0.5rem; } + .dnb-button--tertiary.dnb-button--active { box-shadow: none; } + .dnb-button--tertiary .dnb-button__text { margin: 0 0.5rem; + &::after { bottom: 0; // ensure that we see the underline, else it is behind the overflow hidden } } + &--icon-position-left .dnb-button--tertiary &__text, &--icon-position-right .dnb-button--tertiary &__text { padding: 0; } + .dnb-button--tertiary:focus::before { left: 0 !important; right: 0 !important; @@ -192,12 +203,14 @@ width: var(--dropdown-height); height: var(--dropdown-height); } + &--is-popup &__icon { width: 100%; } &--is-popup#{&}--scroll &__options { min-height: 1rem; } + &--is-popup .dnb-drawer-list__root { width: var(--dropdown-width); // only a fallback } @@ -225,6 +238,7 @@ &--small &__trigger { height: var(--dropdown-height--small); } + &--small, &--small &__trigger.dnb-button { line-height: var(--dropdown-height--small); @@ -235,6 +249,7 @@ &--medium &__trigger { height: var(--dropdown-height--medium); } + &--medium, &--medium &__trigger.dnb-button { line-height: var(--dropdown-height--medium); @@ -245,10 +260,12 @@ &--large &__trigger { height: var(--dropdown-height--large); } + &--large, &--large &__trigger.dnb-button { line-height: var(--dropdown-height--large); } + &--large &__trigger.dnb-button &__text { line-height: var(--line-height-basis); } @@ -257,6 +274,7 @@ margin-right: 1rem; line-height: var(--line-height-basis); } + @include formLabelWrap(); // make full width @@ -264,32 +282,38 @@ display: flex; flex-grow: 1; } + &--stretch & { &__inner { flex-grow: 1; } + &__row, &__inner, &__shell { width: 100%; } } + &--stretch .dnb-form-label + &__inner { width: auto; } &--vertical#{&}--stretch &__inner { width: 100%; } + .dnb-form-row--horizontal &--stretch { width: 100%; } label + &[class*='__form-status'] { vertical-align: top; + .dnb-dropdown__shell { top: -0.375rem; } } + &__inner > .dnb-form-status { order: 2; margin-top: 0.5rem; @@ -303,6 +327,7 @@ &:not(&--vertical)[class*='__status'] { align-items: flex-start; + > .dnb-form-label { // vertical align the current font margin-top: 0.25rem; @@ -320,6 +345,7 @@ > .dnb-form-label { margin-bottom: 0.5rem; } + &__helper { display: none; } diff --git a/packages/dnb-eufemia/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss b/packages/dnb-eufemia/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss index 15adbc37028..a6f02dd9573 100644 --- a/packages/dnb-eufemia/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss @@ -16,6 +16,7 @@ &__trigger[disabled] { color: var(--color-black-55); background-color: var(--color-black-3); + &:not(.dnb-button--tertiary) { @include fakeBorder(var(--color-black-55)); } @@ -31,13 +32,17 @@ // error status &__status--error:not(#{&}--opened) &__trigger { @include fakeBorder(var(--color-fire-red)); + @include hover() { color: var(--color-fire-red); + @include fakeBorder(var(--color-fire-red), 0.125rem); + & .dnb-dropdown__icon .dnb-icon { color: var(--color-fire-red); } } + @include active() { color: var(--color-fire-red); background-color: var(--color-fire-red-8); diff --git a/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap b/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap index f9e0c282224..ac3150d6870 100644 --- a/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap +++ b/packages/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.js.snap @@ -77,7 +77,6 @@ exports[`FormLabel scss have to match snapshot 1`] = ` } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { diff --git a/packages/dnb-eufemia/src/components/form-label/style/deps.scss b/packages/dnb-eufemia/src/components/form-label/style/deps.scss index ec4c82c692f..77d93ca91f0 100644 --- a/packages/dnb-eufemia/src/components/form-label/style/deps.scss +++ b/packages/dnb-eufemia/src/components/form-label/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-form-label.scss'; diff --git a/packages/dnb-eufemia/src/components/form-label/style/dnb-form-label.scss b/packages/dnb-eufemia/src/components/form-label/style/dnb-form-label.scss index a5bc5151325..96f8d317202 100644 --- a/packages/dnb-eufemia/src/components/form-label/style/dnb-form-label.scss +++ b/packages/dnb-eufemia/src/components/form-label/style/dnb-form-label.scss @@ -32,14 +32,15 @@ // } &[for]:not([disabled]) { - user-select: none; - -webkit-user-select: none; // Safari / Touch fix + user-select: none; // Safari / Touch fix cursor: pointer; } + &[disabled] { cursor: not-allowed; } } + legend.dnb-form-label { display: inline-block; } diff --git a/packages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-ui.scss b/packages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-ui.scss index 0a4376dd32f..a7c75764fc1 100644 --- a/packages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-ui.scss @@ -5,6 +5,7 @@ .dnb-form-label { color: var(--color-black-80); + &[for]:not([disabled]):hover { color: var(--color-sea-green); } diff --git a/packages/dnb-eufemia/src/components/form-row/style/deps.scss b/packages/dnb-eufemia/src/components/form-row/style/deps.scss index f55d8a93c1b..c12752fdc14 100644 --- a/packages/dnb-eufemia/src/components/form-row/style/deps.scss +++ b/packages/dnb-eufemia/src/components/form-row/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-form-row.scss'; diff --git a/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss b/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss index 1e07558f46e..f580f2a0b6b 100644 --- a/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss +++ b/packages/dnb-eufemia/src/components/form-row/style/dnb-form-row.scss @@ -51,11 +51,14 @@ @media screen and (max-width: 40em) { flex-direction: column; align-items: flex-start; + & > .dnb-form-label { margin-bottom: 0.5rem; } + & > .dnb-form-row__content { flex-direction: column; + & > .dnb-form-label { margin-top: 1rem; } @@ -99,12 +102,14 @@ > .dnb-form-status { margin: 0.5rem 0; } + > .dnb-form-row__label { &--vertical { display: flex; flex-direction: column; align-items: flex-start; } + &--vertical ~ .dnb-form-row__content { grid-column: column1-start / column1-end; } diff --git a/packages/dnb-eufemia/src/components/form-set/style/deps.scss b/packages/dnb-eufemia/src/components/form-set/style/deps.scss index 2a0d2d4d702..9507327bde4 100644 --- a/packages/dnb-eufemia/src/components/form-set/style/deps.scss +++ b/packages/dnb-eufemia/src/components/form-set/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-form-set.scss'; diff --git a/packages/dnb-eufemia/src/components/form-status/style/deps.scss b/packages/dnb-eufemia/src/components/form-status/style/deps.scss index d2a713f7e20..68d6ed0d009 100644 --- a/packages/dnb-eufemia/src/components/form-status/style/deps.scss +++ b/packages/dnb-eufemia/src/components/form-status/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-form-status.scss'; diff --git a/packages/dnb-eufemia/src/components/form-status/style/dnb-form-status.scss b/packages/dnb-eufemia/src/components/form-status/style/dnb-form-status.scss index cf8c93e1b5e..74e7e40f3be 100644 --- a/packages/dnb-eufemia/src/components/form-status/style/dnb-form-status.scss +++ b/packages/dnb-eufemia/src/components/form-status/style/dnb-form-status.scss @@ -26,10 +26,12 @@ opacity: 0; } + &--is-animating { overflow: hidden; // because of animation width: auto; } + &--disappear, &--hidden { margin: 0 !important; @@ -50,6 +52,7 @@ padding: 0.625rem 1rem; cursor: text; + button & { cursor: inherit; } @@ -81,6 +84,7 @@ padding-top: 1.125rem; padding-bottom: 1.125rem; } + &__size--large &__shell > .dnb-icon { margin-top: 0.6666666em; margin-bottom: 0.6666666em; @@ -101,9 +105,11 @@ &--stretch { flex-grow: 1; } + &--stretch &__shell { width: 100%; } + &--stretch &__text { max-width: 47rem; } diff --git a/packages/dnb-eufemia/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss b/packages/dnb-eufemia/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss index 324ed8b8e0e..c3616d7d596 100644 --- a/packages/dnb-eufemia/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/form-status/style/themes/dnb-form-status-theme-ui.scss @@ -13,14 +13,17 @@ &--error &__shell { background-color: var(--color-fire-red-8); + & > .dnb-icon { color: var(--color-fire-red); border: none; } } + &--warn &__shell { background-color: var(--color-sand-yellow); } + &--info &__shell { background-color: var(--color-pistachio); } @@ -63,6 +66,7 @@ background-color: var(--color-fire-red-8); border-color: var(--color-fire-red); } + 35% { color: var(--color-white); background-color: var(--color-fire-red); diff --git a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap index 487b2c57bb4..6c8800db4c1 100644 --- a/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap +++ b/packages/dnb-eufemia/src/components/global-error/__tests__/__snapshots__/GlobalError.test.js.snap @@ -49,7 +49,7 @@ exports[`GlobalError scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -59,10 +59,10 @@ exports[`GlobalError scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -350,6 +350,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -535,7 +536,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -603,7 +606,7 @@ button.dnb-button::-moz-focus-inner { } .dnb-global-error__gfx { margin-top: 9rem; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; } @media screen and (max-width: 90em) { .dnb-global-error__gfx { diff --git a/packages/dnb-eufemia/src/components/global-error/style/deps.scss b/packages/dnb-eufemia/src/components/global-error/style/deps.scss index aee496aa3bc..42a44fbde49 100644 --- a/packages/dnb-eufemia/src/components/global-error/style/deps.scss +++ b/packages/dnb-eufemia/src/components/global-error/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; - @import './dnb-global-error.scss'; diff --git a/packages/dnb-eufemia/src/components/global-error/style/dnb-global-error.scss b/packages/dnb-eufemia/src/components/global-error/style/dnb-global-error.scss index 540d35c57e9..478880f8758 100644 --- a/packages/dnb-eufemia/src/components/global-error/style/dnb-global-error.scss +++ b/packages/dnb-eufemia/src/components/global-error/style/dnb-global-error.scss @@ -25,6 +25,7 @@ max-width: var(--layout-large); padding: var(--spacing-large); + @media screen and (max-width: 40em) { padding: 0 var(--spacing-x-small); } @@ -41,6 +42,7 @@ z-index: 1; // make sure to be above the image on small screens top: var(--spacing-large); left: var(--spacing-large); + @media screen and (max-width: 90em) { left: var(--spacing-x-small); } @@ -48,10 +50,12 @@ &__gfx { margin-top: 9rem; + @media screen and (max-width: 90em) { margin-top: 8vw; margin-top: calc(4vw + 4vh); } + @media screen and (max-width: 40em) { margin-top: 0; transform: scale(0.8); @@ -62,8 +66,9 @@ height: calc(var(--data-height, 100%) / 16 * 1em); } - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; } + .dnb-h--xx-large.dnb-space__top--xx-large.dnb-space__top--x-small { @media screen and (max-width: 40em) { margin-top: 0; diff --git a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap index 149b0e6282f..c6d8df11419 100644 --- a/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap +++ b/packages/dnb-eufemia/src/components/global-status/__tests__/__snapshots__/GlobalStatus.test.js.snap @@ -9,7 +9,7 @@ exports[`GlobalStatus scss have to match default theme snapshot 1`] = ` * Utilities */ .dnb-global-status:not(.dnb-global-status--no-animation).dnb-global-status--fade-in.dnb-global-status.dnb-section::after { - box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, 0 0.0625rem 0 0 var(--color-black-80), 100vw 0.0625rem 0 0 var(--color-black-80); + box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor, 0 0.0625rem 0 0 var(--color-black-80), 100vw 0.0625rem 0 0 var(--color-black-80); } .dnb-global-status__icon { font-size: 1rem; @@ -70,7 +70,7 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -80,10 +80,10 @@ exports[`GlobalStatus scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -371,6 +371,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -556,7 +557,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -605,8 +608,8 @@ button.dnb-button::-moz-focus-inner { width: 100vw; height: 100%; color: var(--color-mint-green-12); - background-color: currentColor; - box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor; + background-color: currentcolor; + box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor; } .dnb-section .dnb-section::after { z-index: -14; @@ -696,10 +699,7 @@ button.dnb-button::-moz-focus-inner { .dnb-global-status__title.dnb-p { display: flex; align-items: center; - padding-top: 1rem; - padding-bottom: 1rem; - padding-right: 5rem; - padding-left: 2.5rem; + padding: 1rem 5rem 1rem 2.5rem; margin-bottom: 0.5rem; } .dnb-spacing .dnb-global-status__title.dnb-p, .dnb-spacing .dnb-global-status__title.dnb-p:not([class*=dnb-space]) { diff --git a/packages/dnb-eufemia/src/components/global-status/style/deps.scss b/packages/dnb-eufemia/src/components/global-status/style/deps.scss index 5ad7d846852..db147630e41 100644 --- a/packages/dnb-eufemia/src/components/global-status/style/deps.scss +++ b/packages/dnb-eufemia/src/components/global-status/style/deps.scss @@ -4,8 +4,6 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; @import '../../section/style/deps.scss'; - @import './dnb-global-status.scss'; diff --git a/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss b/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss index 23c054fa73b..9e61058b2f2 100644 --- a/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss +++ b/packages/dnb-eufemia/src/components/global-status/style/dnb-global-status.scss @@ -27,10 +27,12 @@ transition: height 800ms var(--global-status-easing), opacity 600ms var(--global-status-easing); } + &--hidden &__shell { height: 0; opacity: 0; } + &--no-animation &__shell, html[data-visual-test] &__shell { transition-duration: 1ms !important; @@ -54,10 +56,7 @@ display: flex; align-items: center; - padding-top: 1rem; - padding-bottom: 1rem; - padding-right: 5rem; - padding-left: 2.5rem; + padding: 1rem 5rem 1rem 2.5rem; margin-bottom: 0.5rem; } @@ -86,6 +85,7 @@ } } } + &__icon { position: absolute; top: 0; @@ -93,6 +93,7 @@ margin-top: 1.5rem; } + &__close-button, &__close-button.dnb-button--tertiary { position: absolute; @@ -100,6 +101,7 @@ right: 1rem; // also because of the focus-ring left: auto; } + .dnb-modal__content__inner &__close-button { right: 0; } diff --git a/packages/dnb-eufemia/src/components/global-status/style/themes/dnb-global-status-theme-ui.scss b/packages/dnb-eufemia/src/components/global-status/style/themes/dnb-global-status-theme-ui.scss index 4439b92e27c..64c709ecc48 100644 --- a/packages/dnb-eufemia/src/components/global-status/style/themes/dnb-global-status-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/global-status/style/themes/dnb-global-status-theme-ui.scss @@ -7,8 +7,8 @@ .dnb-global-status { &:not(#{&}--no-animation)#{&}--fade-in#{&}.dnb-section::after { - box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, - 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, + box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, + 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor, 0 0.0625rem 0 0 var(--color-black-80), 100vw 0.0625rem 0 0 var(--color-black-80); } @@ -16,6 +16,7 @@ &__icon { font-size: 1rem; } + &__message { &__content { color: var(--color-black-80); @@ -29,6 +30,7 @@ &__content .dnb-hr { color: var(--color-fire-red); } + &--info &__content .dnb-hr { color: var(--color-sea-green); } diff --git a/packages/dnb-eufemia/src/components/heading/style/deps.scss b/packages/dnb-eufemia/src/components/heading/style/deps.scss index fe61d882de2..750844a7935 100644 --- a/packages/dnb-eufemia/src/components/heading/style/deps.scss +++ b/packages/dnb-eufemia/src/components/heading/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-heading.scss'; diff --git a/packages/dnb-eufemia/src/components/heading/style/dnb-heading.scss b/packages/dnb-eufemia/src/components/heading/style/dnb-heading.scss index e917a94a8ac..05f2f39f80a 100644 --- a/packages/dnb-eufemia/src/components/heading/style/dnb-heading.scss +++ b/packages/dnb-eufemia/src/components/heading/style/dnb-heading.scss @@ -8,13 +8,16 @@ .dnb-heading { &__debug { color: var(--color-black-20); + // color: var(--color-fire-red); font-weight: var(--font-weight-basis); + .dnb-code { color: var(--color-black); font-size: 12px !important; } } + &__context { display: block; padding: 1rem 0 2rem; diff --git a/packages/dnb-eufemia/src/components/height-animation/style/deps.scss b/packages/dnb-eufemia/src/components/height-animation/style/deps.scss index 3e427578077..2e643710ee7 100644 --- a/packages/dnb-eufemia/src/components/height-animation/style/deps.scss +++ b/packages/dnb-eufemia/src/components/height-animation/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-height-animation.scss'; diff --git a/packages/dnb-eufemia/src/components/height-animation/style/dnb-height-animation.scss b/packages/dnb-eufemia/src/components/height-animation/style/dnb-height-animation.scss index 7133fa706f1..48ab84cdcfa 100644 --- a/packages/dnb-eufemia/src/components/height-animation/style/dnb-height-animation.scss +++ b/packages/dnb-eufemia/src/components/height-animation/style/dnb-height-animation.scss @@ -11,6 +11,7 @@ &--animating { overflow: hidden; } + &--show-overflow { overflow: visible; } diff --git a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap index c5abe4be1c2..53fbd986f95 100644 --- a/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/help-button/__tests__/__snapshots__/HelpButton.test.tsx.snap @@ -49,7 +49,7 @@ exports[`HelpButton scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -59,10 +59,10 @@ exports[`HelpButton scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -350,6 +350,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -535,7 +536,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { diff --git a/packages/dnb-eufemia/src/components/help-button/style/deps.scss b/packages/dnb-eufemia/src/components/help-button/style/deps.scss index 7a7364b1153..64b21157b0b 100644 --- a/packages/dnb-eufemia/src/components/help-button/style/deps.scss +++ b/packages/dnb-eufemia/src/components/help-button/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; - @import './dnb-help-button.scss'; diff --git a/packages/dnb-eufemia/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-eufemia/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap index 4d7b1c0249e..bab71e9a407 100644 --- a/packages/dnb-eufemia/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap +++ b/packages/dnb-eufemia/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap @@ -87,7 +87,7 @@ exports[`Icon scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -97,10 +97,10 @@ exports[`Icon scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; diff --git a/packages/dnb-eufemia/src/components/icon/style/deps.scss b/packages/dnb-eufemia/src/components/icon/style/deps.scss index 1f1b500b178..a681af30f24 100644 --- a/packages/dnb-eufemia/src/components/icon/style/deps.scss +++ b/packages/dnb-eufemia/src/components/icon/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-icon.scss'; diff --git a/packages/dnb-eufemia/src/components/icon/style/dnb-icon.scss b/packages/dnb-eufemia/src/components/icon/style/dnb-icon.scss index 575a47587a0..8cade98e75e 100644 --- a/packages/dnb-eufemia/src/components/icon/style/dnb-icon.scss +++ b/packages/dnb-eufemia/src/components/icon/style/dnb-icon.scss @@ -25,7 +25,7 @@ svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } @@ -33,6 +33,7 @@ svg[width='100%'] { width: inherit; } + svg[height='100%'] { height: inherit; } @@ -40,38 +41,47 @@ // color &--inherit-color svg:not([fill]), &--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } + &--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } // sizes &--small { font-size: 0.75rem; } + &--default { font-size: 1rem; } + &--medium { font-size: 1.5rem; } + &--large { font-size: 2rem; } + &--x-large { font-size: 2.5rem; } + &--xx-large { font-size: 3rem; } + &--custom-size { width: auto; // only to feed the svg height: auto; // only to feed the svg } + &--auto { font-size: 1em; } + &--auto > &--wrapper { display: inline-flex; align-items: center; diff --git a/packages/dnb-eufemia/src/components/icon/style/themes/dnb-icon-theme-ui.scss b/packages/dnb-eufemia/src/components/icon/style/themes/dnb-icon-theme-ui.scss index ede094d9ec5..b1663be99e6 100644 --- a/packages/dnb-eufemia/src/components/icon/style/themes/dnb-icon-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/icon/style/themes/dnb-icon-theme-ui.scss @@ -23,7 +23,7 @@ margin: auto; border-radius: 50%; border: 0.0875rem solid; // use 1.4px instead of 1.5 so webkit is rounding down - border-color: currentColor; + border-color: currentcolor; } } } diff --git a/packages/dnb-eufemia/src/components/info-card/__tests__/__snapshots__/InfoCard.test.tsx.snap b/packages/dnb-eufemia/src/components/info-card/__tests__/__snapshots__/InfoCard.test.tsx.snap index d4ba497afba..1e2e7028143 100644 --- a/packages/dnb-eufemia/src/components/info-card/__tests__/__snapshots__/InfoCard.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/info-card/__tests__/__snapshots__/InfoCard.test.tsx.snap @@ -56,8 +56,7 @@ exports[`InfoCard InfoCard scss have to match snapshot 1`] = ` } .dnb-info-card__buttons { display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; } .dnb-info-card--centered .dnb-info-card__buttons { flex-direction: column; diff --git a/packages/dnb-eufemia/src/components/info-card/style/deps.scss b/packages/dnb-eufemia/src/components/info-card/style/deps.scss index 6725976225e..c321be05009 100644 --- a/packages/dnb-eufemia/src/components/info-card/style/deps.scss +++ b/packages/dnb-eufemia/src/components/info-card/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-info-card.scss'; diff --git a/packages/dnb-eufemia/src/components/info-card/style/dnb-info-card.scss b/packages/dnb-eufemia/src/components/info-card/style/dnb-info-card.scss index c60187471f0..c5abfac04e8 100644 --- a/packages/dnb-eufemia/src/components/info-card/style/dnb-info-card.scss +++ b/packages/dnb-eufemia/src/components/info-card/style/dnb-info-card.scss @@ -58,8 +58,7 @@ &__buttons { display: flex; - flex-direction: row; - flex-wrap: wrap; + flex-flow: row wrap; } &--centered &__buttons { diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index d55e821053b..070e5401f6a 100644 --- a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap @@ -284,7 +284,7 @@ exports[`InputMasked scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -294,10 +294,10 @@ exports[`InputMasked scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -585,6 +585,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -770,7 +771,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -819,7 +822,7 @@ button.dnb-button::-moz-focus-inner { .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -829,10 +832,10 @@ button.dnb-button::-moz-focus-inner { height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1032,7 +1035,6 @@ html[data-visual-test] .dnb-tooltip--hide { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -1185,7 +1187,6 @@ button .dnb-form-status__text { } .dnb-input__input[disabled] { user-select: none; - -webkit-user-select: none; opacity: 1; } .dnb-input__shell, .dnb-input__input { diff --git a/packages/dnb-eufemia/src/components/input-masked/style/deps.scss b/packages/dnb-eufemia/src/components/input-masked/style/deps.scss index 316a8ec9f44..9ab611dc19e 100644 --- a/packages/dnb-eufemia/src/components/input-masked/style/deps.scss +++ b/packages/dnb-eufemia/src/components/input-masked/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../input/style/deps.scss'; - @import './dnb-input-masked.scss'; diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap index fc72b171cb1..5ec20904407 100644 --- a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap +++ b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.js.snap @@ -737,7 +737,7 @@ exports[`Input scss have to match default theme snapshot 1`] = ` color: var(--color-sea-green); } .dnb-input[data-input-state=disabled] .dnb-input__shell { - -webkit-text-fill-color: currentColor; + -webkit-text-fill-color: currentcolor; --border-color: var(--color-black-55); box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color); /* iOS fix - because "inset" works not fine with border-radius */ @@ -782,10 +782,10 @@ exports[`Input scss have to match default theme snapshot 1`] = ` box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } -html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):hover, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):hover::after, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):focus, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):focus::after { +html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):hover, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):hover::after, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):focus, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):focus::after { background-color: var(--color-fire-red); } -html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):hover:active, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text):not([disabled]):focus:active { +html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):hover:active, html:not([data-whatintent=touch]) .dnb-input__status--error .dnb-input__submit-button__button.dnb-button--secondary:not(.dnb-input__status--error .dnb-input__submit-button__button--has-text, [disabled]):focus:active { color: var(--color-white); } .dnb-input__status--error .dnb-input__icon { @@ -850,7 +850,7 @@ exports[`Input scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -860,10 +860,10 @@ exports[`Input scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1151,6 +1151,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -1336,7 +1337,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -1385,7 +1388,7 @@ button.dnb-button::-moz-focus-inner { .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1395,10 +1398,10 @@ button.dnb-button::-moz-focus-inner { height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1598,7 +1601,6 @@ html[data-visual-test] .dnb-tooltip--hide { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -1751,7 +1753,6 @@ button .dnb-form-status__text { } .dnb-input__input[disabled] { user-select: none; - -webkit-user-select: none; opacity: 1; } .dnb-input__shell, .dnb-input__input { diff --git a/packages/dnb-eufemia/src/components/input/style/deps.scss b/packages/dnb-eufemia/src/components/input/style/deps.scss index b6981ebd78b..d4aa015dca2 100644 --- a/packages/dnb-eufemia/src/components/input/style/deps.scss +++ b/packages/dnb-eufemia/src/components/input/style/deps.scss @@ -4,11 +4,9 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; @import '../../icon/style/deps.scss'; @import '../../tooltip/style/deps.scss'; @import '../../form-label/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-input.scss'; diff --git a/packages/dnb-eufemia/src/components/input/style/dnb-input.scss b/packages/dnb-eufemia/src/components/input/style/dnb-input.scss index 03432c92d11..eecf5fff30c 100644 --- a/packages/dnb-eufemia/src/components/input/style/dnb-input.scss +++ b/packages/dnb-eufemia/src/components/input/style/dnb-input.scss @@ -56,8 +56,7 @@ } &__input[disabled] { - user-select: none; - -webkit-user-select: none; // Safari / Touch fix + user-select: none; // Safari / Touch fix opacity: 1; // iOS fix } @@ -117,6 +116,7 @@ &__input::-webkit-search-cancel-button { display: none; } + &__input::-ms-clear { display: none; } @@ -126,6 +126,7 @@ cursor: pointer; outline: none; color: var(--color-sea-green); + &:active, &:hover { color: var(--color-emerald-green); @@ -138,6 +139,7 @@ &--has-clear-button &__input { padding-right: calc(var(--input-padding) * 2.5); } + // Because of password managers &--password &__placeholder, &--password &__input { @@ -147,14 +149,17 @@ &::-ms-clear { display: none; } + // Hiding "password reveal" button in Ms Edge &::-ms-reveal { display: none; } } + &--password &__placeholder { padding-right: 4rem; } + &--password &__input { font-family: var(--font-family-monospace); } @@ -191,6 +196,7 @@ > .dnb-form-label { line-height: var(--line-height-basis); } + @include formLabelWrap(); &:not(&--vertical)[class*='__status'] { @@ -204,16 +210,19 @@ &--small { line-height: var(--input-height--small); + .dnb-input__shell, .dnb-input__input { height: var(--input-height--small); } + .dnb-input__placeholder, .dnb-input__input { padding-left: var(--input-padding--small); padding-right: var(--input-padding--small); font-size: var(--input-font-size--small); } + .dnb-input__submit-element { margin-left: calc(1px - 1px - var(--input-height--small)); @@ -233,6 +242,7 @@ &--medium { line-height: var(--input-height--medium); + .dnb-input__shell, .dnb-input__input { height: var(--input-height--medium); @@ -244,6 +254,7 @@ padding-right: var(--input-padding--medium); font-size: var(--input-font-size--medium); } + .dnb-input__submit-element { margin-left: calc(1px - 1px - var(--input-height--medium)); @@ -263,16 +274,19 @@ &--large { line-height: var(--input-height--large); + .dnb-input__shell, .dnb-input__input { height: var(--input-height--large); } + .dnb-input__placeholder, .dnb-input__input { padding-left: var(--input-padding--large); padding-right: var(--input-padding--large); font-size: var(--input-font-size--large); } + .dnb-input__submit-element { margin-left: calc(1px - 1px - var(--input-height--large)); @@ -302,6 +316,7 @@ &__align--center &__input { text-align: center; } + &__align--right &__placeholder, &__align--right &__input { text-align: right; @@ -311,6 +326,7 @@ &--clear.dnb-input__submit-element { opacity: 0; transition: opacity 200ms ease-in-out; + .dnb-button { width: var(--input-height--small); height: var(--input-height--small); @@ -326,12 +342,14 @@ } } } + &--small &--clear.dnb-input__submit-element { .dnb-button { width: 1rem; height: 1rem; } } + &--medium &--clear, &--large &--clear { &.dnb-input__submit-element { @@ -341,9 +359,11 @@ } } } + &[data-has-content='true'] &--clear { opacity: 1; } + &--has-submit-element &--clear.dnb-input__submit-element { margin-right: 2.5rem; } @@ -373,21 +393,25 @@ display: flex; flex-grow: 1; } + &--stretch & { &__inner { flex-grow: 1; } + &__inner, &__shell { width: 100%; } } + &--stretch .dnb-form-label + &__inner { width: auto; } &--vertical#{&}--stretch &__inner { width: 100%; } + .dnb-form-row--horizontal &--stretch { width: 100%; } @@ -403,6 +427,7 @@ bottom: 0; margin: auto; } + &--icon-position-right &__icon { order: 1; left: auto; diff --git a/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss b/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss index bea3783ed28..f1c1119a2f1 100644 --- a/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/input/style/themes/dnb-input-theme-ui.scss @@ -34,7 +34,8 @@ .dnb-icon { color: var(--color-black-55); } - -webkit-text-fill-color: currentColor; + -webkit-text-fill-color: currentcolor; + @include fakeBorder( var(--color-black-55), var(--input-border-width), @@ -65,20 +66,23 @@ &__status--error#{&}:not([data-input-state='disabled']):hover &__shell { @include fakeBorder(var(--color-fire-red), 0.125rem); } + &__status--error &__submit-button { html:not([data-whatintent='touch']) - &__button.dnb-button--secondary:not(&__button--has-text):not([disabled]):hover, + &__button.dnb-button--secondary:not(&__button--has-text, [disabled]):hover, html:not([data-whatintent='touch']) - &__button.dnb-button--secondary:not(&__button--has-text):not([disabled]):focus { + &__button.dnb-button--secondary:not(&__button--has-text, [disabled]):focus { &, &::after { background-color: var(--color-fire-red); } + &:active { color: var(--color-white); } } } + &__status--error &__icon { color: var(--color-fire-red); } @@ -92,9 +96,11 @@ &__placeholder { color: var(--color-black-55); } + &[data-input-state='focus'] &__placeholder { display: none; } + &--keep-placeholder &[data-input-state='focus'] &__placeholder { display: block; color: var(--color-black-20); diff --git a/packages/dnb-eufemia/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap b/packages/dnb-eufemia/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap index 9d80cd189c0..fe6f7d498d0 100644 --- a/packages/dnb-eufemia/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap +++ b/packages/dnb-eufemia/src/components/logo/__tests__/__snapshots__/Logo.test.js.snap @@ -66,11 +66,11 @@ exports[`Logo scss have to match snapshot 1`] = ` height: 1em; } .dnb-logo--inherit-color { - color: currentColor; + color: currentcolor; } .dnb-logo svg { - fill: currentColor; - shape-rendering: geometricPrecision; + fill: currentcolor; + shape-rendering: geometricprecision; } .dnb-logo--has-size { width: auto; @@ -79,7 +79,7 @@ exports[`Logo scss have to match snapshot 1`] = ` .dnb-logo--inherit-size { height: inherit; } -.dnb-logo svg:not([width]):not([height]) { +.dnb-logo svg:not([width], [height]) { width: inherit; height: inherit; }" diff --git a/packages/dnb-eufemia/src/components/logo/style/deps.scss b/packages/dnb-eufemia/src/components/logo/style/deps.scss index 68fe9b8b436..1bef4a51a5c 100644 --- a/packages/dnb-eufemia/src/components/logo/style/deps.scss +++ b/packages/dnb-eufemia/src/components/logo/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-logo.scss'; diff --git a/packages/dnb-eufemia/src/components/logo/style/dnb-logo.scss b/packages/dnb-eufemia/src/components/logo/style/dnb-logo.scss index 33cbe1015b1..0d52b2ff59a 100644 --- a/packages/dnb-eufemia/src/components/logo/style/dnb-logo.scss +++ b/packages/dnb-eufemia/src/components/logo/style/dnb-logo.scss @@ -14,12 +14,14 @@ ); // for vertical alignment, we have to have no line-height color: var(--color-sea-green); + &--inherit-color { - color: currentColor; + color: currentcolor; } + svg { - fill: currentColor; - shape-rendering: geometricPrecision; + fill: currentcolor; + shape-rendering: geometricprecision; } height: 1em; @@ -28,11 +30,12 @@ width: auto; height: auto; } + &--inherit-size { height: inherit; } - svg:not([width]):not([height]) { + svg:not([width], [height]) { width: inherit; height: inherit; } diff --git a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap index d04027924f3..aed14948743 100644 --- a/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/modal/__tests__/__snapshots__/Modal.test.tsx.snap @@ -1364,7 +1364,7 @@ exports[`Modal scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1374,10 +1374,10 @@ exports[`Modal scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1665,6 +1665,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -1850,7 +1851,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -1978,6 +1981,7 @@ button.dnb-button::-moz-focus-inner { html[data-dnb-modal-active] { user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; } @@ -2002,6 +2006,7 @@ html[data-dnb-modal-active] { width: 100%; height: 100%; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; } @media screen and (max-width: 40em) { diff --git a/packages/dnb-eufemia/src/components/modal/style/deps.scss b/packages/dnb-eufemia/src/components/modal/style/deps.scss index 33c4ab48f21..6dcda7c9997 100644 --- a/packages/dnb-eufemia/src/components/modal/style/deps.scss +++ b/packages/dnb-eufemia/src/components/modal/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../help-button/style/deps.scss'; - @import './dnb-modal.scss'; diff --git a/packages/dnb-eufemia/src/components/modal/style/dnb-modal.scss b/packages/dnb-eufemia/src/components/modal/style/dnb-modal.scss index 4ec2259f1b4..a188072c94f 100644 --- a/packages/dnb-eufemia/src/components/modal/style/dnb-modal.scss +++ b/packages/dnb-eufemia/src/components/modal/style/dnb-modal.scss @@ -13,6 +13,8 @@ html[data-dnb-modal-active] { user-select: none; + + /* stylelint-disable-next-line */ -webkit-user-select: none; // Safari / Touch fix } @@ -37,6 +39,8 @@ html[data-dnb-modal-active] { height: 100%; user-select: none; + + /* stylelint-disable-next-line */ -webkit-user-select: none; // Safari / Touch fix &--auto-fullscreen { diff --git a/packages/dnb-eufemia/src/components/modal/style/modal-mixins.scss b/packages/dnb-eufemia/src/components/modal/style/modal-mixins.scss index bc96fb9e27e..5edfe1bb596 100644 --- a/packages/dnb-eufemia/src/components/modal/style/modal-mixins.scss +++ b/packages/dnb-eufemia/src/components/modal/style/modal-mixins.scss @@ -21,16 +21,19 @@ opacity: 0.1; transform: translate3d(0, -1rem, 0); } + to { transform: translate3d(0, 0, 0); opacity: 1; } } + @keyframes hide-modal { from { transform: translate3d(0, 0, 0); opacity: 1; } + to { transform: translate3d(0, 1rem, 0); opacity: 0; @@ -43,41 +46,49 @@ opacity: 1; } } + @keyframes hide-drawer-left { from { transform: translate3d(0, 0, 0); opacity: 1; } + to { transform: translate3d(-20rem, 0, 0); opacity: 0; } } + @keyframes hide-drawer-top { from { transform: translate3d(0, 0, 0); opacity: 1; } + to { transform: translate3d(0, -20rem, 0); opacity: 0; } } + @keyframes hide-drawer-bottom { from { transform: translate3d(0, 0, 0); opacity: 1; } + to { transform: translate3d(0, 20rem, 0); opacity: 0; } } + @keyframes hide-drawer-right { from { transform: translate3d(0, 0, 0); opacity: 1; } + to { transform: translate3d(20rem, 0, 0); opacity: 0; @@ -88,14 +99,17 @@ from { opacity: 0; } + to { opacity: 1; } } + @keyframes hide-modal-overlay { from { opacity: 1; } + to { opacity: 0; } diff --git a/packages/dnb-eufemia/src/components/modal/style/themes/dnb-modal-theme-ui.scss b/packages/dnb-eufemia/src/components/modal/style/themes/dnb-modal-theme-ui.scss index f5aaf2c4a93..35012d21e6f 100644 --- a/packages/dnb-eufemia/src/components/modal/style/themes/dnb-modal-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/modal/style/themes/dnb-modal-theme-ui.scss @@ -6,7 +6,7 @@ @import '../../../../style/core/utilities.scss'; :root { - --modal-overlay-bg: rgba(0, 0, 0, 0.32); + --modal-overlay-bg: rgb(0 0 0 / 32%); } .dnb-modal { diff --git a/packages/dnb-eufemia/src/components/number-format/style/deps.scss b/packages/dnb-eufemia/src/components/number-format/style/deps.scss index db2edb1f7b0..becc47f1d14 100644 --- a/packages/dnb-eufemia/src/components/number-format/style/deps.scss +++ b/packages/dnb-eufemia/src/components/number-format/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../tooltip/style/deps.scss'; - @import './dnb-number-format.scss'; diff --git a/packages/dnb-eufemia/src/components/number-format/style/dnb-number-format.scss b/packages/dnb-eufemia/src/components/number-format/style/dnb-number-format.scss index 3b86cb15da4..77f6eec47ab 100644 --- a/packages/dnb-eufemia/src/components/number-format/style/dnb-number-format.scss +++ b/packages/dnb-eufemia/src/components/number-format/style/dnb-number-format.scss @@ -30,6 +30,7 @@ position: relative; z-index: 2; } + &--selected &__visible { color: var(--color-black); background-color: var(--color-mint-green); @@ -46,6 +47,7 @@ user-select: none; // important, so this number not gets copied if only marked/selected } + &--selected &__selection { z-index: 3; user-select: all; diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap index 63fa036cda3..ebde683a55c 100644 --- a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap +++ b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.js.snap @@ -1576,16 +1576,16 @@ exports[`Pagination scss have to match default theme snapshot 1`] = ` .dnb-pagination__indicator__inner { animation: show-page 300ms ease-out forwards; } -.dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):hover, .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):hover { +.dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled], :active):hover, .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not([disabled], :active):hover { background-color: var(--color-emerald-green); color: var(--color-mint-green); } -.dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus { +.dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled], :active, :hover):focus, .dnb-pagination__button.dnb-button--primary:not([disabled], :active, :hover):focus { color: var(--color-emerald-green); background-color: var(--color-mint-green); outline: none; } -html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled]):not(:active):not(:hover):focus { +html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button--primary:not([disabled], :active, :hover):focus, html[data-whatinput=keyboard] .dnb-pagination__button.dnb-button--primary:not([disabled], :active, :hover):focus { --border-color: var(--color-emerald-green); box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; @@ -1649,7 +1649,7 @@ exports[`Pagination scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1659,10 +1659,10 @@ exports[`Pagination scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1950,6 +1950,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -2135,7 +2136,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -2411,8 +2414,7 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition { } .dnb-pagination__bar__wrapper { display: flex; - flex-wrap: wrap; - flex-direction: column-reverse; + flex-flow: column-reverse wrap; } .dnb-pagination--center .dnb-pagination__bar__wrapper { align-items: center; diff --git a/packages/dnb-eufemia/src/components/pagination/style/deps.scss b/packages/dnb-eufemia/src/components/pagination/style/deps.scss index d8dcdd547fe..3caeeee169c 100644 --- a/packages/dnb-eufemia/src/components/pagination/style/deps.scss +++ b/packages/dnb-eufemia/src/components/pagination/style/deps.scss @@ -4,8 +4,6 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; @import '../../progress-indicator/style/deps.scss'; - @import './dnb-pagination.scss'; diff --git a/packages/dnb-eufemia/src/components/pagination/style/dnb-pagination.scss b/packages/dnb-eufemia/src/components/pagination/style/dnb-pagination.scss index dad26668b01..1cbc929efc6 100644 --- a/packages/dnb-eufemia/src/components/pagination/style/dnb-pagination.scss +++ b/packages/dnb-eufemia/src/components/pagination/style/dnb-pagination.scss @@ -20,24 +20,28 @@ &--left &__bar { justify-content: flex-start; } + &--center &__bar { justify-content: center; + @media screen and (max-width: 40em) { justify-content: flex-start; } } + &--right &__bar { justify-content: flex-end; } &__bar__wrapper { display: flex; - flex-wrap: wrap; - flex-direction: column-reverse; // because of screen readers + flex-flow: column-reverse wrap; // because of screen readers } + &--center &__bar__wrapper { align-items: center; } + &--right &__bar__wrapper { align-items: flex-end; } @@ -49,6 +53,7 @@ &__button { max-width: 3.5rem; } + &__button--large-number { max-width: unset; } @@ -59,6 +64,7 @@ align-items: center; justify-content: center; } + &__indicator { cursor: default; display: flex; @@ -101,6 +107,7 @@ &__bar__skip { margin-top: 0.5rem; } + &__bar__skip .dnb-button:first-of-type { margin-right: 1.5rem; } diff --git a/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss b/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss index b129d9d8a12..79045bd3c94 100644 --- a/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss @@ -28,14 +28,15 @@ @at-root .dnb-core-style &__button.dnb-button--primary, &__button.dnb-button--primary { &, - &:not([disabled]):not(:active):hover { + &:not([disabled], :active):hover { background-color: var(--color-emerald-green); color: var(--color-mint-green); } - &:not([disabled]):not(:active):not(:hover):focus { + &:not([disabled], :active, :hover):focus { color: var(--color-emerald-green); background-color: var(--color-mint-green); + @include fakeFocus(null, var(--color-emerald-green)); } } @@ -50,6 +51,7 @@ transform: translate3d(0, -8px, 0); opacity: 0.1; } + to { transform: translate3d(0, 0, 0); opacity: 1; diff --git a/packages/dnb-eufemia/src/components/progress-indicator/style/deps.scss b/packages/dnb-eufemia/src/components/progress-indicator/style/deps.scss index dd77c911739..ab4805efcc6 100644 --- a/packages/dnb-eufemia/src/components/progress-indicator/style/deps.scss +++ b/packages/dnb-eufemia/src/components/progress-indicator/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-progress-indicator.scss'; diff --git a/packages/dnb-eufemia/src/components/progress-indicator/style/dnb-progress-indicator.scss b/packages/dnb-eufemia/src/components/progress-indicator/style/dnb-progress-indicator.scss index e18f671e2e2..df611308a0c 100644 --- a/packages/dnb-eufemia/src/components/progress-indicator/style/dnb-progress-indicator.scss +++ b/packages/dnb-eufemia/src/components/progress-indicator/style/dnb-progress-indicator.scss @@ -16,9 +16,11 @@ position: relative; display: inline-flex; align-items: center; + &--vertical { flex-direction: column; } + &--horizontal { justify-content: center; } @@ -26,19 +28,23 @@ // circular variant &__label { display: inline-flex; + .dnb-p { align-self: center; } } + @at-root .dnb-spacing & { .dnb-p, .dnb-p:not([class*='dnb-space']) { margin: 0; } } + &--horizontal &__label { margin: 0 1rem; } + &--vertical &__label { margin-top: 0.5rem; } @@ -72,6 +78,7 @@ --progress-indicator-circular-circle-offset--max ); } + &__line.light { animation-name: progress-indicator-circular-line-light; stroke-dasharray: var(--progress-indicator-circular-circle), @@ -80,6 +87,7 @@ --progress-indicator-circular-circle-offset--max ); } + &__line.dark { animation-name: progress-indicator-circular-line-dark; stroke-dasharray: var(--progress-indicator-circular-circle), @@ -88,9 +96,11 @@ --progress-indicator-circular-circle-offset--min ); } + &__line.paused { animation-play-state: paused; } + // for static progress-indicator animation &--has-progress-value &__line.dark { transition: stroke-dashoffset 600ms var(--progress-indicator-timing); @@ -99,9 +109,11 @@ &__circle { stroke-linecap: round; } + &__line.light &__circle { stroke: grey; } + &__line.dark &__circle { stroke: var(--color-black); } @@ -137,6 +149,7 @@ animation: progress-indicator-linear-bar-1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } + &__bar2-animation { width: auto; animation: progress-indicator-linear-bar-2 2.1s @@ -149,6 +162,7 @@ animation-duration: 0ms; animation-iteration-count: 0; } + html[data-visual-test] &__bar2-animation { left: -200%; right: 100%; @@ -165,10 +179,12 @@ &--complete:not(#{&}--visible) { animation: progress-indicator-fade-out 600ms ease-out 1 forwards; } + html[data-visual-test] & { opacity: 1; animation-duration: 0ms; } + &--no-animation { animation-duration: 0ms; } @@ -186,14 +202,17 @@ 0% { opacity: 0; } + 100% { opacity: 1; } } + @keyframes progress-indicator-fade-out { 0% { opacity: 1; } + 100% { opacity: 0; } @@ -206,11 +225,13 @@ --progress-indicator-circular-circle-offset--min ); } + 50% { stroke-dashoffset: var( --progress-indicator-circular-circle-offset--min ); } + 100% { stroke-dashoffset: var( --progress-indicator-circular-circle-offset--max @@ -224,11 +245,13 @@ --progress-indicator-circular-circle-offset--min ); } + 50% { stroke-dashoffset: var( --progress-indicator-circular-circle-offset--max ); } + 100% { stroke-dashoffset: var( --progress-indicator-circular-circle-offset--max @@ -241,10 +264,12 @@ left: -35%; right: 100%; } + 60% { left: 100%; right: -90%; } + 100% { left: 100%; right: -90%; @@ -256,10 +281,12 @@ left: -200%; right: 100%; } + 60% { left: 107%; right: -8%; } + 100% { left: 107%; right: -8%; diff --git a/packages/dnb-eufemia/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss b/packages/dnb-eufemia/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss index 8b09ec6e9dc..5c1a7ca1693 100644 --- a/packages/dnb-eufemia/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss @@ -20,14 +20,17 @@ width: 1rem; height: 1rem; } + &--medium { width: 1.5rem; height: 1.5rem; } + &--large { width: 3.5rem; height: 3.5rem; } + &--huge { width: 20rem; height: 20rem; @@ -40,6 +43,7 @@ &__line.light &__circle { stroke: var(--color-mint-green); } + &__line.dark &__circle { stroke: var(--color-emerald-green); } @@ -48,15 +52,19 @@ &--small &__line.dark &__circle { stroke-width: 3.1; } + &--medium &__line.dark &__circle { stroke-width: 3.3; } + &--default &__line.dark &__circle { stroke-width: 3.5; } + &--large &__line.dark &__circle { stroke-width: 3.7; } + &--huge &__line.dark &__circle { stroke-width: 3.9; } @@ -65,18 +73,22 @@ // linear variant &__linear { background-color: var(--color-black-8); + &--small { height: 0.25rem; border-radius: 0.125rem; } + &--medium { height: 1rem; border-radius: 0.5rem; } + &--large { height: 1.5rem; border-radius: 0.75rem; } + &--huge { height: 2rem; border-radius: 1rem; diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap index 7434e2f58c9..a310bda6b3e 100644 --- a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap +++ b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.js.snap @@ -738,7 +738,6 @@ exports[`Radio scss have to match snapshot 1`] = ` } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -871,7 +870,6 @@ button .dnb-form-status__text { .dnb-radio__shell { position: relative; user-select: none; - -webkit-user-select: none; display: flex; align-items: center; justify-content: center; diff --git a/packages/dnb-eufemia/src/components/radio/style/deps.scss b/packages/dnb-eufemia/src/components/radio/style/deps.scss index 7d1981f7f36..95b6061b7e5 100644 --- a/packages/dnb-eufemia/src/components/radio/style/deps.scss +++ b/packages/dnb-eufemia/src/components/radio/style/deps.scss @@ -4,8 +4,6 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../form-label/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-radio.scss'; diff --git a/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss b/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss index 70a3c0abdfc..9f261469a52 100644 --- a/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss +++ b/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss @@ -30,9 +30,7 @@ &__shell { position: relative; - - user-select: none; - -webkit-user-select: none; // Safari / Touch fix + user-select: none; // Safari / Touch fix display: flex; align-items: center; @@ -48,13 +46,17 @@ position: absolute; z-index: 4; } + &__button { border: var(--radio-border-width) solid transparent; } + &__focus { display: none; + @include fakeFocus(); } + &__focus, &__button { width: calc(var(--radio-width--medium) - 0.25rem); @@ -66,6 +68,7 @@ height: calc(var(--radio-height--large) - 0.125rem); } } + &__dot { width: calc(var(--radio-width--medium) - 0.75rem); height: calc(var(--radio-height--medium) - 0.75rem); @@ -93,6 +96,7 @@ border: 0; } + &--large &__input { width: var(--radio-width--large); height: var(--radio-height--large); @@ -124,6 +128,7 @@ margin-bottom: -0.25rem; } } + &-group__suffix { font-size: var(--font-size-basis); } @@ -131,9 +136,11 @@ &--large { line-height: var(--radio-height--large); } + &--large &__suffix { line-height: var(--radio-height--large); } + &--large &__shell { width: var(--radio-width--large); height: var(--radio-height--large); @@ -149,6 +156,7 @@ .dnb-radio__inner { order: 2; } + .dnb-form-label { order: 1; padding-right: 0.5rem; @@ -159,6 +167,7 @@ .dnb-radio__inner { order: 1; } + .dnb-form-label { order: 2; padding-left: 0.5rem; @@ -177,6 +186,7 @@ margin-top: 0.375rem; /* 6/16 */ margin-bottom: 0; } + & + .dnb-form-status { margin-top: 0.5rem; margin-bottom: 1rem; @@ -191,10 +201,12 @@ margin-right: var(--radio-margin-right); margin-bottom: var(--radio-margin-bottom); } + &--column .dnb-radio { display: flex; margin-right: 0; } + .dnb-radio:last-of-type { margin-right: 0; } @@ -203,12 +215,14 @@ &__shell { display: block; } + &__shell { & > .dnb-form-status { margin-top: 0; margin-bottom: 0; } } + &--column &__shell { flex-direction: column; } diff --git a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap index 45bddeb6a40..15476345b7c 100644 --- a/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/section/__tests__/__snapshots__/Section.test.tsx.snap @@ -36,7 +36,7 @@ exports[`Section scss have to match default theme snapshot 1`] = ` } .dnb-section--divider::after { color: var(--color-white); - box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, 0 0.0625rem 0 0 var(--color-mint-green-50), 99vw 0.0625rem 0 0 var(--color-mint-green-50), 0 -0.0625rem 0 0 var(--color-mint-green-50), 99vw -0.0625rem 0 0 var(--color-mint-green-50), 198vw 0.0625rem 0 0 var(--color-mint-green-50), 198vw -0.0625rem 0 0 var(--color-mint-green-50); + box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor, 0 0.0625rem 0 0 var(--color-mint-green-50), 99vw 0.0625rem 0 0 var(--color-mint-green-50), 0 -0.0625rem 0 0 var(--color-mint-green-50), 99vw -0.0625rem 0 0 var(--color-mint-green-50), 198vw 0.0625rem 0 0 var(--color-mint-green-50), 198vw -0.0625rem 0 0 var(--color-mint-green-50); } .dnb-section--transparent::after { color: transparent; @@ -182,8 +182,8 @@ exports[`Section scss have to match snapshot 1`] = ` width: 100vw; height: 100%; color: var(--color-mint-green-12); - background-color: currentColor; - box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor; + background-color: currentcolor; + box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor; } .dnb-section .dnb-section::after { z-index: -14; diff --git a/packages/dnb-eufemia/src/components/section/style/deps.scss b/packages/dnb-eufemia/src/components/section/style/deps.scss index ff44c2a21df..b4f11498b4d 100644 --- a/packages/dnb-eufemia/src/components/section/style/deps.scss +++ b/packages/dnb-eufemia/src/components/section/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-section.scss'; diff --git a/packages/dnb-eufemia/src/components/section/style/dnb-section.scss b/packages/dnb-eufemia/src/components/section/style/dnb-section.scss index 140621e3a86..89c8f22c6b3 100644 --- a/packages/dnb-eufemia/src/components/section/style/dnb-section.scss +++ b/packages/dnb-eufemia/src/components/section/style/dnb-section.scss @@ -21,34 +21,42 @@ width: 100vw; height: 100%; color: var(--color-mint-green-12); - background-color: currentColor; + background-color: currentcolor; // we use box-shadow to avoid a horizontal scrollbar // We lower the left position, so we get an overlap - box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, - 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor; + box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, + 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor; } + & &::after { z-index: -14; } + & & &::after { z-index: -13; } + & & & &::after { z-index: -12; } + & & & & &::after { z-index: -11; } + & & & & & &::after { z-index: -10; } + & & & & & & &::after { z-index: -9; } + & & & & & & & &::after { z-index: -8; } + & & & & & & & & &::after { z-index: -7; } diff --git a/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss b/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss index a9279f1dab9..338f61c16c2 100644 --- a/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/section/style/themes/dnb-section-theme-ui.scss @@ -8,10 +8,11 @@ .dnb-section { &--divider { color: var(--color-black-80); + &::after { color: var(--color-white); - box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, - 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor, + box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, + 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor, 0 0.0625rem 0 0 var(--color-mint-green-50), 99vw 0.0625rem 0 0 var(--color-mint-green-50), 0 -0.0625rem 0 0 var(--color-mint-green-50), @@ -20,73 +21,96 @@ 198vw -0.0625rem 0 0 var(--color-mint-green-50); } } + &--transparent { &::after { color: transparent; } } + &--mint-green-12 { color: var(--color-black-80); + &::after { color: var(--color-mint-green-12); } } + &--white { color: var(--color-black-80); + &::after { color: var(--color-white); } } + &--mint-green { color: var(--color-black-80); + &::after { color: var(--color-mint-green); } } + &--lavender { color: var(--color-black-80); + &::after { color: var(--color-lavender); } } + &--sand-yellow { color: var(--color-black-80); + &::after { color: var(--color-sand-yellow); } } + &--pistachio { color: var(--color-black-80); + &::after { color: var(--color-pistachio); } } + &--black-3 { color: var(--color-black-80); + &::after { color: var(--color-black-3); } } + &--emerald-green { color: var(--color-mint-green); + &::after { color: var(--color-emerald-green); } } + &--sea-green { color: var(--color-white); + &::after { color: var(--color-sea-green); } } + &--fire-red { color: var(--color-white); + &::after { color: var(--color-fire-red); } } + &--fire-red-8 { color: var(--color-black-80); + &::after { color: var(--color-fire-red-8); } @@ -103,9 +127,11 @@ &--emerald-green .dnb-button--tertiary, &--sea-green .dnb-button--tertiary { color: var(--color-white); + &:hover { color: var(--color-white); } + &:hover .dnb-button__text::after { color: var(--color-white) !important; } diff --git a/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap b/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap index 56631d77097..c182317d5db 100644 --- a/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap +++ b/packages/dnb-eufemia/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap @@ -287,7 +287,6 @@ exports[`Skeleton scss have to match snapshot 1`] = ` background-size: 30rem 100% !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; - -webkit-background-clip: text !important; } html[data-visual-test] .dnb-skeleton--font, html[data-visual-test] .dnb-skeleton--font .dnb-skeleton--show-font, html[data-visual-test] .dnb-skeleton--font .dnb-p { animation: none !important; diff --git a/packages/dnb-eufemia/src/components/skeleton/style/deps.scss b/packages/dnb-eufemia/src/components/skeleton/style/deps.scss index 7801ffe80a6..7801a8db101 100644 --- a/packages/dnb-eufemia/src/components/skeleton/style/deps.scss +++ b/packages/dnb-eufemia/src/components/skeleton/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-skeleton.scss'; diff --git a/packages/dnb-eufemia/src/components/skeleton/style/dnb-skeleton.scss b/packages/dnb-eufemia/src/components/skeleton/style/dnb-skeleton.scss index 5b4e942ed60..4fd2ae202dc 100644 --- a/packages/dnb-eufemia/src/components/skeleton/style/dnb-skeleton.scss +++ b/packages/dnb-eufemia/src/components/skeleton/style/dnb-skeleton.scss @@ -76,6 +76,7 @@ font-family: var(--font-family-default) !important; font-style: unset !important; } + &--font, &--font &--show-font, &--font .dnb-p { @@ -84,9 +85,7 @@ background-size: 30rem 100% !important; -webkit-text-fill-color: transparent !important; - background-clip: text !important; - -webkit-background-clip: text !important; html[data-visual-test] & { animation: none !important; @@ -107,6 +106,7 @@ display: flex; align-items: center; } + &--product &--circle + div { width: 50%; margin-left: 1rem; diff --git a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-brand.scss b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-brand.scss index 81b19a059d7..45395f1214b 100644 --- a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-brand.scss +++ b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-brand.scss @@ -5,7 +5,7 @@ .dnb-skeleton { // DNB Logo - --brand-skeleton-background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI3LjE1MzMgMTUuOTc0MkMyNy4wMDU5IDE1Ljg1MyAyNi44NDYzIDE1Ljc0NzYgMjYuNjc3IDE1LjY1OTZMMjYuNjMxMSAxNS42MzY3TDI2LjY3MTIgMTUuNjAyMUMyNi45MTIzIDE1LjM3NzggMjcuMTAxMiAxNS4xMDMgMjcuMjI0NCAxNC43OTc1QzI3LjM0NzcgMTQuNDkxOSAyNy40MDIzIDE0LjE2MjkgMjcuMzg0NSAxMy44MzM5QzI3LjM4MjkgMTIuOTczMiAyNy4wODk1IDEyLjMzMTEgMjYuNTA0MSAxMS45MjQ4QzI2LjAxMDUgMTEuNTc1NCAyNS4zMjgxIDExLjQwNDcgMjQuNDE2NyAxMS40MDYzTDIxLjgwMjkgMTEuNDExQzIxLjczMDMgMTEuNDEyMSAyMS42NjA5IDExLjQ0MTYgMjEuNjA5NiAxMS40OTMxQzIxLjU1ODMgMTEuNTQ0NiAyMS41MjkyIDExLjYxNDIgMjEuNTI4MyAxMS42ODY5TDIxLjU0MzcgMjAuMjY0OEMyMS41NDM5IDIwLjMzNzkgMjEuNTczIDIwLjQwNzkgMjEuNjI0NyAyMC40NTk0QzIxLjY3NjQgMjAuNTExIDIxLjc0NjQgMjAuNTM5OSAyMS44MTk0IDIwLjUzOTdMMjQuODA1NyAyMC41MzQ0QzI1Ljc0NTcgMjAuNTMyNyAyNi41MDIgMjAuMzMwNSAyNy4wNDU4IDE5LjkzMzZDMjcuMzU3OCAxOS43MDc2IDI3LjYwNiAxOS40MDQ3IDI3Ljc2NjUgMTkuMDU0M0MyNy45NDQxIDE4LjY1OTYgMjguMDMxNCAxOC4yMzAxIDI4LjAyMjIgMTcuNzk3M0MyOC4wMjQ0IDE3LjQ0NzUgMjcuOTQ3MyAxNy4xMDE3IDI3Ljc5NjkgMTYuNzg1OUMyNy42NDY0IDE2LjQ3MDEgMjcuNDI2NCAxNi4xOTI2IDI3LjE1MzQgMTUuOTc0MkgyNy4xNTMzWk0yMi4zNzc3IDEyLjI2NUwyNC40MTgzIDEyLjI2MTNDMjUuMTQwNSAxMi4yNiAyNS42NzM4IDEyLjM3OTUgMjYuMDE4MSAxMi42MTk5QzI2LjIzNjIgMTIuNzc0NCAyNi41MzQ4IDEzLjA3MjMgMjYuNTM2MiAxMy44MzU0QzI2LjUzODcgMTUuMjAwOSAyNS40NjEyIDE1LjMxMTggMjUuMTM0NSAxNS4zMTI0TDIyLjM4MzIgMTUuMzE3NEwyMi4zNzc3IDEyLjI2NVpNMjQuODA0MiAxOS42ODUyTDIyLjM5MSAxOS42ODk1TDIyLjM4NDcgMTYuMTY2NUwyNS4xMzYxIDE2LjE2MTZDMjYuMzI4MyAxNi4xNTk0IDI3LjE2NjQgMTYuODM0OCAyNy4xNjgxIDE3Ljc5ODlDMjcuMTY4OSAxOC4yNjM2IDI3LjE3MTUgMTkuNjgxIDI0LjgwNDIgMTkuNjg1MloiIGZpbGw9IiMwMDcyNzIiLz4KPHBhdGggZD0iTTkuODI1NTQgMTIuNzkyNEM5LjQ0MTA2IDEyLjMyNDcgOC45NDU4MiAxMS45NjA2IDguMzg0OSAxMS43MzM1QzcuODczMTkgMTEuNTM0MyA3LjMyODQzIDExLjQzNDEgNi43Nzk0MyAxMS40MzhMNC4yOTc0OSAxMS40NDI0QzQuMjIzOTIgMTEuNDQzOSA0LjE1Mzg3IDExLjQ3NDMgNC4xMDI0NyAxMS41MjdDNC4wNTEwOCAxMS41Nzk3IDQuMDIyNDggMTEuNjUwNSA0LjAyMjg1IDExLjcyNDJMNC4wMzgyNSAyMC4yOTYzQzQuMDM4NCAyMC4zNjk0IDQuMDY3NTIgMjAuNDM5NCA0LjExOTIxIDIwLjQ5MDlDNC4xNzA5IDIwLjU0MjUgNC4yNDA5MyAyMC41NzEzIDQuMzEzOSAyMC41NzEyTDYuNzk1ODEgMjAuNTY2OEM3LjM0NTA4IDIwLjU3MTYgNy44OTAwNCAyMC40NjkzIDguNDAwMjIgMjAuMjY1NUM4Ljk2MTE1IDIwLjA0MDQgOS40NTU2MSAxOS42NzYyIDkuODM3MDQgMTkuMjA3QzEwLjcxMjEgMTguMTI2OCAxMC44NDE1IDE2Ljc2NjYgMTAuODQwMiAxNi4wNDk0QzEwLjgzOTEgMTUuNDQxNSAxMC43Mzg5IDEzLjkwOTQgOS44MjU1NCAxMi43OTI0VjEyLjc5MjRaTTkuMTc2OTMgMTguNjY4OEM4Ljg4NDE0IDE5LjAxMTcgOC41MTc4NCAxOS4yODQxIDguMTA1MzIgMTkuNDY1N0M3LjY5Mjc5IDE5LjY0NzMgNy4yNDQ2NSAxOS43MzM0IDYuNzk0MjggMTkuNzE3Nkw0Ljg5MTI2IDE5LjcyMUw0Ljg3Nzk1IDEyLjI5NjRMNi43ODA5NSAxMi4yOTNDNy4yMzE0MiAxMi4yNzQyIDcuNjgwMjkgMTIuMzU4IDguMDkzNjkgMTIuNTM4MUM4LjUwNzA4IDEyLjcxODIgOC44NzQyMSAxMi45OSA5LjE2NzM2IDEzLjMzMjlDOS45MjU2NSAxNC4yNjExIDkuOTg1NDQgMTUuNjQ5NSA5Ljk4NjE3IDE2LjA1MDlDOS45ODcyNSAxNi42NTM2IDkuODg2MTMgMTcuNzk1NCA5LjE3Njk1IDE4LjY2ODhIOS4xNzY5M1oiIGZpbGw9IiMwMDcyNzIiLz4KPHBhdGggZD0iTTE5LjQ3NDkgNy43MjU3MUwxOS40OTc1IDIwLjMyNTlDMTkuNDk4NyAyMC4zODA4IDE5LjQ4MiAyMC40MzQ1IDE5LjQ1IDIwLjQ3OUMxOS40MTgxIDIwLjUyMzUgMTkuMzcyNSAyMC41NTY0IDE5LjMyMDIgMjAuNTcyOEMxOS4yOTUgMjAuNTg0MSAxOS4yNjc3IDIwLjU5IDE5LjI0IDIwLjU5MDNDMTkuMTk4NSAyMC41OTA0IDE5LjE1NzYgMjAuNTgwNSAxOS4xMjA3IDIwLjU2MTZDMTkuMDgzOCAyMC41NDI2IDE5LjA1MTkgMjAuNTE1MiAxOS4wMjc3IDIwLjQ4MTRMMTMuNDAzMyAxMy4zMzY4TDEzLjQyMjkgMjQuMjQ5OUwxMi41Njg4IDI0LjI1MTRMMTIuNTQ2MSAxMS42MjI2QzEyLjU0NjEgMTEuNTY3MiAxMi41NjM5IDExLjUxMzQgMTIuNTk2OSAxMS40Njg5QzEyLjYyOTggMTEuNDI0NSAxMi42NzYyIDExLjM5MTggMTIuNzI5MSAxMS4zNzU3QzEyLjc1NDcgMTEuMzY1OSAxMi43ODIxIDExLjM2MTkgMTIuODA5MyAxMS4zNjQxQzEyLjg1MDMgMTEuMzYzNiAxMi44OTA4IDExLjM3MjYgMTIuOTI3NiAxMS4zOTA0QzEyLjk2NDQgMTEuNDA4MiAxMi45OTY2IDExLjQzNDQgMTMuMDIxNiAxMS40NjY4TDE4LjY0NjEgMTguNjE3NEwxOC42MjY1IDcuNzI3MjNMMTkuNDc0OSA3LjcyNTcxWiIgZmlsbD0iIzAwNzI3MiIvPgo8L3N2Zz4K); + --brand-skeleton-background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTI3LjE1MzMgMTUuOTc0MkMyNy4wMDU5IDE1Ljg1MyAyNi44NDYzIDE1Ljc0NzYgMjYuNjc3IDE1LjY1OTZMMjYuNjMxMSAxNS42MzY3TDI2LjY3MTIgMTUuNjAyMUMyNi45MTIzIDE1LjM3NzggMjcuMTAxMiAxNS4xMDMgMjcuMjI0NCAxNC43OTc1QzI3LjM0NzcgMTQuNDkxOSAyNy40MDIzIDE0LjE2MjkgMjcuMzg0NSAxMy44MzM5QzI3LjM4MjkgMTIuOTczMiAyNy4wODk1IDEyLjMzMTEgMjYuNTA0MSAxMS45MjQ4QzI2LjAxMDUgMTEuNTc1NCAyNS4zMjgxIDExLjQwNDcgMjQuNDE2NyAxMS40MDYzTDIxLjgwMjkgMTEuNDExQzIxLjczMDMgMTEuNDEyMSAyMS42NjA5IDExLjQ0MTYgMjEuNjA5NiAxMS40OTMxQzIxLjU1ODMgMTEuNTQ0NiAyMS41MjkyIDExLjYxNDIgMjEuNTI4MyAxMS42ODY5TDIxLjU0MzcgMjAuMjY0OEMyMS41NDM5IDIwLjMzNzkgMjEuNTczIDIwLjQwNzkgMjEuNjI0NyAyMC40NTk0QzIxLjY3NjQgMjAuNTExIDIxLjc0NjQgMjAuNTM5OSAyMS44MTk0IDIwLjUzOTdMMjQuODA1NyAyMC41MzQ0QzI1Ljc0NTcgMjAuNTMyNyAyNi41MDIgMjAuMzMwNSAyNy4wNDU4IDE5LjkzMzZDMjcuMzU3OCAxOS43MDc2IDI3LjYwNiAxOS40MDQ3IDI3Ljc2NjUgMTkuMDU0M0MyNy45NDQxIDE4LjY1OTYgMjguMDMxNCAxOC4yMzAxIDI4LjAyMjIgMTcuNzk3M0MyOC4wMjQ0IDE3LjQ0NzUgMjcuOTQ3MyAxNy4xMDE3IDI3Ljc5NjkgMTYuNzg1OUMyNy42NDY0IDE2LjQ3MDEgMjcuNDI2NCAxNi4xOTI2IDI3LjE1MzQgMTUuOTc0MkgyNy4xNTMzWk0yMi4zNzc3IDEyLjI2NUwyNC40MTgzIDEyLjI2MTNDMjUuMTQwNSAxMi4yNiAyNS42NzM4IDEyLjM3OTUgMjYuMDE4MSAxMi42MTk5QzI2LjIzNjIgMTIuNzc0NCAyNi41MzQ4IDEzLjA3MjMgMjYuNTM2MiAxMy44MzU0QzI2LjUzODcgMTUuMjAwOSAyNS40NjEyIDE1LjMxMTggMjUuMTM0NSAxNS4zMTI0TDIyLjM4MzIgMTUuMzE3NEwyMi4zNzc3IDEyLjI2NVpNMjQuODA0MiAxOS42ODUyTDIyLjM5MSAxOS42ODk1TDIyLjM4NDcgMTYuMTY2NUwyNS4xMzYxIDE2LjE2MTZDMjYuMzI4MyAxNi4xNTk0IDI3LjE2NjQgMTYuODM0OCAyNy4xNjgxIDE3Ljc5ODlDMjcuMTY4OSAxOC4yNjM2IDI3LjE3MTUgMTkuNjgxIDI0LjgwNDIgMTkuNjg1MloiIGZpbGw9IiMwMDcyNzIiLz4KPHBhdGggZD0iTTkuODI1NTQgMTIuNzkyNEM5LjQ0MTA2IDEyLjMyNDcgOC45NDU4MiAxMS45NjA2IDguMzg0OSAxMS43MzM1QzcuODczMTkgMTEuNTM0MyA3LjMyODQzIDExLjQzNDEgNi43Nzk0MyAxMS40MzhMNC4yOTc0OSAxMS40NDI0QzQuMjIzOTIgMTEuNDQzOSA0LjE1Mzg3IDExLjQ3NDMgNC4xMDI0NyAxMS41MjdDNC4wNTEwOCAxMS41Nzk3IDQuMDIyNDggMTEuNjUwNSA0LjAyMjg1IDExLjcyNDJMNC4wMzgyNSAyMC4yOTYzQzQuMDM4NCAyMC4zNjk0IDQuMDY3NTIgMjAuNDM5NCA0LjExOTIxIDIwLjQ5MDlDNC4xNzA5IDIwLjU0MjUgNC4yNDA5MyAyMC41NzEzIDQuMzEzOSAyMC41NzEyTDYuNzk1ODEgMjAuNTY2OEM3LjM0NTA4IDIwLjU3MTYgNy44OTAwNCAyMC40NjkzIDguNDAwMjIgMjAuMjY1NUM4Ljk2MTE1IDIwLjA0MDQgOS40NTU2MSAxOS42NzYyIDkuODM3MDQgMTkuMjA3QzEwLjcxMjEgMTguMTI2OCAxMC44NDE1IDE2Ljc2NjYgMTAuODQwMiAxNi4wNDk0QzEwLjgzOTEgMTUuNDQxNSAxMC43Mzg5IDEzLjkwOTQgOS44MjU1NCAxMi43OTI0VjEyLjc5MjRaTTkuMTc2OTMgMTguNjY4OEM4Ljg4NDE0IDE5LjAxMTcgOC41MTc4NCAxOS4yODQxIDguMTA1MzIgMTkuNDY1N0M3LjY5Mjc5IDE5LjY0NzMgNy4yNDQ2NSAxOS43MzM0IDYuNzk0MjggMTkuNzE3Nkw0Ljg5MTI2IDE5LjcyMUw0Ljg3Nzk1IDEyLjI5NjRMNi43ODA5NSAxMi4yOTNDNy4yMzE0MiAxMi4yNzQyIDcuNjgwMjkgMTIuMzU4IDguMDkzNjkgMTIuNTM4MUM4LjUwNzA4IDEyLjcxODIgOC44NzQyMSAxMi45OSA5LjE2NzM2IDEzLjMzMjlDOS45MjU2NSAxNC4yNjExIDkuOTg1NDQgMTUuNjQ5NSA5Ljk4NjE3IDE2LjA1MDlDOS45ODcyNSAxNi42NTM2IDkuODg2MTMgMTcuNzk1NCA5LjE3Njk1IDE4LjY2ODhIOS4xNzY5M1oiIGZpbGw9IiMwMDcyNzIiLz4KPHBhdGggZD0iTTE5LjQ3NDkgNy43MjU3MUwxOS40OTc1IDIwLjMyNTlDMTkuNDk4NyAyMC4zODA4IDE5LjQ4MiAyMC40MzQ1IDE5LjQ1IDIwLjQ3OUMxOS40MTgxIDIwLjUyMzUgMTkuMzcyNSAyMC41NTY0IDE5LjMyMDIgMjAuNTcyOEMxOS4yOTUgMjAuNTg0MSAxOS4yNjc3IDIwLjU5IDE5LjI0IDIwLjU5MDNDMTkuMTk4NSAyMC41OTA0IDE5LjE1NzYgMjAuNTgwNSAxOS4xMjA3IDIwLjU2MTZDMTkuMDgzOCAyMC41NDI2IDE5LjA1MTkgMjAuNTE1MiAxOS4wMjc3IDIwLjQ4MTRMMTMuNDAzMyAxMy4zMzY4TDEzLjQyMjkgMjQuMjQ5OUwxMi41Njg4IDI0LjI1MTRMMTIuNTQ2MSAxMS42MjI2QzEyLjU0NjEgMTEuNTY3MiAxMi41NjM5IDExLjUxMzQgMTIuNTk2OSAxMS40Njg5QzEyLjYyOTggMTEuNDI0NSAxMi42NzYyIDExLjM5MTggMTIuNzI5MSAxMS4zNzU3QzEyLjc1NDcgMTEuMzY1OSAxMi43ODIxIDExLjM2MTkgMTIuODA5MyAxMS4zNjQxQzEyLjg1MDMgMTEuMzYzNiAxMi44OTA4IDExLjM3MjYgMTIuOTI3NiAxMS4zOTA0QzEyLjk2NDQgMTEuNDA4MiAxMi45OTY2IDExLjQzNDQgMTMuMDIxNiAxMS40NjY4TDE4LjY0NjEgMTguNjE3NEwxOC42MjY1IDcuNzI3MjNMMTkuNDc0OSA3LjcyNTcxWiIgZmlsbD0iIzAwNzI3MiIvPgo8L3N2Zz4K"); &--brand &--shape, &--brand#{&}--shape { @@ -29,6 +29,7 @@ 0% { background-position-x: -10rem; } + 100% { background-position-x: 10rem; } @@ -41,10 +42,12 @@ transform: translate3d(-100%, 0, 0); clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%); } + 60% { transform: translate3d(0%, 0, 0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } + 100% { transform: translate3d(50%, 0, 0); clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); diff --git a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-norway.scss b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-norway.scss index 8cb6acdbb16..859892b2228 100644 --- a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-norway.scss +++ b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-norway.scss @@ -59,10 +59,12 @@ transform: translate3d(-100%, 0, 0); clip-path: polygon(0 0, 20% 0, 20% 100%, 0 100%); } + 60% { transform: translate3d(0%, 0, 0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } + 100% { transform: translate3d(50%, 0, 0); clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); diff --git a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss index a63e2a9fd86..d4fd32aff35 100644 --- a/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss @@ -46,6 +46,7 @@ color: var(--skeleton-color); } } + // Font with Lines &--font, &--font &--show-font, @@ -69,9 +70,11 @@ 0% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } + 50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } + 100% { clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%); } @@ -81,6 +84,7 @@ 0% { background-position-x: 30rem; } + 100% { background-position-x: -30rem; } diff --git a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap index 64c8b53f041..1a65a1ace16 100644 --- a/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/skip-content/__tests__/__snapshots__/SkipContent.test.tsx.snap @@ -42,7 +42,7 @@ exports[`SkipContent scss has to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -52,10 +52,10 @@ exports[`SkipContent scss has to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -343,6 +343,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -528,7 +529,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -577,8 +580,8 @@ button.dnb-button::-moz-focus-inner { width: 100vw; height: 100%; color: var(--color-mint-green-12); - background-color: currentColor; - box-shadow: 99vw 0 0 0 currentColor, 198vw 0 0 0 currentColor, 297vw 0 0 0 currentColor, 396vw 0 0 0 currentColor; + background-color: currentcolor; + box-shadow: 99vw 0 0 0 currentcolor, 198vw 0 0 0 currentcolor, 297vw 0 0 0 currentcolor, 396vw 0 0 0 currentcolor; } .dnb-section .dnb-section::after { z-index: -14; diff --git a/packages/dnb-eufemia/src/components/skip-content/style/deps.scss b/packages/dnb-eufemia/src/components/skip-content/style/deps.scss index 3fe12111050..0bcc883b95d 100644 --- a/packages/dnb-eufemia/src/components/skip-content/style/deps.scss +++ b/packages/dnb-eufemia/src/components/skip-content/style/deps.scss @@ -4,7 +4,6 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; @import '../../section/style/deps.scss'; @import './dnb-skip-content.scss'; diff --git a/packages/dnb-eufemia/src/components/skip-content/style/dnb-skip-content.scss b/packages/dnb-eufemia/src/components/skip-content/style/dnb-skip-content.scss index ac643722ae2..c4d76f174ad 100644 --- a/packages/dnb-eufemia/src/components/skip-content/style/dnb-skip-content.scss +++ b/packages/dnb-eufemia/src/components/skip-content/style/dnb-skip-content.scss @@ -21,6 +21,7 @@ content: ''; position: absolute; inset: #{$focusRingWidth}; + @include fakeFocus(); } } diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap index 4f14cec4240..2ef1b4a973e 100644 --- a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap @@ -42,7 +42,7 @@ exports[`Slider scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -52,10 +52,10 @@ exports[`Slider scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -343,6 +343,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -528,7 +529,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -708,7 +711,6 @@ html[data-visual-test] .dnb-tooltip--hide { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -826,7 +828,6 @@ button .dnb-form-status__text { .dnb-slider { user-select: none; - -webkit-user-select: none; -webkit-touch-callout: none; display: flex; font-size: var(--font-size-small); diff --git a/packages/dnb-eufemia/src/components/slider/style/deps.scss b/packages/dnb-eufemia/src/components/slider/style/deps.scss index 571964dddcc..ef77648415a 100644 --- a/packages/dnb-eufemia/src/components/slider/style/deps.scss +++ b/packages/dnb-eufemia/src/components/slider/style/deps.scss @@ -4,10 +4,8 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; @import '../../tooltip/style/deps.scss'; @import '../../form-label/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-slider.scss'; diff --git a/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss b/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss index af000109b65..d9d3499d963 100644 --- a/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss +++ b/packages/dnb-eufemia/src/components/slider/style/dnb-slider.scss @@ -13,8 +13,7 @@ } .dnb-slider { - user-select: none; - -webkit-user-select: none; // Safari / Touch fix + user-select: none; // Safari / Touch fix -webkit-touch-callout: none; // Safari / Touch fix // use flex to make sure we have the whole space available @@ -43,6 +42,7 @@ flex: 1; width: 100%; } + &--vertical &__wrapper { align-items: center; @@ -60,6 +60,7 @@ &__suffix { align-self: center; } + &--vertical &__suffix { padding-left: 0; padding-top: 0.5rem; @@ -80,6 +81,7 @@ cursor: pointer; } + &--vertical &__track { margin: calc(var(--slider-space) * 1.5) 0; @@ -87,6 +89,7 @@ min-height: 2rem; min-width: auto; } + &--no-buttons &__track { margin: 0 calc(var(--slider-space)); } @@ -119,6 +122,7 @@ background-color: grey; border-radius: var(--slider-track-height); } + &--vertical &__line { width: var(--slider-track-height); height: auto; @@ -134,15 +138,18 @@ &__line__before { z-index: 2; } + &__line__after { z-index: 1; right: 0; background-color: #ddd; } + &--vertical &__line__before { top: 0; bottom: 0; } + &--vertical &__line__after { bottom: 0; } @@ -167,6 +174,7 @@ width: var(--slider-thumb-size); } } + &--vertical &__thumb { transform: translate3d(0, -50%, 0); } @@ -180,6 +188,7 @@ z-index: 2; } + &--vertical &__button.dnb-button--size-small { transform: translateX(0.25rem); } @@ -211,6 +220,7 @@ transform: translate3d(0.0625rem, 0, 0); } + &__button-helper:not(:disabled):focus ~ .dnb-button { @include fakeFocus(); } @@ -220,15 +230,18 @@ margin-right: 1rem; line-height: var(--slider-thumb-size); } + > .dnb-form-label--vertical { margin-right: 0; line-height: var(--line-height-basis); } + &__label--vertical { flex-direction: column; } &__label--vertical#{&}--vertical { align-items: center; + .dnb-form-label { text-align: center; width: 100%; @@ -242,6 +255,7 @@ order: 2; margin-top: 0.5rem; } + &--vertical .dnb-form-status { margin-top: 1rem; } diff --git a/packages/dnb-eufemia/src/components/slider/style/themes/dnb-slider-theme-ui.scss b/packages/dnb-eufemia/src/components/slider/style/themes/dnb-slider-theme-ui.scss index 9d09493f075..0c02e82c44d 100644 --- a/packages/dnb-eufemia/src/components/slider/style/themes/dnb-slider-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/slider/style/themes/dnb-slider-theme-ui.scss @@ -8,12 +8,15 @@ .dnb-slider { &__line { background-color: var(--color-sea-green); + &__after { background-color: var(--color-mint-green-50); } } + &__state--disabled &__line { background-color: var(--color-sea-green-30); + &__after { background-color: var(--color-mint-green-25); } diff --git a/packages/dnb-eufemia/src/components/space/style/deps.scss b/packages/dnb-eufemia/src/components/space/style/deps.scss index 9bbbf288a58..ec0bcd2a8e5 100644 --- a/packages/dnb-eufemia/src/components/space/style/deps.scss +++ b/packages/dnb-eufemia/src/components/space/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-space.scss'; diff --git a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap index 36af694bc8a..cc77dd6fbcd 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap +++ b/packages/dnb-eufemia/src/components/step-indicator/__tests__/__snapshots__/StepIndicator.test.js.snap @@ -7996,7 +7996,7 @@ exports[`StepIndicator scss have to match default theme snapshot 1`] = ` box-shadow: 0 0 0 0.125rem var(--border-color); } } -html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled]):not(:active):not(:hover):focus { +html[data-whatinput=keyboard] .dnb-step-indicator-wrapper .dnb-step-indicator__item--current .dnb-button:not([disabled], :active, :hover):focus { color: var(--color-emerald-green); background-color: var(--color-mint-green); } @@ -8071,7 +8071,7 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -8081,10 +8081,10 @@ exports[`StepIndicator scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -8372,6 +8372,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -8557,7 +8558,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { diff --git a/packages/dnb-eufemia/src/components/step-indicator/style/deps.scss b/packages/dnb-eufemia/src/components/step-indicator/style/deps.scss index 0dbd34242c6..f992a49530b 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/style/deps.scss +++ b/packages/dnb-eufemia/src/components/step-indicator/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; - @import './dnb-step-indicator.scss'; diff --git a/packages/dnb-eufemia/src/components/step-indicator/style/dnb-step-indicator.scss b/packages/dnb-eufemia/src/components/step-indicator/style/dnb-step-indicator.scss index 2d8125a49ff..2996fbf53cc 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/style/dnb-step-indicator.scss +++ b/packages/dnb-eufemia/src/components/step-indicator/style/dnb-step-indicator.scss @@ -51,9 +51,11 @@ .dnb-button__text { text-align: left; } + &.dnb-button--has-icon .dnb-button__text { margin-right: 1rem; } + .dnb-button__alignment { order: 2; } @@ -83,6 +85,7 @@ transition-duration: 1ms !important; } } + &:not(.dnb-step-indicator__item--visited) .dnb-button:not(.dnb-step-indicator__button__status) .dnb-button__icon { @@ -100,6 +103,7 @@ padding-right: 0.5rem; white-space: nowrap; } + &__wrapper { display: flex; flex-direction: column; diff --git a/packages/dnb-eufemia/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss b/packages/dnb-eufemia/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss index e63c5aa119b..99ec5a31872 100644 --- a/packages/dnb-eufemia/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss @@ -9,11 +9,14 @@ &__item { &--current .dnb-button { font-weight: var(--font-weight-medium); + @include fakeBorder(var(--color-sea-green), 0.125rem, inset); } + &--visited .dnb-button { background-color: var(--color-pistachio); } + &--inactive .dnb-button { cursor: text; pointer-events: initial; @@ -25,9 +28,11 @@ &.dnb-button--secondary:active { color: var(--color-black-80); background-color: var(--color-white); + @include fakeBorder(var(--color-black-20), 0.0625rem, inset); } } + &--inactive.dnb-step-indicator__item--current { .dnb-button { &.dnb-button--secondary, @@ -42,7 +47,7 @@ html[data-whatinput='keyboard'] &__item--current - .dnb-button:not([disabled]):not(:active):not(:hover):focus { + .dnb-button:not([disabled], :active, :hover):focus { color: var(--color-emerald-green); background-color: var(--color-mint-green); } @@ -57,12 +62,15 @@ &.dnb-button--secondary { background-color: var(--color-sand-yellow); } + &--error.dnb-button--secondary { background-color: var(--color-fire-red-8); } + &--info.dnb-button--secondary { background-color: var(--color-pistachio); } + .dnb-button__icon { align-self: flex-start; margin-top: 1rem; diff --git a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap index ed99c2dabd2..e97f1bed62e 100644 --- a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap +++ b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.js.snap @@ -388,7 +388,6 @@ exports[`Switch scss have to match snapshot 1`] = ` } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -528,7 +527,6 @@ button .dnb-form-status__text { } .dnb-switch__shell { user-select: none; - -webkit-user-select: none; position: relative; display: flex; align-items: center; diff --git a/packages/dnb-eufemia/src/components/switch/style/deps.scss b/packages/dnb-eufemia/src/components/switch/style/deps.scss index 2a93b7bde8c..9cbe4673b1f 100644 --- a/packages/dnb-eufemia/src/components/switch/style/deps.scss +++ b/packages/dnb-eufemia/src/components/switch/style/deps.scss @@ -4,8 +4,6 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../form-label/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-switch.scss'; diff --git a/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss b/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss index b725207f935..12ee01e785f 100644 --- a/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss +++ b/packages/dnb-eufemia/src/components/switch/style/dnb-switch.scss @@ -30,16 +30,17 @@ } &__shell { - user-select: none; - -webkit-user-select: none; // Safari / Touch fix + user-select: none; // Safari / Touch fix position: relative; display: flex; align-items: center; } + &--large { line-height: var(--switch-height--large); } + &--large &__shell { height: var(--switch-height--large); } @@ -88,8 +89,8 @@ transition: transform 150ms ease-out; transform: rotate(0deg); - //15% is the top value - //85% is the bottom value + // 15% is the top value + // 85% is the bottom value clip-path: polygon( 50% 15%, 110% 15%, @@ -134,6 +135,7 @@ calc(1px - 1px - var(--switch-border-width--large)) ); } + &--large &__input:checked ~ &__button { transform: translateX( calc( @@ -201,6 +203,7 @@ &__suffix { order: 4; } + &--label-position-left &__suffix { padding-left: 1rem; } @@ -209,10 +212,12 @@ .dnb-switch__inner { order: 2; } + .dnb-form-label { order: 1; align-self: flex-start; } + .dnb-form-status { order: 3; margin-top: 0.5rem; @@ -223,10 +228,12 @@ .dnb-switch__inner { order: 1; } + .dnb-form-label { order: 2; padding-left: 0.5rem; } + .dnb-form-status { order: 3; margin-top: 0.5rem; @@ -237,9 +244,11 @@ &.dnb-skeleton &__input[disabled] ~ &__background::after { border-color: var(--skeleton-color); } + &.dnb-skeleton &__input[disabled] ~ &__background { background-color: var(--skeleton-color); } + &.dnb-skeleton &__input[disabled]:not(:checked) ~ .dnb-switch__background::after { @@ -247,7 +256,7 @@ } // Edge fix - @include IS_EDGE { + @include IS_EDGE() { // fix are a problem with transition and complex transforms &__input:not(:checked) ~ &__button { transform: translateX(0); diff --git a/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss b/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss index cceb46345de..c6baccd1d53 100644 --- a/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/switch/style/themes/dnb-switch-theme-ui.scss @@ -80,9 +80,6 @@ * On disabled * */ - // &__input[disabled] ~ &__button, - // &__input[disabled] ~ &__background { - // } &__input[disabled] ~ &__background { background-color: var(--color-mint-green-25); } @@ -177,6 +174,7 @@ background-color: var(--color-fire-red-8); @include fakeBorder(var(--color-fire-red), $focusRingWidth); } + // change gfx 1 color &__status--error &__input:not(:focus):not([disabled]):not(:active):checked @@ -185,6 +183,7 @@ background-color: var(--color-fire-red); } } + // change gfx 0 color &__status--error &__input:not(:focus):not([disabled]):not(:active):not(:checked) @@ -193,6 +192,7 @@ border-color: var(--color-fire-red); } } + // fake border outside &__status--error &__input:not([disabled]):not(:focus):not(:active) @@ -201,6 +201,7 @@ display: block; @include fakeBorder(var(--color-fire-red), $focusRingWidth); } + // and rotate in checked state &__status--error &__input:not([disabled]):not(:focus):not(:active):checked diff --git a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap index f6cdbb156af..0c55e742cd0 100644 --- a/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/table/__tests__/__snapshots__/Table.test.tsx.snap @@ -409,7 +409,7 @@ html[data-whatinput=keyboard] .dnb-table > thead > tr > th.dnb-table--active .dn border-left: var(--border); } .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::before, .dnb-table--outline tbody .dnb-table__tr:last-of-type .dnb-table__th ~ .dnb-table__td:first-of-type::after { - border-radius: 0 0 0 0; + border-radius: 0; } .dnb-table--outline tbody:first-child .dnb-table__tr:first-of-type .dnb-table__th::after, .dnb-table--outline > :not(thead) + tbody .dnb-table__tr:first-of-type .dnb-table__th::after { border-top: var(--outline); diff --git a/packages/dnb-eufemia/src/components/table/style/deps.scss b/packages/dnb-eufemia/src/components/table/style/deps.scss index 3f850300865..499dc3e0e8d 100644 --- a/packages/dnb-eufemia/src/components/table/style/deps.scss +++ b/packages/dnb-eufemia/src/components/table/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-table.scss'; diff --git a/packages/dnb-eufemia/src/components/table/style/dnb-table.scss b/packages/dnb-eufemia/src/components/table/style/dnb-table.scss index 5280792d425..2c620ffb8ee 100644 --- a/packages/dnb-eufemia/src/components/table/style/dnb-table.scss +++ b/packages/dnb-eufemia/src/components/table/style/dnb-table.scss @@ -34,8 +34,10 @@ background-color: var(--color-white); text-align: left; } + &--border > caption:not(.dnb-sr-only) { position: relative; + &::after { @include tableBorder(); top: -0.0625rem; // so we are behind the border-bottom (end of table) diff --git a/packages/dnb-eufemia/src/components/table/style/table-accordion.scss b/packages/dnb-eufemia/src/components/table/style/table-accordion.scss index 99084fa54fb..2b9fbc95195 100644 --- a/packages/dnb-eufemia/src/components/table/style/table-accordion.scss +++ b/packages/dnb-eufemia/src/components/table/style/table-accordion.scss @@ -201,7 +201,7 @@ } &__tr__accordion_content { - @include IS_SAFARI_DESKTOP { + @include IS_SAFARI_DESKTOP() { &[hidden] { /** * By reverting the display from "none" to "block", @@ -310,6 +310,7 @@ &, &::before, &::after { + // stylelint-disable-next-line border-radius: 0 0 0.5rem 0; } } diff --git a/packages/dnb-eufemia/src/components/table/style/table-header-buttons.scss b/packages/dnb-eufemia/src/components/table/style/table-header-buttons.scss index 41c18694e5c..6b7e125d314 100644 --- a/packages/dnb-eufemia/src/components/table/style/table-header-buttons.scss +++ b/packages/dnb-eufemia/src/components/table/style/table-header-buttons.scss @@ -21,6 +21,7 @@ > .dnb-icon { opacity: 0; transition: opacity 200ms ease-out, transform 500ms ease-out; + html[data-visual-test] & { transition: none; } @@ -87,6 +88,7 @@ &::before { right: -0.5rem; } + html[data-visual-test] & .dnb-icon, :not(.dnb-table--active) &:active .dnb-icon { opacity: 1; @@ -98,6 +100,7 @@ opacity: 1; color: inherit; } + &:not(:active) .dnb-button__text::after { visibility: visible; } @@ -107,7 +110,6 @@ @include active() { @include buttonFocusRing('mouse'); // also, make a mouse ring @include buttonFocusRing('touch'); // also, make a touch ring - @include tableFocusRing(); // focus ring @@ -135,6 +137,7 @@ .dnb-button__text { padding-right: 0; + &::after { right: 0; } @@ -152,6 +155,7 @@ &:not(:hover) .dnb-button__text::after { opacity: 0; } + .dnb-icon { opacity: 1; } @@ -175,6 +179,7 @@ &:hover:focus:not(:active) .dnb-button__text::after { visibility: visible; } + html[data-whatinput='keyboard'] &:hover:focus .dnb-button__text::after { diff --git a/packages/dnb-eufemia/src/components/table/style/table-td.scss b/packages/dnb-eufemia/src/components/table/style/table-td.scss index 681f74efd97..53e92aa530f 100644 --- a/packages/dnb-eufemia/src/components/table/style/table-td.scss +++ b/packages/dnb-eufemia/src/components/table/style/table-td.scss @@ -46,7 +46,7 @@ &, &::before, &::after { - border-radius: 0 0 0 0; + border-radius: 0; } } diff --git a/packages/dnb-eufemia/src/components/table/style/table-th.scss b/packages/dnb-eufemia/src/components/table/style/table-th.scss index 082a7e5bf59..b325d2bcf74 100644 --- a/packages/dnb-eufemia/src/components/table/style/table-th.scss +++ b/packages/dnb-eufemia/src/components/table/style/table-th.scss @@ -19,6 +19,7 @@ border-top: var(--border); } } + // &--outline thead &__th { // &::after { // @include tableBorder(); diff --git a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap index 0fd475c6df7..d199ccf44af 100644 --- a/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap +++ b/packages/dnb-eufemia/src/components/tabs/__tests__/__snapshots__/Tabs.test.js.snap @@ -1296,7 +1296,7 @@ html[data-whatinput=keyboard] .dnb-tabs__content:focus::before { text-align: center; display: block; color: var(--color-sea-green); - padding: 0.5rem 0 0.25rem 0; + padding: 0.5rem 0 0.25rem; } html:not([data-whatintent=touch]) .dnb-tabs__button:hover[disabled] { cursor: not-allowed; @@ -1477,6 +1477,7 @@ html:not([data-visual-test]) .dnb-tabs__tabs__tablist { position: relative; z-index: 1; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; margin: 0; padding: 0 0.125rem; /* 1/16*4 */ diff --git a/packages/dnb-eufemia/src/components/tabs/style/deps.scss b/packages/dnb-eufemia/src/components/tabs/style/deps.scss index 43df9148aab..1720f20505e 100644 --- a/packages/dnb-eufemia/src/components/tabs/style/deps.scss +++ b/packages/dnb-eufemia/src/components/tabs/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-tabs.scss'; diff --git a/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss b/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss index 62e3e52be56..e024c52d2f7 100644 --- a/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss +++ b/packages/dnb-eufemia/src/components/tabs/style/dnb-tabs.scss @@ -93,6 +93,8 @@ z-index: 1; user-select: none; + + /* stylelint-disable-next-line */ -webkit-user-select: none; // Safari / Touch fix margin: 0; diff --git a/packages/dnb-eufemia/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss b/packages/dnb-eufemia/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss index c750972265c..983b68429da 100644 --- a/packages/dnb-eufemia/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/tabs/style/themes/dnb-tabs-theme-ui.scss @@ -27,6 +27,7 @@ &:first-of-type { border-radius: 0 50% 50% 0; } + &:last-of-type { border-radius: 50% 0 0 50%; } @@ -54,6 +55,7 @@ max-width: 100vw; border-radius: 0.5rem; + @include fakeFocus(); } } @@ -67,12 +69,13 @@ display: block; color: var(--color-sea-green); - padding: 0.5rem 0 0.25rem 0; + padding: 0.5rem 0 0.25rem; } // hover @include hover() { background-color: var(--color-mint-green-50); + &::after { height: 2px; border-radius: 2px; @@ -83,6 +86,7 @@ &:focus { @include buttonFocusRing(); overflow: visible; + &::before { top: 0.5rem; left: -0.375rem; // For overflow purposes @@ -106,6 +110,7 @@ background-color: var(--color-sea-green); } } + &:not([disabled]):active &__title, &:not([disabled]).selected &__title { color: var(--color-emerald-green); diff --git a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap index accd102f073..371e2d58705 100644 --- a/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/tag/__tests__/__snapshots__/Tag.test.tsx.snap @@ -42,7 +42,7 @@ exports[`Tag scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -52,10 +52,10 @@ exports[`Tag scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -343,6 +343,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -528,7 +529,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { diff --git a/packages/dnb-eufemia/src/components/tag/style/deps.scss b/packages/dnb-eufemia/src/components/tag/style/deps.scss index 8528b978c3f..09695f06630 100644 --- a/packages/dnb-eufemia/src/components/tag/style/deps.scss +++ b/packages/dnb-eufemia/src/components/tag/style/deps.scss @@ -4,7 +4,5 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../button/style/deps.scss'; - @import './dnb-tag.scss'; diff --git a/packages/dnb-eufemia/src/components/tag/style/dnb-tag.scss b/packages/dnb-eufemia/src/components/tag/style/dnb-tag.scss index e6be770545a..891c19eab55 100644 --- a/packages/dnb-eufemia/src/components/tag/style/dnb-tag.scss +++ b/packages/dnb-eufemia/src/components/tag/style/dnb-tag.scss @@ -30,6 +30,7 @@ &:not(#{&}--interactive) { user-select: unset; cursor: unset; + .dnb-button__text { cursor: text; } @@ -46,9 +47,11 @@ var(--color-sea-green), var(--color-mint-green-50) ); + &[disabled] { color: var(--color-sea-green-30); background-color: var(--color-white); + @include fakeBorder(var(--color-sea-green-30)); } } @@ -58,20 +61,24 @@ &.dnb-button { color: var(--color-white); background-color: var(--color-sea-green); + @include deleteIcon(var(--color-white), var(--color-sea-green)); @include buttonFocus(var(--color-sea-green), var(--color-white)) { @include deleteIcon(); } + @include buttonHover(var(--color-sea-green), var(--color-white)) { @include deleteIcon(); } + @include buttonActive( var(--color-sea-green), var(--color-mint-green-50) ) { @include deleteIcon(); } + &[disabled] { @include deleteIcon( var(--color-mint-green-50), diff --git a/packages/dnb-eufemia/src/components/tag/style/themes/tag-mixins.scss b/packages/dnb-eufemia/src/components/tag/style/themes/tag-mixins.scss index 12cbe343709..445f3ca3b0d 100644 --- a/packages/dnb-eufemia/src/components/tag/style/themes/tag-mixins.scss +++ b/packages/dnb-eufemia/src/components/tag/style/themes/tag-mixins.scss @@ -11,6 +11,7 @@ .dnb-icon-close-circle-path { fill: $fillColor; } + .dnb-icon-close-cross-path { stroke: $strokeColor; } diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap index bf0ac6febbe..e001c9656ed 100644 --- a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap +++ b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.js.snap @@ -201,7 +201,6 @@ html:not([data-visual-test]) .dnb-textarea__textarea { } .dnb-textarea--disabled .dnb-textarea__textarea, .dnb-textarea__textarea[disabled] { user-select: none; - -webkit-user-select: none; color: var(--color-black-55); background-color: var(--color-black-3); } @@ -225,7 +224,7 @@ html:not([data-visual-test]) .dnb-textarea__textarea { box-shadow: 0 0 0 0.125rem var(--border-color); border-color: transparent; } -.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder { +.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled], [readonly]) ~ .dnb-textarea__placeholder { display: none; }" `; @@ -271,7 +270,6 @@ exports[`Textarea scss have to match snapshot 1`] = ` } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -453,7 +451,7 @@ button .dnb-form-status__text { .dnb-textarea__autoresize .dnb-textarea__textarea { resize: none; } -.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled]):not([readonly]) ~ .dnb-textarea__placeholder { +.dnb-textarea--has-content .dnb-textarea__textarea ~ .dnb-textarea__placeholder, .dnb-textarea--focus .dnb-textarea__textarea:not([disabled], [readonly]) ~ .dnb-textarea__placeholder { opacity: 0.5; } .dnb-textarea__inner > .dnb-form-status { diff --git a/packages/dnb-eufemia/src/components/textarea/style/deps.scss b/packages/dnb-eufemia/src/components/textarea/style/deps.scss index 8ebd6435436..aa0fe55ff29 100644 --- a/packages/dnb-eufemia/src/components/textarea/style/deps.scss +++ b/packages/dnb-eufemia/src/components/textarea/style/deps.scss @@ -4,8 +4,6 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../form-label/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-textarea.scss'; diff --git a/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss b/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss index b00a18bb4f9..64f640ea331 100644 --- a/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss +++ b/packages/dnb-eufemia/src/components/textarea/style/dnb-textarea.scss @@ -67,6 +67,7 @@ &__textarea { position: relative; z-index: 2; + @include textareaStyleCommon(); } @@ -101,7 +102,7 @@ // hide placeholder on focus &--has-content &__textarea ~ &__placeholder, - &--focus &__textarea:not([disabled]):not([readonly]) ~ &__placeholder { + &--focus &__textarea:not([disabled], [readonly]) ~ &__placeholder { opacity: 0.5; } @@ -122,11 +123,13 @@ &:not(&--vertical)[class*='__status'] { align-items: flex-start; + > .dnb-form-label { // vertical align the current font margin-top: 0.25rem; } } + @include formLabelWrap(); // make full width @@ -134,22 +137,26 @@ display: flex; flex-grow: 1; } + &--stretch & { &__inner { flex-grow: 1; } + &__shell, &__inner, &__textarea { width: 100%; } } + &--stretch .dnb-form-label + &__inner { width: auto; } &--vertical#{&}--stretch &__inner { width: 100%; } + .dnb-form-row--horizontal &--stretch { width: 100%; } @@ -176,9 +183,11 @@ margin: 0; border-radius: 0.25rem; } + &.dnb-skeleton &__inner &__shell { margin: var(--textarea-padding-width); } + &.dnb-skeleton &__state, &.dnb-skeleton &__textarea { visibility: hidden; diff --git a/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss b/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss index 363e78a09a4..9a6eaa2533e 100644 --- a/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/textarea/style/themes/dnb-textarea-theme-ui.scss @@ -48,8 +48,7 @@ // disabled &--disabled &__textarea, &__textarea[disabled] { - user-select: none; - -webkit-user-select: none; // Safari / Touch fix + user-select: none; // Safari / Touch fix &::-webkit-scrollbar { width: 0; } @@ -57,6 +56,7 @@ color: var(--color-black-55); background-color: var(--color-black-3); } + &--disabled &__state, &__textarea[disabled] ~ &__state { box-shadow: 0 0 0 0.0625rem var(--color-black-55); @@ -83,7 +83,7 @@ // hide placeholder on focus &--has-content &__textarea ~ &__placeholder, - &--focus &__textarea:not([disabled]):not([readonly]) ~ &__placeholder { + &--focus &__textarea:not([disabled], [readonly]) ~ &__placeholder { display: none; } } diff --git a/packages/dnb-eufemia/src/components/timeline/style/deps.scss b/packages/dnb-eufemia/src/components/timeline/style/deps.scss index 438ece2f099..f16df0e062b 100644 --- a/packages/dnb-eufemia/src/components/timeline/style/deps.scss +++ b/packages/dnb-eufemia/src/components/timeline/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-timeline.scss'; diff --git a/packages/dnb-eufemia/src/components/timeline/style/dnb-timeline.scss b/packages/dnb-eufemia/src/components/timeline/style/dnb-timeline.scss index 0906c918654..280e62659e2 100644 --- a/packages/dnb-eufemia/src/components/timeline/style/dnb-timeline.scss +++ b/packages/dnb-eufemia/src/components/timeline/style/dnb-timeline.scss @@ -28,6 +28,7 @@ height: auto; padding: 0; } + &__title { cursor: text; } @@ -43,6 +44,7 @@ font-weight: var(--font-weight-basis); color: var(--color-black-55); } + &__info { padding-top: var(--spacing-x-small); } diff --git a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss index afb52a13840..f79d7819c32 100644 --- a/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/timeline/style/themes/dnb-timeline-theme-ui.scss @@ -38,6 +38,7 @@ &__item { margin-left: var(--timeline-icon-width-diff); + &__label { &__icon { width: var(--timeline-icon-width--small); @@ -45,14 +46,17 @@ border-radius: var(--timeline-icon-border-radius--small); color: var(--color-black-80); background-color: var(--color-white); + @include fakeBorder(var(--color-black-80), 0.0625rem, inset); } + &__title { margin-left: var(--timeline-border-spacing--icon-adjusted); font-size: var(--font-size-small); line-height: var(--line-height-small); } } + &__content { @include centerBorder(var(--timeline-icon-width--small)); border-left: 1px dashed var(--color-black-55); @@ -61,41 +65,51 @@ &--completed &__content { border-left: 1px solid var(--color-black-80); } + &--completed &__label__title { color: var(--color-black-80); } + &--current &__content { @include centerBorder( var(--timeline-icon-width--medium), var(--timeline-border-spacing) ); } + &--current &__label__title { margin-left: var(--timeline-border-spacing); font-weight: var(--font-weight-medium); font-size: var(--font-size-basis); line-height: var(--line-height-basis); } + &--current &__label__icon { width: var(--timeline-icon-width--medium); line-height: var(--timeline-icon-height--medium); border-radius: var(--timeline-icon-border-radius--medium); } + &--current { margin-left: 0; } + &--upcoming &__label__title { font-weight: var(--font-weight-basis); color: var(--color-black-55); } + &--upcoming:not(.dnb-skeleton) &__label__icon { color: var(--color-black-55); background-color: var(--color-black-3); + @include fakeBorder(var(--color-black-3), 0.0625rem, inset); } + &:only-child { margin-left: 0; } + &:last-child &__content { border-left: none; } diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap index 6c94283735b..cc00daa555b 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap +++ b/packages/dnb-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.js.snap @@ -1634,7 +1634,6 @@ exports[`ToggleButton scss have to match snapshot 1`] = ` } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -1679,7 +1678,7 @@ legend.dnb-form-label { .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -1689,10 +1688,10 @@ legend.dnb-form-label { height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -1980,6 +1979,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -2165,7 +2165,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { @@ -2227,7 +2229,6 @@ button.dnb-button::-moz-focus-inner { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -2357,7 +2358,6 @@ button .dnb-form-status__text { } .dnb-checkbox__shell { user-select: none; - -webkit-user-select: none; position: relative; display: flex; align-items: center; @@ -2401,7 +2401,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus { left: auto; width: calc(var(--checkbox-width--medium) - 0.5rem); height: calc(var(--checkbox-height--medium) - 0.5rem); - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; } .dnb-checkbox--large { line-height: var(--checkbox-height--large); @@ -2511,7 +2511,6 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus { } .dnb-form-label[for]:not([disabled]) { user-select: none; - -webkit-user-select: none; cursor: pointer; } .dnb-form-label[disabled] { @@ -2644,7 +2643,6 @@ button .dnb-form-status__text { .dnb-radio__shell { position: relative; user-select: none; - -webkit-user-select: none; display: flex; align-items: center; justify-content: center; @@ -2918,7 +2916,6 @@ button .dnb-form-status__text { position: relative; left: 0; user-select: none; - -webkit-user-select: none; } .dnb-toggle-button--vertical { flex-direction: column; @@ -2970,7 +2967,7 @@ button .dnb-form-status__text { width: calc(var(--radio-width--medium) - 1rem); height: calc(var(--radio-height--medium) - 1rem); } -.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active).dnb-button--secondary:hover { +.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled], :active).dnb-button--secondary, .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled], :active).dnb-button--secondary:hover { background-color: var(--color-emerald-green); color: var(--color-mint-green); } diff --git a/packages/dnb-eufemia/src/components/toggle-button/style/deps.scss b/packages/dnb-eufemia/src/components/toggle-button/style/deps.scss index 84cc825c2c9..1e34ea41bfb 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/style/deps.scss +++ b/packages/dnb-eufemia/src/components/toggle-button/style/deps.scss @@ -4,11 +4,9 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../form-label/style/deps.scss'; @import '../../button/style/deps.scss'; @import '../../checkbox/style/deps.scss'; @import '../../radio/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-toggle-button.scss'; diff --git a/packages/dnb-eufemia/src/components/toggle-button/style/dnb-toggle-button.scss b/packages/dnb-eufemia/src/components/toggle-button/style/dnb-toggle-button.scss index 1661bd509b7..15fa09a5361 100644 --- a/packages/dnb-eufemia/src/components/toggle-button/style/dnb-toggle-button.scss +++ b/packages/dnb-eufemia/src/components/toggle-button/style/dnb-toggle-button.scss @@ -25,9 +25,7 @@ &__shell { position: relative; left: 0; - - user-select: none; - -webkit-user-select: none; // Safari / Touch fix + user-select: none; // Safari / Touch fix } &--vertical { @@ -51,12 +49,15 @@ // checkbox .dnb-checkbox { margin-left: -0.5rem; + &__input { pointer-events: none; } + &__button { display: unset; } + &__focus, &__button { width: calc(var(--checkbox-width--medium) - 0.5rem); @@ -70,6 +71,7 @@ width: calc(var(--checkbox-width--medium) - 1rem); height: calc(var(--checkbox-height--medium) - 1rem); } + &__gfx { width: calc(var(--checkbox-width--medium) - 0.75rem); height: calc(var(--checkbox-height--medium) - 0.75rem); @@ -79,9 +81,11 @@ // radio button .dnb-radio { margin-left: -0.5rem; + &__input { pointer-events: none; } + &__focus, &__button { width: calc(var(--radio-width--medium) - 0.5rem); @@ -90,6 +94,7 @@ // We used this before for more precise sizing border-width: 0.0625rem; // to get 1.5px we use 1px here, and 0.5px with box-shadow } + &__dot { width: calc(var(--radio-width--medium) - 1rem); height: calc(var(--radio-height--medium) - 1rem); @@ -98,7 +103,7 @@ } // default "active" style - &--checked &__button:not([disabled]):not(:active) { + &--checked &__button:not([disabled], :active) { &.dnb-button--secondary, &.dnb-button--secondary:hover { background-color: var(--color-emerald-green); @@ -136,10 +141,12 @@ margin-right: var(--toggle-button-margin-right); margin-bottom: var(--toggle-button-margin-bottom); } + &--column .dnb-toggle-button { display: flex; margin-right: 0; } + .dnb-toggle-button:last-of-type { margin-right: 0; } diff --git a/packages/dnb-eufemia/src/components/tooltip/style/deps.scss b/packages/dnb-eufemia/src/components/tooltip/style/deps.scss index 5946a5968c9..b50893eaff2 100644 --- a/packages/dnb-eufemia/src/components/tooltip/style/deps.scss +++ b/packages/dnb-eufemia/src/components/tooltip/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-tooltip.scss'; diff --git a/packages/dnb-eufemia/src/components/tooltip/style/dnb-tooltip.scss b/packages/dnb-eufemia/src/components/tooltip/style/dnb-tooltip.scss index b1acd8461a9..dc3ca37c2d4 100644 --- a/packages/dnb-eufemia/src/components/tooltip/style/dnb-tooltip.scss +++ b/packages/dnb-eufemia/src/components/tooltip/style/dnb-tooltip.scss @@ -24,6 +24,7 @@ visibility: hidden; transition: opacity 200ms var(--easing-default); + &--animate_position { transition: all 200ms var(--easing-default), opacity 200ms var(--easing-default); @@ -42,6 +43,7 @@ &--active#{&}--no-animation { animation: show-tooltip 1ms var(--easing-default) forwards; } + &--hide { visibility: visible; animation: hide-tooltip 200ms var(--easing-default) forwards; @@ -49,9 +51,11 @@ &--hide#{&}--no-animation { animation: hide-tooltip 1ms linear forwards; } + &--fixed { position: fixed; } + html[data-visual-test] &--hide { // use a delay before hiding, because of visual tests animation: hide-tooltip 1ms linear 1s forwards; @@ -97,15 +101,18 @@ &__position--bottom { top: -0.5rem; } + &__position--top { bottom: -0.5rem; transform: rotate(180deg); } + &__position--left { right: -0.75rem; margin-right: 3px; // border correction transform: rotate(90deg); } + &__position--right { left: -0.75rem; margin-left: 3px; // border correction @@ -116,6 +123,7 @@ &__arrow--left { align-self: flex-start; } + &__arrow--right { align-self: flex-end; } @@ -126,14 +134,17 @@ from { opacity: 0; } + to { opacity: 1; } } + @keyframes hide-tooltip { from { opacity: 1; } + to { opacity: 0; visibility: hidden; diff --git a/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss b/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss index 78b1b50aa25..d6750e5e56d 100644 --- a/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/tooltip/style/themes/dnb-tooltip-theme-ui.scss @@ -15,7 +15,7 @@ &__arrow { &::before { - border: 1px solid rgba(0, 0, 0, 0.1); + border: 1px solid rgb(0 0 0 / 10%); background-color: var(--color-black-80); } } diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap index c1ad474c17e..840218cb085 100644 --- a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap @@ -82,7 +82,7 @@ exports[`Upload scss have to match snapshot 1`] = ` .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -92,10 +92,10 @@ exports[`Upload scss have to match snapshot 1`] = ` height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -171,7 +171,7 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic .dnb-icon svg { width: inherit; height: inherit; - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; vertical-align: top; } .dnb-icon svg[width="100%"] { @@ -181,10 +181,10 @@ h1 .dnb-icon, h2 .dnb-icon, h3 .dnb-icon, h4 .dnb-icon, h5 .dnb-icon, h6 .dnb-ic height: inherit; } .dnb-icon--inherit-color svg:not([fill]), .dnb-icon--inherit-color svg [fill] { - fill: currentColor; + fill: currentcolor; } .dnb-icon--inherit-color svg [stroke] { - stroke: currentColor; + stroke: currentcolor; } .dnb-icon--small { font-size: 0.75rem; @@ -472,6 +472,7 @@ button .dnb-form-status__text { .dnb-button { position: relative; user-select: none; + /* stylelint-disable-next-line */ -webkit-user-select: none; cursor: pointer; white-space: nowrap; @@ -657,7 +658,9 @@ html[data-whatinput=mouse] .dnb-button--reset:not([disabled]):focus, html[data-w } .dnb-button[type=button], .dnb-button[type=reset], .dnb-button[type=submit] { appearance: none; + /* stylelint-disable-next-line */ -moz-appearance: none; + /* stylelint-disable-next-line */ -webkit-appearance: none; } .dnb-button[disabled] { diff --git a/packages/dnb-eufemia/src/components/upload/style/deps.scss b/packages/dnb-eufemia/src/components/upload/style/deps.scss index cb8c37f0339..4f81e8a2433 100644 --- a/packages/dnb-eufemia/src/components/upload/style/deps.scss +++ b/packages/dnb-eufemia/src/components/upload/style/deps.scss @@ -4,9 +4,7 @@ */ @import '../../../style/core/utilities.scss'; - @import '../../icon/style/deps.scss'; @import '../../button/style/deps.scss'; @import '../../form-status/style/deps.scss'; - @import './dnb-upload.scss'; diff --git a/packages/dnb-eufemia/src/components/upload/style/themes/dnb-upload-theme-ui.scss b/packages/dnb-eufemia/src/components/upload/style/themes/dnb-upload-theme-ui.scss index cf196bc1500..e87c3ecb806 100644 --- a/packages/dnb-eufemia/src/components/upload/style/themes/dnb-upload-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/upload/style/themes/dnb-upload-theme-ui.scss @@ -27,6 +27,7 @@ stroke-dasharray: 0; } } + &--active { background-color: var(--color-pistachio); } @@ -49,6 +50,7 @@ &__text.dnb-p { color: var(--color-black-55); } + &__subtitle.dnb-p { color: var(--color-black-55); } diff --git a/packages/dnb-eufemia/src/components/visually-hidden/__tests__/__snapshots__/VisuallyHidden.test.tsx.snap b/packages/dnb-eufemia/src/components/visually-hidden/__tests__/__snapshots__/VisuallyHidden.test.tsx.snap index 6a2802c445e..f73d566be9d 100644 --- a/packages/dnb-eufemia/src/components/visually-hidden/__tests__/__snapshots__/VisuallyHidden.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/visually-hidden/__tests__/__snapshots__/VisuallyHidden.test.tsx.snap @@ -15,7 +15,7 @@ exports[`VisuallyHidden VisuallyHidden scss have to match snapshot 1`] = ` /* * Utilities */ -.dnb-visually-hidden--focusable:not(:focus):not(:focus-within) { +.dnb-visually-hidden--focusable:not(:focus, :focus-within) { user-select: none; -webkit-touch-callout: none; pointer-events: none; diff --git a/packages/dnb-eufemia/src/components/visually-hidden/style/deps.scss b/packages/dnb-eufemia/src/components/visually-hidden/style/deps.scss index e49c0230dff..3ce5e108a1e 100644 --- a/packages/dnb-eufemia/src/components/visually-hidden/style/deps.scss +++ b/packages/dnb-eufemia/src/components/visually-hidden/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-visually-hidden.scss'; diff --git a/packages/dnb-eufemia/src/components/visually-hidden/style/dnb-visually-hidden.scss b/packages/dnb-eufemia/src/components/visually-hidden/style/dnb-visually-hidden.scss index 33cf720a6ce..829f10488f1 100644 --- a/packages/dnb-eufemia/src/components/visually-hidden/style/dnb-visually-hidden.scss +++ b/packages/dnb-eufemia/src/components/visually-hidden/style/dnb-visually-hidden.scss @@ -7,7 +7,7 @@ .dnb-visually-hidden { &--focusable { - &:not(:focus):not(:focus-within) { + &:not(:focus, :focus-within) { @include srOnly(); } } diff --git a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.js.snap b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.js.snap index abb4d57f220..341f23e58f6 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.js.snap +++ b/packages/dnb-eufemia/src/extensions/payment-card/__tests__/__snapshots__/PaymentCard.test.js.snap @@ -369,7 +369,7 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` --dnb-payment-bg-pluss: linear-gradient( 187.2deg, #14555a 6.31%, - rgba(0, 52, 62, 0.4) 82.66% + rgb(0 52 62 / 40%) 82.66% ), #14555a; --dnb-payment-bg-white: linear-gradient( @@ -414,10 +414,7 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` padding: 6mm; border-radius: 3.48mm; border: 1px solid; - border-left-color: transparent; - border-right-color: transparent; - border-top-color: rgba(255, 255, 255, 0.1); - border-bottom-color: rgba(0, 0, 0, 0.2); + border-color: rgba(255, 255, 255, 0.1) transparent rgba(0, 0, 0, 0.2) transparent; color: var(--color-white); box-shadow: var(--shadow-default); background: var(--color-sea-green); @@ -540,7 +537,7 @@ exports[`PaymentCard scss have to match snapshot 1`] = ` border-radius: 4px; } .dnb-payment-card__blocking svg { - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; } .dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder { opacity: 1; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/style/deps.scss b/packages/dnb-eufemia/src/extensions/payment-card/style/deps.scss index b190045f6be..db8693ea54f 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/style/deps.scss +++ b/packages/dnb-eufemia/src/extensions/payment-card/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-payment-card.scss'; diff --git a/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss b/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss index fc697eace87..f0bd68a1af2 100644 --- a/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss +++ b/packages/dnb-eufemia/src/extensions/payment-card/style/dnb-payment-card.scss @@ -14,7 +14,7 @@ --dnb-payment-bg-pluss: linear-gradient( 187.2deg, #14555a 6.31%, - rgba(0, 52, 62, 0.4) 82.66% + rgb(0 52 62 / 40%) 82.66% ), #14555a; --dnb-payment-bg-white: linear-gradient( @@ -61,10 +61,7 @@ border-radius: 3.48mm; border: 1px solid; - border-left-color: transparent; - border-right-color: transparent; - border-top-color: rgba(255, 255, 255, 0.1); - border-bottom-color: rgba(0, 0, 0, 0.2); + border-color: rgb(255 255 255 / 10%) transparent rgb(0 0 0 / 20%) transparent; color: var(--color-white); box-shadow: var(--shadow-default); @@ -208,8 +205,8 @@ background: linear-gradient( 184.55deg, - rgba(204, 204, 204, 0.5) 4.63%, - rgba(232, 232, 232, 0.5) 84.83% + rgb(204 204 204 / 50%) 4.63%, + rgb(232 232 232 / 50%) 84.83% ); } @@ -227,7 +224,7 @@ } svg { - shape-rendering: geometricPrecision; + shape-rendering: geometricprecision; } } @@ -292,7 +289,7 @@ height: 100%; width: 100%; - background: rgba(0, 0, 0, 0.739); + background: rgb(0 0 0 / 73.9%); border-radius: inherit; } } diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap index 296209da6e8..b0439ce9e86 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap +++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.js.snap @@ -928,7 +928,7 @@ html:not([data-whatintent=touch]) .dnb-drawer-list__option--selected .dnb-drawer width: 1rem; height: 1rem; background-size: cover; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjRTlGOEY0IiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjRTlGOEY0IiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+"); } .dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::before { visibility: hidden; diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/deps.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/deps.scss index b98c9e070fb..7ece811fc58 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/style/deps.scss +++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-drawer-list.scss'; diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss index 53909149be7..bc20329bbcb 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss +++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss @@ -28,9 +28,11 @@ border-radius: calc( var(--drawer-list-options-border-radius) + 0.15rem ); + &:focus { @include fakeFocus(); } + &--focusring { @include fakeFocus('mouse'); } @@ -57,6 +59,7 @@ left: 0; right: 0; bottom: 0; + // width: 100%; // 100% width would result in no margin right height: var(--drawer-list-option-border-width); @@ -73,6 +76,7 @@ @include hover() { background-color: var(--color-mint-green-12); + .dnb-drawer-list__option__inner { color: var(--color-sea-green); background-color: var(--color-mint-green-12); @@ -114,13 +118,16 @@ &--selected &__inner { color: var(--color-white); background-color: var(--color-emerald-green); + .dnb-drawer-list__option__inner { color: inherit; background-color: inherit; } + @include hover() { color: var(--color-white); background-color: var(--color-emerald-green); + .dnb-drawer-list__option__inner { color: inherit; background-color: inherit; @@ -143,7 +150,7 @@ background-size: cover; // This SVG gfx is generated by using /assets/elements/drawer-list/check-gfx.svg - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjRTlGOEY0IiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+); + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjRTlGOEY0IiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+'); } // Remove separator line on selected items @@ -186,12 +193,14 @@ border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; } + &.last-of-type,/* only for the visual demo */ &--focus.last-of-type &__inner, &--focus.last-of-type &__inner::before { border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); } + // remove last bottom border &.last-of-type:not(#{&}--focus) &__inner::before { content: none; @@ -214,14 +223,17 @@ border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; } + &--bottom &__option--focus.closest-to-bottom &__option__inner::before { border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); } + &--top &__option--focus.closest-to-bottom &__option__inner::before { border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); } + &--top &__option--focus.closest-to-top &__option__inner::before { border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; @@ -235,6 +247,7 @@ &__triangle::before { border: none; background-color: var(--color-white); + @include defaultDropShadow(); } diff --git a/packages/dnb-eufemia/src/fragments/scroll-view/style/deps.scss b/packages/dnb-eufemia/src/fragments/scroll-view/style/deps.scss index a6ac359e8be..78dc15c49e6 100644 --- a/packages/dnb-eufemia/src/fragments/scroll-view/style/deps.scss +++ b/packages/dnb-eufemia/src/fragments/scroll-view/style/deps.scss @@ -4,5 +4,4 @@ */ @import '../../../style/core/utilities.scss'; - @import './dnb-scroll-view.scss'; diff --git a/packages/dnb-eufemia/src/fragments/scroll-view/style/dnb-scroll-view.scss b/packages/dnb-eufemia/src/fragments/scroll-view/style/dnb-scroll-view.scss index cec9c2c1768..70145e701e3 100644 --- a/packages/dnb-eufemia/src/fragments/scroll-view/style/dnb-scroll-view.scss +++ b/packages/dnb-eufemia/src/fragments/scroll-view/style/dnb-scroll-view.scss @@ -7,6 +7,7 @@ .dnb-scroll-view { overflow-x: auto; + @include scrollY(auto); // Ensure the user still can scroll a ancestor scrollarea (body) @@ -16,6 +17,7 @@ &[tabindex='0'] { &:focus { outline: none; + @include fakeFocus(); } } diff --git a/packages/dnb-eufemia/src/style/core/fonts.scss b/packages/dnb-eufemia/src/style/core/fonts.scss index b58da26a148..dda475d3aa4 100644 --- a/packages/dnb-eufemia/src/style/core/fonts.scss +++ b/packages/dnb-eufemia/src/style/core/fonts.scss @@ -12,16 +12,19 @@ font-weight: normal; font-style: normal; } + .dnb-typo-medium { font-family: var(--font-family-default); font-weight: var(--font-weight-medium); font-style: normal; } + .dnb-typo-bold { font-family: var(--font-family-default); font-weight: var(--font-weight-bold); font-style: normal; } + .dnb-typo-mono-regular { font-family: var(--font-family-monospace); font-weight: normal; diff --git a/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss b/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss index 0f26b606b11..5ea22d405ab 100644 --- a/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss +++ b/packages/dnb-eufemia/src/style/core/helper-classes/helper-classes.scss @@ -7,33 +7,42 @@ .dnb-no-focus { outline: none; } + .dnb-tab-focus { outline: none; + &:focus { @include fakeFocus('keyboard'); } } + .dnb-mouse-focus { outline: none; + &:focus { @include fakeFocus('mouse'); } } + .dnb-focus-ring { @include fakeBorder($focusRingColor, $focusRingWidth, null, !important); } + .dnb-scrollbar-appearance { @include scrollbarAppearance(); } + @import './skip-link.scss'; .dnb-alignment-helper { @include alignmentHelperClass(); @include alignmentHelper(); } + .dnb-drop-shadow { @include defaultDropShadow(); } + .dnb-sr-only { @include srOnly(); } diff --git a/packages/dnb-eufemia/src/style/core/helper-classes/skip-link.scss b/packages/dnb-eufemia/src/style/core/helper-classes/skip-link.scss index b2c42338410..1c8526aa611 100644 --- a/packages/dnb-eufemia/src/style/core/helper-classes/skip-link.scss +++ b/packages/dnb-eufemia/src/style/core/helper-classes/skip-link.scss @@ -15,6 +15,8 @@ text-align: center; user-select: none; + + /* stylelint-disable-next-line */ -webkit-user-select: none; // Safari / Touch fix outline: none; @@ -33,10 +35,10 @@ width: 150vw; height: 150vh; - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba(255 255 255 / 85%); // we use box-shadow to avoid a horizontal scrollbar - box-shadow: 150vw 150vh 0 0 rgba(255, 255, 255, 0.85); + box-shadow: 150vw 150vh 0 0 rgba(255 255 255 / 85%); } &::before { @@ -47,7 +49,7 @@ top: 0; width: 100%; height: 100%; - border-radius: 1.5rem; //same as anchor + border-radius: 1.5rem; // same as anchor background-color: var(--color-white); @@ -60,12 +62,13 @@ &:active::before { background-color: var(--color-emerald-green); } - //focus + + // focus &:focus:not(:active)::before { @include fakeFocus(); } - //focus + // focus &:focus { opacity: 1; } diff --git a/packages/dnb-eufemia/src/style/core/properties.scss b/packages/dnb-eufemia/src/style/core/properties.scss index 78a3ce700b8..13a21f0a957 100644 --- a/packages/dnb-eufemia/src/style/core/properties.scss +++ b/packages/dnb-eufemia/src/style/core/properties.scss @@ -99,11 +99,11 @@ --layout-xx-large: 90em; // 1440 (not documented yet) // Shadow - --shadow-default: 0 8px 16px rgba(51, 51, 51, 0.08); + --shadow-default: 0 8px 16px rgb(51 51 51 / 8%); --shadow-default-x: 0; --shadow-default-y: 8px; --shadow-default-blur-radius: 16px; - --shadow-default-color: rgba(51, 51, 51, 0.08); + --shadow-default-color: rgb(51 51 51 / 8%); // Easing --easing-default: cubic-bezier(0.42, 0, 0, 1); diff --git a/packages/dnb-eufemia/src/style/core/reset.scss b/packages/dnb-eufemia/src/style/core/reset.scss index 608e6d7c650..31f359bc956 100644 --- a/packages/dnb-eufemia/src/style/core/reset.scss +++ b/packages/dnb-eufemia/src/style/core/reset.scss @@ -16,20 +16,13 @@ html { cursor: default; /* 1 */ - font-family: system-ui, /* macOS 10.11-10.12 */ -apple-system, - /* Windows 6+ */ Segoe UI, /* Android 4+ */ Roboto, - /* Ubuntu 10.10+ */ Ubuntu, /* Gnome 3+ */ Cantarell, - /* KDE Plasma 5+ */ Noto Sans, /* fallback */ sans-serif, - /* macOS emoji */ 'Apple Color Emoji', - /* Windows emoji */ 'Segoe UI Emoji', - /* Windows emoji */ 'Segoe UI Symbol', - /* Linux emoji */ 'Noto Color Emoji'; /* 2 */ - - line-height: var(--line-height-basis); /* 3 */ - -moz-tab-size: 4; /* 4 */ - tab-size: 4; /* 4 */ - -ms-text-size-adjust: 100%; /* 5 */ - -webkit-text-size-adjust: 100%; /* 5 */ + font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, + Cantarell, 'Noto Sans', sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 2 */ + + line-height: var(--line-height-basis); /* 3 */ /* 4 */ + tab-size: 4; /* 4 */ /* 5 */ + text-size-adjust: 100%; /* 5 */ word-break: break-word; /* 6 */ } @@ -142,7 +135,7 @@ * in all browsers (opinionated). */ - ::-moz-selection { + ::selection { background-color: #b3d4fc; /* 1 */ color: #000; /* 1 */ text-shadow: none; @@ -195,7 +188,7 @@ */ svg:not([fill]) { - fill: currentColor; + fill: currentcolor; } /** @@ -327,7 +320,7 @@ */ input[type='search'] { - -webkit-appearance: textfield; /* 1 */ + appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } @@ -344,7 +337,8 @@ * Correct the text style of placeholders in Chrome, Edge, and Safari. */ - ::-webkit-input-placeholder { + // stylelint-disable-next-line + ::input-placeholder { color: inherit; opacity: 0.54; } @@ -354,7 +348,7 @@ */ ::-webkit-search-decoration { - -webkit-appearance: none; + appearance: none; } /** @@ -432,7 +426,7 @@ summary, textarea, [tabindex] { - -ms-touch-action: manipulation; /* 1 */ + /* 1 */ touch-action: manipulation; /* 2 */ } @@ -493,12 +487,15 @@ a:hover { text-decoration: none; } + .dnb-anchor--active { color: var(--color-mint-green) !important; } + .dnb-anchor--contrast:not(:hover) { color: var(--color-white) !important; } + a.dnb-button--primary { color: var(--color-white); } @@ -514,6 +511,7 @@ text-align: inherit; background-color: initial; } + i { font-style: italic; } @@ -523,6 +521,7 @@ #root { width: 100%; } + body#dnbLayoutDefault #wrapper, body#dnbLayoutDefaultStartPage #wrapper { width: 100%; diff --git a/packages/dnb-eufemia/src/style/core/scopes.scss b/packages/dnb-eufemia/src/style/core/scopes.scss index dd26991ccad..0f0ee392a42 100644 --- a/packages/dnb-eufemia/src/style/core/scopes.scss +++ b/packages/dnb-eufemia/src/style/core/scopes.scss @@ -14,19 +14,30 @@ color: var(--color-black-80, #333); // The new DNB font needs font smoothing to be thinner on webkit and FF + /* stylelint-disable-next-line */ -moz-osx-font-smoothing: grayscale; + + /* stylelint-disable-next-line */ -webkit-font-smoothing: antialiased; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + /* stylelint-disable-next-line */ + -webkit-tap-highlight-color: rgba(0 0 0 / 0); /** * Ensure consistency and use the same as HTML reset -> html {...} * between base and code package */ - -moz-tab-size: 4; tab-size: 4; + + /* stylelint-disable-next-line */ + -moz-tab-size: 4; + + /* stylelint-disable-next-line */ -ms-text-size-adjust: 100%; + + /* stylelint-disable-next-line */ -webkit-text-size-adjust: 100%; + word-break: break-word; @content; diff --git a/packages/dnb-eufemia/src/style/core/utilities.scss b/packages/dnb-eufemia/src/style/core/utilities.scss index fc585148726..f240beb8896 100644 --- a/packages/dnb-eufemia/src/style/core/utilities.scss +++ b/packages/dnb-eufemia/src/style/core/utilities.scss @@ -55,7 +55,7 @@ } } -$focusRingWidth: 0.125rem; //2px +$focusRingWidth: 0.125rem; // 2px $focusRingColor: var(--color-emerald-green); @mixin fakeFocus($whatinput: null, $color: null, $inset: null) { outline: none; @@ -314,7 +314,7 @@ $breakpoints: ( } @function str-replace($string, $search, $replace: '') { - $index: str-index($string, $search); + $index: string.index($string, $search); @if $index { @return str-slice($string, 1, $index - 1) + $replace + diff --git a/packages/dnb-eufemia/src/style/dnb-ui-body.scss b/packages/dnb-eufemia/src/style/dnb-ui-body.scss index 42a4b60ea4a..91b726096da 100644 --- a/packages/dnb-eufemia/src/style/dnb-ui-body.scss +++ b/packages/dnb-eufemia/src/style/dnb-ui-body.scss @@ -6,7 +6,6 @@ @import './core/utilities.scss'; @import './core/properties.scss'; @import './core/scopes.scss'; - @include globalReset(); // make sure we have dynamic root font size diff --git a/packages/dnb-eufemia/src/style/dnb-ui-core.scss b/packages/dnb-eufemia/src/style/dnb-ui-core.scss index f371e3b7baf..633a349c278 100644 --- a/packages/dnb-eufemia/src/style/dnb-ui-core.scss +++ b/packages/dnb-eufemia/src/style/dnb-ui-core.scss @@ -9,7 +9,6 @@ @import './core/scopes.scss'; @import './core/fonts.scss'; @import './core/helper-classes/helper-classes.scss'; - @include globalReset(); // make sure we have dynamic root font size diff --git a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap index 8841bd02eb8..5763dc54d4d 100644 --- a/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap +++ b/packages/dnb-eufemia/src/style/elements/__tests__/__snapshots__/Elements.test.js.snap @@ -28,16 +28,14 @@ button.dnb-anchor { border: none; background: none; appearance: none; - -moz-appearance: none; - -webkit-appearance: none; } .dnb-anchor { display: inline; - padding: 0.05575em 0.125em 0.05575em; + padding: 0.05575em 0.125em; font-size: var(--font-size-basis); text-decoration: underline; - text-decoration-color: currentColor; + text-decoration-color: currentcolor; text-decoration-thickness: 0.0938rem; text-underline-offset: 0.25em; border-radius: 0; @@ -45,7 +43,7 @@ button.dnb-anchor { transition: background-color 200ms ease-in-out, border-radius 200ms ease-in-out; } sup .dnb-anchor, sub .dnb-anchor { - padding: 0 0.025em 0; + padding: 0 0.025em; } .dnb-p .dnb-anchor, .dnb-lead .dnb-anchor, .dnb-h--xx-large .dnb-anchor, .dnb-h--x-large .dnb-anchor, .dnb-h--large .dnb-anchor, .dnb-h--medium .dnb-anchor, .dnb-h--basis .dnb-anchor, .dnb-h--small .dnb-anchor, .dnb-h--x-small .dnb-anchor { font-size: inherit; @@ -83,12 +81,12 @@ html[data-whatinput=keyboard] .dnb-anchor:focus { .dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor { text-decoration: none; } -.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon) { +.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon) { position: relative; background-size: 0; - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4=); + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4="); } -.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon)::after { +.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon)::after { content: ""; position: relative; display: inline-block; @@ -102,10 +100,10 @@ html[data-whatinput=keyboard] .dnb-anchor:focus { transition: transform 0.3s ease-out, filter 1s ease-in-out; transform-origin: bottom; } -.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):active { - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTExIDBhLjc1Ljc1IDAgMDAwIDEuNVYwem00IC43NWguNzVBLjc1Ljc1IDAgMDAxNSAwdi43NXptLS43NSA0YS43NS43NSAwIDAwMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMDAtMS41IDBoMS41em0tLjc1IDYuNVYxNmMuNDEgMCAuNzUtLjM0Ljc1LS43NUgxNXptLTE0IDBILjI1YzAgLjQxLjM0Ljc1Ljc1Ljc1di0uNzV6TTEgLjc1VjBhLjc1Ljc1IDAgMDAtLjc1Ljc1SDF6bTUuNzUuNzVhLjc1Ljc1IDAgMDAwLTEuNXYxLjV6bTIuNzIgMy43MmEuNzUuNzUgMCAwMDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4bDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiCiAgICBmaWxsPSIjYTVlMWQyIgogIC8+Cjwvc3ZnPg==); +.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon):active { + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTExIDBhLjc1Ljc1IDAgMDAwIDEuNVYwem00IC43NWguNzVBLjc1Ljc1IDAgMDAxNSAwdi43NXptLS43NSA0YS43NS43NSAwIDAwMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMDAtMS41IDBoMS41em0tLjc1IDYuNVYxNmMuNDEgMCAuNzUtLjM0Ljc1LS43NUgxNXptLTE0IDBILjI1YzAgLjQxLjM0Ljc1Ljc1Ljc1di0uNzV6TTEgLjc1VjBhLjc1Ljc1IDAgMDAtLjc1Ljc1SDF6bTUuNzUuNzVhLjc1Ljc1IDAgMDAwLTEuNXYxLjV6bTIuNzIgMy43MmEuNzUuNzUgMCAwMDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4bDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiCiAgICBmaWxsPSIjYTVlMWQyIgogIC8+Cjwvc3ZnPg=="); } -.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon)::after { +.dnb-anchor[target=_blank]:not(:empty, .dnb-anchor--no-icon)::after { top: 0.125em; } [data-visual-test-wrapper] .dnb-anchor { @@ -541,7 +539,7 @@ sub { width: 3em; height: 3em; background-size: cover; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg==); + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg=="); } .dnb-blockquote, .dnb-blockquote.dnb-blockquote--left { padding-left: 6rem; @@ -908,7 +906,7 @@ html[data-whatinput=keyboard] .dnb-blockquote:not(.dnb-blockquote--no-background */ .dnb-code { display: inline-block; - padding: 0.25em 0.25em; /* 2px 4px */ + padding: 0.25em; /* 2px 4px */ font-size: inherit; text-decoration: inherit; line-height: var(--line-height-xx-small--em); @@ -1046,7 +1044,7 @@ del .dnb-code { width: 100%; height: 1px; color: inherit; - background-color: currentColor; + background-color: currentcolor; border-radius: 0.5px; } .dnb-hr--fullscreen::after { @@ -1059,7 +1057,7 @@ del .dnb-code { * 60% and 65% for best result on low res screens, like on Chromebook (Acer) * Else the line will dissapear! */ - background-image: linear-gradient(to bottom, currentColor 60%, transparent 65%); + background-image: linear-gradient(to bottom, currentcolor 60%, transparent 65%); background-size: 100% 1px; background-color: transparent; } @@ -1067,7 +1065,7 @@ del .dnb-code { height: 2px; border-radius: 0.75px; /* Revert the hairline halv */ - background-image: linear-gradient(to bottom, currentColor 51%, transparent 51%); + background-image: linear-gradient(to bottom, currentcolor 51%, transparent 51%); background-size: 100% 3px; background-color: transparent; } diff --git a/packages/dnb-eufemia/src/style/elements/anchor-mixins.scss b/packages/dnb-eufemia/src/style/elements/anchor-mixins.scss index e9dec9bf94b..4e4718a5902 100644 --- a/packages/dnb-eufemia/src/style/elements/anchor-mixins.scss +++ b/packages/dnb-eufemia/src/style/elements/anchor-mixins.scss @@ -9,11 +9,11 @@ // make sure we have always `display: inline;` as inline-block is breaking the border-bottom display: inline; - padding: 0.05575em 0.125em 0.05575em; // the total body height will then be 24px if font-size is 18px + padding: 0.05575em 0.125em; // the total body height will then be 24px if font-size is 18px font-size: var(--font-size-basis); text-decoration: underline; - text-decoration-color: currentColor; + text-decoration-color: currentcolor; text-decoration-thickness: 0.0938rem; text-underline-offset: 0.25em; border-radius: 0; @@ -26,7 +26,7 @@ sup &, sub & { - padding: 0 0.025em 0; + padding: 0 0.025em; } .dnb-p &, @@ -53,6 +53,7 @@ text-decoration: none; } } + @mixin resetBorderRadius() { &, &:hover, @@ -61,13 +62,16 @@ border-radius: 0; } } + @mixin resetanchorHoverStyle() { &:hover { color: inherit; + // in case we don't want to change the color to the body color background-color: transparent; } } + @mixin resetAnimationStyle() { transition: none; } @@ -77,27 +81,35 @@ color: var(--color-sea-green); background-color: var(--color-mint-green-50); border-radius: 0.25em; + @include resetUnderlineStyle(); + @if mixin-exists('anchorHoverStyleCustomisation') { @include anchorHoverStyleCustomisation(); } } + @mixin anchorActiveStyle() { color: var(--color-mint-green); background-color: var(--color-emerald-green); border-radius: 0.25em; + @include resetUnderlineStyle(); + @if mixin-exists('anchorActiveStyleCustomisation') { @include anchorActiveStyleCustomisation(); } } + @mixin anchorFocusStyle($whatinput: null) { &:not(:active) { color: var(--color-sea-green); background-color: transparent; + @include resetAnimationStyle(); @include resetUnderlineStyle(); } + @if $whatinput { @include fakeFocus($whatinput); } @else { @@ -116,22 +128,26 @@ background-color: var(--color-white); text-decoration: none; } + &:active { color: $contrastColor; background-color: var(--color-white); } + &:not(:disabled):focus { color: var(--color-white); background-color: transparent; + @include fakeFocus(null, var(--color-white)); } } + @mixin anchorIconStyle() { position: relative; // use this method, so it can get replaced by inline JS background-size: 0; - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4=); + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgMGEuNzUuNzUgMCAwMDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwMDE1IDB2Ljc1em0tLjc1IDRhLjc1Ljc1IDAgMDAxLjUgMGgtMS41em0xLjUgNGEuNzUuNzUgMCAwMC0xLjUgMGgxLjV6bS0uNzUgNi41VjE2Yy40MSAwIC43NS0uMzQuNzUtLjc1SDE1em0tMTQgMEguMjVjMCAuNDEuMzQuNzUuNzUuNzV2LS43NXpNMSAuNzVWMGEuNzUuNzUgMCAwMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwMDAtMS41djEuNXptMi43MiAzLjcyYS43NS43NSAwIDAwMS4wNiAxLjA2TDkuNDcgNS4yMnpNMTQuMjUuNzV2NGgxLjV2LTRoLTEuNXptMCA4djYuNWgxLjV2LTYuNWgtMS41ek0xNSAxNC41SDFWMTZoMTR2LTEuNXptLTEzLjI1Ljc1Vi43NUguMjV2MTQuNWgxLjV6TTEgMS41aDUuNzVWMEgxdjEuNXptMTAgMGg0VjBoLTR2MS41em0tLjQ3IDQuNzhsNS01TDE0LjQ3LjIybC01IDUgMS4wNiAxLjA2eiIgZmlsbD0iIzAwNzI3MiIgLz48L3N2Zz4="); // NOT IE/Edge compatible // background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0a.75.75 0 000 1.5V0zm4 .75h.75A.75.75 0 0015 0v.75zm-.75 4a.75.75 0 001.5 0h-1.5zm1.5 4a.75.75 0 00-1.5 0h1.5zm-.75 6.5V16c.41 0 .75-.34.75-.75H15zm-14 0H.25c0 .41.34.75.75.75v-.75zM1 .75V0a.75.75 0 00-.75.75H1zm5.75.75a.75.75 0 000-1.5v1.5zm2.72 3.72a.75.75 0 001.06 1.06L9.47 5.22zM14.25.75v4h1.5v-4h-1.5zm0 8v6.5h1.5v-6.5h-1.5zM15 14.5H1V16h14v-1.5zm-13.25.75V.75H.25v14.5h1.5zM1 1.5h5.75V0H1v1.5zm10 0h4V0h-4v1.5zm-.47 4.78l5-5L14.47.22l-5 5 1.06 1.06z' fill='%23007272' /%3E%3C/svg%3E"); @@ -158,13 +174,15 @@ transition: transform 0.3s ease-out, filter 1s ease-in-out; transform-origin: bottom; } + &:active { - background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTExIDBhLjc1Ljc1IDAgMDAwIDEuNVYwem00IC43NWguNzVBLjc1Ljc1IDAgMDAxNSAwdi43NXptLS43NSA0YS43NS43NSAwIDAwMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMDAtMS41IDBoMS41em0tLjc1IDYuNVYxNmMuNDEgMCAuNzUtLjM0Ljc1LS43NUgxNXptLTE0IDBILjI1YzAgLjQxLjM0Ljc1Ljc1Ljc1di0uNzV6TTEgLjc1VjBhLjc1Ljc1IDAgMDAtLjc1Ljc1SDF6bTUuNzUuNzVhLjc1Ljc1IDAgMDAwLTEuNXYxLjV6bTIuNzIgMy43MmEuNzUuNzUgMCAwMDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4bDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiCiAgICBmaWxsPSIjYTVlMWQyIgogIC8+Cjwvc3ZnPg==); + background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aAogICAgZD0iTTExIDBhLjc1Ljc1IDAgMDAwIDEuNVYwem00IC43NWguNzVBLjc1Ljc1IDAgMDAxNSAwdi43NXptLS43NSA0YS43NS43NSAwIDAwMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMDAtMS41IDBoMS41em0tLjc1IDYuNVYxNmMuNDEgMCAuNzUtLjM0Ljc1LS43NUgxNXptLTE0IDBILjI1YzAgLjQxLjM0Ljc1Ljc1Ljc1di0uNzV6TTEgLjc1VjBhLjc1Ljc1IDAgMDAtLjc1Ljc1SDF6bTUuNzUuNzVhLjc1Ljc1IDAgMDAwLTEuNXYxLjV6bTIuNzIgMy43MmEuNzUuNzUgMCAwMDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4bDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiCiAgICBmaWxsPSIjYTVlMWQyIgogIC8+Cjwvc3ZnPg=="); // NOT IE/Edge compatible // background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0a.75.75 0 000 1.5V0zm4 .75h.75A.75.75 0 0015 0v.75zm-.75 4a.75.75 0 001.5 0h-1.5zm1.5 4a.75.75 0 00-1.5 0h1.5zm-.75 6.5V16c.41 0 .75-.34.75-.75H15zm-14 0H.25c0 .41.34.75.75.75v-.75zM1 .75V0a.75.75 0 00-.75.75H1zm5.75.75a.75.75 0 000-1.5v1.5zm2.72 3.72a.75.75 0 001.06 1.06L9.47 5.22zM14.25.75v4h1.5v-4h-1.5zm0 8v6.5h1.5v-6.5h-1.5zM15 14.5H1V16h14v-1.5zm-13.25.75V.75H.25v14.5h1.5zM1 1.5h5.75V0H1v1.5zm10 0h4V0h-4v1.5zm-.47 4.78l5-5L14.47.22l-5 5 1.06 1.06z' fill='%23a5e1d2' /%3E%3C/svg%3E"); } } + @mixin anchorStyle() { @include anchorDefaultStyle(); @@ -172,16 +190,19 @@ &:focus { @include anchorFocusStyle(); } + &:hover, &:active { @include anchorHoverStyle(); } + &:active { @include anchorActiveStyle(); } - &[target='_blank']:not(:empty):not(.dnb-anchor--no-icon) { + &[target='_blank']:not(:empty, .dnb-anchor--no-icon) { @include anchorIconStyle(); + &::after { top: 0.125em; } @@ -189,6 +210,7 @@ transition: background-color 200ms ease-in-out, border-radius 200ms ease-in-out; + [data-visual-test-wrapper] & { transition: none; } @@ -196,6 +218,7 @@ // other stuff, not related to the Anchor directly .dnb-icon { display: inline-block; + // -1px to center the icons against large chars transform: translateY(-0.0625em); } diff --git a/packages/dnb-eufemia/src/style/elements/anchor.scss b/packages/dnb-eufemia/src/style/elements/anchor.scss index 0c35c922e29..2ea6e43614e 100644 --- a/packages/dnb-eufemia/src/style/elements/anchor.scss +++ b/packages/dnb-eufemia/src/style/elements/anchor.scss @@ -8,24 +8,26 @@ button.dnb-anchor { cursor: pointer; - // to get the buton to 32px - line-height: calc(var(--line-height-basis) + 0.125rem); //26px + // to get the button to 32px + line-height: calc(var(--line-height-basis) + 0.125rem); // 26px border: none; - background: none; - appearance: none; // because we have "appearance: button" in reset.scss - -moz-appearance: none; // and use prefix to make sure webkit does a good job - -webkit-appearance: none; // and use prefix to make sure webkit does a good job + background: none; // because we have "appearance: button" in reset.scss // and use prefix to make sure webkit does a good job + appearance: none; // and use prefix to make sure webkit does a good job } + .dnb-anchor { @include anchorStyle(); } + .dnb-anchor--hover { @include anchorHoverStyle(); } + .dnb-anchor--active { @include anchorActiveStyle(); } + .dnb-anchor--focus { @include anchorFocusStyle('mouse'); } @@ -42,18 +44,23 @@ button.dnb-anchor { @include resetanchorHoverStyle(); @include resetAnimationStyle(); } + .dnb-anchor--no-underline { @include resetUnderlineStyle(); } + .dnb-anchor--no-hover { @include resetanchorHoverStyle(); } + .dnb-anchor--no-radius { @include resetBorderRadius(); } + .dnb-anchor--no-animation { @include resetAnimationStyle(); } + .dnb-anchor--contrast { @include useAnchorContrastStyle(); } @@ -74,6 +81,7 @@ a.dnb-button { .dnb-skeleton > .dnb-anchor, .dnb-anchor.dnb-skeleton { text-decoration: none; + &::after { filter: grayscale(100%) opacity(0.3); } diff --git a/packages/dnb-eufemia/src/style/elements/blockquote.scss b/packages/dnb-eufemia/src/style/elements/blockquote.scss index 57c2fe80500..3fd4ede7573 100644 --- a/packages/dnb-eufemia/src/style/elements/blockquote.scss +++ b/packages/dnb-eufemia/src/style/elements/blockquote.scss @@ -31,7 +31,7 @@ background-size: cover; - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg==); + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0ibm9uZSI+ICA8cGF0aCBmaWxsPSIjQTVFMUQyIiBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0zNy41IDI3LjVhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6Ii8+ICA8cGF0aCBzdHJva2U9IiNBNUUxRDIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik00Ni41IDE4LjVhMjEgMjEgMCAwIDEtMjEgMjEiLz4gIDxwYXRoIGZpbGw9IiNBNUUxRDIiIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTEzLjUgMjcuNWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHoiLz4gIDxwYXRoIHN0cm9rZT0iI0E1RTFEMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTIyLjUgMTguNWEyMSAyMSAwIDAgMS0yMSAyMSIvPjwvc3ZnPg=='); } // default diff --git a/packages/dnb-eufemia/src/style/elements/code.scss b/packages/dnb-eufemia/src/style/elements/code.scss index 417d36fd901..95706b86ded 100644 --- a/packages/dnb-eufemia/src/style/elements/code.scss +++ b/packages/dnb-eufemia/src/style/elements/code.scss @@ -14,7 +14,7 @@ &:not([class*='dnb-space']) { margin: -0.25em 0; } - padding: 0.25em 0.25em; /* 2px 4px */ + padding: 0.25em; /* 2px 4px */ font-size: inherit; text-decoration: inherit; @@ -25,6 +25,7 @@ border-radius: 0.1875em; } + @mixin preStyle() { display: block; overflow: auto; @@ -56,18 +57,22 @@ pre { padding: 1rem; } + .dnb-spacing pre { @include defaultSpacing(); } + &.dnb-pre--focus { @include fakeBorder(var(--color-sea-green), 0.25rem); } } + @mixin codeTag() { code { @include codeStyle(); } } + @mixin preTag() { pre { @include preStyle(); @@ -77,9 +82,11 @@ .dnb-code { @include codeStyle(); } + .dnb-pre { @include preStyle(); } + .dnb-spacing .dnb-pre { @include defaultSpacing(); } diff --git a/packages/dnb-eufemia/src/style/elements/form.scss b/packages/dnb-eufemia/src/style/elements/form.scss index 6c53c10894d..a260a52265a 100644 --- a/packages/dnb-eufemia/src/style/elements/form.scss +++ b/packages/dnb-eufemia/src/style/elements/form.scss @@ -7,6 +7,7 @@ font-size: var(--font-size-basis); line-height: var(--line-height-basis); } + @mixin formTag() { // label, // input, diff --git a/packages/dnb-eufemia/src/style/elements/hr.scss b/packages/dnb-eufemia/src/style/elements/hr.scss index 9555f073784..8ee64a38222 100644 --- a/packages/dnb-eufemia/src/style/elements/hr.scss +++ b/packages/dnb-eufemia/src/style/elements/hr.scss @@ -29,14 +29,16 @@ height: 1px; color: inherit; - background-color: currentColor; + background-color: currentcolor; border-radius: 0.5px; } } + @mixin hrTag() { hr { @include hrStyle(); } + .dnb-spacing hr { @include defaultSpacing(); } @@ -59,7 +61,7 @@ */ background-image: linear-gradient( to bottom, - currentColor 60%, + currentcolor 60%, transparent 65% ); background-size: 100% 1px; @@ -73,13 +75,14 @@ /* Revert the hairline halv */ background-image: linear-gradient( to bottom, - currentColor 51%, + currentcolor 51%, transparent 51% ); background-size: 100% 3px; background-color: transparent; } } + .dnb-spacing .dnb-hr { @include defaultSpacing(); } diff --git a/packages/dnb-eufemia/src/style/elements/image.scss b/packages/dnb-eufemia/src/style/elements/image.scss index a2e1553206f..2e24a4e47b4 100644 --- a/packages/dnb-eufemia/src/style/elements/image.scss +++ b/packages/dnb-eufemia/src/style/elements/image.scss @@ -32,6 +32,7 @@ background-color: var(--color-black-8); } } + @mixin imageTag() { img { @include imageStyle(); @@ -41,6 +42,7 @@ .dnb-img { display: inline-flex; flex-direction: column; + &:not([class*='dnb-space']) { margin: 0; } diff --git a/packages/dnb-eufemia/src/style/elements/label.scss b/packages/dnb-eufemia/src/style/elements/label.scss index 1f432184061..839b226560e 100644 --- a/packages/dnb-eufemia/src/style/elements/label.scss +++ b/packages/dnb-eufemia/src/style/elements/label.scss @@ -12,6 +12,7 @@ cursor: not-allowed; } } + @mixin labelTag() { label { @include labelStyle(); diff --git a/packages/dnb-eufemia/src/style/elements/typography.scss b/packages/dnb-eufemia/src/style/elements/typography.scss index 25fe06c7166..f412e3104a9 100644 --- a/packages/dnb-eufemia/src/style/elements/typography.scss +++ b/packages/dnb-eufemia/src/style/elements/typography.scss @@ -5,6 +5,7 @@ @mixin headingDefaults() { padding: 0; + &:not([class*='dnb-space']) { margin: 0; } @@ -17,6 +18,7 @@ .dnb-icon--default { font-size: 1em; } + .dnb-icon--medium { font-size: 1.5em; } @@ -32,6 +34,7 @@ @include headingDefaultsCustomisation(); } } + @mixin headingSize_xx-large() { font-size: var(--font-size-xx-large); line-height: var(--line-height-x-large); @@ -46,6 +49,7 @@ @include headingSize_xx-largeCustomisation(); } } + @mixin headingSize_x-large() { font-size: var(--font-size-x-large); line-height: var(--line-height-large); @@ -60,6 +64,7 @@ @include headingSize_x-largeCustomisation(); } } + @mixin headingSize_large() { font-size: var(--font-size-large); line-height: var(--line-height-medium); @@ -73,6 +78,7 @@ @include headingSize_largeCustomisation(); } } + // Like Lead / --lead @mixin headingSize_medium() { font-size: var(--font-size-medium); @@ -87,6 +93,7 @@ @include headingSize_mediumCustomisation(); } } + @mixin headingSize_basis() { font-size: var(--font-size-basis); line-height: var(--line-height-basis); @@ -96,6 +103,7 @@ line-height: var(--line-height-small); } } + @mixin headingSize_small() { font-size: var(--font-size-small); line-height: var(--line-height-small); @@ -105,10 +113,12 @@ line-height: var(--line-height-small); } } + @mixin headingSize_x-small() { font-size: var(--font-size-x-small); line-height: var(--line-height-x-small); } + @mixin paragraphStyle() { font-size: var(--font-size-basis); color: var(--theme-color-black-80, currentColor); @@ -117,6 +127,7 @@ &:not([class*='space__top']) { margin-top: 0; } + &:not([class*='space__bottom']) { margin-bottom: 0; } @@ -144,28 +155,34 @@ font-size: var(--font-size-xx-large); line-height: var(--line-height-x-large); } + &__size--x-large { font-size: var(--font-size-x-large); line-height: var(--line-height-x-large); } + &__size--large { font-size: var(--font-size-large); line-height: var(--line-height-large); } + &__size--basis { font-size: var(--font-size-basis); line-height: var(--line-height-basis); } + &__size--medium { font-size: var(--font-size-medium); line-height: var(--line-height-medium); } + &--small ,// backwards compatibility &__size--small, & > small { font-size: var(--font-size-small); line-height: var(--line-height-small); } + &--x-small ,// backwards compatibility &__size--x-small { font-size: var(--font-size-x-small); @@ -178,46 +195,57 @@ font-style: italic; } } + @mixin headingSpacing_xx-large() { &:not([class*='space__top']) { margin-top: 3rem; } + &:not([class*='space__bottom']) { margin-bottom: 2.5rem; } } + @mixin headingSpacing_x-large() { &:not([class*='space__top']) { margin-top: 3rem; } + &:not([class*='space__bottom']) { margin-bottom: 1rem; } } + @mixin headingSpacing_large() { &:not([class*='space__top']) { margin-top: 3rem; } + &:not([class*='space__bottom']) { margin-bottom: 1rem; } } + @mixin headingSpacing() { &:not([class*='space__top']) { margin-top: 2rem; } + &:not([class*='space__bottom']) { margin-bottom: 1rem; } } + @mixin typographyTags() { p { @include paragraphStyle(); } + b, strong { font-weight: var(--font-weight-bold); } + small { font-size: var(--font-size-small); } @@ -230,21 +258,27 @@ h6 { @include headingDefaults(); } + h1 { @include headingSize_xx-large(); } + h2 { @include headingSize_large(); } + h3 { @include headingSize_medium(); } + h4 { @include headingSize_basis(); } + h5 { @include headingSize_small(); } + h6 { @include headingSize_x-small(); } @@ -264,10 +298,12 @@ .dnb-core-style & h1 { @include headingSpacing_xx-large(); } + h2, .dnb-core-style & h2 { @include headingSpacing_large(); } + h3, h4, h5, @@ -278,6 +314,7 @@ .dnb-core-style & h6 { @include headingSpacing(); } + p, .dnb-core-style & p { @include defaultSpacing(); @@ -338,9 +375,11 @@ sub { .dnb-h--basis { @include headingSize_basis(); } + .dnb-h--small { @include headingSize_small(); } + .dnb-h--x-small { @include headingSize_x-small(); } @@ -372,10 +411,12 @@ sub { .dnb-core-style & .dnb-h--xx-large { @include headingSpacing_xx-large(); } + .dnb-h--x-large, .dnb-core-style & .dnb-h--x-large { @include headingSpacing_x-large(); } + .dnb-h--large, .dnb-core-style & .dnb-h--large { @include headingSpacing_large(); diff --git a/packages/dnb-eufemia/src/style/elements/ui-elements.scss b/packages/dnb-eufemia/src/style/elements/ui-elements.scss index 5261e711e09..31b5ae3ea66 100644 --- a/packages/dnb-eufemia/src/style/elements/ui-elements.scss +++ b/packages/dnb-eufemia/src/style/elements/ui-elements.scss @@ -5,7 +5,6 @@ // include spacings here, cause they are used in elements @import './ui-spacing.scss'; - @import './anchor.scss'; @import './typography.scss'; @import './blockquote.scss'; diff --git a/packages/dnb-eufemia/src/style/elements/ui-spacing.scss b/packages/dnb-eufemia/src/style/elements/ui-spacing.scss index 7c20c51f3c0..8bd1e650eba 100644 --- a/packages/dnb-eufemia/src/style/elements/ui-spacing.scss +++ b/packages/dnb-eufemia/src/style/elements/ui-spacing.scss @@ -8,6 +8,7 @@ &:not([class*='dnb-space__top']) { margin-top: 0; } + &:not([class*='dnb-space__bottom']) { margin-bottom: 1.5rem; } diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/dnb-theme-eiendom.scss b/packages/dnb-eufemia/src/style/themes/theme-eiendom/dnb-theme-eiendom.scss index 420876b5a76..9b31fc8ed1c 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/dnb-theme-eiendom.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/dnb-theme-eiendom.scss @@ -7,10 +7,12 @@ @mixin anchorDefaultStyleCustomisation() { color: var(--color-emerald-green); } + @mixin anchorHoverStyleCustomisation() { color: var(--color-sea-green); background-color: transparent; } + @mixin anchorActiveStyleCustomisation() { color: var(--color-sea-green); background-color: var(--color-pistachio); diff --git a/yarn.lock b/yarn.lock index e62fc465ff4..f92edec2e83 100644 --- a/yarn.lock +++ b/yarn.lock @@ -401,7 +401,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:7.16.0, @babel/core@npm:>=7.9.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.15.5, @babel/core@npm:^7.7.5": +"@babel/core@npm:7.16.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.15.5, @babel/core@npm:^7.7.5": version: 7.16.0 resolution: "@babel/core@npm:7.16.0" dependencies: @@ -3259,6 +3259,42 @@ __metadata: languageName: node linkType: hard +"@csstools/css-parser-algorithms@npm:^2.0.1": + version: 2.0.1 + resolution: "@csstools/css-parser-algorithms@npm:2.0.1" + peerDependencies: + "@csstools/css-tokenizer": ^2.0.0 + checksum: 9f168cfc8fa30ba19fcbe7632d947b74beea494db60cf0eb250f7b77fe72239fb5e6d292b035144dbc52977fb4768f157064f8358530701fe56e5ef2993174c7 + languageName: node + linkType: hard + +"@csstools/css-tokenizer@npm:^2.0.1": + version: 2.0.2 + resolution: "@csstools/css-tokenizer@npm:2.0.2" + checksum: 49bd0a191954b56e9fa50d4a3e2d04059196f04efe398c0cb3c2cbcc18549313d984cd0b8c3faa161d81768256014461d1b4d0f40a67764c9c7a6c0e14a97fea + languageName: node + linkType: hard + +"@csstools/media-query-list-parser@npm:^2.0.1": + version: 2.0.1 + resolution: "@csstools/media-query-list-parser@npm:2.0.1" + peerDependencies: + "@csstools/css-parser-algorithms": ^2.0.0 + "@csstools/css-tokenizer": ^2.0.0 + checksum: f30b2a9e1aa3c2d8e98d3ac79463ab514ba4c4577c4cc6120a69d9f4562e521766adb62fc44ffee2226a967bdcfcf86a46bdaf625d21af8f21caa99553994d60 + languageName: node + linkType: hard + +"@csstools/selector-specificity@npm:^2.1.1": + version: 2.1.1 + resolution: "@csstools/selector-specificity@npm:2.1.1" + peerDependencies: + postcss: ^8.4 + postcss-selector-parser: ^6.0.10 + checksum: 392ab62732e93aa8cbea445bf3485c1acbbecc8ec087b200e06c9ddd2acf740fd1fe46abdacf813e7a50a95a60346377ee3eecb4e1fe3709582e2851430b376a + languageName: node + linkType: hard + "@discoveryjs/json-ext@npm:^0.5.3": version: 0.5.5 resolution: "@discoveryjs/json-ext@npm:0.5.5" @@ -3406,11 +3442,9 @@ __metadata: simple-git: 3.16.0 storybook-utils: "workspace:*" style-loader: 3.3.1 - stylelint: 13.13.1 - stylelint-config-prettier: 8.0.2 - stylelint-config-recommended: 5.0.0 - stylelint-config-standard: 22.0.0 - stylelint-scss: 3.21.0 + stylelint: 15.1.0 + stylelint-config-recommended: 10.0.1 + stylelint-config-standard-scss: 7.0.1 svg2vectordrawable: 2.9.1 svgo: 3.0.0 tar: 6.1.11 @@ -6794,31 +6828,6 @@ __metadata: languageName: node linkType: hard -"@stylelint/postcss-css-in-js@npm:^0.37.2": - version: 0.37.2 - resolution: "@stylelint/postcss-css-in-js@npm:0.37.2" - dependencies: - "@babel/core": ">=7.9.0" - peerDependencies: - postcss: ">=7.0.0" - postcss-syntax: ">=0.36.2" - checksum: cc9b5d1bd93b85c5e32754bf28b99031c783bd87a178542e42f84e627f00907c556d3c7839766fe47bb5a8eaa87eae89287e6cc939b9b91e1ab3e7c44acc3014 - languageName: node - linkType: hard - -"@stylelint/postcss-markdown@npm:^0.36.2": - version: 0.36.2 - resolution: "@stylelint/postcss-markdown@npm:0.36.2" - dependencies: - remark: ^13.0.0 - unist-util-find-all-after: ^3.0.2 - peerDependencies: - postcss: ">=7.0.0" - postcss-syntax: ">=0.36.2" - checksum: 5e39bca575356992c27d59fd9ca9ee38867369bdf5bb3d9e31dc074680b77b4b820d48074e5cc0337e047edd8c1e7ef18996bc83199376138f42fbc8ed0cabeb - languageName: node - linkType: hard - "@svgr/babel-plugin-add-jsx-attribute@npm:^6.5.1": version: 6.5.1 resolution: "@svgr/babel-plugin-add-jsx-attribute@npm:6.5.1" @@ -11297,7 +11306,7 @@ __metadata: languageName: node linkType: hard -"chalk@npm:4.1.2, chalk@npm:^4.0, chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.1, chalk@npm:^4.1.2": +"chalk@npm:4.1.2, chalk@npm:^4.0, chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.2": version: 4.1.2 resolution: "chalk@npm:4.1.2" dependencies: @@ -11861,15 +11870,6 @@ __metadata: languageName: node linkType: hard -"clone-regexp@npm:^2.1.0": - version: 2.2.0 - resolution: "clone-regexp@npm:2.2.0" - dependencies: - is-regexp: ^2.0.0 - checksum: 3624905a98920ad5c196080f4ea4379fa42b12f3b1d1272d958bb79c194508d2aec85160c25846f0016ca861a064316b213a565cf53b81a513047f89cf877803 - languageName: node - linkType: hard - "clone-response@npm:^1.0.2": version: 1.0.2 resolution: "clone-response@npm:1.0.2" @@ -12091,6 +12091,13 @@ __metadata: languageName: node linkType: hard +"colord@npm:^2.9.3": + version: 2.9.3 + resolution: "colord@npm:2.9.3" + checksum: 95d909bfbcfd8d5605cbb5af56f2d1ce2b323990258fd7c0d2eb0e6d3bb177254d7fb8213758db56bb4ede708964f78c6b992b326615f81a18a6aaf11d64c650 + languageName: node + linkType: hard + "colorette@npm:^1.2.2, colorette@npm:^1.4.0": version: 1.4.0 resolution: "colorette@npm:1.4.0" @@ -12691,6 +12698,18 @@ __metadata: languageName: node linkType: hard +"cosmiconfig@npm:^8.0.0": + version: 8.0.0 + resolution: "cosmiconfig@npm:8.0.0" + dependencies: + import-fresh: ^3.2.1 + js-yaml: ^4.1.0 + parse-json: ^5.0.0 + path-type: ^4.0.0 + checksum: ff4cdf89ac1ae52e7520816622c21a9e04380d04b82d653f5139ec581aa4f7f29e096d46770bc76c4a63c225367e88a1dfa233ea791669a35101f5f9b972c7d1 + languageName: node + linkType: hard + "cp-file@npm:^7.0.0": version: 7.0.0 resolution: "cp-file@npm:7.0.0" @@ -12892,6 +12911,13 @@ __metadata: languageName: node linkType: hard +"css-functions-list@npm:^3.1.0": + version: 3.1.0 + resolution: "css-functions-list@npm:3.1.0" + checksum: 8a7c9d4ae57cb2f01500263e65a21372048d359ca7aa6430a32a736fe2a421decfebe45e579124b9a158ec68aba2eadcd733e568495a7698240d9607d31f681b + languageName: node + linkType: hard + "css-has-pseudo@npm:^0.10.0": version: 0.10.0 resolution: "css-has-pseudo@npm:0.10.0" @@ -13096,6 +13122,16 @@ __metadata: languageName: node linkType: hard +"css-tree@npm:^2.3.1": + version: 2.3.1 + resolution: "css-tree@npm:2.3.1" + dependencies: + mdn-data: 2.0.30 + source-map-js: ^1.0.1 + checksum: 493cc24b5c22b05ee5314b8a0d72d8a5869491c1458017ae5ed75aeb6c3596637dbe1b11dac2548974624adec9f7a1f3a6cf40593dc1f9185eb0e8279543fbc0 + languageName: node + linkType: hard + "css-vars-ponyfill@npm:2.4.7": version: 2.4.7 resolution: "css-vars-ponyfill@npm:2.4.7" @@ -14105,11 +14141,9 @@ __metadata: smoothscroll-polyfill: 0.4.4 start-server-and-test: 1.14.0 storybook-utils: "workspace:*" - stylelint: 13.13.1 - stylelint-config-prettier: 8.0.2 - stylelint-config-recommended: 5.0.0 - stylelint-config-standard: 22.0.0 - stylelint-scss: 3.21.0 + stylelint: 15.1.0 + stylelint-config-recommended: 10.0.1 + stylelint-config-standard-scss: 7.0.1 svg-react-loader: 0.4.6 typescript: 4.5.5 languageName: unknown @@ -15878,15 +15912,6 @@ __metadata: languageName: node linkType: hard -"execall@npm:^2.0.0": - version: 2.0.0 - resolution: "execall@npm:2.0.0" - dependencies: - clone-regexp: ^2.1.0 - checksum: d98ee3e33f6c9001e80970e927fb9f16c6a121d5e250b2f4d6764d4157974f58cbe88613bbf073db05d5342677012002c5de956f4f0c32d10d092b6ff03a085c - languageName: node - linkType: hard - "exit@npm:^0.1.2": version: 0.1.2 resolution: "exit@npm:0.1.2" @@ -16141,7 +16166,7 @@ __metadata: languageName: node linkType: hard -"fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.5": +"fast-glob@npm:^3.1.1": version: 3.2.7 resolution: "fast-glob@npm:3.2.7" dependencies: @@ -16154,6 +16179,19 @@ __metadata: languageName: node linkType: hard +"fast-glob@npm:^3.2.12": + version: 3.2.12 + resolution: "fast-glob@npm:3.2.12" + dependencies: + "@nodelib/fs.stat": ^2.0.2 + "@nodelib/fs.walk": ^1.2.3 + glob-parent: ^5.1.2 + merge2: ^1.3.0 + micromatch: ^4.0.4 + checksum: 0b1990f6ce831c7e28c4d505edcdaad8e27e88ab9fa65eedadb730438cfc7cde4910d6c975d6b7b8dc8a73da4773702ebcfcd6e3518e73938bb1383badfe01c2 + languageName: node + linkType: hard + "fast-glob@npm:^3.2.9": version: 3.2.11 resolution: "fast-glob@npm:3.2.11" @@ -16214,6 +16252,13 @@ __metadata: languageName: node linkType: hard +"fastest-levenshtein@npm:^1.0.16": + version: 1.0.16 + resolution: "fastest-levenshtein@npm:1.0.16" + checksum: a78d44285c9e2ae2c25f3ef0f8a73f332c1247b7ea7fb4a191e6bb51aa6ee1ef0dfb3ed113616dcdc7023e18e35a8db41f61c8d88988e877cf510df8edafbc71 + languageName: node + linkType: hard + "fastq@npm:^1.13.0, fastq@npm:^1.6.0": version: 1.13.0 resolution: "fastq@npm:1.13.0" @@ -17977,7 +18022,7 @@ __metadata: languageName: node linkType: hard -"get-stdin@npm:8.0.0, get-stdin@npm:^8.0.0": +"get-stdin@npm:8.0.0": version: 8.0.0 resolution: "get-stdin@npm:8.0.0" checksum: 40128b6cd25781ddbd233344f1a1e4006d4284906191ed0a7d55ec2c1a3e44d650f280b2c9eeab79c03ac3037da80257476c0e4e5af38ddfb902d6ff06282d77 @@ -18484,17 +18529,6 @@ __metadata: languageName: node linkType: hard -"gonzales-pe@npm:^4.3.0": - version: 4.3.0 - resolution: "gonzales-pe@npm:4.3.0" - dependencies: - minimist: ^1.2.5 - bin: - gonzales: bin/gonzales.js - checksum: 49d60fc49ad35639e5d55923c1516d3ec2e4de5e6e5913ec3458a479b66623e54a060d568295349b0bb9f96ee970c473ff984d4b82a5cfeaf736c55f0d6dc3b7 - languageName: node - linkType: hard - "got@npm:^11.8.5": version: 11.8.5 resolution: "got@npm:11.8.5" @@ -19229,6 +19263,13 @@ __metadata: languageName: node linkType: hard +"html-tags@npm:^3.2.0": + version: 3.2.0 + resolution: "html-tags@npm:3.2.0" + checksum: a0c9e96ac26c84adad9cc66d15d6711a17f60acda8d987218f1d4cbaacd52864939b230e635cce5a1179f3ddab2a12b9231355617dfbae7945fcfec5e96d2041 + languageName: node + linkType: hard + "html-void-elements@npm:^1.0.0": version: 1.0.5 resolution: "html-void-elements@npm:1.0.5" @@ -19270,7 +19311,7 @@ __metadata: languageName: node linkType: hard -"htmlparser2@npm:^3.10.0, htmlparser2@npm:^3.9.1": +"htmlparser2@npm:^3.9.1": version: 3.10.1 resolution: "htmlparser2@npm:3.10.1" dependencies: @@ -19533,6 +19574,13 @@ __metadata: languageName: node linkType: hard +"ignore@npm:^5.2.4": + version: 5.2.4 + resolution: "ignore@npm:5.2.4" + checksum: 3d4c309c6006e2621659311783eaea7ebcd41fe4ca1d78c91c473157ad6666a57a2df790fe0d07a12300d9aac2888204d7be8d59f9aaf665b1c7fcdb432517ef + languageName: node + linkType: hard + "immer@npm:^9.0.7": version: 9.0.14 resolution: "immer@npm:9.0.14" @@ -20464,13 +20512,6 @@ __metadata: languageName: node linkType: hard -"is-regexp@npm:^2.0.0": - version: 2.1.0 - resolution: "is-regexp@npm:2.1.0" - checksum: 502f8e09faddc2e360350d3fa88dfb3af47b3c8e0bea1d0fe9903a1265cb199547cc11c99e9ee27cb010f678f6b48e52e92273860b68f6339e463e034f21859c - languageName: node - linkType: hard - "is-relative-url@npm:^3.0.0": version: 3.0.0 resolution: "is-relative-url@npm:3.0.0" @@ -22130,10 +22171,10 @@ __metadata: languageName: node linkType: hard -"known-css-properties@npm:^0.21.0": - version: 0.21.0 - resolution: "known-css-properties@npm:0.21.0" - checksum: 28a47943cdeb04bf1690d013e732743b855bb21ae4290afeb34fb0b251c2f75b901bb9f2c92a919fa6cdbe8186827528b47569f660143b4932b42423bf90a628 +"known-css-properties@npm:^0.26.0": + version: 0.26.0 + resolution: "known-css-properties@npm:0.26.0" + checksum: e706f4af9d2683202df9f717e7d713f0f8c3330f155842c40d8f3b2a5837956c34aeb7ba08760977ccde1afce8b5377e29b40eb3e5c0b42bef28ddd108543cfb languageName: node linkType: hard @@ -23581,19 +23622,6 @@ __metadata: languageName: node linkType: hard -"mdast-util-from-markdown@npm:^0.8.0": - version: 0.8.5 - resolution: "mdast-util-from-markdown@npm:0.8.5" - dependencies: - "@types/mdast": ^3.0.0 - mdast-util-to-string: ^2.0.0 - micromark: ~2.11.0 - parse-entities: ^2.0.0 - unist-util-stringify-position: ^2.0.0 - checksum: 5a9d0d753a42db763761e874c22365d0c7c9934a5a18b5ff76a0643610108a208a041ffdb2f3d3dd1863d3d915225a4020a0aade282af0facfd0df110601eee6 - languageName: node - linkType: hard - "mdast-util-gfm-autolink-literal@npm:^0.1.0": version: 0.1.3 resolution: "mdast-util-gfm-autolink-literal@npm:0.1.3" @@ -23728,6 +23756,13 @@ __metadata: languageName: node linkType: hard +"mdn-data@npm:2.0.30": + version: 2.0.30 + resolution: "mdn-data@npm:2.0.30" + checksum: d6ac5ac7439a1607df44b22738ecf83f48e66a0874e4482d6424a61c52da5cde5750f1d1229b6f5fa1b80a492be89465390da685b11f97d62b8adcc6e88189aa + languageName: node + linkType: hard + "mdurl@npm:^1.0.0": version: 1.0.1 resolution: "mdurl@npm:1.0.1" @@ -25195,13 +25230,6 @@ __metadata: languageName: node linkType: hard -"normalize-selector@npm:^0.2.0": - version: 0.2.0 - resolution: "normalize-selector@npm:0.2.0" - checksum: 6cc88334df26cf1f809692892f4069e1112958574403d0a6753fe5b1e41707170e242e1602e21fa62ea92618827882c4d18a773bc99075a77553bd527eec9930 - languageName: node - linkType: hard - "normalize-svg-path@npm:^1.0.0": version: 1.1.0 resolution: "normalize-svg-path@npm:1.1.0" @@ -27292,18 +27320,6 @@ __metadata: languageName: node linkType: hard -"postcss-html@npm:^0.36.0": - version: 0.36.0 - resolution: "postcss-html@npm:0.36.0" - dependencies: - htmlparser2: ^3.10.0 - peerDependencies: - postcss: ">=5.0.0" - postcss-syntax: ">=0.36.0" - checksum: 5f340df1d9e1595a6d0051cca408efa86efa77a51efe570ab4db6c463b05936f9582b143be8eedc3ba7fd3ed313f6a6838e11e31abcefc3543486b45ba3893e1 - languageName: node - linkType: hard - "postcss-image-set-function@npm:^3.0.1": version: 3.0.1 resolution: "postcss-image-set-function@npm:3.0.1" @@ -27334,15 +27350,6 @@ __metadata: languageName: node linkType: hard -"postcss-less@npm:^3.1.4": - version: 3.1.4 - resolution: "postcss-less@npm:3.1.4" - dependencies: - postcss: ^7.0.14 - checksum: f18d002e114c62bbdc71c0cfa5723d725492301b5079311a531618390dfffbe12f544c3820be5bd9b1447100508187827944b78ff86e7b31a0737347fc8b9882 - languageName: node - linkType: hard - "postcss-loader@npm:^4.2.0": version: 4.3.0 resolution: "postcss-loader@npm:4.3.0" @@ -27835,31 +27842,21 @@ __metadata: languageName: node linkType: hard -"postcss-safe-parser@npm:^4.0.2": - version: 4.0.2 - resolution: "postcss-safe-parser@npm:4.0.2" - dependencies: - postcss: ^7.0.26 - checksum: b812832c06f9fc17b74b714f9c07de80fa770a1535a103b06b679f33b8e09caf60dff1e1eca489613f4ce2bb6439cd949b7d026c843aa9b45bb50f0168b75023 - languageName: node - linkType: hard - -"postcss-sass@npm:^0.4.4": - version: 0.4.4 - resolution: "postcss-sass@npm:0.4.4" - dependencies: - gonzales-pe: ^4.3.0 - postcss: ^7.0.21 - checksum: d361114e5a6a6cc65db9ab71d2af2fe82df8876ce1135b6569498cbf4f3e303312edf430de925bd0d5b110f482ed55a44143da07621726cfdd07e71917390b58 +"postcss-safe-parser@npm:^6.0.0": + version: 6.0.0 + resolution: "postcss-safe-parser@npm:6.0.0" + peerDependencies: + postcss: ^8.3.3 + checksum: 06c733eaad83a3954367e7ee02ddfe3796e7a44d4299ccf9239f40964a4daac153c7d77613f32964b5a86c0c6c2f6167738f31d578b73b17cb69d0c4446f0ebe languageName: node linkType: hard -"postcss-scss@npm:^2.1.1": - version: 2.1.1 - resolution: "postcss-scss@npm:2.1.1" - dependencies: - postcss: ^7.0.6 - checksum: 61535f04652daed70c8ffa13589de81f4d9f607d87ccf1e2b494b0edfabc388853058229c8070f559503f4963e6dedc3690d4f587f4a034b7c23aa6fc03f251c +"postcss-scss@npm:^4.0.2": + version: 4.0.3 + resolution: "postcss-scss@npm:4.0.3" + peerDependencies: + postcss: ^8.3.3 + checksum: d11110376ce2dcf624426d9edfb49d794d4f628aa4253849e841047761563ac2fe6e79a98aa46f8ed7f687cedd8c475a0956fa5e9e6802f8448ccd6538955b48 languageName: node linkType: hard @@ -27904,6 +27901,26 @@ __metadata: languageName: node linkType: hard +"postcss-selector-parser@npm:^6.0.11": + version: 6.0.11 + resolution: "postcss-selector-parser@npm:6.0.11" + dependencies: + cssesc: ^3.0.0 + util-deprecate: ^1.0.2 + checksum: 0b01aa9c2d2c8dbeb51e9b204796b678284be9823abc8d6d40a8b16d4149514e922c264a8ed4deb4d6dbced564b9be390f5942c058582d8656351516d6c49cde + languageName: node + linkType: hard + +"postcss-selector-parser@npm:^6.0.6": + version: 6.0.9 + resolution: "postcss-selector-parser@npm:6.0.9" + dependencies: + cssesc: ^3.0.0 + util-deprecate: ^1.0.2 + checksum: f8161ab4d3e5c76b8467189c6d164ba0f6b6e74677435f29e34caa1df01e052b582b4ae4f7468b2243c4befdd8bdcdb7685542d1b2fca8deae21b3e849c78802 + languageName: node + linkType: hard + "postcss-svgo@npm:^5.0.2": version: 5.0.2 resolution: "postcss-svgo@npm:5.0.2" @@ -27928,15 +27945,6 @@ __metadata: languageName: node linkType: hard -"postcss-syntax@npm:^0.36.2": - version: 0.36.2 - resolution: "postcss-syntax@npm:0.36.2" - peerDependencies: - postcss: ">=5.0.0" - checksum: 812baee602910903b8b77391583721613951d87dbc8baff140879069ff98423392675c4ddfdf073418f4a699ee5d4dd020914bad07504c62f9f333211bf979b8 - languageName: node - linkType: hard - "postcss-unique-selectors@npm:^5.0.1": version: 5.0.1 resolution: "postcss-unique-selectors@npm:5.0.1" @@ -27997,7 +28005,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^7.0.14, postcss@npm:^7.0.17, postcss@npm:^7.0.2, postcss@npm:^7.0.21, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.35, postcss@npm:^7.0.36, postcss@npm:^7.0.5, postcss@npm:^7.0.6": +"postcss@npm:^7.0.14, postcss@npm:^7.0.17, postcss@npm:^7.0.2, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.36, postcss@npm:^7.0.5, postcss@npm:^7.0.6": version: 7.0.39 resolution: "postcss@npm:7.0.39" dependencies: @@ -28018,7 +28026,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.19": +"postcss@npm:^8.4.19, postcss@npm:^8.4.21": version: 8.4.21 resolution: "postcss@npm:8.4.21" dependencies: @@ -29557,15 +29565,6 @@ __metadata: languageName: node linkType: hard -"remark-parse@npm:^9.0.0": - version: 9.0.0 - resolution: "remark-parse@npm:9.0.0" - dependencies: - mdast-util-from-markdown: ^0.8.0 - checksum: 50104880549639b7dd7ae6f1e23c214915fe9c054f02f3328abdaee3f6de6d7282bf4357c3c5b106958fe75e644a3c248c2197755df34f9955e8e028fc74868f - languageName: node - linkType: hard - "remark-retext@npm:^3.1.3": version: 3.1.3 resolution: "remark-retext@npm:3.1.3" @@ -29606,15 +29605,6 @@ __metadata: languageName: node linkType: hard -"remark-stringify@npm:^9.0.0": - version: 9.0.1 - resolution: "remark-stringify@npm:9.0.1" - dependencies: - mdast-util-to-markdown: ^0.6.0 - checksum: 93f46076f4d96ab1946d13e7dd43e83088480ac6b1dfe05a65e2c2f0e33d1f52a50175199b464a81803fc0f5b3bf182037665f89720b30515eba37bec4d63d56 - languageName: node - linkType: hard - "remark@npm:^10.0.1": version: 10.0.1 resolution: "remark@npm:10.0.1" @@ -29626,17 +29616,6 @@ __metadata: languageName: node linkType: hard -"remark@npm:^13.0.0": - version: 13.0.0 - resolution: "remark@npm:13.0.0" - dependencies: - remark-parse: ^9.0.0 - remark-stringify: ^9.0.0 - unified: ^9.1.0 - checksum: e3432bfa1b0029680302e99a6356c08789b3e908457a71eca37ada6a58497e302f08bd5f62fbad840082a8348c181b7f6f981aaf3cd3112207583ddf793a2429 - languageName: node - linkType: hard - "remove-bom-buffer@npm:^3.0.0": version: 3.0.0 resolution: "remove-bom-buffer@npm:3.0.0" @@ -31309,15 +31288,6 @@ __metadata: languageName: node linkType: hard -"specificity@npm:^0.4.1": - version: 0.4.1 - resolution: "specificity@npm:0.4.1" - bin: - specificity: ./bin/specificity - checksum: e558f1098f85aa54a8e90277309ac0d1913c84812c0bd349aa449076aa700964f71ab69f04f5fda9b7898bef9b7da3faa1cad9caedfd3f1a1ebfebedc18604ab - languageName: node - linkType: hard - "split-on-first@npm:^1.0.0": version: 1.1.0 resolution: "split-on-first@npm:1.1.0" @@ -32147,108 +32117,123 @@ __metadata: languageName: node linkType: hard -"stylelint-config-prettier@npm:8.0.2": - version: 8.0.2 - resolution: "stylelint-config-prettier@npm:8.0.2" +"stylelint-config-recommended-scss@npm:^9.0.0": + version: 9.0.1 + resolution: "stylelint-config-recommended-scss@npm:9.0.1" + dependencies: + postcss-scss: ^4.0.2 + stylelint-config-recommended: ^10.0.1 + stylelint-scss: ^4.4.0 peerDependencies: - stylelint: ">=11.0.0" - bin: - stylelint-config-prettier: bin/check.js - stylelint-config-prettier-check: bin/check.js - checksum: 6a3bfdf840b7e0b01875e68a0b144d9c02495a1038167c32fc03b0f76d07d989bbe90dec1552b9f5f79119f27b4f1780acde05ee23d5034d7e1ffbdcb362c6d8 + postcss: ^8.3.3 + stylelint: ^15.0.0 + peerDependenciesMeta: + postcss: + optional: true + checksum: 1dd358947dbf350ecc45855b700ed38349b69e3e6d9ceacbd2006fd45a0b46c96805c76e4944fdabb8a49fbc0e0986477f89ce08fe3cb50cd3057e688a803478 languageName: node linkType: hard -"stylelint-config-recommended@npm:5.0.0, stylelint-config-recommended@npm:^5.0.0": - version: 5.0.0 - resolution: "stylelint-config-recommended@npm:5.0.0" +"stylelint-config-recommended@npm:10.0.1, stylelint-config-recommended@npm:^10.0.1": + version: 10.0.1 + resolution: "stylelint-config-recommended@npm:10.0.1" peerDependencies: - stylelint: ^13.13.0 - checksum: 574468542e9f143838feff91771a5901454d6ed89c671bc561373e0509d1414d4a856e5e251c22630c18eb02819c94137eb7a091959dc225f0d91a3eb49538c4 + stylelint: ^15.0.0 + checksum: 585766be57c2f22d49f76f27b9198a0e1ec812ea56263f082cfa0aea05c50ede68250da5a50ae4d2eb19129c973ca033a6cad9a7535d2f81c78b4caf1e2eea0f languageName: node linkType: hard -"stylelint-config-standard@npm:22.0.0": - version: 22.0.0 - resolution: "stylelint-config-standard@npm:22.0.0" +"stylelint-config-standard-scss@npm:7.0.1": + version: 7.0.1 + resolution: "stylelint-config-standard-scss@npm:7.0.1" dependencies: - stylelint-config-recommended: ^5.0.0 + stylelint-config-recommended-scss: ^9.0.0 + stylelint-config-standard: ^30.0.1 peerDependencies: - stylelint: ^13.13.0 - checksum: 57497397c56f19f8f1387d461d06089b6b6c187dcdc5bf85006b2b94f88be021afa77545d6938543ffb82be10a200a58d160ee672f1379d4af1adcb723e5f9f8 + postcss: ^8.3.3 + stylelint: ^15.0.0 + peerDependenciesMeta: + postcss: + optional: true + checksum: 99aa0241c1ec07a36975489746f1eb15268df03ddcc5ec3370c72f507872135a1214360df7ad4f60162145b910700ee4e8b4604ee4a1c158f69eda2fd07eede4 languageName: node linkType: hard -"stylelint-scss@npm:3.21.0": - version: 3.21.0 - resolution: "stylelint-scss@npm:3.21.0" +"stylelint-config-standard@npm:^30.0.1": + version: 30.0.1 + resolution: "stylelint-config-standard@npm:30.0.1" dependencies: - lodash: ^4.17.15 + stylelint-config-recommended: ^10.0.1 + peerDependencies: + stylelint: ^15.0.0 + checksum: db0cce181b654df4960d0c03129f3904c775628cb29a7aadfcb995034c234797b10db50640c85085bf0f2e5fbffc654b20a8c2be38c26ef670691fe7e8c86e86 + languageName: node + linkType: hard + +"stylelint-scss@npm:^4.4.0": + version: 4.4.0 + resolution: "stylelint-scss@npm:4.4.0" + dependencies: + lodash: ^4.17.21 postcss-media-query-parser: ^0.2.3 postcss-resolve-nested-selector: ^0.1.1 - postcss-selector-parser: ^6.0.2 + postcss-selector-parser: ^6.0.6 postcss-value-parser: ^4.1.0 peerDependencies: - stylelint: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 - checksum: 5c16263da4a913bd05871682a4fa90769abcb6a9e3f3d1c2386c7364b2308733af53a71c3ba17dd8646bb0d1a193a19cb3e6d7818bef60057c86f3287df1dc9c + stylelint: ^14.5.1 || ^15.0.0 + checksum: f206bb9014d59af5ccc16f7c0d81bc9126c908f09f3aba296695a200f31c354386d6e2d6177821af761bcfc10fe4be41f3d00d6b2057561710b06d0c30407cc0 languageName: node linkType: hard -"stylelint@npm:13.13.1": - version: 13.13.1 - resolution: "stylelint@npm:13.13.1" +"stylelint@npm:15.1.0": + version: 15.1.0 + resolution: "stylelint@npm:15.1.0" dependencies: - "@stylelint/postcss-css-in-js": ^0.37.2 - "@stylelint/postcss-markdown": ^0.36.2 - autoprefixer: ^9.8.6 + "@csstools/css-parser-algorithms": ^2.0.1 + "@csstools/css-tokenizer": ^2.0.1 + "@csstools/media-query-list-parser": ^2.0.1 + "@csstools/selector-specificity": ^2.1.1 balanced-match: ^2.0.0 - chalk: ^4.1.1 - cosmiconfig: ^7.0.0 - debug: ^4.3.1 - execall: ^2.0.0 - fast-glob: ^3.2.5 - fastest-levenshtein: ^1.0.12 + colord: ^2.9.3 + cosmiconfig: ^8.0.0 + css-functions-list: ^3.1.0 + css-tree: ^2.3.1 + debug: ^4.3.4 + fast-glob: ^3.2.12 + fastest-levenshtein: ^1.0.16 file-entry-cache: ^6.0.1 - get-stdin: ^8.0.0 global-modules: ^2.0.0 - globby: ^11.0.3 + globby: ^11.1.0 globjoin: ^0.1.4 - html-tags: ^3.1.0 - ignore: ^5.1.8 + html-tags: ^3.2.0 + ignore: ^5.2.4 import-lazy: ^4.0.0 imurmurhash: ^0.1.4 - known-css-properties: ^0.21.0 - lodash: ^4.17.21 - log-symbols: ^4.1.0 + is-plain-object: ^5.0.0 + known-css-properties: ^0.26.0 mathml-tag-names: ^2.1.3 meow: ^9.0.0 - micromatch: ^4.0.4 - normalize-selector: ^0.2.0 - postcss: ^7.0.35 - postcss-html: ^0.36.0 - postcss-less: ^3.1.4 + micromatch: ^4.0.5 + normalize-path: ^3.0.0 + picocolors: ^1.0.0 + postcss: ^8.4.21 postcss-media-query-parser: ^0.2.3 postcss-resolve-nested-selector: ^0.1.1 - postcss-safe-parser: ^4.0.2 - postcss-sass: ^0.4.4 - postcss-scss: ^2.1.1 - postcss-selector-parser: ^6.0.5 - postcss-syntax: ^0.36.2 - postcss-value-parser: ^4.1.0 + postcss-safe-parser: ^6.0.0 + postcss-selector-parser: ^6.0.11 + postcss-value-parser: ^4.2.0 resolve-from: ^5.0.0 - slash: ^3.0.0 - specificity: ^0.4.1 - string-width: ^4.2.2 - strip-ansi: ^6.0.0 + string-width: ^4.2.3 + strip-ansi: ^6.0.1 style-search: ^0.1.0 - sugarss: ^2.0.0 + supports-hyperlinks: ^2.3.0 svg-tags: ^1.0.0 - table: ^6.6.0 + table: ^6.8.1 v8-compile-cache: ^2.3.0 - write-file-atomic: ^3.0.3 + write-file-atomic: ^5.0.0 bin: stylelint: bin/stylelint.js - checksum: 9dafa8d90f139e0518753546855df149a8770cead6fc31e40fc0b1904f7698a734767b441c0ba44dd694c846491708c6127dd0e5bb6917507ffe230dd40f0b8a + checksum: 65cb90cf52fd6214999affd4463090ad52fa2735471987a79860028ed8b4149670158fd56e2c2c7f0efff3d7070329ba167a0fa1c4bfc0cd79dc841ed113a20e languageName: node linkType: hard @@ -32290,15 +32275,6 @@ __metadata: languageName: node linkType: hard -"sugarss@npm:^2.0.0": - version: 2.0.0 - resolution: "sugarss@npm:2.0.0" - dependencies: - postcss: ^7.0.2 - checksum: 777abf31671b67aafc5bb6dbca0853070ff9c129b7a52e90cfbe1a24ff069765e53b03767f85407386edf01c26fe2c2861aae2841f9a391751df891694137839 - languageName: node - linkType: hard - "supports-color@npm:*": version: 9.2.2 resolution: "supports-color@npm:9.2.2" @@ -32359,6 +32335,16 @@ __metadata: languageName: node linkType: hard +"supports-hyperlinks@npm:^2.3.0": + version: 2.3.0 + resolution: "supports-hyperlinks@npm:2.3.0" + dependencies: + has-flag: ^4.0.0 + supports-color: ^7.0.0 + checksum: 9ee0de3c8ce919d453511b2b1588a8205bd429d98af94a01df87411391010fe22ca463f268c84b2ce2abad019dfff8452aa02806eeb5c905a8d7ad5c4f4c52b8 + languageName: node + linkType: hard + "supports-preserve-symlinks-flag@npm:^1.0.0": version: 1.0.0 resolution: "supports-preserve-symlinks-flag@npm:1.0.0" @@ -32576,16 +32562,16 @@ __metadata: languageName: node linkType: hard -"table@npm:^6.6.0": - version: 6.7.3 - resolution: "table@npm:6.7.3" +"table@npm:^6.8.1": + version: 6.8.1 + resolution: "table@npm:6.8.1" dependencies: ajv: ^8.0.1 lodash.truncate: ^4.4.2 slice-ansi: ^4.0.0 string-width: ^4.2.3 strip-ansi: ^6.0.1 - checksum: 61d732f51108222d158eca2a91bfaae41c14e0cba6eb04c702ec5a1b136219d4925940d5c4d9aff5720bc4e2385dcbe2ed52dcf37bbbd8b2be48c01c1cf2ed1d + checksum: 08249c7046125d9d0a944a6e96cfe9ec66908d6b8a9db125531be6eb05fa0de047fd5542e9d43b4f987057f00a093b276b8d3e19af162a9c40db2681058fd306 languageName: node linkType: hard @@ -33683,20 +33669,6 @@ __metadata: languageName: node linkType: hard -"unified@npm:^9.1.0": - version: 9.2.2 - resolution: "unified@npm:9.2.2" - dependencies: - bail: ^1.0.0 - extend: ^3.0.0 - is-buffer: ^2.0.0 - is-plain-obj: ^2.0.0 - trough: ^1.0.0 - vfile: ^4.0.0 - checksum: 7c24461be7de4145939739ce50d18227c5fbdf9b3bc5a29dabb1ce26dd3e8bd4a1c385865f6f825f3b49230953ee8b591f23beab3bb3643e3e9dc37aa8a089d5 - languageName: node - linkType: hard - "union-value@npm:^1.0.0": version: 1.0.1 resolution: "union-value@npm:1.0.1" @@ -33767,15 +33739,6 @@ __metadata: languageName: node linkType: hard -"unist-util-find-all-after@npm:^3.0.2": - version: 3.0.2 - resolution: "unist-util-find-all-after@npm:3.0.2" - dependencies: - unist-util-is: ^4.0.0 - checksum: 74b1fe81e3a980cc281b8d46a4cbc41940ece45608cae41d8021f245a73e7ed885222b80c1a2391137e04d2cda4de009416356aa7f4462d5e875c61579e33981 - languageName: node - linkType: hard - "unist-util-generated@npm:^1.0.0": version: 1.1.6 resolution: "unist-util-generated@npm:1.1.6" @@ -35289,7 +35252,7 @@ __metadata: languageName: node linkType: hard -"write-file-atomic@npm:^3.0.0, write-file-atomic@npm:^3.0.3": +"write-file-atomic@npm:^3.0.0": version: 3.0.3 resolution: "write-file-atomic@npm:3.0.3" dependencies: @@ -35311,6 +35274,16 @@ __metadata: languageName: node linkType: hard +"write-file-atomic@npm:^5.0.0": + version: 5.0.0 + resolution: "write-file-atomic@npm:5.0.0" + dependencies: + imurmurhash: ^0.1.4 + signal-exit: ^3.0.7 + checksum: 6ee16b195572386cb1c905f9d29808f77f4de2fd063d74a6f1ab6b566363832d8906a493b764ee715e57ab497271d5fc91642a913724960e8e845adf504a9837 + languageName: node + linkType: hard + "ws@npm:^8.2.3": version: 8.5.0 resolution: "ws@npm:8.5.0"